/* ==========================================================================
   semco CARE · Design-System „Station" (Entwurf C, ausgebaut)
   Ersetzt care.css. Haltung:

   Wärme statt Weiß. Der Grund ist Sand, nicht Papier. Radien sind groß und
   weich, Menschen stehen in organischen Formen statt in Rechtecken, Grün ist
   ein ruhiger Begleiter — kein Signalgeber. Das Versprechen der Seite lautet
   „Mehr Zeit für Menschen"; das Design soll das selbst schon behaupten.

   Die Klassennamen sind bewusst dieselben wie im Vorgänger-System: dadurch
   bleiben Fokus-Ringe, ARIA-Rollen, Reveal-Attribute und die Motion-Bausteine
   unangetastet. Neu sind nur die Formen, die es vorher nicht gab (.shape,
   .flow/.row, .panel).
   ========================================================================== */

:root{
  /* ---- Farbe --------------------------------------------------------
     Auf Sand geprüft, nicht auf Weiß – Sand ist dunkler, alle Werte sind
     deshalb konservativer als sie auf #fff sein müssten. */
  --c-bg:#FBF8F2;             /* Sand, der Grund der Seite */
  --c-bg-2:#F3EFE6;           /* eine Stufe tiefer */
  --c-bg-3:#EAF1E0;           /* grünlich, für Marken-Flächen */
  --c-card:#FFFFFF;
  --c-ink:#1E2419;            /* 14,9:1 auf Sand */
  --c-body:#55604E;           /* 6,4:1 auf Sand */
  --c-muted:#6E7866;          /* 4,8:1 auf Sand */
  --c-line:#E7E1D4;
  --c-green:#3F7A16;          /* Akzent, 4,9:1 auf Sand */
  --c-green-dark:#1F3D0B;     /* dunkle Flächen und Buttons */
  --c-lime:#8FCA14;
  --c-lime-2:#A6DC2C;
  --c-on-dark:#D3E2C4;        /* Fließtext auf Dunkelgrün, 8,1:1 */
  --c-on-lime:#1F3D0B;
  --grad-lime:linear-gradient(135deg,#A6DC2C 0%,#8FCA14 55%,#76AF00 100%);
  --grad-soft:linear-gradient(165deg,#FDFBF6 0%,#F1EDE2 100%);
  --grad-leaf:linear-gradient(150deg,#DCEBC6,#EAF1E0);

  /* ---- Typografie --------------------------------------------------- */
  --f:"Baloo2",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --t-display:clamp(2.3rem,1.4rem + 4vw,3.65rem);
  --t-h2:clamp(1.7rem,1.15rem + 2.4vw,2.5rem);
  --t-h3:clamp(1.15rem,1.06rem + .4vw,1.35rem);
  --t-lead:clamp(1.08rem,1rem + .45vw,1.3rem);
  --t-body:1.09rem;
  --t-small:.9rem;
  --t-eyebrow:.8125rem;

  /* ---- Raster & Abstand --------------------------------------------- */
  --wrap:1180px;
  --gut:clamp(20px,4vw,44px);
  --s-tight:clamp(38px,5.5vw,54px);
  --s-base:clamp(50px,6.5vw,72px);
  --s-wide:clamp(60px,8vw,88px);

  /* ---- Form ----------------------------------------------------------
     Groß und weich. 28 px ist die kleinste Karte, 44 px die Panels. */
  --r-sm:14px; --r-md:22px; --r-lg:28px; --r-xl:44px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(31,61,11,.04), 0 12px 26px -18px rgba(31,61,11,.35);
  --sh-2:0 2px 6px rgba(31,61,11,.05), 0 26px 52px -28px rgba(31,61,11,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--f);font-size:var(--t-body);line-height:1.68;
  color:var(--c-body);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--c-green);outline-offset:3px;border-radius:8px}
.u-dark :focus-visible{outline-color:var(--c-lime)}

/* ==========================================================================
   Layout-Primitive
   ========================================================================== */
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative}
.sec_tight{padding-block:var(--s-tight)}
.sec_base {padding-block:var(--s-base)}
.sec_wide {padding-block:var(--s-wide)}
.sec_lead {padding-block:var(--s-wide) var(--s-tight)}
.sec_tail {padding-block:var(--s-tight) var(--s-wide)}
.bg-2{background:var(--c-bg-2)}
.bg-soft{background:var(--grad-soft)}

/* ==========================================================================
   Typografie
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;font-size:var(--t-eyebrow);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-green);
  background:var(--c-bg-3);border-radius:var(--r-pill);padding:.48em 1.05em;margin-bottom:1.1rem;
}
.h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.03em;font-weight:700;color:var(--c-ink)}
.h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.025em;font-weight:700;color:var(--c-ink)}
.h3{font-size:var(--t-h3);line-height:1.32;letter-spacing:-.012em;font-weight:700;color:var(--c-ink)}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--c-body)}
.small{font-size:var(--t-small);color:var(--c-muted)}
.measure{max-width:58ch}
.measure-s{max-width:44ch}
.center{text-align:center;margin-inline:auto}
strong,b{font-weight:700;color:var(--c-ink)}

/* ==========================================================================
   Buttons – Pillen, dunkelgrün gefüllt statt Lime. Auf Sand trägt Dunkelgrün
   die Hauptaktion ruhiger, Lime bleibt der Farbtupfer.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:inherit;font-size:1.06rem;font-weight:700;letter-spacing:-.01em;
  padding:1rem 1.65rem;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
}
.btn::after{content:"";width:.5em;height:.5em;border-right:2.4px solid currentColor;
  border-top:2.4px solid currentColor;transform:rotate(45deg);flex:none;margin-top:-.08em}
.btn_primary{background:var(--c-green-dark);color:#fff;box-shadow:0 12px 28px -16px rgba(31,61,11,.95)}
.btn_primary:hover{background:var(--c-green);transform:translateY(-2px);box-shadow:0 18px 38px -16px rgba(31,61,11,1)}
.btn_ghost{background:var(--c-card);color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-line)}
.btn_ghost:hover{box-shadow:inset 0 0 0 1.5px var(--c-green);transform:translateY(-2px)}
.btn_dark{background:var(--c-lime);color:var(--c-on-lime)}
.btn_dark:hover{background:#fff;transform:translateY(-2px)}
.btn_lg{font-size:1.12rem;padding:1.1rem 1.9rem}
.btn:active{transform:translateY(0) scale(.985)}

/* ==========================================================================
   Karten – weich, ohne Rahmen, Tiefe kommt aus dem Schatten
   ========================================================================== */
.card{
  background:var(--c-card);border:0;border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);box-shadow:var(--sh-1);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.card_flat{box-shadow:none;background:rgba(255,255,255,.62)}
.card_hover:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.card_lime{background:var(--grad-lime);color:var(--c-on-lime)}
.card_lime .h3{color:var(--c-on-lime)}
.card_lime .eyebrow{color:var(--c-on-lime);background:rgba(31,61,11,.14)}

.badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:58px;height:58px;border-radius:var(--r-md);background:var(--c-bg-3);
}
.badge img{width:24px;height:auto;filter:brightness(0) saturate(100%) invert(38%) sepia(62%) saturate(720%) hue-rotate(50deg) brightness(92%) contrast(94%)}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:40;background:rgba(251,248,242,.86);backdrop-filter:saturate(150%) blur(14px);
  transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.hdr__in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:76px;transition:min-height .3s var(--ease)}
