/* ==========================================================================
   Luma Ads – Stylesheet
   Alles ist auf #luma-root gescopet, damit es in Page-Buildern / CMS
   keine Style-Konflikte gibt. Nur die ersten beiden Regeln sind global.

   GRUNDPRINZIP SEIT DEM REDESIGN:
   Die Seite ist HELL. Dunkel ist die Ausnahme und damit ein Akzent.
   Dunkle Abschnitte bekommen im HTML die Klasse .is-dark. Diese Klasse
   schreibt nur die Farb-Variablen um. Alle Bausteine (Karten, Tabellen,
   Regler, Knoepfe) funktionieren dadurch auf beiden Gruenden, ohne dass
   es sie zweimal geben muss.
   ========================================================================== */

/* ==========================================================================
   SCHRIFTEN - lokal ausgeliefert.
   Kein Aufruf an fonts.googleapis.com oder fonts.gstatic.com mehr.
   Dateien liegen in assets/fonts/ (WOFF2).
   Quelle: Google Fonts, SIL Open Font License 1.1.

   Montserrat wird seit dem Redesign nicht mehr gebraucht. Ueberschriften
   laufen in Instrument Serif, alles andere in Inter.
   ========================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url(assets/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* Echte Kursive. Ohne diese Datei wuerde der Browser die Kursive selbst
   berechnen (schraeg gestellte Aufrechte), das sieht bei einer Serife schlecht aus. */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-latin-ext-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #F5F2EC; }
body { margin: 0; background: #F5F2EC; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===================== DESIGN TOKENS ===================== */
#luma-root{
  /* --- HELL: der neue Standard --- */
  --paper:      #F5F2EC;   /* warmes Creme, Grundton der Seite */
  --paper-2:    #EFEBE3;   /* leicht abgesetzte Sektionen */
  --card:       #FFFFFF;   /* Karten auf hellem Grund */

  /* --- DUNKEL: nur noch Akzent-Sektionen --- */
  --deep:       #123A33;   /* Tiefgruen, fuer Kosten / Vergleich / Footer */
  --deep-2:     #0D2C27;   /* Karten auf dunklem Grund */
  --hero-bg:    #071A17;   /* Hero: sehr dunkles Gruen-Schwarz, bewusst
                              gruenstichig, damit die Hero-Grafik passt */

  /* --- SCHRIFT --- */
  --ink:        #10322C;   /* Ueberschriften auf hell */
  --text:       #4A5A56;   /* Fliesstext auf hell */
  /* Vorlage war #7A8783. Das ergibt auf Creme nur 3,3:1 Kontrast und
     --muted traegt auch echten Fliesstext (FAQ-Antworten, Karten-Text).
     Darum minimal dunkler: so sind es 4,8:1 und die Pruefliste stimmt. */
  --muted:      #5D6963;   /* Nebensachen auf hell - 4,8:1 auch auf --paper-2 */
  --on-deep:    #EDE9E1;   /* Ueberschriften auf dunkel */
  --on-deep-2:  #A9BDB7;   /* Fliesstext auf dunkel */

  /* --- AKZENT: Neon raus, Petrol rein --- */
  --accent:      #17685B;  /* auf hellem Grund */
  --accent-soft: #7FC9B5;  /* auf dunklem Grund */
  --accent-line: rgba(23,104,91,.22);

  /* --- LINIEN --- */
  --line:       rgba(16,50,44,.12);
  --line-deep:  rgba(255,255,255,.10);

  /* --- BRUECKE zu den alten Variablennamen ---
     So mussten die rund 700 Zeilen darunter nicht umgeschrieben werden.
     Die .is-dark-Klasse weiter unten schreibt genau diese Namen um. */
  --bg:       var(--paper);
  --bg-2:     var(--paper-2);
  --surface:  var(--card);
  --heading:  var(--ink);
  --line-2:   rgba(16,50,44,.22);
  --tq:       var(--accent);
  --tq-bright:var(--accent);
  --focus:    var(--accent);

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Dichte 4/10: ruhig, aber nicht luftleer.
     Vorher war die Skala deutlich groesser. Das las sich nicht als
     bewusster Weissraum, sondern als Loch zwischen den Abschnitten. */
  --s-1:6px; --s-2:14px; --s-3:22px; --s-4:34px; --s-5:52px; --s-6:78px; --s-7:112px;

  --ff-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --ff-head:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  font-family: var(--ff-body);
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* ---------- Dunkle Sektionen ----------
   Nur Farb-Variablen. Kein einziger Baustein muss doppelt existieren. */
#luma-root .is-dark{
  --bg:       var(--deep);
  --bg-2:     var(--deep-2);
  --surface:  var(--deep-2);
  --card:     var(--deep-2);
  --heading:  var(--on-deep);
  --ink:      var(--on-deep);
  --text:     var(--on-deep-2);
  --muted:    #8FA39D;          /* 4,7:1 auf Tiefgruen */
  --line:     var(--line-deep);
  --line-2:   rgba(255,255,255,.18);
  --tq:       var(--accent-soft);
  --tq-bright:var(--accent-soft);
  --focus:    var(--accent-soft);
  --accent-line: rgba(127,201,181,.26);
  background: var(--deep);
  color: var(--text);
}

#luma-root *,#luma-root *::before,#luma-root *::after{box-sizing:border-box;}
#luma-root [hidden]{display:none!important;}
#luma-root img,#luma-root svg{max-width:100%;height:auto;display:block;}
#luma-root p{margin:0 0 1em;}
#luma-root ul,#luma-root ol{margin:0;padding:0;list-style:none;}

/* Ueberschriften: Serife, ohne negatives Tracking.
   Negatives Tracking ist ein Sans-Serif-Trick und ruiniert eine Serife. */
#luma-root h1,#luma-root h2{
  font-family:var(--ff-display);
  color:var(--heading);
  font-weight:400;
  letter-spacing:0;
  line-height:1.12;
  margin:0 0 var(--s-2);
  text-wrap:balance;
}
#luma-root h3,#luma-root h4{
  font-family:var(--ff-head);
  color:var(--heading);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.3;
  margin:0 0 var(--s-2);
  text-wrap:balance;
}
#luma-root h1{font-size:clamp(2.6rem,5.2vw,4.2rem);line-height:1.08;}
#luma-root h2{font-size:clamp(2rem,4vw,3.1rem);}
#luma-root h3{font-size:1.12rem;}
#luma-root h4{font-size:.98rem;}

/* Hervorgehobene Woerter: kursive Serife. Der Effekt kommt aus der
   Schriftform, nicht aus der Farbe. Farbe nur dezent dazu. */
#luma-root .tq{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  color:var(--tq);
}

#luma-root a{color:inherit;}
#luma-root a,#luma-root button{cursor:pointer;}

/* Fokus – deutlich sichtbar, nicht nur Browser-Default */
#luma-root a:focus-visible,
#luma-root button:focus-visible,
#luma-root input:focus-visible,
#luma-root select:focus-visible,
#luma-root textarea:focus-visible,
#luma-root [tabindex]:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:4px;
  border-radius:6px;
}

/* ===================== HELPER ===================== */
#luma-root .wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(22px,5vw,44px);}
#luma-root .sec{padding-block:clamp(68px,9vw,var(--s-7));position:relative;}
#luma-root section[id],#luma-root .hero{scroll-margin-top:88px;}
#luma-root .sec--raised{background:var(--bg-2);}

#luma-root .eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--ff-head);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s-2);
}
#luma-root .eyebrow::before{content:"";width:26px;height:1px;background:var(--muted);opacity:.5;flex:none;}

#luma-root .lead{font-size:clamp(1.02rem,1.4vw,1.15rem);color:var(--text);max-width:62ch;font-weight:400;}
#luma-root .sec-head{max-width:64ch;margin-bottom:var(--s-5);}
#luma-root .sec-head--center{margin-inline:auto;text-align:center;}
#luma-root .sec-head--center .eyebrow::before{display:none;}
#luma-root .sec-head--center .lead{margin-inline:auto;}
#luma-root .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ===================== BUTTONS ===================== */
/* Kein Farbverlauf, kein Leuchten. Auf hell dunkelgruen, auf dunkel creme. */
#luma-root .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;
  border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--ff-head);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
