/* ============================================================
   Sohail Buchhaltungsservice — Premium-Theme „Indigo-Kristall (#2F4D13)"
   Weiß / Eisblau mit Ink-Akzenten. Stand: 28.07.2026
   Alle Klassennamen bleiben gleich, damit die bestehenden
   HTML-Seiten unverändert weiterlaufen.
   ============================================================ */
:root {
  /* Marke — Kristall */
  --ink-900:    #1B2E0B;
  --ink-800:    #2F4D13;
  --crystal-700:#3E6619;
  --crystal-600:#4F821F;
  --crystal-400:#A9C98A;
  --crystal-200:#DCE8CE;
  --crystal-100:#EFF4E8;
  --white:      #FFFFFF;
  --rose-500:   #B4566B;

  /* Aliase auf die alten Namen (damit nichts bricht) */
  --petrol-700: var(--crystal-700);
  --petrol-600: var(--crystal-600);
  --petrol-400: var(--crystal-400);
  --mint-300:   var(--crystal-600);
  --emerald-500:var(--crystal-600);
  --amber-300:  #9AA7B4;
  --red-400:    var(--rose-500);
  --red-600:    var(--rose-500);

  /* Flächen */
  --bg-page:   #F2F5EC;
  --bg-tint:   #E5EDD9;
  --bg-deep:   #1B2E0B;
  --bg-dark:   var(--bg-deep);
  --surface-page: var(--bg-page);
  --surface-tint: var(--bg-tint);
  --surface-card: var(--white);
  --surface-card-strong: var(--white);

  /* Linien */
  --border-muted:  rgba(27, 46, 11, 0.12);
  --border-strong: rgba(27, 46, 11, 0.20);
  --slate-100: rgba(27, 46, 11, 0.08);
  --slate-50:  rgba(27, 46, 11, 0.05);
  --slate-700: rgba(255, 255, 255, 0.14);
  --slate-300: #4E5B41;
  --slate-400: #7E8A70;
  --slate-600: #4E5B41;

  /* Text */
  --text-primary:   #1B2E0B;
  --text-secondary: #4E5B41;
  --text-muted:     #7E8A70;
  --text-brand:     var(--crystal-700);
  --text-inverse:   #EAF1F6;
  --text-inverse-secondary: #A9BAC8;

  /* Akzent */
  --accent:       var(--crystal-600);
  --accent-hover: var(--crystal-700);
  --accent-soft:  rgba(79, 130, 31, 0.12);
  --success:      var(--crystal-600);

  /* Typo */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;

  /* Form */
  --radius-sm: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(27, 46, 11, 0.06);
  --shadow-md: 0 10px 30px rgba(27, 46, 11, 0.08);
  --shadow-lg: 0 24px 60px rgba(27, 46, 11, 0.14);
  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--crystal-600);

  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  background: #F1F5EA;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Feines Korn — auf Hell dezent multiplizierend */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999; pointer-events: none;
  opacity: 0.022; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 0.5em; font-weight: 700; color: var(--text-primary); text-wrap: pretty; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.0; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.85rem); }
h3 { font-size: 1.28rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--text-brand); text-decoration: none; transition: color 200ms ease; }
a:hover { color: var(--ink-900); text-decoration: none; }
ul { padding-left: 1.25rem; }
img { max-width: 100%; display: block; }
.num, .price { font-family: var(--font-mono); }
strong, b { color: var(--text-primary); }

:is(a, button, input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 900px) { .container { padding: 0 40px; } }

