/* Website-Ergänzungen zum Kit (nur Layout dieser Seiten) */
/* Anker unter dem festen Kopf (8871, 29.10.2026): Der Kopf (.ck-site-nav) ist sticky
   und 64 px hoch, am Handy 56 px. Ohne Abstand landet die Oberkante eines Ankerziels
   unter dem Kopf; dass bisher nichts verdeckt wurde, lag nur am Innenabstand der
   Abschnitte. Der Wächter dazu: tests/test_anker_unter_kopf.py */
html{scroll-padding-top:80px}
@media (max-width:760px){html{scroll-padding-top:68px}}
/* Kopf: „Anmelden“ stand 8 px zu hoch (Carsten, 29.10.2026, Trinity 8944). Ursache im Kit:
   .ck-hide-m{display:initial} steht NACH .ck-btn{display:inline-flex} und nimmt dem Knopf das Flex;
   im Flex-Kopf wird daraus block, und der Text sitzt oben im 30-px-Kasten statt in der Mitte.
   Behoben an der Wurzel im Kit-Nachtrag vom 29.10.2026; hier, bis die Kit-Lieferung übernommen ist.
   Wächter: tests/test_kopf_mitte.py */
.ck-btn.ck-hide-m{display:inline-flex}
@media (max-width:760px){.ck-btn.ck-hide-m{display:none}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;max-width:var(--ck-container);margin:0 auto}
.hero-grid svg[data-tesseract]{width:100%;max-width:520px;height:auto;justify-self:center}
.ck-hero{position:relative;overflow:hidden}
.ck-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--ck-hair) 1px,transparent 1px),linear-gradient(90deg,var(--ck-hair) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 85%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 85%);pointer-events:none}
.ck-hero>*{position:relative}
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ck-s4)}
.block{padding:26px}
.block .ck-label{display:block;margin-bottom:12px}
.block .ck-h2{margin-bottom:10px}
.block .ck-body{color:var(--ck-t2)}
.sec-head{max-width:720px;margin-bottom:var(--ck-s10)}
.sec-head .ck-h1{font-size:32px;margin-top:14px}
.sec-head .ck-lead{margin-top:14px;font-size:17px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ck-s4)}
.pre{margin:0;padding:16px 18px;border-radius:var(--ck-r-md);background:var(--ck-inverse);color:#E3E7ED;font:400 12.5px/1.65 var(--ck-font-mono);overflow-x:auto}
.pre b{color:#22D3EE;font-weight:500}.pre i{color:#9AA3B2;font-style:normal}
.faq details{border-top:1px solid var(--ck-hair);padding:16px 0}
.faq summary{list-style:none;cursor:pointer;font:500 15.5px/1.4 var(--ck-font-body);color:var(--ck-t0);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--ck-t3);font-weight:300}
.faq details[open] summary::after{content:'−'}
.faq p{margin:10px 0 0;font:400 14.5px/1.6 var(--ck-font-body);color:var(--ck-t2);max-width:64ch}
.split2{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:var(--ck-s10);align-items:start}
.split2.rev{grid-template-columns:440px minmax(0,1fr)}
.split2.rev>.ck-shot{order:-1}
/* 21.10.2026 (COMPASS-355 A1): die Formularspalte der Registrierung.
   Hier stand nichts -- die 400 px standen als INLINE-STIL am Element
   (`style="grid-template-columns:minmax(0,1fr) 400px"`), und ein Inline-Stil
   schlaegt jede Media-Query. Auf dem Handy blieben deshalb zwei Spalten
   stehen, und die Eingabefelder waren 26 px breit. Als Klasse HIER, oberhalb
   der 1024er-Query, kann die Query sie wieder auf eine Spalte setzen. */
.split2.is-form{grid-template-columns:minmax(0,1fr) 400px}
/* 22.10.2026 (COMPASS-377, Dreizehnter Export): die Klasse heisst im Design is-form,
   vorher stand hier .formular (COMPASS-355 A1) -- gleiche Regel, Namen des Designs.
   .ck-region: die feste Datenregion der Registrierung, ein Wert und keine Auswahl. */
.ck-region{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:40px;padding:8px 12px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);background:var(--ck-bg-elev);font:400 14px/1.35 var(--ck-font-body);color:var(--ck-t0)}
.ck-region::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ck-ruhig)}
.ck-region small{font:400 12px/1.35 var(--ck-font-body);color:var(--ck-t3)}
.ck-site-nav .links a{white-space:nowrap}
/* COMPASS-260, 24.09.2026 -- aus dem LIVE-Stand behalten, nicht aus dem
   Export. handoff/firma/WEGGELASSEN.md sagt ausdruecklich: 'Mobiles Menue
   fuer die Textlinks. Nicht gezeichnet.' Live gibt es das Menue, und es
   darf nicht verlorengehen -- ohne diese Regeln waere der Knopf im Markup
   vorhanden und unsichtbar. */