#luma-root .btn svg{flex:none;transition:transform .25s var(--ease);}
#luma-root .btn:hover svg{transform:translateX(3px);}

#luma-root .btn--primary{background:var(--deep);color:var(--paper);}
#luma-root .btn--primary:hover{background:var(--deep-2);transform:translateY(-1px);}
#luma-root .is-dark .btn--primary,
#luma-root .hero .btn--primary,
#luma-root .nav:not(.is-stuck) .btn--primary,
#luma-root .footer .btn--primary{background:var(--paper);color:var(--deep);}
#luma-root .is-dark .btn--primary:hover,
#luma-root .hero .btn--primary:hover,
#luma-root .nav:not(.is-stuck) .btn--primary:hover,
#luma-root .footer .btn--primary:hover{background:#fff;}

#luma-root .btn--ghost{background:transparent;color:var(--heading);border-color:var(--line-2);}
#luma-root .btn--ghost:hover{border-color:var(--tq);color:var(--tq);}
#luma-root .btn--quiet{background:transparent;color:var(--heading);border-color:var(--line-2);}
#luma-root .btn--quiet:hover{border-color:var(--tq);color:var(--tq);}
#luma-root .btn--block{width:100%;}
#luma-root .btn[disabled]{opacity:.55;pointer-events:none;}

/* ===================== LOGO =====================
   Das Logo gibt es in zwei Anordnungen und je zwei Farbfassungen.
   Alle vier Dateien sind freigestellt, also ohne Hintergrundflaeche.

     LIEGEND, Monogramm links, Wortmarke rechts. Fuer Kopfzeilen.
       assets/logo-wide-dark.png    creme + salbeigruen, dunkler Grund
       assets/logo-wide-light.png   tiefgruen + petrol,  heller Grund

     STEHEND, Monogramm oben, Wortmarke darunter. Fuer den Footer.
       assets/logo-dark.png
       assets/logo-light.png

   Warum zwei Anordnungen: In der stehenden Fassung ist die Wortmarke nur
   ein Sechstel der Gesamthoehe. In einer 88 Pixel hohen Kopfzeile waere
   sie 8 Pixel gross und damit nicht mehr lesbar. Liegend ist sie es.

   Die Zeile "Sichtbar. Stark. Lokal." unter dem Logo ist entfallen.
   Ebenso der fruehere Filter, der die alte Datei schwarz gefaerbt hat. */
#luma-root .brand{display:inline-flex;align-items:center;text-decoration:none;margin-right:auto;}
#luma-root .brand__logo{
  /* Hoehe steuert die Groesse, Breite ergibt sich aus dem Seitenverhaeltnis. */
  height:44px;width:auto;flex:none;
  transition:height .35s var(--ease);
}
/* Umschaltung im Kopfbereich: oben die helle Fassung, in der Pille die dunkle. */
#luma-root .brand__logo--auf-hell{display:none;}
#luma-root .nav.is-stuck .brand__logo--auf-dunkel{display:none;}
#luma-root .nav.is-stuck .brand__logo--auf-hell{display:block;}

@media (max-width:640px){
  #luma-root .brand__logo{height:36px;}
}

/* ===================== NAVIGATION ===================== */
/* Zwei Zustaende:
   A) ganz oben  -> volle Breite, transparent, ueber dem dunklen Hero
   B) gescrollt  -> schwebende, zentrierte Pille auf hellem Grund
   Die Klasse .is-stuck setzt main.js bereits. Hier ist nur CSS. */
#luma-root .nav{
  position:fixed;inset:0 0 auto 0;z-index:120;
  padding-top:env(safe-area-inset-top);
  background:transparent;
  transition:top .35s var(--ease);
}
#luma-root .nav__inner{
  display:flex;align-items:center;gap:var(--s-3);height:88px;
  transition:height .35s var(--ease), padding .35s var(--ease),
             background-color .35s var(--ease), box-shadow .35s var(--ease),
             border-radius .35s var(--ease), max-width .35s var(--ease);
}
/* Zustand A: der Header liegt ueber dem dunklen Hero */
#luma-root .nav:not(.is-stuck) .nav__links a{color:rgba(237,233,225,.72);}
#luma-root .nav:not(.is-stuck) .nav__links a:hover,
#luma-root .nav:not(.is-stuck) .nav__links a[aria-current="true"]{color:#fff;}
#luma-root .nav:not(.is-stuck) .burger{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);}
#luma-root .nav:not(.is-stuck) .burger span,
#luma-root .nav:not(.is-stuck) .burger span::before,
#luma-root .nav:not(.is-stuck) .burger span::after{background:#EDE9E1;}

/* Zustand B: schwebende Pille */
#luma-root .nav.is-stuck{top:14px;}
#luma-root .nav.is-stuck .nav__inner{
  width:max-content;max-width:calc(100% - 32px);margin-inline:auto;
  height:auto;min-height:60px;
  padding:8px 8px 8px 18px;
  gap:8px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-radius:var(--r-pill);
  box-shadow:0 8px 30px rgba(16,50,44,.10);
}
#luma-root .nav.is-stuck .brand{margin-right:6px;}
#luma-root .nav.is-stuck .brand__logo{height:36px;}

#luma-root .nav__links{display:flex;align-items:center;gap:2px;}
#luma-root .nav__links a{
  position:relative;padding:7px 14px;border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:.84rem;font-weight:500;letter-spacing:.01em;
  color:var(--text);text-decoration:none;
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
#luma-root .nav__links a:hover{color:var(--ink);}
/* Feiner Unterstrich nur im Zustand A. In der Pille uebernimmt das
   eine eigene kleine Pille hinter dem aktiven Punkt. */
#luma-root .nav:not(.is-stuck) .nav__links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;
  background:var(--accent-soft);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
#luma-root .nav:not(.is-stuck) .nav__links a:hover::after,
#luma-root .nav:not(.is-stuck) .nav__links a[aria-current="true"]::after{transform:scaleX(1);}
#luma-root .nav.is-stuck .nav__links a[aria-current="true"]{
  background:rgba(16,50,44,.07);color:var(--ink);
}
#luma-root .nav__cta{white-space:nowrap;margin-left:10px;min-height:44px;padding:11px 22px;font-size:.83rem;}
#luma-root .nav.is-stuck .nav__cta{margin-left:6px;}

#luma-root .burger{
  display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  background:rgba(16,50,44,.05);border:1px solid var(--line-2);border-radius:var(--r-pill);
}
#luma-root .burger span{display:block;width:19px;height:1.5px;background:var(--ink);border-radius:2px;position:relative;transition:background .2s var(--ease);}
#luma-root .burger span::before,#luma-root .burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:inherit;border-radius:2px;transition:transform .3s var(--ease), top .22s var(--ease);}
#luma-root .burger span::before{top:-6px;}
#luma-root .burger span::after{top:6px;}
#luma-root .burger[aria-expanded="true"] span{background:transparent!important;}
#luma-root .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
#luma-root .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

#luma-root .mobilemenu{
  position:fixed;inset:0;z-index:119;
  background:rgba(245,242,236,.98);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  padding:calc(104px + env(safe-area-inset-top)) clamp(24px,7vw,44px) calc(36px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y:auto;
}
#luma-root .mobilemenu.is-open{opacity:1;visibility:visible;transform:none;}
#luma-root .mobilemenu a{
  font-family:var(--ff-display);font-weight:400;font-size:1.5rem;letter-spacing:0;
  color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--line);
}
#luma-root .mobilemenu .btn{margin-top:var(--s-3);font-family:var(--ff-head);font-size:.9rem;border-bottom:0;}

