/* clamosca.ch: gemeinsames Stylesheet der Startseite und der Unterseiten (seit 08.10.2026, vorher inline in index.html). */
:root{
  --nacht:#161615; --tief:#1D1C1A; --anthrazit:#333432;
  --sand:#E1D9C2; --sand-hell:#F2EEE6; --weiss:#FFFFFF;
  --bronze:#A69075; --bronze-tief:#8a7760; --bronze-text:#6B5A47;
  --text:#333432; --text-koerper:#4b4c45; --text-leise:#625e58;
  --hell-leise:rgba(255,255,255,.82);
  --linie:rgba(51,52,50,.18); --linie-hell:rgba(255,255,255,.22);
  --rand:clamp(20px,5.5vw,88px);
  --schrift:"Urbanist","Urbane","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--schrift);font-weight:300;color:var(--text-koerper);background:var(--weiss);line-height:1.62;font-size:18px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0;color:var(--text);text-wrap:balance}
/* Light traegt ab 17px. Alles darunter bekommt Regular, sonst wird es duenn.
   Urbanist Light 300 und SemiBold 600 sind die beiden tragenden Schnitte. */
.wechsel-l p,.wechsel-r p,.haus-karte p,.haus-meta,.haus-dazu p,.fall-txt p,.fall-wer span,
.stimme p,.stimme span,.spalte-falsch li,.spalte-richtig li,.mitnehmen li,.programme-liste li,
.beleg-text,.beleg-zeile,.klein-vertrauen,.routine-klein,.routine-hinweis,.wirkung-zitat span,
.wirkung-schluss span,.leistung p,.recht p,.recht li,.recht dd,.wa,.fuss-spalte p,footer p,
details:not(.klappe) p,.formel-legende span{font-weight:400}
p,li,summary,dd,dt,figcaption,blockquote,.lead,.gross{text-wrap:pretty}
h2{font-size:clamp(32px,4.8vw,58px);line-height:1.05;margin-bottom:30px}
h3{font-size:clamp(19px,2vw,24px);line-height:1.2;margin-bottom:10px}
p{margin:0 0 16px}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--bronze-text);margin-bottom:18px}
.bildgrund .kicker,.tex .kicker,.hero .kicker,.wirkung .kicker{color:var(--bronze)}
section{padding:clamp(88px,12vw,172px) var(--rand)}
.innen{max-width:1180px;margin:0 auto}
.gross{font-size:clamp(18px,1.7vw,21px);line-height:1.58;text-wrap:pretty}
.knopf{display:inline-block;padding:16px 28px;border:1px solid currentColor;border-radius:999px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-weight:500;cursor:pointer;background:transparent;color:inherit;font-family:inherit}
.knopf.voll{background:var(--bronze);border-color:var(--bronze);color:var(--nacht)}
.knopf.voll:hover{background:var(--bronze-tief);border-color:var(--bronze-tief)}
.knopf:not(.voll):hover{background:rgba(0,0,0,.05)}
.bildgrund .knopf:not(.voll):hover{background:rgba(255,255,255,.1)}
.knopf:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

/* Sprunglink */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;background:var(--nacht);color:#fff;padding:14px 20px;text-decoration:none}
.sprung:focus{left:12px;top:12px}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--rand) 18px;color:var(--weiss);transition:background .35s}
/* 07.10.2026: Beim Scrollen blendet nur der dunkle Grund ein. Logo, Abstaende und Hoehe bleiben gleich, sonst rutschen Menue und Knopf und brechen um. */
.nav.fest{background:rgba(22,22,21,.94)}
.marke-block{display:flex;align-items:center;gap:16px;flex:none;min-width:0}
.marke{display:block;line-height:0;flex:none}
.marke-zusatz{position:relative;padding-left:17px;font-size:14px;line-height:1.35;font-weight:500;letter-spacing:.01em;color:#E2D2B8;white-space:nowrap} /* 07.10.2026 (Cla): Zusatz in Gold, die Hero-Oberzeile mit demselben Text ist dafür weg. #E2D2B8 = helles Ende des Gold-Verlaufs der Seite (Verlaufsblock Nr. 2). Bronze #A69075 (2,5:1) und #C3AB88 (3,4:1) erreichen über dem Hero-Bild kein AA, #E2D2B8 mindestens 5,1:1, gescrollt 10,5:1 */
.marke-zusatz::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:32px;background:rgba(255,255,255,.26)}
@media (max-width:1100px){.marke-zusatz{font-size:11.5px;padding-left:13px}} /* 07.10.2026: vorher 1040, zwischen 1041 und 1080 px war kaum Platz */
@media (max-width:900px){.marke-zusatz{display:none}}
/* 07.10.2026 (Cla: «Oberzeilen nur auf dem Handy wieder einblenden. Und fürs Tablet.»): Die Hero-Oberzeile steht nur dort, wo der Zusatz in der Kopfzeile fehlt. Nie doppelt. */
@media (min-width:901px){.nur-bis-900{display:none}}
.marke img{display:block;height:44px;width:auto}
@media (max-width:760px){.marke img{height:38px}}
.nav .knopf{padding:11px 20px;font-size:14px}
/* Hauptmenü (08.10.2026): Methode, 24 Stunden, Fälle, Über mich, Ressourcen, Blog.
   Ab 1300 px in der Kopfzeile, darunter hinter dem Knopf «Menü» als Klappe unter der Kopfzeile. */
.hauptnav{margin-left:auto}
.hauptnav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:14.5px;letter-spacing:.04em;font-weight:500}
.hauptnav ul a{text-decoration:none;color:rgba(255,255,255,.88);padding-bottom:3px;border-bottom:1px solid transparent}
.hauptnav ul a:hover{color:var(--weiss)}
.hauptnav ul a[aria-current="page"]{color:var(--weiss);border-bottom-color:var(--bronze)}
.menue-knopf{display:none;align-items:center;gap:10px;background:transparent;border:1px solid rgba(255,255,255,.42);border-radius:999px;color:var(--weiss);font:inherit;font-size:14px;font-weight:500;letter-spacing:.04em;padding:9px 16px;cursor:pointer}
.menue-knopf:hover{border-color:var(--weiss)}
.menue-striche{position:relative;display:inline-block;width:16px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-sizing:border-box}
.menue-striche::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.hauptnav.offen .menue-striche{border-color:transparent}
.hauptnav.offen .menue-striche::after{transform:rotate(45deg)}
.hauptnav.offen .menue-striche::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transform:rotate(-45deg)}
@media (max-width:1299px){
  .menue-knopf{display:inline-flex}
  .hauptnav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--nacht);padding:6px var(--rand) 24px;border-top:1px solid rgba(255,255,255,.12)}
  .hauptnav.offen ul{display:flex}
  .hauptnav ul a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:17px;letter-spacing:.02em}
  .hauptnav ul a[aria-current="page"]{color:var(--sand);border-bottom-color:rgba(255,255,255,.1)}
  .nav.menue-auf{background:var(--nacht)}
}
@media (max-width:420px){.menue-knopf{padding:9px 12px}.menue-wort{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:400px){.nav{gap:12px}} /* 07.10.2026: damit «Tiefenanalyse buchen» ab 360 px einzeilig bleibt */
@media (max-width:760px){.nav .knopf{padding:9px 13px;font-size:10.5px;letter-spacing:.06em}}

/* Bildflächen */
.bildgrund{position:relative;color:var(--weiss);isolation:isolate;overflow:hidden;background-color:var(--nacht)}
.bildgrund>img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);z-index:-2}
.bildgrund::before{content:"";position:absolute;inset:0;background:var(--decke,rgba(18,18,17,.55));z-index:-1}
.bildgrund p{color:var(--hell-leise)}
.bildgrund .gross{color:rgba(255,255,255,.92)}
.bildgrund .kicker{color:var(--sand)}
.bildgrund h1,.bildgrund h2,.bildgrund h3,.hero h1,.hero h2,.tex h1,.tex h2,.tex h3{color:var(--weiss)}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:140px var(--rand) clamp(60px,9vw,110px);color:var(--weiss);background:var(--nacht);overflow:hidden}
.hero .innen{position:relative;z-index:1;width:100%;max-width:none}
.hero h1{font-size:clamp(38px,6.4vw,74px);line-height:1.05;letter-spacing:-.02em;margin-bottom:22px;max-width:16em}
.hero .lead{font-size:clamp(19px,2vw,24px);font-weight:300;line-height:1.5;max-width:34em;color:rgba(255,255,255,.92);margin-bottom:8px;text-wrap:pretty}
.hero .lead .versprechen{display:block;font-weight:600;color:#fff;margin-bottom:6px}
.hero .reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,13,12,.86) 0%,rgba(13,13,12,.66) 30%,rgba(13,13,12,.28) 62%,rgba(13,13,12,.12) 100%);z-index:-1}
.klein-vertrauen{font-size:14px;color:var(--sand);letter-spacing:.04em;margin:14px 0 0;max-width:46em}
.fuer-kurz{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 14px;max-width:760px;margin:0 auto 30px;font-size:14px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.86)}
.fuer-kurz b{flex:1 1 100%;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:2px}
.fuer-kurz span{position:relative;padding-left:15px}
.fuer-kurz span::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--bronze)} /* 06.10.2026: Punkt statt «+», sonst verwechselbar mit dem Klapp-Plus */
.haus-cta .fuer-kurz{color:var(--text-koerper);margin-bottom:26px}
.haus-cta .fuer-kurz b{color:var(--bronze-text)}
.haus-cta .fuer-kurz span::before{background:var(--bronze-tief)}

