/* ============================================================
   VorsorgePlus | SE Gruppe
   Farben: offizielle SE-Palette. Gruen traegt, Grau ist das Problem.
   ============================================================ */

:root{
  /* Papier und Tinte */
  --paper:      #FFFFFF;
  --mist:       #F3F5F2;
  --mist-deep:  #E7EBE5;
  --ink:        #0B0E14;
  --ink-80:     #2B313D;
  --ink-60:     #545C6B;
  --ink-40:     #67707F;
  --line:       #E2E7EF;
  --line-soft:  #EFF2F7;

  /* SE Gruppe, offizielle Palette */
  --se-green:      #205F34;
  --se-green-deep: #153E22;
  --se-green-mid:  #3C8A54;
  --se-light:      #CFE797;
  --se-gray:       #86929E;

  /* Tawodo behaelt sein eigenes Spektrum, es ist eine eigene Marke */
  --sp-cyan:    #16C6F4;
  --sp-blue:    #3E7BF6;
  --sp-indigo:  #6B54F0;
  --sp-violet:  #9B3FE0;
  --sp-magenta: #EE3A97;
  --sp-orange:  #FF8A3C;

  --accent: var(--se-green);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --wrap:   1280px;
  --pad:    clamp(20px, 5vw, 64px);
  --rail:   128px;
  --r-md:   12px;
  --r-lg:   20px;
  --band-y: clamp(72px, 9vw, 136px);

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

:target, section[id]{ scroll-margin-top:78px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
a, button, summary, [role="tab"]{ touch-action:manipulation; }

.price__rows, .row__key, .screen__chip, .countdown .num, .stat__figure{
  font-variant-numeric:tabular-nums;
}

:where(a, button, summary, [tabindex]):focus-visible{
  outline:2px solid var(--se-green);
  outline-offset:3px;
  border-radius:3px;
}
.band--ink :where(a, button, summary, [tabindex]):focus-visible,
.band--green :where(a, button, summary, [tabindex]):focus-visible{
  outline-color:var(--se-light);
}
::selection{ background:var(--se-green); color:#fff; }

.skip{
  position:fixed; top:-70px; left:12px; z-index:1000;
  background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:10px;
  font-weight:600; text-decoration:none;
  transition:top .2s ease;
}
.skip:focus{ top:12px; }

.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:var(--se-green);
  transform:scaleX(0); transform-origin:0 50%;
}
@supports (animation-timeline: scroll()){
  .progress{ animation:grow linear; animation-timeline:scroll(); }
  @keyframes grow{ to{ transform:scaleX(1); } }
}

/* ---------- Typo-Rollen ---------- */
.d-xl,.d-l,.d-m,.d-s{
  font-family:var(--display);
  font-weight:700;
  font-stretch:112%;
  letter-spacing:-0.03em;
  line-height:0.98;
  margin:0;
  text-wrap:balance;
}
.d-xl{ font-size:clamp(2.1rem, 4.2vw, 3.5rem); letter-spacing:-0.04em; line-height:1.02; }
.d-l { font-size:clamp(2rem, 4.2vw, 3.5rem); }
.d-m { font-size:clamp(1.5rem, 2.5vw, 2.15rem); line-height:1.06; }
.d-s { font-size:clamp(1.15rem, 1.5vw, 1.4rem); line-height:1.15; letter-spacing:-0.02em; }
/* Lange Komposita wie "Personalinstrumente" sprengen sonst auf sehr
   schmalen Geraeten die Zeile und ziehen die Dokumentbreite auf. */
.d-xl,.d-l,.d-m,.d-s{ hyphens:auto; overflow-wrap:break-word; }

.lead{
  font-size:clamp(1.05rem, 1.35vw, 1.28rem);
  line-height:1.55;
  color:var(--ink-80);
  max-width:46ch;
  margin:0;
}
.label{
  font-family:var(--mono);
  font-size:0.715rem;
  font-weight:500;
  letter-spacing:0.145em;
  text-transform:uppercase;
  color:var(--ink-40);
  margin:0;
}
.muted{ color:var(--ink-60); }

/* ---------- Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}
.band{ padding-block:var(--band-y); position:relative; }
.band--mist{ background:var(--mist); }
.band--ink{ background:var(--ink); color:#fff; }
.band--green{ background:var(--se-green-deep); color:#fff; }
.band--tight{ padding-block:clamp(52px, 6vw, 88px); }

.band--ink .lead, .band--ink .muted{ color:#A8B0BE; }
.band--ink .label{ color:#6F7889; }
.band--green .lead, .band--green .muted{ color:rgba(255,255,255,.78); }
.band--green .label{ color:var(--se-light); }

.head{ margin-bottom:clamp(34px, 4.5vw, 64px); max-width:62ch; }
.head > * + *{ margin-top:18px; }
.head--rail{
  display:grid;
  grid-template-columns:var(--rail) minmax(0, 1fr);
  gap:clamp(18px, 3vw, 40px);
  align-items:start;
  max-width:none;
}
.head--rail > * + *{ margin-top:0; }
.head__rail{ padding-top:0.55em; }
.head__rail .label{ position:relative; padding-left:26px; }
.head__rail .label::before{
  content:""; position:absolute; left:0; top:0.52em;
  width:16px; height:2px; background:var(--accent);
}
.head__body > * + *{ margin-top:18px; }
@media (max-width:860px){
  .head--rail{ grid-template-columns:1fr; gap:14px; }
  .head__rail{ padding-top:0; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--body); font-weight:600; font-size:0.98rem;
  text-decoration:none; cursor:pointer;
  /* Ein Button, dessen Beschriftung umbricht, ist kaputt. Lieber kuerzer
     beschriften als zweizeilig werden lassen. */
  white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active{ transform:scale(.98); }
/* Primaerbutton: grasgruene Flaeche, dunkelgruene Schrift, Pfeil im Kreis.
   Beim Hover dreht sich das Verhaeltnis um. Der dunkle Rand haelt die
   Flaeche auch auf hellem Grund als Bedienelement erkennbar (WCAG 1.4.11). */
.btn--primary{
  background:var(--se-light); color:var(--se-green-deep);
  border-color:var(--se-green-deep);
  padding:7px 7px 7px 24px; gap:14px;
}
.btn--primary:hover{ background:var(--se-green-deep); color:var(--se-light); }
.btn--primary .btn__arrow{
  flex:none; width:32px; height:32px; border-radius:50%;
  background:var(--se-green-deep); color:var(--se-light);
  display:grid; place-items:center; line-height:1;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn--primary:hover .btn__arrow{ background:var(--se-light); color:var(--se-green-deep); }
/* Auf dunklen Flaechen wuerde der Button beim Hover mit dem Hintergrund
   verschmelzen, deshalb dort eine helle Kontur. */
.hero .btn--primary:hover,
.band--green .btn--primary:hover,
.band--ink .btn--primary:hover{ border-color:var(--se-light); }
.btn__tel{ width:16px; height:16px; flex:none; }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
/* Der Anrufen-Knopf steht neben dem grasgruenen Primaerknopf und traegt
   deshalb dieselbe Farbe als Kontur. */
.btn--anruf, .btn--kontur, .foot .btn--anruf{ border-color:var(--se-light); border-width:2px; color:var(--se-green-deep); }
.btn--anruf:hover, .btn--kontur:hover, .foot .btn--anruf:hover{ background:var(--se-light); border-color:var(--se-light); color:var(--se-green-deep); }
.btn--ghost:hover{ border-color:var(--ink); }
.band--green .btn--ghost, .band--ink .btn--ghost{ background:transparent; border-color:rgba(255,255,255,.34); color:#fff; }
.band--green .btn--ghost:hover, .band--ink .btn--ghost:hover{ border-color:#fff; }
.btn__arrow{ transition:transform .18s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(11,14,20,.5); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:78px; }
/* Die Kopfleiste bleibt bei 78px, darauf rechnet die Hero-Mindesthoehe.
   52px Logo passen mit Luft hinein, auf schmalen Geraeten etwas kleiner. */
.nav__brand{ display:flex; align-items:center; height:52px; flex:none; }
@media (max-width:520px){ .nav__brand{ height:42px; } }
.nav__brand img{ height:100%; width:auto; }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{
  font-size:0.95rem; font-weight:500; text-decoration:none;
  color:var(--ink-60); position:relative; padding:4px 0;
  /* Ein Navigationspunkt, der auf zwei Zeilen bricht, macht die Leiste
     zweizeilig. Lieber frueher auf das Menue umschalten. */
  white-space:nowrap;
  transition:color .18s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a[aria-current]{ color:var(--ink); }
.nav__links a[aria-current]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--se-green);
}
/* ---------- Aufklappmenues in der Navigation ----------
   Bewusst klickgesteuert statt auf Hover: auf Touchgeraeten gibt es
   kein Hover, ein reines Hover-Menue waere dort nicht bedienbar. */
.nav__gruppe{ position:relative; }
.nav__auf{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:4px 0;
  font-family:var(--body); font-size:0.95rem; font-weight:500;
  color:var(--ink-60); white-space:nowrap;
  transition:color .18s ease;
}
.nav__auf:hover{ color:var(--ink); }
.nav__auf[aria-expanded="true"]{ color:var(--ink); }
.nav__pfeil{ width:14px; height:14px; flex:none; transition:transform .2s ease; }
.nav__auf[aria-expanded="true"] .nav__pfeil{ transform:rotate(180deg); }

.nav__menu{
  position:absolute; top:calc(100% + 14px); left:-18px; z-index:10;
  min-width:290px; padding:10px;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:0 24px 54px -18px rgba(11,14,20,.34), 0 0 0 1px rgba(11,14,20,.07);
  display:flex; flex-direction:column; gap:2px;
}
.nav__menu[hidden]{ display:none; }
.nav__menu--breit{ min-width:330px; }
@media (prefers-reduced-motion: no-preference){
  .nav__menu{ animation:nav-auf .18s cubic-bezier(.16,1,.3,1); }
  @keyframes nav-auf{ from{ opacity:0; transform:translateY(-6px); } }
}
.nav__links .nav__menu a{
  display:block; padding:10px 12px; border-radius:10px;
  text-decoration:none; transition:background .16s ease;
}
.nav__links .nav__menu a:hover{ background:var(--mist); }
.nav__menu b{ display:block; font-size:0.92rem; font-weight:600; color:var(--ink); }
.nav__menu span{ display:block; margin-top:2px; font-size:0.8rem; color:var(--ink-60); line-height:1.4; }
.nav__links .nav__menu a::after{ content:none; }

.nav__burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav__burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform .25s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1060px){
  .nav__links{
    position:fixed; inset:78px 0 0 0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0;
    padding:16px var(--pad) 40px; overflow-y:auto;
    /* Einblenden statt von rechts hereinschieben: ein Element, das seitlich
       neben dem Viewport parkt, zieht die Dokumentbreite auf und verlaesst
       sich darauf, dass overflow-x es klippt. visibility haelt es zugleich
       aus der Tab-Reihenfolge heraus. */
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  .nav__links.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav__links > a{ width:100%; padding:16px 0; font-size:1.15rem; border-bottom:1px solid var(--line-soft); }
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }

  /* Im Menue klappen die Gruppen inline auf, nichts schwebt */
  .nav__gruppe{ width:100%; border-bottom:1px solid var(--line-soft); }
  .nav__auf{
    width:100%; justify-content:space-between;
    padding:16px 0; font-size:1.15rem; min-height:44px;
  }
  .nav__menu{
    position:static; min-width:0; padding:0 0 12px;
    box-shadow:none; border-radius:0; background:none; animation:none;
  }
  .nav__links .nav__menu a{ padding:12px 14px; background:var(--mist); }
  .nav__links .nav__menu a + a{ margin-top:6px; }
  .nav__menu b{ font-size:1rem; }
}

/* ---------- Hero: Video ueber die volle Flaeche, Text darauf ---------- */
.hero{
  position:relative;
  /* Volle Bildschirmhoehe abzueglich der Navigationsleiste, damit unter dem
     Hero nichts mehr hereinragt. dvh statt vh wegen der Adressleiste auf iOS.
     min-height, damit langer Inhalt die Sektion wachsen laesst statt zu klippen. */
  min-height:calc(100dvh - 78px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--se-green-deep);
  color:#fff;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg video, .hero__bg img{
  width:100%; height:100%; object-fit:cover;
  /* Objektposition leicht nach oben: das Gesicht sitzt im oberen Bilddrittel */
  object-position:50% 32%;
}
/* Zwei Ebenen: eine flaechige Abdunklung fuer den Gesamtkontrast, darueber
   ein Verlauf von unten, damit die Schrift im Textbereich sicher traegt. */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,20,14,.34) 0%, rgba(11,20,14,.12) 34%, rgba(9,26,15,.74) 78%, rgba(9,26,15,.9) 100%),
    linear-gradient(90deg, rgba(9,26,15,.66) 0%, rgba(9,26,15,.22) 52%, rgba(9,26,15,0) 82%);
}
.hero__inner{
  position:relative; z-index:1;
  width:100%;
  padding-block:clamp(48px, 7vw, 92px);
}
.hero__copy{ max-width:min(60ch, 100%); }
.hero__copy > * + *{ margin-top:22px; }
.hero .label{ color:var(--se-light); }
.hero h1{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.28); }
.hero h1 em{ font-style:normal; color:var(--se-light); }
.hero .lead{ color:rgba(255,255,255,.9); max-width:52ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero .btn--ghost{ background:transparent; border-color:rgba(255,255,255,.42); color:#fff; }
.hero .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* Rebranding-Hinweis als flache Notiz auf dem Video, nicht als weisse Karte */
.rebrand{
  margin-top:38px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.24);
  max-width:44ch;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
}
.rebrand p{ margin:0; font-size:0.88rem; color:rgba(255,255,255,.74); line-height:1.5; }
.rebrand a{ font-size:0.88rem; font-weight:600; color:var(--se-light); white-space:nowrap; }

@media (max-width:640px){
  .hero__inner{ padding-block:clamp(40px, 12vw, 72px) 40px; }
  .hero__bg video, .hero__bg img{ object-position:50% 26%; }
}

/* ---------- Messe / Countdown ---------- */
.messe{ position:relative; overflow:hidden; }
.messe__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Das Bild traegt die Stimmung, das Gruen traegt die Marke. Deshalb stark
     abgedunkelt und entsaettigt, sonst kippt die Sektion ins Bunte. */
  opacity:.2; filter:saturate(.7);
}
.messe .wrap{ position:relative; z-index:1; }
.messe__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px; }
.messe__text{ max-width:560px; }
.messe__text > * + *{ margin-top:14px; }
.messe__text a{ color:var(--se-light); }
.countdown{ display:flex; gap:12px; }
.countdown .unit{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); padding:12px 14px; min-width:72px; text-align:center;
}
.countdown .num{ font-family:var(--display); font-weight:700; font-size:1.75rem; line-height:1.1; }
.countdown .unit-label{ font-family:var(--mono); font-size:0.62rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:4px; }

