/* ==========================================================================
   LIMITLESS ME: zentrales Typografie-, Spacing- und Button-System
   Stand 31.10.2026, Entwurf. Geladen nur von der Startseite (index.html), nach seite.css.
   Eine Schrift (Urbanist, selbst gehostet). Alle Grössen kommen aus den Tokens unten,
   keine Sondergrössen in Komponenten. Skalierung fliessend mit clamp().
   Geltungsbereich: body.seite-start
   ========================================================================== */

:root{
  /* Rollen (Desktop / Mobile) */
  --t-h1:clamp(40px,5vw,72px);      /* 72 / 40, 700, 1.1  */
  --t-h2:clamp(32px,3.4vw,48px);    /* 48 / 32, 700, 1.15 */
  --t-h3:clamp(23px,2vw,28px);      /* 28 / 23, 600, 1.25 */
  --t-lead:clamp(19px,1.65vw,23px); /* 23 / 19, 400, 1.45 */
  --t-body:clamp(17px,1.35vw,19px); /* 19 / 17, 400, 1.6  */
  --t-micro:clamp(13px,.97vw,14px); /* 14 / 13, 400, 1.5  */
  --t-eyebrow:clamp(12px,.9vw,13px);/* 13 / 12, 500, 1.4, Laufweite .12em */
  --t-btn:clamp(14px,1.05vw,15px);  /* 15 / 14, 600, 1.2  */
  --lh-h1:1.1; --lh-h2:1.15; --lh-h3:1.25; --lh-lead:1.45; --lh-body:1.6; --lh-micro:1.5; --lh-btn:1.2;
  --w-text:400; --w-label:500; --w-strong:600; --w-display:700;
  --ls-eyebrow:.12em;

  /* Spacing auf 8-px-Basis */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px;
  --sp-title:var(--sp-4);          /* Überschrift zu Einleitung: 32 */
  --sp-para:var(--sp-3);           /* zwischen Absätzen: 24 */
  --sp-section:clamp(56px,6.5vw,96px); /* zwischen Sektionen: 56 mobil bis 96 Desktop */
  --sp-col:clamp(32px,4.5vw,64px);

  /* Textbreiten */
  --measure:720px;                 /* Fliesstext, höchstens ca. 70 Zeichen */
  --measure-hero:620px;            /* Hero-Erklärung */
  --measure-micro:640px;

  /* Buttons */
  --btn-h:54px; --btn-pad:32px;
}

/* ---------- Basis ---------- */
body.seite-start{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}

/* ---------- Überschriften (visuelle Rolle unabhängig von der HTML-Ebene) ---------- */
body.seite-start main h1{font-size:var(--t-h1);line-height:var(--lh-h1);font-weight:var(--w-display);letter-spacing:-.02em}
body.seite-start main h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:var(--w-display);letter-spacing:-.015em;margin-bottom:var(--sp-title)}
body.seite-start main h3,
body.seite-start .g-titel{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-strong);margin-bottom:var(--sp-2)}

/* ---------- Fliesstext ---------- */
body.seite-start main p,
body.seite-start main li,
body.seite-start main summary,
body.seite-start .gross{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}
body.seite-start main .innen>p,
body.seite-start main .paar-txt>p{max-width:var(--measure);margin-bottom:var(--sp-para)}
body.seite-start main b,body.seite-start main strong{font-weight:var(--w-label)}

/* ---------- Lead / Einleitung ---------- */
body.seite-start .hero h1+.lead,
body.seite-start #dilemma .dil-lead,
body.seite-start #versprechen .ver-text:not(.ver-text2){font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--w-text);max-width:var(--measure)}

/* ---------- Eyebrow / Abschnittslabel ---------- */
body.seite-start .kicker,
body.seite-start .g-kicker,
body.seite-start .haus-nr,
body.seite-start .lim-frage,
body.seite-start .beleg-zeile,
body.seite-start .wechsel-kopf span,
body.seite-start .wechsel-nr,
body.seite-start .fall-txt b{font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-label);letter-spacing:var(--ls-eyebrow)}

/* ---------- Mikrotext ---------- */
body.seite-start main p.klein-vertrauen,
body.seite-start .beleg-text,
body.seite-start .faelle-hinweis,
body.seite-start .fall-wer span,
body.seite-start .stimme span,
body.seite-start .routine-klein,
body.seite-start .zweit-info,
body.seite-start .wirkung-zitat span,
body.seite-start footer,
body.seite-start .recht p{font-size:var(--t-micro);line-height:var(--lh-micro);font-weight:var(--w-text)}
body.seite-start main p.klein-vertrauen{max-width:var(--measure-micro);margin-top:var(--sp-2);margin-bottom:0}

/* ---------- Hero: eine Hierarchie ---------- */
body.seite-start .hero h1{margin-bottom:var(--sp-3)}
body.seite-start .hero .lead{margin-bottom:var(--sp-1)}
body.seite-start .hero .lead+.lead{font-size:var(--t-body);line-height:var(--lh-body);max-width:var(--measure-hero);margin-bottom:0}
body.seite-start .hero .reihe{margin-top:var(--sp-4)}
body.seite-start .hero .hero-sub{color:var(--sand);margin-bottom:var(--sp-2)}

/* ---------- Buttons ---------- */
body.seite-start .knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-pad);font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-strong);letter-spacing:.12em;text-decoration:none;transition:background-color .2s ease,border-color .2s ease}
body.seite-start .knopf.voll{color:var(--nacht)}
body.seite-start .knopf:focus-visible,
body.seite-start .zweit-link:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
/* Secondary: dezenter Textlink im Schlussbereich */
body.seite-start .zweit-link{font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-label)}
@media (max-width:760px){body.seite-start{--btn-h:52px;--btn-pad:24px}}

/* ---------- Komponenten, die eine feste Rolle bekommen ---------- */
body.seite-start #dilemma .dil-vor{font-size:var(--t-body);font-weight:var(--w-strong);margin-bottom:var(--sp-2)}
body.seite-start #dilemma .dil-szene{max-width:var(--measure);margin-bottom:var(--sp-2)}
body.seite-start #versprechen .ver-text2{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text);max-width:var(--measure)}
body.seite-start #wer .wer-block{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text);max-width:var(--measure)}
body.seite-start .lim-text{max-width:var(--measure)}
body.seite-start .lim-karte li,body.seite-start .lim-karte>p,
body.seite-start .fall-txt p,body.seite-start .stimme p,
body.seite-start .wechsel-l p,body.seite-start .wechsel-r p,
body.seite-start .lim-fazit p,body.seite-start details p,
body.seite-start .spalte-falsch li,body.seite-start .spalte-richtig li{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}
body.seite-start .lim-fazit h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-strong)}
body.seite-start .g-voll-body p:not(.g-voll-lead){font-size:var(--t-body);line-height:var(--lh-body)}
body.seite-start .g-voll-body .g-voll-lead{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--w-text)}
body.seite-start .wirkung-zitat p{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-label)}
body.seite-start .bruecke{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--w-text)}