/* Geteilte Fläche */
.paar{display:grid;grid-template-columns:1fr 1fr;min-height:0;padding:0}
.paar-txt{padding:clamp(56px,7vw,100px) var(--rand);display:flex;flex-direction:column;justify-content:center}
.paar-bild{position:relative;min-height:420px}
.paar-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.paar.gedreht .paar-bild{order:-1}
.paar-bild.zwei{min-height:560px}
/* 07.10.2026 (Cla: «wie viel Bild es braucht, dass es oben und unten gleich ist»): die zwei Bilder teilen sich die Hoehe des Textes.
   Vorher bestimmten sie selbst die Hoehe (Hochformat, 1920 px am Laptop) und ueber und unter dem Text blieben 240 bis 264 px leer. */
.paar-bild.zwei img{position:absolute;left:0;width:100%;height:50%}
.paar-bild.zwei img:first-child{top:0}
.paar-bild.zwei img:last-child{top:50%}
.paar-txt>:last-child{margin-bottom:0}
.band{display:block;width:100%;margin:0;padding:0;line-height:0;background:var(--nacht)}
.band img{display:block;width:100%;height:auto;max-height:52vh;object-fit:cover;object-position:center}
@media (max-width:860px){.band img{max-height:34vh}}
/* Einspaltig: erstes Bild ueber den Text, zweites darunter */
@media (max-width:980px){
  #vierundzwanzig .paar-bild.zwei{display:contents}
  #vierundzwanzig .paar-bild.zwei img{position:relative;inset:auto;width:100%;height:clamp(210px,46vw,330px);object-fit:cover}
  #vierundzwanzig .paar-bild.zwei img:first-child{order:1}
  #vierundzwanzig .paar-txt{order:2}
  #vierundzwanzig .paar-bild.zwei img:last-child{order:3}
}
@media (max-width:980px){.paar{grid-template-columns:1fr}.paar-bild{min-height:60vh}.paar.gedreht .paar-bild{order:0}}
/* Portraet: Kopf bleibt drin, auch wenn die Zelle flach wird */
#cla .paar-bild img{object-position:50% 4%}
@media (max-width:980px){#cla .paar-bild{min-height:min(70vh,120vw)}}

/* Vier Karten */
.vier-karten{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;gap:0;margin-top:50px;border-top:1px solid var(--linie)}
.vier-karten>div{display:grid;grid-template-rows:subgrid;grid-row:span 3;padding:26px 22px 0 0;border-right:1px solid var(--linie);margin-right:22px}
.vier-karten>div:last-child{border-right:0;margin-right:0}
.vier-karten .nr{font-size:13px;color:var(--bronze-text);font-weight:600;letter-spacing:.14em;display:block;margin-bottom:14px}
@media (max-width:980px){.vier-karten{grid-template-columns:1fr 1fr}.vier-karten>div{border-right:0;margin-right:0;border-top:1px solid var(--linie);padding-top:22px}}
@media (max-width:620px){.vier-karten{grid-template-columns:1fr}}

.programme-liste{list-style:none;padding:0;margin:26px 0 22px}
.programme-liste li{position:relative;padding:12px 0 12px 24px;border-bottom:1px solid var(--linie);font-size:16px;line-height:1.55}
.programme-liste li:last-child{border-bottom:0}
.programme-liste li::before{content:"\2717";position:absolute;left:0;top:12px;color:rgba(51,52,50,.42);font-size:13px}
.programme-liste b{color:var(--text);font-weight:600}

/* Der Kreis */
#kreis{background:var(--sand-hell)}
.kreis{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,72px);row-gap:0}
.kreis h3{margin-bottom:16px}
.kreis p{font-size:16.5px;line-height:1.62}
.kreis .satz{list-style:none;padding:0;margin:0 0 17px}
.kreis .satz li{position:relative;padding:4px 0 4px 22px;font-size:17px;line-height:1.5;color:var(--text);font-weight:500}
.kreis .satz li::before{content:"\2192";position:absolute;left:0;top:4px;color:rgba(51,52,50,.42)}
.kreis .programme{font-size:16.5px;line-height:1.6;color:var(--text-leise)}
.kreis .punkt{grid-column:1/-1;margin-top:44px;padding-top:28px;border-top:1px solid var(--linie);text-align:center}
.kreis .punkt p{max-width:860px;margin:0 auto;font-size:clamp(20px,2.3vw,28px);line-height:1.35;color:var(--text);font-weight:500}
#dilemma{padding-bottom:clamp(46px,6.2vw,84px)}
.kreis-lead{max-width:none}
.kreis{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}
.kreis-txt h3{margin-top:30px}
.kreis-txt h3:first-child{margin-top:0}
.kreislauf{margin:0 auto;width:100%;max-width:540px}
.kl-feld{position:relative;width:100%;aspect-ratio:1/1}
.kl-kern{fill:#A69075;opacity:.6}
.kl-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kl-spur{fill:none;stroke:rgba(166,144,117,.22);stroke-width:.35}
.kl-bogen{fill:none;stroke:#A69075;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kl-st{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid rgba(51,52,50,.12);padding:10px 16px 11px;text-align:center;font-size:16px;font-weight:600;line-height:1.25;color:var(--text);white-space:nowrap}
.kl-st span{display:block;font-size:12px;letter-spacing:.2em;color:var(--bronze-text);font-weight:600;margin-bottom:3px}
.kl-st small{display:block;font-size:14px;font-weight:500;color:var(--text-leise);margin-top:4px;letter-spacing:.01em}
.kl-o{left:50%;top:19%}.kl-r{left:81%;top:50%}.kl-u{left:50%;top:81%}.kl-l{left:19%;top:50%;white-space:normal;width:9.5em}
.kl-mitte{margin:14px auto 0;max-width:22em;text-align:center;font-size:clamp(16px,1.6vw,19px);line-height:1.35;font-weight:600;color:var(--bronze-text);text-wrap:balance}
.kreis-schluss{display:block;margin-top:0}
/* Teufelskreis als Modell (07.10.2026): Icons statt Zahlen, Beispielsätze links und rechts, das Ziel in der Mitte.
   Ab 1120 px drei Spalten (Sätze · Kreis · Sätze), das Ziel in der Kreismitte. Darunter die Sätze in zwei Spalten über dem Kreis,
   unter 620 px untereinander, das Ziel steht unter dem Kreis. */
.kreis-zitat{font-size:17px;line-height:1.6;max-width:none;margin:0}
.kreis-modell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:center;margin-top:clamp(36px,4vw,56px)}
.kl-beispiele{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around;align-self:stretch;gap:24px}
.kl-beispiele li{font-size:clamp(17px,1.45vw,20px);line-height:1.4;font-weight:400;color:var(--text);text-wrap:balance}
.kl-links{text-align:right}
.kl-links li{padding-right:18px;border-right:2px solid rgba(166,144,117,.55)}
.kl-rechts li{padding-left:18px;border-left:2px solid rgba(166,144,117,.55)}
.kreislauf{position:relative}
.kl-ic{display:block;width:26px;height:26px;margin:0 auto 6px;fill:none;stroke:var(--bronze-tief);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kl-ziel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28%;margin:0;text-align:center;font-size:clamp(14px,1.15vw,16px);line-height:1.4;font-weight:600;color:var(--text);text-wrap:balance}
.kl-ziel span{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:8px}
@media (max-width:1119px){
  .kreis-modell{grid-template-columns:1fr 1fr;row-gap:22px}
  .kl-ziel{position:static;transform:none;width:auto;margin:22px auto 0;max-width:24em;font-size:17px}
  .kl-links{grid-column:1;grid-row:1;text-align:left}
  .kl-rechts{grid-column:2;grid-row:1}
  .kreislauf{grid-column:1/-1;grid-row:2;margin-top:10px}
  .kl-beispiele{gap:18px;justify-content:flex-start}
  .kl-links li{padding:0 0 0 16px;border-right:0;border-left:2px solid rgba(166,144,117,.55)}
  .kl-rechts li{padding-left:16px}
}
@media (max-width:620px){
  .kreis-modell{grid-template-columns:1fr}
  .kl-links,.kl-rechts{grid-column:1}
  .kl-rechts{grid-row:2}
  .kreislauf{grid-row:3}
}

@media (min-width:881px) and (max-width:1120px){.kl-st{font-size:14.5px;padding:8px 12px 9px}.kl-l{width:8em}}
@media (max-width:880px){.kreislauf{max-width:460px}}
@media (max-width:520px){.kl-st{font-size:14px;padding:7px 10px 8px}.kl-st span{font-size:12px;margin-bottom:2px}.kl-st small{font-size:14px;white-space:normal}.kl-u{width:14em;white-space:normal;top:83%}.kl-l{width:7.2em}.kl-mitte{font-size:15.5px;margin-top:6px}}
@media (max-width:880px){.kreis{grid-template-columns:1fr;row-gap:34px;margin-top:30px}.kreis-txt{order:-1}.kreis .punkt{margin-top:30px}}

/* Formel: seit 05.10.2026 eine dunkle Platte am Ende des Teufelskreises (vorher eigener dunkler Abschnitt .formel) */
/* Das Modell */
.modell{margin:clamp(44px,5vw,72px) auto clamp(34px,4vw,52px);max-width:640px;text-align:center}
.modell svg{width:100%;height:auto;display:block;overflow:visible}
.modell text{font-family:inherit;fill:#fff}
.m-seite{font-size:25px;font-weight:600;letter-spacing:.09em;fill:var(--sand)}
.m-phase{font-size:18px;font-weight:400;fill:rgba(255,255,255,.62)}
.m-ring{font-size:19px;font-weight:600;letter-spacing:.20em;fill:rgba(255,255,255,.46)}
.m-fein{font-size:17px;fill:rgba(255,255,255,.40)}
.m-kern{font-size:30px;font-weight:300;fill:#FFF7EA}
.modell figcaption{margin-top:22px;font-size:16.5px;line-height:1.6;color:var(--hell-leise);max-width:520px;margin-left:auto;margin-right:auto}
@media (max-width:620px){.m-seite{font-size:30px}.m-phase{font-size:21px}.m-ring{font-size:22px}.m-fein{font-size:19px}.m-kern{font-size:34px}}
.formel-box .zahl{font-family:var(--schrift);font-size:clamp(26px,3.4vw,40px);font-weight:300;letter-spacing:-.01em;color:var(--sand);text-align:center;margin:34px 0}

.formel-box{border:1px solid rgba(255,255,255,.2);background:var(--tief);color:#fff;padding:clamp(24px,3vw,40px) clamp(20px,3vw,44px);margin:clamp(44px,5vw,64px) 0 30px}
.formel-schluss{margin:0;max-width:none;color:var(--text-koerper)}
.formel-legende{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,38px);margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.formel-legende b{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);margin-bottom:7px}
.formel-legende span{font-size:15px;line-height:1.55;color:var(--hell-leise)}
@media (max-width:820px){.formel-legende{grid-template-columns:1fr;gap:18px}}

/* Hausbau */
#aufbau{background:var(--sand-hell)}
#aufbau .haus-karte{border-top-color:rgba(51,52,50,.24)}
.haus-g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,46px);margin-top:52px}
.haus-karte{border-top:1px solid var(--linie);padding-top:24px}
.haus-bild{display:block;margin-bottom:18px}
.haus-nr{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-text);font-weight:600;margin-bottom:10px}
.haus-karte h3{margin-bottom:4px}
.haus-meta{display:block;font-size:14px;color:var(--text-leise);margin-bottom:13px}
.haus-karte p{margin:0;font-size:16px;line-height:1.6}
.haus-cta{text-align:center;margin-top:52px}
.haus-hybrid{margin:34px 0 0;padding:18px 22px;background:rgba(166,144,117,.10);border-left:2px solid var(--bronze);font-size:17px;line-height:1.6;font-weight:400}
.haus-hybrid b{color:var(--text);font-weight:600}
.haus-dazu{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px);margin-top:40px;padding-top:26px;border-top:1px solid rgba(51,52,50,.24)}
.haus-dazu b{display:block;font-size:15px;color:var(--bronze-tief);margin-bottom:5px}
.haus-dazu p{margin:0;font-size:15.5px;line-height:1.55}
@media (max-width:880px){.haus-g,.haus-dazu{grid-template-columns:1fr}.haus-g{gap:26px}}