/* ---------- Papierkram: das Problem ---------- */
.paperwork__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 60px); align-items:center;
  margin-bottom:clamp(34px, 4.5vw, 64px);
}
.paperwork__top .head{ margin-bottom:0; max-width:none; }
.paperwork__bild{ margin:0; }
.paperwork__bild img{
  width:100%; border-radius:var(--r-lg);
  aspect-ratio:3 / 2; object-fit:cover;
}
@media (max-width:880px){
  .paperwork__top{ grid-template-columns:1fr; gap:24px; }
  .paperwork__bild{ order:-1; }
  .paperwork__bild img{ aspect-ratio:16 / 9; }
}

.paperwork__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.paperwork__list li{
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
  gap:clamp(18px, 3vw, 40px);
  padding-block:clamp(20px, 2.6vw, 30px);
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.paperwork__where{
  font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-40);
}
.paperwork__what{
  font-family:var(--display); font-weight:600; font-stretch:108%;
  font-size:clamp(1.15rem, 2.1vw, 1.75rem);
  letter-spacing:-0.025em; line-height:1.18; margin:0;
}
@media (max-width:860px){ .paperwork__list li{ grid-template-columns:1fr; gap:6px; } }

.pull{
  margin:clamp(40px, 5vw, 64px) 0 0;
  padding-left:clamp(20px, 3vw, 32px);
  border-left:3px solid var(--accent);
  max-width:62ch;
}
.pull p{
  font-family:var(--display); font-weight:500; font-stretch:106%;
  font-size:clamp(1.2rem, 2vw, 1.6rem); line-height:1.3;
  letter-spacing:-0.02em; margin:0;
}
.pull cite{
  display:block; margin-top:12px; font-style:normal;
  font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-40);
}
/* Zitat mit Portraet */
.stimme{
  margin:clamp(40px, 5vw, 68px) 0 0;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px, 3vw, 34px); align-items:center;
  max-width:74ch;
}
.stimme__foto{
  /* Das Portraet liegt bereits als 4:5-Ausschnitt vor, deshalb kein Beschnitt */
  width:clamp(140px, 18vw, 220px); height:auto; aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--r-md);
}
.stimme__text{ border-left:3px solid var(--se-green); padding-left:clamp(18px, 2.4vw, 28px); }
.stimme blockquote{
  margin:0;
  font-family:var(--display); font-weight:500; font-stretch:106%;
  font-size:clamp(1.2rem, 2.1vw, 1.7rem); line-height:1.28; letter-spacing:-0.022em;
}
/* Name, Funktion und Haus stehen untereinander, nicht in einer Zeile */
.stimme figcaption{ margin-top:16px; display:flex; flex-direction:column; gap:3px; }
.stimme figcaption b{ font-size:0.95rem; }
.stimme figcaption span{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-40);
}
@media (max-width:600px){
  .stimme{ grid-template-columns:1fr; gap:18px; }
  .stimme__foto{ width:150px; }
}

.band--green .pull cite{ color:rgba(255,255,255,.55); }
.band--green .pull{ border-left-color:var(--se-light); }
.band--green .paperwork__where{ color:var(--se-light); }
.band--green .paperwork__list{ border-top-color:rgba(255,255,255,.16); }
.band--green .paperwork__list li{ border-bottom-color:rgba(255,255,255,.16); }
.band--green .paperwork__bild img{ filter:none; }

/* ---------- Zahlen ---------- */
.stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 56px); }
@media (max-width:760px){ .stats{ grid-template-columns:1fr; gap:32px; } }
/* Ueber uns: der Tower traegt die Flaeche, die Zahlen liegen darauf */
/* Beschnitt per clip-path, nicht per overflow. overflow wuerde hier einen
   Scroll-Container aufmachen, und darauf bezoege sich view() bei den Zahlen. */