/* ===================== HERO ===================== */
#luma-root .hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(150px + env(safe-area-inset-top));
  padding-bottom:clamp(80px,10vw,130px);
  min-height:min(100svh,980px);
  display:flex;align-items:center;
  background:var(--hero-bg);
}
/* Lichtstimmung: sehr zurueckhaltend, kein Neon mehr */
#luma-root .hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(70% 60% at 72% 42%, rgba(127,201,181,.09) 0%, rgba(127,201,181,0) 62%),
    linear-gradient(180deg,#0A211C 0%,#071A17 70%);
}
#luma-root .hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 35%,#000 0%,transparent 80%);
  mask-image:radial-gradient(75% 65% at 50% 35%,#000 0%,transparent 80%);
}
#luma-root .hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.28;}

#luma-root .hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,6vw,80px);align-items:center;width:100%;}
#luma-root .hero h1{max-width:22ch;text-wrap:balance;margin-bottom:var(--s-3);}
#luma-root .hero__sub{font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:54ch;margin-bottom:var(--s-4);font-weight:400;}
#luma-root .hero__badge{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:var(--s-3);
  padding:8px 18px 8px 12px;border-radius:var(--r-pill);
  background:rgba(127,201,181,.07);border:1px solid rgba(127,201,181,.22);
  font-family:var(--ff-head);font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);
}
#luma-root .hero__badge .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-soft);flex:none;}
#luma-root .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:var(--s-4);}
/* Zwei Spalten: vier kurze Punkte fuellen den Block, bleiben aber
   optisch kompakt. Als einspaltige Liste wuerden sie lang wirken. */
#luma-root .hero__trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;max-width:540px;}
#luma-root .hero__trust li{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--on-deep-2);}
#luma-root .hero__trust svg{color:var(--accent-soft);flex:none;}

#luma-root .hero__visual{position:relative;}
/* Der einzige verbliebene Schein auf der Seite - gedaempft und halbiert. */
#luma-root .hero__visual .glow{position:absolute;inset:-14% -8%;background:radial-gradient(50% 50% at 50% 50%,rgba(127,201,181,.10),transparent 68%);filter:blur(26px);z-index:0;}
#luma-root .hero__visual img{position:relative;z-index:1;width:100%;}
/* Ruhiger: halbe Amplitude, doppelte Dauer */
#luma-root .float{animation:luma-float 16s ease-in-out infinite;}
@keyframes luma-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Such-Simulation im Hero (Tippen wie in einem Suchfeld) ----------
   Bleibt unveraendert in Funktion, Tempo und Position. Sie ist der einzige
   bewegte Blickfang der Seite und wirkt nur, weil sie allein steht. */
#luma-root .typer{margin:0 0 var(--s-4);max-width:40ch;}
#luma-root .typer__label{
  margin:0 0 10px;font-family:var(--ff-head);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
#luma-root .hero .typer__label{color:#8FA39D;}
#luma-root .typer__box{
  display:flex;align-items:center;gap:10px;margin:0;
  min-height:52px;padding:12px 18px;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);
  font-family:var(--ff-body);font-size:.98rem;color:var(--on-deep);
}
#luma-root .typer__ico{color:var(--accent-soft);flex:none;}
#luma-root .typer__text{white-space:pre;overflow:hidden;text-overflow:clip;}
#luma-root .typer__caret{
  width:2px;height:1.15em;flex:none;background:var(--accent-soft);
  animation:luma-caret 1s steps(1) infinite;
}
@keyframes luma-caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ===================== KENNZAHLEN ===================== */
#luma-root .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);}
#luma-root .stat{padding:var(--s-3) 0;border-top:1px solid var(--line);}
#luma-root .stat__num{
  font-family:var(--ff-display);font-size:clamp(2.1rem,3.6vw,2.9rem);font-weight:400;
  letter-spacing:0;color:var(--heading);line-height:1;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
#luma-root .stat__num b{color:var(--heading);font-weight:400;}
#luma-root .stat__label{font-size:.86rem;color:var(--muted);line-height:1.5;max-width:24ch;}

/* ===================== CARDS ===================== */
#luma-root .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
#luma-root .card{
  background:var(--surface);padding:var(--s-4) var(--s-3);
  transition:background-color .35s var(--ease);
}
#luma-root .card__icon{
  width:40px;height:40px;display:grid;place-items:center;margin-bottom:var(--s-3);
  color:var(--accent);
}
#luma-root .card h3{margin-bottom:10px;}
#luma-root .card p{font-size:.92rem;margin:0;color:var(--muted);}

/* ===================== SPLIT ===================== */
#luma-root .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:center;}
#luma-root .cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);align-items:stretch;}
#luma-root .checklist li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line);}
#luma-root .checklist li:last-child{border-bottom:0;}
#luma-root .checklist svg{color:var(--tq);flex:none;margin-top:6px;}
#luma-root .checklist span{font-size:.96rem;color:var(--text);font-weight:400;}

#luma-root .panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,44px);
}

/* Studio-Visual */
#luma-root .visual{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line);
  aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(24px,3.4vw,46px);
}
#luma-root .visual img{position:relative;width:100%;}
#luma-root .visual__tag{
  position:absolute;left:22px;bottom:22px;z-index:2;
  font-family:var(--ff-head);font-size:.63rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* ===================== ABLAUF ===================== */
#luma-root .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);}
#luma-root .step{padding-top:var(--s-3);border-top:1px solid var(--line);position:relative;}
#luma-root .step::after{
  content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
#luma-root .step.is-in::after{transform:scaleX(1);}
#luma-root .step__n{
  display:block;font-family:var(--ff-display);font-size:1.5rem;font-weight:400;
  letter-spacing:0;color:var(--accent-line);margin-bottom:10px;line-height:1;
  font-variant-numeric:tabular-nums;
}
#luma-root .step h3{margin-bottom:10px;}
#luma-root .step p{font-size:.9rem;margin:0;color:var(--muted);}

/* ===================== TESTIMONIALS ===================== */
#luma-root .quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);}
#luma-root .quote{display:flex;flex-direction:column;padding-top:var(--s-3);border-top:1px solid var(--line);}
#luma-root .stars{width:86px;margin-bottom:var(--s-2);}
#luma-root .quote blockquote{
  margin:0 0 var(--s-3);font-family:var(--ff-display);font-size:1.35rem;line-height:1.35;color:var(--heading);font-weight:400;
}
#luma-root .quote figcaption{margin-top:auto;font-family:var(--ff-head);}
#luma-root .quote cite{font-style:normal;font-weight:600;color:var(--heading);font-size:.88rem;display:block;}
#luma-root .quote .role{font-size:.72rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:500;}

/* ===================== REGION ===================== */
#luma-root .maparea{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--paper-2);min-height:400px;position:relative;}
#luma-root #luma-map{width:100%;height:440px;display:none;}
#luma-root .mapconsent{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--s-4);}
#luma-root .mapconsent__inner{max-width:42ch;}
#luma-root .mapconsent p{font-size:.86rem;color:var(--muted);}
#luma-root .pills{display:flex;flex-wrap:wrap;gap:10px;}
#luma-root .pill{
  padding:9px 20px;border-radius:var(--r-pill);
  background:transparent;border:1px solid var(--line-2);
  font-family:var(--ff-head);color:var(--text);font-size:.83rem;font-weight:500;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
#luma-root .pill:hover{border-color:var(--accent);color:var(--accent);}

/* ===================== FAQ ===================== */
#luma-root .faq{max-width:820px;margin-inline:auto;}
#luma-root .faq__item{border-bottom:1px solid var(--line);}
#luma-root .faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;text-align:left;padding:26px 2px;min-height:64px;
  font-family:var(--ff-head);font-size:clamp(.98rem,1.5vw,1.06rem);font-weight:500;
  letter-spacing:-.01em;color:var(--heading);
  transition:color .22s var(--ease);
}
#luma-root .faq__q:hover{color:var(--accent);}
#luma-root .faq__ico{width:18px;height:18px;flex:none;color:var(--accent);transition:transform .35s var(--ease);}
#luma-root .faq__q[aria-expanded="true"] .faq__ico{transform:rotate(45deg);}
#luma-root .faq__a{overflow:hidden;height:0;transition:height .35s var(--ease);}
#luma-root .faq__a-inner{padding:0 56px 30px 2px;font-size:.95rem;color:var(--text);max-width:62ch;}

