@font-face{font-family:'Geologica';font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/geologica-300-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:'Geologica';font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/geologica-300-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:'Geologica';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geologica-400-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:'Geologica';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geologica-400-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:'Geologica';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geologica-500-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:'Geologica';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geologica-500-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:'Geologica';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geologica-600-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:'Geologica';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geologica-600-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:'Geologica';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geologica-700-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:'Geologica';font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geologica-700-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:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/lora-400-italic-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:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/lora-400-italic-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:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/lora-500-italic-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:'Lora';font-style:italic;font-weight:500;font-display:swap;src:url("/fonts/lora-500-italic-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:'Lora';font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/lora-600-italic-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:'Lora';font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/lora-600-italic-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:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/lora-400-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:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/lora-400-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:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/lora-500-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:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/lora-500-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:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/lora-600-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:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/lora-600-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;}

/* ============================================================
   Beauty Rocío — Homepage
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'New Eviore';
  src:url('fonts/New-Eviore.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'New Eviore';
  src:url('fonts/New-Eviore-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --green-900:#171614;
  --green-800:#1e2218;
  --green-700:#283124;
  --olive:#5e6a42;
  --gold:#ebc856;
  --gold-200:#ecdba5;
  /* Zweites Gold fuer helle Flaechen. --gold auf --cream ergibt 1,52:1 und auf
     --cream-alt 1,42:1 — beides weit unter jeder Schwelle. Auf dunklem Grund bleibt
     --gold mit 8,31:1 unangetastet; hier geht es nur um helle Flaechen.

     Der Wert stand zuerst auf #8a6a10. Das reichte fuer die Jahreszahl im Nachweisblock
     (24px, grosse Schrift, Schwelle 3:1), nicht aber fuer die Preisueberschriften
     .plist__title: 11px sind kleine Schrift, dort verlangt die WCAG 4,5:1, und #8a6a10
     kam auf --cream-alt nur auf 4,44 — knapp daneben ist auch daneben. Ein Prueflauf
     ueber alle 45 gebauten Seiten (25.08.2026, berechneter Kontrast je Textknoten)
     fand die Ueberschriften auf 21 Seiten bei 1,42:1: praktisch unlesbar.

     #85690f haelt denselben Farbton (46°) und traegt jetzt jede Flaeche der Seite:
     4,57:1 auf --cream-alt · 4,88:1 auf --cream · 4,61:1 auf --cream-100.
     Wer diesen Wert wieder aufhellt, nimmt die Preisueberschriften mit. */
  --gold-tief:#85690f;
  --cream-100:#f9f1d5;
  --cream:#fbf7ee;
  /* Zweite Cremeflaeche fuer den Sektionswechsel. Bis 18.08.2026 #faf6ed —
     nur 1/255 pro Kanal neben --cream, Kontrast 1.01:1: der angelegte Wechsel
     war unsichtbar, Sektionsgrenzen verschwanden (Befund der Rhythmusprüfung).
     Jetzt ein Olivwaschgang von ~5 % --olive auf --cream — sichtbar, aber
     unterhalb des 10%-Tons von .about (#ebe9dd), damit die Stufung bleibt. */
  --cream-alt:#f3f0e5;
  --ink:#283124;
  --muted:#4e4a3d;
  --muted-2:#6b6553;

  --f-display:'New Eviore','Lora',Georgia,serif;
  --f-body:'Geologica',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-serif:'Lora',Georgia,serif;

  --container:1500px;
  --gutter:48px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;
  background:var(--green-700);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--olive);outline-offset:3px;border-radius:4px}
.hero :focus-visible,
.nav:not(.is-hell) :focus-visible,
.brands :focus-visible,
.cats :focus-visible,
.book :focus-visible,
.shero :focus-visible,
.steps--bild :focus-visible,
.cta :focus-visible,
.nf :focus-visible,
.foot :focus-visible,
.mmenu :focus-visible,
.cbar :focus-visible{outline-color:var(--gold)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--gold);color:var(--green-700);
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:500;
}
.skip-link:focus{left:0}

.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}

/* ---------- Shared type ---------- */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:400;line-height:1.3;
  letter-spacing:2.2px;text-transform:uppercase;
}
.eyebrow__rule{flex:0 0 24px;height:1px;background:var(--gold)}
.eyebrow--gold{color:var(--gold)}
.eyebrow--olive{color:var(--olive)}
.eyebrow--dark{color:#3d4535}
.eyebrow--sage{color:var(--olive)}
.hero .eyebrow__rule{background:var(--gold-200)}

.h2{
  font-family:var(--f-display);
  font-size:49px;line-height:53.9px;font-weight:400;
  color:var(--green-700);
}
.h2 em{font-style:italic}
.h2--olive em{color:var(--olive)}
.h2--serif{font-family:var(--f-serif);font-weight:500}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 32px;border-radius:100px;
  font-size:12px;font-weight:500;line-height:1.2;
  letter-spacing:1.44px;text-transform:uppercase;
  white-space:nowrap;
  transition:transform .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn--gold{background:var(--gold);color:var(--green-700)}
.btn--gold:hover{background:#f0d472;transform:translateY(-2px);box-shadow:0 8px 24px rgba(235,200,86,.28)}
.btn--dark{background:var(--green-700);color:var(--gold-200)}
.btn--dark:hover{background:var(--green-800);transform:translateY(-2px)}
.btn--sm{padding:10px 18px;letter-spacing:1.32px;font-size:11px;line-height:13.2px}

.link-underline{
  font-size:12px;font-weight:300;letter-spacing:.96px;
  color:rgba(236,219,165,.65);
  padding-bottom:2px;border-bottom:1px solid rgba(236,219,165,.35);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link-underline:hover{color:var(--gold-200);border-color:var(--gold-200)}

.link-caps{
  display:inline-block;
  font-size:12px;letter-spacing:1.54px;text-transform:uppercase;
  color:var(--olive);padding-bottom:1px;
  border-bottom:1px solid rgba(94,106,66,.45);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link-caps:hover{color:var(--green-700);border-color:var(--green-700)}

.price{
  display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:100px;
  background:rgba(94,106,66,.25);
  color:var(--gold-200);
  font-size:13px;font-weight:400;
}
.price--sand{background:rgba(94,106,66,.14);color:var(--green-700);font-family:var(--f-display);font-size:15px}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:18px;left:0;right:0;
  width:min(1200px,calc(100% - 40px));
  margin-inline:auto;
  z-index:100;
  will-change:auto;
}
.nav__bar{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 36px;
  border-radius:100px;
  border:1px solid rgba(94,106,66,.13);
  box-shadow:0 4px 32px rgba(30,34,24,.08);
}
/* Zwei Zustände wie im Entwurf: über dem dunklen Hero dunkelgrün,
   ab dem ersten Scrollen creme. Der Wechsel läuft über .nav.is-hell. */
.nav__bar::before{
  content:'';position:absolute;inset:0;
  border-radius:100px;
  /* Grundton = green-700 des Heros, damit der Pill am Seitenanfang mit dem
     Hero verschmilzt statt als hellere Kachel darauf zu stehen. */
  background:rgba(40,49,36,.6);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  z-index:-1;
  transform:translateZ(0);
  transition:background .35s var(--ease);
}
.nav.is-hell .nav__bar::before{background:rgba(247,242,232,.88)}

.nav__bar{border-color:rgba(236,219,165,.1)}
.nav.is-hell .nav__bar{border-color:rgba(94,106,66,.13)}

.nav__logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav__logo-dunkel{display:none}
.nav.is-hell .nav__logo-hell{display:none}
.nav.is-hell .nav__logo-dunkel{display:block}
.nav__menu{display:flex;align-items:center;gap:32px;flex:1}
.nav__item{position:relative;display:flex;align-items:center;align-self:stretch}
.nav__link{
  font-size:12px;font-weight:400;line-height:1.2;
  text-transform:uppercase;color:var(--cream-100);
  padding:24px 0;
  transition:color .25s var(--ease);
}
.nav__link:hover{color:var(--gold)}
.nav__link.is-current{color:var(--gold);font-weight:500}
.nav.is-hell .nav__link{color:var(--green-700)}
.nav.is-hell .nav__link:hover{color:var(--olive)}
.nav.is-hell .nav__link.is-current{color:var(--olive)}

.nav__logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;
}
.nav__logo img{width:133px;height:32px}

.nav__actions{display:flex;justify-content:flex-end;flex:1}
.nav__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:175px;height:40px;border-radius:50px;
  background:var(--gold);color:var(--green-700);
  font-size:13px;font-weight:500;text-transform:uppercase;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.nav__cta:hover{background:var(--gold-200)}
.nav__cta.is-current{box-shadow:0 0 0 2px rgba(236,219,165,.55)}
.nav.is-hell .nav__cta{background:var(--green-700);color:var(--gold-200)}
.nav.is-hell .nav__cta:hover{background:var(--gold);color:var(--green-700)}
.nav.is-hell .nav__cta.is-current{box-shadow:0 0 0 2px rgba(94,106,66,.3)}

.nav__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:46px;height:46px;margin-right:-10px}
.nav__burger span{display:block;width:22px;height:1.5px;background:var(--cream-100);transition:transform .3s var(--ease),opacity .2s,background .25s var(--ease)}
.nav.is-hell .nav__burger span{background:var(--green-700)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Der Fokuswaechter in script.js haelt den Tab-Lauf im offenen Menue schon fest.
   visibility:hidden ist der zweite Riegel: faellt das Skript aus, ist der unsichtbare
   Burger unter dem Menue trotzdem nicht anspringbar. */
.nav.is-open .nav__burger{opacity:0;pointer-events:none;visibility:hidden}

/* Mega menu */
/* Der Abstand zur Leiste steckt als padding IM Panel, nicht im top-Wert. Sonst
   liegen zwischen Knopf und Menue 36px, die zu keinem der beiden gehoeren: die
   Maus verlaesst dort .nav__item, der Schliess-Timer laeuft an und das Menue
   klappt unter dem Zeiger weg, bevor er ankommt. */
.mega,.drop{
  position:absolute;top:100%;left:0;padding-top:36px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:5;
}
.nav__item.is-open .mega,.nav__item.is-open .drop{opacity:1;visibility:visible;transform:translateY(0)}

.mega__inner{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 48px;
  /* Das Panel haengt 37px innerhalb der Pille (36px Innenrand + Rahmen). Damit es
     rechts nicht darueber hinauslaeuft — bei 1201px tat es das vorher um 17px —
     darf es hoechstens Fensterbreite minus 2x37px werden. 94 statt 74, weil 100vw
     eine klassische Bildlaufleiste mitrechnet und die Pille nicht. */
  width:min(1144px,calc(100vw - 94px));padding:32px 38px;
  border-radius:20px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border:1px solid rgba(94,106,66,.12);
  box-shadow:0 20px 60px rgba(30,34,24,.13);
}
.mega__col{display:flex;flex-direction:column;gap:7px;min-width:0}
.mega__col:nth-child(n+4){padding-top:24px;border-top:1px solid rgba(94,106,66,.12)}
.mega__title{
  margin-bottom:12px;
  font-size:11px;font-weight:500;line-height:14px;
  letter-spacing:1.6px;text-transform:uppercase;
  color:var(--green-700);
}
.mega__link{
  display:block;padding:9px 0;
  font-size:13px;font-weight:300;line-height:18px;
  /* Die drei grosszuegigen Spalten lassen lange Bezeichnungen natürlich umbrechen,
     ohne dass Links in die Nachbargruppe hineinlaufen. */
  color:#3d4535;
  transition:color .2s var(--ease),transform .2s var(--ease);
}
.mega__link:hover{color:var(--olive);transform:translateX(3px)}
.mega__link[aria-current="page"]{color:var(--olive);font-weight:500}
.mega__foot{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:18px;border-top:1px solid rgba(94,106,66,.14);
}
.mega__foot-link{
  display:inline-flex;align-items:baseline;gap:8px;
  font-size:13px;font-weight:400;color:var(--green-700);
  transition:color .2s var(--ease);
}
.mega__foot-link span{font-size:12px;font-weight:300;color:var(--muted)}
.mega__foot-link:hover{color:var(--olive)}
.mega__focus{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.mega__focus-title{
  font-size:10px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)
}
.mega__focus-link{
  font-size:12px;font-weight:350;color:#3d4535;
  transition:color .2s var(--ease)
}
.mega__focus-link + .mega__focus-link{padding-left:14px;border-left:1px solid rgba(94,106,66,.14)}
.mega__focus-link:hover{color:var(--olive)}

/* Kurse dropdown */
.drop__inner{
  width:340px;padding:32px;border-radius:20px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border:1px solid rgba(94,106,66,.12);
  box-shadow:0 20px 60px rgba(30,34,24,.13);
}
.drop__row{
  display:block;padding:12px 14px;border-radius:12px;
  transition:background .22s var(--ease);
}
.drop__row:hover{background:rgba(94,106,66,.09)}
.drop__row-title{display:block;font-size:14px;font-weight:400;color:var(--green-700)}
.drop__row-sub{display:block;margin-top:3px;font-size:11px;font-weight:300;color:var(--muted)}

/* Mobile menu */
.mmenu{
  position:fixed;inset:0;z-index:101;
  padding:110px 24px 40px;
  background:rgba(40,49,36,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  overflow-y:auto;
}
.mmenu__close{
  position:fixed;top:24px;right:30px;
  display:grid;place-items:center;width:46px;height:46px;
  color:var(--cream-100);border-radius:50%;
}
.mmenu__close span,.mmenu__close span::after{
  display:block;width:23px;height:1.5px;background:currentColor;
  content:'';transform:rotate(45deg);
}
.mmenu__close span::after{transform:rotate(90deg)}
.mmenu__row{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:52px;padding:14px 0;border-bottom:1px solid rgba(236,219,165,.14);
  font-size:14px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--cream-100);text-align:left;
}
.mmenu__cta{
  display:flex;align-items:center;justify-content:center;
  margin-top:28px;padding:16px;border-radius:100px;
  background:var(--gold);color:var(--green-700);
  font-size:13px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;
}
.mmenu__row.is-current,.mmenu__row[aria-current="page"]{color:var(--gold);font-weight:500}
.mmenu__cta.is-current{box-shadow:inset 0 0 0 2px rgba(40,49,36,.28)}
.mmenu__back{
  display:flex;align-items:center;min-height:44px;margin-bottom:10px;
  font-size:13px;letter-spacing:1px;
  text-transform:uppercase;color:var(--gold);
}
/* Die sechs Bereiche bleiben auf dem Telefon sofort sichtbar; ihre einzelnen
   Behandlungen oeffnen sich nativ per details/summary. */
.mmenu__gruppe + .mmenu__gruppe{margin-top:4px}
.mmenu__titel{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:50px;margin:0;padding:13px 0;cursor:pointer;list-style:none;
  border-bottom:1px solid rgba(236,219,165,.14);
  font-size:11px;font-weight:500;line-height:1.4;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold);text-wrap:balance;
}
.mmenu__titel::-webkit-details-marker{display:none}
.mmenu__titel span{font-size:19px;font-weight:300;transition:transform .2s var(--ease)}
.mmenu__gruppe[open] .mmenu__titel span{transform:rotate(45deg)}
.mmenu__gruppe[open] .mmenu__titel{border-bottom-color:rgba(235,200,86,.4)}
.mmenu__gruppe > div{padding-left:14px}
/* Die Trennlinie der letzten Zeile einer Gruppe entfaellt — sonst stehen unter der
   Gruppe zwei Linien uebereinander, die Trennlinie und der Abstand zur naechsten. */
.mmenu__gruppe .mmenu__row:last-child{border-bottom:0}
/* Der Ausweg ganz unten gehoert keiner Gruppe an und traegt deshalb eine eigene,
   ruhigere Zeile: kein Versalsatz, etwas Abstand nach oben. */
.mmenu__row--alle{margin-top:26px;color:var(--gold-200)}

/* ============================================================
   HERO
   ============================================================ */
/* Vorher: harte 800px auf jedem Desktop. Bei 1280x720 ragte der Hero damit 80px aus
   dem Viewport und schnitt die Beweis-Pillen ab; bei 1440x900 blieben genau 100px der
   naechsten Cremeflaeche stehen, die selbst mit 72px Innenabstand beginnt — sichtbar
   war also ein leerer Streifen. svh statt vh, weil mobile Browserleisten sonst
   mitrechnen. */
.hero{
  position:relative;
  display:flex;flex-direction:column;
  min-height:clamp(660px, 100svh, 820px);
  padding-top:100px;
  overflow:hidden;
  background:var(--green-700);
}
.hero__pic,.hero__pic img{position:absolute;inset:0;width:100%;height:100%}
.hero__pic img{object-fit:cover;object-position:center}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(40,49,36,.9) 0%,rgba(40,49,36,.62) 32%,rgba(40,49,36,.12) 60%,rgba(40,49,36,0) 78%);
}