.ueber{
  position:relative; clip-path:inset(0);
  min-height:clamp(520px, 72vh, 760px);
  display:flex; align-items:flex-end;
  padding-block:clamp(48px, 7vw, 88px);
}
.ueber__bg{
  position:absolute; inset:0; width:100%; height:100%;
  /* Oben bündig: der Turm samt Dachkante bleibt vollständig sichtbar,
     beschnitten wird nur der Vordergrund unten. */
  object-fit:cover; object-position:50% 0%;
}
/* Abdunklung ueber der gesamten Sektionsflaeche, nach unten dichter,
   damit die Zahlenkarten sicher tragen. */
.ueber::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,26,15,.6) 0%, rgba(9,26,15,.48) 38%, rgba(9,26,15,.88) 100%);
}
.ueber__inner{ position:relative; z-index:1; width:100%; }
@media (max-width:760px){ .ueber{ min-height:auto; } }

.stat{
  border:1px solid rgba(207,231,151,.34);
  border-radius:var(--r-lg);
  padding:clamp(22px, 2.6vw, 32px);
}
.stat__figure{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:clamp(2.4rem, 5vw, 3.6rem); line-height:1; letter-spacing:-0.035em;
  color:var(--se-light);
}
.stat__label{ margin:12px 0 0; color:rgba(255,255,255,.8); font-size:0.96rem; }

/* ---------- Herausforderungen ---------- */
.challenge{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(30px, 4.5vw, 70px); align-items:start; }
@media (max-width:900px){ .challenge{ grid-template-columns:1fr; gap:34px; } }
.challenge__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.challenge__list li{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:20px;
  padding-block:clamp(20px, 2.4vw, 28px); border-bottom:1px solid var(--line);
}
.challenge__num{ font-family:var(--mono); font-size:0.78rem; color:var(--se-green); padding-top:4px; }
.challenge__bild{ margin:clamp(28px, 3.4vw, 42px) 0 0; }
.challenge__bild img{ width:100%; border-radius:var(--r-lg); aspect-ratio:3/2; object-fit:cover; }
.challenge__bild figcaption{
  margin-top:12px; font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.06em; color:var(--ink-60);
}
.challenge__list h3{ font-family:var(--display); font-weight:600; font-stretch:106%; font-size:1.14rem; letter-spacing:-0.02em; margin:0 0 6px; }
.challenge__list p{ margin:0; color:var(--ink-60); font-size:0.98rem; }

/* ---------- Perspektiven ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.tab{
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font-weight:600; font-size:0.94rem; color:var(--ink-60);
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.tab:hover{ color:var(--ink); border-color:var(--ink-40); }
.tab[aria-selected="true"]{ background:var(--se-green); border-color:var(--se-green); color:#fff; }

.perspective{
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(28px, 4vw, 60px); align-items:start;
}
.perspective[hidden]{ display:none; }
.shift{ list-style:none; margin:0; padding:0; }
.shift li{ padding-block:clamp(16px, 2vw, 24px); border-top:1px solid var(--line); }
.shift li:first-child{ border-top:0; padding-top:0; }
.shift__before, .shift__after{ display:flex; gap:12px; align-items:baseline; }
.shift__before{ color:var(--ink-40); }
.shift__after{ margin-top:8px; font-weight:500; }
.shift__mark{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em;
  flex:0 0 76px; padding-top:2px;
}
.shift__after .shift__mark{ color:var(--se-green); }
.shift p{ margin:0; }
.perspective__aside figure{ margin:0; }
.perspective__aside img{ width:100%; border-radius:var(--r-lg); aspect-ratio:3 / 2; object-fit:cover; }
.perspective__aside figcaption{
  margin-top:14px; font-family:var(--mono); font-size:0.72rem;
  letter-spacing:0.06em; color:var(--ink-40); line-height:1.5;
}
@media (max-width:900px){
  .perspective{ grid-template-columns:1fr; }
  .perspective__aside{ order:-1; }
  .shift__mark{ flex-basis:70px; }
}

/* ---------- Benefits als Klapper ---------- */
.benefits{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px, 4.5vw, 64px); align-items:start; }
@media (max-width:900px){ .benefits{ grid-template-columns:1fr; gap:30px; } }
.benefits__media{ position:sticky; top:100px; }
.benefits__media img{ width:100%; border-radius:var(--r-lg); aspect-ratio:4 / 5; object-fit:cover; }
.benefits__media figcaption{ margin-top:14px; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-40); line-height:1.5; }
@media (max-width:900px){ .benefits__media{ position:static; } .benefits__media img{ aspect-ratio:16 / 9; } }

.klapp{ border-top:1px solid var(--line); }
.klapp details{ border-bottom:1px solid var(--line); }
.klapp summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
  padding-block:20px;
}
.klapp summary::-webkit-details-marker{ display:none; }
.klapp__name{
  font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing:-0.022em; line-height:1.2;
}
.klapp__wert{ font-family:var(--mono); font-size:0.74rem; color:var(--se-green); display:block; margin-top:4px; letter-spacing:.04em; }
.klapp .x{ position:relative; width:22px; height:22px; flex:none; }
.klapp .x::before, .klapp .x::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--se-green); transform:translate(-50%,-50%);
  transition:opacity .2s ease, transform .2s ease;
}
.klapp .x::before{ width:12px; height:1.8px; }
.klapp .x::after{ width:1.8px; height:12px; }
.klapp details[open] .x::after{ opacity:0; transform:translate(-50%,-50%) rotate(90deg); }
.klapp__antwort{ padding-bottom:24px; color:var(--ink-60); max-width:60ch; }
.klapp__antwort p{ margin:0; }
.klapp__recht{ display:block; margin-top:10px; font-family:var(--mono); font-size:0.68rem; letter-spacing:.05em; color:var(--ink-40); }
/* Sieben Bausteine als Chips statt als Aufzaehlung mit Trennzeichen */
.mehr{ margin-top:clamp(30px, 3.6vw, 44px); }
.mehr__intro{ margin:0 0 16px; font-size:0.94rem; color:var(--ink-60); max-width:62ch; }
.mehr__liste{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mehr__liste li{
  font-size:0.88rem; font-weight:500;
  padding:9px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink-80);
}
/* Ebenfalls eine Kachel, nur zurueckhaltender als die konkreten Bausteine */
.mehr__liste .mehr__weitere{
  background:var(--mist); border-style:dashed; color:var(--ink-60);
}

/* Die zwei Seiten derselben Rechnung */
.wirkung{
  margin-top:clamp(40px, 5vw, 68px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 56px);
  padding-top:clamp(28px, 3vw, 40px); border-top:1px solid rgba(10,10,10,.14);
}
@media (max-width:760px){ .wirkung{ grid-template-columns:1fr; gap:28px; } }
.wirkung__wer{
  font-family:var(--body); font-size:0.95rem; font-weight:600;
  color:var(--se-green); margin:0 0 12px;
}
.wirkung__satz{
  font-family:var(--display); font-weight:500; font-stretch:106%;
  font-size:clamp(1.15rem, 1.9vw, 1.5rem); line-height:1.3; letter-spacing:-0.022em;
  margin:0;
}

/* ---------- Hebeleffekt ---------- */
.lever{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; position:relative; margin-top:clamp(40px, 5vw, 68px); }
.lever::before{ content:""; position:absolute; top:15px; left:6%; right:6%; height:2px; background:var(--mist-deep); }
@media (max-width:820px){ .lever{ grid-template-columns:1fr; gap:32px; } .lever::before{ display:none; } }
.lever__step{ padding-right:26px; position:relative; }
.lever__dot{
  width:32px; height:32px; border-radius:50%;
  background:var(--se-green); color:#fff;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:0.82rem; font-weight:500;
  position:relative; z-index:1; margin-bottom:20px;
}
.lever__step h3{ font-family:var(--display); font-weight:600; font-stretch:106%; font-size:1.12rem; letter-spacing:-0.02em; margin:0 0 10px; }
.lever__step p{ margin:0; color:var(--ink-60); font-size:0.96rem; }

/* ---------- Beispielrechnung ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.rechnung{ margin-top:clamp(48px, 6vw, 84px); }
.rechnung__kopf{ margin-bottom:24px; max-width:56ch; }
.rechnung__kopf .muted{ margin-top:10px; }
/* Breite Tabellen scrollen in ihrem eigenen Kasten, nie die Seite */
.rechnung__scroll{ overflow-x:auto; overscroll-behavior-x:contain; border-radius:var(--r-lg); border:1px solid var(--line); }
.rechnung__tab{
  width:100%; border-collapse:collapse;
  font-variant-numeric:tabular-nums; font-size:0.95rem;
  min-width:560px;
}
.rechnung__tab th, .rechnung__tab td{ padding:14px 18px; text-align:right; }
.rechnung__tab th[scope="row"]{ text-align:left; font-weight:500; color:var(--ink-80); }
.rechnung__tab thead th{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-40); font-weight:500;
  border-bottom:1px solid var(--line); background:var(--mist);
}
.rechnung__tab thead th:first-child{ text-align:left; }
.rechnung__tab tbody tr{ border-bottom:1px solid var(--line-soft); }
.rechnung__tab tbody tr:last-child{ border-bottom:0; }
.rechnung__tab .ist-gruppe th{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--se-green); background:var(--mist); padding-top:16px; padding-bottom:16px;
}
/* Die beiden Zeilen, um die es geht: verfuegbare Liquiditaet und der
   Beitrag, der daraus entsteht. Dazwischen steht das Pluszeichen. */