/* ---------- Abschnitte ---------- */
body.seite-start main section{padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
body.seite-start #dilemma{padding-bottom:0}
body.seite-start .zwei-spalten,body.seite-start .lim-g,body.seite-start .ver-g{column-gap:var(--sp-col)}

/* ---------- Kleine Hilfsklassen statt Inline-Styles ---------- */
body.seite-start .innen-schmal{max-width:820px}
body.seite-start .fuss-titel{color:#fff;margin-bottom:var(--sp-1)}
body.seite-start .wirkung-zitat{margin-top:0}

/* ---------- Letzte Abweichungen angleichen ---------- */
body.seite-start .g-zu,body.seite-start .g-offen,body.seite-start .mehr-link{font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-strong)}
body.seite-start .g-wer{font-size:var(--t-micro);line-height:var(--lh-micro);font-weight:var(--w-text)}
body.seite-start #dilemma .dil-vor{font-weight:var(--w-label)}

/* ---------- «Was sich für dich verändert.» (Hierarchie nach Vorgabe Cla, 31.10.2026) ---------- */
/* Grosse Abschnitts-H2: eine Rolle für Dilemma und Versprechen, gleiche Container-Breite (.innen 1180 px) */
:root{--t-h2-gross:clamp(34px,3.6vw,52px);--w-h2-gross:600}
body.seite-start #dilemma h2,
body.seite-start #versprechen h2{font-size:var(--t-h2-gross);line-height:var(--lh-h2);font-weight:var(--w-h2-gross);margin-bottom:var(--sp-title)}
body.seite-start #versprechen .ver-text:not(.ver-text2),
body.seite-start #versprechen .ver-text2{font-size:clamp(18px,1.45vw,21px);line-height:1.55;font-weight:var(--w-text);max-width:880px;margin-bottom:var(--sp-para)}
body.seite-start #versprechen .ver-text2{font-weight:var(--w-label);margin-bottom:0}

/* Zwischenlabel «Doch was niemand sieht:» */
body.seite-start #dilemma .dil-vor{font-size:var(--t-body);font-weight:var(--w-label);margin-bottom:var(--sp-1)}

/* ---------- «Was ist eine Limitierung?»: ein durchgehendes Foto hinter Text und Raster (31.10.2026) ----------
   Die Maske nimmt das Bild hinter dem Raster stark zurück und löst es unten ganz auf; darunter scheint
   die Sektionsfarbe (--sand-hell) durch. Verlauf links nur aus --sand-hell. Keine neuen Farben. */
body.seite-start main section#limitierung{position:relative;isolation:isolate;padding-top:0;overflow:hidden}
body.seite-start #limitierung .lim-foto{position:absolute;top:0;left:0;right:0;aspect-ratio:3/2;max-height:100%;z-index:-1;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 32%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.1) 73%,rgba(0,0,0,.05) 82%,rgba(0,0,0,.02) 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 32%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.3) 56%,rgba(0,0,0,.18) 64%,rgba(0,0,0,.1) 73%,rgba(0,0,0,.05) 82%,rgba(0,0,0,.02) 91%,transparent 100%)}
body.seite-start #limitierung .lim-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
body.seite-start #limitierung .lim-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--sand-hell) 0%,rgba(242,238,230,.96) 36%,rgba(242,238,230,.55) 50%,rgba(242,238,230,0) 64%)}
body.seite-start #limitierung .lim-kopf{padding:var(--sp-section) 0 0;margin:0}
body.seite-start #limitierung .lim-kopf .innen>*{max-width:calc(45vw - var(--rand))}
body.seite-start #limitierung .lim-kopf .lim-text:last-child{margin-bottom:0}
body.seite-start #limitierung .lim-kopf .lim-pointe{font-weight:var(--w-label)}
@media (max-width:760px){
  body.seite-start #limitierung .lim-foto{bottom:auto;aspect-ratio:auto;max-height:none;height:calc(56vw + 56px);
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.75) 69%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.35) 83%,rgba(0,0,0,.17) 90%,rgba(0,0,0,.05) 96%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 55%,rgba(0,0,0,.92) 62%,rgba(0,0,0,.75) 69%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.35) 83%,rgba(0,0,0,.17) 90%,rgba(0,0,0,.05) 96%,transparent 100%)}
  body.seite-start #limitierung .lim-foto img{object-position:60% 25%}
  body.seite-start #limitierung .lim-foto::after{display:none}
  body.seite-start #limitierung .lim-kopf{padding-top:calc(var(--sp-section) + 56vw)}
  body.seite-start #limitierung .lim-kopf .innen>*{max-width:none}
}
body.seite-start #limitierung > .innen:last-child{padding-bottom:var(--sp-section)}
body.seite-start #limitierung .lim-frage{margin-top:var(--sp-6)}