.section { padding: 88px 0; position: relative; }
@media (min-width: 768px) { .section { padding: 128px 0; } }
.section--tint { background: var(--bg-tint); }
.section--dark { background: var(--bg-deep); color: var(--text-inverse); }
.section--dark h2 { color: var(--white); }
.section--dark p { color: var(--text-inverse-secondary); }
.section--dark .btn--primary { background: linear-gradient(135deg, #FFFFFF, var(--crystal-200)); color: var(--ink-900); }
.section--dark .btn--primary:hover { color: var(--ink-900); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crystal-700);
  background: var(--crystal-100);
  border: 1px solid rgba(79, 130, 31, 0.264);
  padding: 7px 14px; border-radius: var(--radius-pill);
  margin-bottom: 18px;
}
.section--dark .eyebrow { color: var(--crystal-400); background: rgba(110, 160, 60, 0.18); border-color: rgba(110, 160, 60, 0.42); }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lead { font-size: 1.14rem; line-height: 1.7; color: var(--text-secondary); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  padding: 14px 26px; min-height: 52px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform 200ms cubic-bezier(.16,1,.3,1), box-shadow 250ms ease, background 200ms ease, color 200ms ease;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  color: var(--white);
  box-shadow: 0 10px 26px rgba(27, 46, 11, 0.26);
}
.btn--primary:hover { color: var(--white); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(27, 46, 11, 0.34); }
.btn--primary:active { transform: none; }
.btn--secondary { background: var(--white); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background: var(--white); color: var(--ink-900); border-color: var(--crystal-600); transform: translateY(-2px); }
.btn--ghost-dark { background: rgba(255,255,255,0.08); color: var(--white); border-color: rgba(255,255,255,0.24); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.16); color: var(--white); transform: translateY(-2px); }
.btn--sm { padding: 11px 20px; min-height: 44px; font-size: 0.92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 248, 251, 0.84);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-muted);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; }
.wordmark { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.12rem; color: var(--text-primary); letter-spacing: -0.02em; }
.wordmark:hover { text-decoration: none; color: var(--ink-900); }
.wordmark__glyph {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  color: var(--crystal-200); border-radius: 11px;
  font-weight: 700; font-size: 1.02rem;
  box-shadow: 0 6px 16px rgba(27, 46, 11, 0.26);
}
.wordmark small { display: block; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; margin-top: 4px; }
.main-nav { display: none; align-items: center; gap: 28px; }
.main-nav a { color: var(--text-secondary); font-weight: 500; font-size: 0.95rem; }
.main-nav a:hover { color: var(--ink-900); }
.main-nav a[aria-current="page"] { color: var(--crystal-700); font-weight: 600; }
.header-cta { display: none; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  background: var(--white); border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
  color: var(--text-primary); cursor: pointer;
}
@media (min-width: 900px) {
  .main-nav, .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
.mobile-nav { display: none; border-top: 1px solid var(--border-muted); background: var(--white); }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: 15px 24px; font-weight: 500; color: var(--text-primary); border-bottom: 1px solid var(--slate-100); }
.mobile-nav a:hover { background: var(--crystal-100); color: var(--ink-900); }
.mobile-nav .btn { margin: 16px 24px; display: flex; }

/* ---------- Beleg-Panel (Glas) ---------- */
.beleg-panel {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
.beleg-panel__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-muted);
  background: rgba(237, 244, 249, 0.7);
}
.beleg-panel__head strong { display: block; font-size: 0.96rem; color: var(--text-primary); }
.beleg-panel__head span:not(.beleg-chip):not(.hero__badge) { font-size: 0.78rem; color: var(--text-muted); }
.beleg-panel__head .beleg-chip { margin-left: auto; }
.beleg-list { list-style: none; margin: 0; padding: 8px 0; display: grid; }
.beleg-list li { display: flex; align-items: center; gap: 14px; padding: 14px 22px; }
.beleg-list li + li { border-top: 1px solid var(--slate-100); }
.beleg-list li > div { min-width: 0; }
.beleg-list strong { display: block; font-size: 0.9rem; color: var(--text-primary); font-weight: 600; }
.beleg-list li > div > span { font-size: 0.78rem; color: var(--text-muted); }
.beleg-list__icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--crystal-100); color: var(--crystal-700);
  border: 1px solid rgba(79, 130, 31, 0.216);
  border-radius: var(--radius-sm);
}
.beleg-list__icon svg { width: 20px; height: 20px; }
.beleg-list .beleg-chip { margin-left: auto; flex: none; }
.beleg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(27, 46, 11, 0.06); border: 1px solid var(--border-muted);
  color: var(--text-secondary); white-space: nowrap;
}
.beleg-chip svg { width: 13px; height: 13px; }
.beleg-chip--done { background: var(--crystal-200); border-color: rgba(79, 130, 31, 0.336); color: var(--crystal-700); }
.beleg-chip--progress { background: rgba(14,23,32,0.06); border-color: var(--border-muted); color: var(--text-muted); }
.beleg-chip--live { background: var(--crystal-200); border-color: rgba(79, 130, 31, 0.36); color: var(--crystal-700); }
.beleg-panel__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; border-top: 1px solid var(--border-muted);
}
.beleg-panel__foot > div { display: flex; align-items: baseline; gap: 10px; }
.beleg-panel__foot > div > span:last-child { font-size: 0.8rem; color: var(--text-muted); }
.beleg-panel__stat { font-size: 1.6rem; font-weight: 700; color: var(--crystal-700); }