/* ===================== FORM ===================== */
#luma-root .field{margin-bottom:var(--s-3);}
#luma-root .field label{display:block;font-family:var(--ff-head);font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
#luma-root .field .req{color:var(--accent);}
#luma-root .field input,#luma-root .field select,#luma-root .field textarea{
  width:100%;min-height:52px;padding:14px 0;
  font-family:var(--ff-body);font-size:1rem;font-weight:400;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  transition:border-color .25s var(--ease);
}
#luma-root .field select{cursor:pointer;}
#luma-root .field select option{background:#fff;color:#10322C;}
#luma-root .field textarea{min-height:110px;resize:vertical;}
#luma-root .field input::placeholder,#luma-root .field textarea::placeholder{color:#9AA5A1;}
#luma-root .field input:hover,#luma-root .field select:hover,#luma-root .field textarea:hover{border-bottom-color:var(--muted);}
#luma-root .field input:focus,#luma-root .field select:focus,#luma-root .field textarea:focus{border-bottom-color:var(--accent);outline:none;}
#luma-root .field input:focus-visible,#luma-root .field select:focus-visible,#luma-root .field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:6px;}
#luma-root .field .hint{font-size:.78rem;color:var(--muted);margin-top:8px;}
#luma-root .field .err{display:none;font-size:.8rem;color:#B3402C;margin-top:8px;font-weight:500;}
#luma-root .field.has-error input,#luma-root .field.has-error select,#luma-root .field.has-error textarea{border-bottom-color:#B3402C;}
#luma-root .field.has-error .err{display:block;}
#luma-root .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);}
#luma-root .check{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--s-2);}
#luma-root .check input{width:20px;height:20px;min-height:20px;margin-top:3px;flex:none;accent-color:var(--accent);}
#luma-root .check label{font-family:var(--ff-body);font-size:.85rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text);line-height:1.55;margin:0;}
#luma-root .check a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
#luma-root #f-dsgvo-err{display:none;font-size:.8rem;color:#B3402C;margin:0 0 16px;}
#luma-root #f-dsgvo-err.is-on{display:block;}
#luma-root .trustbadges{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:var(--s-3);}
#luma-root .trustbadges li{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted);}
#luma-root .trustbadges svg{color:var(--accent);flex:none;}
#luma-root .formnote{padding:14px 18px;border-radius:var(--r-md);font-size:.88rem;margin-top:var(--s-3);display:none;}
#luma-root .formnote.is-ok{display:block;background:rgba(23,104,91,.07);border:1px solid rgba(23,104,91,.3);color:var(--accent);}
#luma-root .formnote.is-bad{display:block;background:rgba(179,64,44,.06);border:1px solid rgba(179,64,44,.3);color:#B3402C;}
/* Honeypot: ausserhalb des Viewports statt display:none (Bots erkennen display:none) */
#luma-root .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}

/* Kontaktliste */
#luma-root .contact-list li{padding:22px 0;border-bottom:1px solid var(--line);}
#luma-root .contact-list li:last-child{border-bottom:0;}
#luma-root .contact-list .k{display:block;font-family:var(--ff-head);font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
#luma-root .contact-list .v{font-size:1.05rem;color:var(--ink);font-weight:400;}
#luma-root .contact-list .v a{text-decoration:none;transition:color .2s var(--ease);}
#luma-root .contact-list .v a:hover{color:var(--accent);}

/* ===================== FOOTER ===================== */
#luma-root .footer{padding-block:var(--s-5) var(--s-4);}
#luma-root .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-4);margin-bottom:var(--s-5);}
#luma-root .footer h3{font-family:var(--ff-head);color:var(--muted);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:var(--s-2);font-weight:600;}
#luma-root .footer a,#luma-root .footer button{color:var(--text);text-decoration:none;transition:color .2s var(--ease);}
#luma-root .footer a:hover,#luma-root .footer button:hover{color:var(--accent-soft);}
#luma-root .footer li{padding:7px 0;font-size:.9rem;}
#luma-root .footer__claim{font-size:.9rem;max-width:32ch;margin-top:var(--s-3);color:var(--muted);}
#luma-root .footer .brand__logo{height:74px;}
/* Bei deutschen Firmenkunden ist das Impressum ein Vertrauenselement,
   kein Pflicht-Anhaengsel. Darum sichtbar hervorgehoben. */
#luma-root .footer__legal a{color:var(--on-deep);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;}
#luma-root .footer__bar{border-top:1px solid var(--line);padding-top:var(--s-3);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;justify-content:space-between;font-size:.8rem;color:var(--muted);}
#luma-root .social{display:flex;gap:8px;}
#luma-root .social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:border-color .22s var(--ease),color .22s var(--ease);}
#luma-root .social a:hover{border-color:var(--accent-soft);color:var(--accent-soft);}

/* ===================== STICKY CTAs ===================== */
#luma-root .mobilebar{
  position:fixed;left:0;right:0;bottom:0;z-index:115;display:none;
  gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(245,242,236,.94);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
#luma-root .mobilebar.is-in{transform:none;}
#luma-root .mobilebar a{flex:1;min-height:48px;padding:12px 8px;font-size:.82rem;}

/* WhatsApp: bleibt erreichbar, ist aber nicht mehr das lauteste Element
   der Seite. WhatsApp signalisiert einen guenstigen Kanal. */
#luma-root .waFab{
  position:fixed;right:26px;bottom:26px;z-index:114;
  height:42px;width:auto;border-radius:var(--r-pill);
  display:none;place-items:center;padding:0 15px;
  background:var(--deep);border:0;color:var(--paper);
  opacity:.68;
  transition:opacity .25s var(--ease);
}
#luma-root .waFab svg{width:20px;height:20px;}
#luma-root .waFab:hover{opacity:1;}
#luma-root .waFab::after{
  content:attr(data-tip);position:absolute;right:56px;top:50%;transform:translateY(-50%) translateX(6px);
  background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:.76rem;white-space:nowrap;padding:7px 12px;border-radius:8px;
  box-shadow:0 6px 20px rgba(16,50,44,.10);
  opacity:0;pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease);
}
#luma-root .waFab:hover::after{opacity:1;transform:translateY(-50%);}

/* ===================== COOKIE BANNER ===================== */
#luma-root .cc{position:fixed;inset:auto 0 0 0;z-index:200;padding:0 12px calc(12px + env(safe-area-inset-bottom));display:none;}
#luma-root .cc.is-open{display:block;}
#luma-root .cc__box{
  max-width:920px;margin-inline:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 -20px 60px rgba(16,50,44,.16);
  padding:clamp(22px,3vw,32px);max-height:82vh;overflow-y:auto;
}
#luma-root .cc h2{font-size:1.5rem;margin-bottom:12px;}
#luma-root .cc p{font-size:.87rem;margin-bottom:14px;color:var(--text);}
/* Rechtlich relevant: alle drei Optionen optisch gleichrangig (kein Dark Pattern) */
#luma-root .cc__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:var(--s-3);}
#luma-root .cc__actions .btn{min-height:50px;font-size:.85rem;padding:14px 10px;}
#luma-root .cc__legal{font-size:.76rem;color:var(--muted);margin:16px 0 0;}
#luma-root .cc__legal a{color:var(--accent);}
#luma-root .cc__prefs{display:none;margin-top:var(--s-3);border-top:1px solid var(--line);padding-top:var(--s-3);}
#luma-root .cc__prefs.is-open{display:block;}
#luma-root .cc__cat{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);}
#luma-root .cc__cat:last-of-type{border-bottom:0;}
#luma-root .cc__cat input{width:20px;height:20px;margin-top:4px;flex:none;accent-color:var(--accent);}
#luma-root .cc__cat strong{display:block;color:var(--ink);font-size:.92rem;font-weight:600;}
#luma-root .cc__cat span{font-size:.8rem;color:var(--muted);}

/* ===================== SCROLL REVEAL =====================
   Deutlich ruhiger als vorher: kurzer Weg, kurze Dauer. */
