/* Vitren · Website-Check (#914 R3, in der Sprache der Hauptseite). Vorlage _werkzeug/test.vorlage.html, Ablauf assets/check.js,
   3D 3d/pruefglocke.js. Grammatik wie vitren.ch (index.html): je Sektion EIN Satz in grossen Versalien mit Punkt, mittig; EIN Ruthie-Wort;
   EIN grosses Objekt; Farbwelten Travertin, Lapis-Nacht, Ochsenblut; Pillen; Bögen. Gespräch und Fuss kommen 1:1 aus index.html
   (assets/haupt-teile.css, generiert). Verboten (Esteban #914): Augenbrauen-Labels, Piktogramme, Kästchen-Raster, Kamera-Zooms. */

:root{--g:clamp(20px,3.4vw,56px);--bh:clamp(46px,7vw,120px);--nacht:#0B1433;--messing-licht:#E8CF96;--ochs-licht:#F2A7B5;--lapis-licht:#A9BEF5}
.pr-seite{background:var(--travertin)}
.pr-seite .ck.pr{max-width:none;padding:0}
html{scroll-behavior:auto}

/* ============================================================== Bühne (Ruhe · Prüfen · Urteil) */
.pb{position:relative;height:100svh;min-height:700px;max-height:1240px;overflow:clip;color:var(--tinte)}
.pb__wand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;background:var(--travertin);transition:filter 1.6s var(--ease)}
.pb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 1.2s var(--ease);
  background:radial-gradient(52% 30% at 50% 16%,rgba(247,242,233,.92),rgba(247,242,233,0) 100%),radial-gradient(46% 20% at 50% 92%,rgba(247,242,233,.88),rgba(247,242,233,0) 100%)}
.pb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14%;z-index:1;pointer-events:none;background:linear-gradient(rgba(238,231,219,0),var(--travertin));transition:opacity 1.2s var(--ease)}
.pb__nacht{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease);
  background:radial-gradient(42% 46% at 50% 54%,rgba(56,90,184,.55),rgba(19,42,102,0) 72%),linear-gradient(180deg,#132A66 0%,#0B1433 70%,#09102A)}
.pb__leinwand{position:absolute;inset:0;z-index:2;pointer-events:none}   /* #923 Esteban: «die Vitrine hängt nicht am Hintergrund und zittert beim Scrollen». Fest (fixed) wurde sie bei jedem Scroll neu gerechnet und lief dem Hintergrund nach; jetzt scrollt die Leinwand mit der Bühne */
.gl__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s var(--ease)}
.pb__leinwand.ist-bereit .gl__canvas{opacity:1}
.pb__standbild{position:absolute;left:50%;top:52%;width:min(62vh,600px);height:auto;transform:translate(-50%,-44%);transition:opacity .8s var(--ease)}
.pb__leinwand.ist-bereit .pb__standbild{opacity:0}
.pb__fenster{position:absolute;z-index:2;pointer-events:none;left:calc(50% - min(25vw,490px));width:min(50vw,980px);top:29%;bottom:16%}

/* Köpfe: je Zustand einer, Grammatik des Hero */
.pk{position:absolute;z-index:4;left:50%;top:clamp(100px,12.5vh,150px);transform:translateX(-50%);width:min(1260px,calc(100% - 2 * var(--g)));text-align:center;pointer-events:none}
.pk__titel{display:flex;flex-direction:column;align-items:center}
.pk__z1{display:block;font-size:clamp(52px,6.4vw,112px);letter-spacing:-.035em;line-height:.9;white-space:nowrap}
.pk__z2{display:block;font-size:clamp(20px,2.3vw,40px);margin-top:.24em;line-height:1.02;text-wrap:balance}
.pk__z2:empty{display:none}
.pk__schrift{position:absolute;right:max(6%,calc(50% - 27vw));top:100%;margin-top:-.06em;font-size:clamp(32px,3vw,54px);transform:rotate(-5deg);transform-origin:100% 50%;white-space:nowrap}
.pk__schrift:empty{display:none}
.pk.kommt .pk__schrift{animation:pr-schreiben 1.2s var(--ease) .45s both}
@keyframes pr-schreiben{from{opacity:0;clip-path:inset(-40% 100% -40% -5%)}to{opacity:1;clip-path:inset(-40% -5% -40% -5%)}}
.pk.ist-frage .pk__z1{display:none}
.pk.ist-frage .pk__z2{font-size:clamp(32px,4.2vw,66px);max-width:20ch;line-height:1}
.pb [data-kopf],.pb [data-ecke]{visibility:hidden;opacity:0;transition:opacity .7s var(--ease),visibility 0s .7s}
.pb[data-zustand="ruhe"] [data-kopf="ruhe"],.pb[data-zustand="ruhe"] [data-ecke="ruhe"],
.pb[data-zustand="pruefen"] [data-kopf="pruefen"],.pb[data-zustand="pruefen"] [data-ecke="pruefen"],
.pb[data-zustand="fertig"] [data-kopf="fertig"],.pb[data-zustand="fertig"] [data-ecke="fertig"]{visibility:visible;opacity:1;transition:opacity .9s var(--ease) .2s,visibility 0s}

/* Feld unten auf der Säule (Ruhe) */
.pb__fuss{position:absolute;z-index:5;left:50%;bottom:clamp(30px,5vh,58px);transform:translateX(-50%);width:min(580px,calc(100% - 2 * var(--g)));display:grid;grid-template-columns:minmax(0,1fr);gap:12px;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.pb:not([data-zustand="ruhe"]) .pb__fuss{opacity:0;transform:translateX(-50%) translateY(24px);pointer-events:none}
.pb__form{position:relative;width:100%}
.pb__form .feld{background:rgba(251,248,242,.95);box-shadow:inset 0 0 0 1px var(--linie-2),0 30px 60px -28px rgba(23,23,26,.65),0 2px 0 rgba(255,255,255,.7) inset;transition:box-shadow .5s var(--ease)}
.pb__form .feld:focus-within{box-shadow:inset 0 0 0 1.5px var(--lapis),0 0 0 6px rgba(30,59,135,.12),0 34px 70px -30px rgba(23,23,26,.7)}
.pb__form .feld-hinweis{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);width:max-content;max-width:100%;margin:0;padding:6px 14px;border-radius:99px;background:rgba(251,244,242,.96);box-shadow:inset 0 0 0 1px rgba(122,34,54,.22);font-size:14px;color:var(--ochsenblut-2);text-align:center}
.pb__form .feld-hinweis:empty{display:none}

/* Ecken wie im Hero: Esteban links, die grosse Zahl rechts */
.pb__ecke{position:absolute;z-index:4;bottom:clamp(30px,5vh,58px)}
.pb__ecke--links{left:var(--g);display:flex;align-items:center;gap:14px}
.pb__ecke--rechts{right:var(--g);display:flex;align-items:baseline;gap:8px}
.pb__ecke--rechts .schrift{font-size:clamp(22px,1.8vw,30px)}
.pb__ecke--rechts b{font-stretch:118%;font-weight:600;font-size:clamp(30px,2.7vw,46px);letter-spacing:-.02em;line-height:1}
.pb__ecke--rechts > span:last-child{font-size:15px;line-height:1.3;color:var(--tinte-2);max-width:12ch}