.rechnung__tab .ist-summe th[scope="row"]{ font-weight:600; color:var(--ink); }
.rechnung__tab .ist-summe td{ font-weight:600; }
.rechnung__tab .ist-summe{ background:color-mix(in srgb, var(--se-light) 12%, #fff); }
.rechnung__tab .ist-summe .is-optimum{ background:color-mix(in srgb, var(--se-light) 38%, #fff); }
.rechnung__tab .ist-plus td{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  color:var(--se-green); padding-top:10px; padding-bottom:10px;
}
/* Die Optimum-Spalte ist die Aussage der Tabelle, deshalb durchgehend betont */
.rechnung__tab .is-optimum{ background:color-mix(in srgb, var(--se-light) 26%, #fff); font-weight:600; }
.rechnung__tab thead .is-optimum{ color:var(--se-green-deep); }
.rechnung__fuss{
  margin:16px 0 0; font-size:0.84rem; color:var(--ink-60); max-width:74ch; line-height:1.55;
}
.rechnung__cta{
  margin-top:clamp(26px, 3vw, 38px);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px;
}
/* Der Button darf nie umbrechen, das Label ist bewusst lang */
.rechnung__cta .btn{ white-space:nowrap; }
@media (max-width:520px){
  .rechnung__cta{ gap:12px; }
  .rechnung__cta .btn--primary{ white-space:normal; width:100%; justify-content:space-between; }
}

/* ---------- Versorgungsordnung ---------- */
.vo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px, 4.5vw, 68px); align-items:start; }
@media (max-width:900px){ .vo{ grid-template-columns:1fr; gap:32px; } }
.vo__regelt{ list-style:none; margin:0; padding:0; }
.vo__regelt li{ padding-block:clamp(16px, 2vw, 22px); border-top:1px solid rgba(255,255,255,.16); }
.vo__regelt li:first-child{ border-top:0; padding-top:0; }
.vo__regelt h3{ font-family:var(--display); font-weight:600; font-stretch:106%; font-size:1.08rem; letter-spacing:-0.02em; margin:0 0 6px; }
.vo__regelt p{ margin:0; color:rgba(255,255,255,.74); font-size:0.96rem; }
.vo__regelt .para{ font-family:var(--mono); font-size:0.68rem; letter-spacing:.06em; color:var(--se-light); display:block; margin-top:6px; }

.vo__risk{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.vo__risk li{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.72);
}

/* Weisse Karte auf dem gruenen Band: das Angebot ist der Abschluss der
   Sektion und soll sich klar herausheben. */
.vo__angebot{
  margin-top:clamp(34px, 4vw, 52px);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3.4vw, 40px);
  background:#fff; color:var(--ink);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.vo__angebot .d-m{ max-width:22ch; }
.vo__angebot .d-m span{ color:var(--se-green); }
.vo__angebot p{ margin:10px 0 0; color:var(--ink-60); font-size:0.94rem; max-width:44ch; }

/* ---------- Expertenzentrum: vollflaechiges Bild mit Diagonalschnitt ----------
   Der Schnitt laeuft aufsteigend, also links tief und rechts hoch. */
.zentrum{
  position:relative; overflow:hidden;
  background:var(--se-green-deep); color:#fff;
  padding-bottom:clamp(120px, 14vw, 200px);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 92px), 0 100%);
}
@media (max-width:760px){
  .zentrum{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); padding-bottom:clamp(80px, 16vw, 130px); }
}
.zentrum__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:70% 30%;
}
/* Die Abdunklung liegt nur unter der Textspalte und ist ab 64% komplett weg,
   damit die Person rechts in ihrer Originalfarbe steht. */
.zentrum::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(9,26,15,.92) 0%, rgba(9,26,15,.88) 26%, rgba(9,26,15,.74) 42%, rgba(9,26,15,.32) 54%, rgba(9,26,15,0) 64%);
}
.zentrum > .wrap{ position:relative; z-index:1; }
.zentrum .lead{ color:rgba(255,255,255,.86); }

/* ---------- Verbandssponsoring ---------- */
/* Beschnitt per clip-path statt overflow:hidden. overflow wuerde hier einen
   Scroll-Container aufmachen, und darauf bezieht sich view() beim Einrollen. */
.vb{ position:relative; clip-path:inset(0); }
/* Die Bildmarke steht vollstaendig sichtbar oben rechts, damit sie sich beim
   Scrollen wie ein Rad um die eigene Achse drehen kann. Angeschnitten wuerde
   das nicht funktionieren. Seitlich darf sie nicht herausragen, sonst zieht
   sie die Dokumentbreite auf. */
.vb__mark{
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(28px, 4vw, 64px); right:clamp(16px, 3.5vw, 56px);
  width:clamp(170px, 22vw, 300px); height:auto;
}
@media (max-width:900px){ .vb__mark{ display:none; } }
.vb > .wrap{ position:relative; z-index:1; }
.vb__nutzen{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px, 2.4vw, 28px);
}
@media (max-width:760px){ .vb__nutzen{ grid-template-columns:1fr; } }
.vb__seite{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg);
  padding:clamp(24px, 3vw, 34px);
}
.vb__seite h3{
  margin:0 0 16px;
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(1.1rem, 1.7vw, 1.34rem); letter-spacing:-0.022em;
  color:var(--se-light);
}
.vb__seite ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.vb__seite li{ position:relative; padding-left:22px; line-height:1.5; }
.vb__seite li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%; background:var(--se-light);
}
.vb__cta{ margin-top:clamp(28px, 3.4vw, 40px); display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }

/* Zitat auf gruenem Grund: Kontur und Rollenzeile in Hellgruen statt Grau. */
.band--green .stimme__text{ border-left-color:var(--se-light); }
.band--green .stimme figcaption span{ color:rgba(255,255,255,.66); }

/* ---------- 3D-Einrollen beim Scrollen ----------
   Laeuft ueber die Scroll-Timeline des Browsers, ohne Scroll-Listener.
   Ohne Unterstuetzung greift gar keine Animation, dann steht alles direkt
   in seiner Endposition. */
/* Die Bildmarke dreht sich um die eigene Achse, wie ein Rad das vorbeirollt,
   und kommt am Ende in ihrer normalen Lage zum Stehen. */
@keyframes rollt-ein{
  from{ transform:rotate(-330deg) scale(.84); }
  to  { transform:rotate(0deg) scale(1); }
}
@keyframes kippt-ein{
  from{ transform:perspective(1200px) rotateX(26deg) translateY(46px) scale(.94); opacity:0; }
  to  { transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1); opacity:1; }
}
/* Die Schichten schieben sich von links uebereinander. */
@keyframes schiebt-ein{
  from{ transform:perspective(1200px) translateX(-64px) rotateY(10deg); opacity:0; }
  to  { transform:perspective(1200px) translateX(0) rotateY(0deg); opacity:1; }
}
/* Die Zahlen wachsen aus der Flaeche heraus. */
@keyframes waechst-auf{
  from{ transform:scale(.72) translateY(20px); opacity:0; }
  to  { transform:scale(1) translateY(0); opacity:1; }
}
/* Das Bild wird von oben nach unten aufgezogen. */
@keyframes zieht-auf{
  from{ clip-path:inset(0 0 84% 0); transform:scale(1.07); }
  to  { clip-path:inset(0 0 0 0); transform:scale(1); }
}
/* Die Karte richtet sich aus der Liegeposition auf. */
@keyframes richtet-auf{
  from{ transform:perspective(1100px) rotateX(36deg) translateY(34px); opacity:0; }
  to  { transform:perspective(1100px) rotateX(0deg) translateY(0); opacity:1; }
}
/* Das Handy schwenkt zum Betrachter. */
@keyframes schwenkt-ein{
  from{ transform:perspective(1400px) rotateY(-28deg) translateX(34px); opacity:.25; }
  to  { transform:perspective(1400px) rotateY(0deg) translateX(0); opacity:1; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Alle Bewegungen enden bei "contain 0%", also genau in dem Moment, in dem
       das Element vollstaendig im Bild steht. Nichts bewegt sich also noch,
       waehrend man es schon ganz sieht. Fuer Elemente, die hoeher sind als das
       Fenster, greift derselbe Punkt, sobald sie das Fenster ausfuellen.
       Gestaffelt wird ueber den Startpunkt, das Ziel bleibt fuer alle gleich. */
    .rollin{ animation:rollt-ein linear both; animation-timeline:view(); animation-range:entry 0% contain 0%; }
    .kippt{
      transform-origin:50% 100%;
      animation:kippt-ein linear both; animation-timeline:view(); animation-range:entry 0% contain 0%;
    }
    .vb__nutzen .kippt:nth-child(2){ animation-range:entry 16% contain 0%; }
    .pakete .kippt:nth-child(2){ animation-range:entry 14% contain 0%; }
    .pakete .kippt:nth-child(3){ animation-range:entry 26% contain 0%; }

    .schiebt{ animation:schiebt-ein linear both; animation-timeline:view(); animation-range:entry 0% contain 0%; }
    .schichten .schiebt:nth-child(2){ animation-range:entry 14% contain 0%; }
    .schichten .schiebt:nth-child(3){ animation-range:entry 26% contain 0%; }

    /* Die Zahlenkacheln sind fertig, bevor sie ganz im Bild stehen. Sie sitzen
       am unteren Rand einer hohen Bildsektion, dort wirkt das spaetere Ziel
       der uebrigen Bewegungen zu traege. */
    .waechst{ animation:waechst-auf linear both; animation-timeline:view(); animation-range:entry -60px entry 34%; }
    .stats .waechst:nth-child(2){ animation-range:entry -40px entry 46%; }
    .stats .waechst:nth-child(3){ animation-range:entry -20px entry 58%; }

    .zieht{ animation:zieht-auf linear both; animation-timeline:view(); animation-range:entry 0% contain 0%; }
    .richtet{ transform-origin:50% 100%; animation:richtet-auf linear both; animation-timeline:view(); animation-range:entry 0% contain 0%; }
    .schwenkt{ transform-origin:75% 50%; animation:schwenkt-ein linear both; animation-timeline:view(); animation-range:entry 0% contain 0%; }
  }
}