/* Leistungs-Liste */
.leistung{list-style:none;padding:0;margin:44px 0 0;border-top:1px solid var(--linie)}
.leistung li{padding:24px 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:start}
.leistung b{display:block;font-size:15px;color:var(--bronze-tief);letter-spacing:.02em}
.leistung h3{margin-bottom:6px}
@media (max-width:700px){.leistung li{grid-template-columns:1fr}}

/* Wirkung */
.wirkung{background:var(--tief);color:#fff}
.wirkung h2,.wirkung h3{color:#fff}
.wirkung .gross{color:rgba(255,255,255,.9)}
.wirkung-zitat{margin:48px auto 6px;max-width:900px;text-align:center}
.wirkung-zitat p{font-size:clamp(23px,3.1vw,36px);line-height:1.3;color:var(--sand);font-weight:300;letter-spacing:-.01em;margin:0 0 15px}
.wirkung-zitat span{font-size:14px;line-height:1.5;color:var(--weiss);display:block}
.wirkung-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,58px);margin-top:54px}
.wirkung-g>div{border-top:1px solid var(--linie-hell);padding-top:22px}
.wirkung-g h3{font-size:clamp(18px,1.9vw,22px);margin-bottom:11px}
.wirkung-g p{color:var(--hell-leise);margin:0;font-size:16.5px;line-height:1.6}
.wirkung-schluss{margin-top:58px;text-align:center}
.wirkung-schluss p{font-size:clamp(23px,3.1vw,36px);font-weight:300;letter-spacing:-.01em;color:var(--sand);margin:0 0 26px;text-wrap:balance}
.zielbild{list-style:none;padding:0;margin:0 auto 26px;max-width:780px}
.zielbild li{font-size:clamp(17px,1.7vw,20px);line-height:1.7;color:var(--hell-leise);font-weight:300;margin-bottom:16px;text-wrap:balance}
.zielbild li:last-child{margin-bottom:0}
.zielbild li:last-child{color:var(--weiss)}
.wirkung-schluss span{font-size:14px;color:var(--hell-leise)}
@media (max-width:820px){.wirkung-g{grid-template-columns:1fr;gap:24px}}