/* Untere Reserve, sonst kleben Pillen und Bewertung bei 768px auf der Sektionskante. */
.hero__body{position:relative;z-index:2;display:flex;align-items:center;flex:1;padding-bottom:44px}
.hero__copy{max-width:560px}
.hero__title{
  margin:0 0 28px;
  font-family:var(--f-display);
  font-size:82px;line-height:1.06;font-weight:400;
  color:var(--gold-200);
}
.hero__title em{font-style:italic}
.hero__lead{
  max-width:430px;margin-bottom:36px;
  font-size:17px;font-weight:300;line-height:1.7;
  color:rgba(236,219,165,.85);
}
.hero__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* Vorher schwebten Bewertung und Pillen frei im Bild: der Kasten am Viewportrand
   (bei 1920 dadurch allein im Leeren), die Pillen mittig unter dem Model statt beim
   Text. Beides gehoert in die Textspalte, damit es einen Leseweg gibt statt drei Inseln.
   Und auf dem Handy war die Bewertung ganz ausgeblendet — ausgerechnet dort, wo die
   meisten sie sehen. */
.hero__note{
  display:inline-flex;align-items:center;gap:11px;
  min-height:44px;
  margin-top:32px;padding:11px 18px 11px 16px;
  border-radius:100px;
  background:rgba(40,49,36,.68);
  border:1px solid rgba(235,200,86,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.hero__note:hover{border-color:rgba(235,200,86,.5);background:rgba(40,49,36,.82)}
.hero__note-wert{font-size:16px;font-weight:500;color:var(--gold-200);line-height:1}
.hero__note-sterne{
  font-size:13px;letter-spacing:2px;line-height:1;
  background:linear-gradient(90deg,var(--gold) 92%,rgba(236,219,165,.3) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__note-text{font-size:13px;font-weight:300;color:rgba(236,219,165,.8);line-height:1}

/* ============================================================
   VERTRAUEN
   ============================================================ */
/* Beweisleiste statt Beweisblock.
   Der alte 346px-Block liess auf einem 1904x1014-Monitor nur einen angeschnittenen
   Satz uebrig. Die Leiste ist rund ein Drittel so hoch und sagt dasselbe.
   Ein erster Versuch zog sie 56px in den Hero hinein — das nahm ihr die Luft nach
   oben und liess den Hero gedraengt wirken. Sie steht deshalb unter dem Hero, mit
   eigenem Abstand auf beiden Seiten.
   Die drei Hero-Pillen sind entfallen: sie sagten dasselbe wie die Leiste. */
.trust{padding:56px 0 72px;background:var(--cream)}
.trust__rail{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:20px;
  background:var(--cream-alt);
  border:1px solid rgba(94,106,66,.16);
  box-shadow:0 10px 32px rgba(28,38,24,.08);
  overflow:hidden;
}
.trust__rail li{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  min-width:0;padding:24px 26px;min-height:112px;
}
.trust__rail li + li{border-left:1px solid rgba(94,106,66,.16)}
.trust__num{
  font-family:var(--f-display);font-size:27px;line-height:1;color:var(--olive);
}
.trust__txt{
  font-size:14px;font-weight:300;line-height:1.5;color:var(--muted);
  text-wrap:balance;
}

/* ============================================================
   MARKEN
   ============================================================ */
.brands{padding:44px 0;background:var(--green-700)}
.brands__head{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;max-width:var(--container);min-height:44px;margin-inline:auto;
  padding-inline:var(--gutter);
}
.brands__label{
  padding-inline:76px;text-align:center;
  font-size:12px;line-height:1.2;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(236,219,165,.78);
}
.brands__toggle{
  position:absolute;right:var(--gutter);
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:8px 14px;border:1px solid rgba(236,219,165,.24);border-radius:100px;
  font-size:10px;font-weight:400;line-height:1;letter-spacing:1.3px;text-transform:uppercase;
  color:rgba(236,219,165,.78);transition:color .2s var(--ease),border-color .2s var(--ease);
}
.brands__toggle[hidden]{display:none}
.brands__toggle:hover{color:var(--gold);border-color:rgba(235,200,86,.55)}
.brands__viewport{display:flex;overflow:hidden;height:80px}
.brands__track{
  display:flex;flex:0 0 auto;align-items:center;gap:64px;padding-right:64px;
  /* 50 s fuer 12 statt zuvor 46 s fuer 11 Logos: dieselbe wahrgenommene
     Laufgeschwindigkeit trotz der laengeren Spur. */
  animation:marquee 50s linear infinite;
}
.brands__track img{
  flex:0 0 auto;width:95px;height:38px;object-fit:contain;opacity:.85;
  /* Alle Dateien bleiben echte Markenlogos. Die einheitliche helle Darstellung
     fuehrt die neuen Farblogos in derselben Optik wie die bisherige Leiste. */
  filter:brightness(0) saturate(100%) invert(91%) sepia(18%) saturate(620%) hue-rotate(3deg) brightness(99%) contrast(91%);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.brands__viewport:hover .brands__track{animation-play-state:paused}
.brands.is-paused .brands__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .brands__track{animation:none}
  .brands__track[aria-hidden="true"]{display:none}
  .brands__viewport{overflow-x:auto}
  .brands__toggle{display:none}
}

/* ============================================================
   KATEGORIEN
   ============================================================ */
.cats{padding:0 0 96px;background:var(--green-700)}
.cats__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding-top:88px;padding-bottom:44px;
}
.cats__head .eyebrow{margin-bottom:14px;color:var(--gold)}
.cats__head .h2{color:var(--gold-200)}
.cats__head .h2 em{color:var(--gold)}
.cats__lead{max-width:36ch;font-size:16px;font-weight:300;line-height:1.7;color:rgba(236,219,165,.7)}

/* Vorher lagen Titel und Links direkt auf dem Foto, randlos aneinander.
   Weder Bild noch Liste waren dadurch lesbar. Jetzt traegt jede Kachel das Bild
   oben und die Liste auf einer eigenen Flaeche darunter. */
.cats__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:22px}
.cat{
  display:flex;flex-direction:column;overflow:hidden;border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(236,219,165,.1);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.cat:hover{border-color:rgba(235,200,86,.32);background:rgba(255,255,255,.06)}
.cat--pending{border-style:dashed}
.cat__bild{position:relative;overflow:hidden;aspect-ratio:16/9}
.cat__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.cat:hover .cat__img{transform:scale(1.05)}
.cat__body{display:flex;flex:1;flex-direction:column;padding:24px 24px 26px}
.cat__num{
  display:block;margin-bottom:9px;
  font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--gold);
}
.cat__title{
  min-height:2.28em;margin-bottom:16px;
  font-family:var(--f-display);font-size:26px;line-height:1.14;font-weight:400;
  color:var(--gold-200);
}
.cat__list{display:flex;flex-direction:column;gap:1px}
/* Der Preis steht an der Dienstleistung, nicht in einer eigenen Tabelle weiter unten.
   Damit faellt die Entscheidung dort, wo die Kundin gerade liest. Die Zahlen kommen
   ueber {{SPANNE:...}} aus den Stammdaten, stehen also nirgends im Text. */
.cat__list a{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 0;
  font-size:15px;font-weight:300;color:rgba(249,241,213,.74);
  border-bottom:1px solid rgba(236,219,165,.08);
  transition:color .2s var(--ease);
}
.cat__list li:last-child a{border-bottom:0}
.cat__list a:hover{color:var(--gold)}
.cat__name{flex:1 1 auto;min-width:0;width:100%;overflow-wrap:anywhere}
.cat__preis{
  flex:0 1 auto;min-width:0;max-width:100%;
  font-size:13.5px;line-height:1.45;letter-spacing:.2px;overflow-wrap:anywhere;
  color:rgba(236,219,165,.64);font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease);
}
.cat__list a:hover .cat__preis{color:var(--gold-200)}

/* ============================================================
   PREMIUM
   ============================================================ */
.prem{padding:96px 0;background:var(--cream-alt)}
.prem__head{margin-bottom:64px;max-width:720px}
.prem__head .eyebrow{margin-bottom:14px}
.prem .eyebrow--gold{color:var(--olive)}

.prem__block{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:52px 0;
  border-top:1px solid rgba(94,106,66,.16);
}
.prem__block--rev .prem__media{order:2}
.prem__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;
}
/* Gold auf Creme misst 1.51:1. Als Flaeche und als Linie bleibt es, als Text nicht. */
.prem__kicker{
  margin-bottom:10px;
  font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--olive);
}
.prem__title{
  margin-bottom:16px;
  font-family:var(--f-display);font-size:42px;line-height:1.1;font-weight:400;
  color:var(--green-700);
}
.prem__text{
  margin-bottom:28px;max-width:46ch;
  font-size:16px;font-weight:300;line-height:1.8;color:var(--muted);
}
.prem__list{margin-bottom:32px;border-top:1px solid rgba(94,106,66,.16)}
.prem__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:13px 0;border-bottom:1px solid rgba(94,106,66,.16);
}
.prem__list span{font-size:15px;font-weight:300;color:var(--muted)}
.prem__list b{
  flex:0 0 auto;
  font-family:var(--f-display);font-size:19px;font-weight:400;color:var(--green-700);
}

/* ============================================================
   PREISE
   ============================================================ */
.prices{padding:96px 0;background:var(--cream)}
.prices__head{margin-bottom:44px;max-width:720px}
.prices__head .eyebrow{margin-bottom:14px}
.prices__note{margin-top:14px;font-size:16px;font-weight:300;color:var(--muted)}

.tabs__list{
  display:flex;gap:8px;flex-wrap:wrap;
  margin-bottom:40px;
}
.tabs__tab{
  padding:12px 22px;border-radius:100px;
  border:1px solid rgba(94,106,66,.28);
  font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.tabs__tab:hover{border-color:var(--olive);color:var(--green-700)}
.tabs__tab[aria-selected="true"]{
  background:var(--green-700);border-color:var(--green-700);color:var(--gold-200);
}

.plist{columns:2;column-gap:64px}
/* --gold-tief statt --gold: siehe Tokenblock. Auf --cream-alt stand hier 1,42:1. */
.plist__title{
  break-after:avoid;
  margin:0 0 14px;padding-top:8px;
  font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold-tief);
}
.plist dl{margin-bottom:36px;break-inside:avoid}
.plist dl div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid rgba(94,106,66,.14);
}
.plist dt{font-size:16px;font-weight:300;color:var(--green-700)}
.plist dt span{
  display:block;margin-top:3px;
  font-size:13px;letter-spacing:.3px;color:var(--muted-2);
}
.plist dd{
  flex:0 0 auto;
  font-family:var(--f-display);font-size:17px;color:var(--green-700);
}
.prices__foot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:12px;padding-top:26px;
  border-top:1px solid rgba(94,106,66,.16);
  font-size:15px;font-weight:300;color:var(--muted);
}

/* ---------- Kompakte Preisübersicht auf der Startseite ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 64px}
.pgrid__title{
  margin-bottom:6px;padding-bottom:14px;
  border-bottom:1px solid rgba(94,106,66,.25);
  font-family:var(--f-display);font-size:24px;font-weight:400;color:var(--green-700);
}
.pgrid dl{margin-bottom:20px}
.pgrid dl div{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid rgba(94,106,66,.14);
}
.pgrid dt a{
  font-size:16px;font-weight:300;color:var(--green-700);
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease);
}
.pgrid dt a:hover{border-color:var(--olive)}
.pgrid dt span{display:block;margin-top:3px;font-size:13px;color:var(--muted-2)}
.pgrid dd{flex:0 0 auto;font-family:var(--f-display);font-size:18px;color:var(--green-700)}

@media (max-width:991px){.pgrid{grid-template-columns:1fr;gap:40px}}

/* ============================================================
   INSTITUT
   ============================================================ */
/* Eigener Ton statt der dritten Cremeflaeche in Folge. Vorher lagen .prices, .about
   und .revs alle auf var(--cream) — die Sektion «Wer Sie behandelt» grenzte sich
   dadurch von nichts ab. Ein Olivwaschgang (10 % --olive auf --cream) setzt sie ab,
   ohne den Wechsel dunkel/hell im Seitenrhythmus zu brechen, und laesst die goldene
   Studiowand im Portrait als Akzent wirken statt als Ausreisser. */
.about{
  padding:140px 0 0;background:#ebe9dd;overflow:hidden;
  border-top:1px solid rgba(94,106,66,.14);
  border-bottom:1px solid rgba(94,106,66,.14);
}
.about__grid{
  display:grid;grid-template-columns:300px 398px 534px;gap:56px;align-items:start;
}
.about__col{display:flex;flex-direction:column;gap:24px;padding-top:8px}
.about__title{
  font-family:var(--f-display);
  font-size:44.8px;line-height:48.384px;font-weight:400;color:var(--green-800);
}
.about__title em{font-style:italic}

