/* ============================================================
   check.css — Startseite des Checks (/check/, Stufe „start“)
   Nur auf dieser Seite geladen (Muster ortsvergleich.css). In de/ und en/
   byte-identisch.

   Zeichnung: docs/check-start/entwurf-check-start.html, letzte Fassung
   („Satz in Zeilen“, „Fassung 6: drei Gruppen mit je drei Kacheln“,
   Ablaufleiste mit Ziffern in Newsreader), übernommen ohne Entwurfs-Leiste,
   Site-Kopf, Fuß, Fragen-Stufe, Endbildschirm und eigenes :root. Alle Klassen
   tragen das Präfix `ck-`; die Ablaufleiste nutzt `.kette*` aus styles.css,
   der Knopf `.btn.btn-accent`, der Rahmen `.wrap`. Tokens aus styles.css
   (--v7-display, --v7-text, --v7-ord-*, --line-strong, --contour). Keine
   neuen Tokens. Schriften selbst gehostet (@font-face in styles.css).

   Die Fragen-Stufe und die Ergebnisseite bleiben im dunklen Band
   `.assessment`; diese Datei blendet nur um, was gerade dran ist.
   ============================================================ */

/* ---------- Umschalten der Stufen ---------- */
.ck-start[hidden],.band.assessment[hidden]{display:none!important}
.ck-start [hidden]{display:none!important}

/* ---------- Seite ---------- */
.ck-start{position:relative;background:var(--bg);padding:40px 0 56px;font-family:var(--v7-text);letter-spacing:var(--v7-text-track);color:var(--ink);line-height:1.6}
.ck-start::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:repeating-radial-gradient(circle at 88% 10%,transparent 0 34px,var(--contour) 34px 35px);-webkit-mask-image:radial-gradient(ellipse 46% 62% at 88% 6%,#000 0%,transparent 72%);mask-image:radial-gradient(ellipse 46% 62% at 88% 6%,#000 0%,transparent 72%)}
.ck-start>.wrap{position:relative}
.ck-start :where(p,ol,ul){margin:0;padding:0}
.ck-start :where(button){font:inherit;letter-spacing:inherit}
.ck-start :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Ablaufleiste: .kette aus styles.css; Ziffern und Schriftgrade stehen dort
   (seit der Angleichung der Werkzeugseiten), hier nur der Abstand */
.ck-start .kette{margin:0 0 28px}

/* Kopf: Überschrift links, Typen-Skala rechts */
.ck-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:end;margin-bottom:36px}
.ck-h1{font-family:var(--v7-display);font-weight:var(--v7-display-wght);font-size:clamp(2.6rem,1.4rem + 3.4vw,4.4rem);line-height:1.02;letter-spacing:-.024em;color:var(--navy);text-wrap:balance;margin:0}
.ck-sub{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:14px;font-size:17px;color:var(--slate)}
.ck-sub span+span::before{content:"·";margin:0 10px;color:var(--slate-3)}
.ck-typen{display:grid;gap:4px;align-self:end}
.ck-typen p{font-size:14px;font-weight:600;color:var(--slate)}
.ck-ord{margin-top:4px}
.ck-ord ol{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.ck-ord li{height:8px;border-radius:2px}
.ck-ord li:nth-child(1){background:var(--v7-ord-1)}.ck-ord li:nth-child(2){background:var(--v7-ord-2)}.ck-ord li:nth-child(3){background:var(--v7-ord-3)}.ck-ord li:nth-child(4){background:var(--v7-ord-4)}.ck-ord li:nth-child(5){background:var(--v7-ord-5)}
.ck-ord div{display:flex;justify-content:space-between;font-size:12.5px;color:var(--slate);margin-top:6px}

/* ---------- Karte „Ihre Ausgangslage“ ---------- */
.ck-satz{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);padding:30px 34px 26px;display:grid;gap:22px}
.ck-satz-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.ck-t{font-size:13px;font-weight:600;color:var(--slate);letter-spacing:.02em}
.ck-prog{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums}
.ck-prog ol{list-style:none;display:flex;gap:4px}
.ck-prog li{width:18px;height:4px;border-radius:2px;background:var(--line)}
.ck-prog li.on{background:var(--accent)}