/* ---------- Hero ---------- */
.hero { padding: 76px 0; position: relative; overflow: hidden; }
@media (min-width: 900px) { .hero { padding: 108px 0; } }
.hero::before {
  content: ""; position: absolute; left: 50%; top: -420px; transform: translateX(-50%);
  width: 1500px; height: 920px; pointer-events: none;
  background: radial-gradient(ellipse at 32% 34%, rgba(110, 160, 60, 0.46), transparent 58%),
              radial-gradient(ellipse at 74% 20%, rgba(220, 232, 206, 0.9), transparent 56%);
  filter: blur(18px);
}
.hero__grid { position: relative; display: grid; gap: 52px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.12fr 0.88fr; gap: 60px; } }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crystal-700);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(79, 130, 31, 0.264);
  padding: 8px 15px; border-radius: var(--radius-pill);
  margin-bottom: 24px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 13px; margin: 32px 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; color: var(--text-secondary); }
.hero__trust li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.82); border: 1px solid var(--border-muted); box-shadow: var(--shadow-sm); }
.hero__trust svg { color: var(--crystal-600); flex: none; }
.hero__card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 20px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden;
}
.hero__photo { aspect-ratio: 4 / 3.4; background: var(--crystal-100); position: relative; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--crystal-200), var(--crystal-100));
  color: var(--crystal-700); font-size: 4rem; font-weight: 700;
}
.hero__card-meta { display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.hero__card-meta strong { display: block; font-size: 0.95rem; color: var(--text-primary); }
.hero__card-meta span { font-size: 0.8rem; color: var(--text-muted); }
.hero__badge {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: var(--crystal-200); color: var(--crystal-700);
  border: 1px solid rgba(79, 130, 31, 0.24);
  border-radius: var(--radius-pill);
}

/* ---------- Karten & Raster ---------- */
.grid { display: grid; gap: 24px; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid { gap: 28px; }
}
.card {
  background: var(--white);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 32px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-secondary); font-size: 0.98rem; }
.icon-tile {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--crystal-100); color: var(--crystal-700);
  border: 1px solid rgba(79, 130, 31, 0.216);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}

/* ---------- Ablauf (3 Schritte) ---------- */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 900px) { .flow { grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: stretch; gap: 0; } }
.flow-step { padding: 34px 30px; }
.flow-step__icon {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900));
  color: var(--crystal-200); border-radius: var(--radius-pill);
  box-shadow: 0 0 0 8px var(--crystal-100);
  margin-bottom: 24px;
}
.flow-step__icon svg { width: 27px; height: 27px; }
.flow-step__num {
  display: block; font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crystal-700); margin-bottom: 8px;
}
.flow-connector { display: none; align-items: center; justify-content: center; color: var(--crystal-400); }
.flow-connector svg { width: 26px; height: 26px; }
@media (min-width: 900px) { .flow-connector { display: flex; } }

/* ---------- Scroll-Reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1); }
  [data-reveal].is-revealed { opacity: 1; transform: none; }
}

/* ---------- Listen ---------- */
.checklist, .crosslist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li, .crosslist li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-secondary); }
.checklist svg { color: var(--crystal-600); flex: none; margin-top: 3px; }
.crosslist svg { color: var(--rose-500); flex: none; margin-top: 3px; }