.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px 0;
  border-top:1px solid rgba(94,106,66,.22);
  border-bottom:1px solid rgba(94,106,66,.22);
}
.stats>div{min-width:0}
.stats dt{font-family:var(--f-display);font-size:36px;line-height:36px;color:var(--olive)}
.stats dd{
  margin-top:5px;
  font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  line-height:1.3;color:var(--muted-2);
  overflow-wrap:break-word;hyphens:auto;
}

.langs{display:flex;flex-wrap:wrap;gap:6px}
.langs li{
  padding:7px 14px;border-radius:20px;
  border:1px solid #45503a;
  font-size:12px;line-height:1.2;letter-spacing:1px;text-transform:uppercase;
  color:#3d4535;
}
.about__col .btn{align-self:flex-start}

.about__portrait{margin-top:156px}
.about__portrait img{width:100%;aspect-ratio:1/1;border-radius:25px;object-fit:cover}

.about__col--text{gap:0;padding-top:0;padding-bottom:42px}
.about__intro{margin-bottom:40px}
.about__text{
  font-size:16px;font-weight:300;line-height:1.8;color:var(--muted);
}
.about__text a{
  color:var(--olive);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;transition:color .2s var(--ease);
}
.about__text a:hover{color:var(--green-700)}
.about__text + .about__text{margin-top:26.6px}
.about__gallery{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  column-gap:clamp(16px,3vw,39px);row-gap:clamp(20px,3vw,45px);
}
.about__g1{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:25px}
.about__g2{grid-column:2;grid-row:1 / span 2;align-self:start;width:100%;height:auto;aspect-ratio:225/335;object-fit:cover;border-radius:25px}
.about__g3{grid-column:1;grid-row:2;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:25px}

/* ============================================================
   BEWERTUNGEN
   ============================================================ */
.revs{padding:60px 0;background:var(--cream)}
.revs__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-bottom:56px;
}
.revs__head .eyebrow{margin-bottom:33px}
.revs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:271px;padding:36px 32px;border-radius:16px;
  background:var(--cream-alt);border:1px solid rgba(94,106,66,.08);
  box-shadow:0 2px 20px rgba(40,49,36,.05);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.rev:hover{
  transform:translateY(-2px);border-color:rgba(94,106,66,.2);
  box-shadow:0 8px 28px rgba(40,49,36,.09);
}
/* Die ganze Kachel ist der Link auf die Rezension bei Google. Vorher sass hier ein
   28px-Kreis oben rechts; der ist entfallen, sonst waere die verlinkte Kachel auf
   Kreisgroesse geschrumpft. Farben bleiben unveraendert, damit das Zitat ein Zitat
   bleibt und nicht wie ein Menuepunkt aussieht. */
.rev__link{display:flex;flex-direction:column;justify-content:space-between;height:100%;color:inherit}
.rev__link:hover{color:inherit}
.rev blockquote{
  margin:0 0 24px;padding:10px 16px 10px 20px;
  font-family:var(--f-serif);font-style:italic;
  font-size:18px;line-height:28.8px;color:var(--green-700);
}
.rev__foot{display:flex;align-items:center;gap:12px}
.rev__avatar{
  display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;
  background:var(--green-700);color:var(--gold-200);
  font-family:var(--f-display);font-size:16px;
}
img.rev__avatar{object-fit:cover;background:transparent}
.rev__name{display:block;font-size:15px;font-weight:500;color:var(--green-700)}
.rev__name i{font-style:normal;font-size:11px;letter-spacing:1px;color:var(--olive)}
.rev__loc{display:block;margin-top:3px;font-size:13px;letter-spacing:.4px;color:var(--muted-2)}
.revs__all{margin-top:48px;text-align:center}

/* ============================================================
   TERMIN & STANDORT
   ============================================================ */
.book{padding:96px 0;background:var(--green-700)}
.book__head{margin-bottom:52px;max-width:640px}
.book__head .eyebrow{margin-bottom:16px}
.book__title{
  margin-bottom:18px;
  font-family:var(--f-display);
  font-size:56px;line-height:60.48px;font-weight:400;color:var(--gold-200);
}
.book__lead{font-size:17px;font-weight:300;line-height:1.75;color:rgba(236,219,165,.8)}

.book__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.book__panel{
  display:flex;flex-direction:column;gap:32px;
  padding:36px;border-radius:20px;
  border:1px solid rgba(235,200,86,.16);
}
.book__ways{display:flex;flex-direction:column;gap:12px}
.way{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;border-radius:14px;
  border:1px solid rgba(235,200,86,.14);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.way:hover{background:rgba(236,219,165,.07);border-color:rgba(235,200,86,.4);transform:translateX(3px)}
.way--primary{background:rgba(235,200,86,.1);border-color:rgba(235,200,86,.38)}
.way__icon{
  display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:50%;
  background:rgba(236,219,165,.12);color:var(--gold);
}
.way__icon svg{width:17px;height:17px}
.way b{display:block;font-size:16px;font-weight:500;color:var(--gold-200)}
.way em{display:block;margin-top:4px;font-style:normal;font-size:14px;font-weight:300;color:rgba(236,219,165,.7)}
.way__arrow{margin-left:auto;color:rgba(236,219,165,.72);font-size:18px}

.hours{border-top:1px solid rgba(236,219,165,.14);padding-top:8px}
.hours div{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid rgba(236,219,165,.08);
}
.hours div:last-child{border-bottom:0}
.hours dt{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(236,219,165,.6)}
.hours dd{font-size:15px;color:rgba(236,219,165,.88)}
.hours .is-today dt{color:var(--gold)}
.hours .is-today dd{color:var(--gold-200)}

.book__place{display:flex;flex-direction:column;gap:16px}
.find__map{
  position:relative;flex:1;min-height:320px;border-radius:20px;overflow:hidden;
  border:1px solid rgba(94,106,66,.35);background:#3a4433;
}
.karte{position:absolute;inset:0}
.find__map iframe{width:100%;height:100%;border:0;display:block}
.find__map-consent{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:24px;text-align:center;background:var(--green-800);color:var(--gold-200);
}
.find__map-consent-title{
  color:var(--gold);font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;
}
.find__map-consent-text{max-width:52ch;font-size:13px;font-weight:300;color:rgba(236,219,165,.78)}
.find__map-consent-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.find__map-load{min-height:46px;padding:12px 24px}
.find__map-consent .link-underline{min-height:44px;display:inline-flex;align-items:center}

.book__addr{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:24px 28px;border-radius:20px;
  border:1px solid rgba(235,200,86,.16);
}
.book__addr-label{
  margin-bottom:6px;
  font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);
}
.book__addr p{font-size:16px;font-weight:300;line-height:1.6;color:rgba(236,219,165,.88)}
.book__addr a:hover{color:var(--gold)}

/* ============================================================
   KURSE
   ============================================================ */
.courses{padding:80px 0;background:var(--cream-alt)}
.courses__head{margin-bottom:36px;max-width:680px}
.courses__head .eyebrow{margin-bottom:14px}
.courses__lead{margin-top:14px;font-size:16px;font-weight:300;color:var(--muted)}
.courses__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.course{
  display:flex;flex-direction:column;
  padding:26px 24px;border-radius:16px;
  background:var(--cream);border:1px solid rgba(94,106,66,.14);
}
.course h3{
  margin-bottom:8px;
  font-family:var(--f-display);font-size:22px;font-weight:400;color:var(--green-700);
  transition:color .3s var(--ease);
}
.course p{
  font-size:15px;font-weight:300;color:var(--muted);
  transition:color .3s var(--ease);
}
/* Die Karte ist ganz ein Link. Ohne sichtbaren Anker liest sie sich wie
   ein Textblock, darum die Zeile unten: sie sitzt per margin-top:auto
   immer am Kartenfuss, auch wenn die Texte unterschiedlich lang sind. */
.course__mehr{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  margin-top:auto;padding-top:20px;
  font-size:12px;letter-spacing:1.54px;text-transform:uppercase;
  color:var(--olive);
  transition:color .3s var(--ease);
}
.course__mehr span{
  padding-bottom:2px;border-bottom:1px solid rgba(94,106,66,.45);
  transition:border-color .3s var(--ease);
}
.course__mehr i{font-style:normal;transition:transform .25s var(--ease)}
.courses__cta{margin-top:32px}

/* ============================================================
   MOBILE CONVERSION BAR
   ============================================================ */
.cbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(23,22,20,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(236,219,165,.14);
  gap:8px;
}
.cbar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  flex:1;padding:9px 4px;border-radius:12px;
  font-size:11px;letter-spacing:.6px;color:rgba(236,219,165,.7);
}
.cbar__item svg{width:18px;height:18px}
.cbar__item--primary{background:var(--gold);color:var(--green-700);font-weight:500}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:60px 0;background:var(--cream)}
.faq .eyebrow{margin-bottom:14px}
.faq__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:46px;
  margin-top:64px;
}
.fq{align-self:start;padding:16px 0;border-bottom:1px solid rgba(94,106,66,.22)}
.fq summary{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:48px;padding:6px 0;
  cursor:pointer;list-style:none;
  font-size:17px;font-weight:400;line-height:1.35;color:var(--green-700);
}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{
  position:relative;flex:0 0 14px;height:24px;
}
.fq summary i::before,.fq summary i::after{
  content:'';position:absolute;left:50%;top:50%;
  width:13px;height:1.4px;background:var(--olive);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease);
}
.fq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq[open] summary i::before{transform:translate(-50%,-50%) rotate(45deg)}
.fq[open] summary i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.fq__body{overflow:hidden}
.fq__body p{
  padding:22px 0 10px;
  font-size:16px;font-weight:300;line-height:1.8;color:var(--muted);
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--green-900);color:rgba(236,219,165,.8)}
.foot__grid{
  display:grid;grid-template-columns:353fr 282fr 282fr 282fr;gap:48px;
  padding-top:72px;
}
.foot__logo img{width:180px;height:auto;margin-bottom:24px}
.foot__positionierung{
  max-width:34rem;margin:-4px 0 24px;
  font-size:14px;font-weight:300;line-height:1.65;color:rgba(236,219,165,.72);
}
.foot__contact li{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:14px;
  font-size:15px;font-weight:300;line-height:1.55;color:rgba(236,219,165,.72);
}
.foot__contact svg{flex:0 0 16px;width:16px;height:16px;margin-top:4px;color:var(--gold)}
.foot__contact a{transition:color .2s var(--ease)}
.foot__contact a:hover{color:var(--gold)}

.foot__hours-block{
  margin-top:26px;
  font-size:15px;font-weight:300;line-height:1.7;color:rgba(236,219,165,.72);
}
.foot__hours-title{
  margin-bottom:8px;
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);
}
.foot__social{display:flex;gap:12px;margin-top:26px}
.foot__social a{
  display:grid;place-items:center;width:44px;height:44px;border-radius:100%;
  border:1px solid rgba(236,219,165,.3);color:rgba(236,219,165,.8);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.foot__social svg{width:16px;height:16px}
.foot__social a:hover{background:var(--gold);border-color:var(--gold);color:var(--green-900)}

.foot__col .foot__titel{
  margin-bottom:18px;
  font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);
}
.foot__col a:not(.rating){
  display:inline-block;padding:7px 0;
  font-size:15px;font-weight:300;
  color:rgba(236,219,165,.72);transition:color .2s var(--ease);
}
.foot__col a:not(.rating):hover{color:var(--gold)}

.foot__ratings{display:flex;flex-direction:column;gap:10px}
.rating{
  display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:14px;
  padding:13px 16px;border-radius:14px;
  border:1px solid rgba(236,219,165,.16);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.rating:hover{border-color:rgba(235,200,86,.5);background:rgba(236,219,165,.05)}
.rating__logo{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);
}
.rating__logo img{width:20px;height:20px;object-fit:contain}
/* Der Sternbalken folgt der Stammdatenzahl: 4.6 von 5 = 92 % Fuellung. */
/* Auch die Ueberschrift fuehrt zu den Rezensionen. Vorher war nur der Notenblock
   rechts klickbar — wer auf «Google Bewertungen» zielt, landete ins Leere. */