/* Satz in Zeilen: ein Satzteil je Zeile, Felder untereinander */
.ck-zeilen{display:grid;font-family:var(--v7-display);font-size:clamp(1.3rem,1rem + 1vw,1.75rem);line-height:1.3;letter-spacing:-.012em;color:var(--navy)}
.ck-zeile{display:grid;grid-template-columns:7.4em minmax(0,1fr);column-gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-2)}
.ck-zeile:first-child{padding-top:4px}
.ck-zeile:last-child{border-bottom:0;padding-bottom:4px}
.ck-z-l{font-weight:450;color:var(--slate)}
.ck-z-f{font-weight:450;min-width:0}
.ck-cb{position:relative;display:inline-block}
.ck-fld{position:relative;display:inline-flex;align-items:baseline;gap:6px;border:0;border-bottom:2px solid var(--accent-soft-2);background:transparent;padding:0 2px;margin:0;cursor:pointer;font:inherit;letter-spacing:inherit;color:var(--accent-deep);font-weight:var(--v7-display-wght);white-space:nowrap;line-height:1.3;text-align:left;-webkit-tap-highlight-color:transparent}
/* Zielfläche: 10 px über und unter der Zeile, ohne die Zeile zu verschieben */
.ck-fld::before{content:"";position:absolute;inset:-10px 0}
.ck-fld svg{color:var(--accent);flex:none;align-self:center;margin-top:4px}
.ck-fld.is-leer{color:var(--slate);font-weight:450;border-bottom:2px dashed var(--line-strong)}
.ck-fld.is-leer svg{color:var(--slate-2)}
.ck-fld.is-offen{border-bottom-color:var(--accent)}
.ck-fld:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.ck-fld-t{white-space:nowrap}