/* ---------- Statement-Band nach der Limitierung (31.10.2026) ---------- */
body.seite-start main section#statement{background:var(--sand);text-align:center;padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
body.seite-start #statement .innen{max-width:960px}
body.seite-start #statement .stat-kicker{font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--bronze-text);margin:0 0 var(--sp-2);max-width:none}
body.seite-start #statement h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:var(--w-display);margin:0 auto var(--sp-3);max-width:20em}
body.seite-start #statement .stat-text{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text);color:var(--text-koerper);max-width:var(--measure-hero);margin:0 auto var(--sp-2)}
body.seite-start #statement .stat-text:last-child{margin-bottom:0}
@media (max-width:760px){body.seite-start main section#statement{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}}
body.seite-start #statement .stat-zeile{display:block;max-width:18em;margin:0 auto;text-wrap:balance}
body.seite-start #statement h2{max-width:none}

/* ---------- Bild-Text-Paare ohne Weissfläche zwischen den Flächen (31.10.2026) ---------- */
body.seite-start main section.paar{padding-top:0;padding-bottom:0}

/* ---------- «Was sich für dich verändert.» zentriert, wie das Statement-Band ---------- */
body.seite-start #versprechen{text-align:center}
body.seite-start #versprechen .innen{max-width:960px}
body.seite-start #versprechen .ver-text:not(.ver-text2),
body.seite-start #versprechen .ver-text2{margin-left:auto;margin-right:auto}

/* ---------- Erfahrungsbericht (Riccardo): kompakter redaktioneller Teaser (31.10.2026) ---------- */
body.seite-start #riccardo.geschichte{border:0;border-top:1px solid var(--bronze);border-radius:0;background:var(--sand-hell);box-shadow:none;margin-top:var(--sp-6)}
body.seite-start #riccardo > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-4);align-items:center;padding:28px var(--sp-4);cursor:pointer;list-style:none;transition:background-color .25s ease}
body.seite-start #riccardo > summary::-webkit-details-marker{display:none}
body.seite-start #riccardo > summary:hover{background:rgba(166,144,117,.08)}
body.seite-start #riccardo > summary:focus-visible{outline:2px solid var(--bronze-text);outline-offset:-4px}
body.seite-start #riccardo .g-kicker{grid-column:1;margin:0 0 var(--sp-1);font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--bronze-text)}
body.seite-start #riccardo .g-titel{grid-column:1;max-width:none;margin:0 0 var(--sp-1);font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-strong);letter-spacing:-.01em;color:var(--text)}
body.seite-start #riccardo .g-wer{grid-column:1;margin:0;font-size:var(--t-micro);line-height:var(--lh-micro);font-weight:var(--w-text);color:var(--text-leise)}
body.seite-start #riccardo .g-auf{grid-column:2;grid-row:1/4;align-self:center;display:inline-flex;align-items:center;gap:var(--sp-1);padding:0 0 4px;border:0;border-bottom:1px solid var(--bronze);border-radius:0;background:none;font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-label);letter-spacing:.04em;text-transform:none;color:var(--text);white-space:nowrap;transition:color .25s ease,border-color .25s ease}
body.seite-start #riccardo > summary:hover .g-auf{background:none;color:var(--bronze-text);border-color:var(--bronze-text)}
body.seite-start #riccardo .g-pfeil{flex:none;transition:transform .25s ease}
body.seite-start #riccardo > summary:hover .g-pfeil{transform:translate(2px,-2px)}
body.seite-start #riccardo[open] > summary .g-pfeil{transform:rotate(-45deg)}
body.seite-start #riccardo[open] > summary:hover .g-pfeil{transform:rotate(-45deg) translate(2px,-2px)}
body.seite-start #riccardo .g-inhalt{padding:0 var(--sp-4) var(--sp-6)}
@media (max-width:700px){
  body.seite-start #riccardo > summary{grid-template-columns:1fr;padding:var(--sp-3)}
  body.seite-start #riccardo .g-auf{grid-column:1;grid-row:auto;justify-self:start;margin-top:var(--sp-2)}
  body.seite-start #riccardo .g-inhalt{padding:0 var(--sp-3) var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){body.seite-start #riccardo *{transition:none!important}}

/* ==========================================================================
   Unterseite «Methode» (body.seite-methode), Stand 31.10.2026, Entwurf.
   Gleiche Tokens wie die Startseite; keine eigenen Grössen.
   ========================================================================== */
body.seite-methode{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}
body.seite-methode main h2{font-size:var(--t-h2-gross);line-height:var(--lh-h2);font-weight:var(--w-h2-gross);letter-spacing:-.015em;margin-bottom:var(--sp-title)}
body.seite-methode main h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-strong);margin-bottom:var(--sp-2)}
body.seite-methode main p,body.seite-methode main li,body.seite-methode main summary{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}
body.seite-methode main section{padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
body.seite-methode main section.m-abschluss{padding-bottom:var(--sp-section)}

/* Eyebrow und Label */
body.seite-methode .m-eyebrow,body.seite-methode .m-label,body.seite-methode .formel-legende b{font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
body.seite-methode main .m-eyebrow{margin:0 0 var(--sp-2);color:var(--bronze-text)}
body.seite-methode .m-label{display:block;margin-bottom:var(--sp-1);color:var(--bronze-text)}

/* 1. Einstieg, kompakt */
body.seite-methode .m-kopf{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:var(--sp-8)}
body.seite-methode .m-kopf .m-eyebrow{color:var(--bronze)}
body.seite-methode .m-kopf h1{font-size:var(--t-h2-gross);line-height:var(--lh-h1);font-weight:var(--w-display);letter-spacing:-.02em;max-width:16em;margin:0 0 var(--sp-3)}
body.seite-methode .m-kopf .kopf-erklaer{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--w-text);max-width:var(--measure);margin:0}

/* 2. Weltmeister-Formel */
body.seite-methode #formel .formel-box .zahl{font-size:clamp(24px,2.8vw,36px);line-height:1.25;margin:var(--sp-3) 0 var(--sp-4)}
body.seite-methode #formel .formel-legende span{font-size:var(--t-body);line-height:var(--lh-body)}
body.seite-methode #formel .m-modell{font-size:var(--t-micro);line-height:var(--lh-micro);color:var(--text-leise);margin:0 auto var(--sp-6);max-width:var(--measure-micro)}
body.seite-methode #formel .nenner-schluss{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--w-label);text-align:center;border:0;padding:0;margin:0 auto}

/* 3. Prozess */
body.seite-methode #prozess{background:var(--sand-hell)}
body.seite-methode #prozess h2{max-width:18em}
body.seite-methode .m-intro{max-width:var(--measure);margin:0 0 var(--sp-6)}
body.seite-methode .m-phasen{list-style:none;margin:0;padding:0}
body.seite-methode .m-phasen li{display:grid;grid-template-columns:clamp(72px,9vw,128px) minmax(0,1fr) minmax(0,1.45fr);column-gap:var(--sp-col);align-items:start;padding:var(--sp-4) 0;border-top:1px solid var(--linie)}
body.seite-methode .m-phasen li:last-child{border-bottom:1px solid var(--linie)}
body.seite-methode .m-nr{font-size:var(--t-h1);line-height:1;font-weight:var(--w-text);color:var(--bronze);letter-spacing:-.02em}
body.seite-methode .m-phase-kopf h3{margin:0}
body.seite-methode .m-phasen p{margin:0;color:var(--text-koerper);max-width:var(--measure)}

/* 4. Sichtbar machen */
body.seite-methode .m-text{max-width:var(--measure);margin:0 0 var(--sp-para)}
body.seite-methode main p.m-hinweis{font-size:var(--t-micro);line-height:var(--lh-micro);color:var(--text-leise);margin:var(--sp-4) 0 0;max-width:var(--measure-micro)}

/* 5. Formate */
body.seite-methode #formate{background:var(--sand-hell)}
body.seite-methode .m-formate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-col);margin:0 0 var(--sp-6)}
body.seite-methode .m-formate>div{border-top:1px solid var(--bronze);padding-top:var(--sp-3)}
body.seite-methode .m-formate p{margin:0;color:var(--text-koerper)}
body.seite-methode .m-schluss{font-weight:var(--w-label);color:var(--text);max-width:var(--measure);margin:0}

/* 6. Abschluss */
body.seite-methode .m-abschluss{min-height:0;padding-top:clamp(160px,26vh,320px)}
body.seite-methode .m-abschluss .gross{max-width:var(--measure-hero);margin:0 auto var(--sp-4)}
body.seite-methode .m-abschluss .klein-vertrauen{font-size:var(--t-micro);line-height:var(--lh-micro)}

/* Buttons wie Startseite */
body.seite-methode .knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-pad);font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-strong);letter-spacing:.12em;text-decoration:none}
body.seite-methode .knopf.voll{color:var(--nacht)}
body.seite-methode .knopf:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

@media (max-width:900px){
  body.seite-methode .m-phasen li{grid-template-columns:1fr;row-gap:var(--sp-2)}
  body.seite-methode .m-formate{grid-template-columns:1fr;gap:var(--sp-4)}
}
@media (max-width:760px){
  body.seite-methode{--btn-h:52px;--btn-pad:24px}
  body.seite-methode .m-kopf{padding-top:calc(132px + env(safe-area-inset-top,0px));padding-bottom:var(--sp-6)}
}