/* Prüfen: Nacht */
.pb[data-zustand="pruefen"]{color:var(--creme)}
.pb[data-zustand="pruefen"] .pb__nacht{opacity:1}
.pb[data-zustand="pruefen"] .pb__wand{filter:brightness(.3) saturate(.5) blur(3px)}
.pb[data-zustand="pruefen"]::before,.pb[data-zustand="pruefen"]::after{opacity:0}
.pb[data-zustand="pruefen"] .schrift{color:var(--messing-licht)}
html:has(.pb[data-zustand="pruefen"]) .plakette{color:var(--creme)}
html:has(.pb[data-zustand="pruefen"]) .leiste .menu-knopf{background:rgba(247,242,233,.14);color:var(--creme);box-shadow:inset 0 0 0 1px rgba(247,242,233,.24)}
.pq{position:absolute;z-index:6;left:50%;bottom:clamp(26px,4.4vh,50px);transform:translateX(-50%);width:min(960px,calc(100% - 2 * var(--g)));display:grid;justify-items:center;gap:14px;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.pq[hidden]{display:none}
.pq.ist-weg{opacity:0;transform:translateX(-50%) translateY(10px)}
.pq__reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pq__opt.pille{--pf:var(--creme);--pt:var(--tinte);--ph:var(--lapis);width:auto;height:58px;padding:0 1.6rem;font-size:17px;box-shadow:0 22px 44px -22px rgba(0,0,0,.85);
  animation:pr-auf .7s var(--ease) both;animation-delay:calc(var(--i) * 60ms + .35s);transition:color .45s var(--ease),transform .45s var(--ease)}
.pq__opt.pille:hover,.pq__opt.pille:focus-visible,.pq__opt.ist-gewaehlt{color:var(--creme)}
.pq__opt.pille:hover::before,.pq__opt.pille:focus-visible::before,.pq__opt.ist-gewaehlt::before{transform:none}
.pq__reihe--viele{max-width:900px;gap:8px}
.pq__reihe--viele .pq__opt.pille{height:46px;padding:0 1.15rem;font-size:15px}
@keyframes pr-auf{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pq__weiter{font-size:14px;color:rgba(247,242,233,.66);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(247,242,233,.3)}
.pq__weiter.ist-bereit{color:var(--creme);font-weight:600;text-decoration-color:var(--messing)}
.pq__dom{flex-direction:column;align-items:flex-start;gap:4px;font-size:15px}
.pq__dom > span:first-of-type{font-weight:600;font-size:17px;font-stretch:112%}
.pq__jetzt{color:rgba(247,242,233,.62);font-size:14px}
.pq__jetzt.kommt{animation:pr-auf .5s var(--ease) both}
.pq__puls{width:10px;height:10px;border-radius:50%;background:var(--messing);box-shadow:0 0 0 0 rgba(201,164,92,.7);animation:pr-puls 1.4s ease-out infinite;margin-bottom:6px}
@keyframes pr-puls{to{box-shadow:0 0 0 14px rgba(201,164,92,0)}}
.pq__stand b{color:var(--creme);font-size:clamp(44px,4vw,72px)!important}
.pq__stand > span:last-child{color:rgba(247,242,233,.66)!important}

/* Urteil */
.pb[data-zustand="fertig"] .pb__wand{filter:saturate(.8)}
.pk--urteil .pk__z1 .num{font-variant-numeric:tabular-nums}
.pb[data-ergebnis="fehlt"] .pk--urteil .pk__z1 .num{color:var(--ochsenblut-2)}
.pb[data-ergebnis="achtung"] .pk--urteil .pk__z1 .num{color:var(--messing-tief)}
.pb[data-ergebnis="gut"] .pk--urteil .pk__z1 .num{color:var(--lapis)}
.pu__fuss{position:absolute;z-index:5;left:50%;bottom:clamp(34px,5.4vh,62px);transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:max-content;max-width:calc(100% - 2 * var(--g))}
.pu__fuss .pille{width:auto;height:58px;padding:0 1.35rem 0 1.7rem;font-size:16.5px}
.pu__dom{flex-direction:column;align-items:flex-start;gap:3px;max-width:30ch}
.pu__dom b{font-size:17px;font-weight:600;font-stretch:112%}
.pu__dom > span{font-size:14px;color:var(--tinte-3)}
.pu__neu{margin-top:6px;font-size:14px;color:var(--tinte-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linie-2)}
.pu__neu:hover{color:var(--tinte)}

/* Nadeln auf den Geräten */
.pb__nadeln{position:fixed;inset:0;z-index:3;pointer-events:none}
html:not(:has(.pb[data-zustand="fertig"])) .pb__nadeln{display:none}
.pn{position:absolute;left:0;top:0;transform:translate(calc(var(--x) - 13px),calc(var(--y) - 13px));display:flex;align-items:center;gap:8px;pointer-events:auto;animation:pr-nadel .7s var(--ease) both;animation-delay:calc(var(--k) * 140ms + 1.2s)}
.pn.ohne-ort{display:none}
@keyframes pr-nadel{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.pn__punkt{position:relative;width:26px;height:26px;border-radius:50%;background:var(--ochsenblut-2);box-shadow:0 0 0 3px #fff,0 8px 18px -6px rgba(74,21,35,.8);transition:transform .35s var(--ease)}
.pn__punkt::after{content:"";position:absolute;inset:-3px;border-radius:50%;animation:pr-nadel-puls 2s ease-out infinite}
@keyframes pr-nadel-puls{from{box-shadow:0 0 0 0 rgba(122,34,54,.55)}to{box-shadow:0 0 0 18px rgba(122,34,54,0)}}
.pn--achtung .pn__punkt{background:var(--messing)}
.pn__lab{padding:9px 16px;border-radius:99px;background:var(--tinte);color:var(--creme);font-size:14px;font-weight:500;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s var(--ease),transform .4s var(--ease);pointer-events:none}
.pn:hover .pn__lab,.pn:focus-visible .pn__lab,.pn.ist-hell .pn__lab{opacity:1;transform:none}
.pn:hover .pn__punkt{transform:scale(1.15)}

/* ============================================================== Abschnitts-Satz (wie «MAN MUSS SIE FINDEN.») */
.pr-satz{position:relative;z-index:3;text-align:center;padding:0 var(--g);max-width:1300px;margin:0 auto}
.pr-satz__titel{font-size:clamp(56px,7.8vw,140px);letter-spacing:-.04em;line-height:.88;text-wrap:balance}
.pr-satz__titel--klein{font-size:clamp(44px,5.6vw,104px)}
.pr-satz__lauf{max-width:50ch;margin:clamp(18px,2.2vw,28px) auto 0;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--tinte-2);text-wrap:pretty}
.pr-satz__lauf:empty{display:none}
.sp-zeile,[data-split] > div{padding-bottom:.06em;margin-bottom:-.06em}

/* ============================================================== Ergebnis */
.pr-erg{position:relative;padding-top:clamp(110px,15vh,180px)}
.pr-erg[hidden]{display:none}

/* Je Lücke eine Zahl-Karte wie «Über 30'000» (Roughly) der Hauptseite */
.pf{display:grid;gap:clamp(26px,3vw,46px);margin-top:clamp(70px,9vh,120px);padding:0 var(--g)}
.pf__karte{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;border-radius:28px;overflow:hidden;isolation:isolate;color:var(--creme);background:var(--ochsenblut);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,4vw,80px);padding:clamp(40px,5vw,84px) clamp(34px,5.4vw,96px);min-height:min(74vh,660px);
  opacity:0;transform:translateY(60px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.pf__karte.ist-da{opacity:1;transform:none}
.pf__karte--achtung{background:linear-gradient(160deg,#1A2F6E,#0E1A44)}
.pf__karte--spiegel{grid-template-columns:auto minmax(0,1fr)}
.pf__karte--spiegel .pf__geraet{order:-1}
.pf__feld{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.9}
.pf__karte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ochsenblut) 0%,rgba(74,21,35,.88) 38%,rgba(74,21,35,.35) 70%,rgba(74,21,35,.2))}
.pf__karte--spiegel::after{background:linear-gradient(270deg,var(--ochsenblut) 0%,rgba(74,21,35,.88) 38%,rgba(74,21,35,.35) 70%,rgba(74,21,35,.2))}
.pf__karte--achtung::after{background:linear-gradient(90deg,#132A66 0%,rgba(19,42,102,.88) 38%,rgba(19,42,102,.35) 70%,rgba(19,42,102,.2))}
.pf__text{max-width:620px}
.pf__zahl{display:flex;align-items:flex-end;gap:.08em;line-height:.8}
.pf__zahl .schrift{font-size:clamp(40px,3.8vw,68px);color:var(--messing-licht);margin-right:.2em;transform:translateY(-.32em) rotate(-5deg)}
.pf__zahl b{font-size:clamp(110px,12.5vw,224px);letter-spacing:-.05em;color:var(--creme)}
.pf__prozent{font-size:clamp(48px,5vw,90px);color:var(--messing-licht);margin-bottom:.1em}
.pf__satz{margin-top:18px;font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:rgba(247,242,233,.82);max-width:36ch}
.pf__folge{margin-top:clamp(26px,3vw,40px);font-size:clamp(34px,3.5vw,64px);letter-spacing:-.03em;line-height:.94;text-wrap:balance}
.pf__beheben{margin-top:18px;max-width:46ch;font-size:16px;line-height:1.55;color:rgba(247,242,233,.72)}
.pf__schrift{margin-top:18px;font-size:clamp(28px,2.4vw,42px);color:var(--messing-licht);transform:rotate(-4deg);transform-origin:0 50%}
.pf__knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pf__knoepfe .pille{width:auto}
.pf__geraet{position:relative;justify-self:center}

/* Handy mit zwei Zuständen (HEUTE / MIT VITREN, wie die Schilder auf der Hauptseite) */
.ph{display:grid;justify-items:center;gap:20px;perspective:1400px}
.ph__schilder{display:flex;gap:10px}
.ph__schild{height:44px;padding:0 20px;border-radius:99px;font-size:13px;font-weight:600;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,242,233,.7);
  background:rgba(12,14,30,.35);box-shadow:inset 0 0 0 1px rgba(247,242,233,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s}
.ph__schild.ist-an{background:var(--creme);color:var(--tinte);box-shadow:0 14px 30px -16px rgba(0,0,0,.8)}
.ph__schild--gold.ist-an{background:linear-gradient(150deg,#F2DDA6,#C9A45C 55%,#A9853F);color:#24190A}
.ph__handy{--hb:clamp(230px,19vw,300px);transform:rotateY(-14deg) rotateX(5deg) rotateZ(2deg);transition:transform 1.2s var(--ease)}
.pf__karte--spiegel .ph__handy{transform:rotateY(14deg) rotateX(5deg) rotateZ(-2deg)}
.ph:hover .ph__handy{transform:none}
.ph__schirm{background:#FBF8F2}
.ph__zustand{position:absolute;inset:0;display:grid;align-content:center;padding:24% 7% 14%;background:linear-gradient(180deg,#FBF8F2,#F1EADF);opacity:0;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1s var(--ease)}
.ph__zustand.ist-an{opacity:1;transform:none}
.ph__zustand .sz{font-size:16.5px}
.ph__zustand .mini{border-radius:12px;box-shadow:0 10px 24px -16px rgba(23,23,26,.45)}
.ph__zustand .mini__lab{display:none}
.ph__zustand--vitren .mini *{animation-delay:calc(var(--z,6s) * -.72)!important;animation-play-state:paused!important}
.ph--gross .ph__handy{--hb:min(clamp(230px,18vw,300px),30vh)}

/* Das ist in Ordnung: ein Satz, die Namen als Fliesstext */
.po{position:relative;z-index:3;max-width:1180px;margin:clamp(110px,14vh,180px) auto 0;padding:0 var(--g) clamp(150px,20vh,240px);text-align:center}
.po[hidden]{display:none}
.po__titel{font-size:clamp(44px,5.6vw,104px);letter-spacing:-.04em;line-height:.9}
.po__liste{margin-top:clamp(26px,3vw,40px);font-size:clamp(24px,2.4vw,40px);font-weight:500;font-stretch:112%;letter-spacing:-.02em;line-height:1.35;color:var(--tinte-2);text-wrap:balance}
.po__liste i{font-style:normal;color:var(--messing);margin:0 .35em}
.po__name{font:inherit;color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.18em;text-decoration-thickness:2px;transition:color .3s,text-decoration-color .3s}
.po__name:hover,.po__name:focus-visible{color:var(--lapis);text-decoration-color:var(--lapis)}

/* Sie und die Schweiz: Nacht mit Bogen */
.ps{position:relative;z-index:3;margin-top:calc(-1 * var(--bh));padding:calc(var(--bh) + clamp(80px,11vh,140px)) var(--g) clamp(140px,18vh,220px);color:var(--creme);
  background:radial-gradient(50% 40% at 50% 30%,rgba(56,90,184,.5),rgba(19,42,102,0) 70%),linear-gradient(180deg,#132A66,#0B1433);clip-path:inset(0 round 50% 50% 0 0 / var(--bh) var(--bh) 0 0)}
.ps[hidden]{display:none}
.pr-satz--nacht .pr-satz__lauf{color:rgba(247,242,233,.72)}
.ps__vergleich{margin-top:clamp(60px,8vh,110px)}
.ps__paar{display:flex;justify-content:center;gap:clamp(40px,10vw,200px)}
.ps__seite{display:grid;justify-items:center;gap:14px}
.ps__schild{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:99px;font-size:14px;font-weight:600;font-stretch:125%;letter-spacing:.2em;text-transform:uppercase;background:rgba(247,242,233,.1);box-shadow:inset 0 0 0 1px rgba(247,242,233,.3);color:var(--creme)}
.ps__schild--gold{background:linear-gradient(150deg,#F2DDA6,#C9A45C 55%,#A9853F);color:#24190A;box-shadow:0 16px 34px -18px rgba(0,0,0,.8)}
.ps__seite b{font-size:clamp(120px,14vw,250px);letter-spacing:-.05em;line-height:.82}
.ps__unter{font-size:16px;color:rgba(247,242,233,.62)}
.ps__urteil{margin-top:clamp(40px,6vh,70px);text-align:center;font-size:clamp(32px,4vw,72px);letter-spacing:-.03em;line-height:.95}
.ps__wahl{margin-top:clamp(50px,7vh,90px);text-align:center}
.ps__wahl .schrift{font-size:clamp(30px,2.6vw,44px);color:var(--messing-licht)}
.ps__wahl .branchen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:980px;margin:18px auto 0}
.ps__br.pille{width:auto;margin:0}
.ps__br[aria-checked="true"]{--pf:var(--creme);--pt:var(--tinte)}
.ps__quelle{max-width:80ch;margin:clamp(40px,5vh,60px) auto 0;text-align:center;font-size:13px;color:rgba(247,242,233,.48)}

/* Gespräch (1:1 Hauptseite) und Fuss: nichts eigenes ausser dem Anschluss */
.pr-mensch{position:relative;z-index:3}
.pr-mensch .mensch{margin-top:0}

/* ============================================================== Wissen */
.pw{position:relative;z-index:3;background:var(--travertin);padding:clamp(120px,16vh,200px) var(--g) clamp(140px,18vh,220px)}
.pw__balken{list-style:none;max-width:1100px;margin:clamp(50px,7vh,90px) auto 0}
.pw__balken li{display:grid;grid-template-columns:clamp(120px,12vw,180px) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;padding:22px 0;border-top:1px solid var(--linie)}
.pw__balken li:last-child{border-bottom:1px solid var(--linie)}
.pr-balken__zahl{font-size:clamp(38px,3.6vw,64px);font-weight:600;font-stretch:125%;letter-spacing:-.045em;line-height:.9}
.pr-balken__zahl small{font-size:.42em;letter-spacing:0}
.pr-balken__name{display:grid;gap:3px;font-size:19px;font-weight:600;font-stretch:112%;text-decoration:none}
.pr-balken__name small{font-size:15px;font-weight:400;font-stretch:100%;color:var(--tinte-3)}
.pr-balken__name:hover{color:var(--lapis)}
.pr-balken__bahn{height:10px;border-radius:10px;background:rgba(23,23,26,.07);overflow:hidden}
.pr-balken__bahn i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--lapis)}
.pw__hitze{max-width:1100px;margin:clamp(60px,8vh,100px) auto 0}
.pw__kopf{margin-top:clamp(110px,14vh,180px)}
.pw__liste{max-width:900px;margin:clamp(34px,4vh,54px) auto 0;border-bottom:1px solid var(--linie-2)}
.pw__f{border-top:1px solid var(--linie-2)}
.pw__f summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;font-size:clamp(21px,1.8vw,29px);font-weight:500;font-stretch:112%;letter-spacing:-.015em}
.pw__f summary::-webkit-details-marker{display:none}
.pw__plus{position:relative;flex:none;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linie-2);transition:transform .5s var(--ease),background .3s,color .3s}
.pw__plus::before,.pw__plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.6px;background:currentColor;transform:translate(-50%,-50%)}
.pw__plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease)}
.pw__f[open] .pw__plus{background:var(--tinte);color:var(--creme);transform:rotate(180deg)}
.pw__f[open] .pw__plus::after{transform:translate(-50%,-50%) rotate(0)}
.pw__f summary:hover .pw__plus{background:rgba(23,23,26,.06)}
.pw__text{max-width:68ch;padding:0 0 30px;animation:pr-auf .5s var(--ease) both}
.pw__text p{font-size:16.5px;line-height:1.6;color:var(--tinte-2)}
.pw__text p + p{margin-top:12px}
.pw__text .schrift{font-size:26px;margin-right:6px}
.pw__kurz{color:var(--tinte)!important;font-weight:500}
.pw__studie{color:var(--tinte-3)!important;font-size:15px!important}

/* ============================================================== Schublade: Nacht, mittig, ein Satz, das Handy, die Zahl */
.lade.pl{z-index:95}
.pl .lade__grund{background:rgba(9,16,42,.55)}
.pl .lade__karte{left:0;right:0;top:0;bottom:0;width:auto;height:auto;max-height:none;border-radius:0;padding:0;overflow:auto;color:var(--creme);transform:translateY(4%);opacity:0;transition:transform .8s var(--ease),opacity .6s var(--ease);
  background:radial-gradient(46% 50% at 50% 46%,rgba(56,90,184,.5),rgba(19,42,102,0) 72%),linear-gradient(180deg,#132A66,#0B1433)}
.pl.offen .lade__karte{transform:none;opacity:1}
.pl .lade__griff{display:none}
.pl__zu.lade__zu{position:fixed;top:clamp(18px,3vh,32px);right:clamp(18px,3vw,40px);float:none;width:56px;height:56px;background:var(--creme);color:var(--tinte);z-index:5}
.pl__buehne{min-height:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-areas:"kopf kopf" "mitte unten";align-content:center;align-items:center;gap:clamp(24px,3.4vh,44px) clamp(40px,6vw,110px);max-width:1180px;margin:0 auto;padding:clamp(70px,9vh,100px) var(--g) clamp(40px,6vh,70px)}
.pl__kopf{grid-area:kopf;text-align:center}
.pl__titel{font-size:clamp(34px,3.8vw,68px);letter-spacing:-.035em;line-height:.92;text-wrap:balance}
.pl__satz{margin:16px auto 0;max-width:52ch;font-size:17px;color:rgba(247,242,233,.7)}
.pl__mitte{grid-area:mitte;justify-self:center}
.pl__unten{grid-area:unten;max-width:520px}
.pl__zahl{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 .1em;line-height:.8}
.pl__zahl .schrift{font-size:clamp(36px,3vw,54px);color:var(--messing-licht);margin-right:.2em;transform:translateY(-.3em) rotate(-5deg)}
.pl__zahl b{font-size:clamp(96px,9vw,170px);letter-spacing:-.05em}
.pl__zahl .d:not(b){font-size:clamp(42px,3.6vw,66px);color:var(--messing-licht);margin-bottom:.1em}
.pl__zahl-satz{flex-basis:100%;margin-top:14px;font-size:17px;line-height:1.4;color:rgba(247,242,233,.78)}
.pl__lauf{margin-top:22px;font-size:16.5px;line-height:1.6;color:rgba(247,242,233,.8)}
.pl__lauf .schrift{font-size:28px;color:var(--messing-licht);margin-right:6px}
.pl__knoepfe{margin-top:28px}
.pl__knoepfe .pille{width:auto}
.pl__nav{position:fixed;top:50%;z-index:4;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--creme);box-shadow:inset 0 0 0 1px rgba(247,242,233,.32);transform:translateY(-50%);transition:background .3s,color .3s}
.pl__nav:hover{background:var(--creme);color:var(--tinte)}
.pl__nav svg{width:16px;height:16px}
.pl__nav--vor{left:clamp(14px,2vw,30px)}.pl__nav--vor span{transform:rotate(180deg)}
.pl__nav--nach{right:clamp(14px,2vw,30px)}
.pl__nav span{display:grid;place-items:center}

/* ============================================================== Handy-Breite */
@media (max-width:760px){
  :root{--g:16px}
  .pb{height:100svh;min-height:640px;max-height:none}
  .pb__fenster{left:0;width:100%;top:31%;bottom:22%}
  .pk{top:92px}
  .pk__z1{font-size:clamp(40px,12.4vw,58px);white-space:normal}
  .pk__z2{font-size:clamp(19px,5.4vw,25px)}
  .pk__schrift{position:static;display:block;margin:.12em 4% 0 auto;width:max-content;font-size:32px}
  /* #923 Esteban: am Handy fehlten die Anker (Person + SRF, «Über 24'000 Websites geprüft, gratis»). Jetzt als eine Zeile direkt
     über dem Feld: Person links, Zahl rechts, wie am Desktop links und rechts am Feld. */
  .pb__ecke--links[data-ecke="ruhe"],.pb__ecke--rechts[data-ecke="ruhe"]{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 92px)}
  /* #923 Esteban: «sieht man nicht gut, stört mit dem Hintergrund». Der Sockel läuft unten weich in Travertin aus, über der
     3D-Leinwand (z 2) und unter Ankern (z 4) und Feld (z 5); so stehen Person, Zahl und Feld auf ruhigem Grund. */
  .pb[data-zustand="ruhe"]::after{z-index:3;height:30%;background:linear-gradient(rgba(238,231,219,0),rgba(238,231,219,.9) 42%,var(--travertin) 70%)}  .pb__ecke--links[data-ecke="ruhe"]{left:16px;gap:9px}
  .pb__ecke--links[data-ecke="ruhe"] .person__bild{width:50px;height:50px}
  .pb__ecke--links[data-ecke="ruhe"] .person__bild img{inset:8px;width:34px;height:34px}
  .pb__ecke--links[data-ecke="ruhe"] .person__name{font-size:15px}
  .pb__ecke--links[data-ecke="ruhe"] .person__srf{font-size:12px}
  .pb__ecke--rechts[data-ecke="ruhe"]{right:16px;display:grid;grid-template-columns:auto auto;justify-content:end;column-gap:5px;row-gap:2px;align-items:baseline;text-align:right}
  .pb__ecke--rechts[data-ecke="ruhe"] .schrift{font-size:19px}
  .pb__ecke--rechts[data-ecke="ruhe"] b{font-size:26px}
  .pb__ecke--rechts[data-ecke="ruhe"] > span:last-child{grid-column:1 / -1;font-size:12px;max-width:none;white-space:nowrap;line-height:1.2}
  .pb__fuss{left:16px;right:16px;width:auto;transform:none;bottom:max(20px,env(safe-area-inset-bottom))}
  .pb:not([data-zustand="ruhe"]) .pb__fuss{transform:translateY(24px)}
  .pq{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - 24px)}
  .pq__reihe{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .pq__opt.pille{height:52px;padding:0 10px;font-size:14.5px;white-space:normal;line-height:1.15;text-align:center}
  .pq__reihe--viele{grid-template-columns:1fr 1fr 1fr}
  .pq__reihe--viele .pq__opt.pille{height:42px;font-size:13px;padding:0 6px}
  .pq__dom{display:none}
  .pq__stand{display:none}
  .pu__fuss{left:16px;right:16px;width:auto;transform:none;flex-direction:column;align-items:stretch;bottom:max(22px,env(safe-area-inset-bottom))}
  .pu__fuss .pille{justify-content:space-between}
  .pu__dom,.pu__bilanz{display:none}
  .pf{padding:0 12px}
  .pf__karte,.pf__karte--spiegel{grid-template-columns:1fr;padding:34px 22px 34px;min-height:0;border-radius:22px}
  .pf__karte--spiegel .pf__geraet{order:0}
  .pf__karte::after,.pf__karte--spiegel::after{background:linear-gradient(180deg,var(--ochsenblut) 30%,rgba(74,21,35,.7) 70%,rgba(74,21,35,.4))}
  .pf__karte--achtung::after{background:linear-gradient(180deg,#132A66 30%,rgba(19,42,102,.7))}
  .pf__zahl b{font-size:104px}
  .pf__folge{font-size:32px}
  .ph__handy,.pf__karte--spiegel .ph__handy{--hb:220px;transform:none}
  .ps__paar{gap:28px}
  .ps__seite b{font-size:96px}
  .ps__schild{height:40px;padding:0 14px;font-size:11.5px;letter-spacing:.14em}
  .pw__balken li{grid-template-columns:92px 1fr;gap:8px 14px}
  .pr-balken__bahn{grid-column:1 / -1}
  .pl__buehne{grid-template-columns:1fr;grid-template-areas:"kopf" "mitte" "unten";padding:86px 18px 70px}
  .pl__nav{top:auto;bottom:16px;transform:none;width:52px;height:52px;background:rgba(11,20,51,.6)}
}
@media (prefers-reduced-motion:reduce){
  .pb__wand,.pb__nacht{transition:none}
  .pq__opt.pille,.pn{animation:none}
  .pf__karte{opacity:1;transform:none}
}

/* #916 Messbogen: während der Prüfung rückt die Vitrine nach oben, damit die Antwort-Pillen den Bogen der 13 Marken nicht verdecken
   (die Kamera gleitet mit, api.umzug) */
.pb__fenster{transition:top 1.6s var(--ease),bottom 1.6s var(--ease)}
.pb[data-zustand="pruefen"] .pb__fenster{top:37%;bottom:15%}
@media (max-width:760px){ .pb[data-zustand="pruefen"] .pb__fenster{top:50%;bottom:13%} }
@media (prefers-reduced-motion:reduce){ .pb__fenster{transition:none} }

/* #916 R2 (Esteban: Anker «zu weit in den Ecken», Schrift im Feld zu klein, Antworten unten und Frage oben «mühsam», Status links
   und rechts «zu weit voneinander»): Ruhe = Person und Zahl links und rechts direkt am Feld; Prüfen = Antworten direkt unter der
   Frage, darunter die Glocke, der Stand als EINE Zeile mittig unter der Säule. */
.pb__form .feld{padding:8px 8px 8px 28px}
.pb__form .feld input{height:62px;font-size:22px}
.pb__form .feld .pille{height:62px;font-size:18px;padding:0 1.3rem 0 1.6rem}
.pb__fuss{width:min(640px,calc(100% - 2 * var(--g)))}
@media (min-width:1200px){
  .pb__ecke--links[data-ecke="ruhe"]{left:auto;right:calc(50% + 352px);bottom:calc(clamp(30px,5vh,58px) + 1px)}
  .pb__ecke--rechts[data-ecke="ruhe"]{right:auto;left:calc(50% + 352px);bottom:calc(clamp(30px,5vh,58px) + 14px)}
}
.pk--pruefen .pk__z1{font-size:clamp(40px,4.4vw,78px)}
.pk--pruefen .pk__z2{font-family:'Archivo',sans-serif;text-transform:none;letter-spacing:0;font-weight:500;font-stretch:100%;font-size:clamp(17px,1.35vw,22px);color:rgba(247,242,233,.8);margin-top:.7em}
/* #931 Belegzeile unter dem Befund: eigene Studie oder Studie mit Quelle, ruhig und gut lesbar (keine farbige Kleinschrift) */
.pk--pruefen .pk__z2{max-width:min(860px,100%);margin-left:auto;margin-right:auto}
@media (min-width:761px){.pk--pruefen{width:min(1100px,calc(100% - 340px))}}   /* #931: lange Fragen («Sie sind eine Zahnarztpraxis in Wil SG, richtig?») bleiben zwischen Logo und Menü */
.pk--pruefen .pk__beleg{display:block;margin:.75em auto 0;max-width:60ch;font-size:.8em;line-height:1.4;font-weight:400;color:rgba(247,242,233,.7)}
.pq{top:clamp(236px,31vh,320px);bottom:auto}
.pq__opt.pille{height:62px;font-size:18px;padding:0 1.9rem}
.pb__ecke[data-ecke="pruefen"]{bottom:clamp(18px,3vh,34px)}
.pq__dom{left:auto;right:calc(50% + 18px);align-items:flex-end;text-align:right}
.pq__stand{right:auto;left:calc(50% + 18px)}
.pq__dom::after{content:"";position:absolute;right:-18px;top:6px;bottom:6px;width:1px;background:rgba(247,242,233,.28)}
@media (max-width:760px){
  .pk--pruefen .pk__z1{font-size:clamp(30px,8.6vw,38px)}
  .pk--pruefen .pk__z2{font-size:15px}
  .pk--pruefen .pk__beleg{font-size:13px}
  .pq{top:clamp(250px,34vh,300px);bottom:auto}
  .pq__reihe{grid-template-columns:1fr 1fr}
  .pq__opt.pille{height:52px;font-size:15px}
  .pq__dom,.pq__stand{display:flex!important}
  .pq__dom{font-size:13px}.pq__dom > span:first-of-type{font-size:14px}
  .pq__stand b{font-size:34px!important}
  .pb__form .feld input{height:54px;font-size:18px}.pb__form .feld .pille{height:54px}
}

/* #916 R3 (Esteban: «die Zahl, die hochzählt, ist zu klein», «die Knöpfe noch nicht das richtige Design»): Antworten als Wahlfelder
   aus Glas mit Messing-Kante (Sprache der Vitrine), ein Messing-Kreis füllt sich beim Zeigen und beim Wählen; die Prozentzahl gross
   wie ein Titel. */
.pq__reihe{gap:14px}
.pq__opt{position:relative;display:inline-flex;align-items:center;gap:14px;min-width:200px;height:70px;padding:0 30px 0 24px;border-radius:20px;
  background:linear-gradient(180deg,rgba(247,242,233,.16),rgba(247,242,233,.05));-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(232,207,150,.4),inset 0 1px 0 rgba(255,255,255,.2),0 26px 50px -26px rgba(0,0,0,.95);
  color:var(--creme);font:600 19px/1.15 'Archivo',sans-serif;font-stretch:108%;text-align:left;cursor:pointer;
  transition:transform .45s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);
  animation:pq-kommt .7s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
@keyframes pq-kommt{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.pq__kreis{position:relative;flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--messing-licht)}
.pq__kreis::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--messing-licht);transform:scale(0);transition:transform .35s var(--ease)}
.pq__opt:hover,.pq__opt:focus-visible{transform:translateY(-3px);background:linear-gradient(180deg,rgba(247,242,233,.26),rgba(247,242,233,.1));
  box-shadow:inset 0 0 0 1.5px var(--messing-licht),inset 0 1px 0 rgba(255,255,255,.28),0 30px 60px -26px rgba(0,0,0,.95),0 0 40px -10px rgba(232,207,150,.45);outline:none}
.pq__opt:hover .pq__kreis::after,.pq__opt:focus-visible .pq__kreis::after{transform:scale(.55)}
.pq__opt.ist-gewaehlt{background:linear-gradient(180deg,#F0DBA6,#C9A45C);color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(255,246,222,.7),0 0 60px -6px rgba(232,207,150,.7)}
.pq__opt.ist-gewaehlt .pq__kreis{box-shadow:inset 0 0 0 1.5px var(--tinte)}
.pq__opt.ist-gewaehlt .pq__kreis::after{transform:scale(1);background:var(--tinte)}
.pq__stand{align-items:flex-end!important}
.pq__stand b{font-size:clamp(66px,6.2vw,108px)!important;line-height:.82;letter-spacing:-.04em}
.pq__stand > span:last-child{font-size:16px!important;padding-bottom:.35em}
.pq__dom{padding-bottom:.5em}
.pq__dom::after{top:auto;bottom:.6em;height:44px}
.pb[data-zustand="pruefen"] .pb__fenster{top:37%;bottom:19%}
@media (max-width:760px){
  .pq__reihe{gap:10px}
  .pq__opt{min-width:0;width:100%;height:58px;padding:0 14px;gap:10px;border-radius:16px;font-size:15.5px}
  .pq__kreis{width:16px;height:16px}
  .pq__stand b{font-size:54px!important}
  .pb[data-zustand="pruefen"] .pb__fenster{top:50%;bottom:16%}
}
@media (prefers-reduced-motion:reduce){ .pq__opt{animation:none} }

/* ============================================================== #916 unter dem Urteil
   Scroll-Hinweis: nach dem Urteil wird die Bühne etwas kürzer, der Titel der drei wichtigsten Punkte ragt unten ins Bild. */
.pb{transition:height 1.2s var(--ease)}
.pb[data-zustand="fertig"]{height:calc(100svh - clamp(110px,15vh,170px))}
.pr-erg{padding-top:clamp(44px,6vh,70px)}
.pr-mehr[hidden],.pa[hidden]{display:none}
.po__name--fehlt{color:var(--ochsenblut-2)}
.po__name--achtung{color:var(--messing-tief)}
.po--weitere{padding-bottom:0}

/* Anmeldung: Nacht mit Bogen wie «Sie und die Schweiz»; ein Blatt, auf dem das meiste schon steht */
.pa{position:relative;z-index:3;margin-top:clamp(90px,12vh,150px);padding:calc(var(--bh) + clamp(70px,10vh,120px)) var(--g) clamp(120px,16vh,200px);color:var(--creme);
  background:radial-gradient(50% 40% at 50% 26%,rgba(56,90,184,.55),rgba(19,42,102,0) 70%),linear-gradient(180deg,#132A66,#0B1433);clip-path:inset(0 round 50% 50% 0 0 / var(--bh) var(--bh) 0 0)}
.pa .pr-satz__titel{color:var(--creme)}
.pa__blatt{position:relative;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:center;width:min(1080px,100%);margin:clamp(50px,7vh,90px) auto 0;
  padding:clamp(28px,3.4vw,52px);border-radius:32px;color:var(--tinte);background:linear-gradient(180deg,#FBF8F2,#F2EBDD);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9),inset 0 0 0 1px rgba(201,164,92,.5)}
.pa__person{display:grid;justify-items:center;text-align:center;gap:6px;position:relative}
.pa__bild{width:clamp(150px,15vw,210px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 0 0 7.5px var(--messing),0 30px 60px -30px rgba(23,23,26,.7)}
.pa__bild img{width:100%;height:100%;object-fit:cover}
.pa__name{margin-top:14px;font-weight:600;font-stretch:112%;font-size:22px}
.pa__gruss{font-size:clamp(34px,3vw,48px);color:var(--lapis);transform:rotate(-6deg);margin-top:4px}
.pa__zeilen{display:grid;gap:0}
.pa__zeile{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:16px;min-height:62px;border-bottom:1px solid rgba(23,23,26,.12)}
.pa__lab{font-size:15px;color:var(--tinte-3)}
.pa__zeile b{font-weight:600;font-stretch:108%;font-size:clamp(18px,1.5vw,22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa__zeile--fest b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--messing);vertical-align:.12em}
.pa__zeile input{width:100%;height:56px;border:0;background:transparent;font:600 clamp(18px,1.5vw,22px) 'Archivo',sans-serif;font-stretch:108%;color:var(--tinte);outline:none;caret-color:var(--lapis)}
.pa__zeile input::placeholder{color:#a79f92;font-weight:500}
.pa__zeile--frei{border-bottom:1.5px solid rgba(30,59,135,.35);transition:border-color .3s}
.pa__zeile--frei:focus-within{border-bottom-color:var(--lapis)}
.pa__wahl{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.pa__chip{height:40px;padding:0 16px;border-radius:99px;font-size:15px;font-weight:500;color:var(--tinte-2);box-shadow:inset 0 0 0 1px rgba(23,23,26,.2);transition:background .3s,color .3s,box-shadow .3s}
.pa__chip:hover{box-shadow:inset 0 0 0 1.5px var(--lapis);color:var(--lapis)}
.pa__chip.ist-an{background:var(--lapis);color:var(--creme);box-shadow:none}
.pa__los{margin-top:26px;justify-self:start;height:62px;font-size:18px;padding:0 1.3rem 0 1.7rem}
.pa__hinweis{min-height:1.4em;margin-top:12px;font-size:15px;color:var(--ochsenblut-2)}
.pa__hinweis a{color:inherit;text-decoration:underline}
.pa__danke{grid-column:2;display:grid;gap:12px}
.pa__danke[hidden]{display:none}
.pa__danke-titel{font-size:clamp(44px,5vw,84px);letter-spacing:-.04em;line-height:.9}
.pa__danke-text{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--tinte-2)}
.pa__danke-text a{color:var(--lapis);font-weight:600}
.pa__blatt.ist-fertig .pa__zeilen{display:none}
.pa__blatt.ist-fertig .pa__danke{animation:pq-kommt .8s var(--ease) both}
@media (max-width:760px){
  .pb[data-zustand="fertig"]{height:calc(100svh - 96px)}
  .pa__blatt{grid-template-columns:1fr;padding:24px 18px 26px;border-radius:24px}
  .pa__person{grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:14px;align-items:center}
  .pa__bild{width:84px;grid-row:span 2;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--messing)}
  .pa__name{margin-top:0;font-size:18px}
  .pa__gruss{display:none}
  .pa__zeile{grid-template-columns:84px minmax(0,1fr);gap:10px;min-height:54px}
  .pa__lab{font-size:13.5px}
  .pa__zeile b,.pa__zeile input{font-size:16.5px}
  .pa__los{width:100%;justify-content:space-between}
  .pa__danke{grid-column:1}
}
/* Die Säule läuft unten weich in den Travertin aus statt hart abgeschnitten (über der festen 3D-Leinwand, unter Knöpfen und Ecken) */
.pr-erg::before{content:"";position:absolute;left:0;right:0;top:-130px;height:130px;z-index:3;pointer-events:none;background:linear-gradient(rgba(238,231,219,0),var(--travertin) 92%)}

/* ============================================================== #916 R2 unten (Esteban: Befunde nebeneinander, alles kompakter,
   FAQ zweispaltig, Vergleich grafisch, «In Ordnung» sichtbar klickbar, Anmeldung mit dem stehenden Bild wie auf der Hauptseite) */
/* Die wichtigsten Punkte nebeneinander: jede Karte hochkant, Zahl, Satz, Folge, Handy, Knöpfe */
.pf{margin-top:clamp(40px,5vh,64px);max-width:1440px;margin-left:auto;margin-right:auto;gap:clamp(16px,1.6vw,26px)}
@media (min-width:980px){
  .pf[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf[data-n="2"] .pf__karte,.pf[data-n="3"] .pf__karte{grid-template-columns:1fr;align-content:start;gap:22px;min-height:0;padding:clamp(28px,2.4vw,42px);border-radius:26px}
  .pf[data-n="2"] .pf__karte::after,.pf[data-n="3"] .pf__karte::after{background:linear-gradient(180deg,var(--ochsenblut) 0%,rgba(74,21,35,.9) 45%,rgba(74,21,35,.55) 100%)}
  .pf[data-n="2"] .pf__karte--achtung::after,.pf[data-n="3"] .pf__karte--achtung::after{background:linear-gradient(180deg,#132A66 0%,rgba(19,42,102,.9) 45%,rgba(19,42,102,.55) 100%)}
  .pf[data-n="3"] .pf__zahl b{font-size:clamp(76px,6.4vw,120px)}
  .pf[data-n="3"] .pf__zahl .schrift{font-size:clamp(30px,2.4vw,42px)}
  .pf[data-n="3"] .pf__prozent{font-size:clamp(36px,3vw,54px)}
  .pf[data-n="3"] .pf__folge{margin-top:14px;font-size:clamp(26px,2.1vw,38px)}
  .pf[data-n="3"] .pf__satz{margin-top:10px;font-size:15.5px}
  .pf[data-n="3"] .pf__beheben{font-size:15px;margin-top:12px}
  .pf[data-n="3"] .pf__schrift{display:none}
  .pf[data-n="2"] .pf__geraet,.pf[data-n="3"] .pf__geraet{order:0;justify-self:center}
  .pf[data-n="3"] .ph__handy{--hb:clamp(190px,13vw,230px)}
  .pf[data-n="3"] .ph__schild{height:38px;padding:0 15px;font-size:12px}
  .pf[data-n="3"] .pf__knoepfe{margin-top:4px}
  .pf[data-n="3"] .pf__knoepfe .pille{font-size:14.5px}
  .pf[data-n="2"] .pf__text,.pf[data-n="3"] .pf__text{max-width:none}
}
/* Kompakter: weniger Luft zwischen den Teilen */
.po{margin-top:clamp(70px,9vh,110px);padding-bottom:clamp(60px,8vh,100px)}
.po--weitere{padding-bottom:0}
.pa{margin-top:clamp(60px,8vh,100px);padding-top:calc(var(--bh) + clamp(40px,6vh,80px));padding-bottom:clamp(80px,10vh,130px)}
.ps{padding-top:calc(var(--bh) + clamp(50px,7vh,90px));padding-bottom:clamp(90px,11vh,140px)}
.pw{padding-top:clamp(80px,10vh,130px);padding-bottom:clamp(90px,11vh,140px)}
.pw__kopf{margin-top:clamp(70px,9vh,110px)}
/* Weitere Punkte + In Ordnung: Chips, die man als Knöpfe erkennt */
.po__hinweis{margin-top:14px;font-size:16px;color:var(--tinte-3)}
.po__liste{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1080px;margin-left:auto;margin-right:auto;margin-top:clamp(22px,2.6vw,34px)}
.po__chip{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 14px 0 18px;border-radius:99px;background:#FBF8F2;font-size:17px;font-weight:600;font-stretch:108%;color:var(--tinte);
  box-shadow:inset 0 0 0 1px rgba(23,23,26,.14),0 14px 30px -22px rgba(23,23,26,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.po__chip:hover,.po__chip:focus-visible{transform:translateY(-2px);background:#fff;box-shadow:inset 0 0 0 1.5px var(--lapis),0 20px 36px -22px rgba(23,23,26,.6);outline:none}
.po__punkt{width:12px;height:12px;border-radius:50%;background:var(--messing);box-shadow:0 0 0 3px rgba(201,164,92,.22)}
.po__chip--fehlt .po__punkt{background:var(--ochsenblut-2);box-shadow:0 0 0 3px rgba(122,34,54,.18)}
.po__chip--achtung .po__punkt{background:#E0A13A;box-shadow:0 0 0 3px rgba(224,161,58,.22)}
.po__pfeil{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(23,23,26,.06);color:var(--tinte-2);transition:background .3s,color .3s}
.po__pfeil svg{width:13px;height:13px}
.po__chip:hover .po__pfeil{background:var(--lapis);color:var(--creme)}
/* Sie und die Schweiz als Grafik */
.ps__vergleich{max-width:1180px;margin-left:auto;margin-right:auto;margin-top:clamp(40px,6vh,70px)}
.ps__reihen{display:grid;gap:18px;justify-content:center}
.ps__reihe{display:grid;grid-template-columns:230px auto 120px;align-items:center;gap:26px}
.ps__reihe .ps__schild{justify-self:end}
.ps__marken{display:flex;gap:clamp(8px,1vw,14px)}
.ps__marke{position:relative;width:clamp(30px,3vw,46px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,#F6E7BF,#C9A45C 55%,#8E6C33);box-shadow:0 10px 22px -12px rgba(0,0,0,.9),inset 0 -3px 6px rgba(0,0,0,.25)}
.ps__marke::after{content:"";position:absolute;inset:0;width:calc(var(--f) * 100%);background:radial-gradient(circle at 35% 30%,#FF9AA8,#E8435C 50%,#8A1830);box-shadow:inset 0 -3px 6px rgba(0,0,0,.25)}
.ps__reihe--sie .ps__marke::after{box-shadow:0 0 22px rgba(232,67,92,.8)}
.ps__reihe b{font-size:clamp(54px,5vw,88px);letter-spacing:-.05em;line-height:.85}
.ps__urteil{margin-top:clamp(30px,4vh,48px)}
.ps__liste{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,64px);margin:clamp(40px,5vh,64px) auto 0;padding:0}
.ps__zeile{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;row-gap:8px;align-items:center;padding:16px 0;border-top:1px solid rgba(247,242,233,.14)}
.ps__name{grid-column:1;justify-self:start;font-size:17px;font-weight:600;font-stretch:108%;color:var(--creme);text-align:left;text-decoration:underline;text-decoration-color:rgba(247,242,233,.25);text-underline-offset:4px}
.ps__name:hover{text-decoration-color:var(--messing-licht)}
.ps__bahn{grid-column:2;height:10px;border-radius:10px;background:rgba(247,242,233,.12);overflow:hidden}
.ps__bahn i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#A9BEF5,#E8CF96)}
.ps__q{grid-column:2;grid-row:2;font-size:13.5px;color:rgba(247,242,233,.6)}
.ps__q b{color:var(--creme);font-weight:600}
.ps__ihr{grid-column:3;grid-row:1 / span 2;height:34px;display:inline-flex;align-items:center;padding:0 14px;border-radius:99px;font-size:13.5px;font-weight:600;background:rgba(247,242,233,.1);color:var(--messing-licht);box-shadow:inset 0 0 0 1px rgba(232,207,150,.4)}
.ps__zeile--fehlt .ps__ihr{background:rgba(232,67,92,.18);color:#FFB3BE;box-shadow:inset 0 0 0 1px rgba(232,67,92,.55)}
/* FAQ, «Was der Check prüft» und die Studien-Balken zweispaltig */
@media (min-width:980px){
  .pw__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px);align-items:start;max-width:1240px;border-bottom:0}
  .pw__f{border-bottom:1px solid var(--linie-2);border-top:0}
  .pw__f:nth-child(-n+2){border-top:1px solid var(--linie-2)}
  .pw__f summary{padding:20px 0;font-size:clamp(19px,1.45vw,24px)}
  .pw__balken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,5vw,80px);max-width:1240px}
  .pw__balken li{grid-template-columns:clamp(100px,8vw,130px) minmax(0,1fr);row-gap:10px;padding:18px 0}
  .pw__balken li .pr-balken__bahn{grid-column:1 / -1}
  .pw__balken li:nth-last-child(2){border-bottom:1px solid var(--linie)}
}
/* Anmeldung: Esteban steht im Bogenfenster wie auf der Hauptseite, das Fenster ragt über das Blatt hinaus */
.pa__blatt{grid-template-columns:minmax(240px,330px) minmax(0,1fr);align-items:end;margin-top:clamp(90px,12vh,140px);overflow:visible}
.pa__person{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;margin-top:calc(-1 * clamp(130px,14vw,200px))}
.pa__bogen{width:100%;max-width:300px;box-shadow:0 50px 90px -40px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.7)}
.pa__unterschrift{margin-top:-46px;position:relative;z-index:2;font-size:clamp(46px,4vw,66px);color:var(--lapis);transform:rotate(-6deg);white-space:nowrap}
.pa__srf{margin-top:6px}
@media (max-width:979px){
  .pf__karte{grid-template-columns:1fr}
  .pf__karte .pf__geraet{order:0}
  .ps__reihe{grid-template-columns:1fr;justify-items:center;gap:10px}
  .ps__reihe .ps__schild{justify-self:center}
  .ps__liste{grid-template-columns:1fr}
  .pa__blatt{grid-template-columns:1fr;margin-top:clamp(150px,30vw,220px)}
  .pa__person{margin-top:calc(-1 * clamp(170px,40vw,240px));display:grid;grid-template-columns:1fr;justify-items:center;text-align:center}
  .pa__bogen{max-width:200px;grid-row:auto}
  .pa__unterschrift{display:block;margin-top:-34px;font-size:40px}
}
@media (max-width:760px){
  .ps__marke{width:24px}
  .ps__marken{gap:6px}
  .ps__zeile{grid-template-columns:minmax(0,1fr) auto}
  .ps__bahn,.ps__q{grid-column:1}
  .ps__ihr{grid-column:2}
  .ps__q{grid-row:3}
  .ps__bahn{grid-row:2}
  .ps__ihr{grid-row:1 / span 3}
  .po__chip{height:48px;font-size:15px}
}
@media (max-width:760px){ .pr-satz__titel{font-size:clamp(36px,10.4vw,56px)} }   /* #916: «WICHTIGSTEN» passt am Handy in eine Zeile */

/* ============================================================== #916 R3 unten: Welt der Vitrine, echtes 3D (Esteban: «grandios»)
   Reihenfolge: Exponate (Nacht, Vitrine) → Anmeldung (Travertin, Satz mit Lücken) → Wand (Nacht, 3D) → Alle Punkte → Esteban → Archiv */
html.ist-exponat .pb__nadeln{display:none}

/* Exponate: ein Bildschirm, links die Vitrine (feste 3D-Leinwand, Fenster [data-px-fenster]), rechts die drei Punkte */
.px{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);align-items:center;gap:clamp(20px,3vw,60px);min-height:100svh;
  padding:calc(var(--bh) + clamp(20px,3vh,40px)) var(--g) clamp(40px,6vh,70px);color:var(--creme);
  background:radial-gradient(48% 55% at 30% 55%,rgba(56,90,184,.55),rgba(19,42,102,0) 70%),linear-gradient(180deg,#132A66,#0B1433 70%);clip-path:inset(0 round 50% 50% 0 0 / var(--bh) var(--bh) 0 0)}
.px[hidden]{display:none}
.px__fenster{position:relative;align-self:stretch;min-height:min(78svh,760px)}
.px__text{position:relative;z-index:3;max-width:620px}
.px__titel{font-size:clamp(40px,4.3vw,82px);letter-spacing:-.04em;line-height:.9}
.px__lead{margin-top:16px;font-size:clamp(16px,1.2vw,19px);color:rgba(247,242,233,.72)}
.px__liste{list-style:none;margin:clamp(24px,3.4vh,40px) 0 0;padding:0;display:grid;gap:10px}
.px__punkt{border-radius:22px;padding:16px 20px;background:rgba(247,242,233,.04);box-shadow:inset 0 0 0 1px rgba(232,207,150,.16);opacity:.6;
  transition:opacity .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.px__punkt:hover{opacity:.9}
.px__punkt.ist-an{opacity:1;background:rgba(247,242,233,.09);box-shadow:inset 0 0 0 1.5px var(--messing-licht),0 0 70px -24px rgba(232,207,150,.55);transform:translateX(-6px)}
.px__wahl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:6px;width:100%;text-align:left;color:var(--creme);cursor:pointer}
.px__nr{grid-row:span 2;font-size:clamp(44px,3.6vw,62px);line-height:.82;color:var(--messing-licht);min-width:1ch}
.px__folge{font-size:clamp(20px,1.6vw,29px);line-height:1;letter-spacing:-.02em}
.px__quote{font-size:15px;line-height:1.4;color:rgba(247,242,233,.62)}
.px__quote b{color:var(--creme);font-weight:600}
.px__knoepfe{display:none;flex-wrap:wrap;gap:10px;margin-top:14px;padding-left:clamp(44px,4.6vw,80px)}
.px__punkt.ist-an .px__knoepfe{display:flex;animation:pq-kommt .6s var(--ease) both}
.px__k{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 18px;border-radius:99px;font:600 15px 'Archivo',sans-serif;font-stretch:108%;color:var(--creme);text-decoration:none;
  background:rgba(247,242,233,.1);box-shadow:inset 0 0 0 1px rgba(247,242,233,.3);transition:background .3s,transform .3s var(--ease)}
.px__k:hover{background:rgba(247,242,233,.2);transform:translateY(-2px)}
.px__k .pfeil{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--creme);color:var(--tinte)}
.px__k .pfeil svg{width:12px;height:12px}
.px__k--gold{background:linear-gradient(150deg,#F2DDA6,#C9A45C 55%,#A9853F);color:#24190A;box-shadow:0 14px 30px -16px rgba(0,0,0,.8)}
.px__k--gold:hover{background:linear-gradient(150deg,#F7E6B8,#D3AF68 55%,#B08C46)}
.px__k--gold .pfeil{background:#24190A;color:#F2DDA6}

/* Anmeldung: Travertin, links Esteban im Bogen, rechts ein Satz mit Lücken (das Bekannte steht schon drin) */
.pa{background:var(--travertin);clip-path:none;color:var(--tinte);margin-top:0;padding:clamp(80px,11vh,140px) var(--g) clamp(80px,11vh,140px)}
.pa__buehne{display:grid;grid-template-columns:minmax(240px,370px) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center;max-width:1280px;margin:0 auto}
.pa__person{display:grid;justify-items:center;gap:2px;margin:0}
.pa__bogen{width:100%;max-width:none}
.pa__unterschrift{margin-top:-54px;position:relative;z-index:2;font-size:clamp(50px,4.6vw,74px);color:var(--lapis);transform:rotate(-6deg);white-space:nowrap}
.pa__srf{margin-top:2px}
.pa__titel{font-size:clamp(44px,4.6vw,90px);letter-spacing:-.04em;line-height:.9}
.pa__satz{margin-top:clamp(22px,3vh,36px);font-size:clamp(22px,2vw,35px);line-height:1.6;font-weight:500;font-stretch:106%;letter-spacing:-.01em;color:var(--tinte-2);text-wrap:pretty}
.pa__luecke{display:inline-block;position:relative;vertical-align:baseline}
.pa__luecke input,.pa__luecke select{font:inherit;font-weight:650;color:var(--lapis);background:rgba(30,59,135,.05);border:0;border-bottom:2px dashed rgba(30,59,135,.5);border-radius:8px 8px 0 0;
  padding:0 .25em;margin:0 .05em;outline:none;field-sizing:content;min-width:4.5ch;max-width:min(18ch,60vw);transition:background .3s,border-color .3s}
.pa__luecke input::placeholder{color:rgba(30,59,135,.45);font-weight:500}
.pa__luecke input:focus,.pa__luecke select:focus{background:rgba(30,59,135,.1);border-bottom:2px solid var(--lapis)}
.pa__luecke select{appearance:none;-webkit-appearance:none;padding-right:1.1em;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E3B87' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .2em center;background-size:.5em auto}
.pa__luecke input:user-invalid{border-bottom-color:var(--ochsenblut-2)}
.pa__fest{color:var(--tinte);font-weight:650;background:linear-gradient(transparent 62%,rgba(201,164,92,.4) 0)}
.pa__fuss{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:clamp(26px,3.4vh,40px)}
.pa__los{width:auto;height:64px;font-size:18px;padding:0 1.3rem 0 1.8rem}
.pa__klein{font-size:16px;color:var(--tinte-3)}
.pa__klein a{color:var(--lapis);font-weight:600}
.pa__hinweis{margin-top:14px}
.pa__danke{display:grid;gap:14px;margin-top:20px}
.pa__danke[hidden]{display:none}
.pa__buehne.ist-fertig .pa__satz,.pa__buehne.ist-fertig .pa__fuss,.pa__buehne.ist-fertig .pa__hinweis{display:none}
.pa__buehne.ist-fertig .pa__danke{animation:pq-kommt .8s var(--ease) both}

/* Sie und die Schweiz: die 3D-Wand füllt den Bildschirm, links der Satz, unten die Punkte zum Wählen */
.sw{position:relative;z-index:3;height:100svh;min-height:680px;max-height:1120px;overflow:hidden;color:var(--creme);
  background:radial-gradient(60% 60% at 60% 45%,rgba(56,90,184,.45),rgba(19,42,102,0) 70%),linear-gradient(180deg,#0B1433,#132A66 55%,#0B1433)}
.sw[hidden]{display:none}
.sw__wand{position:absolute;inset:0;z-index:0}
.sw__wand canvas{display:block;width:100%;height:100%}
.sw::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,20,51,.94) 0,rgba(11,20,51,.78) 28%,rgba(11,20,51,0) 58%),linear-gradient(0deg,rgba(11,20,51,.9) 0,rgba(11,20,51,0) 30%)}
.sw__text{position:absolute;z-index:2;left:var(--g);top:clamp(80px,13vh,140px);max-width:min(560px,44vw)}
.sw__text.kommt > *{animation:pq-kommt .7s var(--ease) both}
.sw__text.kommt > :nth-child(2){animation-delay:.06s}.sw__text.kommt > :nth-child(3){animation-delay:.12s}.sw__text.kommt > :nth-child(4){animation-delay:.18s}
.sw__ueber{font-size:17px;font-weight:600;font-stretch:108%;color:var(--messing-licht)}
.sw__zahl{margin-top:8px;font-size:clamp(84px,9.4vw,180px);letter-spacing:-.05em;line-height:.82}
.sw__zahl small{font-size:.42em;letter-spacing:-.02em;color:var(--messing-licht)}
.sw__satz{margin-top:14px;font-size:clamp(26px,2.4vw,44px);letter-spacing:-.025em;line-height:.98;text-wrap:balance}
.sw__unter{margin-top:20px;font-size:17px;line-height:1.5;color:rgba(247,242,233,.75)}
.sw__ihr{display:inline-flex;align-items:center;height:52px;padding:0 22px;border-radius:99px;font-size:22px;font-weight:650;font-stretch:108%;color:#24190A;background:linear-gradient(150deg,#F2DDA6,#C9A45C 55%,#A9853F);box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.sw__ihr--fehlt{color:#fff;background:linear-gradient(150deg,#F07186,#C8324C 60%,#8A1830);box-shadow:0 0 50px -8px rgba(232,67,92,.75)}
.sw__wahl{position:absolute;z-index:2;left:var(--g);right:var(--g);bottom:clamp(20px,3.6vh,40px);display:grid;gap:14px}
.sw__punkte{display:flex;flex-wrap:wrap;gap:8px}
.sw__k{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px 0 13px;border-radius:99px;font:600 14.5px 'Archivo',sans-serif;font-stretch:106%;color:var(--creme);
  background:rgba(11,20,51,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(247,242,233,.24);transition:background .3s,color .3s,transform .3s var(--ease)}
.sw__k:hover{transform:translateY(-2px);background:rgba(30,59,135,.75)}
.sw__k.ist-an{background:var(--creme);color:var(--tinte);box-shadow:0 14px 30px -16px rgba(0,0,0,.9)}
.sw__k-punkt{width:9px;height:9px;border-radius:50%;background:var(--messing-licht)}
.sw__k--fehlt .sw__k-punkt{background:#E8435C;box-shadow:0 0 10px rgba(232,67,92,.9)}
.sw__k--auftakt .sw__k-punkt,.sw__k--urteil .sw__k-punkt{background:#A9BEF5}
.sw__branchen{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.sw__branchen .schrift{font-size:28px;color:var(--messing-licht)}
.sw__branchen .branchen{display:flex;flex-wrap:wrap;gap:6px}
.sw .ps__quelle{font-size:12.5px;color:rgba(247,242,233,.5);max-width:90ch}

/* Alle Punkte: «Ansehen» steht auf jedem Knopf */
.pr-mehr .po{margin-top:0;padding-top:clamp(70px,9vh,110px)}
.po__an{margin-left:4px;font-size:13.5px;font-weight:600;color:var(--lapis)}

/* Archiv mit Reitern */
.pw__reiter{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:clamp(28px,3.6vh,46px) auto 0}
.pw__reiter-k{height:54px;padding:0 26px;border-radius:99px;font:600 17px 'Archivo',sans-serif;font-stretch:108%;color:var(--tinte-2);box-shadow:inset 0 0 0 1px var(--linie-2);transition:background .3s,color .3s}
.pw__reiter-k:hover{box-shadow:inset 0 0 0 1.5px var(--tinte)}
.pw__reiter-k.ist-an{background:var(--tinte);color:var(--creme);box-shadow:none}
.pw__tafel{margin-top:clamp(20px,3vh,36px);animation:pr-auf .5s var(--ease) both}
.pw__tafel[hidden]{display:none}
.pw__tafel .pw__balken,.pw__tafel .pw__liste{margin-top:0}

@media (max-width:979px){
  .px{grid-template-columns:1fr;gap:6px;padding-top:calc(var(--bh) + 10px)}
  .px__fenster{min-height:46svh}
  .px__text{max-width:none}
  .px__punkt.ist-an{transform:none}
  .pa__buehne{grid-template-columns:1fr;gap:26px}
  .pa__person{max-width:240px;margin:0 auto}
  .pa__unterschrift{font-size:46px;margin-top:-40px}
  .sw__text{max-width:none;right:var(--g)}
  .sw::before{background:linear-gradient(180deg,rgba(11,20,51,.95) 0,rgba(11,20,51,.7) 40%,rgba(11,20,51,0) 62%),linear-gradient(0deg,rgba(11,20,51,.95) 0,rgba(11,20,51,0) 34%)}
  .sw__punkte{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--g));padding:0 var(--g)}
  .sw__k{flex:none}
  .sw__branchen .branchen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media (max-width:760px){
  .px__titel{font-size:34px}
  .px__punkt{padding:13px 14px}
  .px__nr{font-size:38px}
  .px__folge{font-size:19px}
  .px__knoepfe{padding-left:0}
  .pa__satz{font-size:21px}
  .sw__zahl{font-size:84px}
  .sw__satz{font-size:24px}
  .sw__ihr{height:44px;font-size:18px}
  .sw__branchen .schrift{display:none}
}
/* #916 Wand: Bedienleiste schmal und einzeilig (die Branchen-Knöpfe lagen über dem Satz) */
.sw__punkte,.sw__branchen .branchen{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.sw__punkte::-webkit-scrollbar,.sw__branchen .branchen::-webkit-scrollbar{display:none}
.sw__k{flex:none}
.sw__branchen{flex-wrap:nowrap;gap:12px}
.sw__branchen .schrift{flex:none;font-size:24px}
.sw__branchen .ps__br.pille{flex:none;height:34px;padding:0 14px;font-size:13px;width:auto}
.sw .ps__quelle{margin:0}
.sw__zahl{font-size:clamp(78px,8.2vw,156px)}
.sw__wahl{gap:10px}

/* ============================================================== #916 R4 (Esteban: eigenes 3D je Teil, nichts von selbst, normales Formular) */
/* Lupe: eigene 3D-Leinwand links, rechts drei Punkte (kompakt) und darunter das Detail des gewählten Punkts */
.px__lupe{position:relative;align-self:stretch;min-height:min(80svh,780px)}
.px__lupe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.px__punkt{padding:12px 18px}
.px__wahl{align-items:center;row-gap:0}
.px__nr{grid-row:auto;font-size:clamp(36px,2.8vw,48px)}
.px__folge{font-size:clamp(18px,1.4vw,24px)}
.px__detail{margin-top:18px;padding:22px 24px;border-radius:22px;background:rgba(247,242,233,.07);box-shadow:inset 0 0 0 1px rgba(232,207,150,.22)}
.px__detail:empty{display:none}
.px__detail.kommt{animation:pq-kommt .55s var(--ease) both}
.px__d-name{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:650;font-stretch:108%}
.px__d-stufe{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;font-size:13.5px;font-weight:600;background:rgba(232,207,150,.18);color:var(--messing-licht)}
.px__d-stufe--fehlt{background:rgba(232,67,92,.2);color:#FFB3BE}
.px__d-stufe--achtung{background:rgba(242,169,59,.2);color:#F7C77B}
.px__d-quote{margin-top:10px;font-size:15.5px;color:rgba(247,242,233,.7)}
.px__d-quote:empty{display:none}
.px__d-quote b{color:var(--creme)}
.px__d-text{margin-top:10px;font-size:16px;line-height:1.55;color:rgba(247,242,233,.85);max-width:52ch}
.px__detail .px__knoepfe{display:flex;padding-left:0;margin-top:16px;animation:none}
.px__k[disabled]{opacity:.45;pointer-events:none}

/* Anmeldung: Bild, Name, SRF links (bleibt), rechts ein klares Formular in einer Karte */
.pa__karte{padding:clamp(28px,3vw,48px);border-radius:30px;background:#FBF8F2;box-shadow:0 50px 100px -50px rgba(23,23,26,.55),inset 0 0 0 1px rgba(201,164,92,.45)}
.pa__intro{margin-top:14px;font-size:17px;line-height:1.5;color:var(--tinte-2);max-width:52ch}
.pa__felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin-top:clamp(22px,3vh,32px)}
.pa__feld{display:grid;gap:6px}
.pa__feld--breit{grid-column:1 / -1}
.pa__feld > span{font-size:14px;font-weight:600;color:var(--tinte-2)}
.pa__feld > span i{font-style:normal;font-weight:400;color:var(--tinte-3)}
.pa__feld input,.pa__feld select{height:56px;padding:0 16px;border-radius:14px;border:0;background:#fff;font:500 17px 'Archivo',sans-serif;color:var(--tinte);
  box-shadow:inset 0 0 0 1px rgba(23,23,26,.16);outline:none;transition:box-shadow .25s;appearance:none;-webkit-appearance:none}
.pa__feld select{padding-right:40px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2317171A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/12px auto}
.pa__feld input:focus,.pa__feld select:focus{box-shadow:inset 0 0 0 2px var(--lapis),0 0 0 5px rgba(30,59,135,.1)}
.pa__feld input[readonly]{background:rgba(201,164,92,.12);box-shadow:inset 0 0 0 1px rgba(201,164,92,.4);color:var(--tinte-2)}
.pa__feld input::placeholder{color:#a79f92}
.pa__fuss{margin-top:22px}
.pa__karte.ist-fertig .pa__felder,.pa__karte.ist-fertig .pa__fuss,.pa__karte.ist-fertig .pa__intro{display:none}
.pa__buehne.ist-fertig .pa__felder,.pa__buehne.ist-fertig .pa__intro{display:none}
@media (max-width:979px){
  .px__lupe{min-height:52svh}
}
@media (max-width:760px){
  .pa__felder{grid-template-columns:1fr}
  .px__detail{padding:16px}
  .px__folge{font-size:17px}
}
@media (max-width:979px){ /* #916: am Handy bleibt die Lupe oben stehen, während man die Punkte liest und antippt */
  .px{align-items:start}
  .px__lupe{position:sticky;top:64px;z-index:2;min-height:42svh;height:42svh;margin:0 calc(-1 * var(--g));background:linear-gradient(180deg,#132A66 0%,#122760 82%,rgba(18,39,96,0))}
}

/* #923 Mail-Schritt nach den drei Fragen (Esteban: «Kontaktdaten wären schon wichtig»): Feld wie das Prüf-Feld, darunter leise
   «Nur hier anschauen». Beide Wege bringen den Test weiter. */
.pq__mail{width:min(620px,100%);display:grid;justify-items:center;gap:12px;animation:pr-auf .6s var(--ease) both}
.pq__feld{width:100%;box-shadow:0 22px 44px -22px rgba(0,0,0,.85)}
.pq__feld input{height:58px;font-size:19px}
.pq__feld .pille{height:58px;font-size:17px}
.pq__mail-hinweis{min-height:0;margin:0;font-size:14px;color:#FFD9D2}
.pq__mail-hinweis:empty{display:none}
.pq__nur{font:500 15px/1.3 'Archivo',sans-serif;color:rgba(247,242,233,.78);background:none;border:0;padding:8px 10px;cursor:pointer;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(247,242,233,.35)}
.pq__nur:hover,.pq__nur:focus-visible{color:var(--creme);text-decoration-color:var(--messing)}
@media (max-width:760px){
  .pq__feld{padding:6px 6px 6px 18px}
  .pq__feld input{height:50px;font-size:16px}
  .pq__feld .pille{height:50px;font-size:15px;padding:0 .9rem 0 1.1rem}
}

/* #923 Esteban: «climora.ch, geprüft am …» unten links sieht man nicht, weil der Hintergrund oft dieselbe Farbe hat. Beide Ecken des
   Ergebnisses stehen auf einer Creme-Glasplatte (wie die Platten der Link-Seite), so tragen sie auf jedem Grund. */
.pu__dom,.pu__bilanz{padding:14px 18px;border-radius:20px;background:rgba(247,242,233,.86);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(201,164,92,.35),0 24px 48px -28px rgba(23,23,26,.55)}
.pu__dom > span{color:var(--tinte-2)}
/* #923 Name + Firma über dem Mail-Feld (Firma und Adresse von der Website vorausgefüllt) */
.pq__paar{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.pq__ein{display:flex;align-items:center;height:58px;padding:0 22px;border-radius:999px;background:var(--creme);box-shadow:0 22px 44px -22px rgba(0,0,0,.85);transition:box-shadow .3s var(--ease)}
.pq__ein:focus-within{box-shadow:inset 0 0 0 1.5px var(--lapis),0 0 0 5px rgba(201,164,92,.25)}
.pq__ein input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:500 18px/1 'Archivo',sans-serif;color:var(--tinte);caret-color:var(--lapis);outline:none}
.pq__ein input::placeholder{color:#857D71}
@media (max-width:760px){
  .pq__paar{gap:8px}
  .pq__ein{height:48px;padding:0 16px}
  .pq__ein input{font-size:16px}
}
/* #923 Mail-Schritt am Handy: nichts läuft rechts aus dem Bild (Spalten dürfen schrumpfen), die Vitrine rückt nach unten, damit
   Formular und «Nur hier anschauen» nicht über dem Laptop liegen */
.pq{grid-template-columns:minmax(0,1fr)}
.pq__mail{width:100%;max-width:620px;min-width:0}
.pq__paar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pq__ein,.pq__feld{min-width:0}
@media (max-width:760px){
  .pb[data-zustand="pruefen"][data-mail] .pb__fenster{top:62%;bottom:11%}
  .pq__ein{height:46px}
  .pq__feld input,.pq__feld .pille{height:46px}
  .pq__mail{gap:8px}
  .pq__nur{padding:4px 10px}
}

/* ============================================================== #923 Vier Bereiche (ersetzt die Knopf-Wolke «Alle Punkte»)
   Esteban: «unten alles visuell auf Niveau, all out, animiert, mehr Kaufbereitschaft». Der schwächste Bereich ist der eine Fokus
   (Nacht-Blau wie der Prüfraum, breiter), die anderen ruhig auf Creme. Je Prüfung eine Messing-Kugel wie im Messbogen der Glocke.
   Beim Erscheinen steigen die Spalten nacheinander auf, die Kugeln leuchten der Reihe nach auf (ein Moment, folgt dem Scrollen nicht). */
.po__schrift{display:block;font-size:clamp(34px,3.6vw,58px);margin:-.2em 0 0;transform:rotate(-3deg)}
.pb4{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);max-width:1280px;margin:clamp(34px,4vw,56px) auto 0;text-align:left}
.pb4__s{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,28px) clamp(22px,2.2vw,30px);border-radius:28px;background:#FBF8F2;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 28px 50px -34px rgba(23,23,26,.45);
  opacity:var(--o,1);transform:translateY(var(--y,0px));transition:opacity .8s var(--ease) calc(var(--i) * 110ms),transform 1.1s var(--ease) calc(var(--i) * 110ms)}
.pb4:not(.ist-da) .pb4__s{--o:0;--y:46px}
.pb4__s.ist-zuerst{background:radial-gradient(120% 90% at 20% 0%,#1E3B87 0%,#132A66 55%,#0E1F4D 100%);color:var(--creme);box-shadow:0 40px 70px -36px rgba(19,42,102,.95)}
.pb4__zuerst{position:absolute;top:-.45em;left:22px;font-size:clamp(30px,2.6vw,42px);color:#E8CF96;transform:rotate(-4deg)}
.pb4__name{font-size:clamp(24px,2.1vw,36px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.pb4__s.ist-zuerst .pb4__name{font-size:clamp(30px,2.8vw,48px)}
.pb4__stand{font-size:15px;font-weight:600;color:var(--tinte-2)}
.pb4__s.ist-zuerst .pb4__stand{color:#E8CF96}
.pb4__kugeln{display:flex;gap:10px;margin:2px 0 6px}
.kg{--f:#E2C68B;display:block;width:24px;height:24px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 12%,transparent 13%),radial-gradient(circle at 50% 55%,var(--f),color-mix(in srgb,var(--f) 55%,#2a1a08) 92%);
  box-shadow:0 6px 12px -6px rgba(23,23,26,.6);transform:scale(var(--s,1));opacity:var(--ko,1);
  transition:transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 110ms + var(--k) * 120ms + .35s),opacity .4s calc(var(--i) * 110ms + var(--k) * 120ms + .35s)}
.pb4:not(.ist-da) .kg{--s:.2;--ko:0}
.kg--achtung{--f:#D9861C;box-shadow:0 6px 12px -6px rgba(23,23,26,.6),0 0 18px -2px rgba(217,134,28,.75)}
.kg--fehlt{--f:#C4344E;box-shadow:0 6px 12px -6px rgba(23,23,26,.6),0 0 20px -2px rgba(196,52,78,.8)}
.kg--offen{--f:#9aa0ad}
.pb4__punkte{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto}
.pb4__punkte .po__chip{justify-content:flex-start;height:48px;font-size:15.5px;padding:0 12px 0 14px;width:100%}
.po__ansehen{margin-left:auto;font-size:13px;font-weight:600;color:var(--lapis);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease)}
.po__chip:hover .po__ansehen,.po__chip:focus-visible .po__ansehen{opacity:1;transform:none}
.pb4__s.ist-zuerst .po__chip{background:rgba(247,242,233,.1);color:var(--creme);box-shadow:inset 0 0 0 1px rgba(247,242,233,.22)}
.pb4__s.ist-zuerst .po__chip:hover{background:var(--creme);color:var(--tinte)}
.pb4__s.ist-zuerst .po__ansehen{color:#E8CF96}
.pb4__s.ist-zuerst .po__chip:hover .po__ansehen{color:var(--lapis)}
.po__hinweis{margin-top:clamp(22px,2.4vw,30px)}
.po__los{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 26px;margin-top:clamp(30px,3.4vw,46px)}
.po__los .pille{height:62px;font-size:18px;padding:0 10px 0 28px}
.po__wer{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--tinte-2);text-align:left;max-width:30ch}
.po__wer img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.po__wer b{color:var(--tinte);font-weight:600}
.sw__mind{display:block;font-weight:600;color:var(--creme);margin-bottom:4px}
@media (max-width:1100px){ .pb4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .pb4{grid-template-columns:minmax(0,1fr)}
  .pb4__s{border-radius:24px}
  .po__los .pille{width:100%;justify-content:space-between}
  .po__wer{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .pb4__s,.kg{transition:none} .pb4:not(.ist-da) .pb4__s{--o:1;--y:0px} .pb4:not(.ist-da) .kg{--s:1;--ko:1} }
/* #923 Feinschliff Vier Bereiche: Namen passen in die Spalte, Punkte linksbündig und sauber umbrechend, «Ansehen» als Einblendung rechts */
.pb4__name{font-size:clamp(20px,1.75vw,30px);overflow-wrap:anywhere}
.pb4__s.ist-zuerst .pb4__name{font-size:clamp(26px,2.5vw,42px)}
.pb4__punkte{margin-top:6px}
.pb4__punkte .po__chip{position:relative;height:auto;min-height:46px;padding:10px 16px 10px 14px;text-align:left;line-height:1.2;white-space:normal;justify-content:flex-start;gap:10px}
.pb4__punkte .po__punkt{flex:none}
.pb4__punkte .po__ansehen{position:absolute;right:14px;top:50%;margin:0;transform:translate(-6px,-50%);background:inherit;padding-left:8px}
.pb4__punkte .po__chip:hover .po__ansehen,.pb4__punkte .po__chip:focus-visible .po__ansehen{transform:translate(0,-50%)}
.pb4__name{font-size:clamp(18px,1.5vw,25px);font-stretch:112%;overflow-wrap:normal}
.pb4__s.ist-zuerst .pb4__name{font-stretch:125%}
.pb4__s:not(.ist-zuerst) .po__chip{font-size:14.5px}

/* ============ #931 R3: sichtbare Arbeit in der Vitrine (Esteban: «visuell all out») ============ */
/* Kein Zähler mehr: weder «Erste von sechs Fragen» noch Prozent und Domain unten. Fortschritt = Messbogen + Tafel + Plakette */
.pb[data-zustand="pruefen"] .pq__dom,.pb[data-zustand="pruefen"] .pq__stand,.pb[data-zustand="pruefen"] .pk--pruefen .pk__schrift{display:none!important}
/* Frage geht: der Kopf gleitet weich weg statt «Notiert.» */
.pk--pruefen{transition:opacity .45s var(--ease),filter .45s var(--ease),transform .45s var(--ease)}
.pk--pruefen.geht{opacity:0;filter:blur(6px);transform:translateX(-50%) translateY(-10px)}
.pk--pruefen.kommt{filter:none}
/* Antworten: immer EINE Zeile (Schrift passt sich an, pillenEinpassen) */
.pq__reihe{flex-wrap:nowrap}
.pq__opt.pille{white-space:nowrap}
@media (max-width:760px){
  .pq{width:calc(100% - 24px)}
  .pq__reihe{display:flex;flex-wrap:nowrap;gap:6px;justify-content:center;width:100%}
  .pq__opt.pille{flex:1 1 0;min-width:0;height:48px;padding:0 8px;font-size:14px;white-space:nowrap;justify-content:center}
  .pq__opt .pq__kreis{display:none}
}
/* Werk-Ebene: liegt genau über der 3D-Leinwand (gleiche Box wie .pb__leinwand), nur während der Prüfung */
.pb__werk{position:absolute;inset:0;z-index:3;pointer-events:none;display:none}
html:has(.pb[data-zustand="pruefen"]) .pb__werk{display:block}
/* Messingfaden von der Tafel zum Glas der Lupe: zeichnet sich bei jeder neuen Station */
.mt__faden{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .5s var(--ease)}
.mt__faden.ist-da{opacity:1}
.mt__faden line{stroke:#E2C789;stroke-width:1.25;stroke-linecap:round;stroke-dasharray:var(--len,300px);stroke-dashoffset:0;filter:drop-shadow(0 0 6px rgba(233,207,147,.45))}
.mt__faden.zieht line{animation:pw-faden .7s cubic-bezier(.16,1,.3,1) both}
.mt__faden circle{fill:#E9CF93;stroke:rgba(255,248,228,.9);stroke-width:1.5}
@keyframes pw-faden{from{stroke-dashoffset:var(--len,300px)}to{stroke-dashoffset:0}}
/* Museumstafel: Travertin-Karte mit Messingkante und zwei Nieten, Titel gesetzt wie ein Exponat-Schild */
.mt__tafel{position:absolute;left:0;top:0;width:264px;padding:14px 18px 15px;border-radius:5px;
  background:linear-gradient(170deg,#FBF7EF 0%,#F1E9DA 100%);border:1px solid rgba(169,128,47,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 -1px 0 rgba(120,90,40,.12) inset,0 22px 44px -20px rgba(4,8,24,.75),0 4px 10px -4px rgba(4,8,24,.35);
  color:#17171A;opacity:0;will-change:transform;transition:opacity .5s var(--ease)}
.mt__tafel::before,.mt__tafel::after{content:"";position:absolute;top:8px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F3DFA8,#A9802F 70%);box-shadow:0 1px 1px rgba(0,0,0,.25)}
.mt__tafel::before{left:8px}.mt__tafel::after{right:8px}
.mt__tafel.ist-da{opacity:1}
.mt__tafel.kommt .mt__titel,.mt__tafel.kommt .mt__wert{animation:pw-text .55s cubic-bezier(.16,1,.3,1) both}
.mt__tafel.kommt .mt__wert{animation-delay:.08s}
@keyframes pw-text{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(3px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
.mt__titel{margin:0;font-family:'Archivo',sans-serif;font-weight:600;font-stretch:112%;font-size:15px;line-height:1.25;letter-spacing:-.005em}
.mt__wert{display:flex;gap:9px;align-items:baseline;margin:.45em 0 0;font-family:'Archivo',sans-serif;font-size:13.5px;line-height:1.38;color:#4A453E}
.mt__wert i{flex:none;width:8px;height:8px;border-radius:50%;background:#C9A45C;transform:translateY(-1px);box-shadow:0 0 0 3px rgba(201,164,92,.18)}
.mt__tafel[data-stufe="pruefen"] .mt__wert i{animation:pr-puls 1.4s ease-out infinite}
.mt__tafel[data-stufe="gut"] .mt__wert i{background:#3E6B4A;box-shadow:0 0 0 3px rgba(62,107,74,.16)}
.mt__tafel[data-stufe="achtung"] .mt__wert i{background:#C77A14;box-shadow:0 0 0 3px rgba(199,122,20,.18)}
.mt__tafel[data-stufe="fehlt"] .mt__wert i{background:#9E2340;box-shadow:0 0 0 3px rgba(158,35,64,.16)}
.mt__tafel[data-stufe="fehlt"]{border-color:rgba(158,35,64,.45)}
/* «Branche stimmt nicht?» unter der Plakette */
.pq__korr{position:absolute;left:0;top:0;pointer-events:auto;opacity:0;transition:opacity .6s var(--ease) .3s}
.pq__korr.ist-da{opacity:1}
.pq__korr-knopf{padding:6px 12px;border:1px solid rgba(233,207,147,.45);border-radius:999px;background:rgba(11,20,51,.55);backdrop-filter:blur(6px);
  color:#F7F2E9;font:500 13px/1 'Archivo',sans-serif;cursor:pointer;transition:background .25s,border-color .25s}
.pq__korr-knopf:hover,.pq__korr-knopf:focus-visible{background:rgba(11,20,51,.8);border-color:#E9CF93;outline:none}
.pq__korr-wahl select{font:500 14px 'Archivo',sans-serif;padding:8px 12px;border:1px solid #C9A45C;border-radius:10px;background:#FBF7EF;color:#17171A;max-width:250px}
@media (max-width:760px){
  .mt__tafel{width:min(250px,calc(100vw - 24px));padding:11px 14px 12px}
  .mt__titel{font-size:14px}.mt__wert{font-size:12.5px}
  .pq__korr-knopf{font-size:12px;padding:5px 10px}
}
@media (prefers-reduced-motion:reduce){.mt__faden.zieht line,.mt__tafel.kommt .mt__titel,.mt__tafel.kommt .mt__wert{animation:none}}
/* KI-Versprechen im Hero: eine ruhige Zeile unter dem Feld (statt Schreibschrift) */
.pb__ki{margin:12px 0 0;text-align:center;font-family:'Archivo',sans-serif;font-size:15px;line-height:1.35;color:#4A453E}
.pb__ki b{font-weight:600;color:#17171A}
@media (max-width:760px){.pb__ki{font-size:13.5px}}
.mt__tafel.ohne-ort{opacity:0!important}
/* Ziel-Frage: für welche Branche die Antworten zugeschnitten sind, mit «stimmt nicht?» */
.pq__fuer{margin:14px 0 0;text-align:center;font-family:'Archivo',sans-serif;font-size:14px;line-height:1.4;color:rgba(247,242,233,.78);pointer-events:auto}
.pq__fuer-knopf{margin-left:.35em;padding:0;border:0;background:none;color:#E9CF93;font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(233,207,147,.5);cursor:pointer}
.pq__fuer-knopf:hover,.pq__fuer-knopf:focus-visible{color:#F7F2E9;text-decoration-color:currentColor;outline:none}
.pq__fuer .pq__korr-wahl select{margin-top:2px}
@media (max-width:760px){.pq__fuer{font-size:12.5px;margin-top:10px}}
/* #931: Antworten nie umbrechen (auch nicht der Text in der Pille); pillenEinpassen verkleinert die Schrift */
.pq__opt.pille,.pq__opt .pq__text{white-space:nowrap!important}
@media (max-width:760px){.pq__opt.pille{line-height:1}}
/* #931: KI-Zeile im Hero liegt auf dem Kapitell: ruhiges Travertin-Schild, damit sie auf dem Ornament lesbar bleibt */
.pb__ki{display:table;margin:12px auto 0;padding:7px 16px 8px;border-radius:999px;background:rgba(247,242,233,.9);box-shadow:0 8px 24px -14px rgba(23,23,26,.5);text-wrap:balance}
.pb__ki b{white-space:nowrap}
@media (max-width:760px){.pb__ki{display:none}}   /* #931: am Handy hebt die Zeile das Feld in die Anker (Esteban/24'328); dort trägt die Link-Seite das KI-Versprechen */
/* #931 Branchen-Auswahl in Vitren-Farben: Travertin-Liste mit Messingkante, Lapis für die Auswahl, eigener Rollbalken */
.pq__fuer{position:relative}
.bw{position:relative;display:inline-block;text-align:left;vertical-align:top}
.bw__kopf{display:block;margin:0 0 6px;font:500 12.5px/1 'Archivo',sans-serif;color:rgba(247,242,233,.7)}
.bw__liste{margin:0;padding:6px;list-style:none;width:min(320px,calc(100vw - 32px));max-height:min(300px,42vh);overflow:auto;border-radius:14px;
  background:linear-gradient(170deg,#FBF7EF 0%,#F1E9DA 100%);border:1px solid rgba(169,128,47,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 28px 56px -24px rgba(4,8,24,.8),0 6px 14px -6px rgba(4,8,24,.4);
  scrollbar-width:thin;scrollbar-color:#C9A45C transparent;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top center;transition:opacity .28s var(--ease),transform .38s var(--ease)}
.pq__fuer.ist-offen .bw__liste{opacity:1;transform:none}
.bw__liste::-webkit-scrollbar{width:8px}.bw__liste::-webkit-scrollbar-thumb{background:#C9A45C;border-radius:8px;border:2px solid #F4EDE0}
.bw__opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font:500 14.5px/1.25 'Archivo',sans-serif;color:#17171A;cursor:pointer;outline:none;transition:background .18s,color .18s}
.bw__opt i{flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid #C9A45C;transition:background .18s,border-color .18s}
.bw__opt:hover,.bw__opt:focus-visible{background:rgba(201,164,92,.18)}
.bw__opt:focus-visible{box-shadow:0 0 0 2px #1E3B87 inset}
.bw__opt.ist-an{background:#1E3B87;color:#F7F2E9}
.bw__opt.ist-an i{background:#E9CF93;border-color:#E9CF93}
.bw__opt + .bw__opt{margin-top:2px}
@media (prefers-reduced-motion:reduce){.bw__liste{transition:none}}
/* #931 Reaktion nach einer Antwort: der Fakt in Lesegrösse (vorher zu klein und zu kurz), «Weiter» mit ablaufender Zeitlinie */
.pk--pruefen .pk__fakt{display:block;margin:.7em auto 0;max-width:46ch;font-size:clamp(19px,1.55vw,25px);line-height:1.38;font-weight:500;color:#F7F2E9;text-wrap:balance}
.pk--pruefen.ist-reaktion .pk__z1{color:#E9CF93}
.pq__reihe--weiter{justify-content:center}
.pq__weiter{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border:1px solid rgba(233,207,147,.55);border-radius:999px;
  background:rgba(11,20,51,.55);backdrop-filter:blur(6px);color:#F7F2E9;font:600 16px/1 'Archivo',sans-serif;cursor:pointer;transition:background .25s,border-color .25s}
.pq__weiter:hover,.pq__weiter:focus-visible{background:rgba(30,59,135,.8);border-color:#E9CF93;outline:none}
.pq__weiter-zeit{position:absolute;left:0;bottom:0;height:2px;width:100%;background:#E9CF93;transform-origin:left;animation:pq-zeit var(--dauer,4000ms) linear both}
@keyframes pq-zeit{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:760px){.pk--pruefen .pk__fakt{font-size:17px;max-width:none}.pq__weiter{height:46px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.pq__weiter-zeit{animation:none}}
.pk--urteil .pu__weiter{display:inline-flex;margin:.9em auto 0;height:50px;padding:0 1.6rem;font-size:16px;pointer-events:auto;text-decoration:none}
/* #931 Reaktion ohne Knopf: feine Zeitlinie, Tippen auf die Bühne = weiter */
.pq__zeit{width:min(240px,60vw);height:2px;margin:6px auto 0;border-radius:2px;background:rgba(233,207,147,.22);overflow:hidden}
.pq__zeit i{display:block;height:100%;background:#E9CF93;transform-origin:left;animation:pq-zeit var(--dauer,3000ms) linear both}
[data-gl]:has([data-gl-fragen][data-reaktion]){cursor:pointer}