.hdr_small .hdr__in{min-height:60px}
.hdr_small{box-shadow:0 14px 30px -26px rgba(31,61,11,.7);background:rgba(251,248,242,.94)}
.hdr__logo{flex:none;width:clamp(150px,16vw,190px);transition:width .3s var(--ease)}
.hdr_small .hdr__logo{width:clamp(134px,13vw,166px)}
.hdr__nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);margin-left:auto}
.hdr__link{font-size:.98rem;font-weight:600;color:var(--c-ink);text-decoration:none;white-space:nowrap}
.hdr__link:hover{color:var(--c-green)}
.hdr .btn{padding:.74rem 1.2rem;font-size:.97rem}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2.5px;border-radius:2px;background:var(--c-ink);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:899px){
  .burger{display:block}
  .hdr__nav{position:fixed;inset:76px 0 auto;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--c-bg);padding:20px var(--gut) 28px;box-shadow:0 20px 40px -30px rgba(31,61,11,.8);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:all .28s var(--ease)}
  .hdr__nav.is-open{transform:none;opacity:1;visibility:visible}
  .hdr__link{padding:.75rem 0;border-bottom:1px solid var(--c-line)}
  .hdr .btn{margin-top:14px;width:100%}
}

/* ==========================================================================
   Hero – der Mensch sitzt in einer organischen Form, nicht in einem Kasten
   ========================================================================== */