.revs__headlink{display:block;color:inherit;text-decoration:none;transition:opacity .2s var(--ease)}
.revs__headlink:hover{opacity:.75}
.revs__score{display:block;text-align:right;transition:opacity .2s var(--ease)}
.revs__score:hover{opacity:.75}
.revs__zahl{
  font-family:var(--f-display);font-size:52px;line-height:1;font-weight:400;
  color:var(--green-700);display:flex;align-items:baseline;justify-content:flex-end;gap:10px;
}
.revs__sterne,.revs__anzahl{display:block}
.revs__von{font-family:var(--f-body);font-size:14px;font-weight:300;color:var(--muted-2)}
.revs__sterne{
  margin-top:8px;font-size:19px;letter-spacing:3px;line-height:1;
  background:linear-gradient(90deg,#b8912a 92%,rgba(94,106,66,.34) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.revs__anzahl{margin-top:10px;font-size:14px;font-weight:300;color:var(--muted-2)}

.rating__logo--icon{color:#e1306c}   /* gleicher weisser Kreis wie Google/Facebook, Glyphe in Instagram-Rosa */
.rating__logo--icon svg{width:17px;height:17px}
.rating__body{min-width:0}
.rating__label{display:block;font-size:15px;font-weight:500;color:#faf6ed;line-height:1.3}
.rating__meta{
  display:block;margin-top:2px;
  font-size:13px;font-weight:300;line-height:1.35;color:rgba(236,219,165,.6);
}
.rating__meta{display:flex;align-items:center;gap:7px;white-space:nowrap}
.rating__anzahl{font-variant-numeric:tabular-nums}
.rating__wert{font-weight:500;color:var(--gold-200);font-size:14px}
/* 4.6 von 5 = 92 %. Der Teilstern wird ueber einen Verlauf maskiert, damit die
   Anzeige exakt der Stammdatenzahl folgt statt auf ganze Sterne zu runden. */
.rating__sterne{
  font-size:12px;letter-spacing:1px;line-height:1;
  background:linear-gradient(90deg,var(--gold) 92%,rgba(236,219,165,.28) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rating__arrow{font-size:15px;color:rgba(236,219,165,.72)}

.foot__bewerten{
  display:inline-block;margin-top:14px;
  font-size:13px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid rgba(235,200,86,.35);padding-bottom:3px;
  transition:border-color .2s var(--ease)
}
.foot__bewerten:hover{border-color:var(--gold)}
.rating:hover .rating__arrow{color:var(--gold)}

.foot__bar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-top:22px;padding-bottom:24px;margin-top:52px;
  border-top:1px solid rgba(236,219,165,.12);
  font-size:14px;line-height:1.6;
  color:rgba(236,219,165,.55);
}
/* Rechtliches ist eine eigene Navigationsgruppe, nicht Kleingedrucktes neben dem
   Kredit. Deshalb links, in Versalien, mit eigenem Trenner — und die Institut-Spalte
   oben bleibt frei davon. */
.foot__legal{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.foot__legal a,.foot__consent{
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(236,219,165,.78);transition:color .2s var(--ease)
}
.foot__legal a:hover,.foot__consent:hover{color:var(--gold)}
.foot__consent{padding:0;text-align:left}
.foot__legal a + a{margin-left:0}
.foot__legal > :not(:last-child)::after{
  content:"·";display:inline-block;margin:0 12px;
  color:rgba(236,219,165,.3);text-transform:none
}
.foot__copy{text-align:right;color:rgba(236,219,165,.72)}
.foot__punkt{margin:0 8px;color:rgba(236,219,165,.6)}
/* is-weg heisst «weg», nicht «durchsichtig». Bis zum 25.08.2026 stand hier nur
   opacity:0 und pointer-events:none. Die Maus war damit versorgt, die Tastatur nicht:
   die drei Links der Leiste blieben im Tab-Lauf, und wer sich durch die Seite tabbte,
   landete dreimal auf einem Element, das er nicht sehen konnte — Fokusring irgendwo
   ausserhalb des Bildes, kein Anhaltspunkt, wo man ist.

   visibility:hidden nimmt sie zusaetzlich aus Tab-Lauf UND Barrierefreiheitsbaum.
   Der Zeitversatz haelt die Blende: beim Verschwinden schaltet visibility erst NACH
   den .28s um (sonst waere die Leiste sofort weg statt weggeblendet), beim Erscheinen
   sofort (0s), sonst bliebe sie waehrend der ganzen Einblendung unsichtbar.

   Wichtig: dieser Zeitversatz haengt daran, dass die Transition wirklich laeuft. In
   einem gedrosselten oder verborgenen Dokument laeuft sie nicht, und visibility bliebe
   auf visible stehen. Die Garantie liegt deshalb nicht hier, sondern in script.js: dort
   wird zusammen mit .is-weg das inert-Attribut gesetzt, das sofort wirkt. Diese Regel
   ist der zweite Riegel — fuer Browser ohne inert. Beides gehoert zusammen; wer eines
   entfernt, muss das andere pruefen. */
.cbar{
  visibility:visible;
  transition:transform .28s var(--ease),opacity .28s var(--ease),visibility 0s;
}
.cbar.is-weg{
  transform:translateY(100%);opacity:0;pointer-events:none;visibility:hidden;
  transition:transform .28s var(--ease),opacity .28s var(--ease),visibility 0s linear .28s;
}
.foot__copy a{color:rgba(236,219,165,.86);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.foot__copy a:hover{color:var(--gold)}

/* Frueher standen hier ab 992px 110px Reserve, damit der schwebende WhatsApp-Knopf
   (bottom 20 + 70 hoch) die Rechtsspalte der Fusszeile nicht zudeckt. Die Reserve ist
   seit dem Beobachter in script.js doppelt: der Knopf blendet sich aus, sobald der
   Footer zu einem Prozent im Bild ist, und ist an der Fusszeile nie sichtbar.
   Uebrig blieb ein leeres dunkles Band unter der Rechtszeile. Ohne JavaScript blendet
   sich der Knopf nirgends aus — dann ueberlappt er zwischen 992 und rund 1550px das
   Ende der Copyright-Zeile. Das ist rein kosmetisch und billiger als das Band.
   Am 20.08.2026 ueber das DevTools-Protokoll nachgemessen: am Seitenende traegt .wa
   die Klasse is-weg und opacity 0. Nicht im Vorschaufenster pruefen — ein verstecktes
   Dokument drosselt den IntersectionObserver, dort feuert er nie und der Knopf bleibt
   sichtbar stehen. Das taeuscht eine Ueberlappung vor, die es im Betrieb nicht gibt. */
@media (min-width:992px){
  .foot__bar{padding-bottom:32px}
}

/* ---------- WhatsApp ---------- */
/* 58 statt 70 Pixel, seit 25.08.2026. Der Knopf lag am Desktop ueber Bildkacheln und
   Kartenausschnitten; 70px ergaben bei 32/20 Rand ein Feld von rund 122x110 Pixeln in
   der Ecke. 58px sind immer noch weit ueber der 44px-Marke fuer Tippziele, nehmen aber
   ein Drittel der verdeckten Flaeche weg. Der groessere Teil der Loesung steht in
   script.js: der Knopf blendet sich ueber jedem Bereich aus, der selbst einen
   Kontaktweg zeigt. Die Bildmasse in bausteine/footer.html sind mitgezogen. */
.wa{
  position:fixed;right:28px;bottom:20px;z-index:90;
  width:58px;height:58px;
  visibility:visible;
  transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s;
}
.wa:hover{transform:scale(1.06)}
/* Wie bei .cbar: ohne visibility bleibt der ausgeblendete Knopf tabbar. Am Seitenende
   und ueber der Termin-Sektion ist er immer is-weg — also genau dort, wo Tastaturnutzer
   ihn im Tab-Lauf getroffen haetten, ohne ihn zu sehen. */
.wa.is-weg{
  opacity:0;transform:scale(.8) translateY(8px);pointer-events:none;visibility:hidden;
  transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s linear .3s;
}
.wa img{width:58px;height:58px}

/* ---------- Einwilligungsmanager ------------------------------------- */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important
}
.consent-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;
  max-width:1180px;margin-inline:auto;border:1px solid rgba(235,200,86,.38);
  border-radius:18px;background:var(--green-800);color:var(--gold-200);
  box-shadow:0 24px 70px rgba(23,22,20,.38)
}
.consent-banner__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;
  padding:24px 26px
}
.consent-banner__eyebrow,.consent-dialog__eyebrow{
  margin-bottom:5px;color:var(--gold);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase
}
.consent-banner h2,.consent-dialog h2{
  font-family:var(--f-display);font-size:26px;line-height:1.2;font-weight:400
}
.consent-banner__copy>p:last-child{
  max-width:68ch;margin-top:7px;font-size:14px;font-weight:300;line-height:1.55;
  color:rgba(236,219,165,.8)
}
.consent-banner__copy a,.consent-dialog a{text-decoration:underline;text-underline-offset:3px}
.consent-banner__copy a:hover,.consent-dialog a:hover{color:var(--gold)}
.consent-banner__actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;min-width:350px}
.consent-choice,.consent-save{
  min-height:48px;padding:11px 17px;border:1px solid var(--gold);border-radius:100px;
  background:var(--gold);color:var(--green-700);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;transition:background .2s var(--ease),transform .2s var(--ease)
}
.consent-choice:hover,.consent-save:hover{background:#f0d472;transform:translateY(-1px)}
.consent-settings-link{
  grid-column:1/-1;min-height:40px;color:rgba(236,219,165,.88);font-size:13px;
  text-decoration:underline;text-underline-offset:4px
}
.consent-settings-link:hover{color:var(--gold)}

.consent-dialog{
  width:min(680px,calc(100% - 32px));max-height:min(820px,calc(100dvh - 32px));
  padding:0;border:0;border-radius:20px;background:var(--cream);color:var(--ink);
  box-shadow:0 28px 90px rgba(23,22,20,.45);overflow:auto
}
.consent-dialog:not([open]){display:none}
.consent-dialog::backdrop{background:rgba(23,22,20,.72);backdrop-filter:blur(3px)}
.consent-dialog__panel{padding:30px}
.consent-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.consent-dialog__head h2{color:var(--green-700);font-size:34px}
.consent-dialog__close{
  flex:0 0 44px;width:44px;height:44px;border:1px solid rgba(94,106,66,.25);
  border-radius:50%;font-size:28px;line-height:1;color:var(--green-700)
}
.consent-dialog__close:hover{background:rgba(94,106,66,.08)}
.consent-dialog__intro{margin-top:14px;font-size:15px;font-weight:300;line-height:1.65;color:var(--muted)}
.consent-categories{display:grid;gap:10px;margin-top:24px}
.consent-category{
  display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px;
  padding:17px 18px;border:1px solid rgba(94,106,66,.18);border-radius:14px;background:#fffdf8
}
label.consent-category{cursor:pointer}
label.consent-category:hover{border-color:rgba(94,106,66,.42)}
.consent-category__copy{display:block;min-width:0}
.consent-category__copy h3,.consent-category__copy strong{
  display:block;margin:0 0 3px;font-size:15px;line-height:1.4;font-weight:500;color:var(--green-700)
}
.consent-category__copy p,.consent-category__copy span{
  display:block;font-size:13px;font-weight:300;line-height:1.5;color:var(--muted)
}
.consent-category__status{
  flex:0 0 auto;padding:6px 10px;border-radius:100px;background:rgba(94,106,66,.1);
  font-size:11px;font-weight:500;color:var(--olive);text-transform:uppercase;letter-spacing:.06em
}
.consent-switch{position:relative;display:block;flex:0 0 50px;width:50px;height:30px}
.consent-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.consent-switch span{
  display:block;width:50px;height:30px;border-radius:100px;background:#cbc9bf;
  transition:background .2s var(--ease)
}
.consent-switch span::after{
  content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;
  background:white;box-shadow:0 1px 4px rgba(23,22,20,.24);transition:transform .2s var(--ease)
}
.consent-switch input:checked+span{background:var(--olive)}
.consent-switch input:checked+span::after{transform:translateX(20px)}
.consent-switch input:focus-visible+span{outline:3px solid var(--olive);outline-offset:3px}
.consent-dialog__actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px}
.consent-save{min-width:210px}
.consent-dialog__actions a{font-size:13px;color:var(--muted)}

@media (max-width:760px){
  .consent-banner{left:8px;right:8px;bottom:8px;max-height:calc(100dvh - 16px);overflow:auto}
  .consent-banner__inner{grid-template-columns:1fr;gap:18px;padding:20px}
  .consent-banner__actions{min-width:0}
  .consent-banner h2{font-size:23px}
  .consent-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  .consent-dialog__panel{padding:22px 18px}
  .consent-dialog__head h2{font-size:29px}
  .consent-category{gap:14px;padding:15px 14px}
}
@media (max-width:430px){
  .consent-banner__actions{grid-template-columns:1fr}
  .consent-settings-link{grid-column:auto}
  .consent-choice{width:100%}
  .consent-dialog__actions{align-items:stretch;flex-direction:column}
  .consent-save{width:100%}
}

/* Flache Fenster: Innenabstaende zusammenziehen, statt den Hero ueberlaufen zu lassen. */
@media (min-width:992px) and (max-height:780px){
  /* Die Navigationsleiste endet bei 82px. padding-top muss darueber liegen,
     sonst laeuft der Kicker unter die Leiste. */
  .hero{min-height:560px;padding-top:112px}
  .hero__body{padding-bottom:24px}
  .hero .eyebrow{margin-bottom:8px}
  .hero__title{font-size:52px;margin-bottom:16px}
  .hero__lead{margin-bottom:18px;font-size:16px;line-height:1.6}
  .hero__note{margin-top:16px}
  .trust__rail li{min-height:88px;padding:16px 22px}
  .trust__num{font-size:22px}
  .trust__txt{font-size:13.5px;line-height:1.45}
  .trust{padding:40px 0 48px}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1439px){
  /* Das feste Desktop-Raster braucht inklusive beider Innenraender exakt 1440px.
     Darunter blieb es trotzdem aktiv und wurde von .about{overflow:hidden} rechts
     unbemerkt abgeschnitten. Das flexible Raster behaelt beide Seitenabstaende. */
  .about__grid{grid-template-columns:280px 1fr 1fr;gap:40px}
}

@media (max-width:1360px){
  /* In der vierteiligen Fusszeile werden die Social-Karten zuerst zu schmal:
     bei 1008px lief der Instagram-Text sichtbar ueber den Kartenrand. Bis die
     Spalten genug Platz haben, duerfen die Metadaten umbrechen und die Karte
     nutzt etwas kompaktere Innenabstaende. */
  .foot__grid{gap:32px}
  .rating{gap:10px;padding-inline:12px}
  .rating__meta{white-space:normal;flex-wrap:wrap}
}

/* Ab hier ist die mittig platzierte Wortmarke breiter als der freie Raum zwischen
   Navigation und CTA. Bei 992 bis rund 1030px liefen «Ratgeber» und Logo sichtbar
   ineinander; zugleich reichte das Mega-Menue rechts ueber den Viewport. Die mobile
   Navigation schaltet deshalb vor diesem Zwischenbereich um, nicht erst bei 991px. */
@media (max-width:1200px){
  .nav__menu,.nav__actions{display:none}
  .nav__burger{display:flex}
  .nav__bar{justify-content:space-between;height:58px;padding:0 20px}
  .nav__logo{position:static;transform:none}
  .nav__logo img{width:118px;height:28px}

  /* Vier Footer-Spalten lassen den Bewertungskarten in diesem Bereich trotz
     kompakter Abstaende zu wenig Textbreite. Zwei Spalten halten alle Inhalte
     lesbar und vermeiden den Sprung von Tablet zu kleinem Desktop. */
  .foot__grid{grid-template-columns:1fr 1fr;gap:40px;padding-top:56px}
  .foot__brand{grid-column:1 / -1}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:14px;margin-top:40px}
  .foot__copy{text-align:left}
  .rating{max-width:none}
}

@media (max-width:1180px){
  .cats__row{grid-template-columns:repeat(2,1fr)}
  .trust__rail{grid-template-columns:repeat(2,1fr)}
  .trust__rail li:nth-child(3){border-left:0}
  .trust__rail li:nth-child(n+3){border-top:1px solid rgba(94,106,66,.16)}
  /* Der Kopf blieb zweispaltig und quetschte die Ueberschrift in eine Spalte
     von rund 90px Breite. */
  /* Auf dem Telefon stapelten sich Augenbraue, Titel und Vorspann zu 282px Kopf vor
     dem ersten Angebot — bei 88px Anlauf davor. Enger gesetzt sind es rund 200px,
     ohne dass eine Zeile entfaellt. (Audit 25.08.2026, Startseitenlaenge.) */
  .cats__head{flex-direction:column;align-items:flex-start;gap:10px;padding-top:56px;padding-bottom:28px}
  .cats__lead{max-width:52ch}
}

@media (max-width:991px){
  :root{--gutter:32px}
  html{scroll-padding-top:90px}

  .nav__menu,.nav__actions{display:none}
  .nav__burger{display:flex}
  .nav__bar{justify-content:space-between;height:58px;padding:0 20px}
  .nav__logo{position:static;transform:none}

  .hero{min-height:700px;padding-top:100px}
  .hero__title{font-size:60px}

  .trust{padding:48px 0 56px}
  .trust__num{font-size:28px}

  .brands{padding:36px 0}
  .brands__viewport{height:64px}
  .brands__track{gap:48px;padding-right:48px}
  .brands__track img{width:75px;height:30px}

  .prem{padding:72px 0}
  .prem__head{margin-bottom:44px}
  .prem__block{grid-template-columns:1fr;gap:32px;padding:44px 0}
  .prem__block--rev .prem__media{order:0}
  .prem__title{font-size:34px}

  .prices{padding:72px 0}
  .plist{columns:1}

  .about{padding:80px 0 0}
  .about__grid{grid-template-columns:1fr 1fr;gap:36px}
  .about__portrait{grid-column:2;grid-row:1;margin-top:0}
  .about__col:last-child{grid-column:1 / -1}
  .about__col--text{padding-bottom:0}
  .about__gallery{grid-template-columns:1fr 1fr;column-gap:16px;row-gap:16px}
  .about__g1{width:100%;height:190px}
  .about__g2{grid-column:2;grid-row:1 / span 2;width:100%;height:100%;min-height:396px}
  .about__g3{grid-column:1;grid-row:2;width:100%;height:190px}

  .revs__head{flex-direction:column;align-items:flex-start;gap:20px}
  .revs__head .eyebrow{margin-bottom:14px}
  .revs__score{text-align:left}
  .revs__grid{grid-template-columns:1fr;gap:20px}
  .rev{min-height:0}

  .book{padding:72px 0}
  .book__title{font-size:44px;line-height:1.15}
  .book__grid{grid-template-columns:1fr;gap:20px}
  .find__map{min-height:300px}

  .faq__grid{grid-template-columns:1fr;gap:0;margin-top:44px}

  .courses{padding:64px 0}
  .courses__grid{grid-template-columns:1fr 1fr}

  .foot__grid{grid-template-columns:1fr 1fr;gap:40px;padding-top:56px}
  .foot__brand{grid-column:1 / -1}
  .foot__bar{flex-direction:column;align-items:flex-start;gap:14px;margin-top:40px}
  .foot__copy{text-align:left}
  .rating{max-width:none}

  .cbar{display:flex}
  .wa{display:none}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
}

@media (max-width:767px){
  :root{--gutter:24px}

  .h2{font-size:38px;line-height:1.12}

  /* Hero: eigener Mobile-Crop, Text sitzt in der freien unteren Fläche */
  /* Nicht mehr 790px fest: auf einem 667px-Geraet lag damit der Bewertungshinweis
     immer unter der Falz. svh statt vh, sonst rechnet die Browserleiste mit. */
  .hero{min-height:100svh;height:auto;padding-top:92px}
  .hero__scrim{
    background:linear-gradient(180deg,rgba(40,49,36,.5) 0%,rgba(40,49,36,.06) 26%,rgba(40,49,36,.84) 56%,rgba(40,49,36,.97) 100%);
  }
  .hero__body{align-items:flex-end;padding-bottom:26px}
  .hero__title{font-size:54px;line-height:1.06}
  .hero__lead{font-size:16px;line-height:1.7;color:rgba(236,219,165,.92)}
  .hero__actions{gap:16px;flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;height:54px}
  .hero__actions .link-underline{align-self:flex-start;font-size:14px}

  .link-caps,.link-underline,
  .cat__list a,
  .nav__logo,
  .foot__col a:not(.rating),
  .foot__contact a,
  .foot__legal a,
  .foot__consent,
  .foot__logo{min-height:44px;display:inline-flex;align-items:center}
  .cat__list a{display:flex;align-items:flex-start}

      .trust__num{font-size:26px;margin-bottom:8px}

  .brands{padding:30px 0}
  .brands__label{font-size:11px}
  .brands__viewport{height:56px}
  .brands__track{gap:36px;padding-right:36px}
  .brands__track img{width:65px;height:26px}

  .cats__row{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    align-items:flex-start;scroll-padding-inline:var(--gutter);
    scrollbar-width:none;overscroll-behavior-inline:contain;
  }
  .cats__row::-webkit-scrollbar{display:none}
  .cat{flex:0 0 min(86vw,340px);scroll-snap-align:start}
  .cat__bild{aspect-ratio:16/8}
  .trust{padding:36px 0 44px}
  .trust__rail{border-radius:16px}
  .trust__rail li{padding:18px 18px;min-height:0;gap:4px}
  .trust__num{font-size:22px}
  .trust__txt{font-size:13.5px;line-height:1.45}
  .cat__body{padding:20px 20px 22px}
  .cat__title{min-height:0;font-size:24px;margin-bottom:12px}

  .prem{padding:52px 0}
  .prem__head{margin-bottom:32px}
  .prem__block{padding:30px 0;gap:20px}
  .prem__title{font-size:30px;margin-bottom:12px}
  .prem__text{margin-bottom:20px}
  .prem__list{margin-bottom:22px}
  .prem__list li{padding:11px 0}
  .prem__media img{aspect-ratio:16/10}
  .prem .btn{width:100%;min-height:54px;padding:15px 20px;white-space:normal;text-align:center}

  .prices{padding:52px 0}
  .prices__head{margin-bottom:28px}
  .plist dl div{padding:11px 0}
  .plist dl{margin-bottom:26px}
  .tabs__list{gap:8px;margin-bottom:24px}
  .tabs__tab{min-height:46px;padding:12px 18px;font-size:12px}
  .plist dd{font-size:16px}

  .about{padding:56px 0 0}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .about__portrait{grid-column:1;grid-row:auto;max-width:420px}
  .about__title{font-size:36px;line-height:1.12}
  .stats{gap:20px}
  .stats dt{font-size:30px}
  .about__gallery{grid-template-columns:1fr 1fr}
  .about__g1,.about__g3{height:130px}
  .about__g2{min-height:276px}

  .revs{padding:48px 0}
  .rev{padding:28px 22px}
  .rev blockquote{font-size:17px;line-height:1.65;padding:4px 0 4px 12px}

  .book{padding:56px 0}
  .book__title{font-size:38px}
  .book__panel{padding:24px 20px;gap:24px}
  .way{padding:16px;min-height:72px}
  .book__addr{flex-direction:column;align-items:stretch;gap:16px;padding:22px}
  .book__addr .btn{width:100%;min-height:52px}

  .faq{padding:48px 0}
  .fq summary{font-size:16px;gap:16px;min-height:56px}

  .courses{padding:48px 0}
  .courses__grid{grid-template-columns:1fr}
  .courses__cta .btn{width:100%;min-height:52px}

  .foot__grid{grid-template-columns:1fr;gap:28px;padding-top:44px}
  .foot__brand{grid-column:1}
  .foot__logo img{width:150px;margin-bottom:20px}
  .foot__contact li{margin-bottom:10px}
  .foot__hours-block,.foot__social{margin-top:20px}
  .foot__col .foot__titel{margin-bottom:12px}
  .foot__col a:not(.rating){padding:6px 0}
  .foot__bar{margin-top:32px}
}

/* Kurze Geraete (SE, iPhone 8): Typo zusammenziehen, damit Bewertung und CTA
   ueber der Falz bleiben. Muss NACH dem 767er-Block stehen, um zu gewinnen. */
@media (max-width:767px) and (max-height:700px){
  .hero__title{font-size:40px}
  .hero__lead{margin-bottom:20px;font-size:15px;line-height:1.6}
  .hero__note{margin-top:16px}
  .hero__actions{gap:12px}
  .hero__actions .btn{height:48px}
}


@media (max-width:400px){
  .hero__title{font-size:46px}
  .h2{font-size:32px}
  .cbar__item{font-size:11px}
}
@media (max-width:600px){
  .brands__head{justify-content:space-between;gap:12px}
  .brands__label{padding-inline:0;text-align:left}
  .brands__toggle{position:static;flex:0 0 auto}
}
@media (max-width:360px){
  /* Zwei Spalten lassen auf 320px nur rund 99px Textbreite pro Vertrauenswert.
     Lange Woerter wurden dadurch am rechten Kartenrand abgeschnitten. */
  .trust__rail{grid-template-columns:1fr}
  .trust__rail li + li{border-left:0;border-top:1px solid rgba(94,106,66,.16)}
}
@media (max-width:400px) and (max-height:700px){
  .hero__title{font-size:40px}
}

/* Nur die Startseite ist ein vollflaechiger Einstieg. min-height statt height laesst
   den Inhalt auf sehr flachen Fenstern und bei Textzoom sicher weiterwachsen. */
.hero--viewport{
  min-height:100vh;
  min-height:100svh;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero__slide{transition:none}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px)}
/* Vorher .7s plus bis 180ms Verzoegerung — knapp 900ms, bis Inhalt stand. Das las
   sich als leere Seite. Jetzt .4s bei kleinerem Versatz. */
.reveal.is-in{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============================================================
   RECHTSSEITEN
   ============================================================ */
.nav__logo--static{position:static;transform:none}
main:has(> .legal){background:var(--cream)}
.legal{padding:160px 0 100px;background:var(--cream)}
.legal__inner{max-width:820px;margin-inline:auto}
.legal .eyebrow{margin-bottom:16px}
.legal__title{
  margin-bottom:36px;
  font-family:var(--f-display);font-size:52px;line-height:1.1;font-weight:400;
  color:var(--green-700);hyphens:auto;
}
.legal__lead{
  margin-bottom:36px;
  font-size:18px;font-weight:300;line-height:1.75;color:var(--muted);
}
.legal h2{
  margin:40px 0 12px;
  font-family:var(--f-display);font-size:26px;font-weight:400;color:var(--green-700);
}
.legal p{font-size:16px;font-weight:300;line-height:1.85;color:var(--muted)}
.legal a{
  color:var(--olive);border-bottom:1px solid rgba(94,106,66,.4);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.legal a:hover{color:var(--green-700);border-color:var(--green-700)}
.legal__back{margin-top:56px;padding-top:28px;border-top:1px solid rgba(94,106,66,.2)}
.legal__back a{border-bottom:0}
/* ---------------------------------------------------------------- Ratgeber
   Setzt bewusst auf der Prosaspalte der Rechtsseiten auf: gleiche Breite (820px),
   gleiche Typo-Stufen, gleicher Cremegrund. Der Ratgeber ist Fliesstext, keine
   zweite Designsprache. */
.blog{padding:160px 0 100px;background:var(--cream)}
.blog__inner{max-width:820px;margin-inline:auto}
.blog .eyebrow{margin-bottom:16px}
.blog__title{
  margin-bottom:28px;
  font-family:var(--f-display);font-size:52px;line-height:1.1;font-weight:400;
  color:var(--green-700);hyphens:auto;
}
.blog__title em{font-style:italic;color:var(--olive)}
.blog__lead{
  margin-bottom:64px;
  font-size:18px;font-weight:300;line-height:1.75;color:var(--muted);
}

/* Sprungleiste ueber der Liste. Erscheint erst ab zwei belegten Kategorien,
   siehe kategorieliste_html(). */
.blogfilter{margin:0 0 44px}
.blogfilter ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.blogfilter a{
  display:inline-block;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(94,106,66,.28);background:var(--cream-alt);
  font-size:14px;font-weight:300;color:var(--muted);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.blogfilter a:hover{background:rgba(94,106,66,.12);color:var(--green-700);border-color:rgba(94,106,66,.5)}

.blogliste{display:flex;flex-direction:column;gap:56px}
.blogliste__gruppe{display:flex;flex-direction:column;gap:32px;scroll-margin-top:110px}
.blogliste__gruppentitel{
  margin:0;padding-bottom:10px;border-bottom:1px solid rgba(94,106,66,.2);
  font-family:var(--f-display);font-size:24px;font-weight:400;color:var(--olive)}
.blogliste__eintrag{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.blogliste__bild{display:block;overflow:hidden;border-radius:14px;background:rgba(94,106,66,.08)}
.blogliste__bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  transition:transform .4s var(--ease)}
.blogliste__eintrag:hover .blogliste__bild img{transform:scale(1.04)}
.blogliste__kategorie{
  margin-bottom:8px;font-size:12px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--olive);
}
.blogliste__titel{margin-bottom:10px;font-family:var(--f-display);font-size:26px;
  line-height:1.25;font-weight:400;color:var(--green-700)}
.blogliste__titel a{color:inherit}
.blogliste__titel a:hover{color:var(--olive)}
.blogliste__kurz{font-size:16px;font-weight:300;line-height:1.75;color:var(--muted)}

.blog__fuss{margin-top:80px;padding-top:36px;border-top:1px solid rgba(94,106,66,.2)}
.blog__fuss p{margin-bottom:24px;font-size:16px;font-weight:300;line-height:1.8;color:var(--muted)}

/* Artikelseite. Erbt die Prosaregeln der Rechtsseiten, ergaenzt nur, was ein
   Ratgebertext braucht: Aufmacherbild, Listen, Zwischenfrage als h3 und den
   Verweis auf die Geldseite. */
.artikel{padding:160px 0 100px;background:var(--cream)}
.artikel__inner{max-width:760px;margin-inline:auto}
.artikel .eyebrow{margin-bottom:16px}
.artikel__title{
  margin-bottom:28px;
  font-family:var(--f-display);font-size:46px;line-height:1.15;font-weight:400;
  color:var(--green-700);
  /* Kein hyphens:auto wie auf den Rechtsseiten: die Silbentrennung zerlegte
     «Laser» zu «La-ser» mitten in der Ueberschrift. Artikeltitel sind kurz genug,
     um an Wortgrenzen zu brechen. */
  hyphens:manual;overflow-wrap:break-word;
}
.artikel .artikel__meta{
  display:flex;flex-wrap:wrap;gap:4px 8px;margin:-12px 0 28px;
  font-size:13px;line-height:1.6;color:var(--muted-2)
}
.artikel__meta a{font-weight:400}
.artikel__lead{margin-bottom:40px;font-size:19px;font-weight:300;line-height:1.7;color:var(--muted)}
.artikel__bild{margin:0 0 48px;border-radius:16px;overflow:hidden}
.artikel__bild img{display:block;width:100%;height:auto}
.artikel h2{margin:48px 0 14px;font-family:var(--f-display);font-size:30px;
  font-weight:400;line-height:1.25;color:var(--green-700)}
.artikel h3{margin:32px 0 10px;font-size:17px;font-weight:400;color:var(--green-700)}
.artikel p{margin-bottom:18px;font-size:17px;font-weight:300;line-height:1.85;color:var(--muted)}
.artikel ul{margin:0 0 22px;padding-left:22px;list-style:disc}
.artikel li{margin-bottom:9px;font-size:17px;font-weight:300;line-height:1.75;color:var(--muted)}
.artikel a{color:var(--olive);border-bottom:1px solid rgba(94,106,66,.4);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.artikel a:hover{color:var(--green-700);border-color:var(--green-700)}
.artikel h4{margin:22px 0 8px;font-size:16px;font-weight:400;letter-spacing:.02em;
  color:var(--muted);}
.artikel ol{margin:0 0 22px;padding-left:22px;list-style:decimal}
.artikel strong{font-weight:400;color:var(--green-700)}

/* Inhaltsverzeichnis. Steht als <nav> zwischen Aufmacherbild und erstem Abschnitt.
   Warum ueberhaupt: die Ratgeberartikel sind zwei- bis dreimal so lang wie der
   erste Beitrag, und Google zieht aus so einer Liste die Sprungmarken ins Snippet.
   Die Eintraege sind gezaehlt, damit die Laenge des Artikels vor dem Lesen sichtbar
   ist statt erst beim Scrollen. */
.artikel__inhalt{
  margin:0 0 44px;padding:26px 30px;border-radius:14px;
  background:var(--cream-alt);border:1px solid rgba(94,106,66,.14);
}
/* Zwei Klassen tief, mit Absicht: die Verzeichnisueberschrift IST eine h2 im
   Artikel, und «.artikel h2» ist spezifischer als eine einzelne Klasse. Ohne die
   zweite Klasse gewinnt die Abschnittsueberschrift und das Verzeichnis bekommt
   25 Pixel Serifenschrift mit vier Pixel Sperrung — gemessen im Browser, nicht
   vermutet. Dasselbe gilt fuer die Mobilregel weiter unten. */
.artikel .artikel__inhalt-titel{
  margin:0 0 14px;font-family:inherit;
  font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;color:var(--olive);
}
.artikel__inhalt ol{margin:0;padding-left:20px;list-style:decimal}
.artikel__inhalt li{margin-bottom:7px;font-size:16px;line-height:1.6}
.artikel__inhalt a{border-bottom:0;color:var(--muted)}
.artikel__inhalt a:hover{color:var(--olive);border-bottom:1px solid rgba(94,106,66,.4)}

/* Vergleichstabellen. Ein Ratgeber, der zwei Verfahren gegenueberstellt, gehoert in
   eine Tabelle und nicht in zwei Absaetze — aber sie muss auf dem Telefon scrollen
   koennen, ohne die Seite mitzuziehen. Deshalb der eigene Rahmen mit overflow-x. */
.artikel__tabelle{margin:0 0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.artikel__tabelle table{width:100%;min-width:460px;border-collapse:collapse;font-size:16px}
.artikel__tabelle caption{
  margin-bottom:10px;text-align:left;font-size:14px;font-weight:300;color:var(--muted-2)}
.artikel__tabelle th,.artikel__tabelle td{
  padding:11px 14px;text-align:left;vertical-align:top;font-weight:300;line-height:1.6;
  color:var(--muted);border-bottom:1px solid rgba(94,106,66,.16)}
.artikel__tabelle thead th{
  font-weight:400;color:var(--green-700);border-bottom:1px solid rgba(94,106,66,.35)}
.artikel__tabelle tbody th{color:var(--green-700);font-weight:400}

/* Belegbare Quellen stehen sichtbar am Artikel statt nur in internen Notizen.
   Der ruhige Kasten trennt Referenzen vom Lesetext, ohne sie wie Werbung zu behandeln. */
.artikel__quellen{
  margin:56px 0 0;padding:26px 30px;border-radius:14px;
  background:var(--cream-alt);border:1px solid rgba(94,106,66,.18)
}
.artikel .artikel__quellen h2{margin:0 0 14px;font-size:24px}
.artikel__quellen ul{margin-bottom:14px}
.artikel__quellen li{font-size:14px;line-height:1.65}
.artikel .artikel__quellen p{margin:0;font-size:13px;line-height:1.6;color:var(--muted-2)}

/* FAQ im Artikel. Die Aufklapper selbst kommen aus .fq weiter oben, hier steht nur
   der Rahmen — der Block braucht Abstand und eine sichtbare Kante nach oben, sonst
   liest er sich als Fortsetzung des letzten Abschnitts. */
.artikel__faq{margin:56px 0 0;padding-top:8px}
.artikel__faq h2{margin-top:0}
.artikel__faq .fq summary{font-size:17px}
.artikel__faq .fq__body p{margin-bottom:0}

/* Fremdzahlen: Loehne aus der Bundesstatistik, Marktpreise anderer Anbieter. Sie
   stehen bewusst anders da als die eigenen Preise — kleiner, abgesetzt, mit Quelle.
   Das Tor p_preise erkennt sie am Attribut, die Kundin am Aussehen. */
.artikel [data-fremdzahl]{
  margin:0 0 22px;padding:14px 18px;border-left:2px solid rgba(94,106,66,.35);
  background:rgba(94,106,66,.05);font-size:16px;color:var(--muted-2)}

/* Der Kasten, der den Artikel an die buchbare Leistung haengt. Ohne ihn ist ein
   Ratgeber Traffic ohne Ziel — deshalb prueft p_artikel_geldseite den Link. */
.artikel__geldseite{
  margin:56px 0 0;padding:32px 34px;border-radius:16px;
  background:rgba(94,106,66,.07);border:1px solid rgba(94,106,66,.16);
}
.artikel__geldseite h2{margin:0 0 10px;font-size:24px}
.artikel__geldseite p{margin-bottom:20px}
.artikel__geldseite a.btn{border-bottom:0}
/* .artikel a faerbt jeden Link im Fliesstext oliv — mit hoeherer Spezifitaet als
   .btn--gold. Damit traf es auch den einen Knopf, der auf jedem Artikel wirklich
   zaehlt: den Weg zur Geldseite. Seine Beschriftung stand oliv auf Gold bei 3,58:1,
   auf allen 15 Artikeln (Prueflauf 25.08.2026). --green-700 auf Gold sind 8,31:1. */
.artikel a.btn{border-bottom:0}
.artikel a.btn--gold{color:var(--green-700)}
.artikel a.btn--dark{color:var(--gold-200)}
/* Weiterlesen. Haelt die Artikel untereinander verbunden, statt jeden einzeln an
   der Uebersicht haengen zu lassen: aus dem Hub fuehrt ein Weg hinein, hier fuehren
   drei weiter. */
.artikel__weiter{margin:48px 0 0;padding-top:28px;border-top:1px solid rgba(94,106,66,.2)}
.artikel__weiter h2{margin:0 0 14px;font-size:22px}
.artikel__weiter ul{margin:0;padding-left:0;list-style:none}
.artikel__weiter li{
  margin-bottom:12px;padding-left:18px;position:relative;font-size:16px;line-height:1.7}
.artikel__weiter li::before{
  content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border-radius:50%;
  background:rgba(94,106,66,.45)}
.artikel__zurueck{margin-top:48px}
.artikel__zurueck a{border-bottom:0;font-size:15px}

@media (max-width:720px){
  .blog{padding:120px 0 80px}
  .blog__title{font-size:36px}
  .blog__lead{margin-bottom:44px;font-size:17px}
  .blogliste{gap:36px}
  .blogliste__eintrag{grid-template-columns:1fr;gap:16px}
  .blogliste__bild img{aspect-ratio:16/9}
  .blogliste__titel{font-size:22px}
  .artikel{padding:120px 0 80px}
  .artikel__title{font-size:32px}
  .artikel__lead{font-size:17px}
  .artikel h2{font-size:25px}
  .artikel p,.artikel li{font-size:16px}
  .artikel__geldseite{padding:26px 22px}
  .artikel__geldseite .btn{
    width:100%;min-height:52px;padding-inline:18px;
    white-space:normal;text-align:center;
  }
  .artikel__inhalt{padding:22px 20px}
  .artikel__tabelle table{font-size:15px}
  .artikel__weiter li{font-size:15px}
}

.foot__bar--slim{margin-top:0;border-top:0}

@media (max-width:767px){
  .legal{padding:120px 0 64px}
  .legal__title{font-size:36px}
  .legal h2{font-size:22px;margin:32px 0 10px}
}

/* ---------- Premium-CTA-Paar ---------- */
.prem__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- Zweite Reihe: Traffic-Bringer ---------- */
.pop2{margin-top:56px;padding-top:44px;border-top:1px solid rgba(94,106,66,.16)}
.pop2__label{
  margin-bottom:22px;
  font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--olive);
}
.pop2__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{
  display:flex;flex-direction:column;
  padding:28px 26px;border-radius:16px;
  background:var(--cream);border:1px solid rgba(94,106,66,.14);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.pcard:hover{transform:translateY(-3px);border-color:rgba(94,106,66,.32);box-shadow:0 14px 30px rgba(30,34,24,.08)}
.pcard__title{
  margin-bottom:8px;
  font-family:var(--f-display);font-size:24px;line-height:1.15;color:var(--green-700);
}
.pcard__title em{
  display:inline-block;margin-left:8px;padding:3px 9px;border-radius:100px;vertical-align:middle;
  background:var(--gold);color:var(--green-700);
  font-family:var(--f-body);font-style:normal;font-size:10px;font-weight:500;
  letter-spacing:1.2px;text-transform:uppercase;
}
.pcard__text{
  margin-bottom:18px;
  font-size:15px;font-weight:300;line-height:1.65;color:var(--muted);
}
.pcard__link{
  margin-top:auto;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--olive);
}
.pcard:hover .pcard__link{color:var(--green-700)}

/* ---------- Preislisten-Titel als Link ---------- */
.plist__title a{
  color:var(--gold-tief);
  transition:color .2s var(--ease);
}
.plist__title a:hover{color:var(--olive)}

/* ---------- Kurs-Kacheln sind jetzt Links ---------- */
/* Beim Hover kippt die ganze Karte auf die dunkle Flaeche der Seite —
   dieselben Farben wie die Termin-Sektion (.cta): Grund green-700,
   Titel gold-200, Text gedaempftes Creme, Ankerzeile in Gold. */
a.course{
  transition:transform .3s var(--ease),border-color .3s var(--ease),
             background-color .3s var(--ease),box-shadow .3s var(--ease);
}
a.course:hover{
  transform:translateY(-3px);
  background:var(--green-700);border-color:var(--green-700);
  box-shadow:0 14px 30px rgba(30,34,24,.14);
}
a.course:hover h3{color:var(--gold-200)}
a.course:hover p{color:rgba(236,219,165,.78)}
a.course:hover .course__mehr{color:var(--gold)}
a.course:hover .course__mehr span{border-color:rgba(235,200,86,.55)}
a.course:hover .course__mehr i{transform:translateX(4px)}

@media (max-width:991px){
  .pop2__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .prem__cta{flex-direction:column;align-items:stretch;gap:14px}
  .prem__cta .link-caps{align-self:flex-start}
  .pop2{margin-top:36px;padding-top:32px}
  .pop2__grid{grid-template-columns:1fr}
  .pcard{padding:24px 22px}
}

/* ============================================================
   SERVICESEITEN
   ============================================================ */
.shero{padding:150px 0 72px;background:var(--green-700)}
.shero__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.shero__grid>*{min-width:0}
.shero__title{
  margin:14px 0 18px;
  font-family:var(--f-display);font-size:62px;line-height:1.08;font-weight:400;
  color:var(--gold-200);
}
.shero__lead{
  max-width:44ch;margin-bottom:26px;
  font-size:17px;font-weight:300;line-height:1.7;color:rgba(236,219,165,.82);
}
.shero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.shero__meta span{
  padding:9px 16px;border-radius:100px;
  background:rgba(236,219,165,.08);border:1px solid rgba(235,200,86,.22);
  font-size:13px;font-weight:300;color:rgba(236,219,165,.85);
}
.shero__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.shero__actions .link-caps{color:var(--gold);border-color:rgba(235,200,86,.45)}
.shero__actions .link-caps:hover{color:var(--gold-200);border-color:var(--gold-200)}
.shero__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}

/* Vom Generator gesetzt (sektionsrhythmus in build.py): stossen zwei helle
   Sektionen mit derselben Flaeche aneinander, flippt die zweite auf die andere
   Cremeflaeche. Element+Klasse (0,1,1) schlaegt die Basisregeln (0,1,0). */
section.s-ton-alt{background:var(--cream-alt)}
section.s-ton-cream{background:var(--cream)}

.sblock{padding:88px 0;background:var(--cream)}
/* Erklaerbild in der Textspalte eines sblock. Gebaut fuer die Zoom-Darstellungen
   (Haarwurzel, Wachstumsphasen): Die Mechanik steht im Vorspann links, das Bild
   zeigt sie rechts. Gleiches Seitenverhaeltnis wie .steps__bild, damit die
   Zoom-Serie ueber alle Seiten hinweg dasselbe Format hat. */
.sblock__bild{
  display:block;width:100%;aspect-ratio:800/444;object-fit:cover;
  margin-top:24px;border-radius:12px;
  background:rgba(94,106,66,.06);
}

/* ------------------------------------------------------------------
   sblock: Aufschlag und Beweisfuehrung

   Vorher: links eine H2-Zeile, rechts der ganze Text. Die Kopfspalte trug
   142 bis 484 Pixel Leere, die Textspalte war 858 Pixel breit, also rund
   100 Zeichen je Zeile, und der Absatzabstand (18px) war kleiner als der
   Zeilensprung (30,6px) — der Block las sich als Flaeche, nicht als Text.

   Jetzt: zwei gleich breite Spalten. Links H2 plus Absatz 1 als Vorspann,
   groesser und in --ink. Auf 14 von 14 Seiten mit Wirkweise steht die
   Mechanik ausnahmslos in Absatz 1 — die Rangordnung leistet damit das,
   wofuer sonst eine Beschriftung je Absatz noetig waere. Kein Wort wurde
   geaendert, kein Absatz umgestellt.

   Gemessen ueber alle 28 Sektionen bei 1440px: tote Flaeche Median
   344 -> 100px, Maximum 484 -> 215px, in keiner Sektion schlechter,
   Gesamthoehe aller Sektionen 17342 -> 15938px.
   ------------------------------------------------------------------ */
.sblock__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(48px,5vw,72px);
  align-items:start;
}

/* Keine max-width auf den Spalten — das Raster bestimmt die Breite
   (666px bei 1440px Viewport). Eine max-width wuerde eine Kante erzeugen,
   die zu keiner Nachbarsektion passt, und rechts Leerraum stehen lassen. */
.sblock__vorspann{
  margin:26px 0 0;
  font-size:20px;font-weight:300;line-height:1.65;
  color:var(--ink);
}
.sblock__vorspann + .sblock__vorspann{margin-top:22px}

/* Absatzabstand = eine volle Zeile (17 x 1.8 = 30,6). */
.sblock__text p{
  margin:0 0 30px;
  font-size:17px;font-weight:300;line-height:1.8;
  color:var(--muted);
}
.sblock__text p:last-child{margin-bottom:0}

/* Die Querverweise in diesen Texten waren wegen der Basisregel
   a{color:inherit;text-decoration:none} nicht als Link erkennbar.
   Der Kopf ist mitgefasst, weil ein Querverweis in den Vorspann wandern kann. */
.sblock__kopf a,
.sblock__text a{
  color:var(--olive);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(94,106,66,.45);
}
.sblock__kopf a:hover,
.sblock__text a:hover{text-decoration-color:var(--olive)}

/* Die ehrliche Grenze — der Absatz, der Umsatz kostet. data-grenze traegt
   ausschliesslich Optik. NICHT data-negativ dafuer ausweiten: p_gestrichen()
   schneidet data-negativ-Elemente aus dem Text, BEVOR auf gestrichene
   Leistungen geprueft wird — wer das Attribut aus Stilgruenden setzt, nimmt
   den Absatz still aus der Pruefung. Bewusst leise: eine Linie, kein Gold,
   kein Etikett. --olive auf --cream ergibt 5,4:1. Rahmen statt Hintergrund,
   damit die Marke im Druck und im Kontrastmodus stehen bleibt. */
.sblock__text p[data-grenze]{
  padding-left:20px;
  border-left:2px solid var(--olive);
  color:var(--ink);
}

/* Katalogsektionen: dort ist Absatz 1 bereits Eintrag 1 einer Aufzaehlung,
   ein Vorspann ist unmoeglich. Erkennungsregel mechanisch: Absatz 1 enthaelt
   ein inline <b> oder <strong> — trifft genau vier Sektionen und keine falsche.
   H2 ueber die volle Breite, Eintraege darunter im Zweierraster in
   DOM-Reihenfolge. Tote Flaeche per Konstruktion null. */
.sblock--liste .sblock__grid{grid-template-columns:1fr;gap:40px}
.sblock--liste .sblock__text{
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(48px,5vw,72px);row-gap:30px;
}
.sblock--liste .sblock__text p{margin:0}
/* Die Behandlungsnamen sind dort von Hand ausgezeichnet. Ein blankes <b>
   rechnet bei geerbtem Gewicht 300 auf 400 und ist praktisch unsichtbar. */
.sblock--liste :is(b,strong){font-weight:500;color:var(--ink)}

/* Umbruch bei 1199 statt 991: zwei Spalten a 64 Zeichen brauchen die Breite.
   Bei 1024px stuenden sonst je rund 46 Zeichen. */
@media (max-width:1199px){
  .sblock__grid{grid-template-columns:1fr;gap:28px}
  .sblock--liste .sblock__grid{gap:28px}
  .sblock--liste .sblock__text{grid-template-columns:1fr;row-gap:26px}
  .sblock__vorspann{font-size:19px;margin-top:20px}
}
@media (max-width:767px){
  .sblock{padding:64px 0}
  .sblock__vorspann{font-size:18px;line-height:1.6}
  .sblock__text p{font-size:16px;margin-bottom:26px}
  .sblock__text p[data-grenze]{padding-left:16px}
}

/* Es gab bisher gar kein Druck-Stylesheet. A4 hochkant sind rund 794
   CSS-Pixel, also greift bereits die 1199er-Regel und stapelt einspaltig. */
@media print{
  .sblock{padding:24pt 0;background:#fff}
  .sblock__grid,.sblock--liste .sblock__text{display:block}
  .sblock__vorspann{font-size:12pt;line-height:1.5;margin-top:10pt;color:#000}
  .sblock__text{margin-top:10pt}
  .sblock__text p{font-size:10.5pt;line-height:1.45;color:#000;
    margin-bottom:10pt;break-inside:avoid}
  .sblock__text p[data-grenze]{border-left:1.5pt solid #000;color:#000}
  .sblock .h2{break-after:avoid}
}
.prices--sub{background:var(--cream-alt)}

.steps{padding:88px 0;background:var(--cream)}
.steps .eyebrow{margin-bottom:14px}
.steps .h2{margin-bottom:52px}
.steps__list{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.steps__list li{padding-top:20px;border-top:1px solid rgba(94,106,66,.24)}
/* Strichgrafik statt KI-Bild: erbt die Textfarbe, bleibt auf jedem Display scharf,
   wiegt zusammen weniger als ein einziges Foto. Gold waere als Linienfarbe auf Creme
   zu schwach (1.5:1), deshalb Olive fuer das Icon und Gold nur fuer die Ziffer. */
.steps__icon{
  display:block;width:40px;height:40px;margin-bottom:16px;
  color:var(--olive);
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Bild statt Strichgrafik, wo es eines gibt: es zeigt, was mit der Haut passiert,
   statt es zu symbolisieren. Gleiches Seitenverhaeltnis fuer alle vier, damit die
   Spalten auf einer Linie bleiben. */
.steps__bild{
  display:block;width:100%;aspect-ratio:800/444;object-fit:cover;
  border-radius:12px;margin-bottom:18px;
  background:rgba(94,106,66,.06);
}

/* Variante mit Bildern. Vier kleine Vorschaubilder nebeneinander wirkten monoton,
   weil drei der vier Darstellungen einander stark ähneln. Der alte Auftritt loeste
   das besser: grosses Bild neben dem Text, auf dunklem Grund. Das ist hier
   uebernommen — nur als vier sichtbare Zeilen statt als Slider mit vier Klicks,
   und mit wechselnder Seite, damit die Reihe nicht gleichfoermig wird. */
/* Der alte Auftritt legte die Schritte auf ein abgedunkeltes Foto statt auf eine
   Volltonflaeche. Das gibt der Sektion Tiefe, ohne vom Inhalt abzulenken. Deckung so
   stark, dass der Text darauf dieselben Kontrastwerte erreicht wie auf reinem Gruen. */
.steps--bild{position:relative;background:var(--green-700);padding:96px 0;isolation:isolate}
.steps--bild::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:url("/img/behandlungsraum.webp") center/cover no-repeat;
  opacity:.16;
}
.steps--bild::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(40,49,36,.86) 0%,rgba(40,49,36,.94) 55%,rgba(40,49,36,.98) 100%);
}
.steps--bild .eyebrow{color:var(--gold)}
.steps--bild .eyebrow__rule{background:var(--gold)}
.steps--bild .h2{color:var(--gold-200)}
.steps--bild .h2 em{color:var(--gold)}
.steps--bild .steps__list{display:flex;flex-direction:column;gap:0}
.steps--bild .steps__list li{
  display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;
  padding:44px 0;border-top:1px solid rgba(236,219,165,.14);
}
.steps--bild .steps__list li:last-child{border-bottom:1px solid rgba(236,219,165,.14)}
/* Beim Seitenwechsel muessen die Spaltenbreiten mitwandern, sonst wird das Bild
   in jeder zweiten Zeile schmaler und die Reihe wirkt unruhig statt rhythmisch. */
.steps--bild .steps__list li:nth-child(even){grid-template-columns:1fr 1.15fr}
.steps--bild .steps__list li:nth-child(even) .steps__bild{order:2}
.steps--bild .steps__bild{
  margin-bottom:0;border-radius:16px;aspect-ratio:800/470;
  background:rgba(236,219,165,.06);
}
.steps--bild .steps__num{
  margin-bottom:12px;font-size:15px;letter-spacing:2.4px;color:var(--gold);
  font-family:var(--f-body);font-weight:300;
}
.steps--bild .steps__list h3{
  margin-bottom:14px;font-size:32px;line-height:1.15;color:var(--gold-200);
}
.steps--bild .steps__list p{font-size:17px;line-height:1.75;color:rgba(249,241,213,.8)}
.steps__num{
  display:block;margin-bottom:10px;
  font-family:var(--f-display);font-size:22px;color:var(--gold-tief);
}
.steps__list h3{
  margin-bottom:8px;
  font-family:var(--f-display);font-size:21px;font-weight:400;color:var(--green-700);
}
.steps__list p{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted)}

.cred{padding:88px 0;background:var(--cream-alt)}
.cred .eyebrow{margin-bottom:14px}
.cred .h2{margin-bottom:52px}
.cred__grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cred__list{list-style:none;margin:0;padding:0;counter-reset:none}
.cred__list li{
  display:grid;grid-template-columns:78px 1fr;gap:20px;align-items:baseline;
  padding:16px 0;border-top:1px solid rgba(94,106,66,.24);
}
.cred__list li:last-child{border-bottom:1px solid rgba(94,106,66,.24)}
.cred__jahr{font-family:var(--f-display);font-size:24px;color:var(--gold-tief);line-height:1}
.cred__was{
  font-family:var(--f-serif);font-size:18px;font-weight:400;line-height:1.45;color:var(--green-700);
}
.cred__zusatz{
  display:block;margin-top:4px;
  font-family:var(--f-body);font-size:14px;font-weight:300;color:var(--muted-2);
}
.cred__text p{margin-bottom:18px;font-size:17px;font-weight:300;line-height:1.8;color:var(--muted)}
.cred__text p:last-child{margin-bottom:0}

/* Kompakter, eigener Vertrauensbaustein. Bewusst kein amtliches BAG-/Bundeszeichen:
   Der Sachkundenachweis ist personenbezogen, das Signet bleibt Teil der Studio-Gestaltung. */
.cred--compact{padding:64px 0}
.vbadge{
  display:grid;grid-template-columns:180px 1fr;gap:48px;align-items:center;
  padding:42px 52px;border:1px solid rgba(94,106,66,.18);border-radius:24px;
  background:var(--cream);box-shadow:0 18px 54px rgba(35,50,43,.08);
}
.vbadge__mark{
  display:flex;aspect-ratio:1;flex-direction:column;align-items:center;justify-content:center;
  padding:22px;border-radius:22px;background:var(--green-700);color:var(--gold-200);
  text-align:center;box-shadow:inset 0 0 0 1px rgba(236,219,165,.18);
}
.vbadge__check{
  display:grid;width:42px;height:42px;margin-bottom:14px;place-items:center;border-radius:50%;
  background:var(--gold);color:var(--green-700);font-size:23px;font-weight:700;line-height:1;
}
.vbadge__mark strong{
  font-family:var(--f-display);font-size:28px;font-weight:400;line-height:1;letter-spacing:.8px;
}
.vbadge__mark>span:last-child{
  margin-top:8px;font-size:10px;font-weight:500;line-height:1.25;letter-spacing:1.5px;text-transform:uppercase;
}
.vbadge__copy .eyebrow{margin-bottom:13px}
.vbadge__copy .h2{margin:0 0 15px;font-size:44px}
.vbadge__intro{max-width:720px;font-size:18px;font-weight:300;line-height:1.7;color:var(--muted)}
.vbadge__copy .cred__list{max-width:720px;margin-top:22px}
.vbadge__copy .cred__list li{grid-template-columns:64px 1fr;padding:12px 0}
.vbadge__source{margin-top:18px}

.cta{padding:88px 0;background:var(--green-700)}
.cta__inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cta__title{
  margin:16px 0 16px;
  font-family:var(--f-display);font-size:48px;line-height:1.12;font-weight:400;color:var(--gold-200);
}
.cta__title em{font-style:italic;color:var(--gold)}
.cta__lead{font-size:17px;font-weight:300;line-height:1.75;color:rgba(236,219,165,.8)}
.cta__ways{display:flex;flex-direction:column;gap:12px}

.weiter{padding:80px 0;background:var(--cream-alt)}
.weiter .eyebrow{margin-bottom:26px}
.weiter__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.weiter__card{
  display:block;padding:28px 26px;border-radius:16px;
  background:var(--cream);border:1px solid rgba(94,106,66,.14);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.weiter__card:hover{transform:translateY(-3px);border-color:rgba(94,106,66,.34)}
.weiter__card h3{
  margin-bottom:8px;
  font-family:var(--f-display);font-size:22px;font-weight:400;color:var(--green-700);
}
.weiter__card p{font-size:15px;font-weight:300;line-height:1.65;color:var(--muted)}

@media (max-width:991px){
  .shero{padding:130px 0 56px}
  .shero__grid{grid-template-columns:1fr;gap:36px}
  .shero__title{font-size:46px}
  .steps{padding:64px 0}
  .steps__list{grid-template-columns:1fr 1fr;gap:24px}
  /* Bildvariante: ab hier Bild oben, Text darunter — nebeneinander wird es zu eng. */
  .steps--bild{padding:64px 0}
  .steps--bild .steps__list li{grid-template-columns:1fr;gap:22px;padding:32px 0}
  .steps--bild .steps__list li:nth-child(even){grid-template-columns:1fr}
  .steps--bild .steps__list li:nth-child(even) .steps__bild{order:0}
  .steps--bild .steps__list h3{font-size:27px}
  .steps--bild .steps__list p{font-size:16px}
  .cred{padding:64px 0}
  .cred .h2{margin-bottom:32px}
  .cred__grid{grid-template-columns:1fr;gap:36px}
  .cred--compact{padding:52px 0}
  .vbadge{grid-template-columns:150px 1fr;gap:32px;padding:34px}
  .vbadge__copy .h2{margin-bottom:14px;font-size:38px}
  .cta{padding:64px 0}
  .cta__inner{grid-template-columns:1fr;gap:36px}
  .cta__title{font-size:38px}
  .weiter__grid{grid-template-columns:1fr}
}
@media (max-width:767px){
  .shero{padding:120px 0 48px}
  .shero__title{font-size:40px;overflow-wrap:break-word;hyphens:auto}
  .shero__lead{font-size:16px}
  .shero__actions .btn{width:100%;min-height:52px;white-space:normal;text-align:center}
  .steps__list{grid-template-columns:1fr}
  .cred__list li{grid-template-columns:60px 1fr;gap:14px}
  .cred__jahr{font-size:20px}
  .cred__was{font-size:16px}
  .cred__text p{font-size:16px}
  .vbadge{grid-template-columns:1fr;gap:26px;padding:26px 22px}
  .vbadge__mark{width:132px;padding:16px;border-radius:18px}
  .vbadge__check{width:36px;height:36px;margin-bottom:11px;font-size:20px}
  .vbadge__mark strong{font-size:22px}
  .vbadge__mark>span:last-child{font-size:8px;letter-spacing:1px}
  .vbadge__copy .h2{font-size:34px}
  .vbadge__intro{font-size:16px}
  .cta__title{font-size:34px}
}

/* ---------- 404 ---------- */
.nf{
  display:flex;align-items:center;justify-content:center;
  min-height:78vh;padding:160px 0 100px;text-align:center;background:var(--green-700);
}
.nf__inner{max-width:560px}
.nf .eyebrow{justify-content:center}
.nf__title{
  margin:18px 0 20px;
  font-family:var(--f-display);font-size:clamp(34px,6vw,56px);line-height:1.1;
  font-weight:400;color:var(--gold-200);
}
.nf__title em{font-style:italic}
.nf__text{margin-bottom:34px;font-size:17px;font-weight:300;line-height:1.75;color:rgba(236,219,165,.72)}
.nf__actions{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:center}

/* ---------- Team ---------- */
.team{padding:88px 0;background:var(--cream-alt)}
.team .eyebrow{margin-bottom:14px}
.team .h2{margin-bottom:48px}
.team__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.team__card{
  display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:start;
  padding:26px;border-radius:20px;
  background:var(--cream);border:1px solid rgba(94,106,66,.14);
}
.team__card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:14px}
.team__body h3{
  margin-bottom:4px;
  font-family:var(--f-display);font-size:26px;font-weight:400;color:var(--green-700);
}
.team__rolle{
  margin-bottom:14px;
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-tief);
}
.team__body p{font-size:15px;font-weight:300;line-height:1.7;color:var(--muted)}
.team__fokus{margin-top:14px;font-size:14px}
.team__fokus a{color:var(--olive);border-bottom:1px solid rgba(94,106,66,.4)}
.team__fokus a:hover{color:var(--green-700);border-color:var(--green-700)}
.team__hinweis{
  margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(94,106,66,.16);
  font-size:15px;font-weight:300;color:var(--muted-2);
}
@media (max-width:1180px){.team__grid{grid-template-columns:1fr}}
@media (max-width:767px){
  .team{padding:56px 0}
  .team .h2{margin-bottom:32px}
  .team__card{grid-template-columns:1fr;gap:20px;padding:22px}
  .team__card img{aspect-ratio:3/2}
}

/* ============================================================
   KONTAKTSEITE
   Die Sektionen .find und .kform hatten bis 18.08.2026 kein CSS:
   .find erbte Tintenfarbe auf dunklem Grund (#283124 auf #283124)
   und war damit praktisch unsichtbar. Deshalb ist .find jetzt eine
   helle Sektion — sie bricht zugleich die Dunkelflaeche der Seite.
   ============================================================ */
.cta__note{
  margin-top:18px;padding-top:14px;border-top:1px solid rgba(236,219,165,.14);
  font-size:14.5px;font-weight:300;color:rgba(236,219,165,.7);
}
.cta .hours{margin-top:26px;border-top:1px solid rgba(236,219,165,.14)}

/* Helle Variante der Termin-Sektion (Kontaktseite): gleiche Struktur,
   Cremeflaeche statt green-700. Der Rhythmusprozessor kennt sie als «cream». */
.cta--hell{background:var(--cream)}
.cta--hell .cta__title{color:var(--green-700)}
.cta--hell .cta__title em{color:var(--olive)}
.cta--hell .cta__lead{color:var(--muted)}
.cta--hell .cta__note{border-top-color:rgba(94,106,66,.18);color:var(--muted-2)}
.cta--hell .hours,
.cta--hell.cta .hours{border-top-color:rgba(94,106,66,.18)}
.cta--hell .hours div{border-bottom-color:rgba(94,106,66,.12)}
.cta--hell .hours dt{color:var(--muted-2)}
.cta--hell .hours dd{color:var(--ink)}
.cta--hell .hours .is-today dt{color:var(--olive)}
.cta--hell .hours .is-today dd{color:var(--green-700)}
.cta--hell .way{border-color:rgba(94,106,66,.22);background:var(--cream-alt)}
.cta--hell .way:hover{background:rgba(94,106,66,.08);border-color:rgba(94,106,66,.4)}
.cta--hell .way--primary{background:rgba(235,200,86,.16);border-color:rgba(197,158,43,.5)}
.cta--hell .way__icon{background:rgba(94,106,66,.1);color:var(--green-700)}
.cta--hell .way b{color:var(--green-700)}
.cta--hell .way em{color:var(--muted-2)}
.cta--hell .way__arrow{color:var(--olive)}

.find{padding:88px 0;background:var(--cream)}
.find__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:stretch}
.find .find__map{min-height:440px;border:1px solid rgba(94,106,66,.22);background:var(--cream-alt)}
.find__panel{display:flex;flex-direction:column;justify-content:space-between;gap:36px}
.find__title{
  margin-bottom:26px;
  font-family:var(--f-display);font-size:46px;line-height:1.08;font-weight:400;color:var(--green-700);
}
.find__title em{font-style:italic;color:var(--olive)}
.find__list div{padding:18px 0;border-top:1px solid rgba(94,106,66,.18)}
.find__list div:last-child{border-bottom:1px solid rgba(94,106,66,.18)}
.find__list dt{
  margin-bottom:6px;
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase;font-weight:500;color:var(--olive);
}
.find__list dd{font-size:16px;font-weight:300;line-height:1.7;color:var(--muted)}
.find__list a{border-bottom:1px solid rgba(94,106,66,.35);transition:color .2s var(--ease),border-color .2s var(--ease)}
.find__list a:hover{color:var(--green-700);border-color:var(--green-700)}
.find__panel .btn{align-self:flex-start}

/* Formular. Wird nur ausgeliefert, wenn stammdaten.FORMULAR["aktiv"] True ist. */
.kform{padding:88px 0;background:var(--cream-100)}
.kform__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start}
.kform__title{
  margin:16px 0;
  font-family:var(--f-display);font-size:44px;line-height:1.1;font-weight:400;color:var(--green-700);
}
.kform__title em{font-style:italic;color:var(--olive)}
.kform__lead{font-size:17px;font-weight:300;line-height:1.75;color:var(--muted)}
.kform__hint{margin-top:16px;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--muted-2)}
.kform__ablauf{margin:36px 0 0;padding:0;list-style:none;counter-reset:ablauf;display:grid;gap:20px}
.kform__ablauf li{counter-increment:ablauf;position:relative;padding-left:46px}
.kform__ablauf li::before{
  content:counter(ablauf,decimal-leading-zero);
  position:absolute;left:0;top:3px;
  font-family:var(--f-display);font-size:15px;letter-spacing:.06em;color:var(--olive);
}
.kform__ablauf b{display:block;font-size:16px;font-weight:500;color:var(--green-700);margin-bottom:2px}
.kform__ablauf span{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--muted-2)}
.kform__eilt{margin-top:30px;padding-top:24px;border-top:1px solid rgba(94,106,66,.18);font-size:14.5px;font-weight:300;color:var(--muted)}
.kform__eilt a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px}
.kform__form{
  padding:36px;border-radius:20px;
  background:var(--cream);border:1px solid rgba(94,106,66,.18);
}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.feld label{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:500;color:var(--olive)}
.feld label span{text-transform:none;letter-spacing:0;font-weight:300;color:var(--muted-2)}
.feld input,.feld textarea{
  padding:13px 16px;border-radius:12px;
  border:1px solid rgba(94,106,66,.3);background:#fff;
  font:inherit;font-weight:300;color:var(--ink);
}
.feld input:focus-visible,.feld textarea:focus-visible{outline:2px solid var(--olive);outline-offset:1px}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#a23b2e}
.feld textarea{resize:vertical;min-height:120px}
.kform__zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.einw{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;cursor:pointer}
.einw input{margin-top:3px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--olive)}
.einw span{font-size:13.5px;font-weight:300;line-height:1.6;color:var(--muted-2)}
.einw a{color:var(--olive);border-bottom:1px solid rgba(94,106,66,.4)}
.einw a:hover{color:var(--green-700);border-color:var(--green-700)}
.kform__status{min-height:1.4em;margin-bottom:10px;font-size:14.5px;color:#a23b2e}
.kform__status:empty{margin-bottom:0}
.kform__senden[aria-disabled="true"]{opacity:.6;pointer-events:none}
/* Erfolg/Fehler ohne JavaScript: der Endpunkt leitet auf #gesendet bzw.
   #formular-fehler, :target blendet den Block ein. Mit JavaScript setzt
   script.js dieselben Klassen direkt. */
.kform__ok,.kform__fehl{display:none;margin-top:20px;padding:20px 22px;border-radius:14px}
.kform__ok:target,.kform__ok.is-sichtbar{display:block;background:rgba(94,106,66,.12);border:1px solid rgba(94,106,66,.3)}
.kform__fehl:target,.kform__fehl.is-sichtbar{display:block;background:rgba(162,59,46,.08);border:1px solid rgba(162,59,46,.3)}
.kform__ok h3{margin-bottom:6px;font-family:var(--f-display);font-size:22px;font-weight:400;color:var(--green-700)}
.kform__ok p,.kform__fehl p{font-size:15px;font-weight:300;line-height:1.65;color:var(--muted)}
.kform__fehl a{color:var(--olive);border-bottom:1px solid rgba(94,106,66,.4)}

@media (max-width:991px){
  .find{padding:64px 0}
  .find__grid{grid-template-columns:1fr;gap:32px}
  .find .find__map{min-height:340px}
  .find__title{font-size:38px}
  .kform{padding:64px 0}
  .kform__grid{grid-template-columns:1fr;gap:36px}
  .kform__title{font-size:36px}
}
@media (max-width:767px){
  .find__title{font-size:32px}
  .kform__title{font-size:30px}
  .kform__form{padding:26px 20px}
  .kform__zeile{grid-template-columns:1fr}
  .kform__senden{width:100%;min-height:52px}
}

/* ============================================================
   ANLIEGEN — Einstieg über das Anliegen statt den Behandlungsnamen.
   Kartenoptik = .pcard aus der Premium-Sektion, hier nur Raster und Kopf.
   ============================================================ */
.anliegen{padding:88px 0;background:var(--cream)}
.anliegen__head{max-width:680px;margin-bottom:36px}
.anliegen__head .eyebrow{margin-bottom:14px}
.anliegen__lead{margin-top:14px;font-size:16px;font-weight:300;line-height:1.7;color:var(--muted)}
.anliegen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Auf der Alt-Flaeche brauchen die Cream-Karten keinen Extra-Ton; auf der
   Cream-Flaeche bekaemen sie sonst keinen Kontrast — dann hell abheben. */
.anliegen:not(.s-ton-alt) .pcard{background:#fff}
@media (max-width:991px){
  .anliegen{padding:64px 0}
  .anliegen__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .anliegen__grid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;overscroll-behavior-inline:contain;
    margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);
  }
  .anliegen__grid::-webkit-scrollbar{display:none}
  .anliegen__grid .pcard{flex:0 0 min(82vw,310px);scroll-snap-align:start}
}