#luma-root .rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
#luma-root .rv.is-in{opacity:1;transform:none;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  #luma-root .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) var(--s-4);}
  #luma-root .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  #luma-root .quotes{grid-template-columns:1fr;gap:var(--s-3);}
  #luma-root .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:920px){
  #luma-root .nav__links,#luma-root .nav__cta{display:none;}
  #luma-root .burger{display:flex;}
  /* Mobil: kompakte Pille, nur Logo und Burger. Keine Links. */
  #luma-root .nav.is-stuck .nav__inner{padding:8px 8px 8px 16px;gap:14px;min-height:54px;}
  #luma-root .hero{min-height:auto;padding-top:calc(128px + env(safe-area-inset-top));}
  #luma-root .hero__grid{grid-template-columns:1fr;}
  #luma-root .hero__visual{order:-1;max-width:500px;margin-inline:auto;}
  #luma-root .split,#luma-root .cols-3{grid-template-columns:1fr;}
  #luma-root .grid-3{grid-template-columns:1fr;}
  #luma-root .waFab{display:none!important;}
}
@media (max-width:640px){
  #luma-root{font-size:16px;}
  #luma-root .stats{grid-template-columns:1fr;}
  #luma-root .steps{grid-template-columns:1fr;}
  #luma-root .hero__cta{flex-direction:column;align-items:stretch;}
  #luma-root .hero__cta .btn{width:100%;}
  #luma-root .hero__trust{grid-template-columns:1fr;}
  #luma-root .field-row{grid-template-columns:1fr;gap:0;}
  #luma-root .cc__actions{grid-template-columns:1fr;}
  #luma-root .footer__grid{grid-template-columns:1fr;}
  #luma-root .mobilebar{display:flex;}
  #luma-root .footer{padding-bottom:calc(var(--s-5) + 44px);}
  #luma-root .faq__a-inner{padding-right:8px;}
}
@media (min-width:921px){ #luma-root .waFab{display:grid;} }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  #luma-root *,#luma-root *::before,#luma-root *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  #luma-root .typer__caret{display:none;}
  #luma-root .rv{opacity:1;transform:none;}
  #luma-root .step::after{transform:scaleX(1);}
  /* Die Verwandlung des Headers springt dann, statt zu fliessen. */
  #luma-root .nav,#luma-root .nav__inner{transition:none!important;}
}

/* Skip-Link */
.luma-skip{
  position:absolute;left:12px;top:-100px;z-index:500;
  background:#123A33;color:#F5F2EC;padding:14px 22px;border-radius:8px;
  font:600 15px/1 "Inter",system-ui,sans-serif;text-decoration:none;
  transition:top .2s ease;
}
.luma-skip:focus{top:12px;}

/* ==========================================================================
   BAUSTEINE DER FUEHRUNGS-STRUKTUR
   Reihenfolge der Seite: Hero -> Vertrauen -> Problem -> Kosten ->
   System -> Bausteine -> Ablauf -> Absender -> Vergleich -> Angebot ->
   FAQ -> Formular
   ========================================================================== */

/* ---------- 2. Vertrauensleiste ----------
   Ruhig: grosse Ziffern in der Serife, Trennung durch duenne Striche,
   keine Karten mit Rahmen und kein Akzentgruen. */
#luma-root .trustbar{border-bottom:1px solid var(--line);background:var(--paper);}
#luma-root .trustbar__inner{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  padding:clamp(34px,4vw,52px) 0;
}
#luma-root .trustbar__item{
  display:block;padding:4px clamp(14px,2.4vw,28px);
  border-left:1px solid var(--line);
}
#luma-root .trustbar__item:first-child{border-left:0;padding-left:0;}
#luma-root .trustbar__num{
  display:block;
  font-family:var(--ff-display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:400;
  color:var(--ink);letter-spacing:0;line-height:1;margin-bottom:12px;
}
#luma-root .trustbar__num b{color:var(--ink);font-weight:400;}
#luma-root .trustbar__txt{display:block;font-size:.82rem;color:var(--muted);line-height:1.45;max-width:22ch;}
#luma-root .trustbar__note{padding:0 0 18px;font-size:.72rem;color:var(--muted);}

/* Kundenlogos. Siehe Kommentar im HTML - das ist, sobald es echte Logos
   gibt, das staerkste Vertrauenselement der ganzen Seite. */
#luma-root .logorow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(24px,4vw,54px);padding:0 0 clamp(30px,4vw,46px);
}
#luma-root .logorow img{height:34px;width:auto;filter:grayscale(1);opacity:.55;transition:opacity .25s var(--ease),filter .25s var(--ease);}
#luma-root .logorow img:hover{opacity:1;filter:grayscale(0);}
#luma-root .logorow__head{
  font-family:var(--ff-head);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  text-align:center;margin:0 0 clamp(22px,3vw,32px);
}

/* ---------- 3. Problem: spiegeln statt belehren ---------- */
#luma-root .prob{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);}
#luma-root .prob li{
  display:flex;align-items:flex-start;gap:14px;padding:26px 28px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
}
#luma-root .prob svg{color:var(--accent);flex:none;margin-top:4px;opacity:.75;}
#luma-root .prob b{display:block;font-family:var(--ff-head);font-weight:600;color:var(--ink);margin-bottom:5px;}
#luma-root .prob span{font-size:.92rem;}

/* ---------- 4. Preis des Nichtstuns: die wichtigste Sektion ----------
   Dunkel, damit der Zahlen-Moment heraussticht. */
#luma-root .costgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);margin-bottom:var(--s-3);}
#luma-root .costcard{
  position:relative;padding:30px 28px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
}
#luma-root .costcard__step{
  display:block;font-family:var(--ff-head);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
#luma-root .costcard__num{
  margin:0 0 10px;font-family:var(--ff-display);font-size:clamp(2rem,3.4vw,2.7rem);
  font-weight:400;letter-spacing:0;line-height:1;color:var(--heading);
}
#luma-root .costcard__txt{margin:0;font-size:.88rem;}

/* Ergebnis: sehr gross, ruhig, ohne Farbe und ohne Leuchten. */
#luma-root .costsum{
  padding:44px 34px;text-align:center;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:rgba(255,255,255,.03);
}
#luma-root .costsum__num{
  margin:0 0 14px;font-family:var(--ff-display);font-size:clamp(3rem,7vw,5rem);
  font-weight:400;letter-spacing:0;line-height:1;color:var(--heading);
}
#luma-root .costsum p{margin:0;max-width:52ch;margin-inline:auto;}
#luma-root .costnote{margin:var(--s-2) 0 0;font-size:.74rem;color:var(--muted);text-align:center;}

/* ---------- 6. Die vier Bausteine: 2x2-Raster, Webseite hervorgehoben ---------- */
#luma-root .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2);}
#luma-root .bcard{
  position:relative;display:flex;flex-direction:column;
  padding:34px 32px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);transition:border-color .3s var(--ease);
}
#luma-root .bcard:hover{border-color:var(--line-2);}
#luma-root .bcard--star{border-color:var(--accent-line);}
#luma-root .bcard__tag{
  position:absolute;top:-11px;left:32px;
  padding:5px 13px;border-radius:var(--r-pill);
  background:var(--deep);color:var(--paper);
  font-family:var(--ff-head);font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
#luma-root .bcard h3{margin:0 0 10px;font-size:1.2rem;}
#luma-root .bcard__lead{margin:0 0 20px;font-size:.94rem;}
#luma-root .bcard ul{display:grid;gap:10px;margin-top:auto;}
#luma-root .bcard li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text);}
#luma-root .bcard li svg{color:var(--accent);flex:none;margin-top:4px;}

/* ---------- CTA-Anker: Zwischenband mitten in der Seite ---------- */
/* Nur eine Linie oben. Vorher war es ein Kasten mit zwei Linien, unter dem
   dann noch der volle Sektions-Abstand kam - das sah nach Loch aus. */