.hero{padding-block:clamp(22px,3vw,42px) clamp(28px,4vw,48px);position:relative;overflow:hidden}
.hero__glow{position:absolute;inset:auto -14% -46% auto;width:min(96vw,980px);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(143,202,20,.22) 0%,rgba(143,202,20,.07) 44%,transparent 70%);
  pointer-events:none;z-index:0}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4.5vw,60px);align-items:center}
.hero .h1{margin-bottom:1.05rem}
/* Die Überschrift trägt zwei Sätze. Der erste steht groß, der zweite als
   eigene, kleinere Stufe darunter – sonst läuft die Zeile auf fünf Zeilen
   und drückt den Kennzahlen-Streifen unter den Falz. */
.h1__b{display:block;margin-top:.5em;font-size:.52em;line-height:1.16;
  letter-spacing:-.015em;color:var(--c-body)}
.hero__lead{margin-bottom:1.5rem;max-width:36ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.15rem}
.hero__note{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:var(--t-small);color:var(--c-muted)}
.hero__note b{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--c-body)}
.hero__note b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-lime);flex:none}
.hero__media{position:relative}
/* Die organische Form hinter dem Hero-Bild ist raus – sie wirkte wie ein
   aufgeklebtes Medaillon. Die Person steht jetzt frei auf dem Sand, der
   Lichtschleier dahinter trägt die Fläche. */
.shape{position:relative}
/* Die Vorlage ist am Oberkörper beschnitten. Auf dem dunklen Hero der alten
   Seite fiel das nicht auf, auf Sand bricht es hart ab. Ein weicher Auslauf
   nach unten löst das Bild in die Fläche auf – ohne Rahmen, ohne Medaillon. */
.shape img{margin-inline:auto;max-width:100%;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 99%)}
@media (max-width:899px){
  .hero__in{grid-template-columns:1fr;gap:8px}
  .shape{max-width:360px;margin-inline:auto}
}

/* ==========================================================================
   Zahlen – weiche Karten, die erste dunkelgrün als Anker
   ========================================================================== */
.proof{background:transparent}
.proof__in{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.7vw,18px)}
.proof__item{background:var(--c-card);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);
  border-left:0;box-shadow:var(--sh-1)}
.proof__item:first-child{background:var(--c-green-dark);color:var(--c-on-dark)}
.proof__item:first-child .proof__n{color:#fff}
.proof__item:first-child .proof__cap{color:var(--c-lime)}
.proof__item:first-child .proof__l{color:var(--c-on-dark)}
.proof__cap{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-green);margin-bottom:.85rem}
.proof__n{font-size:clamp(2rem,1.2rem + 3vw,2.9rem);font-weight:700;line-height:1;letter-spacing:-.035em;
  color:var(--c-ink);font-variant-numeric:tabular-nums}
.proof__l{font-size:var(--t-small);line-height:1.45;margin-top:.75rem;color:var(--c-body)}
@media (max-width:719px){.proof__in{grid-template-columns:1fr 1fr}}

/* ==========================================================================
   Sektionskopf
   ========================================================================== */