/* ---------- Persönlicher Promise-Bereich mit Porträt (31.10.2026) ---------- */
body.seite-start main section#promise{background:var(--sand-hell);padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
body.seite-start #promise .promise-g{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:var(--sp-col);align-items:stretch}
body.seite-start #promise .promise-text>p:not(.kicker){max-width:var(--measure);margin:0 0 var(--sp-para)}
body.seite-start #promise .promise-text>p:last-child{margin-bottom:0}
body.seite-start #promise .kicker{margin:0 0 var(--sp-2);color:var(--bronze-text)}
body.seite-start #promise h2{font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:var(--w-h2-gross);margin-bottom:var(--sp-title);max-width:16em}
body.seite-start #promise .promise-bild{margin:0;position:relative;min-height:0}
body.seite-start #promise .promise-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
body.seite-start #promise .promise-erlebe{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--bronze)}
body.seite-start #promise .promise-erlebe h3{margin:0 0 var(--sp-2)}
body.seite-start #promise .promise-erlebe>p:not(.klein-vertrauen){max-width:var(--measure);margin:0 0 var(--sp-2)}
body.seite-start #promise .promise-erlebe .knopf{margin-top:var(--sp-3)}
body.seite-start #promise .promise-erlebe .klein-vertrauen{font-size:var(--t-micro);line-height:var(--lh-micro);margin:var(--sp-2) 0 0;color:var(--text-leise)}
@media (max-width:900px){
  body.seite-start #promise .promise-g{grid-template-columns:1fr;row-gap:var(--sp-6)}
  body.seite-start #promise .promise-bild{aspect-ratio:1/1;max-width:420px;width:100%}
  body.seite-start #promise .promise-erlebe{margin-top:var(--sp-6);padding-top:var(--sp-4)}
}

/* ---------- Methode, Optimierung 31.10.2026 ---------- */
body.seite-methode{--t-h2-m:clamp(30px,3.1vw,45px)}
body.seite-methode main h2,body.seite-methode .m-kopf h1{font-size:var(--t-h2-m)}
body.seite-methode main section{padding-top:clamp(48px,5.5vw,80px);padding-bottom:clamp(48px,5.5vw,80px)}
body.seite-methode .m-kopf{padding-bottom:var(--sp-6)}
body.seite-methode .m-intro{margin-bottom:var(--sp-4)}
body.seite-methode #formel .m-modell{margin-bottom:var(--sp-4)}
body.seite-methode .m-formate{margin-bottom:var(--sp-4)}
/* Kontrast: Hinweise und Mikrotexte dunkler */
body.seite-methode #formel .m-modell,body.seite-methode main p.m-hinweis,body.seite-methode .m-beispiel-hinweis{color:var(--text-koerper)}
body.seite-methode #formel .formel-legende span{color:rgba(255,255,255,.92)}
/* Formel: sauberer Umbruch */
body.seite-methode .z-teil{white-space:nowrap}
body.seite-methode #formel .formel-box .zahl{text-wrap:balance}
@media (max-width:760px){body.seite-methode #formel .formel-box .zahl{font-size:22px}}

/* Persönliches Zitat */
body.seite-methode main section#zitat{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
body.seite-methode .m-zitat{margin:0;padding:var(--sp-6) 0;border-top:1px solid var(--linie);max-width:var(--measure)}
body.seite-methode .m-zitat blockquote{margin:0}
body.seite-methode .m-zitat p{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-label);color:var(--text);margin:0;text-wrap:balance}
body.seite-methode .m-zitat p::before{content:"«";color:var(--bronze);margin-right:.08em}
body.seite-methode .m-zitat p::after{content:"»";color:var(--bronze);margin-left:.08em}
body.seite-methode .m-zitat figcaption{margin-top:var(--sp-2);font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--bronze-text)}