/* Gutschein-Zeile in der Termin-Sektion und FAQ-Abschluss (Variante 2). */
.book__gutschein{
  padding-top:4px;
  font-size:14px;font-weight:300;line-height:1.6;
  color:rgba(236,219,165,.75);
}
.faq__cta{margin-top:36px;font-size:15px;font-weight:300;color:var(--muted)}
.faq__cta .link-caps{margin-left:6px}
/* Zwei Ratgeberverweise unter einer FAQ brauchen eine eigene Zeile, sonst kleben
   die Grossbuchstaben-Links aneinander und lesen sich als ein Link. */
.faq__cta .link-caps{display:inline-block;margin-top:8px}

/* Aufsatz-Karten (HydraFacial): sieben Stück, deshalb Flex statt Grid —
   die letzte Reihe (3/3/1) zentriert sich selbst, ein 3er-Grid liesse die
   einzelne Karte links hängen. Karten wie .weiter__card, aber mit Bild
   im Anschnitt, darum overflow:hidden auf der Karte. */
.tools{padding:88px 0;background:var(--cream-alt)}
.tools .eyebrow{margin-bottom:14px}
.tools .h2{margin-bottom:16px}
.tools__vorspann{
  max-width:720px;margin-bottom:48px;
  font-size:17px;font-weight:300;line-height:1.75;color:var(--muted);
}
/* ---------- Technik zum Aufklappen ----------
   Der Technikblock ist Nachschlagewerk, nicht Pflichtlektuere. Am Desktop steht er
   offen (open im Markup); ab 992px abwaerts klappt script.js ihn zu — dort kostete er
   auf der HydraFacial-Seite 4'879 von 14'790 Pixeln, also ein Drittel der Seite, und
   schob Termin und Beweise dahinter. Ohne Skript bleibt er offen: der alte Zustand,
   nie ein kaputter. */
