/* Website-Neustart 29.10.2026 (8856): Layout der zwei Frames. Farben, Schrift, Knöpfe und .ck-ic aus dem Kit. */
html{scroll-padding-top:80px}
.ck-footer .ck-brand{display:flex!important;flex-direction:row!important;align-items:center;gap:10px}
.n-held{padding:72px var(--ck-gutter,16px) 56px;border-bottom:1px solid var(--ck-hair);background:linear-gradient(180deg,var(--ck-bg) 0%,var(--ck-sunken) 100%)}
.n-held.is-schmal{padding-bottom:40px}
.n-held-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.n-h1{margin:18px 0 0;font:700 clamp(38px,4.4vw,58px)/1.05 var(--ck-font-display,var(--ck-font-body));letter-spacing:-.025em;color:var(--ck-t0);max-width:17ch}
.n-lead{margin:20px 0 0;font-size:19px;line-height:1.5;color:var(--ck-t2);max-width:40ch}
.n-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.n-unter{margin-top:12px;color:var(--ck-t3)}
.n-h2{margin:0;font:650 clamp(28px,2.8vw,38px)/1.15 var(--ck-font-body);letter-spacing:-.02em;color:var(--ck-t0);max-width:22ch}
.n-h3{margin:0;font:650 24px/1.25 var(--ck-font-body);letter-spacing:-.01em;color:var(--ck-t0);max-width:24ch}
.n-text{margin:14px 0 0;font-size:17.5px;line-height:1.6;color:var(--ck-t2);max-width:52ch}
.n-link{display:inline-block;margin-top:18px;font-weight:600}
.n-kopf-mittig{text-align:center;max-width:760px;margin:0 auto}.n-kopf-mittig .n-h2,.n-kopf-mittig .n-text{margin-left:auto;margin-right:auto}
.n-schaubild{margin:0}.n-schaubild img{display:block;width:100%;height:auto}
.n-modus .n-schaubild{margin-top:40px;padding:28px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-xl);background:var(--ck-card)}
.n-zwei{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--ck-border);background:var(--ck-card);box-shadow:0 24px 60px -24px rgba(14,17,23,.28),0 2px 6px rgba(14,17,23,.06)}
.shot .leiste{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--ck-hair);background:var(--ck-sunken)}
.shot .leiste i{width:9px;height:9px;border-radius:50%;background:var(--ck-border)}
.shot .leiste span{margin-left:10px;font:500 11.5px/1 var(--ck-font-mono);color:var(--ck-t3)}
.shot img{display:block;width:100%;height:auto}
.shot.is-held img{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
.shot figcaption{padding:10px 14px;border-top:1px solid var(--ck-hair)}
.shot.is-schmal{width:min(520px,100%);justify-self:center}.shot.is-hoch{width:min(360px,100%);justify-self:center}
.n-szene{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;margin-top:72px}
.n-szene.is-rechts{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.n-szene.is-rechts .n-szene-text{order:2}
.n-nr{display:block;margin-bottom:12px;font:500 13px/1 var(--ck-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ck-ac)}
.n-bsp{margin:22px 0 0;padding:16px 18px;border-left:3px solid var(--ck-ac);border-radius:0 12px 12px 0;background:var(--ck-ac-bg);font-size:16px;line-height:1.55;color:var(--ck-t1,var(--ck-t0));max-width:52ch}
.n-bsp b{display:block;margin-bottom:4px;font:600 12px/1 var(--ck-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ck-ac)}
.n-sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.n-sprung a{padding:7px 12px;border:1px solid var(--ck-border);border-radius:999px;font:500 13px/1 var(--ck-font-body);color:var(--ck-t1,var(--ck-t0));background:var(--ck-card)}
.n-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.n-zahlen div{padding:18px;border:1px solid var(--ck-hair);border-radius:14px;background:var(--ck-card)}
.n-zahlen b{display:block;font:700 34px/1 var(--ck-font-body);letter-spacing:-.02em;color:var(--ck-t0)}
.n-zahlen span{display:block;margin-top:8px;font-size:14.5px;color:var(--ck-t2)}.n-zahlen small{display:block;margin-top:6px;font:500 11.5px/1.4 var(--ck-font-mono);color:var(--ck-t3)}
.n-schluss{padding:80px var(--ck-gutter,16px);background:#0D1117;color:#E6EDF3}.n-schluss .n-h2{color:#F2F5F8;max-width:26ch}
.n-punkte{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.n-punkte li{display:flex;align-items:center;gap:14px;font-size:16px;line-height:1.45;color:#C9CFD8}
.n-schluss .n-knoepfe{margin-top:36px}.n-hell{background:#fff;color:#0D1117;border-color:#fff}.n-rand{background:transparent;color:#fff;border-color:#4B5563}
@media (max-width:900px){
 .n-held{padding:44px var(--ck-gutter,16px) 36px}.n-held-raster,.n-zwei,.n-szene,.n-szene.is-rechts{grid-template-columns:minmax(0,1fr);gap:28px}
 .n-szene.is-rechts .n-szene-text{order:0}.n-szene{margin-top:52px}.n-punkte{grid-template-columns:minmax(0,1fr)}
 .n-modus .n-schaubild{padding:14px;overflow-x:auto}.n-modus .n-schaubild img{min-width:620px}
 .n-zahlen{grid-template-columns:minmax(0,1fr)}.shot.is-held{max-width:420px;justify-self:center}
}

/* Erster Bildschirm nach Carstens Maßstab (12:15): Was, Brauche ich das, Will ich, ohne Scrollen bei 1280 und 390 */
.n-erst{padding-top:30px;padding-bottom:24px}
.n-erst .n-h1{font-size:clamp(34px,4vw,54px);max-width:16ch;margin-top:14px}
.n-erst .n-lead{margin-top:14px;font-size:18.5px}
.n-schmerz{margin:18px 0 0;padding:12px 14px;border-left:3px solid #E5484D;background:#FDF1F1;border-radius:0 10px 10px 0;font-size:16px;line-height:1.5;color:var(--ck-t1,var(--ck-t0));max-width:46ch}
.n-schmerz b{margin-right:6px;font:600 12px/1 var(--ck-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#C0392B}
.n-erst .n-knoepfe{margin-top:22px}.n-ein-knopf{align-items:center;gap:18px}.n-daneben{margin-top:0}.n-erst .n-unter{margin-top:10px}
.n-moment{position:relative;display:grid;justify-items:center}
.n-moment .n-kompass{width:270px}
.n-moment-karte{width:min(520px,100%);margin-top:-70px;position:relative;z-index:1}

.n-moment-satz{margin:12px 0 0;font:600 15.5px/1.4 var(--ck-font-body);color:var(--ck-t0);text-align:center;max-width:36ch}
.n-streifen{margin:20px 0 0;padding:14px 24px 6px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-xl);background:var(--ck-card)}
.n-streifen img{display:block;width:100%;height:auto}
@media (max-width:900px){
 .n-erst{padding-top:20px;padding-bottom:20px}
 .n-erst .n-h1{font-size:31px;margin-top:10px}.n-erst .n-lead{font-size:16.5px;margin-top:10px}
 .n-schmerz{font-size:14.5px;margin-top:12px;padding:10px 12px}
 .n-erst .n-knoepfe{margin-top:14px;gap:10px}.n-erst .n-knoepfe .ck-btn{width:100%;height:46px}.n-daneben{width:100%;text-align:center}
 .n-erst .n-eyebrow,.n-erst .ck-eyebrow{display:none}
 .n-erst .ck-container{display:flex;flex-direction:column}
 .n-erst .n-held-raster,.n-erst .n-held-raster>div:first-child{display:contents}
 .n-erst .n-h1{order:1}.n-erst .n-lead{order:2}.n-schmerz{order:3}.n-streifen{order:4}.n-erst .n-knoepfe{order:5}.n-erst .n-unter{order:6}
 .n-moment{order:7;display:flex;flex-direction:column;align-items:center;margin-top:14px}
 .n-moment .n-kompass{display:none}.n-moment-karte{margin-top:0}
 .n-moment-satz{order:-1;margin:0 0 10px;font-size:15px}
 .n-streifen{margin-top:14px;padding:12px 10px 8px}
}

/* Harte Fakten (Carsten 11:45: „Klartext, wo was und wie konkret ist“; Echo compass-website-fakten) */
.n-macht{max-width:20ch}
.n-macht-zeile{margin:16px 0 0;font:650 20px/1.3 var(--ck-font-body);color:var(--ck-t0)}
.n-fakten{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.n-fakten li{padding:14px 16px;border:1px solid var(--ck-hair);border-radius:12px;background:var(--ck-card);font-size:15.5px;line-height:1.5;color:var(--ck-t1,var(--ck-t0))}
.n-fakten b,.n-fakt b{display:block;margin-bottom:4px;font:600 11.5px/1 var(--ck-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ck-t3)}
.n-befehl{align-self:center;padding:24px;border-radius:var(--ck-r-xl);background:#0D1117;color:#E6EDF3}
.n-befehl-kopf{margin:0;font-size:16px;line-height:1.5;color:#C9CFD8}
.n-code{margin:16px 0 0;padding:16px 18px;border-radius:10px;background:#161B22;border:1px solid #30363D;overflow-x:auto}
.n-code code{display:block;padding:0;border:0;background:none;font:500 13.5px/1.6 var(--ck-font-mono);color:#E6EDF3;white-space:pre-wrap;overflow-wrap:anywhere}
.n-quelle{margin:14px 0 0;color:#7D8590}
.n-fakt{margin:12px 0 0;font-size:14.5px;line-height:1.5;color:var(--ck-t2);max-width:52ch}

/* Kompass im Kopfbereich (Trinity 8955): M2 groß, die Nadel sucht ihre Richtung und kommt ruhig zum Stehen. */
.n-kompass{margin:0;justify-self:center;width:min(420px,100%)}
.n-kompass svg{display:block;width:100%;height:auto;overflow:visible}
.n-kompass .striche path{stroke-linecap:round}.n-kompass .striche .k{stroke:#C9CFD8;stroke-width:.35}.n-kompass .striche .g{stroke:#8E98A6;stroke-width:.6}
.n-kompass .nadel{transform-box:view-box;transform-origin:32px 32px;animation:n-suchen 3.4s cubic-bezier(.45,.05,.35,1) .35s both}
.n-kompass .scheibe,.n-kompass .striche{transform-box:view-box;transform-origin:32px 32px;animation:n-auf .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes n-suchen{0%{transform:rotate(-58deg)}17%{transform:rotate(31deg)}33%{transform:rotate(-17deg)}49%{transform:rotate(9deg)}64%{transform:rotate(-4.5deg)}79%{transform:rotate(2deg)}100%{transform:rotate(0deg)}}
@keyframes n-auf{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.n-kompass .nadel,.n-kompass .scheibe,.n-kompass .striche{animation:none}}
.n-produkt{padding:0 var(--ck-gutter,16px);margin-top:-44px;position:relative;z-index:1}
.n-produkt .shot{max-width:820px;margin:0 auto}
@media (max-width:900px){.n-kompass{width:220px;order:-1}.n-produkt{margin-top:-24px}}

/* Kopie der Kit-Nachträge vom 29.10.2026 (.ck-ic, .ck-btn.ck-hide-m), bis die Kit-Lieferung übernommen ist. */
/* ── Nachtrag 29.10.2026 · Ein Icon-Maß für Karten und Abschnitte (Trinity 8925, Carsten: „prüf mal, wie groß das Icon ist“) ──
   Gemessen auf /compass/ bei 1280: fünf Maße für dieselbe Aufgabe (18, 22, 26, 30, 32 px). Ein 22-px-Strich in einem
   24er viewBox wirkt etwa 16 px groß. Ab jetzt EIN Maß: 24-px-Strich auf einer 40-px-Fläche. Häkchen in Listen bleiben
   Textzeichen (18 px), sie sind kein Icon. Wo ein Icon nichts zeigt, entfällt es. */
.ck-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--ck-ac-bg);color:var(--ck-ac)}
.ck-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-ic.is-dunkel{background:rgba(255,255,255,.08);color:#E6EDF3}

/* ── Nachtrag 29.10.2026 · .ck-hide-m nimmt einem Knopf nicht mehr das Flex (Trinity 8944) ──
   .ck-hide-m{display:initial} stand nach .ck-btn{display:inline-flex}. Auf einem Knopf wurde daraus im
   Flex-Kopf display:block, und der Text saß oben im Kasten („Anmelden“ 7,7 px zu hoch). */
.ck-btn.ck-hide-m{display:inline-flex}
@media (max-width:760px){.ck-btn.ck-hide-m{display:none}}

/* Echte Seiten (29.10.2026): Überschrift über der Karte im ersten Bildschirm */
.n-moment-titel{margin:14px 0 10px;font:650 19px/1.3 var(--ck-font-body);color:var(--ck-t0);text-align:center}
.n-moment .n-kompass+.n-moment-titel{margin-top:-6px}
@media (max-width:900px){.n-moment-titel{order:-2;margin:0 0 6px;font-size:17px}}
.n-erst .n-h1{max-width:21ch;font-size:clamp(34px,3.6vw,46px)}
.n-moment .n-kompass{width:220px}
.n-moment .n-kompass+.n-moment-titel{margin-top:4px}
.n-moment-karte{margin-top:0!important;width:min(470px,100%)}
@media (max-width:900px){
 .n-erst .n-h1{font-size:26px;max-width:none;margin-top:0}.n-erst .n-lead{font-size:15px;line-height:1.45}
 .n-schmerz{font-size:13.5px;line-height:1.45}
 .n-erst .n-knoepfe .ck-btn{white-space:normal;height:auto;min-height:46px;padding:11px 14px;line-height:1.3;text-align:center}
 .n-streifen{padding:6px 10px 2px;margin-top:10px}.n-streifen img{max-width:262px;margin:0 auto}
 .n-erst .n-unter{font-size:12px;margin-top:6px}
 .n-erst .n-knoepfe{margin-top:10px}.n-moment{margin-top:8px!important}
}