/* Kernkompetenzen: drei Gruppen mit je drei Kacheln, dazu „Nichts davon“ */
.ck-more{display:grid;gap:12px;padding-top:20px;border-top:1px solid var(--line-2)}
.ck-lab{font-size:14px;font-weight:600;color:var(--graphite)}
.ck-lab small{font-weight:500;color:var(--slate);font-size:13px;margin-left:6px}
.ck-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ck-grp{display:grid;gap:8px;align-content:start;min-width:0}
.ck-grp-t{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding-bottom:6px;border-bottom:1px solid var(--line)}
.ck-tile{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 40px 10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--bg);cursor:pointer;text-align:left;font-size:15px;line-height:1.3;color:var(--graphite);transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.ck-tile svg{flex:none;width:22px;height:22px;color:var(--slate)}
.ck-tile:hover{border-color:var(--slate-3);background:var(--bg-soft)}
.ck-tile[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.ck-tile[aria-pressed="true"] svg{color:var(--accent)}
.ck-tile-ok{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:transparent}
.ck-tile-ok svg{width:12px;height:12px;color:inherit}
.ck-tile[aria-pressed="true"] .ck-tile-ok{background:var(--accent);border-color:var(--accent);color:#fff}
.ck-tile[aria-pressed="true"] .ck-tile-ok svg{color:#fff}
.ck-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ck-keins{width:100%;min-height:48px;margin-top:4px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--bg);color:var(--slate);font-size:15px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ck-keins:hover{border-color:var(--slate-3);background:var(--bg-soft)}
.ck-keins[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
.ck-keins:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Fuß der Karte: Hinweis links, Rest und Knopf rechts */
.ck-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--line-2)}
.ck-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--slate);line-height:1.45}
.ck-note svg{flex:none;color:var(--slate-2)}
.ck-go{display:flex;align-items:center;gap:16px}
.ck-rest{font-size:13.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.ck-btn.btn{min-height:50px;justify-content:center;font-family:var(--v7-text);font-size:15.5px;letter-spacing:var(--v7-text-track)}
.ck-btn.btn[disabled]{background:var(--bg-soft-2);border-color:var(--line);color:var(--slate);box-shadow:none;cursor:not-allowed;transform:none}
.ck-btn.btn[disabled] .arrow{transform:none}

/* ---------- Auswahlfenster: ab 641 px unter dem Feld, darunter ein Blatt von unten ---------- */
.ck-pop{position:absolute;z-index:60;left:0;top:calc(100% + 10px);width:440px;max-width:calc(100vw - 32px);max-height:min(520px,72vh);display:flex;flex-direction:column;overflow:hidden;background:var(--bg);border:1px solid var(--line-strong);border-radius:14px;box-shadow:var(--shadow-lg);font-family:var(--v7-text);font-size:15px;line-height:1.35;letter-spacing:0;color:var(--graphite);font-weight:400;white-space:normal;text-align:left}
.ck-pop.is-schmal{width:380px}
.ck-pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 8px 4px 18px}
.ck-pk-head b{font-family:var(--v7-display);font-size:19px;line-height:1.25;color:var(--navy);font-weight:600}
.ck-pk-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--slate);cursor:pointer}
/* Abdunkelung hinter dem Blatt, nur bis 640 px; ein Tipp darauf schließt */
.ck-scrim{display:none;position:fixed;inset:0;z-index:299;background:color-mix(in srgb,var(--navy) 32%,transparent);-webkit-tap-highlight-color:transparent}
.ck-pk-s{display:flex;align-items:center;gap:10px;margin:12px 12px 4px;padding:0 10px 0 12px;border:1px solid var(--line-strong);border-radius:10px;min-height:46px;background:var(--bg);transition:border-color .2s,box-shadow .2s}
.ck-pk-s:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ck-pk-s svg{flex:none;color:var(--slate-2)}
.ck-pk-s input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--navy)}
.ck-pk-s input::placeholder{color:var(--slate-2)}
.ck-pk-s input:focus,.ck-pk-s input:focus-visible{outline:0}
.ck-pk-clr{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:50%;background:var(--bg-soft-2);color:var(--slate);cursor:pointer}
.ck-pk-b{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 8px 10px}
.ck-pk-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:12px 6px 6px}
.ck-pk-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 2px}
.ck-o-chip{border:1px solid var(--line-strong);border-radius:20px;padding:5px 12px;font-size:14px;font-weight:500;background:var(--bg);color:var(--graphite);cursor:pointer;white-space:nowrap}
.ck-o-chip.is-andere{border-style:dashed;color:var(--slate)}
.ck-o-chip:hover{border-color:var(--slate-3)}
.ck-pk-lands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 6px}
.ck-o-land{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 10px;border-radius:8px;border:0;background:transparent;cursor:pointer;min-width:0;color:var(--graphite);font-size:15px;text-align:left}
.ck-o-land i{font-style:normal;font-size:12.5px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-o-row{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 10px;align-items:baseline;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left;color:var(--graphite);font-size:15px}
.ck-o-row u{text-decoration:none;font-weight:700;color:var(--navy)}
.ck-o-row small{font-size:12.5px;color:var(--slate);line-height:1.4}
.ck-o-back{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
.ck-o-row:hover,.ck-o-land:hover,.ck-opt:hover{background:var(--bg-soft)}
.ck-pop [aria-selected="true"]{background:var(--accent-soft);color:var(--accent-deep);border-color:var(--accent-soft-2)}
.ck-pop .is-act{outline:2px solid var(--accent);outline-offset:-2px}
.ck-pk-empty{padding:12px 8px 2px;font-size:14px;line-height:1.45;color:var(--slate)}
.ck-pk-f{border-top:1px solid var(--line-2);padding:10px 16px 12px;font-size:12.5px;line-height:1.45;color:var(--slate)}
.ck-opts{display:grid;gap:2px;padding:6px 8px 10px}
.ck-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left;font-size:15.5px;color:var(--graphite)}
.ck-opt svg{flex:none;opacity:0;color:var(--accent-deep)}
.ck-opt[aria-selected="true"] svg{opacity:1}
.ck-pop button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(pointer:coarse){.ck-o-chip,.ck-o-land,.ck-o-row,.ck-o-back{min-height:44px}.ck-pk-clr{width:32px;height:32px}}

/* ---------- Schmal ---------- */
@media(max-width:900px){.ck-tiles{grid-template-columns:minmax(0,1fr);gap:16px}}
@media(max-width:640px){
  .ck-start{padding:26px 0 40px}
  .ck-start::before{opacity:.45}
  .ck-start .kette{flex-direction:column;gap:6px;margin-bottom:28px}
  .ck-head{grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:24px}
  .ck-h1{font-size:2.65rem}
  .ck-sub{font-size:15.5px;margin-top:10px}
  .ck-typen{max-width:320px}
  .ck-satz{padding:20px 18px 18px;border-radius:14px;gap:18px}
  .ck-zeilen{font-size:1.2rem}
  .ck-zeile{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:10px 0}
  .ck-z-l{font-size:.78em}
  .ck-zeilen .ck-fld{white-space:nowrap;text-align:left}
  .ck-zeilen .ck-fld-t{white-space:normal}
  .ck-more{padding-top:16px}
  .ck-tile{min-height:50px;padding:10px 38px 10px 12px;gap:10px}
  .ck-foot{flex-direction:column;align-items:stretch;padding-top:16px}
  .ck-go{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .ck-rest{text-align:center}
  .ck-btn.btn{width:100%}
  /* Blatt am unteren Rand, höchstens 76 % der Höhe: Kopfzeile und die Zeile
     des Satzes bleiben darüber sichtbar (ortswahl.js holt sie dorthin). Weg
     zurück: Schließen-Knopf, Tipp auf die Abdunkelung, Escape. */
  .ck-pop,.ck-pop.is-schmal{position:fixed;inset:auto 0 0 0;width:auto;max-width:none;max-height:76vh;max-height:min(76vh,100dvh - 96px);border:0;border-radius:14px 14px 0 0;box-shadow:var(--shadow-lg);z-index:300;padding-bottom:env(safe-area-inset-bottom,0px)}
  /* Ortsfenster mit Suchfeld: oben angeschlagen, damit Eingabe und Treffer
     über der Bildschirmtastatur bleiben; Listen hängen unten in Inhaltshöhe */
  .ck-pop:not(.is-schmal){top:24vh;top:24dvh;max-height:none}
  .ck-scrim:not([hidden]){display:block}
  .ck-pk-head{padding:12px 8px 4px 20px}
  .ck-pk-head b{font-size:20px}
  .ck-pk-s{margin:8px 16px 4px}
  .ck-pk-b{padding:4px 12px 16px}
  html.ck-pop-offen,html.ck-pop-offen body{overflow:hidden}
}

@media(prefers-reduced-motion:reduce){.ck-tile,.ck-keins,.ck-fld,.ck-pk-s{transition:none!important}}