.tools__falt{border-top:1px solid rgba(94,106,66,.18)}
.tools__falt-knopf{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:15px;letter-spacing:.02em;color:var(--green-700);
}
.tools__falt-knopf::-webkit-details-marker{display:none}
.tools__falt-knopf:hover{color:var(--olive)}
/* Pfeil aus zwei Strichen, wie in der FAQ: dreht beim Oeffnen. */
.tools__falt-knopf i{
  position:relative;flex:0 0 14px;width:14px;height:14px;
  transition:transform .3s var(--ease);
}
.tools__falt-knopf i::before,.tools__falt-knopf i::after{
  content:'';position:absolute;top:6px;left:0;
  width:14px;height:1.5px;background:currentColor;
}
.tools__falt-knopf i::after{transform:rotate(90deg);transition:opacity .3s var(--ease)}
.tools__falt[open] .tools__falt-knopf i::after{opacity:0}
.tools__falt-body{padding-top:10px;padding-bottom:6px}
/* Der Vorspann steht ueber dem Knopf und braucht deshalb weniger Luft nach unten
   als frueher, wo direkt das Raster folgte. */
.tools__vorspann{margin-bottom:26px}

.tools__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.tool{
  flex:0 1 calc((100% - 40px)/3);
  border-radius:16px;overflow:hidden;
  background:var(--cream);border:1px solid rgba(94,106,66,.14);
}
.tool__bild{
  display:block;width:100%;aspect-ratio:800/533;object-fit:cover;
  background:rgba(94,106,66,.06);
}
.tool h3{
  margin:20px 24px 8px;
  font-family:var(--f-display);font-size:22px;font-weight:400;color:var(--green-700);
}
.tool p{margin:0 24px 26px;font-size:15px;font-weight:300;line-height:1.65;color:var(--muted)}
@media (min-width:1100px){
  /* zehn Aufsaetze gehen als 5+5 sauber auf; bei drei Spalten bliebe der
     zehnte allein in einer vierten Reihe stehen */
  .tool{flex-basis:calc((100% - 80px)/5)}
  .tool h3{margin:16px 18px 6px;font-size:19px}
  .tool p{margin:0 18px 20px;font-size:14px;line-height:1.6}
  /* Sechs Kacheln gehen als 3+3 auf. Ohne diese Ausnahme greift die
     Fuenfer-Regel oben und laesst die sechste allein in einer zweiten Reihe. */
  .tools__grid--drei .tool{flex-basis:calc((100% - 40px)/3)}
  .tools__grid--drei .tool h3{margin:20px 24px 8px;font-size:22px}
  .tools__grid--drei .tool p{margin:0 24px 26px;font-size:15px;line-height:1.65}
}
@media (max-width:991px){
  .tools{padding:64px 0}
  .tool{flex-basis:calc((100% - 20px)/2)}
}
@media (max-width:640px){
  .tool{flex-basis:100%}
}