.head{margin-bottom:clamp(24px,3.2vw,42px)}
.head .h2{margin-bottom:.75rem}
.head_center{text-align:center;max-width:62ch;margin-inline:auto}
.head_center .eyebrow{margin-inline:auto}

/* ==========================================================================
   Einwände
   ========================================================================== */
.obj{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.7vw,18px)}
.obj__q{font-size:var(--t-h3);font-weight:700;color:var(--c-ink);line-height:1.32;
  margin-bottom:.7rem;position:relative;padding-top:1.7rem}
.obj__q::before{content:"„";position:absolute;top:-.5em;left:-.04em;font-size:3.4rem;line-height:1;
  color:var(--c-lime);font-weight:800}
@media (max-width:849px){.obj{grid-template-columns:1fr}}

/* ==========================================================================
   Bento
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.7vw,18px)}
.bento > *{grid-column:span 2}
.bento__wide{grid-column:span 4}
.bento__full{grid-column:span 6}
.bento__half{grid-column:span 3}
@media (max-width:899px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento > *,.bento__half{grid-column:span 1}
  .bento__wide,.bento__full{grid-column:span 2}
}
@media (max-width:559px){.bento{grid-template-columns:1fr}.bento > *{grid-column:span 1}}

/* ==========================================================================
   Split
   ========================================================================== */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4.5vw,60px);align-items:start}
.split_rev .split__copy{order:2}
.split__copy{position:sticky;top:108px}
@media (max-width:959px){
  .split{grid-template-columns:1fr;gap:26px}
  .split_rev .split__copy{order:0}
  .split__copy{position:static}
}

/* ==========================================================================
   Ablauf – breite Zeilen statt enger Spalten. Die Signatur dieses Entwurfs.
   ========================================================================== */
.flow{display:flex;flex-direction:column;gap:clamp(10px,1.5vw,16px)}
/* Vier Spalten statt drei: die Beschreibung lief über die volle Breite und kam
   auf 125 Zeichen pro Zeile – mehr als das Doppelte des gut Lesbaren. Titel und
   Text stehen jetzt nebeneinander, beide in ruhiger Zeilenlänge. */
.row{background:var(--c-card);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);
  display:grid;grid-template-columns:64px minmax(0,15rem) minmax(0,1fr) auto;
  gap:clamp(14px,2.2vw,30px);align-items:center;
  box-shadow:var(--sh-1);transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.row p{max-width:52ch}
.row:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.row__n{width:64px;height:64px;border-radius:22px;background:var(--c-bg-3);color:var(--c-green);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;flex:none}
.row p{font-size:1rem}
.row__i{font-size:.82rem;font-weight:700;letter-spacing:.14em;color:var(--c-muted)}
@media (max-width:1023px){
  .row{grid-template-columns:64px minmax(0,1fr) auto;align-items:start}
  .row p{margin-top:.3rem}
}
@media (max-width:719px){
  .row{grid-template-columns:52px 1fr;gap:16px}
  .row__i{display:none}
  .row__n{width:52px;height:52px;border-radius:18px;font-size:1.1rem}
}

/* ==========================================================================
   Chips
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:.55rem;background:var(--c-card);
  border-radius:var(--r-pill);padding:.66rem 1.1rem .66rem .78rem;font-size:.97rem;font-weight:600;
  color:var(--c-ink);box-shadow:var(--sh-1);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease)}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-lime);flex:none}
.chip:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* ==========================================================================
   Alltags-Situationen · drei Karten, jede eine Szene aus dem Wohnbereich
   Der Satz oben ist die Situation, darunter steht was passiert, unten das
   was dadurch wegfällt. Diese drei Ebenen halten die Karten vergleichbar.
   ========================================================================== */
.days{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.7vw,18px);
  margin-top:clamp(22px,2.6vw,32px)}