/* ---------- Preise ---------- */
.pricing-grid { display: grid; gap: 24px; align-items: stretch; }
@media (min-width: 900px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.pricing-card { display: flex; flex-direction: column; position: relative; }
.pricing-card--featured { border-color: rgba(79, 130, 31, 0.42); box-shadow: var(--shadow-lg); }
.pricing-card__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); color: var(--crystal-200);
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill); white-space: nowrap;
  box-shadow: 0 6px 16px rgba(27, 46, 11,0.3);
}
.pricing-card__price { display: flex; align-items: baseline; gap: 7px; margin: 14px 0 2px; }
.pricing-card__price .price { font-size: 2.7rem; font-weight: 700; color: var(--ink-900); line-height: 1; }
.pricing-card__price span { color: var(--text-muted); font-size: 0.9rem; }
.pricing-card__later { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 22px; }
.pricing-card__later .price { text-decoration: none; }
.pricing-card .checklist { margin: 22px 0 30px; flex: 1; }
.pricing-card .btn { width: 100%; }
.intro-banner {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--crystal-200); color: var(--crystal-700);
  border: 1px solid rgba(79, 130, 31, 0.312);
  font-size: 0.88rem; font-weight: 600;
  padding: 9px 18px; border-radius: var(--radius-pill);
}

/* ---------- Formulare ---------- */
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 9px; color: var(--text-primary); }
.field .hint { font-weight: 400; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 1rem;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 15px 17px; min-height: 54px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--crystal-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--crystal-600);
  box-shadow: 0 0 0 4px rgba(79, 130, 31, 0.168);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377869A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 18px;
  padding-right: 44px;
}
.checkbox-row { display: flex; gap: 13px; align-items: flex-start; font-size: 0.92rem; color: var(--text-secondary); }
.checkbox-row input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; accent-color: var(--crystal-600); flex: none; }
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.82rem; color: var(--text-muted); }
.alert { display: none; border-radius: var(--radius-sm); padding: 15px 18px; font-weight: 500; margin-bottom: 24px; }
.alert.is-visible { display: block; }
.alert--success { background: var(--crystal-200); color: var(--crystal-700); border: 1px solid rgba(79, 130, 31, 0.36); }
.alert--error { background: #FCEDF0; color: #8E3A4C; border: 1px solid rgba(180,86,107,0.3); }

/* ---------- Kontakt-Infokarte ---------- */
.contact-aside { display: grid; gap: 16px; align-content: start; }
.contact-aside .card { display: flex; gap: 15px; align-items: flex-start; padding: 22px; }
.contact-aside .icon-tile { margin: 0; width: 42px; height: 42px; flex: none; }
.contact-aside strong { display: block; font-size: 0.96rem; color: var(--text-primary); }
.contact-aside span, .contact-aside a { font-size: 0.9rem; color: var(--text-secondary); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--white);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 0 26px;
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.faq details[open] { border-color: rgba(79, 130, 31, 0.384); box-shadow: var(--shadow-md); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 1.04rem; padding: 21px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--crystal-600); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--text-secondary); padding-bottom: 22px; font-size: 0.98rem; }

/* ---------- CTA-Band ---------- */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 8px; }