/* ---------- Saeulen des Expertenzentrums ---------- */
.saeulen{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px, 4vw, 56px); align-items:start; }
@media (max-width:900px){ .saeulen{ grid-template-columns:1fr; gap:24px; } }
.saeulen__list{ display:flex; flex-direction:column; gap:4px; }
/* Die Tabs liegen auf dem Bild, deshalb eigene Flaeche statt nur Textfarbe */
.saeule{
  text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(9,26,15,.42);
  padding:16px 18px; border-radius:var(--r-md);
  font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:clamp(1.02rem, 1.5vw, 1.22rem); letter-spacing:-0.02em;
  color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.saeule:hover{ background:rgba(9,26,15,.62); border-color:rgba(255,255,255,.5); }
.saeule[aria-selected="true"]{
  background:var(--se-light); color:var(--se-green-deep); border-color:var(--se-light);
}
.saeule .arrow{ color:currentColor; opacity:0; transition:opacity .2s ease; }
.saeule[aria-selected="true"] .arrow{ opacity:1; }

/* Halbtransparent, damit das Bild dahinter durchscheint. Die Weichzeichnung
   haelt den Text trotzdem ruhig lesbar. */
.saeulen__panels{
  background:rgba(9,26,15,.84);
  backdrop-filter:blur(14px) saturate(.9);
  -webkit-backdrop-filter:blur(14px) saturate(.9);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:var(--r-lg); padding:clamp(26px, 3.6vw, 44px);
}
/* Ohne Weichzeichnung deckender, sonst wird der Text unruhig */
@supports not (backdrop-filter: blur(1px)){
  .saeulen__panels{ background:rgba(9,26,15,.86); }
}
@media (prefers-reduced-transparency: reduce){
  .saeulen__panels{ background:rgba(9,26,15,.94); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.saeulen__panels > div[hidden]{ display:none; }
.saeulen__panels h3{ font-family:var(--display); font-weight:700; font-stretch:108%; font-size:clamp(1.25rem, 2vw, 1.6rem); letter-spacing:-0.028em; margin:0 0 14px; }
.saeulen__panels > div > p{ margin:0 0 20px; color:rgba(255,255,255,.88); max-width:56ch; }
.saeulen__panels ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:9px; }
.saeulen__panels li{ display:flex; gap:12px; color:rgba(255,255,255,.88); font-size:0.96rem; }
.saeulen__panels li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--se-light); margin-top:.62em; }
.ergebnis{
  display:block; padding:16px 18px; border-radius:var(--r-md);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
  font-size:0.94rem; color:rgba(255,255,255,.92);
}
.ergebnis b{ color:var(--se-light); }
.saeulen__dl{ margin-top:20px; font-size:0.9rem; }
.saeulen__dl a{ color:var(--se-light); font-weight:600; }

/* ---------- Vorsorgeportal ---------- */
.assist{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px, 4.5vw, 64px); align-items:center; }
@media (max-width:900px){ .assist{ grid-template-columns:1fr; gap:32px; } }
.assist__media{ position:relative; }
.assist__media > img{ width:100%; border-radius:var(--r-lg); aspect-ratio:4 / 5; object-fit:cover; }
.portal__themen{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.portal__themen li{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  background:var(--se-light); color:var(--se-green-deep);
}
.assist__rows{ list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line); }
.assist__rows li{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:16px; padding-block:18px; border-bottom:1px solid var(--line); }
.assist__rows .k{ font-family:var(--mono); font-size:0.74rem; color:var(--se-green); padding-top:3px; }
.assist__rows h3{ font-family:var(--display); font-weight:600; font-stretch:106%; font-size:1.04rem; letter-spacing:-0.02em; margin:0 0 5px; }
.assist__rows p{ margin:0; color:var(--ink-60); font-size:0.94rem; }

/* ---------- Tawodo: Werkzeuge und Geraet ---------- */
.app{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px, 4.5vw, 68px); align-items:center; }
@media (max-width:900px){ .app{ grid-template-columns:1fr; gap:40px; } }
.tools{ list-style:none; margin:0; padding:0; }
.tools li{ border-top:1px solid var(--line); }
.tools li:last-child{ border-bottom:1px solid var(--line); }
.tool{
  width:100%; display:grid; grid-template-columns:30px minmax(0,1fr); gap:16px;
  align-items:start; text-align:left; padding:20px 0;
  background:none; border:0; cursor:pointer;
}
.tool__dot{
  width:12px; height:12px; border-radius:4px; background:var(--c);
  margin-top:6px; transition:transform .2s ease, box-shadow .2s ease;
}
.tool__name{
  font-family:var(--display); font-weight:600; font-stretch:108%;
  font-size:clamp(1.1rem, 1.8vw, 1.42rem); letter-spacing:-0.025em; line-height:1.2;
  color:var(--ink-40); transition:color .2s ease;
}
.tool__note{
  margin:0; max-height:0; opacity:0; overflow:hidden;
  color:var(--ink-60); font-size:0.96rem;
  transition:max-height .32s ease, opacity .24s ease, margin-top .32s ease;
}
.tool[aria-selected="true"] .tool__name{ color:var(--ink); }
.tool[aria-selected="true"] .tool__dot{ transform:scale(1.5); box-shadow:0 0 0 6px color-mix(in srgb, var(--c) 16%, transparent); }
.tool[aria-selected="true"] .tool__note{ max-height:10em; opacity:1; margin-top:8px; }
.tool:hover .tool__name{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){ .tool__note, .tool__dot{ transition:none; } }