.day{background:var(--c-card);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:.7rem;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.day:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.day__t{font-size:var(--t-h3);font-weight:700;color:var(--c-ink);line-height:1.34;
  display:grid;grid-template-columns:26px 1fr;gap:.7rem;align-items:start}
/* Das Häkchen als Marke der Situation – gezeichnet, nicht als Emoji, damit es
   auf jedem System gleich aussieht. */
.day__t::before{content:"";width:26px;height:26px;border-radius:50%;flex:none;margin-top:.1rem;
  background:var(--c-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3D0B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center/15px 15px no-repeat}
.day__b{color:var(--c-body);line-height:1.62;flex:1}
.day__x{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin-top:.2rem}
.day__x span{font-size:.8rem;font-weight:700;color:var(--c-green-dark);
  background:var(--c-bg-3);border-radius:var(--r-pill);padding:.3rem .7rem}

/* Leistungsumfang – nachgeordnet, ruhiger Rahmen statt eigener Sektion */
.feat{margin-top:clamp(30px,3.6vw,46px);padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid var(--c-line)}
/* --c-muted käme auf 4,36:1 – der weiche Verlauf ist dunkler als reines Sand,
   auf dem die 4,8:1 des Tokens gemessen sind. Darum --c-body. */
.feat__k{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-body);margin-bottom:1rem;text-align:center}
.feat .chips{justify-content:center}

@media (max-width:899px){
  .days{grid-template-columns:1fr}
}

/* ==========================================================================
   Häkchen-Liste
   ========================================================================== */
.ticks{display:grid;gap:.8rem}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:.75rem;align-items:start;line-height:1.55}
.ticks li::before{content:"";width:24px;height:24px;border-radius:50%;background:var(--c-bg-3);margin-top:.14rem;
  -webkit-mask:none;mask:none;position:relative;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4.5 4.5L19 7' fill='none' stroke='%233F7A16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat}

/* ==========================================================================
   Praxisbeispiel
   ========================================================================== */
.case{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,22px);align-items:start;
  background:var(--c-card);border-radius:var(--r-lg);padding:clamp(18px,2.2vw,26px);box-shadow:var(--sh-1)}
.case__img{width:clamp(88px,9vw,120px);border-radius:var(--r-md);overflow:hidden;flex:none}
.case__img img{transition:transform .5s var(--ease)}
.case:hover .case__img img{transform:scale(1.06)}
.case__k{font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-green);margin-bottom:.4rem}
@media (max-width:559px){.case{grid-template-columns:1fr}.case__img{width:100%;max-width:190px}}

/* ==========================================================================
   Slider
   ========================================================================== */
.rail{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.6vw,32px)}
.rail__btns{display:flex;gap:10px;flex:none}
.rail__btn{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--c-green-dark);
  position:relative;transition:transform .24s var(--ease),opacity .24s var(--ease),background .24s var(--ease)}
.rail__btn::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;
  border-right:2.4px solid #fff;border-top:2.4px solid #fff;transform:rotate(45deg);margin-left:21px}