/* Praxisbeispiel */
body.seite-methode .m-beispiel{margin:var(--sp-6) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--bronze);max-width:var(--measure)}
body.seite-methode .m-beispiel .m-label{margin-bottom:var(--sp-2)}
body.seite-methode .m-beispiel-satz{margin:0 0 var(--sp-3);font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-label);color:var(--text)}
body.seite-methode .m-werte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-col);margin:0 0 var(--sp-3)}
body.seite-methode .m-werte dt{font-size:var(--t-micro);line-height:var(--lh-micro);font-weight:var(--w-label);color:var(--text-koerper);margin:0 0 var(--sp-1)}
body.seite-methode .m-werte dd{margin:0;font-size:var(--t-h2-m);line-height:1;font-weight:var(--w-strong);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
body.seite-methode .m-werte div:last-child dd{color:var(--bronze-text)}
body.seite-methode main p.m-beispiel-hinweis{font-size:var(--t-micro);line-height:var(--lh-micro);margin:0;max-width:var(--measure-micro)}

/* ---------- Methode: Zitat als Balken, Beispiel neben dem Text (31.10.2026) ---------- */
body.seite-methode .m-phasen li:last-child{border-bottom:0}
body.seite-methode main section#zitat{background:var(--sand);padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
body.seite-methode .m-zitat{padding:0;border:0}
body.seite-methode .m-zitat figcaption{color:var(--text-koerper)}
body.seite-methode .m-sichtbar-g{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:var(--sp-col);align-items:start}
body.seite-methode .m-sichtbar-text .m-text:last-child{margin-bottom:0}
body.seite-methode .m-sichtbar-g .m-beispiel{margin:0;max-width:none}
body.seite-methode .m-sichtbar-g .m-werte{gap:var(--sp-3)}
@media (max-width:900px){
  body.seite-methode .m-sichtbar-g{grid-template-columns:1fr;row-gap:var(--sp-4)}
}

/* ---------- Promise: neuer Text, ca. 15 % kompakter (31.10.2026) ---------- */
body.seite-start main section#promise{padding-top:calc(var(--sp-section)*.85);padding-bottom:calc(var(--sp-section)*.85)}
body.seite-start #promise .promise-text>p.promise-schluss{font-weight:var(--w-label);color:var(--text)}
body.seite-start #promise .promise-erlebe{margin-top:calc(var(--sp-8)*.85);padding-top:calc(var(--sp-6)*.85)}
@media (max-width:900px){body.seite-start #promise .promise-erlebe{margin-top:calc(var(--sp-6)*.85);padding-top:calc(var(--sp-4)*.85)}}

/* ---------- Promise: rundes Porträt, «Erlebe es selbst.» als eigener Abschnitt (31.10.2026) ---------- */
body.seite-start #promise .promise-bild{align-self:center;justify-self:center;width:min(100%,400px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;min-height:0}
body.seite-start #promise .promise-bild img{object-position:50% 28%}
@media (max-width:900px){body.seite-start #promise .promise-bild{width:min(100%,300px)}}

body.seite-start main section#erlebe{position:relative;isolation:isolate;background:var(--tief);color:#fff;text-align:center;padding-top:calc(var(--sp-section)*.85);padding-bottom:calc(var(--sp-section)*.85)}
body.seite-start #erlebe>img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;z-index:-2}
body.seite-start #erlebe::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(22,22,21,.78)}
body.seite-start #erlebe .erlebe-innen{max-width:720px}
body.seite-start #erlebe h2{color:#fff;font-size:var(--t-h2);line-height:var(--lh-h2);font-weight:var(--w-h2-gross);margin:0 0 var(--sp-3)}
body.seite-start #erlebe p{color:rgba(255,255,255,.92);max-width:var(--measure);margin:0 auto var(--sp-2)}
body.seite-start #erlebe .knopf{margin-top:var(--sp-3)}
body.seite-start #erlebe .klein-vertrauen{font-size:var(--t-micro);line-height:var(--lh-micro);margin:var(--sp-2) auto 0;color:rgba(240,234,224,.82)}

/* ---------- Erlebe: Foto rechts neben dem Text, Porträt zentriert (31.10.2026) ---------- */
body.seite-start #promise .promise-bild img{object-position:50% 50%}
body.seite-start #erlebe::before{display:none}
body.seite-start main section#erlebe{overflow:hidden;padding-left:0;padding-right:0}
body.seite-start #erlebe .erlebe-foto{position:absolute;top:0;right:0;bottom:0;width:45%;z-index:-2;display:block}
body.seite-start #erlebe .erlebe-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
body.seite-start #erlebe .erlebe-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tief) 0%,rgba(29,28,26,.55) 30%,rgba(29,28,26,0) 65%)}
body.seite-start #erlebe .erlebe-innen{max-width:none;width:55%;margin:0;padding:0 var(--rand) 0 var(--rand)}
body.seite-start #erlebe .erlebe-innen>*{max-width:var(--measure);margin-left:auto;margin-right:auto}
@media (max-width:900px){
  body.seite-start main section#erlebe{padding-top:0}
  body.seite-start #erlebe .erlebe-foto{position:relative;width:100%;height:60vw;max-height:360px}
  body.seite-start #erlebe .erlebe-foto::after{background:linear-gradient(180deg,rgba(29,28,26,0) 55%,var(--tief) 100%)}
  body.seite-start #erlebe .erlebe-innen{width:100%;padding:0 var(--rand)}
}

/* ---------- Erlebe: ganzes Foto im Hintergrund, über den Deckungsgrad zurückgenommen (31.10.2026) ---------- */
body.seite-start #erlebe .erlebe-foto{position:absolute;inset:0;width:auto;height:auto;z-index:-1;display:block}
body.seite-start #erlebe .erlebe-foto::after{display:none}
body.seite-start #erlebe .erlebe-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;opacity:.32}
body.seite-start #erlebe .erlebe-innen{width:auto;max-width:720px;margin:0 auto;padding:0 var(--rand)}
@media (max-width:900px){
  body.seite-start main section#erlebe{padding-top:calc(var(--sp-section)*.85)}
  body.seite-start #erlebe .erlebe-foto{position:absolute;inset:0;height:auto;max-height:none}
  body.seite-start #erlebe .erlebe-foto img{object-position:60% 40%;opacity:.3}
}

/* ---------- Limitierung ohne Plus-Zeichen, Link zur Methode im Statement-Band (31.10.2026) ---------- */
body.seite-start #limitierung > .innen:last-child{padding-bottom:var(--sp-6)}
body.seite-start main section#limitierung{padding-bottom:0}
body.seite-start #statement .stat-link{margin:var(--sp-3) auto 0}
body.seite-start #statement .stat-link a{display:inline-block;padding-bottom:4px;border-bottom:1px solid var(--bronze);font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-label);letter-spacing:.04em;color:var(--text);text-decoration:none;transition:color .25s ease,border-color .25s ease}
body.seite-start #statement .stat-link a:hover{color:var(--bronze-text);border-color:var(--bronze-text)}
body.seite-start #statement .stat-link a:focus-visible{outline:2px solid var(--bronze-text);outline-offset:4px}

/* Methode: Zitat zentriert */
body.seite-methode .m-zitat{margin:0 auto;text-align:center}
body.seite-methode .m-zitat p{margin-left:auto;margin-right:auto}

/* ==========================================================================
   Unterseite «24 Stunden» (body.seite-24), Stand 31.10.2026, Entwurf.
   ========================================================================== */
body.seite-24{--t-h2-m:clamp(30px,3.1vw,45px);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}
body.seite-24 main h2{font-size:var(--t-h2-m);line-height:var(--lh-h2);font-weight:var(--w-h2-gross);letter-spacing:-.015em;margin-bottom:var(--sp-title)}
body.seite-24 main h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-strong);margin:0 0 var(--sp-1)}
body.seite-24 main p,body.seite-24 main li{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-text)}
body.seite-24 main section{padding-top:clamp(48px,5.5vw,80px);padding-bottom:clamp(48px,5.5vw,80px)}
body.seite-24 main section.paar{padding-top:0;padding-bottom:0}

body.seite-24 .z-kopf{padding-top:calc(150px + env(safe-area-inset-top,0px));padding-bottom:var(--sp-6)}
body.seite-24 .z-kopf h1{font-size:var(--t-h2-m);line-height:var(--lh-h1);font-weight:var(--w-display);letter-spacing:-.02em;max-width:18em;margin:0 0 var(--sp-3)}
body.seite-24 .z-kopf .gross{font-size:var(--t-lead);line-height:var(--lh-lead);font-weight:var(--w-text);max-width:var(--measure);margin:0}

body.seite-24 #vierundzwanzig .paar-txt .gross{font-size:var(--t-body);line-height:var(--lh-body);max-width:var(--measure);margin:0}

/* Reise: Zeit links, Station rechts, feine Linien, keine Karten */
body.seite-24 .z-reise{list-style:none;margin:0;padding:0;counter-reset:z}
body.seite-24 .z-reise li{display:grid;grid-template-columns:clamp(110px,14vw,200px) minmax(0,1fr);column-gap:var(--sp-col);padding:var(--sp-3) 0;border-top:1px solid var(--linie)}
body.seite-24 .z-reise li:last-child{border-bottom:1px solid var(--linie)}
body.seite-24 .z-zeit{font-size:var(--t-eyebrow);line-height:1.4;font-weight:var(--w-label);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--bronze-text);padding-top:.5em}
body.seite-24 .z-reise p{margin:0;max-width:var(--measure);color:var(--text-koerper)}

/* Heimreise: dunkel, Büchlein links */
body.seite-24 #heimreise{background:var(--tief);color:#fff}
body.seite-24 .z-buch{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-col);align-items:center}
body.seite-24 .z-buch img{width:clamp(120px,14vw,180px);height:auto}
body.seite-24 #heimreise h2{color:#fff;max-width:20em}
body.seite-24 #heimreise p{color:rgba(255,255,255,.92);max-width:var(--measure);margin:0}