.ck-mnav-wrap{display:none}
.ck-burger-site{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;width:44px;height:44px;border-radius:var(--ck-r-sm);border:1px solid var(--ck-hair);background:var(--ck-card);display:grid;place-items:center}
.ck-burger-site::-webkit-details-marker{display:none}
.ck-burger-site::marker{content:""}
.ck-burger-site svg{width:18px;height:18px;stroke:var(--ck-t1);stroke-width:1.8;fill:none;stroke-linecap:round;pointer-events:none}
.ck-mnav{position:absolute;left:0;right:0;top:100%;z-index:5;background:var(--ck-bg);border-bottom:1px solid var(--ck-hair);box-shadow:var(--ck-sh-lg);padding:var(--ck-s5) var(--ck-gutter) var(--ck-s6);display:flex;flex-direction:column;gap:var(--ck-s5);max-height:calc(100vh - 56px);overflow-y:auto}
.ck-mnav-links{display:flex;flex-direction:column;gap:2px}
.ck-mnav-links a{font:500 16px/1.4 var(--ck-font-body);color:var(--ck-t1);padding:11px 6px;border-radius:var(--ck-r-sm)}
.ck-mnav-links a:hover,.ck-mnav-links a[aria-current="page"]{color:var(--ck-t0);background:var(--ck-hair)}
.ck-mnav-row{display:flex;gap:10px;flex-wrap:wrap}
code { overflow-wrap: break-word; }

@media (max-width:1024px){.ck-site-nav .links{display:none}.ck-mnav-wrap{display:inline-flex}.hero-grid{grid-template-columns:1fr}.hero-grid svg[data-tesseract]{max-width:260px;justify-self:start}.cols{grid-template-columns:1fr}.split2,.split2.rev,.split2.is-form{grid-template-columns:1fr}.split2.rev>.ck-shot{order:0}}
@media (max-width:760px){.blocks{grid-template-columns:1fr}.sec-head .ck-h1{font-size:26px}
/* Die Beschreibungsliste stapelt auf dem Handy (Mobile-QA, 21.10.2026).
   GEMESSEN auf de/index.html bei 375 px, vor dieser Zeile: die Seite war 424 px
   breit, und der Taeter war `dl.ck-kv` mit scrollWidth 408 in einem 343 px breiten
   Container. Der Grund steht im Kit: `.ck-kv` ist ein Raster aus
   `max-content minmax(0,1fr)`, und `max-content` ist auf Deutsch 218 px breit
   ("EU-Hosting", "Keine Trainingsdaten") gegen 167 px auf Englisch -- deshalb lief
   die deutsche Seite ueber und die englische nicht.
   HIER UND NICHT IM KIT: `compass-kit.css` ist die Lieferung des Designs, mit Hash
   in docs/kit-uebernahme.json. site.css laedt danach und ist der Ort der Website
   fuer das, was sie selbst braucht. Dass `.ck-kv` dieselbe Enge auch in der
   Anwendung haben kann, ist gemeldet, nicht hier nebenbei mitgeaendert. */
.ck-kv{grid-template-columns:1fr}.ck-kv dd{overflow-wrap:anywhere}}