.rail__btn_prev::before{transform:rotate(-135deg);margin-left:25px}
.rail__btn:hover{background:var(--c-green);transform:scale(1.07)}
.rail__btn[disabled]{opacity:.3;cursor:default;transform:none}
.track{display:flex;gap:clamp(14px,2vw,22px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;
  margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
  scrollbar-width:none;-ms-overflow-style:none}
.track::-webkit-scrollbar{display:none}
.track > *{flex:0 0 auto;width:clamp(258px,26vw,320px);scroll-snap-align:start}
.slide .ui-dev{margin-bottom:1.1rem}
.slide .h3{margin-bottom:.3rem}
@media (min-width:900px){
  .track{-webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent);
         mask-image:linear-gradient(90deg,#000 0 92%,transparent)}
}
@media (prefers-reduced-motion:reduce){.track{scroll-behavior:auto}}

/* ==========================================================================
   Abschluss – dunkelgrünes Panel mit großen Radien, nicht vollbreit
   ========================================================================== */
.close{padding-block:0 var(--s-wide)}
.panel{background:var(--c-green-dark);color:var(--c-on-dark);border-radius:var(--r-xl);
  padding:clamp(40px,5.5vw,76px) clamp(24px,4vw,60px);text-align:center;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(143,202,20,.3),transparent 68%);pointer-events:none}
.panel .h2,.panel .eyebrow{position:relative;z-index:1}
.panel .h2{color:#fff}
.panel .eyebrow{background:#2E551A;color:#D6F2A4}
.close__lead{position:relative;z-index:1;max-width:52ch;margin-inline:auto;color:var(--c-on-dark);font-size:var(--t-lead)}
.close__cta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:1.8rem}
.panel .btn_ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.panel .btn_ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.close__fine{position:relative;z-index:1;margin:1.1rem auto 0;max-width:52ch;font-size:var(--t-small);color:rgba(211,226,196,.78)}

/* ==========================================================================
   Footer – hell, nicht dunkel. Das Panel darüber trägt schon den Abschluss.
   ========================================================================== */
.ft{background:var(--c-bg-2);color:var(--c-body);padding-block:var(--s-base) var(--s-tight)}
.ft__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:26px;border-bottom:1px solid var(--c-line)}
.ft__logo{width:196px}
.ft__apps{display:flex;gap:10px}
.ft__app{display:flex;align-items:center;height:46px;padding:4px 12px;border-radius:14px;
  background:var(--c-ink);transition:opacity .24s var(--ease)}
.ft__app:hover{opacity:.78}
.ft__app img{height:34px;width:auto}
.ft__bot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding-top:22px;font-size:var(--t-small)}
.ft__menu{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto}
.ft__menu a{text-decoration:none;font-weight:600;letter-spacing:.03em}
.ft__menu a:hover{color:var(--c-green)}
.ft__fine{width:100%;max-width:78ch;font-size:.76rem;line-height:1.55;color:#5F6957;margin-top:14px}

/* ==========================================================================
   Popup
   ========================================================================== */
.popup{position:fixed;inset:0;z-index:60;background:rgba(251,248,242,.97);display:flex;
  padding:56px 0 32px;overflow-y:auto;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),visibility 0s linear .3s}
.popup_open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s linear 0s}
.popup__content{width:100%;margin:auto}
.popup__close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--c-card);box-shadow:var(--sh-1);cursor:pointer}
.popup__close::before,.popup__close::after{content:"";position:absolute;inset:0;margin:auto;
  width:17px;height:2.5px;border-radius:2px;background:var(--c-ink)}
.popup__close::before{transform:rotate(45deg)}.popup__close::after{transform:rotate(-45deg)}
.overflow-hidden{overflow:hidden}

/* ==========================================================================
   Lesefortschritt
   ========================================================================== */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad-lime);will-change:transform}

.u-dark{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .card_hover:hover,.chip:hover,.row:hover,.case:hover .case__img img{transform:none}
}

/* ==========================================================================
   Screen-Wechsler
   Vorher standen fünf identische Geräte nebeneinander in einer Scroll-Spur:
   fünfmal dieselbe Blende, jedes Gerät zu klein zum Lesen, kein Screen bewegt
   sich. Jetzt EIN großes Gerät, daneben die fünf Schritte als Liste. Der
   Screen wechselt — automatisch, anklickbar, mit Tastatur bedienbar.
   Ohne JavaScript stehen alle fünf untereinander; nichts geht verloren.
   ========================================================================== */
.switch{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:959px){.switch{grid-template-columns:1fr;gap:26px}}

.switch__list{display:flex;flex-direction:column;gap:4px}
.switch__tab{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;text-align:left;
  background:transparent;border:0;border-radius:var(--r-md);padding:1rem 1.15rem;cursor:pointer;
  font:inherit;color:var(--c-body);position:relative;overflow:hidden;
  transition:background .28s var(--ease);
}
.switch__tab:hover{background:rgba(255,255,255,.6)}
.switch__tab[aria-selected="true"]{background:var(--c-card);box-shadow:var(--sh-1)}
.switch__n{width:34px;height:34px;border-radius:11px;background:var(--c-bg-3);color:var(--c-green);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.92rem;flex:none;
  transition:background .28s var(--ease),color .28s var(--ease)}