/* Faelle */
.faelle{margin-top:46px}
.hinweis-geschichte{margin:34px 0 0;font-size:17px;line-height:1.55;font-weight:400}
.hinweis-geschichte a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:2px}
.hinweis-geschichte a:hover{color:var(--bronze-text)}
.geschichte{scroll-margin-top:96px;margin-top:clamp(40px,5vw,64px);padding:0;border:1px solid rgba(51,52,50,.14);border-top:2px solid var(--bronze);background:linear-gradient(180deg,#F7F3EC 0%,#EFE9DF 100%)}
.geschichte summary{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:end;padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px);font-weight:400;font-size:inherit}
.geschichte summary::after{display:none}
.g-kicker{grid-column:1/-1;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bronze-text);margin-bottom:10px}
.g-titel{grid-column:1;font-size:clamp(26px,3vw,38px);line-height:1.1;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.g-wer{grid-column:1;margin-top:8px;font-size:15px;font-weight:500;color:var(--text-leise)}
.g-auf{grid-column:2;grid-row:2/4;align-self:end;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text);border:1px solid rgba(51,52,50,.35);border-radius:999px;padding:12px 20px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:space-between}
.g-offen{display:none}
.geschichte[open] .g-zu{display:none}
.geschichte[open] .g-offen{display:inline}
.geschichte summary:hover .g-auf{background:rgba(51,52,50,.05)}
.g-inhalt{padding:0 clamp(20px,3vw,40px) clamp(28px,3.4vw,44px)}
.g-schritt{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(18px,3vw,40px);padding:26px 0;border-top:1px solid rgba(51,52,50,.14)}
.g-marke{font-size:15px;font-weight:600;color:var(--text)}
.g-ic{display:block;width:24px;height:24px;margin-bottom:8px;fill:none;stroke:var(--bronze-tief);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* 07.10.2026: Icons statt 01 bis 05, gleicher Stil wie im Teufelskreis (.kl-ic) */
.geschichte .g-text p{margin:0 0 12px;max-width:none;font-size:17px;line-height:1.6;font-weight:400;color:var(--text-koerper)}
.geschichte .g-text p:last-child{margin-bottom:0}
.geschichte .g-text p.g-gross{font-size:clamp(19px,1.8vw,23px);line-height:1.45;font-weight:500;color:var(--text)}
.g-kipp .g-marke,.g-nach .g-marke{color:var(--bronze-text)}
@media (max-width:700px){.geschichte summary{grid-template-columns:1fr}.g-auf{grid-column:1;grid-row:auto;justify-self:start;margin-top:18px}.g-schritt{grid-template-columns:1fr;gap:10px}}
@media (max-width:360px){.g-auf{letter-spacing:.1em;padding-left:12px;padding-right:12px}}

.fall{border-top:1px solid var(--linie);padding:30px 0;display:grid;grid-template-columns:230px 1fr;gap:clamp(22px,4vw,54px)}
.fall-bild{width:100%;max-width:186px;height:auto;aspect-ratio:1/1;object-fit:cover;margin-bottom:17px}
.fall-wer h3{margin-bottom:5px}
.fall-wer span{font-size:14px;line-height:1.4;color:var(--bronze-tief);display:block}
.fall-txt{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px)}
.fall-txt b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-text);margin-bottom:9px;font-weight:600}
.fall-txt p{font-size:15.5px;line-height:1.55;margin:0}
@media (max-width:980px){.fall{grid-template-columns:1fr;gap:20px}.fall-txt{grid-template-columns:1fr;gap:17px}}
/* Fall 3 und 4 zum Aufklappen (seit 05.10.2026), Knopf wie bei der Geschichte (.g-auf) */
.faelle-mehr{border-bottom:0;padding:0;margin-top:0}
.faelle-mehr summary{display:block;width:max-content;max-width:100%;font-weight:400;font-size:inherit}
.faelle-mehr summary::after{display:none}
.faelle-mehr .g-auf{display:inline-flex;margin-top:0}
.faelle-mehr[open] .g-zu{display:none}
.faelle-mehr[open] .g-offen{display:inline}
.faelle-mehr summary:hover .g-auf{background:rgba(51,52,50,.05)}
.faelle-mehr summary:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.faelle-mehr .faelle{margin-top:0}
.faelle-hinweis{font-size:14px;line-height:1.5;color:var(--text-leise);margin:12px 0 0} /* 06.10.2026, leise Grösse wie .routine-klein */

/* Stimmen */
.tex{position:relative;isolation:isolate;overflow:hidden;background:var(--nacht);color:#fff}
.tex>img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;filter:blur(1px)}
#stimmen>img.grund{opacity:.40;filter:blur(3px);transform:scale(1.03)}
.tex::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,22,21,.60) 0%,rgba(22,22,21,.46) 46%,rgba(22,22,21,.58) 100%);pointer-events:none} /* 06.10.2026: oben .10 -> .60, dort stehen Überzeile und Titel (Lesbarkeit «Referenzen», gemessen); Form wie web-standard §4 «über die ganze Höhe» */
.tex .innen{position:relative;z-index:1}
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3.4vw,52px) clamp(24px,3vw,44px);margin-top:56px}
.stimme{border-top:1px solid rgba(255,255,255,.42);padding-top:26px}
.stimme p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.92)}
.stimme span{display:block;margin-top:14px;font-size:14px;letter-spacing:.06em;color:var(--sand)}
.stimmen-kontakt{margin:clamp(44px,5vw,64px) 0 0;padding-top:24px;border-top:1px solid rgba(166,144,117,.55);max-width:46em;font-size:clamp(18px,1.6vw,20px);line-height:1.55;font-weight:400;color:rgba(255,255,255,.92)}
@media (max-width:980px){.stimmen{grid-template-columns:1fr}}

/* Laufband der sechs Stimmen (06.10.2026, Cla: «bei den sechs testimonials würde ich so ein laufband machen»).
   Die Bewegung ist reines CSS (translateX -50 %). Das Skript unten legt nur die Kopien für den Endlos-Effekt an
   (aria-hidden, inert) und bedient den Pause-Knopf. Ohne Skript und bei prefers-reduced-motion steht das Band
   still und lässt sich seitlich wischen oder scrollen. Hover und Fokus halten es an. */