/* ---------- Footer (dunkler Anker) ---------- */
.site-footer { background: var(--bg-deep); color: var(--text-inverse-secondary); padding: 72px 0 40px; font-size: 0.94rem; }
.site-footer a { color: var(--text-inverse-secondary); }
.site-footer a:hover { color: var(--crystal-400); }
.site-footer__top { display: grid; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (min-width: 768px) { .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer .wordmark { color: var(--white); }
.site-footer .wordmark__glyph { background: linear-gradient(135deg, #FFFFFF, var(--crystal-200)); color: var(--ink-900); }
.site-footer .wordmark small { color: var(--text-inverse-secondary); }
.site-footer h4 { color: var(--white); font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 16px; font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.footer-disclaimer {
  margin-top: 30px; padding: 22px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  font-size: 0.82rem; line-height: 1.62; color: var(--text-inverse-secondary);
}
.footer-disclaimer strong { color: var(--white); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.84rem; color: var(--text-inverse-secondary); }

/* ---------- Cookie-Banner ---------- */
.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100;
  max-width: 580px; margin: 0 auto;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
}
.consent-banner h4 { margin: 0 0 8px; font-size: 1.06rem; color: var(--text-primary); }
.consent-banner p { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 18px; }
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-banner__actions .btn { flex: 1 1 140px; }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 820px; }
.legal h2 { margin-top: 52px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.legal h3 { margin-top: 34px; font-size: 1.12rem; }
.legal p, .legal li { color: var(--text-secondary); font-size: 0.98rem; }
.legal .card { margin: 26px 0; }

/* ---------- Sprach-/CTA-Streifen (dunkler Kontrast) ---------- */
.lang-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--ink-800), var(--ink-900));
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: 34px 36px; margin-top: 44px;
  box-shadow: var(--shadow-lg);
}
.lang-note::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 18% 0%, rgba(121,180,214,0.36), transparent 58%); pointer-events: none; }
.lang-note > * { position: relative; }
.lang-note strong { font-size: 1.16rem; color: var(--white); }
.lang-note span { color: var(--text-inverse-secondary); font-size: 0.96rem; }
.lang-note .btn { margin-left: auto; background: linear-gradient(135deg, #FFFFFF, var(--crystal-200)); color: var(--ink-900); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.lang-note .btn:hover { color: var(--ink-900); }
@media (max-width: 700px) { .lang-note .btn { margin-left: 0; width: 100%; } }

/* ---------- Zahlen-Band ---------- */
.stats-band { border-top: 1px solid var(--border-muted); border-bottom: 1px solid var(--border-muted); background: var(--bg-tint); }
.stats-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; padding: 32px 0; }
@media (min-width: 768px) { .stats-band__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat .num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.stat span:last-child { font-size: 0.85rem; color: var(--text-muted); }

/* ---------- Problem-Karten ---------- */
.pain-card { position: relative; }
.pain-card .icon-tile { background: #FCEDF0; border-color: rgba(180,86,107,0.22); color: var(--rose-500); }

/* ---------- Fallstudie ---------- */
.case-card { display: grid; gap: 0; overflow: hidden; padding: 0; }
@media (min-width: 900px) { .case-card { grid-template-columns: 0.9fr 1.1fr; } }
.case-card__side {
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  padding: 38px 34px;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.case-card__side h3 { color: var(--white); margin: 0; font-size: 1.6rem; }
.case-card__side p { color: var(--text-inverse-secondary); font-size: 0.96rem; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.case-card__tags .beleg-chip { background: rgba(255,255,255,0.1); color: var(--crystal-400); border-color: rgba(255,255,255,0.18); }
.case-card__body { padding: 38px 34px; display: grid; gap: 24px; }
.case-step { display: flex; gap: 15px; align-items: flex-start; }
.case-step .icon-tile { margin: 0; width: 42px; height: 42px; flex: none; }
.case-step strong { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--crystal-700); margin-bottom: 6px; }
.case-step p { font-size: 0.96rem; color: var(--text-secondary); margin: 0; }

/* ---------- Vergleichstabelle ---------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;
  background: var(--white);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.compare th, .compare td { padding: 15px 18px; text-align: center; font-size: 0.92rem; border-bottom: 1px solid var(--slate-100); color: var(--text-secondary); }
.compare thead th { background: var(--bg-tint); font-weight: 600; font-size: 0.85rem; color: var(--text-primary); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare tbody th { text-align: left; font-weight: 500; color: var(--text-secondary); }
.compare .col-me { background: var(--crystal-100); font-weight: 600; color: var(--text-primary); }
.compare thead .col-me { background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); color: var(--crystal-200); }
.compare .yes { color: var(--crystal-600); }
.compare .no { color: var(--rose-500); }
.compare svg { width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- Prozess (5 Schritte) ---------- */
.steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 16px; max-width: 840px; counter-reset: step; }
.steps li { display: flex; gap: 20px; align-items: flex-start; }
.steps__num {
  flex: none; width: 54px; height: 54px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-900)); color: var(--crystal-200);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-weight: 700;
  box-shadow: 0 0 0 6px var(--crystal-100);
}
.steps .card { flex: 1; padding: 24px 28px; }
.steps h3 { font-size: 1.1rem; margin-bottom: 6px; }
.steps p { font-size: 0.95rem; }

/* ---------- Über mich ---------- */
.about-strip { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .about-strip { grid-template-columns: 0.8fr 1.2fr; } }
.about-strip__photo { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-muted); box-shadow: var(--shadow-lg); }
.about-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 24px; padding: 0; list-style: none; }
.about-facts li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: var(--crystal-700);
  background: var(--crystal-100); border: 1px solid rgba(79, 130, 31, 0.264);
  padding: 8px 15px; border-radius: var(--radius-pill);
}
.about-facts svg { width: 15px; height: 15px; }