.device{
  position:relative; width:min(330px, 78vw); margin-inline:auto;
  aspect-ratio:9 / 18.5; background:var(--ink);
  border-radius:42px; padding:11px;
  box-shadow:0 30px 70px -20px rgba(11,14,20,.42), 0 0 0 1px rgba(11,14,20,.08);
}
.device__screen{ position:relative; height:100%; border-radius:32px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.device__notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:92px; height:22px; background:var(--ink); border-radius:999px; z-index:5; }
.screen{ position:absolute; inset:0; padding:44px 18px 18px; display:flex; flex-direction:column; gap:10px; background:#fff; }
.screen[hidden]{ display:none; }
.screen__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.screen__title{ font-family:var(--display); font-weight:700; font-stretch:108%; font-size:1.02rem; letter-spacing:-0.02em; }
.screen__chip{
  font-family:var(--mono); font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; color:#fff;
  /* Die Werkzeugfarben sind teils sehr hell (Cyan, Orange). Weisser Text
     darauf faellt unter AA, deshalb die Flaeche pro Farbe abdunkeln. */
  background:color-mix(in srgb, var(--c) 62%, #0B0E14);
}
.row{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; background:var(--mist); font-size:0.78rem; line-height:1.35; }
.row--flat{ background:transparent; border:1px solid var(--line-soft); }
.row--accent{ background:color-mix(in srgb, var(--c) 10%, #fff); }
.row strong{ font-weight:600; display:block; }
.row small{ color:var(--ink-60); font-size:0.68rem; }
.row__key{ font-family:var(--mono); font-size:0.62rem; color:var(--ink-40); flex:0 0 auto; letter-spacing:.04em; }
.row__pill{ margin-left:auto; flex:0 0 auto; font-family:var(--mono); font-size:0.6rem; padding:3px 7px; border-radius:999px; background:color-mix(in srgb, var(--c) 62%, #0B0E14); color:#fff; }
.row__pill--quiet{ background:var(--mist-deep); color:var(--ink-60); }
.row__av{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--mist-deep); display:grid; place-items:center; font-family:var(--mono); font-size:0.6rem; }
.bubble{
  max-width:82%; padding:9px 11px; border-radius:14px 14px 14px 4px;
  background:var(--mist); font-size:0.74rem; line-height:1.35;
}
.bubble--me{ align-self:flex-end; border-radius:14px 14px 4px 14px; background:color-mix(in srgb, var(--c) 88%, #000); color:#fff; }
.bubble em{ display:block; margin-top:4px; font-style:normal; font-size:0.62rem; color:var(--ink-40); }
.bubble--me em{ color:rgba(255,255,255,.72); }
.screen__foot{ margin-top:auto; display:flex; gap:8px; justify-content:center; padding-top:8px; }
.screen__foot i{ width:26px; height:3px; border-radius:2px; background:var(--mist-deep); }
.screen__foot i.is-on{ background:var(--c); }

.tawodo__intro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px, 4vw, 60px); align-items:center; margin-bottom:clamp(40px, 5vw, 72px); }
@media (max-width:900px){ .tawodo__intro{ grid-template-columns:1fr; gap:28px; } }
.tawodo__intro img{ width:100%; border-radius:var(--r-lg); aspect-ratio:3 / 2; object-fit:cover; }
.tawodo__brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.tawodo__brand img{ width:34px; height:34px; border-radius:8px; aspect-ratio:auto; }
.tawodo__brand span{ font-family:var(--display); font-weight:700; font-stretch:108%; font-size:1.3rem; letter-spacing:-0.03em; }
.tawodo__links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
/* Der Demoportal-Knopf traegt das Tawodo-Spektrum, weil er in die fremde
   Marke fuehrt. Jeder Stop ist genau so weit abgedunkelt, dass weisse
   Schrift ueber den gesamten Verlauf AA erreicht (schwaechster Punkt 4,6). */
#tawodo .btn--primary{
  background:linear-gradient(96deg, #0E7F9C 0%, #3870E0 26%, #9B3FE0 52%, #D13385 76%, #B05F29 100%);
  color:#fff; border-color:transparent;
  padding:14px 24px; gap:10px;
}
#tawodo .btn--primary:hover{
  background:linear-gradient(96deg, #0B6A83 0%, #2F5FC0 26%, #8434BE 52%, #B22B71 76%, #955022 100%);
  border-color:transparent;
}
/* Auf dem Verlauf steht der Pfeil ohne Kreis, sonst wird es unruhig */
#tawodo .btn--primary .btn__arrow{
  width:auto; height:auto; background:none; color:#fff; border-radius:0;
}
#tawodo .btn--primary:hover .btn__arrow{ background:none; color:#fff; }

/* ---------- Integriertes System ---------- */
.system{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px, 5vw, 72px); align-items:center; }
@media (max-width:900px){ .system{ grid-template-columns:1fr; gap:40px; } }
/* Schichtenmodell: das Fundament unten, die Sichtbarkeit oben.
   Bewusst kein Venn-Diagramm, die drei Bausteine bauen aufeinander auf
   statt sich zu ueberschneiden. */
.schichten{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
  max-width:460px;
}
.schicht{
  border-radius:var(--r-lg);
  padding:clamp(18px, 2.4vw, 24px);
  display:flex; flex-direction:column; gap:6px;
}
.schicht__rolle{
  font-family:var(--mono); font-size:0.66rem;
  letter-spacing:0.12em; text-transform:uppercase;
}
.schicht__name{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(1.1rem, 1.9vw, 1.4rem); letter-spacing:-0.025em; line-height:1.15;
}
.schicht__was{ font-size:0.9rem; line-height:1.5; }

/* Von oben nach unten: hell zu dunkel, das Fundament traegt am meisten Gewicht */
.schicht--sicht{ background:var(--se-light); color:var(--se-green-deep); margin-inline:clamp(0px, 4vw, 44px) 0; }
.schicht--sicht .schicht__rolle{ color:rgba(21,62,34,.88); }
.schicht--sicht .schicht__was{ color:rgba(21,62,34,.78); }

.schicht--umsetzung{ background:var(--se-green); color:#fff; margin-inline:clamp(0px, 2vw, 22px) 0; }
.schicht--umsetzung .schicht__rolle{ color:var(--se-light); }
.schicht--umsetzung .schicht__was{ color:rgba(255,255,255,.82); }

.schicht--konzept{ background:var(--se-green-deep); color:#fff; }
.schicht--konzept .schicht__rolle{ color:var(--se-light); }
.schicht--konzept .schicht__was{ color:rgba(255,255,255,.82); }

@media (max-width:900px){ .schichten{ max-width:none; } .schicht{ margin-inline:0; } }
.system__points{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.system__points li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-60); }
.system__points li::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--se-green); margin-top:.6em; }
.system__bausteine{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.system__bausteine li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:baseline; }
.system__bausteine b{ font-family:var(--display); font-weight:700; font-stretch:106%; letter-spacing:-0.02em; }
.system__bausteine span{ color:var(--ink-60); font-size:0.95rem; }

/* ---------- Pakete ---------- */
.pakete{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px, 2vw, 24px); align-items:stretch;
}
@media (max-width:980px){ .pakete{ grid-template-columns:1fr; } }
.paket{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px, 2.8vw, 34px);
  background:#fff;
}
/* Das mittlere Paket ist der uebliche Weg, deshalb traegt es die Flaeche. */
.paket--hebt{ background:var(--se-green-deep); border-color:var(--se-green-deep); color:#fff; }
.paket__kopf{ position:relative; }
.paket__kopf h3{
  margin:0;
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:clamp(1.24rem, 2vw, 1.5rem); letter-spacing:-0.024em;
}
.paket--hebt .paket__kopf h3 span{ color:var(--se-light); }
.paket__marke{
  display:inline-block; margin-top:10px;
  background:var(--se-light); color:var(--se-green-deep);
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.paket__wofuer{ margin:10px 0 0; color:var(--ink-60); font-size:0.96rem; line-height:1.5; }
.paket--hebt .paket__wofuer{ color:rgba(255,255,255,.78); }
.paket__preis{ margin:clamp(20px, 2.4vw, 28px) 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.paket__zahl{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing:-0.03em; line-height:1;
}
.paket--hebt .paket__zahl{ color:var(--se-light); }
.paket__takt{ font-size:0.9rem; color:var(--ink-60); }
.paket--hebt .paket__takt{ color:rgba(255,255,255,.72); }
.paket__hinweis{ margin:10px 0 0; font-size:0.86rem; line-height:1.5; color:var(--ink-40); }
.paket--hebt .paket__hinweis{ color:rgba(255,255,255,.62); }
.paket__liste{
  list-style:none; margin:clamp(22px, 2.6vw, 30px) 0 0; padding:0;
  display:flex; flex-direction:column; gap:11px; flex:1;
}
.paket__liste li{ position:relative; padding-left:26px; font-size:0.96rem; line-height:1.5; }
/* Haken als reine Form, damit kein Icon-Zeichensatz noetig ist */
.paket__liste li::before{
  content:""; position:absolute; left:2px; top:.34em;
  width:6px; height:11px; border:solid var(--se-green);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.paket--hebt .paket__liste li::before{ border-color:var(--se-light); }
/* Alle drei Knoepfe gleich hoch. Der Primaerknopf traegt den Pfeilkreis und
   waere sonst niedriger als die beiden mit Kontur. */
.paket__cta{
  margin-top:clamp(24px, 2.8vw, 32px); width:100%;
  /* Feste Hoehe statt Innenabstand, sonst faellt der Primaerknopf mit seinem
     Pfeilkreis anders aus als die beiden mit Kontur. */
  min-height:56px; padding-block:0; justify-content:center;
}
.paket--hebt .paket__cta.btn--primary{ justify-content:space-between; padding-left:24px; }

/* ---------- Abschluss ---------- */
.close{ max-width:640px; }
.close > * + *{ margin-top:20px; }
.close__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.close__kontakt{ margin-top:34px; font-family:var(--mono); font-size:0.78rem; letter-spacing:.06em; color:rgba(255,255,255,.72); }
.close__kontakt a{ color:var(--se-light); }

/* ---------- Fusszeile ---------- */
.foot{ background:#fff; color:var(--ink-60); padding-block:clamp(48px, 6vw, 72px) 92px; border-top:1px solid var(--line); }
/* Logo traegt die linke Haelfte, rechts Kontakt und Social nebeneinander */
.foot__grid{ display:grid; grid-template-columns:1.5fr 1.1fr .9fr; gap:clamp(30px, 4vw, 60px); align-items:start; }
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; gap:36px; } .foot__marke{ grid-column:1 / -1; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }

.foot__logo{ height:clamp(48px, 6vw, 72px); width:auto; }
.foot__kopf{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:1.05rem; letter-spacing:-0.02em; color:var(--ink);
  margin:0 0 16px;
}
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot a{ text-decoration:none; font-size:0.92rem; color:var(--ink-60); transition:color .18s ease; }
.foot a:hover{ color:var(--se-green); }

.foot__mail{
  display:flex; align-items:center; gap:10px; margin:0;
  font-size:0.95rem; font-weight:600;
}
.foot__mail svg{ width:18px; height:18px; flex:none; color:var(--se-green); }
.foot__mail a{ font-size:0.95rem; font-weight:600; color:var(--ink); }
.foot__mail a:hover{ color:var(--se-green); }

.foot__ctas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
/* Muss .foot ul schlagen, sonst stehen die Symbole untereinander */
.foot ul.foot__social{ flex-direction:row; gap:12px; }
.foot__social a{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line); color:var(--ink-60);
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.foot__social a:hover{ color:var(--se-green); border-color:var(--se-green); background:var(--mist); }
.foot__social svg{ width:20px; height:20px; }

/* Copyright links, Rechtliches rechts, alles in einer Zeile */
.foot__bottom{
  margin-top:clamp(40px, 5vw, 60px); padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; align-items:baseline;
  font-size:0.8rem; color:var(--ink-60);
}
.foot__copy{ font-weight:600; color:var(--ink); }
.foot .foot__recht{
  flex-direction:row; flex-wrap:wrap; gap:10px 24px; margin:0;
}
.foot__recht a{ font-size:0.8rem; }
.foot__entwurf{ color:var(--ink-60); }

/* ---------- Mobile CTA-Leiste ---------- */
.mobile-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:#fff; border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
@media (max-width:720px){ .mobile-cta{ display:flex; } body{ padding-bottom:78px; } }
.mobile-cta a{ flex:1; text-align:center; padding:13px; border-radius:12px; font-weight:600; font-size:0.92rem; text-decoration:none; }
.mobile-cta .call{ background:var(--mist); color:var(--ink); }
.mobile-cta .book{ background:var(--se-green); color:#fff; }

/* ---------- Kontaktformular als Schublade ---------- */
.kontakt__griff{
  position:fixed; z-index:190;
  right:0; top:50%; transform:translateY(-50%);
  background:var(--se-green-deep); color:#fff;
  border:0; cursor:pointer;
  padding:20px 11px; border-radius:12px 0 0 12px;
  box-shadow:0 12px 30px -12px rgba(11,14,20,.5);
  transition:background .35s ease, color .35s ease, padding-right .2s ease;
}
/* Vor einer dunklen Sektion dreht sich die Farbe um. Der Wechsel beim Scrollen
   holt den Griff zusaetzlich ins Auge. Welche Sektion gerade dahinterliegt,
   meldet ein IntersectionObserver weiter unten. */
.kontakt__griff.auf-dunkel{ background:var(--se-light); color:var(--se-green-deep); }
.kontakt__griff span{
  /* Vertikale Schrift wie auf der bestehenden SE-Gruppe-Seite */
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-weight:600; font-size:0.92rem; letter-spacing:.02em;
}
.kontakt__griff:hover{ background:var(--se-green); color:#fff; padding-right:15px; }
.kontakt__griff.auf-dunkel:hover{ background:#fff; color:var(--se-green-deep); }
/* Bleibt auch auf schmalen Geraeten senkrecht mittig, damit er nicht mit
   Chat und CTA-Leiste am unteren Rand konkurriert. */

.kontakt__schleier{
  position:fixed; inset:0; z-index:210;
  background:rgba(9,20,13,.5);
}
.kontakt__schleier[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .kontakt__schleier{ animation:kf-schleier .2s ease; }
  @keyframes kf-schleier{ from{ opacity:0; } }
}

.kontakt__panel{
  position:fixed; z-index:220; top:0; right:0;
  width:min(480px, 100vw); height:100dvh;
  background:#fff; display:flex; flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(11,14,20,.45);
}
.kontakt__panel[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .kontakt__panel{ animation:kf-auf .26s cubic-bezier(.16,1,.3,1); }
  @keyframes kf-auf{ from{ transform:translateX(100%); } }
}

.kontakt__kopf{
  background:var(--se-green-deep); color:#fff; flex:none;
  padding:22px 20px 22px 26px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.kontakt__titel{
  margin:0; font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:1.32rem; letter-spacing:-0.025em;
}
.kontakt__sub{ margin:6px 0 0; font-size:0.84rem; color:rgba(255,255,255,.78); }
.kontakt__zu{ background:none; border:0; cursor:pointer; color:rgba(255,255,255,.78); padding:3px; flex:none; }
.kontakt__zu:hover{ color:#fff; }
.kontakt__zu svg{ width:21px; height:21px; display:block; }

.kontakt__koerper{ overflow-y:auto; overscroll-behavior:contain; padding:24px 26px 32px; }

.kf__zeile{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:420px){ .kf__zeile{ grid-template-columns:1fr; } }

.kf__feld{ margin-bottom:16px; }
.kf__feld label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; }
.kf__feld label span{ color:var(--se-green); }
.kf__feld input, .kf__feld textarea{
  width:100%; font:inherit; font-size:0.92rem;
  padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.kf__feld textarea{ resize:vertical; min-height:96px; }
.kf__feld input:focus-visible, .kf__feld textarea:focus-visible{
  outline:2px solid var(--se-green); outline-offset:1px; border-color:var(--se-green);
}
.kf__feld input[aria-invalid="true"]{ border-color:#8F2A19; }
.kf__fehler{ margin:6px 0 0; font-size:0.78rem; color:#8F2A19; }

.kf__gruppe{ border:0; margin:0 0 18px; padding:0; }
.kf__gruppe legend{ font-size:0.82rem; font-weight:600; padding:0; margin-bottom:9px; }
.kf__gruppe legend span{ color:var(--se-green); }
.kf__radios{ display:flex; flex-wrap:wrap; gap:8px; }
.kf__radios--zwei{ display:grid; grid-template-columns:1fr 1fr; }
.kf__radio, .kf__kachel{ cursor:pointer; }
.kf__radio input, .kf__kachel input{ position:absolute; opacity:0; width:0; height:0; }
.kf__radio span, .kf__kachel span{
  display:block; border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; font-size:0.88rem; text-align:center;
  transition:border-color .18s ease, background .18s ease;
}
.kf__radio:hover span, .kf__kachel:hover span{ border-color:var(--ink-40); }
.kf__radio input:checked + span, .kf__kachel input:checked + span{
  border-color:var(--se-green); background:color-mix(in srgb, var(--se-light) 34%, #fff); font-weight:600;
}
.kf__radio input:focus-visible + span, .kf__kachel input:focus-visible + span{
  outline:2px solid var(--se-green); outline-offset:2px;
}
.kf__kacheln{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:420px){ .kf__kacheln, .kf__radios--zwei{ grid-template-columns:1fr; } }
.kf__hilfe{ margin:9px 0 0; font-size:0.76rem; color:var(--ink-60); }

.kf__optin{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  margin:6px 0 0; font-size:0.82rem; line-height:1.5; color:var(--ink-60); cursor:pointer;
}
.kf__optin input{ width:18px; height:18px; margin-top:2px; accent-color:var(--se-green); }
.kf__optin span span{ color:var(--se-green); }

.kf__senden{ width:100%; justify-content:space-between; margin-top:20px; }
.kf__demo{ margin:14px 0 0; font-size:0.74rem; color:var(--ink-60); text-align:center; }

.kf__danke-text{
  margin:0 0 18px; background:var(--mist); border-radius:14px; padding:16px 18px;
  font-size:0.94rem; line-height:1.55; color:var(--ink-80);
}
.kf__danke .btn{ width:100%; justify-content:center; }

/* ---------- Chat mit Terminbuchung ---------- */
.chat{
  position:fixed; z-index:200;
  right:clamp(14px, 2.5vw, 28px);
  bottom:clamp(14px, 2.5vw, 28px);
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}
/* Der Knopf gehoert optisch nach unten, im Markup steht er aber vor dem
   Panel, damit die Tab-Reihenfolge stimmt. Deshalb per order sortieren. */
.chat__teaser{ order:1; }
.chat__panel{ order:2; }
.chat__knopf{ order:3; }
/* Auf schmalen Geraeten sitzt unten die CTA-Leiste (rund 94 px hoch),
   der Chat rueckt mit Abstand darueber statt sie zu beruehren. */
@media (max-width:720px){ .chat{ bottom:calc(108px + env(safe-area-inset-bottom)); } }

.chat__teaser{
  position:relative; max-width:262px;
  background:#fff; color:var(--ink);
  border-radius:16px 16px 4px 16px;
  padding:15px 34px 15px 16px;
  box-shadow:0 18px 44px -18px rgba(11,14,20,.45), 0 0 0 1px rgba(11,14,20,.07);
  font-size:0.88rem; line-height:1.45;
  /* Zeigt sich kurz nach dem Laden und zieht sich von selbst wieder zurueck */
  opacity:0; transform:translateY(8px); visibility:hidden;
  transition:opacity .32s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility 0s linear .32s;
}
.chat__teaser.is-da{
  opacity:1; transform:none; visibility:visible;
  transition:opacity .32s ease, transform .32s cubic-bezier(.16,1,.3,1), visibility 0s;
}
@media (prefers-reduced-motion: reduce){
  .chat__teaser{ transition:opacity .2s ease, visibility 0s linear .2s; transform:none; }
}
.chat__teaser p{ margin:0; }
.chat__teaser b{ display:inline-block; margin-bottom:4px; }
.chat__teaser-zu{
  position:absolute; top:6px; right:8px;
  background:none; border:0; cursor:pointer;
  font-size:1.1rem; line-height:1; color:var(--ink-40); padding:4px;
}
.chat__teaser-zu:hover{ color:var(--ink); }

.chat__knopf{
  width:58px; height:58px; border-radius:50%; flex:none;
  background:var(--se-green); color:#fff;
  border:0; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 14px 34px -10px rgba(21,62,34,.6);
  transition:background .2s ease, transform .2s ease;
}
.chat__knopf:hover{ background:var(--se-green-deep); transform:translateY(-2px); }
.chat__knopf svg{ width:27px; height:27px; grid-area:1/1; transition:opacity .18s ease, transform .18s ease; }
.chat__icon-zu{ opacity:0; transform:rotate(-45deg); }
.chat__knopf[aria-expanded="true"] .chat__icon-auf{ opacity:0; transform:rotate(45deg); }
.chat__knopf[aria-expanded="true"] .chat__icon-zu{ opacity:1; transform:rotate(0); }

.chat__panel{
  width:min(352px, calc(100vw - 28px));
  max-height:min(620px, calc(100dvh - 130px));
  background:#fff; border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 26px 60px -18px rgba(11,14,20,.5), 0 0 0 1px rgba(11,14,20,.08);
}
.chat__panel[hidden]{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .chat__panel{ animation:chat-auf .22s cubic-bezier(.16,1,.3,1); }
  @keyframes chat-auf{ from{ opacity:0; transform:translateY(10px) scale(.98); } }
}

.chat__kopf{
  background:var(--se-green-deep); color:#fff;
  padding:16px 16px 16px 20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.chat__titel{
  margin:0; font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:1rem; letter-spacing:-0.02em;
}
.chat__status{ margin:4px 0 0; font-size:0.76rem; color:rgba(255,255,255,.78); }
.chat__zu{ background:none; border:0; cursor:pointer; color:rgba(255,255,255,.78); padding:2px; flex:none; }
.chat__zu:hover{ color:#fff; }
.chat__zu svg{ width:19px; height:19px; display:block; }

.chat__koerper{ padding:18px 20px 20px; overflow-y:auto; overscroll-behavior:contain; }
.chat__blase{
  margin:0 0 18px; background:var(--mist);
  border-radius:14px 14px 14px 4px; padding:13px 15px;
  font-size:0.9rem; line-height:1.5; color:var(--ink-80);
}

.chat__slots{ border:0; margin:0 0 18px; padding:0; }
.chat__slots legend{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-60); padding:0; margin-bottom:10px;
}
.chat__slot{ display:block; margin-bottom:8px; cursor:pointer; }
.chat__slot input{ position:absolute; opacity:0; width:0; height:0; }
.chat__slot span{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:0.88rem;
  transition:border-color .18s ease, background .18s ease;
}
.chat__slot b{ font-weight:600; }
.chat__slot em{ font-style:normal; color:var(--ink-60); font-size:0.82rem; }
.chat__slot:hover span{ border-color:var(--ink-40); }
.chat__slot input:checked + span{
  border-color:var(--se-green); background:color-mix(in srgb, var(--se-light) 30%, #fff);
}
.chat__slot input:focus-visible + span{ outline:2px solid var(--se-green); outline-offset:2px; }

.chat__feld{ margin-bottom:14px; }
.chat__feld label{ display:block; font-size:0.8rem; font-weight:600; margin-bottom:5px; }
.chat__feld input{
  width:100%; font:inherit; font-size:0.9rem;
  padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.chat__feld input:focus-visible{ outline:2px solid var(--se-green); outline-offset:1px; border-color:var(--se-green); }
.chat__feld input[aria-invalid="true"]{ border-color:#8F2A19; }
.chat__fehler{ margin:6px 0 0; font-size:0.78rem; color:#8F2A19; }

.chat__senden{ width:100%; justify-content:space-between; margin-top:4px; }
.chat__hinweis{
  margin:12px 0 0; font-size:0.72rem; line-height:1.45; color:var(--ink-60); text-align:center;
}
.chat__danke .chat__blase{ margin-bottom:14px; }
.chat__nochmal{ width:100%; justify-content:center; }

/* ---------- Scroll-Reveal ---------- */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; transition:none; } }
html:not(.js) .rise{ opacity:1; transform:none; }


/* ---------- Terminmaske ----------
   Platzhalter im Terminfenster, solange kein echter Kalender hinterlegt ist.
   Aufbau wie bei den ueblichen Buchungsdiensten: links der Monat, rechts die
   Zeiten. Sobald in KALENDER eine Adresse steht, wird stattdessen der echte
   Kalender geladen und diese Maske nie gebaut. */
.tm{ height:100%; overflow-y:auto; overscroll-behavior:contain; background:#fff; }
.tm__meta{
  display:flex; flex-wrap:wrap; gap:6px 22px;
  padding:clamp(16px, 2.4vw, 24px) clamp(16px, 2.4vw, 24px) 0;
  font-size:0.88rem; color:var(--ink-60);
}
.tm__meta b{ color:var(--ink); font-weight:600; }
.tm__spalten{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px, 3vw, 34px);
  padding:clamp(16px, 2.4vw, 24px);
}
@media (max-width:680px){ .tm__spalten{ grid-template-columns:1fr; } }

.tm__monat{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tm__monat b{ font-family:var(--display); font-weight:700; font-stretch:106%; font-size:1.02rem; letter-spacing:-0.02em; }
.tm__pfeil{
  width:34px; height:34px; border-radius:50%; flex:none;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  cursor:pointer; display:grid; place-items:center; line-height:1;
}
.tm__pfeil:hover:not(:disabled){ background:var(--mist); border-color:var(--ink-40); }
.tm__pfeil:disabled{ opacity:.35; cursor:not-allowed; }

.tm__wochentage, .tm__tage{ display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.tm__wochentage span{
  text-align:center; font-family:var(--mono); font-size:0.66rem;
  letter-spacing:.08em; color:var(--ink-40); padding-bottom:6px;
}
.tm__tag{
  aspect-ratio:1; border:0; border-radius:50%; background:transparent;
  font:inherit; font-size:0.92rem; color:var(--ink);
  cursor:pointer; display:grid; place-items:center;
}
.tm__tag:hover:not(:disabled){ background:var(--mist); }
.tm__tag:disabled{ color:var(--ink-40); opacity:.45; cursor:default; }
.tm__tag[aria-pressed="true"]{ background:var(--se-green); color:#fff; font-weight:600; }
.tm__tag--leer{ visibility:hidden; }
.tm__zone{ margin:16px 0 0; font-size:0.8rem; color:var(--ink-40); }

.tm__slotkopf{
  margin:0 0 12px; font-family:var(--display); font-weight:600; font-stretch:106%;
  font-size:0.98rem; letter-spacing:-0.02em;
}
.tm__slotliste{ display:flex; flex-direction:column; gap:8px; }
.tm__slot{
  width:100%; padding:12px 16px; border-radius:var(--r-md);
  border:1px solid var(--se-green); background:#fff; color:var(--se-green-deep);
  font:inherit; font-weight:600; cursor:pointer; text-align:center;
  transition:background .16s ease, color .16s ease;
}
.tm__slot:hover{ background:var(--se-green); color:#fff; }
.tm__leer{ margin:0; font-size:0.9rem; color:var(--ink-60); }

.tm__form{ padding:0 clamp(16px, 2.4vw, 24px) clamp(16px, 2.4vw, 24px); max-width:520px; }
.tm__gewaehlt{
  background:var(--mist); border-radius:var(--r-md);
  padding:14px 16px; margin:0 0 18px; font-size:0.94rem;
}
.tm__gewaehlt b{ font-weight:600; }
.tm__feld{ margin-bottom:14px; }
.tm__feld label{ display:block; font-size:0.86rem; font-weight:600; margin-bottom:6px; }
.tm__feld input{
  width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-md); font:inherit; background:#fff; color:var(--ink);
}
.tm__feld input:focus-visible{ outline:2px solid var(--se-green); outline-offset:1px; border-color:var(--se-green); }
.tm__fehler{ margin:6px 0 0; font-size:0.82rem; color:#8f2525; }
.tm__aktionen{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.tm__hinweis{ margin:14px 0 0; font-size:0.78rem; line-height:1.5; color:var(--ink-40); }
.tm__danke{ padding:clamp(24px, 4vw, 40px); text-align:center; }
.tm__danke h3{
  font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:1.3rem; letter-spacing:-0.025em; margin:0 0 12px;
}
.tm__danke p{ margin:0 auto; max-width:44ch; color:var(--ink-60); line-height:1.6; }

/* ---------- Terminfenster ----------
   Die Microsoft-Bookings-Seite laeuft in einem Rahmen ueber der Seite, statt
   den Besucher in einen neuen Tab zu schicken. Der Rahmen wird erst beim
   Oeffnen geladen, vorher geht kein Aufruf an Microsoft raus. Markup und
   Verhalten stehen im Skript, hier steht nur das Aussehen. */
.termin{
  position:fixed; inset:0; z-index:230;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px, 3vw, 32px);
  background:rgba(9,20,13,.62);
}
.termin[hidden]{ display:none; }
.termin__box{
  position:relative; display:flex; flex-direction:column;
  width:min(920px, 100%); height:min(760px, 100%);
  background:#fff; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(11,14,20,.6);
}
.termin__kopf{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px clamp(16px, 2.4vw, 24px);
  border-bottom:1px solid var(--line); flex:none;
}
.termin__titel{
  margin:0; font-family:var(--display); font-weight:700; font-stretch:106%;
  font-size:1.06rem; letter-spacing:-0.02em;
}
.termin__zu{
  flex:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  cursor:pointer; display:grid; place-items:center; font-size:1.1rem; line-height:1;
  transition:background .18s ease, border-color .18s ease;
}
.termin__zu:hover{ background:var(--mist); border-color:var(--ink-40); }
.termin__buehne{ position:relative; flex:1; min-height:0; background:var(--mist); }
.termin__rahmen{ width:100%; height:100%; border:0; display:block; background:#fff; }
.termin__laedt{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:0.76rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-40); background:var(--mist);
}
.termin__laedt[hidden]{ display:none; }
.termin__fuss{
  flex:none; padding:12px clamp(16px, 2.4vw, 24px);
  border-top:1px solid var(--line);
  font-size:0.84rem; color:var(--ink-60);
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
}
.termin__fuss a{ color:var(--se-green-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:620px){
  .termin{ padding:0; }
  .termin__box{ width:100%; height:100%; border-radius:0; }
}
@media (prefers-reduced-motion: no-preference){
  .termin{ animation:termin-ein .18s ease; }
  @keyframes termin-ein{ from{ opacity:0; } to{ opacity:1; } }
}