.laufband{margin:56px calc(50% - 50vw) 0;position:relative}
.laufband-fenster{--lb-rand:max(var(--rand),calc((100vw - 1180px) / 2));overflow-x:auto;overflow-y:hidden;padding:0 var(--lb-rand) 14px;scroll-padding-inline:var(--lb-rand);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent}
.laufband-fenster:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px}
.laufband-spur{display:flex;align-items:stretch;width:max-content}
.laufband-spur>.stimme{flex:0 0 clamp(272px,80vw,384px);margin-right:clamp(18px,2.4vw,32px);white-space:normal}
.laufband-spur>.stimme p{margin-bottom:0}
@keyframes laufband{to{transform:translateX(-50%)}}
.laufband.bereit .laufband-fenster{scrollbar-width:none}
.laufband.bereit .laufband-fenster::-webkit-scrollbar{display:none}
.laufband.bereit .laufband-spur{animation:laufband var(--lb-dauer,110s) linear infinite;animation-delay:var(--lb-start,0s)}
.laufband.bereit .laufband-fenster:hover .laufband-spur,
.laufband.bereit .laufband-fenster:focus .laufband-spur,
.laufband.bereit .laufband-fenster:focus-within .laufband-spur{animation-play-state:paused}
/* Angehalten per Knopf oder durch Wischen: die Bewegung steht, das Band lässt sich frei schieben */
.laufband.bereit.manuell .laufband-fenster{scrollbar-width:thin}
.laufband.bereit.manuell .laufband-fenster::-webkit-scrollbar{display:block;height:6px}
.laufband.bereit.manuell .laufband-spur{animation:none;transform:none}
.laufband-steuer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 20px;margin-top:22px;max-width:none;padding:0 max(var(--rand),calc((100vw - 1180px) / 2))}
.laufband-knopf[hidden]{display:none}
.laufband-knopf{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;font-size:14px;color:#fff;border-color:rgba(255,255,255,.5)}
.laufband-knopf:hover{background:rgba(255,255,255,.1)!important}
.laufband-knopf svg{width:12px;height:12px;flex:none;fill:currentColor}
.laufband-knopf .lb-weiter,.laufband.manuell .laufband-knopf .lb-halt{display:none}
.laufband.manuell .laufband-knopf .lb-weiter{display:inline-flex;align-items:center;gap:10px}
.laufband-knopf .lb-halt{display:inline-flex;align-items:center;gap:10px}
@media (prefers-reduced-motion:reduce){
  .laufband-fenster{scroll-snap-type:x proximity}
  .laufband-spur>.stimme{scroll-snap-align:start}
}


/* Gegenüberstellung heute / danach */
.wechsel{margin:clamp(56px,6.5vw,92px) calc(var(--rand) * -1) 0}
.wechsel-kopf{display:grid;grid-template-columns:1fr 1fr}
.wechsel-kopf span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;padding:22px clamp(22px,2.6vw,44px) 16px}
.wechsel-kopf span:first-child{color:rgba(255,255,255,.7);background:var(--nacht);padding-left:var(--rand)}
.wechsel-kopf span:last-child{color:var(--bronze-text);background:var(--sand-hell);padding-right:var(--rand);align-self:stretch;display:flex;align-items:flex-end}
.wechsel-z{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.wechsel-l,.wechsel-r{padding:clamp(30px,3.6vw,54px) clamp(22px,2.6vw,44px)}
.wechsel-l{background:var(--nacht);color:#fff;border-top:1px solid rgba(255,255,255,.13);padding-left:var(--rand)}
.wechsel-r{background:var(--sand-hell);border-top:1px solid rgba(51,52,50,.14);display:flex;flex-direction:column;justify-content:center;padding-right:var(--rand)}
.wechsel-l h3{color:#fff;margin-bottom:8px}
.wechsel-r h3{color:var(--text);margin-bottom:8px}
.wechsel-l p{color:rgba(255,255,255,.72);margin:0;font-size:16px;line-height:1.55}
.wechsel-r p{color:var(--text-koerper);margin:0;font-size:16px;line-height:1.55}
.wechsel-nr{display:block;font-size:14px;letter-spacing:.02em;font-weight:600;margin-bottom:10px;color:var(--bronze)} /* 07.10.2026: «Erstens» statt «01» (Feedback: Nummern wirken nach KI) */
.wechsel-r .wechsel-nr{color:transparent}
/* Klappe in der Gegenüberstellung: Knopf auf weissem Streifen über die volle Breite */
.klappe.wechsel-klappe>summary{width:auto;margin:0;padding:clamp(12px,1.6vw,18px) var(--rand);background:var(--weiss);border-top:1px solid var(--linie)}
.klappe.wechsel-klappe .klappe-inhalt{padding-top:0}
.messbar{background:var(--weiss);border-top:1px solid var(--linie);padding:clamp(28px,3.2vw,46px) var(--rand)}
.messbar p{margin:0 auto;max-width:760px;font-size:16.5px;line-height:1.6;text-align:center}
@media (max-width:860px){
  .wechsel-kopf{display:none}
  .wechsel-z{grid-template-columns:1fr}
  .wechsel-l,.wechsel-r{padding-left:var(--rand);padding-right:var(--rand)}
  .wechsel-r{border-top:0}
  .wechsel-r .wechsel-nr{display:none}
}
/* Helles Bildband: Foto unter hellem Grund, dunkle Schrift */
.licht{position:relative;isolation:isolate;overflow:hidden;background:var(--sand-hell)}
.licht>img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;z-index:-1}
.licht .innen{position:relative}
.bruecke{margin:clamp(64px,8vw,112px) auto 0;max-width:640px;text-align:center;font-size:clamp(21px,2.7vw,31px);font-weight:400;line-height:1.3;letter-spacing:-.01em;color:var(--text);padding-top:0;text-wrap:balance}
#wer{padding-bottom:clamp(64px,8vw,112px)} /* 07.10.2026: Abstand ueber und unter «Ich baue die Brücke» gleich */
/* Fragen auf Sand */
#fragen{background:var(--sand-hell)}

/* Für wen: richtig/falsch */
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);margin-top:44px}
.zwei-spalten ul{list-style:none;padding:0;margin:0}
.zwei-spalten li{padding:13px 0 13px 30px;position:relative;border-bottom:1px solid var(--linie);font-size:16px}
.zwei-spalten li::before{position:absolute;left:0;top:13px}
.zwei-spalten li:last-child{border-bottom:0} /* 07.10.2026, Cla: «die Linie unter dem letzten Punkt kann man wegnehmen» */
/* 06.10.2026: Punkt und Ring statt «+» und «–», sonst verwechselbar mit dem Klapp-Zeichen */
.zwei-spalten li::before{content:"";top:calc(13px + .66em);left:4px;width:6px;height:6px;border-radius:50%;box-sizing:border-box}
.spalte-falsch li::before{border:1px solid var(--text-leise)}
.spalte-richtig li::before{background:var(--bronze)}
@media (max-width:820px){.zwei-spalten{grid-template-columns:1fr}}

/* FAQ */
details{border-bottom:1px solid var(--linie);padding:22px 0}
details summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary::-webkit-details-marker{display:none}
details:not(.klappe) p{margin:14px 0 0;max-width:720px}
details summary{align-items:center}

/* Das Zeichen jeder Klappe (06.10.2026, Cla: «aufklappen bitte mit einem + darstellen»).
   Ein Plus aus zwei Balken. Beim Aufklappen dreht der senkrechte Balken in die Waagrechte,
   aus dem Plus wird ein Minus, wie bisher in der FAQ (+ und –). Steht als <span class="zeichen" aria-hidden="true">
   rechts im Kopf jeder Klappe: FAQ, Kleingedrucktes, Fälle, Riccardo und die Klappen vom 06.10. */
.zeichen{position:relative;display:inline-block;flex:none;width:16px;height:16px;vertical-align:middle;color:inherit}
.zeichen::before,.zeichen::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:currentColor;transition:transform .32s ease}
.zeichen::after{transform:rotate(90deg)}
details[open]>summary .zeichen::after{transform:rotate(0deg)}
.g-auf .zeichen{width:13px;height:13px;margin-left:12px}
@media (prefers-reduced-motion:reduce){.zeichen::before,.zeichen::after{transition:none}}