/* Abschluss: hell und zurückhaltend */
body.seite-24 main section.z-abschluss{background:var(--sand-hell);text-align:center}
body.seite-24 .z-abschluss p{max-width:var(--measure);margin:0 auto var(--sp-3)}
body.seite-24 .z-abschluss .klein-vertrauen{font-size:var(--t-micro);line-height:var(--lh-micro);color:var(--text-koerper);margin:var(--sp-2) auto 0}
body.seite-24 .knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:0 var(--btn-pad);font-size:var(--t-btn);line-height:var(--lh-btn);font-weight:var(--w-strong);letter-spacing:.12em;text-decoration:none}
body.seite-24 .knopf.voll{color:var(--nacht)}
body.seite-24 .knopf:focus-visible{outline:2px solid var(--bronze-text);outline-offset:3px}

@media (max-width:760px){
  body.seite-24{--btn-h:52px;--btn-pad:24px}
  body.seite-24 .z-kopf{padding-top:calc(132px + env(safe-area-inset-top,0px));padding-bottom:var(--sp-4)}
  body.seite-24 .z-reise li{grid-template-columns:1fr;row-gap:var(--sp-1)}
  body.seite-24 .z-buch{grid-template-columns:1fr;row-gap:var(--sp-3)}
}

/* 24 Stunden: keine Weissfläche zwischen Bildern, Reise und dunklem Band (31.10.2026) */
body.seite-24 #reise{background:var(--sand-hell)}
body.seite-24 main section#reise{padding-top:var(--sp-6);padding-bottom:var(--sp-4)}
body.seite-24 .z-reise li:last-child{border-bottom:0}

/* Laufband-Knopf (Stimmen) kleiner, Erlebe: Person weiter rechts neben dem Text (31.10.2026) */
body.seite-start .laufband-knopf{padding:5px 10px;min-height:0;height:auto;font-size:12px;line-height:1;gap:6px;border-radius:6px}
body.seite-start .laufband-knopf svg{width:9px;height:9px}
body.seite-start .laufband-steuer{margin-top:14px}
@media (min-width:901px){
  body.seite-start #erlebe .erlebe-foto img{transform:scale(1.28);transform-origin:0 50%}
}