.switch__tab[aria-selected="true"] .switch__n{background:var(--c-green-dark);color:#fff}
.switch__t{font-weight:700;color:var(--c-ink);font-size:1.06rem;letter-spacing:-.012em;display:block}
/* display:block ist Pflicht – auf einem Inline-Element wird max-height
   ignoriert, die eingeklappte Beschreibung belegt dann trotzdem zwei Zeilen. */
.switch__d{display:block;font-size:.95rem;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .38s var(--ease),opacity .28s var(--ease),margin .38s var(--ease)}
.switch__tab[aria-selected="true"] .switch__d{max-height:7rem;opacity:1;margin-top:.3rem}
/* Laufbalken zeigt, wann der nächste Screen kommt */
.switch__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad-lime);opacity:0}
.switch__tab[aria-selected="true"] .switch__bar{opacity:1}
.switch_playing .switch__tab[aria-selected="true"] .switch__bar{
  animation:switch-bar var(--switch-dur,5.5s) linear forwards}
@keyframes switch-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.switch__stage{position:relative;display:grid;max-width:440px;width:100%;margin-inline:auto}
.switch__panel{grid-area:1/1}
.js .switch__panel{opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s linear .42s}
.js .switch__panel.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* Ohne JS: alle Panels sichtbar untereinander, Tabs sind dann nur Überschriften */
:not(.js) .switch__panel{margin-bottom:20px}

/* Schmale Screens: die Liste steht ÜBER dem Gerät. Klappt eine Beschreibung
   dort auf und zu, ändert sich die Listenhöhe und schiebt alles darunter –
   gemessene CLS 0,094. Deshalb bleiben hier alle Beschreibungen offen, in
   BEIDEN Zuständen und ohne Übergang. Diese Regeln müssen nach den Basisregeln
   stehen: gleiche Spezifität, die spätere gewinnt. */
@media (max-width:959px){
  .switch__d,
  .switch__tab[aria-selected="true"] .switch__d{
    max-height:none;opacity:1;margin-top:.3rem;transition:none;
  }
  .switch__tab{background:rgba(255,255,255,.55)}
  .switch__tab[aria-selected="true"]{background:var(--c-card)}
}

@media (prefers-reduced-motion:reduce){
  .js .switch__panel{transition:opacity .01ms}
  .switch_playing .switch__tab[aria-selected="true"] .switch__bar{animation:none;transform:scaleX(1)}
  .switch__d{transition:none}
}

/* ==========================================================================
   Wechsler · Klick-Aufforderung
   Die Liste sah aus wie eine Aufzählung, nicht wie eine Bedienung. Drei
   Signale machen daraus sichtbar ein Steuerelement: ein Hinweis darüber, ein
   Pfeil an jedem Eintrag, und Vor/Zurück mit Zähler darunter.
   ========================================================================== */
.switch__hint{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:700;
  letter-spacing:.04em;color:var(--c-green);background:var(--c-bg-3);border-radius:var(--r-pill);
  padding:.42em 1em;margin-bottom:.9rem}
.switch__hint svg{width:15px;height:15px}

.switch__tab{grid-template-columns:auto 1fr auto}
.switch__go{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  align-self:center;flex:none;background:var(--c-bg-3);
  transition:background .24s var(--ease),transform .24s var(--ease)}
.switch__go::before{content:"";width:6px;height:6px;border-right:2px solid var(--c-green);
  border-top:2px solid var(--c-green);transform:rotate(45deg);margin-left:-2px}