/* Klappen vom 06.10.2026 («einklappen wo es geht, im ersten Text die Essenz»).
   Knopf wie bei den Fällen (.g-auf). Der Inhalt steht im HTML, nichts wird nachgeladen. */
details.klappe{border:0;padding:0;margin:0}
.klappe>summary{display:block;width:max-content;max-width:100%;font-weight:400;font-size:inherit;margin:6px 0 0}
.klappe>summary .g-auf{display:inline-flex;align-items:center}
.klappe[open]>summary .g-zu{display:none}
.klappe[open]>summary .g-offen{display:inline}
.klappe>summary:hover .g-auf{background:rgba(51,52,50,.05)}
.klappe>summary:focus-visible,.klappe-titel>summary:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.klappe-inhalt{padding-top:26px}
/* Klappe mit einer Überschrift als Kopf (wie die FAQ) */
.klappe.klappe-titel>summary{display:flex;justify-content:space-between;align-items:center;gap:20px;width:auto;margin:0;font-weight:600}
.klappe-titel>summary h3{margin:0}
.klappe-titel>summary .zeichen{color:var(--text)}
/* Nur ein Plus (06.10.2026, Cla: «jeweils nur ein plus, rechtsbündig, und nicht noch beschreiben was kommt»).
   Die ganze Zeile ist die Klickfläche, mindestens 44 px hoch, auf einer feinen Linie wie in der FAQ.
   Für Screenreader trägt sie einen unsichtbaren Text («Weiterlesen: …»), sichtbar ist nur das Zeichen. */
.klappe>summary.nur-plus{display:flex;justify-content:flex-end;align-items:center;width:auto;max-width:none;min-height:46px;margin:0;padding:10px 0;border-top:1px solid var(--linie);color:var(--text)}
.klappe>summary.nur-plus .zeichen{width:18px;height:18px}
.klappe.wechsel-klappe>summary.nur-plus{padding:10px var(--rand)} /* 06.10.2026: Plus nicht am Bildrand */
.klappe>summary.nur-plus:hover .zeichen{color:var(--bronze-tief)}
.plus-klappe .klappe-inhalt{padding-top:14px}
.paar-txt .plus-klappe{margin:6px 0 18px}
details.breit-fest>summary{display:none}
details.breit-fest>.klappe-inhalt{padding-top:0}
#fragen summary .zeichen{color:var(--text)}
.paar-txt .klappe{margin:0 0 16px}
.paar-txt .klappe .klappe-inhalt{padding-top:22px}
#vierundzwanzig .klappe .programme-liste{margin-top:0}
#vierundzwanzig .programme-liste.erste{margin-bottom:6px}

/* Abschluss */
.abschluss{min-height:96vh;display:flex;align-items:flex-end;justify-content:center;text-align:center;padding-top:clamp(190px,34vh,460px);--decke:linear-gradient(to top,rgba(18,14,10,.88) 0%,rgba(18,14,10,.82) 30%,rgba(18,14,10,.56) 62%,rgba(18,14,10,.16) 100%)}
.abschluss .innen{max-width:760px}
.abschluss h2,.abschluss .gross,.abschluss .kicker,.abschluss .klein-vertrauen,.abschluss .wa{text-shadow:0 1px 16px rgba(12,9,6,.9),0 1px 3px rgba(12,9,6,.7)}
.abschluss .klein-vertrauen{margin-left:auto;margin-right:auto}
/* Lesbarkeit 06.10.2026 (Feedback «25 bis 30 % Schwarz drüber»): 30 % Schwarz, aber nur dort, wo Text steht.
   Die Decke beginnt 160 px über der Überzeile und läuft dort weich ein, darüber bleibt der Himmel frei
   (web-standard.md §4: der Verlauf folgt dem Text, nie eine flache Decke). Gemessen, siehe Arbeit/2026-10-06_Webseite-Feedback-Lesbarkeit-Logos.md */