#luma-root .ctaband{
  margin-top:var(--s-5);padding:var(--s-5) 34px 0;text-align:center;
  border-top:1px solid var(--line);
}
#luma-root .ctaband p{margin:0 0 var(--s-3);font-family:var(--ff-display);font-size:clamp(1.5rem,2.8vw,2.1rem);
  font-weight:400;color:var(--heading);letter-spacing:0;line-height:1.2;}
#luma-root .ctaband small{display:block;margin-top:14px;font-size:.78rem;color:var(--muted);}
#luma-root .ctaband small a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
/* Knopfreihe auf der 404-Seite. Bricht auf schmalen Geraeten sauber um. */
#luma-root .notfound__wege{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}

/* ---------- 7. Wer dahinter steht: Zitat-Sektion ----------
   Ein grosses Anfuehrungszeichen, EIN starker Satz in der Serife,
   darunter die kleine Namenszeile. Mehr nicht. Eine einzelne Aussage
   wirkt staerker als drei Absaetze.
   Keine Social-Icons, die stehen im Footer. */
#luma-root .sec--quote{padding-block:clamp(80px,10vw,128px);}

#luma-root .quoteblock{
  max-width:min(880px,92%);
  margin-inline:auto;text-align:center;
}
/* Das Anfuehrungszeichen ist als Glyphe klein im Verhaeltnis zur
   Schriftgroesse. Es braucht darum eine sehr grosse Schrift und eine
   knappe Zeilenhoehe, sonst reisst es ein Loch in den Abstand. */
#luma-root .quoteblock__mark{
  display:block;line-height:.62;height:.42em;
  font-family:var(--ff-display);font-size:clamp(7rem,12vw,10rem);
  color:var(--accent-soft);
  margin-bottom:clamp(16px,2.2vw,26px);
}
#luma-root .quoteblock__text{margin:0;}
#luma-root .quoteblock__text p{
  margin:0;
  font-family:var(--ff-display);font-weight:400;letter-spacing:0;
  font-size:clamp(1.55rem,3.3vw,2.45rem);line-height:1.3;
  color:var(--ink);text-wrap:balance;
}

/* Namenszeile mit rundem Foto */
/* Der Hinweis "KI-generiert" steht fest in der Bilddatei, unten rechts.
   Auf der Seite gibt es dazu kein eigenes Element mehr. */
#luma-root .byline{
  display:flex;align-items:center;justify-content:center;gap:13px;
  margin:clamp(28px,3.6vw,44px) 0 0;
  text-align:left;
}
#luma-root .byline__img{
  width:44px;height:44px;flex:none;
  border-radius:50%;object-fit:cover;
  /* Zwei feine Ringe: innen weiss, aussen eine Haarlinie.
     Beide bewusst duenn, damit das Bild klein bleibt. */
  box-shadow:
    0 0 0 3px var(--card),
    0 0 0 4px rgba(16,50,44,.09),
    0 1px 6px rgba(16,50,44,.10);
}
#luma-root .byline__who{display:block;margin:0;line-height:1.3;}
#luma-root .byline__who b{
  display:block;font-family:var(--ff-head);font-weight:600;
  font-size:.88rem;color:var(--ink);letter-spacing:-.005em;
}
#luma-root .byline__who span{
  display:block;font-family:var(--ff-head);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px;
}

/* ---------- 8. Beweis: Risiko-Umkehr (Vorlage, aktuell nicht eingebunden) ---------- */
#luma-root .promise{
  display:flex;gap:24px;align-items:flex-start;
  padding:36px 34px;margin-bottom:var(--s-3);
  border:1px solid var(--accent-line);border-radius:var(--r-lg);background:var(--card);
}
#luma-root .promise__ico{color:var(--accent);flex:none;}
#luma-root .promise h3{margin:0 0 10px;font-size:1.4rem;}
#luma-root .promise p{margin:0;max-width:60ch;}
#luma-root .ba{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2);}
#luma-root .bacard{padding:26px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);}
#luma-root .bacard h4{margin:0 0 16px;font-size:1.02rem;}
#luma-root .bacard dl{margin:0;display:grid;gap:12px;}
#luma-root .bacard dt{
  font-family:var(--ff-head);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
#luma-root .bacard dd{margin:0;font-size:.9rem;}
#luma-root .bacard .is-after dt{color:var(--accent);}
#luma-root .bacard .is-after dd{color:var(--ink);}

/* ---------- 9. Abgrenzung: Vergleichstabelle (dunkle Sektion) ---------- */
#luma-root .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
#luma-root .cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:.88rem;}
#luma-root .cmp th,#luma-root .cmp td{padding:15px 16px;text-align:center;border-bottom:1px solid var(--line);}
#luma-root .cmp tbody tr:last-child th,#luma-root .cmp tbody tr:last-child td{border-bottom:0;}
#luma-root .cmp thead th{
  font-family:var(--ff-head);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding-top:22px;padding-bottom:18px;
}
#luma-root .cmp tbody th{text-align:left;font-weight:400;color:var(--text);min-width:250px;}
#luma-root .cmp .is-us{background:rgba(255,255,255,.05);color:var(--heading);}
#luma-root .cmp thead .is-us{color:var(--accent-soft);font-size:.78rem;}
#luma-root .cmp .yes{color:var(--tq);font-weight:500;}
#luma-root .cmp .no{color:var(--muted);}
#luma-root .cmp .val{font-family:var(--ff-head);font-weight:600;font-size:.82rem;}
#luma-root .cmp__ico{display:inline-block;vertical-align:middle;}
#luma-root .cmp .x{color:#C4796F;}

/* ---------- 10. Angebot: einmalig und monatlich sauber getrennt ---------- */
#luma-root .offer{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);}
#luma-root .offercard{
  display:flex;flex-direction:column;padding:36px 32px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
}
#luma-root .offercard--run{border-color:var(--accent-line);}
#luma-root .offercard__kind{
  font-family:var(--ff-head);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;
}
#luma-root .offercard h3{margin:0 0 8px;font-size:1.3rem;}
#luma-root .offercard__lead{margin:0 0 22px;font-size:.92rem;}
#luma-root .offercard ul{display:grid;gap:11px;margin-bottom:24px;}
#luma-root .offercard li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;}
#luma-root .offercard li svg{color:var(--accent);flex:none;margin-top:4px;}
#luma-root .offercard__price{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--ff-display);font-size:1.5rem;font-weight:400;color:var(--ink);line-height:1.2;
}
#luma-root .offercard__price span{display:block;margin-top:8px;
  font-family:var(--ff-body);font-size:.82rem;font-weight:400;color:var(--muted);line-height:1.6;}

/* ---------- Ausklappliste fuer technische Details (nutzt die FAQ-Optik) ---------- */
#luma-root .details{margin-top:var(--s-4);}

/* ---------- Responsive fuer diese Bausteine ---------- */
@media (max-width:900px){
  #luma-root .prob{grid-template-columns:1fr;}
  #luma-root .costgrid{grid-template-columns:1fr;}
  #luma-root .grid-2{grid-template-columns:1fr;}
  #luma-root .ba{grid-template-columns:1fr;}
  #luma-root .offer{grid-template-columns:1fr;}
  #luma-root .promise{flex-direction:column;gap:16px;}
  #luma-root .trustbar__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3) 0;}
  #luma-root .trustbar__item:nth-child(odd){border-left:0;padding-left:0;}
}
@media (max-width:600px){
  #luma-root .trustbar__inner{grid-template-columns:1fr;gap:var(--s-3);}
  #luma-root .trustbar__item{border-left:0;padding-left:0;}
  #luma-root .trustbar__txt{max-width:none;}
  #luma-root .costcard,#luma-root .costsum,#luma-root .promise,
  #luma-root .offercard,#luma-root .ctaband{padding-left:22px;padding-right:22px;}
  #luma-root .bcard{padding:28px 22px;}
  #luma-root .bcard__tag{left:22px;}
}