/* ---------- Trennlinie ---------- */
.divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(14,23,32,0.12), transparent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   LIQUID GLASS — flüssiges Glas über farbigem Licht
   Ersetzt das Diamant-Facettenmuster. Farben unverändert (#2F4D13).
   ============================================================ */
:root{
  --glass:        rgba(255,255,255,0.52);
  --glass-strong: rgba(255,255,255,0.66);
  --glass-edge:   rgba(255,255,255,0.70);
  --glass-shadow: 0 10px 36px rgba(27,46,11,.10), 0 2px 8px rgba(27,46,11,.06);
  --glass-inset:  inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(47,77,19,.05);
  --glass-blur:   blur(22px) saturate(180%);
  --radius-lg: 26px;
  --radius-sm: 18px;
}

/* Farbiges Licht hinter dem Glas — gibt der Fläche etwas zum Brechen */
body::before{
  content:"";
  position:fixed; inset:-12%;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 32% at 12% 6%,  rgba(79,130,31,.34), transparent 70%),
    radial-gradient(34% 28% at 88% 2%,  rgba(169,201,138,.50), transparent 72%),
    radial-gradient(42% 34% at 80% 46%, rgba(47,77,19,.20), transparent 70%),
    radial-gradient(38% 32% at 14% 62%, rgba(110,160,60,.26), transparent 72%),
    radial-gradient(40% 30% at 62% 92%, rgba(169,201,138,.42), transparent 72%),
    linear-gradient(180deg, #F6F8F1 0%, #EAF0E1 55%, #F2F5EC 100%);
  filter: blur(46px);
}

/* --- Glasflächen --- */
.card,
.beleg-panel,
.hero__card,
.faq details,
.compare,
.consent-banner,
.contact-aside .card{
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  border-radius: var(--radius-lg);
}
.faq details{ border-radius: var(--radius-sm); }
.faq details[open]{ background: var(--glass-strong); border-color: rgba(79,130,31,.30); }
.beleg-panel, .hero__card{ border-radius: 30px; }

/* Kopf- und Fußzeile der Panels transparent lassen */
.beleg-panel__head{ background: rgba(255,255,255,.28); border-bottom-color: rgba(255,255,255,.5); }
.beleg-panel__foot{ border-top-color: rgba(255,255,255,.5); }
.beleg-list li + li{ border-top-color: rgba(255,255,255,.55); }

/* --- Kopfzeile --- */
.site-header{
  background: rgba(246,248,241,.55);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.6);
}