/* ---------- Promise kompakter, ohne Label (31.10.2026) ---------- */
body.seite-start main section#promise{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
body.seite-start #promise .promise-g{align-items:center}
body.seite-start #promise h2{margin-bottom:var(--sp-3)}
body.seite-start #promise .promise-text>p:not(.kicker){margin-bottom:var(--sp-2)}
body.seite-start #promise .promise-text>p.promise-schluss{margin-top:var(--sp-3);margin-bottom:0}
@media (max-width:900px){body.seite-start main section#promise{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}}

/* ==========================================================================
   Einheitlicher Abschnittsabstand (31.10.2026, Cla: «Abstände von zwei Abschnitten gleich»)
   Ein Wert für oben und unten in allen Inhaltsabschnitten: --sp-abschnitt (48 px mobil bis 80 px Desktop).
   Ausnahmen bleiben: Bild-Text-Paare (.paar, 0), Hero, Limitierung mit Foto, Abschluss mit Bildgrund.
   ========================================================================== */
:root{--sp-abschnitt:clamp(48px,5.5vw,80px);--sp-section:var(--sp-abschnitt)}
body.seite-start main section#promise,
body.seite-start main section#erlebe,
body.seite-start main section#statement,
body.seite-start main section#wer,
body.seite-start main section#faelle,
body.seite-start main section#routine,
body.seite-methode main section,
body.seite-24 main section:not(.paar){padding-top:var(--sp-abschnitt);padding-bottom:var(--sp-abschnitt)}
body.seite-start #dilemma{padding-top:var(--sp-abschnitt)}
body.seite-start main section#limitierung .lim-kopf{padding-top:var(--sp-abschnitt)}
body.seite-start #limitierung > .innen:last-child{padding-bottom:var(--sp-abschnitt)}
body.seite-methode main section#zitat{padding-top:var(--sp-abschnitt);padding-bottom:var(--sp-abschnitt)}
body.seite-24 main section#reise{padding-top:var(--sp-abschnitt);padding-bottom:var(--sp-abschnitt)}
body.seite-methode .m-kopf,body.seite-24 .z-kopf,body.seite-fragen .z-kopf{padding-bottom:var(--sp-abschnitt)}
@media (max-width:900px){body.seite-start main section#promise{padding-top:var(--sp-abschnitt);padding-bottom:var(--sp-abschnitt)}body.seite-start main section#erlebe{padding-top:var(--sp-abschnitt)}}

/* Fragen: Liste auf Weiss, damit der helle Abschluss darunter sich abhebt (Regel Übergänge) */
body.seite-fragen #fragen{background:#fff}
body.seite-methode main section#formel{padding-top:var(--sp-abschnitt)}

/* ---------- Erfahrungsbericht-Teaser: schmaler, niedriger, zurückhaltender (31.10.2026) ---------- */
body.seite-start #riccardo.geschichte{max-width:1150px;margin:var(--sp-3) auto 0}
body.seite-start #riccardo > summary{padding:30px 32px}
body.seite-start #riccardo .g-kicker{font-size:12px;letter-spacing:.14em;margin-bottom:6px}
body.seite-start #riccardo .g-titel{font-size:clamp(21px,1.9vw,26px);line-height:1.2;font-weight:var(--w-strong);margin:0 0 4px}
body.seite-start #riccardo .g-wer{margin:0;font-size:var(--t-micro);line-height:1.4}
body.seite-start #riccardo .g-inhalt{padding:0 32px var(--sp-4)}
@media (max-width:700px){body.seite-start #riccardo > summary{padding:24px}body.seite-start #riccardo .g-inhalt{padding:0 24px var(--sp-3)}}

/* ---------- Kompakter: Abschnittsabstand etwas kleiner, Abschluss mit Bild näher am Abschnitt davor (31.10.2026) ---------- */
:root{--sp-abschnitt:clamp(44px,5vw,72px);--sp-section:var(--sp-abschnitt)}
body.seite-start #anfrage,body.seite-methode .m-abschluss{min-height:0;padding-top:clamp(96px,11vh,130px);padding-bottom:var(--sp-abschnitt)}

/* Methode: Beispiel ohne obere Linie, Unterkante bündig mit dem Text links (31.10.2026) */
body.seite-methode .m-sichtbar-g{align-items:end}
body.seite-methode .m-sichtbar-g .m-beispiel{border-top:0;padding-top:0}
body.seite-methode .m-sichtbar-g .m-beispiel p.m-beispiel-hinweis{margin-bottom:0}
body.seite-methode .m-sichtbar-text .m-text:last-child{margin-bottom:0}
@media (max-width:900px){body.seite-methode .m-sichtbar-g{align-items:start}}

/* ---------- Startseite: Plus klappt zwei weitere Kundenfälle auf, Teaser mit Abstand darunter (31.10.2026) ---------- */
body.seite-start .faelle-klappe{margin:var(--sp-3) 0 0}
body.seite-start .faelle-klappe>summary.nur-plus{border-top:0;padding:10px 0;min-height:0;justify-content:flex-end}
body.seite-start .faelle-klappe .klappe-inhalt{padding-top:var(--sp-3)}
body.seite-start .faelle-klappe .faelle{margin-top:0}
body.seite-start .faelle-klappe + #riccardo{margin-top:var(--sp-6)}

body.seite-methode .m-sichtbar-g .m-beispiel .m-werte{margin-bottom:0}

/* Plus der Fälle: höher, Aussenkante bündig mit dem Teaser (max. 1150 px, zentriert) */
body.seite-start .faelle-klappe{max-width:1150px;margin:0 auto}
body.seite-start .faelle-klappe>summary.nur-plus{padding:0;min-height:0}
body.seite-start .faelle-klappe>summary.nur-plus .zeichen{margin-right:0}
body.seite-start #faelle .faelle{margin-bottom:0}

/* Fall Matthias Zwyssig: keine Linie oben */
body.seite-start #faelle>.innen>.faelle>.fall:first-child,.faelle-seite .fall:first-child{border-top:0}

/* Hero 31.10.2026: grosses Foto, weicher Uebergang aus dem Anthrazit (Maske, keine Kante). Logo-Leiste dunkel */
body.seite-start .hero.hero-b{--hero-grund:#222222;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:stretch;min-height:min(100svh,860px);padding:0;overflow:hidden;background:var(--hero-grund);isolation:isolate}
body.seite-start .hero.hero-b::after{display:none}
body.seite-start .hero-b picture{display:contents}
body.seite-start .hero-b .text-b{grid-area:1/1;z-index:1;display:flex;align-items:center;padding:clamp(100px,13vh,140px) var(--rand) clamp(36px,5vh,60px)}
body.seite-start .hero-b .text-b .innen{width:100%;max-width:none}
body.seite-start .hero-b .text-b .innen>*:not(h1){max-width:min(100%,27em)}
body.seite-start .hero-b h1{font-size:clamp(32px,3.6vw,52px);line-height:1.08;max-width:none;margin-bottom:var(--sp-3)}
body.seite-start .hero.hero-b .hero-sub{color:var(--sand);margin-bottom:var(--sp-3);font-size:clamp(17px,1.38vw,20px);max-width:none}
body.seite-start .hero-b .hero-text{font-size:var(--t-body);line-height:var(--lh-body);color:rgba(255,255,255,.88);margin:0}
body.seite-start .hero-b .hero-text .versprechen{display:block;font-weight:500;color:#fff;margin-bottom:var(--sp-1)}
body.seite-start .hero-b .reihe{margin-top:var(--sp-4)}
body.seite-start .hero-b .klein-vertrauen{margin:var(--sp-2) 0 0;color:var(--sand);letter-spacing:.04em}
body.seite-start .hero-b .bild-b{grid-area:1/1;justify-self:end;width:66%;position:relative;min-height:0}
body.seite-start .hero-b .bild-b .grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%;animation:none;-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.05) 6%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.92) 32%,#000 38%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.05) 6%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.45) 19%,rgba(0,0,0,.72) 26%,rgba(0,0,0,.92) 32%,#000 38%)}
body.seite-start .hero-b .beleg{grid-area:2/1;margin:0;position:relative;z-index:1;background:#292929;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;padding-top:clamp(20px,2.2vw,28px);padding-bottom:clamp(20px,2.2vw,28px)}
body.seite-start .hero-b .beleg .lg{opacity:.72}
@media (min-width:901px) and (max-width:1240px){
  body.seite-start .hero-b .bild-b .grund{object-position:40% 50%}
}
@media (max-width:900px){
  body.seite-start .hero.hero-b{display:flex;flex-direction:column;min-height:0}
  body.seite-start .hero-b .bild-b{order:-1;flex:none;width:100%;height:clamp(300px,86vw,440px);margin-top:70px;margin-bottom:-20px}
  body.seite-start .hero-b .bild-b .grund{object-position:50% 40%;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 62%,rgba(0,0,0,.6) 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 62%,rgba(0,0,0,.6) 80%,transparent 100%)}
  body.seite-start .hero-b .bild-b::after{display:none}
  body.seite-start .hero-b .text-b{padding:0 var(--rand) 36px;position:relative}
  body.seite-start .hero-b .text-b .innen>*:not(h1){max-width:none}
  body.seite-start .hero-b h1{font-size:clamp(32px,8.6vw,44px)}
  body.seite-start .hero.hero-b .hero-sub{font-size:clamp(18px,4.8vw,22px)}
}

/* «Dir fehlt nicht das Potenzial» 31.10.2026: ruhiger Gegenpol, Headline und Text kleiner, Abstaende gestrafft, mittig */
body.seite-start main section#statement{padding-top:clamp(40px,4.6vw,64px);padding-bottom:clamp(40px,4.6vw,64px)}
body.seite-start #statement .innen{max-width:820px}
body.seite-start #statement h2{font-size:clamp(28px,2.95vw,42px);line-height:1.18;margin:0 auto var(--sp-2)}
body.seite-start #statement .stat-zeile{max-width:17em}
body.seite-start #statement .stat-text{font-size:clamp(16px,1.2vw,17.5px);line-height:1.6;max-width:46em;margin:0 auto var(--sp-1);text-wrap:balance}
body.seite-start #statement .stat-text:last-child{margin-bottom:0}

/* Hero «voll» 31.10.2026: ganzes Foto hinter dem Text, kein Verlauf. Die Variante mit Verlauf liegt als index-hero-verlauf.html */
body.seite-start .hero-voll .bild-b{justify-self:stretch;width:100%}
body.seite-start .hero-voll .bild-b .grund{object-position:50% 100%;-webkit-mask-image:none;mask-image:none}
body.seite-start .hero-voll .text-b{align-items:flex-end;aspect-ratio:1600/1065;padding-top:clamp(100px,13vh,140px)}
body.seite-start .hero.hero-voll{min-height:0}
@media (min-width:901px){
  body.seite-start .hero-voll .text-b{aspect-ratio:auto;min-height:clamp(540px,51vw,780px)}
  body.seite-start .hero-voll .bild-b{justify-self:end;width:80%;overflow:hidden}
  body.seite-start .hero-voll .bild-b .grund{inset:auto auto auto 0;top:-11.8vw;width:125%;max-width:none;height:auto;object-fit:fill;object-position:0 0}
}
body.seite-start .hero-voll .bild-b::after{display:block;content:"";position:absolute;inset:0;background:rgba(20,20,19,.28);pointer-events:none}
@media (max-width:900px){
  body.seite-start .hero-voll .text-b{aspect-ratio:auto}
  body.seite-start .hero-voll .bild-b::after{display:none}
  body.seite-start .hero-voll .bild-b{margin-bottom:-20px}
  body.seite-start .hero-voll .bild-b .grund{object-position:50% 40%;-webkit-mask-image:none;mask-image:none}
}

/* Hero «fein» 31.10.2026: Fine-Tuning der Variante mit weichem Uebergang. Koepfe hoeher, Headline reicht in den Uebergang, Abstaende gestrafft */
body.seite-start .hero-fein h1{margin-bottom:var(--sp-2)}
body.seite-start .hero.hero-fein .hero-sub{margin-bottom:var(--sp-2)}
body.seite-start .hero-fein .reihe{margin-top:var(--sp-3)}
body.seite-start .hero-fein .klein-vertrauen{margin-top:12px}
@media (min-width:901px){
  body.seite-start .hero.hero-fein{min-height:0}
  body.seite-start .hero-fein .text-b{min-height:clamp(520px,47vw,700px);padding-top:clamp(84px,10vh,110px);padding-bottom:clamp(28px,4vh,44px)}
  body.seite-start .hero-fein .bild-b{width:74%;overflow:hidden}
  body.seite-start .hero-fein .bild-b .grund{inset:auto auto auto 0;top:-4.9vw;width:108.1%;max-width:none;height:auto;object-fit:fill;object-position:0 0;
    -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.08) 10.4%,rgba(0,0,0,.3) 20.8%,rgba(0,0,0,.6) 26%,rgba(0,0,0,.85) 29.5%,#000 32%);
    mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.08) 10.4%,rgba(0,0,0,.3) 20.8%,rgba(0,0,0,.6) 26%,rgba(0,0,0,.85) 29.5%,#000 32%)}
}

/* Hero «Kante» 31.10.2026: Vorschau mit klarer vertikaler Bildkante statt Verlauf (nur index-hero-kante.html) */
@media (min-width:901px){
  body.seite-start .hero-kante .bild-b{width:65%}
  body.seite-start .hero-kante .bild-b .grund{left:-8.6vw;width:123.1%;-webkit-mask-image:none;mask-image:none}
  body.seite-start .hero-kante .bild-b::before{content:"";position:absolute;left:0;top:0;width:min(300px,23vw);height:70%;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(26,26,25,.74) 0,rgba(26,26,25,.55) 38%,rgba(26,26,25,0) 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 78%,transparent 100%)}
}

/* Hero «mein» 31.10.2026: Variante nach Entwurf von Cla (Bild 48): Kante bei 18 %, Personen gross und weit rechts, Headline ueber der Kante. Vorher: index-hero-weich.html */
@media (min-width:901px){
  body.seite-start .hero-mein .bild-b{width:82%;z-index:0}
  body.seite-start .hero-mein .bild-b .grund{left:-1.8vw;top:-13.3vw;width:131.7%;-webkit-mask-image:none;mask-image:none}
  body.seite-start .hero-mein .bild-b::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(24,24,23,.58) 0,rgba(24,24,23,.46) 28%,rgba(24,24,23,.2) 52%,rgba(24,24,23,.08) 70%,rgba(24,24,23,.06) 100%);-webkit-mask-image:none;mask-image:none;width:auto;height:auto}
}