/* ---------- 4b. Rechner "Preis des Nichtstuns" ----------
   Die Rechenlogik bleibt vollstaendig. Nur die Optik ist ernster:
   schmale Spur, kleiner Griff, kein dicker farbiger Fuellstand.
   Ein auffaelliger Schieberegler wirkt wie ein Spielzeug.
   Der Regler bleibt komplett tastaturbedienbar (Pfeiltasten, Pos1/Ende). */
#luma-root .calc{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-4);
  padding:32px 34px 26px;margin-bottom:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-lg);background:transparent;
}
#luma-root .calc__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px;}
#luma-root .calc__head label{
  font-family:var(--ff-head);font-size:.85rem;font-weight:500;color:var(--heading);
  letter-spacing:0;
}
#luma-root .calc__val{
  font-family:var(--ff-display);font-size:1.7rem;font-weight:400;color:var(--heading);
  letter-spacing:0;line-height:1;flex:none;
  font-variant-numeric:tabular-nums;
}
#luma-root .calc__hint{margin:10px 0 0;font-size:.78rem;color:var(--muted);}

#luma-root .calc__range{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:44px;margin:0;   /* 44px = bequeme Tippflaeche am Handy */
  background:transparent;cursor:pointer;
}
#luma-root .calc__range::-webkit-slider-runnable-track{
  height:2px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent-soft) var(--fill,30%),rgba(255,255,255,.16) var(--fill,30%));
}
#luma-root .calc__range::-moz-range-track{
  height:2px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);
}
#luma-root .calc__range::-moz-range-progress{
  height:2px;border-radius:var(--r-pill);background:var(--accent-soft);
}
#luma-root .calc__range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-6px;border-radius:50%;
  background:var(--accent-soft);border:0;box-shadow:none;
}
#luma-root .calc__range::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent-soft);border:0;box-shadow:none;
}
#luma-root .calc__range:focus-visible{outline:none;}
#luma-root .calc__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--focus);}
#luma-root .calc__range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--focus);}

#luma-root .costsum__month{
  margin-top:var(--s-2)!important;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.92rem;color:var(--muted);
}
#luma-root .costsum__month b{color:var(--heading);font-weight:500;font-variant-numeric:tabular-nums;}
#luma-root .costsum__num{font-variant-numeric:tabular-nums;}

@media (max-width:900px){
  #luma-root .calc{grid-template-columns:1fr;gap:var(--s-3);}
}
@media (max-width:600px){
  #luma-root .calc{padding:24px 22px 20px;}
  #luma-root .calc__val{font-size:1.4rem;}
  #luma-root .calc__head{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* Der Regler steht allein und laeuft ueber die volle Breite. */
#luma-root .calc__row--wide{grid-column:1/-1;}
#luma-root .calc--single{grid-template-columns:1fr;}
#luma-root .costsum__formula{
  margin:0 0 14px;font-family:var(--ff-head);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- 4c. Scroll-Erzaehlung "Die ungenutzte Nachfrage" ----------
   Ersetzt die frueheren drei statischen Karten 120 / 10 / 3.

   Die Grafik links bleibt beim Scrollen stehen (position:sticky), die
   Textbloecke rechts laufen daran vorbei. main.js setzt dabei nur
   data-stage="1|2|3" auf den Container. Alles Weitere macht CSS.

   Bewusst KEINE Bewegung: die Punkte wechseln nur die Farbe und drei
   davon werden groesser. Das passt zur ruhigen Anmutung der Seite.

   Ohne JavaScript bleibt Stufe 1 stehen. Alle drei Textbloecke sind
   trotzdem lesbar, es geht also keine Aussage verloren. */
#luma-root .scrolly{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  margin-bottom:var(--s-5);
}

/* --- Linke Seite: die Grafik, die stehen bleibt --- */
#luma-root .scrolly__vis{
  position:sticky;
  /* Mittig im Bild, aber unter der Kopfzeile */
  top:calc(50vh - 240px);
  align-self:start;
}
#luma-root .scrolly__card{
  position:relative;overflow:hidden;
  padding:26px 26px 20px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(0,0,0,.18);
}
#luma-root .scrolly__num{
  position:relative;height:1em;margin:0;
  font-family:var(--ff-display);font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:1;color:var(--heading);font-variant-numeric:tabular-nums;
}
#luma-root .scrolly__num span{
  /* Kurz halten: bei einem langen Uebergang liegen zwei Zahlen
     sichtbar uebereinander und das sieht nach Fehler aus. */
  position:absolute;left:0;top:0;opacity:0;transition:opacity .16s linear;
}
#luma-root .scrolly__cap{
  position:relative;height:2.6em;margin:10px 0 0;
  font-family:var(--ff-head);font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.3;
}
#luma-root .scrolly__cap span{
  position:absolute;left:0;top:0;max-width:22ch;opacity:0;transition:opacity .16s linear;
}
#luma-root .scrolly[data-stage="1"] .scrolly__num span[data-num="1"],
#luma-root .scrolly[data-stage="2"] .scrolly__num span[data-num="2"],
#luma-root .scrolly[data-stage="3"] .scrolly__num span[data-num="3"],
#luma-root .scrolly[data-stage="1"] .scrolly__cap span[data-cap="1"],
#luma-root .scrolly[data-stage="2"] .scrolly__cap span[data-cap="2"],
#luma-root .scrolly[data-stage="3"] .scrolly__cap span[data-cap="3"]{opacity:1;}

/* --- Die 120 Punkte: ein Punkt = eine Suchanfrage im Monat --- */
#luma-root .dots{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(9px,1.5vw,16px);
  margin:22px 0 20px;
}
#luma-root .dots .dot{
  width:100%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.13);
  transition:background-color .45s var(--ease),transform .45s var(--ease),opacity .45s var(--ease);
}
/* Stufe 2 und 3: die zehn Anfragen leuchten auf */
#luma-root .scrolly[data-stage="2"] .dot--ask,
#luma-root .scrolly[data-stage="3"] .dot--ask{background:var(--accent-soft);opacity:.5;}
/* Stufe 3: drei davon werden zum Auftrag */
#luma-root .scrolly[data-stage="3"] .dot--job{opacity:1;transform:scale(2);}

#luma-root .scrolly__key{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:.74rem;color:var(--muted);
}
#luma-root .scrolly__key li{display:flex;align-items:center;gap:8px;}
#luma-root .scrolly__key .k{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);flex:none;}
#luma-root .scrolly__key .k--on{background:var(--accent-soft);}

/* --- Rechte Seite: die drei Textbloecke, die vorbeilaufen --- */
#luma-root .scrolly__steps{display:block;}
#luma-root .scrolly__step{
  min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.4;transition:opacity .4s var(--ease);
}
#luma-root .scrolly__step.is-active{opacity:1;}
#luma-root .scrolly__step h3{margin:0 0 12px;font-size:1.35rem;}
#luma-root .scrolly__step p{margin:0;font-size:.98rem;max-width:38ch;}
/* Muss NACH der Regel darueber stehen und gleich stark sein,
   sonst gewinnt dort font-size:.98rem und die Zahl wird winzig. */
#luma-root .scrolly__step .scrolly__step-n{
  margin:0 0 6px;font-family:var(--ff-display);font-size:2.2rem;line-height:1;
  color:var(--accent-soft);font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  /* Blockfluss statt Raster: nur so ist der Container hoch genug,
     damit die Grafik oben kleben bleiben kann. */
  #luma-root .scrolly{display:block;}
  #luma-root .scrolly__vis{top:76px;z-index:2;}
  #luma-root .scrolly__card{
    /* Deckender Hintergrund: der Text laeuft darunter durch. */
    background:var(--deep);box-shadow:0 14px 26px rgba(0,0,0,.35);
  }
  /* Die Karte muss flach bleiben, sonst bleibt fuer den Text darunter
     kein Platz mehr. Darum kleinere Abstaende und keine Legende. */
  #luma-root .scrolly__card{padding:18px 18px 14px;}
  #luma-root .dots{gap:5px;margin:14px 0 0;}
  #luma-root .scrolly__num{font-size:2.2rem;}
  #luma-root .scrolly__cap{font-size:.6rem;height:2.4em;}
  #luma-root .scrolly__key{display:none;}
  #luma-root .scrolly__step{min-height:46vh;}
  #luma-root .scrolly__steps{padding-top:var(--s-3);}
  #luma-root .scrolly__step-n,
  #luma-root .scrolly__step .scrolly__step-n{font-size:1.8rem;}
}