#tiers{align-items:stretch}
@media (max-width:1024px){#tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){#tiers{grid-template-columns:1fr}}

#stats .ck-num-l{font-size:36px}
@media (max-width:1024px){#charts{grid-template-columns:1fr}}
@media (max-width:760px){#stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.qs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ck-s8);align-items:start}
.qs-code{position:relative;margin:10px 0 0;padding:16px 18px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);background:var(--ck-inverse);color:#E3E7ED;font:400 12.5px/1.7 var(--ck-font-mono);overflow-x:auto;white-space:pre}
.qs-code code{background:none;padding:0;color:inherit;font-size:inherit}
.qs-copy{position:absolute;right:10px;top:10px;height:26px;font-size:11.5px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#E3E7ED}
[data-theme="dark"] .qs-code{background:#0B0E13;border-color:var(--ck-border)}
.di-t td{vertical-align:middle}.di-t th:nth-child(n+2),.di-t td:nth-child(n+2){width:180px;text-align:center}
.di-y{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--ck-ruhig-bg);border:1px solid var(--ck-ruhig-bd);position:relative}
.di-y::after{content:'';position:absolute;left:5px;top:4px;width:6px;height:4px;border:2px solid var(--ck-ruhig);border-top:0;border-right:0;transform:rotate(-45deg)}
.di-n{color:var(--ck-t4);font-family:var(--ck-font-mono)}
/* `minmax(0,1fr)`, NICHT `1fr`: ein `1fr`-Track traegt `min-width:auto`
   und waechst mit seinem breitesten Kind. Der Codeblock hat zwar
   `overflow-x:auto`, aber er scrollt nur, wenn sein Track ihn
   begrenzt -- sonst wird die ganze SEITE breit. Gemessen bei 400 px:
   scrollWidth 630 (quickstart) und 638 (schnellstart), Taeter war der
   614 px breite `pre.qs-code` in einem ebenso breiten Track.
   Dieselbe Familie wie COMPASS-264 in der Anwendung. */
@media (max-width:900px){.qs-grid{grid-template-columns:minmax(0,1fr)}.qs-grid>*{min-width:0}.ck-steps{grid-template-columns:minmax(0,1fr)!important}.ck-steps>*{min-width:0}.di-t th:nth-child(n+2),.di-t td:nth-child(n+2){width:auto}}

/* ═══ Website Betriebsebene (28.10.2026, design-cc) ═══════════════════════════════════
   Bausteine der Startseite, der fünf Ebenen, Teams/Firmen, Sicherheit und Enterprise.
   Nur Werte des Kits (Variablen), keine eigenen Farben ausser dem Tresor-Dunkel, das
   die Kit-Variable --ck-inverse ist. Mobil zuerst geprüft bei 375 px. */
[hidden]{display:none!important}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--ck-s8)}
.hero-grid .ck-display{font-size:clamp(36px,4.3vw,56px)}

/* Einzelmodus → Firmenmodus */
.modus{border:1px solid var(--ck-hair);border-radius:var(--ck-r-lg);overflow:hidden;background:var(--ck-card);box-shadow:var(--ck-sh-sm)}
.modus-kopf,.modus-zeile{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
.modus-kopf>span,.modus-zeile>span{padding:16px 22px;display:flex;align-items:center}
.modus-kopf>.modus-p,.modus-zeile>.modus-p{padding:0}
.modus-kopf{font:500 12px/1 var(--ck-font-mono);letter-spacing:.06em;text-transform:uppercase}
.modus-kopf .modus-a{color:var(--ck-t3)}
.modus-a{color:var(--ck-t2);font:400 16px/1.45 var(--ck-font-body)}
.modus-b{background:var(--ck-inverse);color:#E3E7ED;font:500 16px/1.45 var(--ck-font-body)}
.modus-kopf .modus-b{color:#22D3EE}
.modus-b b{color:#fff;font-weight:600}
.modus-zeile+.modus-zeile .modus-a,.modus-zeile .modus-a{border-top:1px solid var(--ck-hair)}
.modus-zeile .modus-b{border-top:1px solid rgba(255,255,255,.08)}
.modus-p{justify-content:center;background:linear-gradient(90deg,var(--ck-card) 50%,var(--ck-inverse) 50%)}
.modus-zeile .modus-p{border-top:1px solid var(--ck-hair)}
.modus-p svg{width:22px;height:22px;stroke:var(--ck-blue);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;background:var(--ck-card);border:1px solid var(--ck-hair);border-radius:50%;padding:4px;box-sizing:content-box}
.modus-zeile:last-child .modus-b{background:linear-gradient(90deg,#1B2130,var(--ck-inverse))}

/* Die Brücke */
.punkte{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.punkte li{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;font:400 15.5px/1.5 var(--ck-font-body);color:var(--ck-t2);padding-top:14px;border-top:1px solid var(--ck-hair)}
.punkte b{font:500 12px/1.9 var(--ck-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ck-t0)}
.split2.is-bruecke{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.bruecke{margin:0;padding:22px;border-radius:var(--ck-r-xl);background:var(--ck-inverse);color:#E3E7ED;box-shadow:var(--ck-sh-lg)}
.bruecke .ck-label{color:#9AA3B2}
.br-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.br-station{border:1px solid rgba(255,255,255,.12);border-radius:var(--ck-r-md);padding:12px 12px 11px;background:rgba(255,255,255,.03)}
.br-station b{display:block;font:500 14px/1.3 var(--ck-font-body);color:#fff}
.br-station span{font:500 10.5px/1.6 var(--ck-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#22D3EE}
.br-mitte{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0;text-align:center}
.br-raster .br-station:nth-child(4){grid-column:1;grid-row:2}
.br-raster .br-station:nth-child(6){grid-column:3;grid-row:2}
.br-rose{width:64px;height:64px;margin-bottom:6px}
.br-rose circle{fill:none;stroke:rgba(255,255,255,.25);stroke-width:1.5}
.br-rose .n{fill:url(#ckCubeL)}.br-rose .s{fill:rgba(255,255,255,.35)}.br-rose .k{fill:#fff;stroke:none}
.br-mitte b{font:600 18px/1.2 var(--ck-font-body);color:#fff}
.br-mitte span{font:400 13px/1.4 var(--ck-font-body);color:#9AA3B2}
.br-log{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.18)}
.br-log ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.br-log li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;font:400 13px/1.45 var(--ck-font-mono);color:#C9CFD8}
.br-log li b{color:#22D3EE;font-weight:500}

/* Fünf Ebenen auf der Startseite */
.ebenen5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ck-s3)}
.ebene-kachel{display:flex;flex-direction:column;gap:8px;padding:20px 18px 22px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);background:var(--ck-card);color:inherit;text-decoration:none;transition:border-color var(--ck-fast),transform var(--ck-fast)}
.ebene-kachel:hover{border-color:var(--ck-ac-bd);transform:translateY(-2px)}
.ebene-kachel .nr{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:500 12px/1 var(--ck-font-mono);color:#fff;background:var(--ck-inverse)}
.ebene-kachel:nth-child(4) .nr{background:var(--ck-spectrum)}
.ebene-kachel b{font:600 17px/1.25 var(--ck-font-body);color:var(--ck-t0)}
.ebene-kachel span:last-child{font:400 14px/1.5 var(--ck-font-body);color:var(--ck-t2)}

/* Der Beweis sind wir */
.split2.is-beweis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.beweis-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ck-s4)}
.beweis-zahl{border-top:2px solid var(--ck-t0);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.beweis-zahl b{font:500 40px/1 var(--ck-font-display);letter-spacing:-.02em;color:var(--ck-t0)}
.beweis-zahl span{font:400 14px/1.45 var(--ck-font-body);color:var(--ck-t1)}
.beweis-zahl small{font:400 11.5px/1.4 var(--ck-font-mono);color:var(--ck-t3)}
.beweis-bild{margin:0}

/* Wege */
.weg-karte{display:flex;flex-direction:column;gap:10px;padding:22px;color:inherit;text-decoration:none;transition:border-color var(--ck-fast)}
.weg-karte:hover{border-color:var(--ck-ac-bd)}
.weg-karte b{display:inline-flex;align-items:center;gap:8px;font:600 17px/1.3 var(--ck-font-body);color:var(--ck-t0)}
.weg-karte svg,.empf-knopf svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Fünf Ebenen: Seite */
.deck{display:flex;flex-direction:column;gap:8px}
.deck-lage{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;padding:14px 18px;border-radius:var(--ck-r-md);border:1px solid var(--ck-hair);background:var(--ck-card);color:inherit;text-decoration:none;margin-left:calc(var(--i) * 14px);box-shadow:var(--ck-sh-sm);transition:border-color var(--ck-fast)}
.deck-lage:hover{border-color:var(--ck-ac-bd)}
.deck-lage .nr{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ck-inverse);color:#fff;font:500 13px/1 var(--ck-font-mono)}
.deck-lage:nth-child(4) .nr{background:var(--ck-spectrum)}
.deck-lage b{font:600 16px/1.3 var(--ck-font-body);color:var(--ck-t0)}
.deck-lage span:last-child{font:400 13.5px/1.4 var(--ck-font-body);color:var(--ck-t3)}
.ebene-zeile{display:grid;grid-template-columns:88px minmax(0,1.3fr) minmax(0,.9fr);gap:var(--ck-s8);align-items:start}
.ebene-nr span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ck-inverse);color:#fff;font:500 22px/1 var(--ck-font-mono)}
#ebene-4 .ebene-nr span{background:var(--ck-spectrum)}
.haken-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.haken-liste li{position:relative;padding:12px 14px 12px 42px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);background:var(--ck-card);font:400 15px/1.45 var(--ck-font-body);color:var(--ck-t1)}
.haken-liste li::before{content:'';position:absolute;left:14px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--ck-ruhig-bg);border:1px solid var(--ck-ruhig-bd)}
.haken-liste li::after{content:'';position:absolute;left:19px;top:19px;width:6px;height:4px;border:2px solid var(--ck-ruhig);border-top:0;border-right:0;transform:rotate(-45deg)}
.haken-liste.is-offen li::before,.haken-liste.is-offen li::after{display:none}
.haken-liste.is-offen li{padding-left:18px;border-left:3px solid var(--ck-t0)}
.haken-liste.is-nie li{border:0;padding:6px 0 6px 30px;background:none}
.haken-liste.is-nie li::before{left:0;top:8px;background:var(--ck-fehler-bg);border-color:var(--ck-fehler-bd)}
.haken-liste.is-nie li::after{content:'×';left:5px;top:6px;width:auto;height:auto;border:0;transform:none;color:var(--ck-fehler);font:600 13px/1.4 var(--ck-font-body)}

/* Für Teams: Stellenkarte */
.stellenkarte{margin:0;box-shadow:var(--ck-sh-lg)}
.stellenkarte .ck-kv{font-size:14.5px;gap:12px 22px}

/* Für Firmen: Organigramm */
.split2.is-org{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.org{margin:0;padding:22px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-xl);background:var(--ck-card);box-shadow:var(--ck-sh-lg)}
.org-firma{padding:14px 16px;border-radius:var(--ck-r-md);background:var(--ck-inverse);color:#fff;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.org-firma b{font:600 15px/1.3 var(--ck-font-body)}.org-firma span{font:400 13px/1.3 var(--ck-font-body);color:#9AA3B2}
.org-abts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;position:relative}
.org-abts::before{content:'';position:absolute;left:16%;right:16%;top:-14px;height:14px;border:1px solid var(--ck-border);border-bottom:0;border-radius:8px 8px 0 0}
.org-abt{border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);padding:12px;background:var(--ck-bg-elev);position:relative}
.org-abt>b{font:600 14px/1.3 var(--ck-font-body);color:var(--ck-t0)}
.org-abt ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.org-abt li{display:grid;grid-template-columns:10px minmax(0,1fr);column-gap:8px;font:400 13px/1.35 var(--ck-font-body);color:var(--ck-t1)}
.org-abt li i{width:10px;height:10px;border-radius:50%;margin-top:4px;grid-row:span 2}
.org-abt li.is-mensch i{background:var(--ck-t0)}.org-abt li.is-agent i{background:var(--ck-spectrum)}
.org-abt li small{font:500 10px/1.4 var(--ck-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ck-t3)}
.org-weg{position:absolute;left:12px;right:-22px;bottom:-30px;display:flex;align-items:center;gap:6px;font:500 11px/1 var(--ck-font-mono);color:var(--ck-ac);white-space:nowrap}
.org-weg svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.org{padding-bottom:44px}

/* Sicherheits-Schaubild */
.schaubild{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:var(--ck-s6);align-items:start}
.schaubild>.ck-h1{grid-column:1/-1}
.sb-rumpf{display:flex;flex-direction:column;border-radius:var(--ck-r-xl);overflow:hidden;box-shadow:var(--ck-sh-lg);border:1px solid var(--ck-hair)}
.sb-ebene{padding:22px 22px 24px}
.sb-paket{background:var(--ck-inverse);color:#E3E7ED}
.sb-grund{background:var(--ck-card)}
.sb-ekopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:14px}
.sb-ekopf b{font:600 16px/1.3 var(--ck-font-body)}
.sb-ekopf span{font:500 11px/1 var(--ck-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ck-t3)}
.sb-paket .sb-ekopf b{color:#fff}.sb-paket .sb-ekopf span{color:#22D3EE}
.sb-ic{width:22px;height:22px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sb-zusage{margin:0 0 16px;font:500 clamp(20px,2.2vw,26px)/1.25 var(--ck-font-display);letter-spacing:-.01em;color:#fff}
.sb-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sb-grund .sb-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb-station{display:flex;gap:12px;padding:14px;border-radius:var(--ck-r-md);border:1px solid var(--ck-hair);background:var(--ck-bg-elev)}
.sb-station b{display:block;font:600 14.5px/1.3 var(--ck-font-body);color:var(--ck-t0);margin-bottom:4px}
.sb-station span{font:400 13.5px/1.45 var(--ck-font-body);color:var(--ck-t2)}
.sb-station>.sb-ic{color:var(--ck-ac);margin-top:1px}
.sb-paket .sb-station{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.sb-paket .sb-station b{color:#fff}.sb-paket .sb-station span{color:#B8C0CC}.sb-paket .sb-station>.sb-ic{color:#22D3EE}
.sb-paket #sb-schluessel-station{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.06)}
.sb-insel{position:sticky;top:96px;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:999px 999px var(--ck-r-xl) var(--ck-r-xl);border:1px dashed var(--ck-ac-bd);background:var(--ck-ac-bg);text-align:center;align-items:center}
.sb-insel .sb-ic{width:30px;height:30px;color:var(--ck-ac)}
.sb-insel b{font:600 15px/1.3 var(--ck-font-body);color:var(--ck-t0)}
.sb-insel span{font:400 13px/1.45 var(--ck-font-body);color:var(--ck-t2)}
.sb-lampe{width:12px;height:12px;border-radius:50%;background:var(--ck-ruhig);box-shadow:0 0 0 5px var(--ck-ruhig-bg),0 0 18px var(--ck-ruhig)}
.sb-pflicht{grid-column:1/-1;font:500 16px/1.5 var(--ck-font-body);color:var(--ck-t0);padding:14px 18px;border-left:3px solid var(--ck-t0);background:var(--ck-bg-elev);border-radius:0 var(--ck-r-sm) var(--ck-r-sm) 0}
.schaubild.is-klein .sb-station span{display:none}

/* Enterprise */
.ent-hero .ck-container{max-width:var(--ck-container)}
.ent-zusage{margin:var(--ck-s6) 0 var(--ck-s3);max-width:32ch;font:500 clamp(22px,2.6vw,30px)/1.3 var(--ck-font-display);letter-spacing:-.01em;color:var(--ck-t0);padding-left:18px;border-left:3px solid transparent;border-image:var(--ck-spectrum) 1}
.ent-versprechen{margin:0 0 var(--ck-s4);max-width:58ch;padding-left:21px;font:500 17px/1.5 var(--ck-font-body);color:var(--ck-t1)}
.ent-fuss{max-width:70ch;color:var(--ck-t3)}
.weiche{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--ck-s6);align-items:stretch}
.weiche-fragen{display:grid;gap:12px}
.weiche-frage{margin:0;border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);background:var(--ck-card);padding:16px 18px 18px}
.weiche-frage legend{float:left;width:100%;display:flex;align-items:center;gap:10px;font:600 16px/1.3 var(--ck-font-body);color:var(--ck-t0);padding:0}
.weiche-frage legend+p{clear:both;margin:6px 0 12px 34px}
.weiche-frage .nr{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ck-inverse);color:#fff;font:500 11.5px/1 var(--ck-font-mono)}
.weiche-opts{display:flex;flex-wrap:wrap;gap:8px;margin-left:34px}
.weiche-opt{position:relative;cursor:pointer}
.weiche-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.weiche-opt span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid var(--ck-border);border-radius:var(--ck-r-pill);font:500 14px/1 var(--ck-font-body);color:var(--ck-t1);background:var(--ck-card);transition:all var(--ck-fast)}
.weiche-opt input:checked+span{background:var(--ck-inverse);border-color:var(--ck-inverse);color:#fff}
.weiche-opt input:focus-visible+span{box-shadow:var(--ck-focus)}
.empfehlung{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:30px 28px;border-radius:var(--ck-r-xl);background:var(--ck-inverse);color:#E3E7ED;box-shadow:var(--ck-sh-lg);overflow:hidden}
.empfehlung::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--ck-spectrum)}
.empfehlung .ck-label{color:#22D3EE}
.empf-name{margin:0;font:500 clamp(26px,3vw,36px)/1.12 var(--ck-font-display);letter-spacing:-.02em;color:#fff}
.empf-satz{margin:0;font:400 16px/1.55 var(--ck-font-body);color:#C9CFD8}
.empf-knopf{align-self:flex-start;background:#fff;border-color:#fff;color:var(--ck-inverse)}
.empf-klein{color:#9AA3B2;margin:0}
.empf-tabelle td,.empf-tabelle th{padding:12px 14px}
.arch{margin:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) minmax(0,1fr);gap:0;align-items:center}
.arch-aussen{display:flex;flex-direction:column;gap:12px}
.arch-links{flex-direction:row;align-items:center}
.arch-knoten{position:relative;flex:1;padding:14px 16px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-md);background:var(--ck-card);display:flex;flex-direction:column;gap:3px}
.arch-knoten b{font:600 14.5px/1.3 var(--ck-font-body);color:var(--ck-t0)}
.arch-knoten span{font:400 13px/1.45 var(--ck-font-body);color:var(--ck-t2)}
.arch-knoten small{font:400 11.5px/1.4 var(--ck-font-mono);color:var(--ck-t3)}
.arch-knoten.is-schluessel{border:1px dashed var(--ck-ac-bd);background:var(--ck-ac-bg)}
.arch-knoten.is-gesperrt{opacity:.75;background:var(--ck-bg)}
.arch-knoten.is-gesperrt b{text-decoration:line-through;text-decoration-color:var(--ck-fehler)}
.arch-zeile{display:flex;align-items:center}
.arch-pfeil{flex:none;width:44px;display:grid;place-items:center}
.arch-pfeil svg{width:26px;height:26px;stroke:var(--ck-ac);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.arch-pfeil.links svg{transform:rotate(180deg)}
.arch-pfeil.is-gestrichelt svg{stroke-dasharray:3 3;stroke:var(--ck-t3)}
.arch-schloss,.arch-sperre{flex:none;width:44px;display:grid;place-items:center}
.arch-schloss svg{width:18px;height:18px;stroke:var(--ck-ruhig);stroke-width:2;fill:none}
.arch-sperre{font:600 22px/1 var(--ck-font-body);color:var(--ck-fehler)}
.arch-instanz{position:relative;padding:20px;border-radius:var(--ck-r-xl);background:var(--ck-inverse);color:#E3E7ED;box-shadow:var(--ck-sh-lg);outline:2px solid var(--ck-inverse);outline-offset:6px}
.arch-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:14px}
.arch-kopf svg{width:22px;height:22px;stroke:#22D3EE;stroke-width:1.8;fill:none}
.arch-kopf b{font:600 17px/1.2 var(--ck-font-body);color:#fff}
.arch-kopf span:not(.arch-nr){font:400 13px/1.3 var(--ck-font-body);color:#9AA3B2}
.arch-teile{display:grid;gap:8px}
.arch-teil{padding:12px 14px;border-radius:var(--ck-r-md);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.arch-teil b{display:block;font:600 14.5px/1.3 var(--ck-font-body);color:#fff}
.arch-teil span{font:400 12.5px/1.4 var(--ck-font-mono);color:#9AA3B2}
.arch-teil:last-child{border-color:rgba(34,211,238,.45)}
.arch-inhalt{margin-top:10px;font:500 12.5px/1.4 var(--ck-font-mono);color:#22D3EE;display:flex;align-items:center;gap:8px}
.arch-nr{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ck-ac);color:#fff;font:500 10.5px/1 var(--ck-font-mono);flex:none}
.arch-knoten>.arch-nr{position:absolute;top:-9px;right:10px}
.arch-kopf .arch-nr{margin-left:auto}
.arch-unter{grid-column:1/-1;margin-top:var(--ck-s6);text-align:center}
.arch-text .block .ck-h2{margin-bottom:12px}
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ck-s4);align-items:stretch}
.paket{position:relative;display:flex;flex-direction:column;padding:26px 24px;border:1px solid var(--ck-hair);border-radius:var(--ck-r-lg);background:var(--ck-card)}
.paket.is-empfohlen{border:2px solid var(--ck-inverse);box-shadow:var(--ck-sh-lg);padding-top:38px}
.paket-empf{position:absolute;top:-1px;left:-1px;right:-1px;padding:7px 14px;border-radius:var(--ck-r-lg) var(--ck-r-lg) 0 0;background:var(--ck-inverse);color:#fff;font:500 11px/1.3 var(--ck-font-mono);letter-spacing:.06em;text-transform:uppercase}
.paket .ck-h2{margin:0 0 4px}
.paket>.ck-label{line-height:1.5;margin-bottom:0}
.paket-preis{margin:18px 0 2px;color:var(--ck-t0)}
.paket-preis b{font:500 34px/1 var(--ck-font-display);letter-spacing:-.02em}
.paket-preis small{font:400 13px/1 var(--ck-font-body);color:var(--ck-t3)}
.paket-plaetze{margin:0}
.paket-alle{margin:16px 0 0;padding:12px;border-radius:var(--ck-r-sm);background:var(--ck-bg-elev);display:flex;flex-direction:column;gap:2px;font-size:13.5px}
.paket-alle b{font:600 13px/1.3 var(--ck-font-body);color:var(--ck-t0)}.paket-alle span{color:var(--ck-t2)}
.paket-liste{width:100%;border-collapse:collapse;margin-top:6px;font-size:13.5px}
.paket-liste th{text-align:left;font-weight:400;color:var(--ck-t1);padding:8px 8px 8px 0;border-top:1px solid var(--ck-hair);line-height:1.4}
.paket-liste td{text-align:right;padding:8px 0;border-top:1px solid var(--ck-hair);white-space:nowrap;vertical-align:top}
.paket-liste .ja{width:18px;height:18px;stroke:var(--ck-ruhig);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.paket-liste .nein{color:var(--ck-t4)}.paket-liste .wert{font:500 12.5px/1.4 var(--ck-font-mono);color:var(--ck-t0)}
.paket .ck-btn{margin-top:auto}
.paket .ck-btn.ck-mt-6{margin-top:auto;padding-top:0}
.paket table+.ck-btn{margin-top:22px}
.zusaetze td{padding:13px 14px;vertical-align:top}
.zusaetze td b{display:block;color:var(--ck-t0);font-weight:600}
.zusaetze td .ck-small{display:block;margin-top:2px}
.zusaetze .z-preis{text-align:right;white-space:nowrap;font:500 14px/1.4 var(--ck-font-body);color:var(--ck-t0)}
.zusaetze .z-preis small{color:var(--ck-t3);font-weight:400}
.zusaetze .z-kopf td{background:var(--ck-bg-elev)}

/* Gespräch: Termin + Formular */
.gespraech{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ck-s6);align-items:start}
.termin-kopf{display:flex;align-items:center;gap:10px}
.termin-kopf svg{width:24px;height:24px;stroke:var(--ck-ac);stroke-width:1.8;fill:none}
.termin-kopf .ck-h2{margin:0}
.termin-rahmen{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px;border:1px dashed var(--ck-border);border-radius:var(--ck-r-md);background:var(--ck-bg-elev);min-height:220px;justify-content:center}
.termin-rahmen.is-geladen{padding:0;border-style:solid;min-height:0;background:var(--ck-card)}
.termin-iframe{display:block;width:100%;height:640px;border:0;border-radius:var(--ck-r-md)}
.termin-neu{align-self:flex-start}
.kontakt label small,.kontakt legend small{font:400 12px/1 var(--ck-font-body);color:var(--ck-t3)}
.k-wahl{border:0;margin:0;padding:0;min-width:0}
.k-wahl legend{padding:0;margin-bottom:6px;font:500 13px/1.4 var(--ck-font-body);color:var(--ck-t1)}
.k-reihe{display:flex;flex-wrap:wrap;gap:8px 16px}
.k-honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:1024px){
  .ebenen5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split2.is-bruecke,.split2.is-beweis,.split2.is-org{grid-template-columns:minmax(0,1fr)}
  .schaubild{grid-template-columns:minmax(0,1fr)}
  .sb-insel{position:static;flex-direction:row;flex-wrap:wrap;border-radius:var(--ck-r-xl);text-align:left;justify-content:flex-start}
  .weiche,.gespraech{grid-template-columns:minmax(0,1fr)}
  .arch{grid-template-columns:minmax(0,1fr);gap:0}
  .arch-links{flex-direction:column;align-items:stretch}
  .arch-links .arch-pfeil{width:auto;height:40px}.arch-links .arch-pfeil svg{transform:rotate(90deg)}
  .arch-rechts{margin-top:18px}
  .arch-rechts .arch-pfeil.links svg{transform:rotate(-90deg)}
  .pakete{grid-template-columns:minmax(0,1fr)}
  .ebene-zeile{grid-template-columns:minmax(0,1fr);gap:var(--ck-s5)}
  .arch-text>.block{grid-column:auto!important}
}
@media (max-width:760px){
  .modus-kopf{display:none}
  .modus-zeile{grid-template-columns:minmax(0,1fr)}
  .modus-zeile .modus-p{display:none}
  .modus-zeile .modus-a{padding:14px 16px 6px;font-size:14px;color:var(--ck-t3);text-decoration:line-through;text-decoration-color:var(--ck-t4)}
  .modus-zeile .modus-b{padding:10px 16px 14px;border-top:0}
  .modus-zeile+.modus-zeile .modus-a{border-top:1px solid var(--ck-hair)}
  .punkte li{grid-template-columns:minmax(0,1fr);gap:4px}
  .bruecke{padding:16px}
  .br-raster{gap:6px}.br-station{padding:9px 8px}.br-station b{font-size:12.5px}
  .br-log li{grid-template-columns:minmax(0,1fr);gap:0}
  .ebenen5{grid-template-columns:minmax(0,1fr)}
  .beweis-zahlen{grid-template-columns:minmax(0,1fr)}
  .deck-lage{margin-left:0}
  .ebene-nr span{width:48px;height:48px;font-size:18px}
  .org-abts{grid-template-columns:minmax(0,1fr)}.org-abts::before{display:none}
  .org-weg{position:static;margin-top:10px;white-space:normal}
  .org{padding-bottom:22px}
  .sb-liste,.sb-grund .sb-liste{grid-template-columns:minmax(0,1fr)}
  .sb-ebene{padding:18px 16px}
  .weiche-opts,.weiche-frage legend+p{margin-left:0}
  .empfehlung{padding:24px 20px}
  .termin-iframe{height:720px}
}


/* Kopf auf schmalen Handys (28.10.2026): „Kostenlos testen“ ist länger als „Registrieren“;
   gemessen bei 375 px schob es den Menü-Knopf 13 px über den Rand (scrollWidth 388). Der Sprachknopf
   steht im Menü ein zweites Mal (.ck-mnav-row); im Kopf entfällt er unter 420 px. */
@media (max-width:420px){.ck-site-nav .right{gap:6px}.ck-site-nav .right>a[lang]{display:none}}

/* Dreizehnter Export (22.10.2026), Nachtrag zu COMPASS-377: die Mobilregel der Lieferung, 1:1.
   `.ck-form-row` stapelt die Formularzeile, `.ck-hero` bekommt unten weniger Luft (der Entwurf
   setzt `padding-bottom` inline, deshalb `!important`), `.ck-display` ist 30 px. Der `.ck-kv`-Teil
   deckt sich mit der eigenen Regel oben (Mobile-QA 21.10.2026) und fuegt Abstand und Gruppenrand hinzu. */
@media (max-width:760px){.ck-kv{grid-template-columns:1fr;gap:2px 0}.ck-kv dt{margin-top:10px}.ck-kv dt:first-child{margin-top:0}.ck-form-row{flex-direction:column}.ck-hero{padding-bottom:var(--ck-s8)!important}.ck-display{font-size:30px}}