/* «Was ist eine Limitierung?» am Handy: der Text beginnt unter dem Foto (die Abschnitts-Abstandsregel hatte das Mobil-Padding ueberschrieben) */
@media (max-width:760px){
  body.seite-start main section#limitierung .lim-kopf{padding-top:calc(var(--sp-abschnitt) + 56vw)}
}

/* Hero «mein» kompakter 31.10.2026: Hoehe rund 60 px weniger, Abstaende der Textelemente enger */
body.seite-start .hero-mein h1{margin-bottom:10px}
body.seite-start .hero.hero-mein .hero-sub{margin-bottom:6px}
body.seite-start .hero-mein .hero-text .versprechen{margin-bottom:4px}
@media (min-width:901px){
  body.seite-start .hero-mein .text-b{min-height:clamp(470px,42.8vw,640px)}
}

/* Hero «mein» Feinjustierung 31.10.2026: Knopf ganz auf Anthrazit (Kante rueckt so weit nach rechts wie noetig: 18 px hinter den Knopf), CTA 70 px unter dem Text, Subline etwas weiter vom Text */
body.seite-start .hero-mein .hero-sub{margin-bottom:18px}
body.seite-start .hero-mein .reihe{margin-top:24px}
body.seite-start .hero-mein .knopf{padding-left:22px;padding-right:22px;white-space:nowrap}
@media (min-width:901px){
  body.seite-start .hero-mein .bild-b{width:calc(100% - var(--rand) - 272px)}
  body.seite-start .hero-mein .bild-b .grund{left:calc(16.2vw - var(--rand) - 272px);width:108vw}
}

/* Hero «mein»: Text sitzt unten, Hinweis hat zur Kante unten denselben Abstand wie «Fuer diese Firmen» zur Kante oben (31.10.2026) */
@media (min-width:901px){
  body.seite-start .hero-mein .text-b{align-items:flex-end;padding-bottom:var(--hero-fuss,28px)}
}

/* Hero «mein» 31.10.2026 (Entscheid Cla): Kante wieder bei 18 %, Knopf ragt ueber die Kante, Mikrotext buendig mit dem Knopf, Headline auf Hoehe der Muetze */
body.seite-start .hero-mein .knopf{padding-left:32px;padding-right:32px}
body.seite-start .hero-mein .cta-block{display:inline-block;vertical-align:top}
body.seite-start .hero-mein .cta-block .reihe{margin-top:24px}
@media (min-width:901px){
  body.seite-start .hero-mein .bild-b{width:82%}
  body.seite-start .hero-mein .bild-b .grund{left:-1.8vw;width:131.7%}
  body.seite-start .hero-mein .cta-block .klein-vertrauen{width:0;min-width:100%;font-size:calc(var(--t-btn) * .934);letter-spacing:0;text-align:justify;text-align-last:justify;white-space:normal}
}
@media (min-width:1200px){
  body.seite-start .hero-mein .text-b{position:relative}
  body.seite-start .hero-mein .text-b .innen h1{position:absolute;left:var(--rand);top:calc(13.2vw - 8px);margin:0}
  body.seite-start .hero-mein .text-b .innen{position:static;padding-top:0}
  /* Abstaende getauscht (Cla): Headline zu Subline vorher 71 px, Text zu Knopf vorher 33 px (Grundlinie bis Knopf) */
  body.seite-start .hero-mein .cta-block .reihe{margin-top:62px}
}

/* Hero am Handy und Tablet: Knopf deutlich weiter unter dem Text (Cla, 31.10.2026) */
@media (max-width:900px){
  body.seite-start .hero-mein .cta-block .reihe{margin-top:48px}
}

/* Erfahrungsbericht-Teaser schmaler, Plus buendig mit dessen rechtem Rand (Cla, 31.10.2026) */
@media (min-width:701px){
  body.seite-start #riccardo.geschichte{max-width:720px}
  body.seite-start .faelle-klappe>summary.nur-plus{max-width:720px;margin-left:auto;margin-right:auto}
}