.abschluss .innen{position:relative}
.abschluss .innen::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;width:100vw;margin-left:-50vw;top:-160px;bottom:-480px;background:linear-gradient(to bottom,rgba(12,10,8,0) 0,rgba(12,10,8,.3) 160px)}
.buechlein{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(18px,2.4vw,30px);align-items:center;margin-top:8px}
.buechlein img{width:150px;height:auto;margin:-10px 0}
.buechlein p{margin:0}
@media (max-width:520px){.buechlein{grid-template-columns:104px minmax(0,1fr)}.buechlein img{width:104px}}
.zweitwege{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:26px auto 0}
.zweit{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 16px;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(18,14,10,.4);color:#fff;text-decoration:none;font-size:15px;font-weight:500;line-height:1.3;text-align:left;transition:background .2s,border-color .2s}
.zweit:hover{background:rgba(255,255,255,.1);border-color:#fff}
.zweit-info{grid-column:2;margin:2px 0 0;font-size:14px;line-height:1.5;font-weight:400;color:var(--sand);text-align:left;text-wrap:pretty;text-shadow:0 1px 12px rgba(12,9,6,.9)}
@media (max-width:600px){.zweit-info{grid-column:1/-1;text-align:center;max-width:30em;margin:4px auto 0}}
.zweit svg{width:19px;height:19px;flex:none}
.zweit.wa-knopf svg{fill:var(--bronze)}
.zweit.selbst svg{color:var(--bronze)}
@media (max-width:420px){.zweitwege{gap:8px}.zweit{font-size:14px;padding:12px 10px;gap:8px}}

.mitnehmen{list-style:none;counter-reset:mn;padding:8px clamp(20px,3vw,36px);margin:30px auto 34px;max-width:680px;text-align:left;display:block;background:linear-gradient(180deg,rgba(22,21,19,.80) 0%,rgba(14,14,13,.86) 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.10);border-top:2px solid var(--bronze)}
.mitnehmen li{counter-increment:mn;position:relative;padding:15px 0 15px 96px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.92);border-bottom:1px solid rgba(255,255,255,.10)}
.mitnehmen li:last-child{border-bottom:0}
.mitnehmen li::before{position:absolute;left:0;top:15px;font-size:14px;letter-spacing:.02em;color:var(--bronze);font-weight:600}
/* 07.10.2026 (Cla: «Erstens, zweitens, drittens, viertens» statt 01 bis 04) */
.mitnehmen li:nth-child(1)::before{content:"Erstens"}
.mitnehmen li:nth-child(2)::before{content:"Zweitens"}
.mitnehmen li:nth-child(3)::before{content:"Drittens"}
.mitnehmen li:nth-child(4)::before{content:"Viertens"}
@media (max-width:520px){.mitnehmen li{padding-left:0}.mitnehmen li::before{position:static;display:block;margin-bottom:2px}}
.mitnehmen b{font-weight:600;color:#fff}

/* Zweiter Einstieg: die Erfolgsroutine */
#routine{background:var(--sand-hell);padding-top:clamp(64px,8vw,108px);padding-bottom:clamp(64px,8vw,108px)}
.routine{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(26px,4vw,60px);align-items:center}
.routine h2{font-size:clamp(28px,3.4vw,44px);margin-bottom:16px}
.routine-txt>p{font-size:17px;line-height:1.62;margin:0 0 14px;max-width:34em}
.routine-stark{font-size:18px;line-height:1.55;font-weight:500;color:var(--text);border-left:2px solid var(--bronze);padding-left:16px;margin-bottom:26px}
.routine-bild{min-width:0}
.routine-bild img{display:block;width:100%;height:auto}
.routine-form{display:flex;flex-wrap:wrap;gap:10px}
.routine-form input{flex:1 1 210px;min-width:0;padding:15px 16px;border:1px solid var(--linie);background:#fff;font:inherit;font-size:16px;color:var(--text)}
.routine-form .knopf{flex:0 0 auto;cursor:pointer}
.routine-klein{flex:1 1 100%;font-size:14px;line-height:1.5;color:var(--text-leise);margin:3px 0 0}
.routine-dank{font-size:16.5px;line-height:1.6;color:var(--text);font-weight:500;margin:0}
.routine-hinweis{flex:1 1 100%;font-size:14px;line-height:1.5;color:var(--bronze-tief);margin:0}
.routine-hinweis:empty{display:none}
.nur-vorleser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Beleg-Balken am Fuss des Hero: randlos, etwas tiefer als der Grund, ohne Trennstrich */
.beleg{margin:clamp(36px,4.6vw,60px) calc(var(--rand) * -1) calc(clamp(60px,9vw,110px) * -1);padding:clamp(22px,2.6vw,32px) var(--rand) clamp(20px,2.4vw,30px);background:linear-gradient(180deg,rgba(8,8,7,.42) 0%,rgba(8,8,7,.62) 100%);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.beleg-zeile{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:16px}
.logos-reihe{display:flex;align-items:center;gap:clamp(18px,2.9vw,40px);flex-wrap:wrap}
.lg{width:auto;opacity:.74;transition:opacity .25s ease}
.lg:hover{opacity:1}
.lg-ubs{height:calc(21px * var(--lg-s,1))}
.lg-novartis{height:calc(16px * var(--lg-s,1))}
.lg-zurich{height:calc(26px * var(--lg-s,1))}
.lg-basler{height:calc(23px * var(--lg-s,1))}
.lg-swissre{height:calc(29px * var(--lg-s,1))}
.lg-lindt{height:calc(27px * var(--lg-s,1))}
.lg-microsoft{height:calc(18px * var(--lg-s,1))}
.lg-pwc{height:calc(28px * var(--lg-s,1))}
.beleg-text{margin:clamp(18px,2.2vw,26px) 0 0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);display:flex;flex-wrap:wrap;gap:4px clamp(16px,2vw,30px)}
.beleg-text span{position:relative}
.beleg-text span+span::before{content:"\00B7";position:absolute;left:calc(clamp(16px,2vw,30px) / -2);transform:translateX(-50%);color:rgba(255,255,255,.34)}
.beleg-text b{color:#fff;font-weight:600}
/* Logos bis 820 px (06.10.2026, Feedback «höchstens 4 Logos in einer Zeile, nicht quetschen»): zwei Reihen à 4.
   Alle Logos gleichmässig aus den Laptop-Massen verkleinert (--lg-s), damit sie optisch gleich gross bleiben.
   Die Spalten richten sich nach dem breitesten Logo darin, der Rest der Breite geht in die Abstände. */
@media (max-width:820px){
  .logos-reihe{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;justify-items:center;align-items:center;gap:22px 16px;max-width:460px}
}
@media (max-width:560px){.logos-reihe{--lg-s:.85}}
@media (max-width:359px){.logos-reihe{--lg-s:.72}}
@media (max-width:560px){
  .beleg{margin-top:30px;padding-top:24px}
  .beleg-text{font-size:14px;flex-direction:column;gap:7px}
  .beleg-text span+span::before{display:none}
}
.nur-breit{display:inline}
.nur-schmal{display:none}
@media (max-width:700px){.nur-breit{display:none}}
@media (max-width:480px){.nur-schmal{display:inline}}
@media (max-width:880px){.routine{grid-template-columns:1fr;gap:30px}.routine-bild{order:-1}}

/* Rechtliches */
.recht{background:var(--tief);color:rgba(255,255,255,.82);padding-top:clamp(56px,7vw,86px);padding-bottom:clamp(56px,7vw,86px)}
.recht h2{color:var(--weiss);font-size:clamp(26px,3.4vw,40px);margin-bottom:22px}
.recht details{border-bottom:1px solid var(--linie-hell)}
.recht summary{color:#fff;font-size:16px}
.recht p,.recht li{color:rgba(255,255,255,.8);font-size:15px}
.recht a{color:var(--sand)}
.recht ul{padding-left:18px;margin:12px 0 0}

/* Footer */
footer{background:var(--nacht);color:rgba(255,255,255,.8);padding:56px var(--rand) calc(96px + env(safe-area-inset-bottom,0px));font-size:14px;font-weight:400}
footer .fuss-logo{height:58px;width:auto;margin-bottom:14px}
footer .reihe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px}
footer a{text-decoration:none;color:var(--sand);border-bottom:1px solid rgba(225,217,194,.35)}
footer a:hover{color:var(--weiss);border-bottom-color:var(--weiss)}
footer .unten{margin-top:36px;padding-top:18px;border-top:1px solid var(--linie-hell);font-size:14px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
footer .unten a{color:inherit;border-bottom-color:var(--linie-hell)}

.mitbringsel{display:flex;align-items:center;gap:clamp(18px,2.2vw,28px);margin-top:30px;padding-top:26px;border-top:1px solid var(--linie)}
.mitbringsel img{width:180px;flex:none;height:auto;display:block}
.mitbringsel p{margin:0}
@media (max-width:560px){.mitbringsel{flex-direction:column;align-items:flex-start;gap:16px}.mitbringsel img{width:150px}}

/* Einblenden */
.auf{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.auf.da{opacity:1;transform:none}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .auf{opacity:1;transform:none;transition:none;animation:auftauchen linear both;animation-timeline:view();animation-range:cover 0px cover 120px}
    @keyframes auftauchen{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===================================================================
   VERLAEUFE, seit 23.09.2026 fester Bestandteil
   Marcos Vorschlag, auf die Marke gebracht: nur Bronze und Nacht,
   nie mehr als zwei Stufen im Verlauf, nie ueber 12 Prozent
   Helligkeitsunterschied. Ein Verlauf soll Material zeigen, nicht Farbe.
   Alles hier sind Ueberschreibungen der Regeln weiter oben.
   Wer den Block loescht, hat wieder die Seite ohne Verlaeufe.
   =================================================================== */
:root{--bz-hell:#C3AB88; --bz-mitte:#A69075; --bz-tief:#8A7760;}

/* 1. Knoepfe: gebuerstetes Bronze statt Flaeche */
.knopf.voll{
  background:linear-gradient(161deg,var(--bz-hell) 0%,var(--bz-mitte) 48%,var(--bz-tief) 100%);
  border-color:rgba(255,255,255,.16);
  color:var(--nacht);
}
.knopf.voll:hover{
  background:linear-gradient(161deg,#CFB795 0%,#B09B7F 48%,#93806A 100%);
}
.knopf:not(.voll){
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));
}

/* 2. Schluesselwoerter im Verlauf. Sparsam, nur wo eine Zahl oder ein
      Beleg steht. Auf dunklem Grund hell, auf hellem Grund tief. */
/* Im Hero bleibt Bronze dem Knopf allein vorbehalten. Belege bleiben weiss,
   sonst konkurrieren zwei Bronzetoene um dieselbe Aufmerksamkeit. */
.wirkung-g b{
  background:linear-gradient(92deg,#E2D2B8 0%,#B59D80 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.messbar b,.haus-dazu b,.programme-liste b,.leistung b{
  background:linear-gradient(92deg,#8A7760 0%,#6B5B49 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.formel-box .zahl{
  background:linear-gradient(96deg,#EFE2CC 0%,#BFA88A 60%,#A28C70 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* 3. Flaechen bekommen Tiefe statt Farbe */
#routine{background:linear-gradient(176deg,#F7F3EC 0%,#F0EAE0 56%,#E9E1D3 100%)}
.wechsel-r{background:linear-gradient(180deg,#F5F1E9 0%,#EBE5D9 100%)}
.wechsel-l{background:linear-gradient(180deg,#1B1A18 0%,#121211 100%)}
.recht{background:linear-gradient(180deg,#1F1E1B 0%,#131211 100%)}
#kreis{background:linear-gradient(180deg,#F4F0E8 0%,#EDE7DC 100%)}

/* 4. Der Hero bekommt unten einen warmen Hauch.
      Ohne ihn kippt die Seite ins Blaugraue. */
.hero::after{
  background:
    linear-gradient(to bottom,rgba(13,13,12,.30) 0,rgba(13,13,12,0) 180px),
    linear-gradient(to top,rgba(86,68,48,.30) 0%,rgba(60,48,34,.10) 26%,rgba(0,0,0,0) 54%),
    linear-gradient(to top,rgba(13,13,12,.86) 0%,rgba(13,13,12,.66) 30%,rgba(13,13,12,.28) 62%,rgba(13,13,12,.12) 100%);
}
/* Lesbarkeit 06.10.2026: oben die Kopfzeile (30 % Schwarz, läuft bis 180 px aus). Am Handy steht der Text
   fast über die ganze Höhe, darum dort oben mehr Decke (.28 -> .40 bei 62 %, .12 -> .30 oben). */
@media (max-width:700px){
  .hero::after{
    background:
      linear-gradient(to bottom,rgba(13,13,12,.30) 0,rgba(13,13,12,0) 180px),
      linear-gradient(to top,rgba(86,68,48,.30) 0%,rgba(60,48,34,.10) 26%,rgba(0,0,0,0) 54%),
      linear-gradient(to top,rgba(13,13,12,.86) 0%,rgba(13,13,12,.66) 30%,rgba(13,13,12,.40) 62%,rgba(13,13,12,.30) 100%);
  }
}

/* 5. Linien laufen aus, statt hart zu enden */
.kreis .punkt,.logos{
  border-top:0;
  background-image:linear-gradient(90deg,rgba(51,52,50,.26) 0%,rgba(51,52,50,.08) 58%,rgba(51,52,50,0) 100%);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 0;
}
.logos{
  background-image:linear-gradient(90deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.07) 58%,rgba(255,255,255,0) 100%);
  padding-top:24px;
}

/* 6. Die Formel-Box wird zur Platte */
.formel-box{
  background:
    linear-gradient(158deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 52%,rgba(255,255,255,.004) 100%),
    linear-gradient(168deg,#201F1C 0%,#141413 58%,#1B1A18 100%);
  border-color:rgba(255,255,255,.17);
}

/* 7. Die Referenzkarten heben sich leicht ab */
.stimme{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 72%);
  padding:26px 20px 22px;margin-right:0;
}

/* ===================================================================
   UNTERSEITEN (08.10.2026): 24 Stunden, Tiefenanalyse, Methode, Fälle, Über mich, Ressourcen.
   Gleiche Bausteine wie die Startseite, dazu Kopfband mit Brotkrumen, Weiter-Links, Karten.
   =================================================================== */
.unter-kopf{position:relative;color:var(--weiss);background:linear-gradient(168deg,#201F1C 0%,#141413 58%,#1B1A18 100%);padding:calc(150px + env(safe-area-inset-top,0px)) var(--rand) clamp(56px,7vw,96px)}
.unter-kopf h1{color:var(--weiss);font-size:clamp(34px,5vw,62px);line-height:1.06;letter-spacing:-.02em;margin:0 0 22px;max-width:18em}
.unter-kopf .gross{color:rgba(255,255,255,.9);max-width:40em;margin:0}
.unter-kopf .reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.unter-kopf .klein-vertrauen{margin-top:14px}
.brotkrumen{margin:0 0 26px;font-size:14px;font-weight:400;color:rgba(255,255,255,.72)}
.brotkrumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.brotkrumen li+li::before{content:"\203A";margin:0 10px;color:rgba(255,255,255,.4)}
.brotkrumen a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(225,217,194,.35)}
.brotkrumen a:hover{color:var(--weiss)}
.brotkrumen [aria-current]{color:rgba(255,255,255,.86)}
.unter section h2{font-size:clamp(28px,3.8vw,46px)}
.mehr-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:17px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:3px}
.mehr-link::after{content:"\2192";color:var(--bronze-tief)}
.mehr-link:hover{color:var(--bronze-text)}
.bildgrund .mehr-link,.wirkung .mehr-link,.tex .mehr-link{color:var(--weiss)}
.weiter{background:var(--sand-hell)}
.weiter-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:36px}
.weiter-karte{display:block;padding:26px 24px 28px;background:#fff;border:1px solid rgba(51,52,50,.12);border-top:2px solid var(--bronze);text-decoration:none;color:var(--text-koerper);transition:border-color .2s}
.weiter-karte:hover{border-color:rgba(51,52,50,.3);border-top-color:var(--bronze-tief)}
.weiter-karte h3{margin:0 0 8px}
.weiter-karte p{margin:0;font-size:16px;line-height:1.55;font-weight:400}
@media (max-width:880px){.weiter-karten{grid-template-columns:1fr}}
.abschluss-kurz{background:var(--tief);color:#fff;text-align:center;padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}
.abschluss-kurz h2{color:#fff}
.abschluss-kurz .gross{color:rgba(255,255,255,.9);max-width:36em;margin:0 auto 30px}
.abschluss-kurz .klein-vertrauen{margin-left:auto;margin-right:auto}
.stationen{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--linie)}
.stationen li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;padding:15px 0;border-bottom:1px solid var(--linie);font-size:16.5px;line-height:1.55;font-weight:400}
.stationen b{color:var(--bronze-text);font-weight:600}
@media (max-width:560px){.stationen li{grid-template-columns:1fr;gap:2px}}
.themen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);margin-top:36px}
.themen h3{font-size:clamp(18px,1.8vw,21px);margin-bottom:12px}
.themen ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.themen li{border-bottom:1px solid var(--linie)}
.themen a{display:block;padding:13px 0;font-size:16.5px;line-height:1.45;font-weight:400;color:var(--text);text-decoration:none}
.themen a:hover{color:var(--bronze-text)}
@media (max-width:880px){.themen{grid-template-columns:1fr}}
.auftritte{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--linie)}
.auftritte li{padding:16px 0;border-bottom:1px solid var(--linie);font-size:16.5px;line-height:1.5;font-weight:400}
.auftritte a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--bronze)}
.auftritte a:hover{color:var(--bronze-text)}
.auftritte span{display:block;font-size:14px;color:var(--text-leise);margin-top:3px}
.karte-gross{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;padding:clamp(26px,3vw,40px);background:#fff;border:1px solid rgba(51,52,50,.12);border-top:2px solid var(--bronze);margin-top:36px}
.karte-gross h3{margin:0 0 8px}
.karte-gross p{margin:0;font-size:16.5px;line-height:1.55;font-weight:400}
@media (max-width:760px){.karte-gross{grid-template-columns:1fr}}
.faelle-seite .fall:first-child{border-top:1px solid var(--linie)}
.stimmen-ruhig{background:var(--tief);color:#fff}
.stimmen-ruhig h2{color:#fff}
.stimmen-ruhig .stimmen{margin-top:40px}
.faq-kurz{background:var(--weiss)}
.faq-kurz .innen{max-width:820px}
footer .fuss-seiten{margin-top:30px;line-height:2.1}
.stimmen-ruhig .stimmen-kontakt{color:rgba(255,255,255,.92)}
#ablauf .innen{max-width:760px;text-align:center}
#ablauf .mitnehmen{margin-left:auto;margin-right:auto}
.stimmen-ruhig .stimmen[style]{margin-left:auto;margin-right:auto}