/* Ohne Bewegung: alle drei Bloecke gleich stark, Grafik im Endzustand. */
@media (prefers-reduced-motion: reduce){
  #luma-root .scrolly__step{opacity:1;}
}

/* ---------- 5. Sektion "Unser System" ----------
   Drei Schritte nebeneinander, verbunden durch eine duenne Linie mit
   Pfeilen, darunter ein zurueckfuehrender Bogen. Der zeigt den Kreislauf.
   Die alte breite SVG-Grafik und der Hinweis "Grafik seitlich schieben"
   sind bewusst entfallen. */
#luma-root .sec--sys{padding-block:clamp(78px,10vw,128px);}

#luma-root .sysflow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(34px,5vw,64px);
  margin-top:var(--s-4);
}
#luma-root .sysflow__step{position:relative;isolation:isolate;padding-top:38px;}
/* Die Ziffer steht als sehr helle Zahl HINTER dem Text. Kein Icon-Feuerwerk. */
#luma-root .sysflow__n{
  position:absolute;top:-.30em;left:-4px;z-index:-1;
  font-family:var(--ff-display);font-weight:400;letter-spacing:0;line-height:1;
  font-size:clamp(4.4rem,7.4vw,6.6rem);color:var(--accent-line);
  font-variant-numeric:tabular-nums;
}
#luma-root .sysflow__step h3{margin:0 0 10px;font-size:1.24rem;}
#luma-root .sysflow__step p{margin:0;font-size:.94rem;color:var(--text);max-width:30ch;}
/* Verbindungslinie mit Pfeilspitze, liegt in der Rasterluecke. */
#luma-root .sysflow__step + .sysflow__step::before{
  content:"";position:absolute;top:56px;
  left:calc(-1 * clamp(34px,5vw,64px));width:clamp(34px,5vw,64px);height:1px;
  background:var(--accent-line);
}
#luma-root .sysflow__step + .sysflow__step::after{
  content:"";position:absolute;top:53px;left:-9px;width:7px;height:7px;
  border-top:1px solid var(--accent-line);border-right:1px solid var(--accent-line);
  transform:rotate(45deg);
}
/* Der zurueckfuehrende Bogen: eine Linie, mehr nicht. */
#luma-root .sysflow__loop{width:100%;height:auto;margin-top:var(--s-3);color:var(--muted);}
#luma-root .sysflow__cap{
  margin:var(--s-3) auto 0;max-width:52ch;
  font-size:.92rem;color:var(--muted);text-align:center;
}
@media (max-width:900px){
  #luma-root .sysflow{grid-template-columns:1fr;gap:var(--s-4);}
  #luma-root .sysflow__step + .sysflow__step::before{
    top:-30px;left:26px;width:1px;height:26px;
  }
  #luma-root .sysflow__step + .sysflow__step::after{
    top:-12px;left:23px;transform:rotate(135deg);
  }
  #luma-root .sysflow__loop{display:none;}
  #luma-root .sysflow__cap{margin-top:var(--s-4);}
}

/* Turnstile-Widget: etwas Abstand zum Knopf.
   Das Aussehen kommt von Cloudflare (data-theme), wir setzen nur den
   Abstand. Der gesperrte Knopf bekommt einen klaren Zustand. */
#luma-root .turnstile-box{margin-bottom:12px;min-height:65px;}
#luma-root #f-turnstile-hint{margin:0 0 18px;}
#luma-root .btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Danke-Meldung nach erfolgreichem Absenden. */
#luma-root .formdone{text-align:center;padding:22px 4px 10px;}
#luma-root .formdone:focus{outline:none;}
#luma-root .formdone__ico{color:var(--accent);margin-bottom:18px;margin-inline:auto;}
#luma-root .formdone h3{margin:0 0 12px;font-size:1.3rem;}
#luma-root .formdone p{margin:0 0 10px;}
#luma-root .formdone__tel{font-size:.9rem;color:var(--muted);}
#luma-root .formdone__tel a{color:var(--accent);}

/* ==========================================================================
   RECHTSSEITEN (Impressum, Datenschutz)
   Eigene Klasse, damit die Fliesstext-Seiten dieselben Farben, Schriften
   und Abstaende nutzen wie die Startseite.
   ========================================================================== */

/* Kopfzeile: schlicht, nur Marke und ein Weg zurueck. */
#luma-root .lnav{
  position:sticky;top:0;z-index:120;
  padding-top:env(safe-area-inset-top);
  background:rgba(245,242,236,.86);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line);
}
#luma-root .lnav__inner{display:flex;align-items:center;gap:var(--s-2);height:76px;}

/* Kopfbereich der Seite, ruhig und hell. */
#luma-root .lhead{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(56px,8vw,96px) clamp(36px,5vw,56px);
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
#luma-root .lhead h1{margin:0;font-size:clamp(2.3rem,4.6vw,3.4rem);}
#luma-root .lhead .lead{margin-top:var(--s-2);}

/* Fliesstext: schmaler als die Startseite, damit Zeilen gut lesbar bleiben. */
#luma-root .legal{max-width:72ch;margin-inline:auto;padding-bottom:var(--s-6);}
#luma-root .legal h2{
  font-size:clamp(1.5rem,2.6vw,2rem);
  margin:var(--s-5) 0 var(--s-2);
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
}
#luma-root .legal h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--s-4);}
#luma-root .legal h3{margin:var(--s-3) 0 var(--s-1);color:var(--ink);}
#luma-root .legal h4{
  font-family:var(--ff-head);font-size:.95rem;font-weight:600;
  color:var(--ink);margin:var(--s-2) 0 6px;
}
#luma-root .legal p{margin:0 0 1.15em;}
/* :not(.btn) ist wichtig: sonst faerbt die Linkfarbe den Knopftext ein
   und der Text verschwindet auf dem dunklen Knopf. */
#luma-root .legal a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
#luma-root .legal a:not(.btn):hover{color:var(--ink);}
#luma-root .legal ul{list-style:none;margin:0 0 1.15em;padding:0;}
#luma-root .legal li{position:relative;padding-left:26px;margin-bottom:10px;}
#luma-root .legal li::before{
  content:"";position:absolute;left:6px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.6;
}
#luma-root .legal strong{color:var(--ink);font-weight:600;}

/* Kontaktblock und Anbieterliste heben sich als Karte ab. */
#luma-root .legal .card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--s-3);margin:0 0 1.15em;
}
#luma-root .legal .card p:last-child{margin-bottom:0;}

/* Die beiden Widerspruchs-Absaetze stehen im Original in Grossbuchstaben.
   Klein gesetzt mit Rahmen liest sich das besser und bleibt trotzdem auffaellig. */
#luma-root .legal .caps{
  background:rgba(23,104,91,.04);border-left:2px solid var(--accent-line);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s-2) var(--s-3);font-size:.92rem;color:var(--text);
}
#luma-root .legal .src{margin-top:var(--s-4);font-size:.86rem;color:var(--muted);}

/* Abschluss: klarer Weg zurueck, nicht nur ein kleiner Link. */
#luma-root .lback{
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;
}

/* Der Knopf oben rechts darf nie umbrechen, sonst wird die Kopfzeile hoch. */
#luma-root .lnav .btn{white-space:nowrap;}

@media (max-width:640px){
  #luma-root .lnav__inner{height:66px;}
  #luma-root .legal h2{margin-top:var(--s-4);}
}

@media (max-width:520px){
  /* Auf schmalen Geraeten ist der Platz knapp: Logo und Knopf kleiner,
     damit beides in eine Zeile passt. */
  #luma-root .lnav .brand__logo{height:36px;}
  #luma-root .lnav .btn{min-height:44px;padding:11px 18px;font-size:.82rem;}
  #luma-root .lback .btn{width:100%;}
}