/* --- Getönte Abschnitte werden durchscheinend --- */
.section--tint{ background: rgba(220,232,206,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stats-band{ background: rgba(255,255,255,.34); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-color: rgba(255,255,255,.6); }

/* --- Pillen aus Glas --- */
.eyebrow,
.hero__kicker,
.hero__trust li,
.beleg-chip,
.about-facts li,
.intro-banner{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border-color: rgba(255,255,255,.7);
  box-shadow: 0 3px 12px rgba(27,46,11,.07), inset 0 1px 0 rgba(255,255,255,.9);
}
.beleg-chip--done, .beleg-chip--live{ background: rgba(220,232,206,.72); border-color: rgba(79,130,31,.32); }

/* --- Buttons: Glas mit Lichtkante --- */
.btn--primary{
  box-shadow: 0 10px 28px rgba(27,46,11,.26),
              inset 0 1px 0 rgba(255,255,255,.28),
              inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn--secondary, .btn--ghost-dark{
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 6px 20px rgba(27,46,11,.10), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--text-primary);
}
.btn--secondary:hover, .btn--ghost-dark:hover{ background: rgba(255,255,255,.7); color: var(--text-primary); }

/* --- Eingabefelder aus Glas --- */
.field input, .field select, .field textarea{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 2px rgba(27,46,11,.06);
  border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus{
  background: rgba(255,255,255,.78);
  border-color: rgba(79,130,31,.5);
  box-shadow: 0 0 0 4px rgba(79,130,31,.16), inset 0 1px 2px rgba(27,46,11,.05);
}

/* --- Icon-Kacheln als kleine Glastropfen --- */
.icon-tile{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 4px 14px rgba(27,46,11,.10), inset 0 1px 0 rgba(255,255,255,.95);
  border-radius: 16px;
  color: var(--crystal-700);
}
.beleg-list__icon, .hero__badge{
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

/* --- Dunkle Flächen: getöntes Glas statt Vollton --- */
.lang-note,
.case-card__side,
.section--dark,
.site-footer{
  position: relative;
  background: linear-gradient(150deg, rgba(47,77,19,.92), rgba(27,46,11,.96));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.lang-note{ box-shadow: 0 18px 48px rgba(27,46,11,.28), inset 0 1px 0 rgba(255,255,255,.22); }
.case-card__side{ box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.lang-note::before,
.section--dark::before,
.site-footer::before,
.case-card__side::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 50% at 14% 0%, rgba(255,255,255,.20), transparent 62%);
}
.site-footer > .container, .section--dark > .container{ position: relative; z-index: 1; }
.case-card__side > *{ position: relative; z-index: 1; }
.lang-note > *{ position: relative; z-index: 1; }

/* --- Tabelle --- */
.compare thead th{ background: rgba(255,255,255,.42); }
.compare .col-me{ background: rgba(220,232,206,.55); }
.compare thead .col-me{ background: linear-gradient(150deg, rgba(47,77,19,.94), rgba(27,46,11,.98)); }
.compare th, .compare td{ border-bottom-color: rgba(255,255,255,.55); }

/* --- Flow-Icons als Glaskugeln --- */
.flow-step__icon, .steps__num{
  box-shadow: 0 8px 22px rgba(27,46,11,.26),
              inset 0 1px 0 rgba(255,255,255,.3),
              0 0 0 8px rgba(255,255,255,.35);
}

/* --- Trennlinie --- */
.divider{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent); }

@media (prefers-reduced-motion: reduce){
  body::before{ filter: blur(46px); }
}

/* ============================================================
   TEMPO — Rendering-Kosten senken
   Weichzeichner sind teuer. Sie bleiben nur dort, wo man sie
   wirklich sieht (Kopfzeile, große Glas-Panels, Cookie-Banner).
   Überall sonst: etwas deckendere Fläche ohne backdrop-filter.
   ============================================================ */

/* Der große Lichtverlauf war zusätzlich weichgezeichnet — die
   Radial-Verläufe sind von sich aus weich, der Filter kostete nur. */
body::before{ filter: none; }

/* Korn auf dem Handy abschalten (voller Compositing-Layer pro Frame) */
@media (max-width: 900px){
  body::after{ display: none; }
}

/* --- Flächen ohne Weichzeichner, dafür etwas deckender --- */
.card,
.contact-aside .card,
.faq details,
.compare,
.section--tint,
.stats-band,
.eyebrow,
.hero__kicker,
.hero__trust li,
.beleg-chip,
.about-facts li,
.intro-banner,
.btn--secondary,
.btn--ghost-dark,
.field input, .field select, .field textarea,
.icon-tile,
.lang-note,
.case-card__side,
.section--dark,
.site-footer{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.card, .contact-aside .card{ background: rgba(255,255,255,.74); }
.faq details{ background: rgba(255,255,255,.72); }
.faq details[open]{ background: rgba(255,255,255,.85); }
.compare{ background: rgba(255,255,255,.80); }
.section--tint{ background: rgba(220,232,206,.55); }
.stats-band{ background: rgba(255,255,255,.62); }
.eyebrow, .hero__kicker, .hero__trust li, .beleg-chip, .about-facts li, .intro-banner{ background: rgba(255,255,255,.78); }
.beleg-chip--done, .beleg-chip--live{ background: rgba(220,232,206,.88); }
.btn--secondary, .btn--ghost-dark{ background: rgba(255,255,255,.82); }
.btn--secondary:hover, .btn--ghost-dark:hover{ background: #FFFFFF; }
.field input, .field select, .field textarea{ background: rgba(255,255,255,.82); }
.field input:focus, .field select:focus, .field textarea:focus{ background: #FFFFFF; }
.icon-tile{ background: rgba(255,255,255,.85); }

/* Diese Flächen sind ohnehin fast deckend — Weichzeichner war wirkungslos */
.lang-note, .case-card__side, .section--dark, .site-footer{
  background: linear-gradient(150deg, #2F4D13, #1B2E0B);
}

/* Weichzeichner bleibt nur hier */
.site-header{ backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.beleg-panel, .hero__card{ backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%); }
.consent-banner{ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

/* Animationen nur auf günstigen Eigenschaften */
.btn{ will-change: auto; }