.switch__tab:hover .switch__go{transform:translateX(3px)}
.switch__tab[aria-selected="true"] .switch__go{background:var(--c-green-dark)}
.switch__tab[aria-selected="true"] .switch__go::before{border-color:#fff}

.switch__nav{display:flex;align-items:center;gap:12px;margin-top:14px;padding-left:1.15rem}
.switch__arrow{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:var(--c-card);
  box-shadow:var(--sh-1);position:relative;transition:transform .22s var(--ease),background .22s var(--ease)}
.switch__arrow::before{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;
  border-right:2.2px solid var(--c-ink);border-top:2.2px solid var(--c-ink);transform:rotate(45deg);margin-left:16px}
.switch__arrow_prev::before{transform:rotate(-135deg);margin-left:20px}
.switch__arrow:hover{background:var(--c-green-dark);transform:scale(1.06)}
.switch__arrow:hover::before{border-color:#fff}
.switch__count{font-size:.92rem;font-weight:700;color:var(--c-body);font-variant-numeric:tabular-nums}
.switch__count b{color:var(--c-ink)}
@media (max-width:959px){.switch__nav{padding-left:0;justify-content:center}}

/* ==========================================================================
   Zeilenlängen
   Nachgemessen statt geschätzt: alles über ~75 Zeichen pro Zeile wird beim
   Lesen anstrengend, weil das Auge den Zeilenanfang verliert. Diese Deckel
   greifen dort, wo ein Absatz sonst die volle Spaltenbreite nimmt.
   ========================================================================== */
.card p,.obj p:not(.obj__q),.split__copy p,.fr-body p{max-width:54ch}
.lead{max-width:58ch}
.hero__lead{max-width:40ch}
.close__lead{max-width:44ch}

/* ==========================================================================
   Zahlen-Leiste im Hero
   Zwischen den Vertrauens-Badges und der ersten Zahl lagen 134 px leere
   Fläche – 80 px Hero-Padding plus 54 px der nächsten Sektion. Statt den
   Abstand nur zu verkleinern, sitzen die vier Zahlen jetzt IM Hero: der
   erste Bildschirm trägt damit Versprechen, Aktion und Beleg auf einmal,
   und die frühere Beweis-Sektion entfällt ersatzlos.
   ========================================================================== */
.hero__proof{
  grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2.4vw,34px);margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(18px,2.2vw,24px);border-top:1px solid var(--c-line);
}
.hero__fig{display:flex;flex-direction:column;gap:.28rem}
.hero__cap{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-green)}
.hero__n{font-size:clamp(1.65rem,1.1rem + 1.7vw,2.15rem);font-weight:700;line-height:1;
  letter-spacing:-.035em;color:var(--c-ink);font-variant-numeric:tabular-nums}
.hero__lbl{font-size:.86rem;font-weight:600;line-height:1.4;color:var(--c-ink);max-width:24ch}
/* Der Nutzen im Klartext unter der Zahl. Bewusst kleiner und ruhiger als das
   Label – die Zahl bleibt der Anker, der Satz erklärt sie nur. */
.hero__det{font-size:.8rem;line-height:1.45;color:var(--c-body);max-width:27ch;margin-top:.1rem}
/* Die Zahlen haben keinen Beleg auf der Seite. Diese Zeile sagt das, ohne sie
   zu entwerten – besser als eine Prozentangabe, die wie eine Studie aussieht. */
.hero__fine{grid-column:1 / -1;margin-top:clamp(14px,1.6vw,20px);font-size:.82rem;
  line-height:1.5;color:var(--c-muted);max-width:70ch}
@media (max-width:899px){
  .hero__proof{grid-template-columns:1fr 1fr;gap:22px 18px;margin-top:30px}
}

/* ==========================================================================
   Wechsler · Kopf gehört in die Spalte
   Die Überschrift stand über dem ganzen Raster, während die Liste am hohen
   Tablet vertikal zentriert wurde. Zwischen beiden lagen 146 px – überall
   sonst auf der Seite sind es 42. Jetzt sitzt der Kopf in derselben Spalte
   wie Liste und Navigation; das Trio zentriert gemeinsam am Gerät.
   ========================================================================== */
.switch__side{display:flex;flex-direction:column}
/* In der Flex-Spalte strecken sich Kinder auf volle Breite – der Chip sah
   dadurch aus wie ein Balken statt wie ein Etikett. */
.switch__side > .switch__hint{align-self:flex-start}
.head_tight{margin-bottom:clamp(18px,2.2vw,26px)}
.head_tight .h2{margin-bottom:0}