/* Wirkraum · Version 2
   Farben und Zustände: Block „Version 2 · Farben und Zustände“ (Atelier-Abschnitt) und docs/design-vertrag.md.
   Schrift: Quicksand, lokal mitgeliefert (SIL Open Font License) — kein fremder Server.
   Kontraste: Fließtext und leise Texte mindestens 4,5 : 1 (WCAG AA) in beiden Modi. */

@font-face{font-family:"Quicksand";font-style:normal;font-display:swap;font-weight:300 700;
  src:url("vendor/schrift/quicksand-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Quicksand";font-style:normal;font-display:swap;font-weight:300 700;
  src:url("vendor/schrift/quicksand-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Nicht-Farb-Werte. Alle Farben (Hell und Dunkel) stehen im Block
   „Version 2 · Farben und Zustände“ im Atelier-Abschnitt weiter unten; Schrift --ui und --display
   dort bei „Schrift“, Radien im Block „Klares Design“. */
:root{
  --doc: var(--ui);
  --mono: var(--ui);  /* kleine Beschriftungen */
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* nur für Prompt-Wortlaut */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:500 16px/1.6 var(--ui);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){:root:not([data-bewegung="voll"]) *{transition:none!important;animation:none!important}}:root[data-bewegung="ruhig"] *{transition:none!important;animation:none!important}
[hidden]{display:none!important}
a{color:var(--hyp-ink)}

/* ---------- Kopfleiste ---------- */
.kopf{background:var(--rail);color:var(--rail-ink);position:sticky;top:0;z-index:20}
.kopf-innen{max-width:1080px;margin:0 auto;padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marke b{font-size:19px;font-weight:650;letter-spacing:-.02em}
.beta{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rail-dim);color:var(--rail-dim);padding:3px 6px;border-radius:3px}
.kopf-innen{position:relative;flex-wrap:nowrap}
/* Menü rechts oben: drei Balken, darunter eine Tafel mit allen Bereichen */
.menue-knopf{margin-left:auto;display:flex;align-items:center;gap:var(--s2);background:transparent;color:var(--rail-ink);border:1px solid var(--rail-dim);border-radius:6px;padding:7px 12px;cursor:pointer;font:600 14px/1 var(--ui)}
.menue-knopf:hover,.menue-knopf[aria-expanded="true"]{background:rgba(255,255,255,.1)}
.menue-balken{display:grid;gap:3px;width:18px}
.menue-balken i{display:block;height:2px;border-radius:1px;background:currentColor}
.menue-knopf .zahl{margin-left:0}
.menue{position:absolute;right:var(--s5);top:calc(100% + 6px);z-index:40;min-width:270px;background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong);border-radius:8px;box-shadow:var(--lift);padding:var(--s2)}
.menue[hidden]{display:none}
nav.haupt{display:flex;flex-direction:column;gap:2px}
nav.haupt a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:6px;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:space-between}
nav.haupt a:hover{background:var(--sunk)}
nav.haupt a[aria-current="page"]{background:var(--hyp-bg);color:var(--hyp-ink);box-shadow:inset 3px 0 0 var(--hyp)}
.menue-trenner{height:1px;background:var(--rule);margin:var(--s1) var(--s2)}
.zahl{font:600 12px/1 var(--mono);background:rgba(255,255,255,.18);border-radius:8px;padding:2px 6px;margin-left:4px}
nav.haupt .zahl{background:var(--sunk);color:var(--ink-mid)}
.menue-fuss{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);border-top:1px solid var(--rule);margin-top:var(--s2);padding:var(--s3) var(--s2) var(--s1)}
.kontingent{font:600 12px/1.3 var(--mono);color:var(--ink-faint)}
.menue .thema-knopf{color:var(--ink);border-color:var(--rule-strong)}
@media (max-width:640px){.menue{right:var(--s3);left:var(--s3);min-width:0}.menue-name{display:none}}

/* ---------- Inhalt ---------- */
main{max-width:1080px;margin:0 auto;padding:var(--s6) var(--s5) 96px}
.spalte{max-width:74ch}
.dach{font:600 11.5px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s2)}
h1{font-size:32px;line-height:1.1;letter-spacing:-.03em;margin:0 0 var(--s3);font-weight:700;text-wrap:balance}
h2{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);font-weight:700;margin:var(--s7) 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
h3{font-size:16.5px;font-weight:700;margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s3)}
.lede{font:500 18px/1.6 var(--doc);color:var(--ink-mid);margin:0 0 var(--s5);max-width:62ch}
.leise{color:var(--ink-faint);font-size:14.5px}
.doc{font:500 16.5px/1.65 var(--doc)}
@media (max-width:640px){h1{font-size:26px}main{padding:var(--s5) var(--s4) 96px}}

/* ---------- Eingaben ---------- */
label.feld{display:block;margin-bottom:var(--s4)}
.feld-name{display:block;font:600 11.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mid);margin-bottom:var(--s2)}
.hinweis{font-size:14.5px;color:var(--ink-faint);margin:var(--s1) 0 0;line-height:1.5}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;font:500 15px/1.5 var(--ui);color:var(--ink);-webkit-text-fill-color:var(--ink);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:4px;padding:10px 12px}
textarea{resize:vertical;min-height:110px;font-family:var(--doc);font-size:16px}
/* Platzhalter sollen nie wie ausgefüllt aussehen: leiser und dünner als echter Text */
::placeholder{color:var(--ink-faint);opacity:.8;font-weight:400}
input:focus,textarea:focus,select:focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--hyp-bg);outline:none}
.raster2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.raster3{display:grid;grid-template-columns:2fr 2fr 1fr;gap:var(--s3)}
@media (max-width:640px){.raster2,.raster3{grid-template-columns:1fr}}

.aktionen{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3)}
button{font:inherit}
.knopf{font:600 14.5px/1.2 var(--ui);padding:10px 16px;border-radius:4px;cursor:pointer;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink)}
.knopf:hover:not(:disabled){background:var(--sunk)}
.knopf.haupt{background:var(--hyp);border-color:var(--hyp);color:var(--on-cyan);font-weight:700}
.knopf.haupt:hover:not(:disabled){filter:brightness(1.06)}
.knopf.warnung{border-color:var(--alarm-line);color:var(--alarm)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf .ziel{display:block;font:600 11px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;opacity:.7;margin-top:3px;font-weight:400}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-mid);font:600 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.arbeitet{font:600 12.5px/1.4 var(--mono);color:var(--ink-faint)}
.arbeitet::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hyp);margin-right:8px;animation:atem 1.2s ease-in-out infinite}
@keyframes atem{0%,100%{opacity:.3}50%{opacity:1}}

.seg{display:inline-flex;border:1px solid var(--rule-strong);border-radius:3px;overflow:hidden}
.seg button{font:600 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--ink-mid);border:0;border-right:1px solid var(--rule-strong);padding:7px 10px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.an{background:var(--hyp);color:var(--on-cyan);font-weight:600}

/* ---------- Karten und Stempel ---------- */
.karten{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.karte{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--ok);border-radius:4px;padding:var(--s4) var(--s5);box-shadow:var(--lift)}
.karte.luecke{border-left-color:var(--gap-line)}
.karte.alarm{border-left-color:var(--alarm-line)}
.karte.neutral{border-left-color:var(--rule-strong)}
.karte-kopf{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:baseline;margin-bottom:var(--s2)}
.karte-titel{font:700 18px/1.3 var(--doc);margin:0;flex:1 1 240px;min-width:0}
.karte a.karte-titel{color:inherit;text-decoration:none}
.karte a.karte-titel:hover{text-decoration:underline}
.stempel{font:600 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;padding:4px 7px;border-radius:3px;white-space:nowrap;color:var(--ink-mid);background:var(--sunk)}
.stempel.belegt{color:var(--ok);background:var(--ok-bg)}
.stempel.luecke{color:var(--gap);background:var(--gap-bg)}
.stempel.alarm{color:var(--alarm);background:var(--alarm-bg)}
.stempel.hyp{color:var(--hyp-ink);background:var(--hyp-bg)}
dl.zeilen{margin:0;display:grid;grid-template-columns:1fr;gap:var(--s2)}
@media (min-width:660px){dl.zeilen{grid-template-columns:130px 1fr;gap:var(--s2) var(--s4)}}
dl.zeilen dt{font:600 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);padding-top:3px}
dl.zeilen dd{margin:0;font:500 15.5px/1.6 var(--doc);min-width:0;overflow-wrap:anywhere}
.schlagworte{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
.schlagwort{font:600 11.5px/1.4 var(--mono);color:var(--ink-mid);background:var(--sunk);padding:2px 7px;border-radius:2px}

.motiv{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--hyp);border-radius:0 0 6px 6px;box-shadow:var(--lift);padding:var(--s5)}
.motiv-satz{font:600 23px/1.35 var(--doc);letter-spacing:-.01em;margin:0 0 var(--s3);text-wrap:pretty}
@media (max-width:640px){.motiv-satz{font-size:19px}}
ul.signale{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
ul.signale li{display:flex;gap:var(--s3);font-size:14px}
ul.signale li::before{content:"—";color:var(--ink-faint);flex:none}

.hinweiskasten{border-left:3px solid var(--gap-line);background:var(--gap-bg);border-radius:0 4px 4px 0;padding:var(--s3) var(--s4);margin:var(--s3) 0;font-size:14px}
.hinweiskasten.alarm{border-left-color:var(--alarm-line);background:var(--alarm-bg)}
.hinweiskasten.info{border-left-color:var(--hyp);background:var(--hyp-bg)}
.leer{border:1px dashed var(--rule-strong);padding:var(--s5);color:var(--ink-faint);font-size:14px;border-radius:4px;margin-top:var(--s3)}

ol.fragen{list-style:none;margin:0;padding:0;counter-reset:f}
ol.fragen li{counter-increment:f;border-top:1px solid var(--rule);padding:var(--s3) 0;display:grid;grid-template-columns:28px 1fr;gap:var(--s3)}
ol.fragen li::before{content:counter(f,decimal-leading-zero);font:600 12px/1.8 var(--mono);color:var(--ink-faint)}
.frage-text{font:500 16px/1.5 var(--doc);margin:0}
.frage-warum{font-size:12.5px;color:var(--ink-faint);margin:var(--s1) 0 0}
.frage-wo{font:600 11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--hyp-ink);margin:var(--s1) 0 0;text-transform:uppercase}

/* Wirkprofil als Balken — lesbarer als das Netzdiagramm aus Version 1 */
.balken{display:grid;grid-template-columns:170px 1fr 42px;gap:var(--s2) var(--s3);align-items:center;margin-top:var(--s3)}
.balken-name{font-size:14.5px}
.balken-spur{height:10px;background:var(--spur);border-radius:5px;overflow:hidden}
.balken-wert{height:100%;background:var(--hyp);border-radius:5px}
.balken-zahl{font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-faint);text-align:right}

/* Kennzahlen */
.kz-zeile{display:grid;grid-template-columns:1fr 22px;gap:var(--s2);align-items:center;border-bottom:1px dotted var(--rule)}
.kz-zeile input{border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;font:500 14px/1.5 var(--mono);padding:6px 0}
.kz-zeile input:focus{box-shadow:none;border-bottom-color:var(--focus)}
.x{background:none;border:0;cursor:pointer;color:var(--ink-faint);font-size:15px;line-height:1}
.x:hover{color:var(--alarm)}
.rueckfrage{border-left:3px solid var(--hyp);background:var(--hyp-bg);border-radius:0 4px 4px 0;padding:var(--s3) var(--s4);margin-top:var(--s2)}
.rueckfrage p{margin:0 0 var(--s2)}
.fehlt{font-size:12.5px;color:var(--gap);margin:var(--s2) 0 0}
.fehlt b{font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin-right:6px;font-weight:400}

/* Chips für Energie */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 var(--s4)}
.chip{font:500 14px/1.35 var(--ui);text-align:left;background:var(--surface);color:var(--ink-mid);border:1px solid var(--rule-strong);border-radius:3px;padding:8px 12px;cursor:pointer}
.chip.an{background:var(--raum-voll);color:var(--raum-auf);border-color:var(--raum-voll);font-weight:500}
.chip.minus.an{background:var(--gap-bg);color:var(--gap);border-color:var(--gap-line)}
.chip small{display:block;font:600 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:3px}

/* Stellenliste */
.stellen-liste .karte{padding:var(--s3) var(--s4)}
.stellen-meta{font:600 12px/1.5 var(--mono);color:var(--ink-faint)}
/* Prüfsiegel „Unternehmen recherchiert“ in der Unterzeile einer Stelle */
.meta-siegel{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;vertical-align:middle}
.meta-siegel svg{width:14px;height:14px;flex:none;color:var(--ok)}

/* Aufklappbares */
details.warum{margin-top:var(--s1)}
details.warum>summary{cursor:pointer;list-style:none;display:inline-block;font:600 12px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);text-decoration:underline;text-underline-offset:3px}
details.warum>summary::-webkit-details-marker{display:none}
details.warum p{font-size:14.5px;color:var(--ink-faint);margin:var(--s2) 0 0;max-width:62ch}
details.box{border-top:1px solid var(--rule);padding-top:var(--s3);margin-top:var(--s5)}
details.box>summary{cursor:pointer;font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid)}
pre.wortlaut{font:11.5px/1.6 var(--code);color:var(--ink-mid);background:var(--sunk);border:1px solid var(--rule);border-radius:3px;padding:var(--s4);max-height:360px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--s3) 0 0}

/* Anmeldung */
.anmelden{max-width:420px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--rule);border-radius:8px;box-shadow:var(--lift);padding:var(--s6)}

/* Rückmeldung */
.rueckmeldung-knopf{position:fixed;right:20px;bottom:20px;z-index:30;box-shadow:var(--lift)}
dialog{border:1px solid var(--rule-strong);border-radius:8px;padding:var(--s5);max-width:520px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(10,20,25,.45)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 18px;border-radius:3px;font:600 12px/1.4 var(--mono);z-index:60;max-width:calc(100% - 32px)}

/* Zwischen den Zeilen */
ul.belegstellen{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
ul.belegstellen li{font-size:14.5px;color:var(--ink-faint);border-left:2px solid var(--rule-strong);padding-left:var(--s3)}
.spannung{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.spannung .feld-name{margin:0 0 var(--s1)}
.spannung .doc{margin:0}
@media (max-width:640px){.spannung{grid-template-columns:1fr}}
.aktionen + .lede{margin-top:var(--s4)}

/* Stationen: optional, in eigenen Worten */
.stationen{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule)}
details.station{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--rule-strong);border-radius:4px;margin-top:var(--s2)}
details.station.angefangen{border-left-color:var(--ok)}
details.station>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;padding:var(--s3) var(--s4)}
details.station>summary::-webkit-details-marker{display:none}
details.station>summary::before{content:"▸";color:var(--ink-faint);margin-right:var(--s1)}
details.station[open]>summary::before{content:"▾"}
.station-titel{font-weight:700;flex:1 1 240px;min-width:0}
.station-stand{font-size:13px;color:var(--ink-faint)}
.station-innen{padding:0 var(--s4) var(--s4)}
label.feld.frage .feld-name{text-transform:none;letter-spacing:0;font-size:15px;font-weight:700;color:var(--ink)}
label.feld .hinweis{display:block}

/* Wirkmosaik: Steine und aufklappbarer Inhalt */
.mosaik-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:var(--s3) 0 0}
/* Doppelte Stationen: Angebot zum Zusammenführen */
.box.doppelt{margin:var(--s4) 0 0;padding:var(--s4);border:1px solid var(--rule);border-radius:var(--rund);background:var(--sunk-2)}
.doppelt-liste li span{min-width:0;flex:1 1 220px}
.doppelt-titel{font-weight:700;margin:0}
.doppelt-liste{list-style:none;margin:var(--s3) 0 0;padding:0}
.doppelt-liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);padding:var(--s2) 0;border-top:1px solid var(--rule)}
.mosaik-steine{display:flex;flex-wrap:wrap;gap:4px}
.stein{width:16px;height:16px;border-radius:3px;background:var(--spur)}
.stein.s1,.stein.s2{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hyp)}
.stein.s3,.stein.s4{background:var(--hyp);opacity:.6}
.stein.s5{background:var(--hyp)}
details.mosaik-inhalt{margin-top:var(--s3)}
details.mosaik-inhalt>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;color:var(--hyp-ink);padding:var(--s2) 0}
details.mosaik-inhalt>summary::-webkit-details-marker{display:none}
details.mosaik-inhalt>summary::before{content:"▸";color:var(--ink-faint)}
details.mosaik-inhalt[open]>summary::before{content:"▾"}
.mosaik-innen{padding-left:var(--s4);border-left:2px solid var(--rule)}

/* Umschalter Hell / Dunkel / Automatisch */
.thema-knopf{background:none;border:1px solid var(--rail-dim);color:var(--rail-ink);border-radius:4px;padding:5px 9px;cursor:pointer;font:600 12px/1 var(--ui)}
.thema-knopf:hover{background:rgba(255,255,255,.08)}

/* Wirkton */
.mosaik-zeile>span:last-child{flex:1 1 240px;min-width:0}
/* Wirkton (0.38.0): Mosaik, Karte, Tasten. Die Themenfarben kommen aus den Daten (--f kräftig, --fw halb, --fz zart, --fd und --fr fürs Dunkle).
   --ton bleibt nur Schmuck. Bewegung: nur der Farbübergang; bei reduzierter Bewegung schaltet die Regel oben alles ab. */
.wk-box{background:var(--sunk);border-radius:var(--rund,12px);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3);min-width:0}
.wk-ort{min-width:0}
.wk-mosaik{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;max-width:400px}
.wk-stein{display:block;aspect-ratio:1/1;border-radius:10px;border:1.5px dashed var(--rule-strong);background:rgba(255,255,255,.6);transition:background-color .4s ease-out}
.wk-genau,.wk-eher{border:1px solid rgba(0,16,17,.18);box-shadow:inset 1px 1px 0 rgba(255,255,255,.45),0 3px 8px -4px rgba(0,16,17,.35)}
.wk-genau{background:var(--f)}
.wk-eher{background:var(--fw)}
.wk-beides{background:transparent;border:2px dashed var(--f);box-shadow:none}
.wk-gefuellt{background:var(--fz);border:1px solid transparent}
.wk-jetzt{border:2px solid var(--ink)}
.wk-versteckt{visibility:hidden}
.wk-mini{width:96px;gap:3px;max-width:100%}
.wk-mini .wk-stein{border-radius:3px;border-width:1px}
.wk-mini .wk-beides{border-width:1.5px}
.wk-mini .wk-genau,.wk-mini .wk-eher{box-shadow:none}
@media (prefers-color-scheme:dark){
  :root:not([data-thema="hell"]) .wk-leer,:root:not([data-thema="hell"]) .wk-jetzt{background:rgba(255,255,255,.04)}
  :root:not([data-thema="hell"]) .wk-genau,:root:not([data-thema="hell"]) .wk-eher{border-color:rgba(255,255,252,.2);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25)}
  :root:not([data-thema="hell"]) .wk-gefuellt{background:var(--fd);border:1.5px solid var(--fr)}
}
:root[data-thema="dunkel"] .wk-leer,:root[data-thema="dunkel"] .wk-jetzt{background:rgba(255,255,255,.04)}
:root[data-thema="dunkel"] .wk-genau,:root[data-thema="dunkel"] .wk-eher{border-color:rgba(255,255,252,.2);box-shadow:inset 1px 1px 0 rgba(255,255,255,.25)}
:root[data-thema="dunkel"] .wk-gefuellt{background:var(--fd);border:1.5px solid var(--fr)}
.wk-text{margin:0}
.wk-text b{font-weight:700}
.wk-legende{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);font-size:13px;color:var(--ink-mid)}
.wk-legende i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.wk-karte-ort{min-width:0}
.wk-gespraech{display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s5);min-width:0}
.wk-gespraech .karte-titel{flex:none}
.wk-gespraech .hinweis{margin:0}
.wk-teil{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.wk-teil h4{margin:0;font:700 15px/1.3 var(--ui)}
.wk-teil textarea{width:100%;box-sizing:border-box;min-height:0;resize:none;overflow:hidden;font-family:var(--ui);font-size:16px;line-height:1.5;background:var(--sunk);border-radius:var(--rund-klein)}
.wk-teil .link{align-self:flex-start}
.wk-fragen{margin:0;padding-left:var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.wk-karte{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rund,12px);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s3);min-width:0}
.wk-nr{font:600 13px/1.4 var(--ui);color:var(--ink-mid)}
.wk-lage{margin:0;font:700 20px/1.3 var(--display,var(--ui))}
.wk-lage:focus{outline:none}
.wk-seiten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}
@media (max-width:520px){.wk-seiten{grid-template-columns:minmax(0,1fr)}}
.wk-seite{display:flex;flex-direction:column;gap:var(--s2);border:1px solid var(--rule-strong);border-radius:var(--rund-klein,8px);padding:var(--s3);min-width:0}
.wk-antwort{margin:0;font-weight:600;line-height:1.35;min-height:44px;overflow-wrap:anywhere}
.wk-tasten{display:flex;gap:var(--s2)}
.wk-tasten button{flex:1;min-height:44px;border-radius:var(--rund-klein,8px);border:1px solid var(--rule-strong);background:transparent;color:var(--ink);cursor:pointer;font:600 14px/1 var(--ui)}
.wk-tasten button:hover{border-color:var(--ink)}
.wk-tasten button[aria-pressed="true"],.wk-beides-knopf[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.wk-beides-knopf{min-height:44px;padding:8px 16px;border-radius:999px;border:1px dashed var(--rule-strong);background:transparent;color:var(--ink-mid);cursor:pointer;font:600 14px/1 var(--ui)}
.wk-beides-knopf[aria-pressed="true"]{border-style:solid}
.wk-unten{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);flex-wrap:wrap}
.wk-unten .link{min-height:44px;padding:0 var(--s2);display:inline-flex;align-items:center}
.wk-liste{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--ink-mid)}
.wk-liste button{background:none;border:0;padding:10px 0;min-height:44px;text-align:left;text-decoration:underline;cursor:pointer;color:var(--ink);font:inherit}
.wk-tasten button:focus-visible,.wk-beides-knopf:focus-visible,.wk-liste button:focus-visible,.wk-unten .link:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ton-status{font-size:13px;color:var(--ink-faint);margin:var(--s2) 0 0;min-height:1.4em}
.ton-status.fehler{color:var(--alarm)}
details.station.luecke{border-left-color:var(--gap-line)}
details.beleg>summary{align-items:center}
.beleg-kopf{justify-content:flex-end;margin:0 0 var(--s2)}

/* Zwischen den Zeilen: eigene Ebene */
.kernsatz{font:600 19px/1.5 var(--doc);color:var(--ink);margin:var(--s2) 0 var(--s4);max-width:62ch;text-wrap:pretty}
@media (max-width:640px){.kernsatz{font-size:17px}}

ul.voraussetzungen{list-style:none;padding:0;margin:var(--s3) 0;display:flex;flex-direction:column;gap:var(--s2)}
ul.voraussetzungen li{padding-left:28px;position:relative;color:var(--ink-mid)}
ul.voraussetzungen li::before{content:"○";position:absolute;left:4px;color:var(--ink-faint)}
ul.voraussetzungen li.ok{color:var(--ink)}
ul.voraussetzungen li.ok::before{content:"●";color:var(--ok)}
.zeilen-steuer{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;margin:0 0 var(--s4)}
.zeilen-steuer-rechts{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.ansicht-knopf{background:var(--surface);border:1px solid var(--rule-strong);color:var(--ink);border-radius:4px;padding:7px 11px;cursor:pointer;font:600 13px/1 var(--ui)}
.ansicht-knopf:hover{background:var(--sunk)}
.knopf.klein{padding:7px 12px;font-size:13px}
.einsicht.abschluss{border-color:var(--ok-line)}
.einsicht{background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--lift);padding:var(--s6);min-height:280px;display:flex;flex-direction:column}
.einsicht[data-resonanz="ja"]{border-color:var(--ok-line)}
.einsicht-art{font:600 12.5px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s3)}
.einsicht-titel{font:700 24px/1.3 var(--doc);letter-spacing:-.01em;text-transform:none;color:var(--ink);border:0;padding:0;margin:0 0 var(--s3);text-wrap:balance}
.einsicht-text{font:500 17px/1.65 var(--doc);margin:0 0 var(--s3);max-width:60ch}
.resonanz-bereich{margin-top:auto;padding-top:var(--s4)}
.resonanz{display:flex;flex-wrap:wrap;gap:var(--s2)}
label.feld.kommentar{margin:var(--s3) 0 0}
label.feld.kommentar .feld-name{text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;color:var(--ink)}
.resonanz .knopf.an{background:var(--raum-voll);border-color:var(--raum-voll);color:var(--raum-auf)}
.einsicht-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4)}
.einsicht-punkte{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.punkt{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rule-strong);background:transparent;padding:0;cursor:pointer}
.punkt.geprueft{background:var(--ok);border-color:var(--ok);opacity:.6}
.punkt.rot{border-color:var(--alarm-line);border-width:2px}
.punkt.orange{border-color:var(--gap-line);border-width:2px}
.punkt.aktiv{border-color:var(--ink);opacity:1}
.einsichten-liste{display:flex;flex-direction:column;gap:var(--s4)}
.einsichten-liste .einsicht{min-height:0}
@media (max-width:640px){.einsicht{padding:var(--s5)}.einsicht-titel{font-size:20px}}
.zeilen-fuss{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--rule)}
@media (max-width:640px){.rueckmeldung-knopf{right:12px;bottom:12px;padding:8px 12px;font-size:13px}}
label.feld.kommentar textarea{min-height:0}
.kommentar-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
.kommentar-stand{font-size:14px;color:var(--ink-faint)}
.kommentar-stand.k-gespeichert{color:var(--ok)}
.kommentar-stand.k-offen{color:var(--gap)}
.kommentar-stand.k-fehler{color:var(--alarm)}
.vorschlaege{margin-bottom:var(--s5)}
.vorschlaege .karte .einsicht-art{margin-bottom:var(--s2)}
/* Prüfen einzelner Punkte (Übergänge, Bedingungen): kompakter */
.resonanz-bereich.kompakt{margin:var(--s2) 0 var(--s3);padding-top:0}
.resonanz-bereich.kompakt .resonanz .knopf{padding:6px 11px;font-size:13px}
.resonanz-bereich.kompakt label.feld.kommentar .feld-name{font-size:13.5px}

/* Vorschläge: klare Kopfzeile statt langer Großbuchstaben-Kette */
.vorschlag-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0 0 var(--s1)}
.vorschlag-ziel{font-weight:700;font-size:16px}
.vorschlag-feld{font-size:15px;color:var(--ink-mid);margin:0 0 var(--s3)}
.vorschlag-quelle{font-size:14.5px;color:var(--ink-faint);margin:var(--s2) 0 0}
.vorschlag-quelle q{font-style:normal;color:var(--ink-mid)}
.vorschlaege .karte textarea{font-size:16px;line-height:1.55}
.vorschlaege-intro{font-size:15.5px;color:var(--ink-mid);margin:0 0 var(--s2);max-width:62ch}
/* Erledigte Vorschläge und angesprungene Stellen */
details.erledigt{margin-top:var(--s4)}
.erledigt-liste{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.erledigt-zeile{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.erledigt-mitte p{margin:var(--s1) 0 0}
.erledigt-aktion{padding-top:2px}
@media (max-width:640px){.erledigt-zeile{grid-template-columns:1fr}}
.aufgerufen{outline:3px solid var(--focus);outline-offset:3px;transition:outline-color 1.5s}
.erledigt-zeile .stempel{justify-self:start}

/* Ampel */
.einsicht-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);margin:0 0 var(--s3)}
.einsicht-kopf .einsicht-art{margin:0}
.ampel{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--ui);padding:5px 9px;border-radius:999px;white-space:nowrap}
.ampel::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ampel.grau{color:var(--ink-faint);background:var(--sunk)}
dl.zeilen dd :is(.ampel,.zustand){margin-bottom:var(--s2)}
.einsicht[data-prio="rot"]{border-left:4px solid var(--hyp)}
.einsicht[data-prio="orange"]{border-left:4px solid var(--hyp)}
.einsicht[data-prio="gruen"]{border-left:4px solid var(--ok)}

.ampel-zahl{font:600 14px/1 var(--ui);padding:6px 10px;border-radius:999px}
.ampel-zahl.rot{color:var(--alarm);background:var(--alarm-bg)}
.ampel-zahl.orange{color:var(--gap);background:var(--gap-bg)}
.ampel-zahl.gruen{color:var(--ok);background:var(--ok-bg)}
.rueckfrage-wirkraum{border-left:3px solid var(--hyp);background:var(--hyp-bg);border-radius:0 4px 4px 0;padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
.rueckfrage-wirkraum p{margin:var(--s1) 0 0;font-size:16px}
.geklaert-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
details.geklaert-liste{margin-top:var(--s5)}
.resonanz .link{margin-left:var(--s2)}
.geklaert-eintrag{display:grid;grid-template-columns:118px minmax(0,1fr);gap:var(--s2) var(--s3);align-items:start;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.geklaert-eintrag :is(.ampel,.zustand){justify-self:start}
.geklaert-eintrag .geklaert-zeile{grid-column:2}
.geklaert-eintrag .erledigt-mitte p{margin:var(--s1) 0 0}
@media (max-width:640px){.geklaert-eintrag{grid-template-columns:1fr}.geklaert-eintrag .geklaert-zeile{grid-column:1}}
/* Dein Weg: klebt unter dem Kopf, zeigt den Stand und immer einen nächsten Schritt */

ol.fragen.weiterdenken .feld.kommentar{margin-top:var(--s3)}
.korridor dl.zeilen{margin-top:var(--s4)}
.korridor .aktionen .knopf{font-weight:600}

.korridor-art{font:700 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--hyp-ink);margin:0 0 var(--s1)}
.korridor .hinweiskasten{margin:var(--s3) 0}
/* Wirkweisen sind ganze Sätze — deshalb als Überschrift über die volle Breite, nicht als schmale Spalte */
dl.zeilen.wirkweise{grid-template-columns:1fr;gap:var(--s1)}
dl.zeilen.wirkweise dt{font:700 17px/1.4 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink);padding-top:var(--s4)}
dl.zeilen.wirkweise dd{margin:0 0 var(--s2)}
/* Suchkorridore: Deine Richtung, Anlass-Messer, Urteil */
details.box.richtung{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:var(--s4) var(--s5);margin:var(--s4) 0 var(--s5)}
details.box.richtung>summary{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;text-transform:none;letter-spacing:0;font:500 15px/1.45 var(--ui);color:var(--ink)}
.richtung-titel{font:700 12px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--hyp-ink)}
.richtung-kurz{color:var(--ink-mid)}
details.box.richtung[open]>summary{margin-bottom:var(--s3)}
.richtung-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:calc(-1 * var(--s2)) 0 var(--s4)}
.richtung-chips .chip{padding:6px 10px;font-size:13.5px}
.korridor-oben{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);margin:0 0 var(--s2)}
.korridor-oben .korridor-art{margin:0}
.anlass-messer{display:inline-flex;align-items:center;gap:var(--s2);font:600 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid)}
.anlass-segmente{display:inline-flex;gap:2px}
.anlass-segmente i{display:block;width:12px;height:8px;border-radius:2px;background:var(--sunk);border:1px solid var(--rule)}
.anlass-segmente i.an{background:var(--hyp);border-color:transparent}
.anlass-zahl{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.korridor-urteil{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule)}
.korridor-grund{margin-top:var(--s3)}
details.box.richtung textarea{min-height:0}
details.box.richtung>.hinweis{margin:0 0 var(--s4)}
/* So schreibt Wirkraum über Dich — kompakt unter dem Seitenkopf */
details.box.anrede{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:var(--s3) var(--s5);margin:0 0 var(--s5);max-width:74ch}
details.box.anrede>summary{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;text-transform:none;letter-spacing:0;font:500 15px/1.45 var(--ui);color:var(--ink)}
details.box.anrede[open]>summary{margin-bottom:var(--s3)}
details.box.anrede .seg{margin:var(--s3) 0 var(--s2)}
/* Positionen an/aus und Suchtabelle */
.chip.position{display:inline-flex;flex-direction:column;align-items:flex-start}
.chip.position.hart small{color:var(--gap)}
.chip.position.an.hart small{color:inherit}
.such-tabelle{width:100%;border-collapse:collapse;margin-top:var(--s3)}
.such-tabelle td{padding:var(--s2) 0;border-top:1px solid var(--rule);vertical-align:middle}
.such-titel{font-weight:600}
.such-links{text-align:right;white-space:nowrap}
.such-links .knopf{margin-left:var(--s2);padding:6px 10px;font-size:13px}
@media (max-width:640px){.such-tabelle td{display:block;border-top:0;padding:var(--s1) 0}.such-tabelle tr{display:block;border-top:1px solid var(--rule);padding:var(--s2) 0}.such-links{text-align:left}.such-links .knopf{margin:var(--s1) var(--s2) 0 0}}
/* Sechs Schritte: auf mittleren Breiten nur der aktuelle mit Stand, schmalere Verbinder */

/* Stellen finden: Suchleiste und Treffer */
.such-leiste{display:grid;grid-template-columns:minmax(200px,1fr) auto auto;gap:var(--s4);align-items:end;margin:0 0 var(--s2)}
.such-leiste .feld{margin:0}
@media (max-width:760px){.such-leiste{grid-template-columns:1fr}.such-leiste .knopf{justify-self:start}}
.such-je{margin-top:calc(-1 * var(--s2))}
.treffer-liste{display:grid;gap:var(--s3);margin:var(--s3) 0 var(--s6)}
.karte.treffer a.karte-titel{display:block;font-size:17px;text-decoration:none;color:var(--ink)}
.karte.treffer a.karte-titel:hover{text-decoration:underline}
.karte.treffer .leise{margin:var(--s1) 0 var(--s2)}
.treffer-ueber{display:flex;flex-wrap:wrap;gap:var(--s1);margin:0 0 var(--s2)}
.karte.treffer .aktionen{align-items:center}
/* Treffer nach Unternehmensbereich */
.bereich-tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 var(--s2)}
.bereich-tab{font:600 13.5px/1.2 var(--ui);background:var(--surface);color:var(--ink-mid);border:1px solid var(--rule-strong);border-radius:999px;padding:6px 12px;cursor:pointer}
.bereich-tab.an{background:var(--raum-voll);border-color:var(--raum-voll);color:var(--raum-auf)}
.bereich-tab.aus{text-decoration:line-through;opacity:.65}
.bereich-aktion{margin:0 0 var(--s2)}
.schlagwort.bereich{background:var(--hyp-bg);color:var(--hyp-ink)}
.karte.treffer.ausgeblendet{opacity:.55}
.such-leiste{grid-template-columns:auto auto;justify-content:start}
.such-leiste>.feld{grid-column:1/-1}
.such-leiste .seg button{white-space:nowrap}
@media (max-width:760px){.such-leiste{grid-template-columns:1fr}.such-leiste .seg{flex-wrap:wrap}}
/* Suchbegriffe als abwählbare Chips, eigene ergänzbar */
.suchbegriffe{margin:var(--s4) 0 var(--s2)}
.chip.begriff{display:inline-flex;flex-direction:row;align-items:center;gap:var(--s2);cursor:default;padding:5px 6px 5px 12px}
.chip.begriff.eigene{background:var(--hyp-ink);border-color:var(--hyp-ink);color:var(--surface)}
.begriff-weg{background:none;border:0;color:inherit;font:700 16px/1 var(--ui);cursor:pointer;padding:0 4px;opacity:.8}
.begriff-weg:hover{opacity:1}
.eigene-position{align-items:center}
.eigene-position input{max-width:340px}
/* Betrieb: Kacheln, Diagramme, Tabellen */
.admin-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3);margin:var(--s4) 0 var(--s5)}
.admin-kachel{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:var(--s4);display:flex;flex-direction:column;gap:2px}
.admin-wert{font:700 26px/1.2 var(--ui);color:var(--ink);font-variant-numeric:tabular-nums}
.admin-name{font:700 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid)}
.admin-zusatz{font-size:13px;color:var(--ink-faint)}
.admin-abschnitt{max-width:none}
.admin-diagramm{margin:var(--s3) 0 var(--s5);background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:var(--s4)}
.admin-diagramm svg{width:100%;height:auto;display:block}
.admin-f1{fill:var(--hyp);background:var(--hyp)}
.admin-f2{fill:var(--hyp-ink);background:var(--hyp-ink)}
.admin-f3{fill:var(--alarm-line);background:var(--alarm-line)}
.admin-f4{fill:var(--gap-line);background:var(--gap-line)}
.admin-achse{font:600 10px var(--ui);fill:var(--ink-faint)}
.admin-grund{stroke:var(--rule-strong);stroke-width:1}
.admin-legende{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin-top:var(--s2);font-size:13.5px;color:var(--ink-mid)}
.admin-legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.admin-trichter{display:grid;gap:var(--s2);margin:var(--s3) 0}
.admin-zeile{display:grid;grid-template-columns:minmax(140px,220px) 1fr minmax(90px,auto);gap:var(--s3);align-items:center;font-size:14px}
.admin-spur{height:12px;background:var(--sunk);border-radius:6px;overflow:hidden}
.admin-fuellung{display:block;height:100%;border-radius:6px}
.admin-zeile-wert{color:var(--ink-faint);font-size:13px;font-variant-numeric:tabular-nums}
.admin-scroll{overflow-x:auto;margin:var(--s3) 0}
.admin-tabelle{width:100%;border-collapse:collapse;font-size:14px}
.admin-tabelle th{font:700 11px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mid);text-align:left;padding:var(--s2);border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.admin-tabelle td{padding:var(--s2);border-bottom:1px solid var(--rule);vertical-align:middle;font-variant-numeric:tabular-nums}
.admin-mail{font-weight:600}
.admin-tabelle .schlagwort{margin-left:var(--s2)}
.admin-limit{white-space:nowrap}
.admin-limit input{width:84px;padding:4px 6px;margin-right:var(--s2)}
.admin-limit .link{margin-right:var(--s2)}
.admin-credits{white-space:nowrap}
.admin-credits-stand{display:block;font-weight:700;margin-bottom:var(--s1)}
.admin-credits-zeile{display:flex;align-items:center;gap:var(--s2)}
.admin-credits input{width:84px;min-height:44px;padding:4px 6px}
.admin-credits .link{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.admin-ablauf{white-space:nowrap}
.admin-punkt{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--rule-strong);margin-right:3px;vertical-align:middle}
.admin-punkt.an{background:var(--hyp);border-color:transparent}
.admin-minibalken{display:block;height:4px;background:var(--hyp);border-radius:2px;margin-top:4px;opacity:.6}
.admin-warn{color:var(--alarm);font-weight:700}
@media (max-width:640px){.admin-zeile{grid-template-columns:1fr}}
/* Menü: Gruppen, Nummern wie im Weg, Abmelden */
.menue-wer{margin:var(--s1) var(--s3) var(--s2);font-size:13px;color:var(--ink-faint);overflow-wrap:anywhere}
.menue-gruppe{display:block;font:700 11px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);padding:var(--s3) 12px var(--s1)}
.menue-gruppe:first-child{padding-top:var(--s1)}
nav.haupt a,.menue-abmelden{justify-content:flex-start;gap:var(--s3)}
nav.haupt a .zahl{margin-left:auto}
.menue-nr{flex:none;width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:700 11.5px/1 var(--mono);color:var(--ink-mid);border:1.5px solid var(--rule-strong)}
nav.haupt a[aria-current="page"] .menue-nr{border-color:var(--ink);color:var(--ink)}
.menue-abmelden{display:flex;align-items:center;width:100%;background:none;border:0;border-top:1px solid var(--rule);margin-top:var(--s2);padding:12px;border-radius:0 0 6px 6px;font:600 15px/1.2 var(--ui);color:var(--ink);cursor:pointer;text-align:left}
.menue-abmelden:hover{background:var(--sunk)}
.menue .menue-trenner{display:none}
.menue{max-height:calc(100vh - 80px);overflow-y:auto}
.admin-freischalten{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:var(--s4) var(--s5);margin:var(--s3) 0 var(--s4);max-width:74ch}
.admin-freischalten h3{margin-top:0}
.admin-freischalten .aktionen input{max-width:320px}
.admin-freischalten textarea{font-size:14px}
.code-eingabe{margin-top:var(--s3)}
.code-eingabe input{font:700 22px/1.2 var(--code);letter-spacing:6px;max-width:220px}

/* ---------- Admin-Dashboard ---------- */
/* Farben der Reihen (--d0 bis --d7): im Block „Version 2 · Farben und Zustände“ */
.df-0{--f:var(--d0)}.df-1{--f:var(--d1)}.df-2{--f:var(--d2)}.df-3{--f:var(--d3)}.df-4{--f:var(--d4)}.df-5{--f:var(--d5)}.df-6{--f:var(--d6)}.df-7{--f:var(--d7)}
rect[class*="df-"],circle[class*="df-"]{fill:var(--f)}
.d-linie{fill:none;stroke:var(--f);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.d-flaeche{fill:var(--f);opacity:.12;stroke:none}
.d-punkt{stroke:var(--surface);stroke-width:1.5}
.d-treffer{fill:transparent}
.d-raster{stroke:var(--rule);stroke-dasharray:3 4}
.d-grund{stroke:var(--rule-strong)}
.d-grenze{stroke:var(--alarm-line);stroke-dasharray:5 4;stroke-width:1.5}
.d-grenze-text{fill:var(--alarm)}
.d-achse{font:600 10.5px var(--ui);fill:var(--ink-faint)}
.d-karte{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:var(--s4) var(--s5);box-shadow:var(--lift);height:100%}
.d-karte svg{width:100%;height:auto;display:block;overflow:visible}
.d-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3);margin-bottom:var(--s3)}
.d-titel{font:700 15px/1.3 var(--ui);color:var(--ink)}
.d-unter{font-size:13px;color:var(--ink-faint)}
.d-legende{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s3);font-size:13px;color:var(--ink-mid)}
.d-leg{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid transparent;border-radius:999px;padding:2px 8px;font:inherit;color:inherit}
button.d-leg{cursor:pointer}
button.d-leg:hover,.d-leg.an{border-color:var(--rule-strong);background:var(--sunk)}
.d-leg i{width:10px;height:10px;border-radius:3px;background:var(--f);display:inline-block}
.d-balken{display:grid;gap:6px}
.d-bzeile{display:grid;grid-template-columns:minmax(120px,40%) 1fr minmax(64px,auto);gap:var(--s3);align-items:center;font:500 13.5px/1.3 var(--ui);color:var(--ink);background:none;border:0;padding:4px 6px;border-radius:6px;text-align:left}
button.d-bzeile{cursor:pointer}
button.d-bzeile:hover,.d-bzeile.an{background:var(--sunk)}
.d-bspur{height:12px;background:var(--sunk);border-radius:6px;overflow:hidden}
.d-bwert{display:block;height:100%;border-radius:6px;background:var(--f)}
.d-bzahl{font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums;text-align:right}
.d-heat{display:grid;gap:2px;font-size:11px;color:var(--ink-faint)}
.d-heat-kopf{text-align:left;font-variant-numeric:tabular-nums}
.d-heat-zeile{font-weight:700;align-self:center}
.d-heat-zelle{aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--d0) calc(var(--st) * 100%),var(--sunk))}
.d-heat-zelle.null{background:var(--sunk)}
.d-tooltip{position:fixed;z-index:60;max-width:280px;background:var(--ink);color:var(--ground);font:600 12.5px/1.4 var(--ui);padding:6px 10px;border-radius:6px;pointer-events:none;box-shadow:var(--lift)}
.admin-filter{position:sticky;top:var(--kopf-h,56px);z-index:9;display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3) var(--s4);background:var(--ground);padding:var(--s3) 0;margin:0 0 var(--s4);border-bottom:1px solid var(--rule)}
.admin-filter-feld{display:flex;flex-direction:column;gap:4px}
.admin-filter-feld .feld-name{margin:0}
.admin-filter select{min-width:180px;max-width:240px;padding:6px 8px}
.admin-eigen{display:inline-flex;gap:var(--s2);align-items:center}
.admin-eigen input{width:auto;padding:5px 6px}
.admin-filter-rechts{margin-left:auto;display:flex;gap:var(--s3);align-items:center}
.admin-kacheln{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.admin-kachel{box-shadow:var(--lift);border-radius:12px}
.admin-trend{font:700 12.5px/1.3 var(--ui);color:var(--ink-faint)}
.admin-trend.gut{color:var(--ok)}
.admin-trend.schlecht{color:var(--alarm)}
.admin-trend.neutral{color:var(--ink-mid)}
.admin-insights{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--hyp);border-radius:12px;padding:var(--s4) var(--s5);margin:0 0 var(--s5);box-shadow:var(--lift)}
.admin-insights h2{margin:0 0 var(--s2);border:0;padding:0}
.admin-insights ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.admin-insights li{font-size:15px;line-height:1.5}
.admin-insights .link{margin-left:4px}
.admin-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.admin-zelle.breit{grid-column:1/-1}
.admin-zelle{scroll-margin-top:calc(var(--kopf-h,56px) + 90px)}
.admin-umschalter{margin-bottom:var(--s2)}
.admin-tabelle tr.an td{background:var(--hyp-bg)}
.admin-mail.link{text-transform:none;letter-spacing:0;font:600 14px var(--ui);color:var(--ink)}
@media (max-width:760px){.admin-raster{grid-template-columns:1fr}.admin-filter{position:static}.admin-filter-rechts{margin-left:0}.d-bzeile{grid-template-columns:1fr auto}.d-bspur{grid-column:1/-1;grid-row:2}}
.d-heat-kopf{overflow:visible;white-space:nowrap}

/* Stellensuche: sortieren und Angaben je Anzeige */
.sortier-zeile{display:flex;align-items:center;gap:var(--s2);justify-content:flex-end;margin:var(--s2) 0}
.sortier-zeile .feld-name{margin:0}
.sortier-zeile select{width:auto;min-width:200px;padding:6px 8px}
.treffer-fakten{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:0 0 var(--s2);font-size:14px;color:var(--ink-mid)}
.treffer-fakten span:not(:last-child)::after{content:"·";margin-left:var(--s3);color:var(--ink-faint)}
.treffer-fakten .betont{color:var(--ink);font-weight:600}
@media (max-width:560px){.sortier-zeile{justify-content:flex-start}.sortier-zeile select{flex:1;min-width:0}}

/* Stelle: die Schritte dieser einen Stelle */
.stellen-weg{list-style:none;margin:var(--s3) 0 var(--s4);padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.sw-schritt{display:flex}
.sw-knopf{display:flex;align-items:center;gap:6px;font:inherit;font-size:14px;padding:6px 12px 6px 6px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-mid);cursor:pointer}
.sw-knopf:hover:not(:disabled){color:var(--ink);border-color:var(--ink)}
.sw-knopf:disabled{opacity:.55;cursor:default}
.sw-marke{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--mono);border:1.5px solid var(--rule-strong)}
.sw-text{font-size:12px;color:var(--ink-faint)}
.sw-fertig .sw-marke{background:var(--hyp-ink);border-color:var(--hyp-ink);color:var(--surface)}
.sw-jetzt .sw-knopf{border-color:var(--hyp);box-shadow:0 0 0 1.5px var(--hyp);color:var(--ink);font-weight:600}
.sw-jetzt .sw-marke{border-color:var(--hyp);background:var(--hyp);}
.sw-entfaellt .sw-knopf{border-style:dashed}

/* Klärung und Bewerbung */
.klaerung-wer{margin-bottom:var(--s3)}
.klaerung-kopf{margin:0 0 var(--s1)}
.klaerung-zeichen{margin:var(--s2) 0}
.klaerung-urteil{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s2) 0 var(--s3)}
.klaerung-urteil .feld-name{margin:0}
.bewerbung-text{width:100%;font:inherit;line-height:1.55}
.beworben-zeile{align-items:center;margin-top:var(--s4)}
.beworben-zeile .feld-name{margin:0}
.beworben-zeile input{width:auto}
@media (max-width:560px){.sw-knopf{font-size:13px;padding:5px 10px 5px 5px}}
/* Handy: der Weiter-Knopf der Leiste bekommt eine eigene Zeile, statt hoch und schmal zu werden */

/* ---------- Bewerbung gestalten: DIN-A4-Seiten ---------- */

@page{size:A4;margin:0}
@media print{
  #kopf,.nur-bildschirm,.rueckmeldung-knopf,#toast,dialog{display:none !important}
  html,body{background:#fff !important}
  main{padding:0 !important;max-width:none !important;margin:0 !important}
}

/* Verlauf, Anstehend, Vergleich */
.zeitleiste,.anstehend{list-style:none;margin:var(--s3) 0 var(--s4);padding:0;border-left:2px solid var(--rule-strong)}
.zeit-eintrag,.anstehend li{position:relative;display:grid;grid-template-columns:130px 1fr auto;gap:var(--s3);padding:var(--s2) 0 var(--s3) var(--s4);align-items:start}
.anstehend li{grid-template-columns:130px 1fr}
.zeit-eintrag::before,.anstehend li::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--hyp)}
.zeit-absage::before{border-color:var(--gap-line)}
.zeit-datum{font-size:13px;color:var(--ink-mid);padding-top:3px}
.zeit-eintrag p,.anstehend p{margin:var(--s1) 0 0}
.zeit-weg{border:0;background:none;color:var(--ink-faint);font-size:18px;cursor:pointer;padding:0 var(--s2)}
.zeit-weg:hover{color:var(--alarm)}
.verlauf-mail textarea{width:100%}
.vorschlag-mail{margin-top:var(--s3)}
.verlauf-selbst select{width:100%}
.tabelle-rahmen{overflow-x:auto}
.vergleich{width:100%;border-collapse:collapse;font-size:14px}
.vergleich th,.vergleich td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--rule);vertical-align:top}
.vergleich th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mid)}
.uebersicht{margin-bottom:var(--s5)}
@media (max-width:640px){.zeit-eintrag,.anstehend li{grid-template-columns:1fr auto}.anstehend li{grid-template-columns:1fr}.zeit-datum{grid-column:1/-1}}

/* =====================================================================
   Klares Design (September 2026)
   Viel Weißfläche, feine Linien, Farbe nur als Akzent — so wie das Menü.
   Die Farben stehen im Block „Version 2 · Farben und Zustände“. Steht bewusst
   am Ende und übersteuert.
   ===================================================================== */
:root{--rund:12px; --rund-klein:8px}

/* Kopfleiste: weiß mit Haarlinie, Marke in Petrol, Wirkton als feine Linie */
.kopf{background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--ink);border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.marke{color:var(--hyp-ink)}
.marke b{color:var(--ink)}
.beta{border-color:var(--rule-strong);color:var(--ink-faint);border-radius:999px;padding:3px 8px}
.menue-knopf{color:var(--ink);border-color:var(--rule-strong);border-radius:var(--rund-klein)}
.menue-knopf:hover,.menue-knopf[aria-expanded="true"]{background:var(--sunk)}
.menue{border-color:var(--rule);border-radius:12px;box-shadow:var(--schwebe)}
.thema-knopf{border-color:var(--rule-strong);color:var(--ink);border-radius:var(--rund-klein)}
.zahl{background:var(--sunk);color:var(--ink-mid)}

/* Weg: ruhige Leiste unter dem Kopf */

/* Typografie: echte Überschriften statt grauer Etiketten */
main{padding-top:var(--s7)}

@media (max-width:640px){main{padding-top:var(--s5)}}
h1{font-size:34px;letter-spacing:-.035em}
h2{font-size:20px;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:700;border-bottom:0;padding-bottom:0;margin:var(--s7) 0 var(--s3)}
h3{font-size:16.5px}
.dach{color:var(--raum-tief);letter-spacing:.12em}
.lede{color:var(--ink-mid)}

/* Eingaben */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],textarea,select{border-radius:var(--rund-klein);border-color:var(--rule-strong);background:var(--surface)}
input[type=date],input[type=time]{font:500 15px/1.5 var(--ui);color:var(--ink);border:1px solid var(--rule-strong);padding:9px 12px}
input:hover,textarea:hover,select:hover{border-color:color-mix(in srgb,var(--hyp) 45%,var(--rule-strong))}

/* Knöpfe: Hauptaktion in Petrol (weiße Schrift, AA), sonst leise */
.knopf{border-radius:var(--rund-klein);border-color:var(--rule-strong);transition:background .15s,border-color .15s,box-shadow .15s}
.knopf:hover:not(:disabled){background:var(--sunk);border-color:color-mix(in srgb,var(--hyp) 40%,var(--rule-strong))}
.knopf.haupt{background:var(--primaer);border-color:var(--primaer);color:var(--auf-primaer)}
.knopf.haupt:hover:not(:disabled){background:var(--primaer-hover);filter:none;box-shadow:0 4px 14px -6px color-mix(in srgb,var(--primaer) 60%,transparent)}
.knopf .ziel{opacity:.8}
.seg{border-radius:var(--rund-klein);border-color:var(--rule-strong)}
.seg button{border-right-color:var(--rule)}
.seg button.an{background:var(--hyp-bg);color:var(--hyp-ink);box-shadow:inset 0 0 0 1.5px var(--hyp);font-weight:700}
.link{color:var(--hyp-ink)}

/* Karten wie das Menü: weiß, feine Linie, runde Ecken, Farbe nur als Kante */
.karte{border-radius:var(--rund);border-color:var(--rule);box-shadow:none;padding:var(--s5) var(--s5)}
.karte:hover{border-color:var(--rule-strong)}
.motiv{border-radius:var(--rund);border:1px solid var(--rule);border-left:3px solid var(--hyp);box-shadow:none;background:linear-gradient(90deg,var(--hyp-bg),transparent 60%)}
.stempel{border-radius:999px;padding:4px 9px;letter-spacing:.07em}
.schlagwort{border-radius:999px;padding:3px 9px}
.hinweiskasten{border-radius:var(--rund-klein);border:1px solid color-mix(in srgb,var(--gap-line) 35%,transparent);border-left:3px solid var(--gap-line)}
.hinweiskasten.alarm{border-color:color-mix(in srgb,var(--alarm-line) 30%,transparent);border-left-color:var(--alarm-line)}
.hinweiskasten.info{border-color:color-mix(in srgb,var(--hyp) 30%,transparent);border-left-color:var(--hyp)}
.leer{border-radius:var(--rund);background:var(--sunk-2)}
details.box{border-radius:0}
.chip{border-radius:999px}

.einsicht{border-radius:var(--rund)}

/* Nächster Schritt: eine ruhige Fläche, damit er sofort ins Auge fällt */
.naechster{background:var(--sunk-2);border:1px solid var(--rule);border-radius:12px;padding:var(--s4) var(--s5) var(--s5);margin:var(--s4) 0 var(--s2)}
.naechster h2{margin-top:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--raum-tief)}

/* Schritte einer Stelle */
.sw-knopf{border-color:var(--rule-strong)}
.sw-fertig .sw-knopf{background:var(--surface)}

/* Rückmeldung und Hinweise */
.rueckmeldung-knopf{border-radius:999px;box-shadow:var(--schwebe);border-color:var(--rule)}
.toast{border-radius:var(--rund-klein)}

/* Admin: Kacheln im selben Stil */
.admin-kachel,.d-karte{border-radius:var(--rund);box-shadow:none}

/* ---------- Ecken: genau drei Stufen, überall gleich ----------
   Flächen (Karten, Kästen, Tafeln, Dialoge)  → var(--rund)        12px
   Bedienelemente (Knöpfe, Felder, Zeilen)    → var(--rund-klein)   8px
   Etiketten (Stempel, Chips, Zähler)         → 999px (Pille)
   Kleine Formen (Balken, Legendenpunkte, Kacheln der Heatmap) behalten ihre Form. */
.karte,.motiv,.einsicht,.leer,.anmelden,dialog,.menue,.naechster,details.station,details.box.richtung,details.box.anrede,pre.wortlaut,.hinweiskasten,.rueckfrage,.rueckfrage-wirkraum,.admin-kachel,.admin-diagramm,.admin-freischalten,.admin-insights,.d-karte,.knopf,.seg,.menue-knopf,.thema-knopf,.ansicht-knopf,.menue-abmelden,nav.haupt a,input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],textarea,select,.toast,.d-tooltip,.d-bzeile{border-radius:var(--rund-klein)}
.stempel,.schlagwort,.chip,.beta,.zahl,.sw-knopf,.rueckmeldung-knopf{border-radius:999px}

/* =====================================================================
   Farben (September 2026, Werte jetzt im Block „Version 2 · Farben und Zustände“):
   Ink, Weiß, Frozen Lake, Yellow Green, Orange als Signal, Gold für die Zusage.
   Regel: Die Palettenfarben tragen Flächen, Kanten und Akzente. Schrift ist
   immer dunkel genug (mindestens 4,5 : 1) — dafür gibt es je Farbe eine
   „-ink“-Stufe.
   ===================================================================== */
/* Die Farb-Variablen dieses Abschnitts stehen jetzt im Block „Version 2 · Farben und Zustände“ (Atelier-Abschnitt). */

/* Kanten in der Signalfarbe, Schrift in der dunklen Stufe */
.karte{border-left-color:var(--ok-line)}
details.station.angefangen{border-left-color:var(--ok-line)}
.punkt.geprueft{background:var(--ok-line);border-color:var(--ok-line)}
.einsicht[data-prio="gruen"]{border-left-color:var(--ok-line)}
/* Marke: Logo in Ink Black, das Überlappungsfeld in Frozen Lake */
.marke{color:var(--ink)}
.marke svg rect[clip-path]{fill:var(--hyp)}
/* Auswahl und aktive Schritte: Frozen Lake als Fläche, Ink als Schrift */
.seg button.an{background:var(--raum-voll);color:var(--raum-auf);box-shadow:none}
.sw-fertig .sw-marke{background:var(--ink);border-color:var(--ink);color:var(--ground)}

.sw-jetzt .sw-knopf{border-color:var(--raum-tief);box-shadow:0 0 0 2px var(--raum-tief)}
.sw-jetzt .sw-marke{background:var(--raum-voll);border-color:var(--raum-tief)}
nav.haupt a[aria-current="page"]{background:var(--raum-tint);color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.dach,.naechster h2{color:var(--raum-tief)}
.motiv{border-left-color:var(--hyp)}
.stempel.hyp{color:var(--hyp-ink)}

/* =====================================================================
   Zwischen den Zeilen: die Karte in Arbeit, daneben der Stapel
   ===================================================================== */

.einsicht{scroll-margin-top:calc(var(--kopf-h,56px) + 120px)}
.weg-eng .einsicht{scroll-margin-top:calc(var(--kopf-h,56px) + 64px)}

/* =====================================================================
   Stellenseite: vier Reiter statt einer langen Liste
   ===================================================================== */
.reiter{display:flex;gap:2px;border-bottom:1px solid var(--rule-strong);margin:var(--s5) 0 var(--s5);overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter-knopf{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:none;font:inherit;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:10px 16px 9px;color:var(--ink-mid);cursor:pointer;border-radius:var(--rund-klein) var(--rund-klein) 0 0}
.reiter-knopf:hover{color:var(--ink);background:var(--sunk-2)}
.reiter-knopf[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.reiter-name{font:700 16px/1.2 var(--ui)}
.reiter-stand{font:600 12px/1.3 var(--ui);color:var(--ink-faint)}
.reiter-knopf.jetzt .reiter-name::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;background:var(--raum-voll);box-shadow:0 0 0 1.5px var(--raum-tief);vertical-align:2px}
.reiter-raum > h2:first-child,.reiter-raum > :first-child h2:first-child{margin-top:0}
.reiter-leer{border:1px dashed var(--rule-strong);border-radius:var(--rund);padding:var(--s5);margin:0 0 var(--s5);background:var(--surface)}
.reiter-leer p{margin:0 0 var(--s3);max-width:62ch;color:var(--ink-mid)}
.reiter-leer .aktionen{margin:0}
details.klaerung-fertig{margin:0 0 var(--s5)}
details.klaerung-fertig > summary{font-weight:700}
@media (max-width:640px){.reiter{margin-left:calc(-1 * var(--s4));margin-right:calc(-1 * var(--s4));padding:0 var(--s2)}.reiter-knopf{padding:9px 12px 8px}.reiter-name{font-size:15px}}
/* Handy: die Schrittleiste der Stelle nur als Punkte, der aktuelle Schritt mit Namen */
@media (max-width:640px){
  .stellen-weg{gap:6px;margin:var(--s2) 0 var(--s3)}
  .sw-schritt:not(.sw-jetzt) .sw-name,.sw-schritt .sw-text{display:none}
  .sw-schritt:not(.sw-jetzt) .sw-knopf{padding:4px}
}

/* =====================================================================
   Bewerbung gestalten — Editor links, A4-Vorschau rechts
   ===================================================================== */
.bw-kopf{max-width:74ch;margin-bottom:var(--s4)}
.bw-modus{display:none}
.bw-raster{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:var(--s6);align-items:start}
.bw-panel{display:flex;flex-direction:column;gap:var(--s2);position:sticky;top:calc(var(--kopf-h,56px) + 118px);max-height:calc(100vh - var(--kopf-h,56px) - 134px);overflow:auto;padding:2px 6px 2px 2px;scrollbar-width:thin}
.bw-teil{background:var(--surface);border:1px solid var(--rule);border-radius:var(--rund)}
.bw-teil > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:12px 16px;border-radius:var(--rund)}
.bw-teil > summary::-webkit-details-marker{display:none}
.bw-teil > summary::after{content:"";position:absolute}
.bw-teil[open] > summary{border-bottom:1px solid var(--rule);border-radius:var(--rund) var(--rund) 0 0}
.bw-teil-name{font:700 15px/1.3 var(--ui);color:var(--ink)}
.bw-teil-unter{font:600 12.5px/1.3 var(--ui);color:var(--ink-faint)}
.bw-teil-inhalt{padding:var(--s3) 16px var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.bw-teil-inhalt .feld{margin:0}
.bw-teil-inhalt textarea{width:100%}
.bw-teil-inhalt .leise{margin:0;font-size:13.5px}
.bw-vorlagen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.bw-vorlage{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;gap:0 10px;align-items:center;text-align:left;font:inherit;padding:8px;border:1.5px solid var(--rule-strong);border-radius:var(--rund-klein);background:var(--surface);cursor:pointer;color:var(--ink)}
.bw-vorlage:hover{border-color:var(--ink-faint)}
.bw-vorlage.an{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.bw-vorlage-bild{grid-row:1 / span 3;width:44px;height:62px;border-radius:3px;box-shadow:0 0 0 1px var(--rule-strong)}
.bw-vorlage-name{font:700 14px/1.2 var(--ui);align-self:end}
.bw-vorlage-text{font:600 11.5px/1.3 var(--ui);color:var(--ink-faint);align-self:start}
.bw-farben{display:flex;flex-wrap:wrap;gap:10px}
.bw-farbe{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);background:var(--f);box-shadow:0 0 0 1px var(--rule-strong);cursor:pointer;padding:0}
.bw-farbe.an{box-shadow:0 0 0 2px var(--ink)}
.bw-haken{display:flex;align-items:center;gap:var(--s2);margin:0;cursor:pointer;font-size:15px}
.bw-haken input{width:auto;margin:0;flex:none}
.bw-abschnitte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bw-abschnitt-zeile{border:1px solid var(--rule);border-radius:var(--rund-klein);background:var(--surface)}
.bw-abschnitt-zeile.aus .bw-abschnitt-name{color:var(--ink-faint);text-decoration:line-through}
.bw-abschnitt-kopf{display:flex;align-items:center;gap:6px;padding:6px 8px}
.bw-abschnitt-kopf input{width:auto;margin:0 4px 0 2px;flex:none}
.bw-abschnitt-name{flex:1;text-align:left;font:700 14.5px var(--ui);color:var(--ink);background:none;border:0;padding:6px 4px;cursor:pointer}
.bw-abschnitt-name::after{content:" ▾";color:var(--ink-faint);font-weight:600}
.bw-abschnitt-name[aria-expanded="true"]::after{content:" ▴"}
.bw-pfeil{width:30px;height:30px;border-radius:var(--rund-klein);border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);cursor:pointer;font:700 14px/1 var(--ui);padding:0}
.bw-pfeil:disabled{opacity:.35;cursor:default}
.bw-abschnitt-editor{padding:0 10px 10px;display:flex;flex-direction:column;gap:var(--s2)}
.bw-station{display:flex;flex-direction:column;gap:4px;padding:6px 0;border-top:1px solid var(--rule)}
.bw-station:first-child{border-top:0}
.bw-station textarea{margin-left:24px;width:calc(100% - 24px)}
.bw-drucken{position:sticky;bottom:0;background:var(--ground);padding:var(--s3) 0 var(--s2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.bw-drucken .leise{flex-basis:100%;margin:0;font-size:12.5px}
.bw-vorschau{min-width:0;background:var(--sunk);border-radius:var(--rund);padding:var(--s4) 4px}
@media screen and (max-width:980px){
  .bw-raster{grid-template-columns:minmax(0,1fr)}
  .bw-modus{display:inline-flex;margin-top:var(--s3)}
  .bw-panel{position:static;max-height:none;overflow:visible;padding:0}
  .bw-editor[data-modus="bearbeiten"] .bw-vorschau{display:none}
  .bw-editor[data-modus="vorschau"] .bw-panel{display:none}
}

/* ---------- Die Seiten ---------- */
.bw-seiten{--bw-akzent:#0B6A8E;--bw-text:#1a2426;--bw-leise:#434e50;--bw-zoom:.75;--bw-schrift:"Quicksand",ui-rounded,system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;gap:24px;color:var(--bw-text);zoom:var(--bw-zoom)}
.bw-schrift-sans{--bw-schrift:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
.bw-schrift-serif{--bw-schrift:Georgia,"Times New Roman",Times,serif}
.blatt{box-sizing:border-box;width:210mm;min-height:297mm;padding:18mm 18mm 16mm;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.10),0 18px 40px -20px rgba(0,0,0,.35);
  font:10pt/1.5 var(--bw-schrift);color:var(--bw-text);print-color-adjust:exact;-webkit-print-color-adjust:exact;text-align:left}
.blatt p{margin:0}
.blatt h2,.blatt h3{text-transform:none;letter-spacing:normal;border:0;padding:0;margin:0;font-family:inherit}
.bw-klein{font-size:7.5pt;letter-spacing:.16em;text-transform:uppercase;color:var(--bw-leise);font-weight:700}
.bw-foto{width:30mm;height:37mm;object-fit:cover;border-radius:2mm;display:block;flex:none}
.bw-foto-gross{width:46mm;height:57mm;margin:8mm 0 0}

/* Deckblatt */
.bw-deckblatt{display:flex;flex-direction:column;justify-content:center;gap:2mm;padding-left:24mm;border-left:5mm solid var(--bw-flaeche,var(--bw-akzent))}
.bw-deck-titel{font-size:28pt !important;line-height:1.12;color:var(--bw-akzent);font-weight:700;margin-top:2mm !important}
.bw-deck-firma{font-size:14pt}
.bw-deck-name{font-size:15pt;font-weight:700;margin-top:12mm !important}
.bw-deck-kontakt{color:var(--bw-text);font-size:10.5pt}
.bw-deck-kicker{font-size:11pt;font-weight:600;color:var(--bw-text);margin-bottom:1mm !important}
.bw-deck-inhalt{margin-top:18mm !important;border-top:1pt solid var(--bw-flaeche,var(--bw-akzent));padding-top:5mm;display:grid;gap:1.5mm;max-width:110mm}

/* Anschreiben: derselbe Kopf wie der Lebenslauf */
.bw-briefkopf{border-bottom:1.2pt solid var(--bw-flaeche,var(--bw-akzent));padding-bottom:4mm;margin-bottom:12mm}
.bw-abs-name{font-size:17pt;font-weight:700;color:var(--bw-akzent);line-height:1.15}
.bw-titelzeile{font-size:9.5pt;color:var(--bw-text);font-weight:600;margin-top:1mm !important}
.bw-abs-kontakt{font-size:8.5pt;color:var(--bw-leise);margin-top:2mm !important}
.bw-empfaenger{min-height:28mm;margin-bottom:8mm}
.bw-datum{text-align:right;margin-bottom:8mm !important}
.bw-betreff{font-weight:700;margin-bottom:7mm !important;color:var(--bw-akzent);font-size:11pt}
.bw-absatz{margin-bottom:3.5mm !important;white-space:pre-wrap}
.bw-leer{color:var(--bw-leise);font-style:italic}
.bw-gruss{margin-top:6mm !important}
.bw-unterschrift{margin-top:12mm !important;font-weight:700}
.bw-anlagen{margin-top:10mm;font-size:9pt}

/* Lebenslauf: gemeinsame Bausteine */
.bw-lv-kopf{display:flex;align-items:center;gap:6mm;margin-bottom:7mm}
.bw-name{font-size:22pt !important;line-height:1.1;color:var(--bw-akzent);font-weight:700}
.bw-kontakt{font-size:8.8pt;color:var(--bw-leise);display:flex;flex-wrap:wrap;gap:.5mm 4mm;margin-top:2.5mm}
.bw-spalten{display:block}
.bw-abschnitt{margin-bottom:6mm;break-inside:auto}
.bw-abschnitt-titel{font-size:8.5pt !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--bw-akzent);margin:0 0 3mm !important;font-weight:700}
.bw-kurzprofil{font-size:10.5pt;line-height:1.55}
.bw-eintrag{display:grid;grid-template-columns:27mm 1fr;gap:0 4mm;margin-bottom:3.5mm;break-inside:avoid}
.bw-zeit{color:var(--bw-leise);font-size:8.8pt;padding-top:.4mm;font-variant-numeric:tabular-nums}
.bw-rolle{font-weight:700;font-size:10.5pt}
.bw-firma{color:var(--bw-leise);font-size:9.5pt}
.bw-punkte{margin:1mm 0 0;padding-left:4mm}
.bw-punkte li{margin:.5mm 0}
.bw-punkte li::marker{color:var(--bw-flaeche,var(--bw-akzent))}
.bw-liste{margin-bottom:1.2mm !important}
.bw-liste .bw-zeit{margin-right:1.5mm}
.bw-chips{display:flex;flex-wrap:wrap;gap:1.5mm}
.bw-chips span{font-size:8.8pt;padding:.8mm 2.4mm;border-radius:999px;border:.6pt solid color-mix(in srgb,var(--bw-flaeche,var(--bw-akzent)) 55%,#fff);color:var(--bw-text)}
.bw-sprache{display:flex;justify-content:space-between;gap:3mm;margin-bottom:1mm !important}
.bw-sprache-niveau{color:var(--bw-leise);font-size:9pt}
.bw-lv-fuss{margin-top:8mm !important;color:var(--bw-leise);font-size:8.5pt}
.bw-seite .bw-eintrag{grid-template-columns:1fr}

/* Vorlage Klar: Seitenspalte in Akzentfarbe, Kopf darin */
.bw-klar .bw-lebenslauf{padding:0}
.bw-klar .bw-spalten{display:grid;grid-template-columns:62mm 1fr;min-height:297mm}
.bw-klar .bw-seite{background:color-mix(in srgb,var(--bw-flaeche,var(--bw-akzent)) 12%,#fff);padding:16mm 7mm 14mm 11mm}
.bw-klar .bw-haupt{padding:16mm 16mm 14mm 9mm}
.bw-klar .bw-lv-kopf{flex-direction:column;align-items:flex-start;gap:4mm;margin-bottom:8mm}
.bw-klar .bw-name{font-size:18pt !important}
.bw-klar .bw-kontakt{flex-direction:column;gap:.8mm}
.bw-klar .bw-abschnitt-titel{border-bottom:.6pt solid color-mix(in srgb,var(--bw-flaeche,var(--bw-akzent)) 45%,#fff);padding-bottom:1.2mm !important}
.bw-klar .bw-lv-fuss{padding:0 16mm 10mm 71mm;margin-top:-18mm !important}

/* Vorlage Modern: Kopfband, rechte Spalte */
.bw-modern .bw-lebenslauf{padding:0 0 14mm}
.bw-modern .bw-lv-kopf{background:var(--bw-akzent);color:#fff;padding:13mm 18mm 11mm;margin-bottom:9mm;flex-direction:row-reverse;justify-content:space-between}
.bw-modern .bw-name{color:#fff}
.bw-modern .bw-titelzeile,.bw-modern .bw-lv-kopf .bw-kontakt{color:rgba(255,255,255,.86)}
.bw-modern .bw-foto{width:28mm;height:28mm;border-radius:50%;border:1.2mm solid rgba(255,255,255,.35)}
.bw-modern .bw-spalten{display:grid;grid-template-columns:1fr 54mm;gap:0 8mm;padding:0 18mm}
.bw-modern .bw-seite{border-left:.6pt solid #dfe3e4;padding-left:7mm}
.bw-modern .bw-abschnitt-titel::before{content:"";display:inline-block;width:5mm;height:1.3mm;border-radius:1mm;background:var(--bw-flaeche,var(--bw-akzent));margin-right:2mm;vertical-align:.4mm}
.bw-modern .bw-lv-fuss{padding:0 18mm}

/* Vorlage Klassisch: eine Spalte, Kopf mittig, feine Linien */
.bw-klassisch .bw-lv-kopf{flex-direction:column;text-align:center;gap:3mm;border-bottom:.8pt solid var(--bw-flaeche,var(--bw-akzent));padding-bottom:5mm}
.bw-klassisch .bw-kopf-text{display:flex;flex-direction:column;align-items:center}
.bw-klassisch .bw-kontakt{justify-content:center}
.bw-klassisch .bw-foto{width:26mm;height:32mm}
.bw-klassisch .bw-abschnitt-titel{display:flex;align-items:center;gap:3mm;letter-spacing:.2em !important}
.bw-klassisch .bw-abschnitt-titel::after{content:"";flex:1;height:.5pt;background:color-mix(in srgb,var(--bw-flaeche,var(--bw-akzent)) 50%,#fff)}
.bw-klassisch .bw-briefkopf{text-align:center}

/* Vorlage Linie: Zeitleiste mit Punkten */
.bw-linie .bw-lv-kopf{border-left:2mm solid var(--bw-flaeche,var(--bw-akzent));padding-left:5mm}
.bw-linie .bw-name{font-size:26pt !important}
.bw-linie .bw-a-erfahrung,.bw-linie .bw-a-ausbildung,.bw-linie .bw-a-engagement,.bw-linie .bw-a-weiterbildung{border-left:.8pt solid color-mix(in srgb,var(--bw-flaeche,var(--bw-akzent)) 55%,#fff);margin-left:1.2mm;padding-left:6mm}
.bw-linie .bw-eintrag{position:relative}
.bw-linie .bw-a-erfahrung .bw-eintrag::before,.bw-linie .bw-a-ausbildung .bw-eintrag::before,.bw-linie .bw-a-engagement .bw-eintrag::before,.bw-linie .bw-a-weiterbildung .bw-eintrag::before{content:"";position:absolute;left:-7.6mm;top:1.2mm;width:2.6mm;height:2.6mm;border-radius:50%;background:#fff;border:.8mm solid var(--bw-flaeche,var(--bw-akzent));box-sizing:border-box}
.bw-linie .bw-abschnitt-titel{margin-left:-6mm !important}
.bw-linie .bw-a-profil .bw-abschnitt-titel,.bw-linie .bw-a-kenntnisse .bw-abschnitt-titel,.bw-linie .bw-a-sprachen .bw-abschnitt-titel,.bw-linie .bw-a-interessen .bw-abschnitt-titel{margin-left:0 !important}
.bw-linie .bw-briefkopf{border-left:2mm solid var(--bw-flaeche,var(--bw-akzent));border-bottom:0;padding-left:5mm}

@media print{
  .bw-raster{display:block}
  .bw-vorschau{background:none;padding:0;display:block !important}
  .bw-seiten{zoom:1 !important;gap:0}
  .blatt{box-shadow:none !important;break-after:page;margin:0;min-height:296.5mm;box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .bw-klar .bw-spalten{min-height:296.5mm}
  .blatt:last-child{break-after:auto}
}
/* Anlagen: Zeugnis-Seiten als ganze Blätter */
.bw-anlage{padding:0;display:flex;align-items:center;justify-content:center}
.bw-anlage-laedt{flex-direction:column;gap:3mm;padding:18mm}
.bw-anlage-bild{display:block;width:100%;height:297mm;object-fit:contain}
.bw-dokumente{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bw-dok{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--rund-klein);background:var(--surface)}
.bw-dok input{width:auto;margin:0;flex:none}
.bw-dok-name{flex:1;min-width:0;font-size:14.5px;line-height:1.35}
.bw-dok-name .leise{font-size:12.5px}
.bw-dok-ansehen{font:600 13px var(--ui);color:var(--hyp-ink);background:none;border:0;padding:4px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media print{.bw-anlage{min-height:296.5mm}.bw-anlage-bild{height:296.5mm}.bw-anlage-laedt{display:none}}

/* Zeugnisse im Profil */
.dokumente{margin:var(--s5) 0}
.dokumente h3{margin:0 0 var(--s2)}
.dok-liste{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.dok-zeile{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--rund);background:var(--surface)}
.dok-symbol{width:44px;height:52px;border-radius:6px;border:1.5px solid var(--rule-strong);display:grid;place-items:center;font:700 10px/1 var(--ui);letter-spacing:.06em;color:var(--hyp-ink);background:var(--hyp-bg)}
.dok-mitte{display:flex;flex-direction:column;gap:4px;min-width:0}
.dok-mitte input{font-weight:700;padding:4px 8px}
.dok-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.dok-meta select{width:auto;padding:3px 8px;font-size:13.5px}
.dok-meta .leise{font-size:13px}
.dok-tun{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
@media (max-width:560px){.dok-zeile{grid-template-columns:36px minmax(0,1fr)}.dok-symbol{width:36px;height:44px}.dok-tun{grid-column:1 / -1;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--s3)}}
/* Die Ansicht */
dialog.dok-ansicht{max-width:980px;width:calc(100% - 24px);height:calc(100vh - 48px);padding:0;display:flex;flex-direction:column;overflow:hidden}
dialog.dok-ansicht:not([open]){display:none}
dialog.dok-ansicht::backdrop{background:rgba(0,16,17,.55)}
.dok-ansicht-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:12px 16px;border-bottom:1px solid var(--rule)}
.dok-ansicht-kopf .aktionen{margin:0}
.dok-ansicht-titel{font:700 16px/1.3 var(--ui);margin:0}
.dok-ansicht-kopf .leise{margin:0;font-size:13px}
.dok-ansicht-seiten{flex:1;overflow:auto;background:var(--sunk);padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:12px}
.dok-seite{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.treffer-fakten .frisch{color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:1px 8px;font-weight:700}
.bw-vorlage-ats{grid-column:2;justify-self:start;margin-top:3px;font:700 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:3px 7px}
.bw-teil-unter.bw-teil-warn{color:var(--gap)}
.bw-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bw-check li{position:relative;padding-left:26px;font-size:14px;line-height:1.45}
.bw-check li::before{position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--ui)}
.bw-check-ok::before{content:"✓";background:var(--ok-line);color:#001011}
.bw-check-warn::before{content:"!";background:var(--gap-line);color:#001011}
.bw-check-info::before{content:"i";background:var(--hyp-bg);color:var(--hyp-ink)}
/* Mehr Farben: die große Palette auf der Kraft von Wirkraum */
.bw-farben{align-items:center}
.bw-farben-mehr{font:700 13px var(--ui);color:var(--ink);background:var(--surface);border:1px dashed var(--rule-strong);border-radius:999px;padding:6px 12px;cursor:pointer}
.bw-farben-mehr::before{content:"+ ";color:var(--ink-faint)}
.bw-farben-mehr[aria-expanded="true"]::before{content:"– "}
.bw-mehr-farben{margin-top:var(--s3);padding:var(--s3);border:1px solid var(--rule);border-radius:var(--rund-klein);background:var(--sunk-2);display:flex;flex-direction:column;gap:6px}
.bw-palette-titel{font:700 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.bw-palette{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.bw-farbe.klein{width:100%;height:auto;aspect-ratio:1;max-width:26px;border-width:1.5px}
.bw-eigene-farbe{display:flex;align-items:center;gap:var(--s2);margin-top:6px}
.bw-eigene-farbe input[type=color]{width:40px;height:32px;padding:0;border:1px solid var(--rule-strong);border-radius:var(--rund-klein);background:none;flex:none;cursor:pointer}
.bw-eigene-farbe .leise{font-size:12.5px;line-height:1.35}

/* Bewerbung: Leiste mit Sprache und Aufbereiten */
.bw-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:0 0 var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:var(--rund);background:var(--surface)}
.bw-leiste-sprache{display:flex;align-items:center;gap:var(--s2)}
.bw-leiste-sprache .feld-name{margin:0}
.bw-leiste-stand{font:600 13px var(--ui);color:var(--ok)}
.bw-leiste-stand.veraltet{color:var(--gap)}
.bw-leiste-ki{margin-left:auto}
.bw-leiste-aus:empty{display:none}
.bw-leiste-aus{margin:0 0 var(--s3)}
@media (max-width:640px){.bw-leiste-ki{margin-left:0}}
.bw-sprachwahl{display:flex;flex-direction:column;gap:6px;margin-top:var(--s2)}
.bw-sprachhaken{display:flex;flex-wrap:wrap;gap:4px 16px}
/* Stationen im Editor */
.bw-station.aus .bw-station-name{opacity:.55}
.bw-station-kopf{display:flex;align-items:flex-start;gap:8px}
.bw-station-kopf input{width:auto;margin:3px 0 0;flex:none}
.bw-station-name{font-size:14.5px;line-height:1.35}
.bw-station-name .leise{font-size:12.5px}
.bw-station-art{margin-left:24px;align-self:flex-start}
.bw-doppelte{margin-top:var(--s2);border-top:1px solid var(--rule);padding-top:var(--s2)}
.bw-doppelte > summary{cursor:pointer;font:600 13.5px var(--ui);color:var(--ink-mid)}
/* Auf dem Papier: Erfolge und einzeilige Stationen */
.bw-erfolge{margin:0;padding-left:4.5mm;display:grid;gap:1.4mm}
.bw-erfolge li{font-weight:600}
.bw-erfolge li::marker{color:var(--bw-flaeche,var(--bw-akzent))}
.bw-eintrag.bw-knapp{margin-bottom:1.6mm}
.bw-firma-inline{color:var(--bw-leise);font-weight:400}
.bw-a4-mass{position:absolute;visibility:hidden;width:1px;height:297mm;pointer-events:none}
@media print{.bw-a4-mass{display:none}}
.bw-hex{width:110px !important;font:600 14px var(--code,monospace);padding:6px 8px}
.bw-palette{grid-template-columns:repeat(14,minmax(0,1fr))}
@media (max-width:420px){.bw-palette{grid-template-columns:repeat(7,minmax(0,1fr))}}
/* Warteliste auf der Anmeldeseite */
.anmelden.warteliste{margin-top:var(--s5);margin-bottom:12vh}
.anmelden.warteliste h2{margin:0 0 var(--s2);font-size:22px}
.warteliste-ok{align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--ink-mid);margin:var(--s2) 0}
.warteliste-ok input{margin-top:3px}
.falle{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
/* Profil: Freunde einladen */
.empfehlen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0 0 var(--s5);padding:10px 14px;border:1px dashed var(--rule-strong);border-radius:var(--rund);max-width:74ch}
.empfehlen .leise{font-size:14px}

.bw-eigene-farbe{flex-wrap:wrap}
.bw-eigene-farbe .leise{flex-basis:100%}
.bw-logo-farben{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%}
.bw-logo-farben:empty{display:none}
.bw-logo-farben .bw-farbe.klein{width:28px;max-width:28px}

/* =====================================================================
   Einstieg für neue Testende
   ===================================================================== */
.willkommen-kopf{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s3)}

.willkommen-kopf h1{margin:0}
.willkommen-schritte{margin:var(--s4) 0 var(--s4);padding:0;list-style:none;counter-reset:w;display:grid;gap:var(--s3)}
.willkommen-schritte li{counter-increment:w;display:grid;grid-template-columns:34px 1fr;gap:2px var(--s3);align-items:baseline}
.willkommen-schritte li::before{content:counter(w);grid-row:1 / span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--hyp);color:#001011;font:700 14px/1 var(--ui);align-self:start}
.willkommen-schritte b{font:700 16.5px/1.3 var(--ui)}
.willkommen-schritte span{color:var(--ink-mid);font-size:15.5px;line-height:1.5}
.willkommen-ok{display:flex;align-items:flex-start;gap:var(--s2);margin:var(--s4) 0 var(--s2);font-size:15.5px}
.willkommen-ok input{width:auto;margin-top:4px}
.einstieg{margin:var(--s2) 0 var(--s5);padding:var(--s4) var(--s5);border:1.5px solid var(--hyp);border-radius:var(--rund);background:var(--surface);max-width:74ch;box-shadow:var(--lift)}
.einstieg-kopf{display:flex;justify-content:space-between;align-items:baseline}
.einstieg-kopf .dach{margin:0}
.einstieg-stand{font:700 13px var(--ui);color:var(--ink-faint)}
.einstieg-titel{font:700 21px/1.3 var(--ui);margin:var(--s2) 0 var(--s1);text-transform:none;letter-spacing:normal;border:0;padding:0}
.einstieg-warum{margin:0 0 var(--s3);color:var(--ink-mid);font-size:15.5px}
.einstieg-liste{list-style:none;margin:var(--s4) 0 var(--s3);padding:0;display:grid;gap:4px}
.einstieg-schritt{display:grid;grid-template-columns:22px 1fr auto;gap:var(--s2);align-items:center;font-size:14.5px}
.einstieg-marke{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--rule-strong);display:grid;place-items:center;font:700 11px/1 var(--ui)}
.einstieg-schritt.fertig .einstieg-marke{background:var(--ok-line);border-color:var(--ok-line);color:#001011}
.einstieg-schritt.jetzt .einstieg-marke{border-color:var(--hyp);background:var(--hyp-bg)}
.einstieg-schritt.fertig .einstieg-name{color:var(--ink-faint)}
.einstieg-schritt.jetzt .einstieg-name{font-weight:700}
.einstieg-name{background:none;border:0;padding:2px 0;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
.einstieg-name:hover{text-decoration:underline;text-underline-offset:3px}
.einstieg-zeit{font-size:12.5px;color:var(--ink-faint)}
.kurz-gefragt{max-width:74ch;margin:0 0 var(--s5);padding:var(--s3) var(--s4);border:1px dashed var(--rule-strong);border-radius:var(--rund);background:var(--sunk-2)}
.kurz-gefragt .dach{margin:0 0 4px}
.kurz-frage{margin:0 0 var(--s2);font-weight:600}
.kurz-gefragt .aktionen{margin:0}
.kurz-gefragt .knopf.an{background:var(--raum-voll);border-color:var(--raum-voll);color:var(--raum-auf)}
.kurz-unten{margin-top:var(--s2) !important}
.kurz-unten input{flex:1;min-width:200px}
.kurz-danke{margin:0;font-weight:600}
/* Menü: Unterzeilen, damit klar ist, was sich wo verbirgt */
.menue-text{display:flex;flex-direction:column;gap:1px;line-height:1.25}
.menue-text small{font:500 12.5px/1.3 var(--ui);color:var(--ink-faint)}
nav.haupt a[aria-current="page"] .menue-text small{color:var(--ink-mid)}
.menue-einladen{border-top:0;margin-top:0;border-radius:6px}
/* Kopf: Freunde einladen neben dem Menü */
.einladen-knopf{margin-left:auto;background:transparent;border:1px solid var(--rule-strong);border-radius:var(--rund-klein);padding:7px 12px;font:600 14px/1 var(--ui);color:var(--ink);cursor:pointer}
.einladen-knopf:hover{background:var(--sunk)}
.einladen-knopf + .menue-knopf{margin-left:var(--s2)}
.einladen-knopf .kurz{display:none}
@media (max-width:520px){.einladen-knopf{padding:7px 10px;font-size:13.5px}.einladen-knopf .lang{display:none}.einladen-knopf .kurz{display:inline}}

/* Profil: „Das kannst Du ergänzen“ trennt Ergebnis von Eingabe */
.ergaenzen-kopf{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s4)}
.ergaenzen-kopf .dach{margin:0 0 var(--s1)}
.ergaenzen-kopf .leise{margin:0}
.willkommen-anlass{margin-top:var(--s3);max-width:62ch}
.einstieg-anlass{margin:var(--s3) 0 var(--s2)}

/* Startseite: Fakten, Beispielergebnis, Vertrauen */

.start-liste{margin:0;padding-left:1.1em;color:var(--ink-mid);line-height:1.6}
.start-liste li{margin:0 0 var(--s2)}

@media (max-width:560px){.start .knopf,form.anmelden .knopf{min-height:44px}}

/* Weitergabe-Link (?warteliste) und Zugangs-Mail (?anmelden): Formular hervorgehoben */
.anmelden.hervor{border-color:var(--hyp);box-shadow:0 0 0 3px color-mix(in oklab,var(--hyp) 35%,transparent)}

/* Einwilligung: Datenschutz kurz, großer Haken, Fehler am Kästchen */
.willkommen-daten{border:1px solid var(--rule);border-radius:var(--rund);padding:var(--s4) var(--s5);margin:var(--s4) 0}
.willkommen-daten .dach{margin:0 0 var(--s2)}
.willkommen-daten .start-liste{margin:0 0 var(--s2)}
.willkommen-ok{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border:1.5px solid var(--rule-strong);border-radius:var(--rund);cursor:pointer;max-width:62ch}
.willkommen-ok input{width:22px;height:22px;flex:none;margin:1px 0 0}
.willkommen-ok.fehlt{border-color:#C2410C;background:color-mix(in oklab,#FF5714 7%,transparent)}
.willkommen-fehler{color:#9A3412;font-weight:600;margin:var(--s2) 0 0}
/* Standortfrage */
.standort-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:var(--s4) 0 var(--s5);max-width:720px}
.standort-karte{display:flex;flex-direction:column;gap:4px;text-align:left;padding:var(--s4);border:1.5px solid var(--rule-strong);border-radius:var(--rund);background:var(--surface);cursor:pointer;font:inherit;color:var(--ink)}
.standort-karte span{color:var(--ink-mid);font-size:14.5px}
.standort-karte[aria-pressed="true"]{border-color:var(--hyp-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--hyp) 40%,transparent)}
.standort-h2{margin-top:var(--s5)}
@media (max-width:560px){.standort-wahl{grid-template-columns:minmax(0,1fr)}}
/* Einstieg außerhalb des Profils: schmale Zeile statt Wegleiste */
.einstieg-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) 0;margin:0 0 var(--s4);border-bottom:1px solid var(--rule)}
.einstieg-zeile .dach{margin:0}
/* Wegleiste: am Desktop in einer Zeile */

.standort .seg{margin:var(--s2) 0 var(--s5)}
/* Lange Arbeit: Zwischenschritte und „Du kannst weiterarbeiten“ */
.arbeitet-lang{display:flex;flex-direction:column;gap:2px;margin:var(--s2) 0 0;padding:var(--s3) var(--s4);border-left:3px solid var(--hyp);background:var(--sunk);border-radius:0 var(--rund-klein) var(--rund-klein) 0}
.arbeitet-schritt{font-weight:600;color:var(--ink)}
.arbeitet-schritt::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hyp);margin-right:8px;animation:puls 1.4s ease-in-out infinite}
.arbeitet-weiter{font-size:13.5px;color:var(--ink-mid)}
@keyframes puls{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){:root:not([data-bewegung="voll"]) .arbeitet-schritt::before{animation:none}}:root[data-bewegung="ruhig"] .arbeitet-schritt::before{animation:none}
.wirk-saetze{margin:0 0 var(--s3);padding-left:1.1em;line-height:1.6}
.wirk-saetze li{margin:0 0 var(--s2)}

/* Rückmeldung: in der Kopfzeile statt schwebend (verdeckt nichts mehr) */
.rueckmeldung-kopf{margin-left:auto}
.rueckmeldung-kopf + .einladen-knopf{margin-left:var(--s2)}
@media (max-width:520px){.rueckmeldung-kopf{display:none}.rueckmeldung-kopf + .einladen-knopf{margin-left:auto}}
/* Zwischen den Zeilen: ein Satz als Stand, Karte x von y, Vorschläge zugeklappt */
.zeilen-stand{font:600 14.5px/1.4 var(--ui);color:var(--ink-mid)}
.einsicht-stand{font:600 13.5px/1 var(--ui);color:var(--ink-mid);align-self:center}
.zeilen-neu{margin:var(--s3) 0 0}
.zeilen-neu-kasten{margin:var(--s5) 0 0;padding:var(--s4);border:1px solid var(--rule-strong);border-radius:var(--rund);background:var(--sunk-2)}
.zeilen-neu-titel{font-weight:700;margin:0}
.zeilen-neu-kasten .aktionen{margin-top:var(--s3)}
.feld.kommentar textarea{min-height:4.5em;resize:vertical}
.vorschlaege-klapp{margin-top:var(--s4)}
.vorschlaege-klapp > summary{font-weight:600}

/* Suchkorridore: „Passt“ ausgewählt in Frozen Lake, wie die Positionen */
.korridor-urteil .resonanz .knopf.an{background:var(--raum-voll);border-color:var(--raum-tief);color:var(--raum-auf)}
/* Stellensuche */
.such-los{margin:var(--s3) 0 var(--s4)}
.treffer-warum{margin:var(--s2) 0 0;font-size:14px;color:var(--ink-mid)}

/* Stellenseite: Urteil oben, Status unter „Mehr“, Handy kompakt */
.stelle-urteil{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:var(--s2) 0 var(--s3);font-size:16.5px;color:var(--ink)}
.stelle-steuer{align-items:center}
.stelle-mehr > summary{cursor:pointer;font:600 13.5px/1 var(--ui);color:var(--ink-mid);padding:8px 4px}
.stelle-mehr[open] select{margin-top:var(--s2)}

.reiter-wahl{display:none;width:100%;margin:var(--s4) 0 var(--s2);font:600 15px/1.2 var(--ui);padding:10px 12px;border:1.5px solid var(--rule-strong);border-radius:var(--rund-klein);background:var(--surface);color:var(--ink)}
@media (max-width:560px){
  .stellen-weg{display:none}

  .reiter{display:none}
  .reiter-wahl{display:block}
}
.bew-gestalten{border:1.5px solid var(--hyp);border-radius:var(--rund);padding:var(--s4) var(--s5);margin:0 0 var(--s5);background:color-mix(in oklab,var(--hyp) 8%,transparent)}
.bew-gestalten p{margin:0 0 var(--s3)}
/* Druckhilfe: so sieht der Dialog richtig eingestellt aus */
.druck-hilfe{border:1px solid var(--rule-strong);border-radius:var(--rund);padding:var(--s3) var(--s4);margin-top:var(--s3);background:var(--surface);max-width:420px}
.druck-hilfe-titel{font:600 12px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--s2)}
.druck-hilfe-zeile{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 0;border-bottom:1px solid var(--rule)}
.druck-hilfe-zeile b{background:color-mix(in oklab,var(--hyp) 25%,transparent);padding:1px 8px;border-radius:6px}
.druck-hilfe .leise{margin:var(--s2) 0 0;font-size:13px}

/* Wegleiste auf dem Handy: aktueller Schritt ausgeschrieben */

/* Beim Scrollen schmal: eine Zeile, nur Kreise und der aktuelle Schritt */

/* Kopfzeile auf schmalen Handys: alles passt in eine Zeile */
@media (max-width:480px){
  .kopf-innen{gap:var(--s2);padding-left:var(--s4);padding-right:var(--s4)}
  .marke .beta{display:none}
  .einladen-knopf{padding:6px 9px}
  .menue-knopf{flex:none}
}

/* ---------- Profil: Belege oben, darunter Kacheln ---------- */
.belege-box{border:1px solid var(--rule);border-radius:6px;background:var(--surface);padding:var(--s5)}
.belege-box > h2:first-child{margin-top:0}
.belege-box .potenzial{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.belege-box .potenzial > h3:first-child{margin-top:0}
.belege-box .belege-neu{margin-top:var(--s4);justify-content:flex-end}
.kachel-gruppe{max-width:none;margin-top:var(--s6)}
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.kachel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);text-align:left;font:inherit;color:inherit;
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:var(--s4);cursor:pointer;min-height:120px;
  transition:border-color .15s,box-shadow .15s}
.kachel:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.kachel-kopf{display:flex;flex-direction:column;gap:2px}
.kachel-dach{font:600 11px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--raum-tief)}
.kachel-titel{font:600 17px/1.3 var(--ui)}
.kachel-stand{font-size:14.5px;color:var(--ink-mid);line-height:1.45}

.kachel-los{margin-top:auto;font:600 14px/1.3 var(--ui);color:var(--raum-tief)}
.kachel.mit-zeichen{display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:var(--s4);row-gap:var(--s2)}

.kachel-bereiche{max-width:none}
.kachel-bereich{max-width:none;margin-top:var(--s4);border:1px solid var(--rule);border-radius:6px;padding:var(--s4) var(--s5);background:var(--surface)}
.kachel-bereich > .spalte{max-width:74ch;margin:0}
.kachel-zu{display:flex;justify-content:flex-end;margin-bottom:calc(-1 * var(--s4))}
@media (min-width:900px){.kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}.kacheln.klein{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
@media (max-width:480px){.kacheln{grid-template-columns:1fr}.kachel{min-height:0}.belege-box{padding:var(--s4)}.kachel-bereich{padding:var(--s3) var(--s4)}
  .kachel.mit-zeichen{grid-template-columns:56px minmax(0,1fr)}}
.belege-box{max-width:none}
.belege-box > p,.belege-box .potenzial > p,.belege-box .wirk-saetze{max-width:74ch}
.kachel-bereich > .stationen{margin-top:0;padding-top:0;border-top:0}
.kachel-bereich{scroll-margin-top:170px}
@media (max-width:480px){.kacheln.klein{grid-template-columns:repeat(2,minmax(0,1fr))}.kachel-titel{font-size:16px}.kachel-bereich{scroll-margin-top:150px}}
.admin-modellwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s2) var(--s5);margin-top:var(--s3)}
.admin-modellwahl-zeile{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s1) var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.admin-modellwahl-zeile small{grid-column:1 / -1;font-size:12.5px}
/* Gefunden werden */
.gefunden .karte-kopf{align-items:center}
.gefunden-schutz{margin:var(--s2) 0 var(--s4);padding-left:1.3em;display:grid;gap:var(--s2)}
.gefunden-schutz li{line-height:1.5}
.gefunden-schutz b{display:block}
.gefunden-schutz span{color:var(--ink-mid)}
.gefunden-kurzprofil{display:grid;gap:var(--s2);margin-top:var(--s3)}
.gefunden-zeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.gefunden-beleg{display:grid;gap:var(--s1);padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.gefunden-beleg .link{justify-self:start;font-size:13px}
.gefunden-gespeichert{min-height:1.2em}
.gefunden-zustimmung{margin-top:var(--s5);padding:var(--s4);border:1px solid var(--hyp);border-radius:6px}
@media (max-width:480px){.gefunden-zeile{grid-template-columns:1fr}}
.zieh-ziel{outline:2px dashed var(--focus);outline-offset:2px;background:var(--hyp-bg)}
.konto-erinnerung{margin-top:var(--s4)}
/* ---------- Admin: Reiter ---------- */
.admin-reiter{display:flex;gap:var(--s1);border-bottom:1px solid var(--rule);margin:var(--s4) 0 var(--s5);overflow-x:auto;scrollbar-width:none}
.admin-reiter::-webkit-scrollbar{display:none}
.admin-reiter-knopf{display:inline-flex;align-items:center;gap:var(--s2);font:600 15px/1 var(--ui);color:var(--ink-mid);background:none;border:0;border-bottom:3px solid transparent;padding:var(--s3) var(--s4);margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.admin-reiter-knopf:hover{color:var(--ink)}
.admin-reiter-knopf.an{color:var(--ink);border-bottom-color:var(--hyp)}
.admin-reiter-knopf:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.admin-reiter-zahl{font:700 11.5px/1 var(--ui);background:var(--hyp);color:var(--on-cyan);border-radius:999px;padding:3px 7px}
.admin-feld-titel{margin-top:0}
.admin-feld > .admin-feld-titel ~ .admin-feld-titel{margin-top:var(--s6)}
.admin-zutun{border:1px solid var(--rule);border-left:3px solid var(--hyp);border-radius:6px;background:var(--surface);padding:var(--s4) var(--s5);margin-bottom:var(--s6)}
.admin-zutun h2{margin:0 0 var(--s3)}
.admin-zutun-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.admin-zutun-punkt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.admin-zutun-punkt:last-child{border-bottom:0}
.admin-zutun-zahl{font:700 20px/1 var(--ui);min-width:2ch;text-align:right}
.admin-zutun-punkt.warnung .admin-zutun-zahl{color:var(--alarm)}
.admin-zutun-leer{margin:0}
.admin-rm.neu{border-left:3px solid var(--hyp)}
.admin-rm .schlagwort{margin-right:var(--s2)}
.admin-rm-kurz h3{margin-top:0}
.admin-ablauf-legende{margin-top:var(--s2)}
@media (max-width:480px){.admin-zutun{padding:var(--s3) var(--s4)}.admin-zutun-punkt{grid-template-columns:auto 1fr}.admin-zutun-punkt .knopf{grid-column:1 / -1;justify-self:start}.admin-reiter-knopf{padding:var(--s3)}}
.admin-personen-titel{margin-top:var(--s6)}
@media (max-width:480px){.admin-reiter-knopf{padding:var(--s3) 9px;font-size:14px}.admin-reiter{margin-left:-4px;margin-right:-16px}#a-ueberblick .admin-kacheln,#a-nutzung .admin-kacheln{grid-template-columns:1fr 1fr}.admin-kachel .admin-zusatz{font-size:12px}}
.admin-frei-zeile{display:grid;gap:var(--s2)}
.admin-frei-zeile textarea{min-height:52px}
.admin-frei-stand{min-height:1.3em;margin:var(--s1) 0 var(--s2)}
.admin-tabelle tr.fehler td{color:var(--alarm)}
.admin-export{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.admin-export .feld-name{margin:0}
/* ---------- Kasten „Als Nächstes“: Titel und Merkzeile ---------- */
.weg-titel{margin:0 0 var(--s2);font-size:22px;line-height:1.25;font-weight:700}
.weg-warum{margin:0 0 var(--s4);color:var(--ink-mid);line-height:1.55;max-width:56ch}
.weg-tipp{margin:var(--s3) 0 0}

/* ---------- Neu in Wirkraum und Mitgestaltet ---------- */
.neu-liste{display:grid;gap:var(--s4)}
.neu-eintrag{border:1px solid var(--rule);border-radius:12px;padding:var(--s4) var(--s5);background:var(--surface)}
.neu-eintrag.ungelesen{border-left:3px solid var(--hyp)}
.neu-kopf{display:flex;gap:var(--s2);align-items:center}
.neu-titel{margin:var(--s1) 0 var(--s2);font-size:20px}
.neu-mitgestaltet{display:flex;align-items:center;gap:6px;margin:var(--s2) 0;font-weight:600;color:var(--zusage-ink)}
.gold-zeichen{flex:none;vertical-align:middle}
.dank-karte{border:1px solid #F0C95A;border-left:4px solid #E0A800;background:linear-gradient(135deg,#FFFBEA,#FFFFFF 60%);border-radius:12px;padding:var(--s4) var(--s5);margin:0 0 var(--s5);max-width:74ch}
.dank-kopf{display:flex;align-items:center;gap:var(--s3)}
.dank-kopf h2{margin:0;font-size:20px}
.dank-karte input{max-width:260px;margin:var(--s2) 0}
.konto-mitgestaltet{margin-top:var(--s4);border:1px solid var(--zusage);border-radius:10px;padding:var(--s3) var(--s4);background:var(--zusage-bg)}
.konto-mitgestaltet h3{margin:0 0 var(--s2);display:flex;align-items:center;gap:6px;font-size:16px}
.konto-mitgestaltet ul{margin:0;padding-left:1.2em}
.admin-wuerdigen{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2);flex-wrap:wrap}
.admin-wuerdigen select{max-width:320px}
.admin-wuerdigen .knopf{display:inline-flex;align-items:center;gap:6px}
.neu-zahl{background:#FFD24D;color:#001011}

/* Admin: halbe Diagramm-Kacheln per Klick auf volle Breite */
.admin-zelle:not(.breit) > .d-karte{cursor:zoom-in}
.admin-zelle.gross{grid-column:1/-1}
.admin-zelle.gross > .d-karte{cursor:zoom-out}
.admin-zelle.gross .d-titel{font-size:18px}
.d-kopf:has(.d-groesse){align-items:center}
.d-kopf:has(.d-groesse) .d-unter{order:2;flex-basis:100%}
.d-groesse{margin-left:auto;order:1;font:600 13px/1 var(--ui);color:var(--ink-mid);background:transparent;border:1px solid var(--rule-strong);border-radius:999px;padding:6px 12px;cursor:pointer;min-height:32px}
.d-groesse:hover{color:var(--ink);border-color:var(--ink-mid)}
.d-groesse:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:760px){.d-groesse{display:none}.admin-zelle:not(.breit) > .d-karte{cursor:auto}}

/* Admin: Dauer je Aufgabe — Balken gegen die 150-Sekunden-Grenze, mit Hilfslinien */
.d-dauer{gap:4px}
.d-dstufe-ok{--f:var(--d0)}.d-dstufe-warn{--f:var(--gap-line)}.d-dstufe-kritisch{--f:var(--alarm-line)}
.d-dspur{position:relative;height:14px;background:var(--sunk);border-radius:7px}
.d-dlinie{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--rule-strong);z-index:1}
.d-dlinie.grenze{width:0;background:none;border-left:1.5px dashed var(--alarm-line)}
.d-dp90,.d-dmedian{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--f)}
.d-dp90{opacity:.32}
.d-dmax{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-mid);z-index:2}
.d-skala{padding-top:0;padding-bottom:0}
.d-dskala{background:none;height:16px}
.d-dtick{position:absolute;top:0;transform:translateX(-50%);font:600 11px/16px var(--ui);color:var(--ink-faint);white-space:nowrap}
.d-dtick.grenze{color:var(--alarm)}
.admin-zelle:not(.gross) .d-dtick.klein{display:none}
.d-leg i.d-dl{width:16px;height:8px;border-radius:4px;background:var(--d0)}
.d-leg i.d-dl-p90{opacity:.32}
.d-leg i.d-dl-warn{background:var(--gap-line)}
.d-leg i.d-dl-max{width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-mid)}
.d-leg i.d-dl-grenze{width:0;height:12px;border-radius:0;background:none;border-left:1.5px dashed var(--alarm-line)}
/* Gleiche Spaltenbreiten in jeder Zeile, damit Hilfslinien und Grenze untereinander fluchten */
.d-dauer .d-bzeile{grid-template-columns:minmax(120px,36%) 1fr 92px}
.d-dauer .d-bzeile.d-skala + .d-bzeile{margin-top:2px}
@media (max-width:760px){.d-dauer .d-bzeile{grid-template-columns:1fr auto}.d-dauer .d-dspur{grid-column:1/-1;grid-row:2}.d-dauer .d-skala{grid-template-columns:1fr}.d-skala .d-bname,.d-skala .d-bzahl{display:none}.d-dauer .d-skala .d-dspur{grid-row:1}}

/* Linien: Vergleich gestrichelt, Gesamt kräftig, ausgeblendete Einträge blass */
.d-linie.gestrichelt{stroke-dasharray:6 5;stroke-width:1.8;opacity:.7}
.d-linie.dick{stroke-width:3.4}
.d-leg i.gestrichelt{background:none;border-top:2px dashed var(--f);height:0;border-radius:0;width:14px}
.d-leg.aus{opacity:.45;text-decoration:line-through}
.d-leg.aus i{background:var(--rule-strong)}
.d-hinweis{margin:var(--s2) 0 0;font-size:12px;color:var(--ink-faint)}

/* Admin: eigenes Dashboard im Überblick */
.admin-dashboard{margin-bottom:var(--s6)}
.admin-dashboard-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.admin-dashboard-kopf .admin-feld-titel{margin:0}
.admin-anpassen{margin:var(--s4) 0;padding:var(--s4) var(--s5);background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--rund, 12px)}
.admin-anpassen h3{font:700 12px/1.4 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mid);margin:var(--s4) 0 var(--s2)}
.admin-anpassen-liste{display:grid;gap:var(--s2) var(--s5);align-items:start}
.admin-anpassen-gruppe{display:grid;gap:2px}
@media (min-width:960px){.admin-anpassen-liste{grid-template-columns:1fr 1fr}}
.admin-dashboard .admin-kacheln{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media (max-width:640px){.admin-dashboard .admin-kacheln{grid-template-columns:1fr 1fr}}
.admin-anpassen-zeile{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:6px 8px;border-radius:8px}
.admin-anpassen-zeile.an{background:var(--sunk)}
.admin-anpassen-zeile label{display:flex;align-items:flex-start;gap:var(--s3);cursor:pointer;flex:1;min-width:0}
.admin-anpassen-zeile input{margin-top:3px;width:18px;height:18px;flex:none}
.admin-anpassen-zeile span{display:flex;flex-direction:column;gap:1px}
.admin-anpassen-zeile b{font:600 14px/1.35 var(--ui);color:var(--ink)}
.admin-anpassen-zeile small{font-size:12.5px;line-height:1.35;color:var(--ink-faint)}
.admin-anpassen-pfeile{display:flex;gap:4px;flex:none}
.admin-anpassen-pfeile .knopf{min-width:36px;padding-left:0;padding-right:0}
.admin-anpassen-pfeile .knopf:disabled{opacity:.3}
.admin-rm-kurz{margin-top:var(--s6);max-width:720px}

/* ---------- Stellensuche mit Gedächtnis ---------- */
.such-kurz{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:10px;background:var(--surface);margin:0 0 var(--s3)}
.such-kurz-text{font-weight:600}
.such-ohne{margin-top:0}
.such-neu-kopf{margin:var(--s2) 0 0;font-size:17px}
.such-neu-kopf.gesehen{margin-top:var(--s5);color:var(--ink-mid);font-size:15px;font-weight:600;padding-top:var(--s3);border-top:1px solid var(--rule)}
.such-nichts-neu{margin:0}
.karte.treffer{position:relative}
.karte.treffer.neu{border-color:var(--hyp)}
.treffer-neu{position:absolute;top:var(--s3);right:var(--s3);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--hyp-ink);background:var(--hyp-bg);border-radius:999px;padding:2px 10px}
.karte.treffer.neu a.karte-titel{padding-right:56px}
.treffer-beleg{margin:var(--s2) 0 0;font-size:14px;line-height:1.5;color:var(--ink)}
.treffer-beleg-name{color:var(--ink-mid);font-weight:600}
.schlagwort.feld{background:transparent;border:1px dashed var(--rule)}
.mehr-menue{position:relative}
.mehr-menue>summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:20px;line-height:1;color:var(--ink-mid)}
.mehr-menue>summary::-webkit-details-marker{display:none}
.mehr-menue>summary:hover,.mehr-menue[open]>summary{background:var(--sunk);color:var(--ink)}
.mehr-menue>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mehr-liste{position:absolute;z-index:5;top:100%;left:0;min-width:220px;display:grid;gap:var(--s1);padding:var(--s2);background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--lift)}
.mehr-liste .link{min-height:40px;display:flex;align-items:center;padding:0 var(--s2);white-space:nowrap}
.mehr-liste{width:max-content;max-width:min(320px,80vw)}
.feld-zeilen{list-style:none;margin:var(--s3) 0;padding:0;display:grid;gap:var(--s2)}
.feld-zeile{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);align-items:center;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.feld-zeile>a{font-weight:600;color:var(--ink);text-decoration:none}
.feld-zeile>a:hover{text-decoration:underline}
.feld-zeile>.leise{grid-column:1;font-size:13px}
.feld-zeile>.knopf,.feld-zeile>.link{grid-column:2;grid-row:1 / span 2}
.feld-zeile>div{grid-column:1 / -1}
@media (max-width:480px){
  .such-leiste .such-umkreis .seg{display:grid;grid-template-columns:repeat(3,1fr)}
  .such-leiste .such-umkreis .seg button{padding-left:0;padding-right:0}
}

/* ---------- Laufende Aufträge im Kopf ---------- */
.auftrag-pille{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:36px;padding:6px 14px 6px 10px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);color:var(--ink);font:600 13.5px/1.2 var(--ui);cursor:pointer;white-space:nowrap}
.auftrag-pille[hidden]{display:none}
.auftrag-pille .pille-text{overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.auftrag-pille .punkt{flex:none;width:10px;height:10px;border-radius:50%;background:var(--hyp);animation:puls 1.4s ease-in-out infinite;display:inline-flex;align-items:center;justify-content:center;font-size:0}
.auftrag-pille.fertig{border-color:var(--ok-line);background:var(--ok-bg)}
.auftrag-pille.fertig .punkt,.auftrag-pille.fehler .punkt{width:18px;height:18px;animation:none;font-size:12px;font-weight:700;color:var(--ground)}
.auftrag-pille.fertig .punkt{background:var(--ok)}
.auftrag-pille.fehler{border-color:var(--alarm-line);background:var(--alarm-bg)}
.auftrag-pille.fehler .punkt{background:var(--alarm)}
.auftrag-pille:hover{border-color:var(--ink-mid)}
@media (prefers-reduced-motion: reduce){:root:not([data-bewegung="voll"]) .auftrag-pille .punkt{animation:none}}:root[data-bewegung="ruhig"] .auftrag-pille .punkt{animation:none}
@media (max-width:760px){
  .kopf-innen{flex-wrap:wrap}
  .auftrag-pille{order:10;flex:1 1 100%;justify-content:center}
}

/* ---------- Wegleiste während des Einstiegs: spätere Etagen gedämpft, aber erreichbar ---------- */

ul.voraussetzungen li .link{margin-left:var(--s1);font-size:12px}
.kopf-innen .einladen-knopf,.kopf-innen .menue-knopf{flex:none;white-space:nowrap}
@media (min-width:761px) and (max-width:1100px){.auftrag-pille .pille-text{max-width:26ch}}

/* ---------- Woanders gesehen? · Arbeitgeber · Herkunft ---------- */
.einfuegen{margin:0 0 var(--s4)}
.einfuegen-zeile{display:flex;gap:var(--s2);align-items:flex-start}
.einfuegen-zeile textarea{flex:1;min-height:44px;resize:vertical;font:inherit;padding:10px 12px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--surface);color:var(--ink)}
.einfuegen-zeile .knopf{flex:none;min-height:44px}
.einfuegen-aus>*{margin-top:var(--s2)}
.einfuegen-ergebnis{padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.einfuegen-ergebnis p{margin:0 0 var(--s2);font-weight:600}
.einfuegen-firma input{flex:1;min-width:0}
.treffer-herkunft{margin:var(--s1) 0 0;font-size:12.5px;color:var(--ink-faint)}
.arbeitgeber h3{font-size:16px;margin:var(--s3) 0 var(--s1)}
.arbeitgeber-liste{list-style:none;margin:var(--s2) 0 var(--s4);padding:0;display:grid;gap:var(--s2)}
.arbeitgeber-zeile{padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
.arbeitgeber-kopf{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline}
.arbeitgeber-status{margin:var(--s1) 0 0;font-size:13.5px}
.arbeitgeber-zeile .aktionen{margin-top:var(--s1)}
.arbeitgeber-zeile .aktionen input{flex:1;min-width:0}
.vorschlaege-ag .arbeitgeber-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s2)}
@media (max-width:520px){.einfuegen-zeile{flex-direction:column;align-items:stretch}}

/* ---------- Abnahme: Umriss-Knopf, Arbeitgeber, Handy-Kopf, Vorbedingungen ---------- */
.knopf.umriss{border-color:var(--ink);background:var(--surface);color:var(--ink)}
.nur-vorlesen{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.auftrag-pille{min-height:32px}
.auftrag-pille .pille-kurz{display:none;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .kopf-innen{flex-wrap:nowrap}
  .auftrag-pille{order:0;flex:0 1 auto;justify-content:flex-start;max-width:150px;padding:4px 10px 4px 8px}
  .auftrag-pille .pille-text{display:none}
  .auftrag-pille .pille-kurz{display:inline}
  .kopf-innen:has(.auftrag-pille:not([hidden])) .einladen-knopf{display:none}
}
.schlagwort.beobachtet{background:var(--hyp-bg);color:var(--hyp-ink)}
.einfuegen-status{margin:var(--s2) 0 0;font-size:14px}
.arbeitgeber-entfernt{margin:0 0 var(--s3);padding:var(--s2) var(--s3);background:var(--sunk);border-radius:8px;font-size:14px}
.arbeitgeber-zeile .aktionen{gap:var(--s4)}
.arbeitgeber-zeile .aktionen .link,.arbeitgeber-entfernt .link,.einfuegen-status .link{min-height:24px;display:inline-flex;align-items:center}
ul.voraussetzungen li.ok::before{content:"✓";color:var(--ok);font-weight:700}
ul.voraussetzungen li.teil::before{content:"◐";color:var(--ink-mid)}
.auftrag-pille{overflow:hidden}
.auftrag-pille .pille-kurz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:760px){.auftrag-pille{max-width:160px;font-size:13px}}

/* ---------- Stand der App ---------- */
.app-stand{font:600 11.5px/1.3 var(--mono);color:var(--ink-faint);margin-top:2px}
.neue-version{position:sticky;top:var(--kopf-h,0);z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2) var(--s3);padding:var(--s2) var(--s4);background:var(--hyp-bg);border-bottom:1px solid var(--rule-strong);font-weight:600;font-size:14px}
.neue-version[hidden]{display:none}
.admin-stand{margin-top:var(--s2);font-size:13px}
.admin-stand.veraltet{color:var(--alarm);font-weight:600}
.admin-kosten-oben{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);margin:var(--s2) 0 0;font-size:14px}
.admin-kosten-name{font:600 11.5px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.admin-kosten-wert{font-size:22px;font-weight:700;color:var(--ink)}

/* ---------- Trefferquote von Zwischen den Zeilen ---------- */
.d-stapel{display:flex}
.d-stueck{display:block;height:100%}
.t-ja{background:var(--ok-line)}
.t-teils{background:#F2BE2C}
.t-nein{background:var(--alarm-line)}
.t-weg{background:var(--ink-faint)}
.d-tpunkt{display:inline-block;width:10px;height:10px;border-radius:50%}
.d-treffer .d-bzeile.gesamt .d-bname{font-weight:700}
.d-treffer .d-bzahl{font-size:12.5px;color:var(--ink-mid);white-space:nowrap}
/* Wirkraum übernimmt: Bitten, die Wirkraum an dieser Stelle für Dich umsetzt */
.du-quadrat{display:inline-block;flex:none;width:14px;height:14px;border-radius:3px;border:1.6px solid var(--ink);background:#6CCFF6;box-shadow:0 2px 3px -1px rgba(0,16,17,.3)}
.du-quadrat.klein{width:12px;height:12px;margin-top:5px}
.uebernimmt-band{margin:0 0 var(--s4);border:1px solid color-mix(in srgb,var(--hyp) 55%,transparent);border-radius:var(--rund);background:var(--hyp-bg)}
.uebernimmt-band>summary{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);font-weight:700;cursor:pointer;min-height:44px}
.uebernimmt-band>.hinweis{margin:0 var(--s4) var(--s2)}
.uebernimmt-liste{list-style:none;margin:0;padding:0 var(--s4) var(--s2)}
.uebernimmt-punkt{display:grid;grid-template-columns:14px minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--rule)}
.uebernimmt-punkt.umgesetzt .du-quadrat{background:var(--ok-line)}
.uebernimmt-text{margin:0;font-size:15px}
.uebernimmt-herkunft{margin:2px 0 0;font-size:13px;color:var(--ink-faint)}
.uebernimmt-stand{margin:4px 0 0;font:700 12.5px/1.4 var(--ui);color:var(--hyp-ink)}
.uebernimmt-punkt.umgesetzt .uebernimmt-stand{color:var(--ok)}
.uebernimmt-punkt .aktionen.klein{margin-top:4px}
.bitte-schalter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:var(--s2) 0 0;font-size:14.5px}
.bitte-an{display:flex;align-items:center;gap:var(--s2);cursor:pointer;min-height:44px;font-weight:600}
.bitte-an input{width:20px;height:20px;accent-color:var(--hyp-ink)}
.bitte-ziele{display:flex;flex-wrap:wrap;gap:var(--s2);border:0;margin:0;padding:0;flex-basis:100%}
.bitte-ziele[hidden]{display:none}
.bitte-ziele legend{float:left;width:100%;padding:0;margin:0 0 var(--s1);font-size:13.5px;color:var(--ink-faint)}
.bitte-ort{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--rule-strong);border-radius:999px;cursor:pointer;font-weight:600;background:var(--surface)}
.bitte-ort input{width:18px;height:18px;margin:0;accent-color:var(--hyp-ink)}
.bitte-ort:has(input:checked){background:var(--hyp-bg);border-color:var(--hyp);color:var(--hyp-ink)}
.bitte-ort:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.bitte-stand{font-size:13px;color:var(--hyp-ink)}
.bitten-hinweis{margin:0 0 var(--s3)}

/* Anzeige direkt in der Trefferkarte lesen */
.treffer-anzeige { margin: var(--s3) 0 var(--s1); padding: var(--s3) var(--s4); border-left: 3px solid var(--hyp); background: var(--hyp-bg); border-radius: 0 var(--rund-klein, 8px) var(--rund-klein, 8px) 0; }
.treffer-anzeige-text { max-height: 420px; overflow-y: auto; line-height: 1.5; }
.treffer-anzeige-text p { margin: 0 0 .6em; white-space: pre-line; }
.such-zeitarbeit { display: flex; align-items: center; gap: var(--s2); font-size: .92rem; margin-top: var(--s2); }

/* Suchkorridore als Kacheln: zugeklappt kurz, ein Korridor offen */
.korridor{padding-top:var(--s4);padding-bottom:var(--s4)}
.korridor-kopf{position:relative;cursor:pointer;padding-right:36px}
.korridor-kopf::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--hyp-ink);border-bottom:2px solid var(--hyp-ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.korridor.offen .korridor-kopf::after{transform:translateY(-30%) rotate(225deg)}
.korridor .karte-kopf{margin-bottom:0}
.korridor-schalter{all:unset;cursor:pointer;font:inherit;color:inherit;overflow-wrap:anywhere}
.korridor-schalter:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.korridor-kurz{margin:var(--s1) 0 0;font:500 14px/1.4 var(--ui);color:var(--ink-mid)}
.korridor-kurz:empty{display:none}
.korridor.offen .korridor-kopf{padding-bottom:var(--s3);border-bottom:1px solid var(--rule);margin-bottom:var(--s3)}
.korridor:not(.offen):hover{border-color:var(--rule-strong)}
@media (prefers-reduced-motion:reduce){:root:not([data-bewegung="voll"]) .korridor-kopf::after{transition:none}}:root[data-bewegung="ruhig"] .korridor-kopf::after{transition:none}
.korridor-reiter{margin-top:var(--s4)}
.reiter-leiste{display:flex;gap:var(--s1);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}
/* Reiter der Suchkorridore — nur in .reiter-leiste, damit die Reiter der Stellenseite (Name über Stand) unberührt bleiben */
.reiter-leiste .reiter-knopf{all:unset;cursor:pointer;flex:0 0 auto;padding:var(--s2) var(--s3);font:600 13px/1.3 var(--ui);color:var(--ink-mid);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.reiter-leiste .reiter-knopf.an{color:var(--ink);background:var(--raum-tint);border-bottom-color:var(--ink)}
.reiter-leiste .reiter-knopf.vorsicht.an{border-bottom-color:var(--gap-line)}
.reiter-knopf:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:4px}
.reiter-flaeche{padding:var(--s3) 0 0;font:500 15.5px/1.6 var(--doc)}
.reiter-flaeche p{margin:0}

/* Hürden und Chancen an Suchtreffern */
.huerden-leiste{margin:var(--s3) 0 var(--s2)}
.huerden-leiste .aktionen{margin:0 0 var(--s1)}
.huerden-leiste > p.leise{margin:0 0 var(--s2);font-size:14px}
.huerden-legende{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font:500 12.5px/1.4 var(--ui);color:var(--ink-mid);margin-top:var(--s2)}
.huerden-legende span{display:inline-flex;align-items:center;gap:4px}
.huerde-muster{padding:1px 8px;border-radius:999px;border:1.5px solid var(--alarm-line)}
.huerde-muster.weich{border-style:dashed;border-color:var(--gap-line)}
.huerden{margin:var(--s3) 0 0}
.huerden-reihe{display:flex;flex-wrap:wrap;gap:var(--s2)}
.huerde{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:3px 10px;border-radius:999px;font:600 13px/1.25 var(--ui);cursor:pointer;background:var(--surface);color:var(--ink);border:1.5px solid var(--rule-strong)}
.huerde svg{flex:0 0 auto}
.huerde.hart{border-color:var(--alarm-line);background:var(--alarm-bg);color:var(--alarm)}
.huerde.weich{border-style:dashed;border-color:var(--gap-line);background:var(--gap-bg);color:var(--gap)}
.huerde.qualifikation{border-color:var(--rule-strong);background:var(--sunk);color:var(--ink-mid)}
.huerde.trotzdem{border-color:var(--hyp);background:var(--hyp-bg);color:var(--hyp-ink)}
.huerde[aria-expanded="true"]{box-shadow:0 0 0 2px var(--focus)}
.huerde:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.huerden-detail{margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--rund-klein,8px);background:var(--sunk);font:500 14.5px/1.5 var(--ui)}
.huerden-detail p{margin:0 0 4px}
.huerden-detail p:last-child{margin:0}
.huerden-detail-kopf{font-weight:700}
.huerden-frei{margin:var(--s2) 0 0;font:500 13.5px/1.4 var(--ui);color:var(--ink-mid)}

/* Doppelte Stationen: jede Gruppe und jeden Eintrag einzeln wählen */
.doppelt-liste > li.doppelt-gruppe{display:block}
.doppelt-kopf{display:flex;align-items:center;gap:var(--s2);font-weight:600;min-height:44px;cursor:pointer}
.doppelt-eintraege{list-style:none;margin:0 0 var(--s2);padding:0 0 0 var(--s5)}
.doppelt-eintraege li{border:0;padding:0}
.doppelt-eintrag{display:flex;align-items:center;gap:var(--s2);min-height:40px;font-size:14.5px;cursor:pointer}
.doppelt-eintrag span:first-of-type{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.doppelt-eintraege.aus{opacity:.55}
.doppelt-bleibt{font:700 11.5px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:4px 8px}
.doppelt-gruppe input[type=checkbox]{width:20px;height:20px;flex:0 0 auto}
.doppelt-liste .doppelt-eintrag span{flex:1 1 auto}
.doppelt-liste .doppelt-eintrag .doppelt-bleibt{flex:0 0 auto}
.doppelt-liste .doppelt-kopf span{flex:1 1 auto}

/* Sichtbar auf LinkedIn: LinkedIn-Profil, Befund, Texte, Banner */
.gesehen-schritt{margin-top:var(--s6)}
.gesehen-schritt h3{margin:0 0 var(--s2)}
.gesehen-schritt h4{margin:var(--s4) 0 var(--s2)}
.gesehen-quelle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:var(--rund);background:var(--sunk-2)}
.gesehen-ablage{border:1.5px dashed var(--rule-strong);border-radius:var(--rund);padding:var(--s4);margin-top:var(--s2)}
.gesehen-optionen{margin-top:var(--s4)}
.gesehen-optionen > summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.gesehen-haken{display:flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer}
.gesehen-haken input,.gesehen-hebel-zeile input{width:20px;height:20px;flex:0 0 auto}
.gesehen-zwei{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:620px){.gesehen-zwei{grid-template-columns:1fr}}
.gesehen-wirkt,.gesehen-zeigt{border-radius:var(--rund);padding:var(--s3) var(--s4)}
.gesehen-wirkt{background:var(--sunk)}
.gesehen-zeigt{background:var(--hyp-bg);border:1px solid var(--rule)}
.gesehen-wirkt p,.gesehen-zeigt p{margin:0 0 var(--s1)}
.gesehen-etikett{font:700 11.5px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mid);margin:0 0 var(--s1)}
.gesehen-stimmig{margin:0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.gesehen-stimmig li{display:grid;gap:2px;padding:var(--s2) var(--s3);border-left:3px solid var(--gap-line);background:var(--gap-bg);border-radius:0 var(--rund-klein,8px) var(--rund-klein,8px) 0}
.gesehen-ton{margin-top:var(--s4)}
.gesehen-ton > summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.gesehen-satz{margin:var(--s2) 0;padding-left:var(--s3);border-left:3px solid var(--hyp);font-style:italic}
.gesehen-hebel{display:grid;gap:var(--s2)}
.gesehen-hebel-zeile{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3);border:1.5px solid var(--rule);border-radius:var(--rund);cursor:pointer;background:var(--surface)}
.gesehen-hebel-zeile.an{border-color:var(--hyp);background:var(--hyp-bg)}
.gesehen-hebel-text{display:grid;gap:4px;min-width:0}
.gesehen-hebel-kopf{display:flex;align-items:center;gap:var(--s2)}
.gesehen-zeichen{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 12px/1 var(--ui)}
.gesehen-zeichen.fehlt{background:var(--gap-bg);color:var(--gap);border:1.5px dashed var(--gap-line)}
.gesehen-zeichen.teil{background:var(--sunk);color:var(--ink-mid);border:1.5px solid var(--rule-strong)}
.gesehen-zeichen.gut{background:var(--ok-bg);color:var(--ok);border:1.5px solid var(--ok)}
.gesehen-zeichen.frage{background:var(--surface);color:var(--ink-mid);border:1.5px solid var(--rule-strong)}
.gesehen-text textarea{width:100%;font:500 15.5px/1.55 var(--ui)}
.gesehen-zaehler{margin:var(--s1) 0 0}
.gesehen-en{margin-top:var(--s2)}
.gesehen-en > summary{cursor:pointer;font-weight:600;min-height:40px;display:flex;align-items:center}
.gesehen-vorher{margin-top:var(--s4);padding:var(--s3) var(--s4);border:1px solid var(--rule);border-radius:var(--rund)}
.gesehen-vorher ul{margin:0;padding-left:var(--s4)}
.gesehen-banner{display:block;width:100%;height:auto;aspect-ratio:4/1;border:1px solid var(--rule);border-radius:var(--rund-klein,8px);margin:var(--s3) 0}
.gesehen-banner-felder{display:grid;gap:var(--s2)}
.gesehen-banner-reihe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.gesehen-banner-reihe.drei{grid-template-columns:1fr 1fr 1fr}
@media (max-width:560px){.gesehen-banner-reihe,.gesehen-banner-reihe.drei{grid-template-columns:1fr}}
.gesehen-farben{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.gesehen-farbe{width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--rule-strong);cursor:pointer;padding:0}
.gesehen-farbe.an{box-shadow:0 0 0 3px var(--focus)}
.gesehen-farben input[type=color]{width:44px;height:36px;border:1px solid var(--rule-strong);border-radius:8px;background:var(--surface);padding:2px}

/* =====================================================================
   Atelier (Oktober 2026)
   Das Gerüst ist schwarz und weiß. Farbe gehört den sieben Räumen, Gold
   allein der Zusage. Je Seite eine Raumfarbe ([data-raum] am Wurzelelement,
   gesetzt in main.js über atelier.js). Kontraste geprüft: Tief auf Tönung
   und Schrift auf Voll jeweils mindestens 4,5 : 1. Moodboard und Designsystem:
   docs/design-vertrag.md, Abschnitt „Atelier“.
   ===================================================================== */
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;
  src:url("vendor/schrift/figtree-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;
  src:url("vendor/schrift/figtree-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-display:swap;font-weight:600;
  src:url("vendor/schrift/caveat-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-display:swap;font-weight:600;
  src:url("vendor/schrift/caveat-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Schrift: Figtree für Text, Quicksand bleibt für Überschriften und die Marke */
:root{
  --ui:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display:"Quicksand", ui-sans-serif, system-ui, sans-serif;
  --kurve:cubic-bezier(.6,.4,0,1);
}
body{font-weight:400}
h1,h2,h3,.marke,.kachel-titel{font-family:var(--display)!important}
h1{letter-spacing:-.025em}

/* =====================================================================
   Version 2 · Farben und Zustände (Design-Vertrag Abschnitt 3, Stand 4.10.2026)
   Die EINE Token-Schicht. Jede Farb-Variable steht hier genau einmal für Hell
   und genau einmal je Mechanismus für Dunkel: Media-Query (System) mit
   :not([data-thema="hell"]) und [data-thema="dunkel"] (gewählt). Ausnahme: die
   Raum-Variablen je [data-raum]. Eine neue Variable bekommt hier ihren Dunkel-Wert.
   Nicht-Farb-Werte: Abstände oben, Radien im Block „Klares Design“, Schrift bei „Schrift“.
   ===================================================================== */
:root{
  color-scheme: light;
  /* Fläche, Schrift, Linien, Hauptknopf */
  --ground:#FFFFFF; --surface:#FFFFFF; --sunk:#F2F4F4; --sunk-2:#F8F9F8;
  --ink:#001011; --ink-mid:#4E5058; --ink-faint:#62646C;
  --rule:rgba(0,16,17,.09); --rule-strong:rgba(0,16,17,.17); --spur:#E9ECEC;
  --rail:#086788; --rail-ink:#F1FAFC; --rail-dim:#C3E0EA;  /* nur noch von überschriebenen Altregeln gelesen */
  --primaer:#001011; --primaer-hover:#16292B; --auf-primaer:#FFFFFF;
  --lift:0 1px 2px rgba(20,35,42,.04);
  --schwebe:0 12px 32px -12px rgba(20,35,42,.22), 0 2px 6px rgba(20,35,42,.06);
  --focus:#0B6A8E;  /* Fokus-Ring überall gleich, nie Raumfarbe */
  --on-cyan:#001011;
  /* Die fünf Zustände (immer mit Zeichen und Wort) */
  --hyp:#6CCFF6; --hyp-ink:#0B6A8E; --hyp-bg:rgba(108,207,246,.16);        /* Vermutung */
  --ok-line:#98CE00; --ok:#466800; --ok-bg:rgba(152,206,0,.14);            /* Belegt */
  --gap-line:#62646C; --gap:#4E5058; --gap-bg:rgba(98,100,108,.08);        /* Fehlt noch */
  --alarm-line:#FF5714; --alarm:#B83300; --alarm-bg:rgba(255,87,20,.08);   /* Warnsignal */
  --zusage:#F2BE2C; --zusage-bg:#FDF3D8; --zusage-ink:#001011;             /* Zusage */
  --vermutung:var(--hyp); --belegt:var(--ok-line); --fehlt:var(--gap-line); --warn:var(--alarm-line);
  --ton:var(--hyp);  /* persönliche Farbe aus dem Wirkton (wirkton.js setzt sie); ohne Wirkton = Frozen Lake */
  /* Diagramme im Admin */
  --d0:#0B6A8E; --d1:#6CCFF6; --d2:var(--ok-line); --d3:#FF5714; --d4:#D9B0FE; --d5:#757780; --d6:#001011; --d7:#1BB8CC;
  --logo-du:#6CCFF6; --logo-ziel:#FFFFFF; --logo-rand:#001011; --logo-schnitt:#001011;  /* Logo A farbig */
  --du-tint:#E1F8FF;  /* Fläche „Du“ (Frozen-Lake-Tönung), z. B. Passt es in beide Richtungen? */
  --aura:#A6E5FB; --aura-2:#F9EFFF; --aura-staerke:.7;  /* Farbschein oben (ohne Raum) */
  /* Raum ohne eigene Farbe (Konto, Admin, Neu, Offen): schwarz-weiß; folgt Hell und Dunkel von selbst */
  --raum-voll:var(--ink); --raum-tint:var(--sunk); --raum-auf:var(--ground); --raum-tief:var(--ink);
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    color-scheme: dark;
    --ground:#000000; --surface:#0C0E0F; --sunk:#141718; --sunk-2:#101213;
    --ink:#FFFFFC; --ink-mid:#C9CDD2; --ink-faint:#9EA2AA;
    --rule:rgba(255,255,252,.10); --rule-strong:rgba(255,255,252,.20); --spur:#1E2224;
    --rail:#0A3B4C; --rail-ink:#EAF7FA; --rail-dim:#9CC3D1;
    --primaer:#6CCFF6; --primaer-hover:#8ADAF8; --auf-primaer:#001011;
    --lift:none; --schwebe:0 16px 40px -12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
    --focus:#6CCFF6;
    --hyp:#6CCFF6; --hyp-ink:#6CCFF6; --hyp-bg:rgba(108,207,246,.14);
    --ok-line:#98CE00; --ok:#B5E33A; --ok-bg:rgba(152,206,0,.14);
    --gap-line:#9EA2AA; --gap:#C9CDD2; --gap-bg:rgba(158,162,170,.12);
    --alarm-line:#FF5714; --alarm:#FF7A45; --alarm-bg:rgba(255,87,20,.14);
    --zusage:#F2BE2C; --zusage-bg:rgba(242,190,44,.16); --zusage-ink:#F2BE2C;
    --d0:#6CCFF6; --d1:#A7E3FA; --d3:#FF7A45; --d5:#9EA2AA; --d6:#FFFFFC; --d7:#48C9D8;
    --logo-du:#6CCFF6; --logo-ziel:#0C0E0F; --logo-rand:#FFFFFC; --logo-schnitt:#FFFFFC;  /* Logo A auf Ink */ --aura-staerke:.32;
    --du-tint:color-mix(in srgb, #6CCFF6 14%, var(--ground));
  }
}
:root[data-thema="dunkel"]{
  color-scheme: dark;
  --ground:#000000; --surface:#0C0E0F; --sunk:#141718; --sunk-2:#101213;
  --ink:#FFFFFC; --ink-mid:#C9CDD2; --ink-faint:#9EA2AA;
  --rule:rgba(255,255,252,.10); --rule-strong:rgba(255,255,252,.20); --spur:#1E2224;
  --rail:#0A3B4C; --rail-ink:#EAF7FA; --rail-dim:#9CC3D1;
  --primaer:#6CCFF6; --primaer-hover:#8ADAF8; --auf-primaer:#001011;
  --lift:none; --schwebe:0 16px 40px -12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  --focus:#6CCFF6;
  --hyp:#6CCFF6; --hyp-ink:#6CCFF6; --hyp-bg:rgba(108,207,246,.14);
  --ok-line:#98CE00; --ok:#B5E33A; --ok-bg:rgba(152,206,0,.14);
  --gap-line:#9EA2AA; --gap:#C9CDD2; --gap-bg:rgba(158,162,170,.12);
  --alarm-line:#FF5714; --alarm:#FF7A45; --alarm-bg:rgba(255,87,20,.14);
  --zusage:#F2BE2C; --zusage-bg:rgba(242,190,44,.16); --zusage-ink:#F2BE2C;
  --d0:#6CCFF6; --d1:#A7E3FA; --d3:#FF7A45; --d5:#9EA2AA; --d6:#FFFFFC; --d7:#48C9D8;
  --logo-du:#6CCFF6; --logo-ziel:#0C0E0F; --logo-rand:#FFFFFC; --logo-schnitt:#FFFFFC;  /* Logo A auf Ink */ --aura-staerke:.32;
  --du-tint:color-mix(in srgb, #6CCFF6 14%, var(--ground));
}

/* Räume · Palette Morgenrot (Vertrag 3.3). voll = Leuchtfarbe (Fläche), tint = Tönung,
   auf = Ink auf der Leuchtfarbe (in Hell und Dunkel #001011), tief = Text in Raumfarbe entfällt, Text ist Ink.
   Raumfarbe ist nur Orientierung: Wegleiste, Kopf, Kacheln, gewählte Chips, Reiter.
   Hinweise und Vermutungen im Inhalt bleiben immer Frozen Lake (--hyp). */
:root[data-raum="profil"],.raum-profil{--raum-voll:#6CCFF6;--raum-tint:#E1F8FF;--raum-auf:#001011;--raum-tief:var(--ink)}
:root[data-raum="zeilen"],.raum-zeilen{--raum-voll:#AEC2FC;--raum-tint:#ECF3FF;--raum-auf:#001011;--raum-tief:var(--ink)}
:root[data-raum="korridore"],.raum-korridore{--raum-voll:#D9B0FE;--raum-tint:#F9EFFF;--raum-auf:#001011;--raum-tief:var(--ink)}
:root[data-raum="suche"],.raum-suche{--raum-voll:#FEA3D7;--raum-tint:#FFECF8;--raum-auf:#001011;--raum-tief:var(--ink)}
:root[data-raum="pruefen"],.raum-pruefen{--raum-voll:#FEA9AF;--raum-tint:#FFECED;--raum-auf:#001011;--raum-tief:var(--ink)}
:root[data-raum="bewerben"],.raum-bewerben{--raum-voll:#FDB89A;--raum-tint:#FFEEE4;--raum-auf:#001011;--raum-tief:var(--ink)}
:root[data-raum="vorbereitung"],.raum-vorbereitung{--raum-voll:#FEBB71;--raum-tint:#FFF0E0;--raum-auf:#001011;--raum-tief:var(--ink)}
/* Dunkel: Tönung aus der Leuchtfarbe abgeleitet; voll und auf bleiben.
   Gilt auch für Elemente mit Raumklasse (Wegleiste, Kacheln), nicht nur für die Seite. */
@media (prefers-color-scheme: dark){
  :root[data-raum]:not([data-thema="hell"]),:root:not([data-thema="hell"]) :is(.raum-profil,.raum-zeilen,.raum-korridore,.raum-suche,.raum-pruefen,.raum-bewerben,.raum-vorbereitung){
    --raum-tint:color-mix(in srgb, var(--raum-voll) 16%, var(--ground)); --raum-tief:var(--ink)}
}
:root[data-raum][data-thema="dunkel"],:root[data-thema="dunkel"] :is(.raum-profil,.raum-zeilen,.raum-korridore,.raum-suche,.raum-pruefen,.raum-bewerben,.raum-vorbereitung){
  --raum-tint:color-mix(in srgb, var(--raum-voll) 16%, var(--ground)); --raum-tief:var(--ink)}

/* Leuchten im Dunkeln (Vertrag 3.5), Stufe halb. Nur Dunkel, Hell bleibt Pixel für Pixel gleich.
   Es leuchtet nur, was ruft: der aktuelle Raum, Bitten, Vermutungen, der Hauptknopf, die erreichte Zusage.
   Nur Schatten, keine Bewegung. Dazu eine feine Lichtkante oben an Kopf und Wegleiste (Glas). */
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]) .kopf-innen{box-shadow:var(--schwebe), inset 0 0 0 1px var(--rule), inset 0 1px 0 rgba(255,255,252,.07)}
  :root:not([data-thema="hell"]) nav.wl{box-shadow:var(--schwebe), inset 0 1px 0 rgba(255,255,252,.07)}
  :root:not([data-thema="hell"]) .wl-raum.jetzt .wl-karte{box-shadow:0 0 0 3px var(--raum-voll), 0 0 14px color-mix(in srgb,var(--raum-voll) 45%,transparent), 0 0 30px color-mix(in srgb,var(--raum-voll) 18%,transparent)}
  :root:not([data-thema="hell"]) .wl-bitten{box-shadow:0 0 10px color-mix(in srgb,var(--hyp) 45%,transparent)}
  :root:not([data-thema="hell"]) .einsicht:not([data-resonanz]){box-shadow:inset 0 0 24px color-mix(in srgb,var(--hyp) 6%,transparent), 0 0 32px color-mix(in srgb,var(--hyp) 10%,transparent)}
  :root:not([data-thema="hell"]) .knopf.haupt:not(:disabled){box-shadow:0 0 16px color-mix(in srgb,var(--primaer) 35%,transparent)}
  :root:not([data-thema="hell"]) .knopf.haupt:hover:not(:disabled){box-shadow:0 0 22px color-mix(in srgb,var(--primaer) 45%,transparent)}
  :root:not([data-thema="hell"]) .wl-zusage.erreicht{box-shadow:0 0 20px color-mix(in srgb,var(--zusage) 30%,transparent)}
}
:root[data-thema="dunkel"] .kopf-innen{box-shadow:var(--schwebe), inset 0 0 0 1px var(--rule), inset 0 1px 0 rgba(255,255,252,.07)}
:root[data-thema="dunkel"] nav.wl{box-shadow:var(--schwebe), inset 0 1px 0 rgba(255,255,252,.07)}
:root[data-thema="dunkel"] .wl-raum.jetzt .wl-karte{box-shadow:0 0 0 3px var(--raum-voll), 0 0 14px color-mix(in srgb,var(--raum-voll) 45%,transparent), 0 0 30px color-mix(in srgb,var(--raum-voll) 18%,transparent)}
:root[data-thema="dunkel"] .wl-bitten{box-shadow:0 0 10px color-mix(in srgb,var(--hyp) 45%,transparent)}
:root[data-thema="dunkel"] .einsicht:not([data-resonanz]){box-shadow:inset 0 0 24px color-mix(in srgb,var(--hyp) 6%,transparent), 0 0 32px color-mix(in srgb,var(--hyp) 10%,transparent)}
:root[data-thema="dunkel"] .knopf.haupt:not(:disabled){box-shadow:0 0 16px color-mix(in srgb,var(--primaer) 35%,transparent)}
:root[data-thema="dunkel"] .knopf.haupt:hover:not(:disabled){box-shadow:0 0 22px color-mix(in srgb,var(--primaer) 45%,transparent)}
:root[data-thema="dunkel"] .wl-zusage.erreicht{box-shadow:0 0 20px color-mix(in srgb,var(--zusage) 30%,transparent)}

/* Zustand mit Zeichen (Vertrag 3.2): das Zeichen zeichnet das CSS, dazu immer das Wort.
   JS: zustand(art, wort) in src/ui.js. Neue Zeichen sind gestrichelt oder gefüllt, nie nur Farbe. */
.zustand{display:inline-flex;align-items:center;gap:6px;font:600 12px/1.2 var(--ui);padding:5px 8px;border-radius:999px;white-space:nowrap}
.zustand::before{content:"";flex:none;width:16px;height:16px;box-sizing:border-box;border-radius:50%;background:center / 16px 16px no-repeat}
.zustand--vermutung{color:var(--hyp-ink);background:var(--hyp-bg)}
.zustand--vermutung::before{border:2px dashed var(--hyp)}
.zustand--belegt{color:var(--ok);background:var(--ok-bg)}
.zustand--belegt::before{background-color:var(--ok-line);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.4l2.4 2.4 4.8-5.2' fill='none' stroke='%23001011' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.zustand--fehlt{color:var(--gap);background:var(--gap-bg)}
.zustand--fehlt::before{border:2px dashed var(--gap-line)}
.zustand--warn{color:var(--alarm);background:var(--alarm-bg)}
.zustand--warn::before{border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.9L15 14H1z' fill='%23FF5714' stroke='%23FF5714' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M8 6.3v3.5' stroke='%23001011' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='.9' fill='%23001011'/%3E%3C/svg%3E")}
.zustand--zusage{color:var(--ink);background:var(--zusage-bg)}
.zustand--zusage::before{border-radius:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8.00,1.50 9.82,6.19 14.85,6.48 10.95,9.66 12.23,14.52 8.00,11.80 3.77,14.52 5.05,9.66 1.15,6.48 6.18,6.19' fill='%23F2BE2C' stroke='%23001011' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Wegleiste: jeder Schritt in seiner Raumfarbe. Offen hell, jetzt mit Ring, geschafft kräftig mit Haken */

.sw-fertig .sw-marke{background:var(--raum-voll);border-color:var(--raum-voll);color:var(--raum-auf)}

/* Kacheln wie im Atelier: flach, getönt, beim Hover voll */
.kachel{background:var(--raum-tint);border:0;border-radius:16px;
  transition:transform .3s var(--kurve),background-color .3s var(--kurve),color .3s var(--kurve)}
.kachel .kachel-titel{color:var(--raum-tief)}
.kachel{position:relative;padding-right:44px}
.kachel .kachel-los{position:absolute;right:16px;top:50%;margin:0;font-size:24px;line-height:1;transform:translateY(-50%);transition:transform .3s var(--kurve)}
.kachel:hover,.kachel:focus-visible{transform:scale(1.02);background:var(--raum-voll);color:var(--raum-auf);border-color:transparent}
.kachel:hover :is(.kachel-titel,.kachel-dach,.kachel-stand,.kachel-los),.kachel:focus-visible :is(.kachel-titel,.kachel-dach,.kachel-stand,.kachel-los){color:var(--raum-auf)}
.kachel:hover .kachel-los,.kachel:focus-visible .kachel-los{transform:translate(5px,-50%)}
.kachel.offen{background:var(--raum-voll);color:var(--raum-auf);box-shadow:none}
.kachel.offen :is(.kachel-titel,.kachel-dach,.kachel-stand,.kachel-los){color:var(--raum-auf)}

.kachel-bereich{border-radius:16px}

/* Startseite: Buchstaben, Notiz, die Räume */
.wort{white-space:nowrap}
.bst{transition:color 1.4s var(--kurve) .5s}
.bst:hover{transition:color .08s}
.notiz{font:600 26px/1.1 "Caveat", cursive;color:#5B3FC4;margin:0}

/* Zweiter Ton für Überschriften: Grau mit 4,6 : 1 */
.ton-leise{color:#6B7A80}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .ton-leise{color:#9EA9AD}}
:root[data-thema="dunkel"] .ton-leise{color:#9EA9AD}

/* Gold glänzt nur bei der Zusage */
@keyframes glanz{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.gold-glanz{background:linear-gradient(110deg,#C99212 0%,#F2BE2C 30%,#FFF6CF 46%,#F2BE2C 60%,#C99212 100%);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:glanz 3.6s ease-in-out infinite}
.stempel.zusage{color:#001011;background:linear-gradient(110deg,#D9A10F 0%,#F2BE2C 35%,#FFF3C4 50%,#F2BE2C 65%,#D9A10F 100%);background-size:260% 100%;animation:glanz 3.6s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  :root:not([data-bewegung="voll"]) .kachel,:root:not([data-bewegung="voll"]) .bst{transition:none}
  :root:not([data-bewegung="voll"]) .kachel:hover{transform:none}
  :root:not([data-bewegung="voll"]) .gold-glanz,:root:not([data-bewegung="voll"]) .stempel.zusage{animation:none}
}
:root[data-bewegung="ruhig"] .kachel,:root[data-bewegung="ruhig"] .bst{transition:none}
  :root[data-bewegung="ruhig"] .kachel:hover{transform:none}
  :root[data-bewegung="ruhig"] .gold-glanz,:root[data-bewegung="ruhig"] .stempel.zusage{animation:none}

/* Startseite: Der erste Abschnitt füllt den Bildschirm, darunter ein leiser
   Hinweis nach unten; die folgenden Abschnitte blenden beim Scrollen weich ein. */

.einblenden{opacity:0;transform:translateY(32px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.einblenden.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){:root:not([data-bewegung="voll"]) .einblenden{opacity:1;transform:none;transition:none}}:root[data-bewegung="ruhig"] .einblenden{opacity:1;transform:none;transition:none}

/* Vertrauen: links weiß mit drei Zeichen, rechts die dunkle Kachel „Wer dahintersteht“ */

.daten-zeichen{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);display:grid;place-items:center}
.daten-zeichen svg{width:20px;height:20px}

/* Gewählte Antwort bleibt gewählt: auch unter der Maus und nach dem Tippen auf dem Handy
   (dort bleibt :hover kleben und machte die Schrift weiß auf hell) */
.resonanz .knopf.an:not(:disabled),.resonanz .knopf.an:hover:not(:disabled){background:var(--raum-voll);border-color:var(--raum-voll);color:var(--raum-auf)}

/* Meine Stellen: ganz rechts ein X zum Entfernen (Tippfläche 44 px, leise bis zur Maus) */
.stellen-liste .karte{position:relative}
.stellen-liste .karte-kopf{padding-right:40px}
.karte-weg{position:absolute;top:2px;right:2px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--ink-faint);cursor:pointer;transition:background-color .2s,color .2s}
.karte-weg svg{width:18px;height:18px}
.karte-weg:hover:not(:disabled){background:color-mix(in srgb,var(--alarm) 10%,transparent);color:var(--alarm)}
.karte-weg:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.karte-weg:disabled{opacity:.4;cursor:wait}

/* Admin · Spalte Zugang: Stand als kleines Schild, dahinter die Handgriffe */
.admin-zugang{white-space:nowrap}
.zugang-stand{margin-right:6px;vertical-align:middle}  /* sitzt auf .zustand (ui.js) */
.zugang-knoepfe{display:inline-flex;align-items:center;gap:10px;vertical-align:middle}
.admin-weg{position:static;width:36px;height:36px}
.admin-tabelle tr.pausiert td{opacity:.6}
.admin-tabelle tr.pausiert td.admin-zugang{opacity:1}

/* Admin · Preisplanung */
.admin-planung-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3) var(--s4);margin:var(--s4) 0 var(--s3)}
.admin-planung-feld{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600}
.admin-planung-feld input,.admin-planung-feld select{min-height:40px;font-weight:400}
.admin-planung-feld small{font-weight:400}
.admin-kachel.gut{box-shadow:inset 0 0 0 2px var(--ok-line),var(--lift)}
.admin-kachel.warnung{box-shadow:inset 0 0 0 2px var(--gap-line),var(--lift)}
.admin-planung-aus h3{margin:var(--s5) 0 var(--s2)}

/* Darstellung: drei Knöpfe statt eines Wechsel-Knopfs, im Menü und in den Einstellungen */
.thema-wahl,.bewegung-wahl{display:inline-flex;border:1px solid var(--rule-strong);border-radius:999px;padding:3px;gap:2px;background:var(--surface)}
.thema-wahl button,.bewegung-wahl button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--ink-mid);font:600 13.5px/1 var(--ui);cursor:pointer}
.thema-wahl button:hover,.bewegung-wahl button:hover{color:var(--ink)}
.thema-wahl button[aria-pressed="true"],.bewegung-wahl button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.thema-wahl button:focus-visible,.bewegung-wahl button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.menue-darstellung{display:flex;flex-direction:column;gap:6px}
.menue-darstellung-name{font:600 11.5px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
@media (max-width:420px){.thema-wahl button,.bewegung-wahl button{padding:0 9px}}
.menue-fuss{flex-wrap:wrap}
.menue-darstellung{flex-basis:100%;order:-1;padding-bottom:var(--s2)}

/* Mitgestaltet-Kasten im dunklen Design: dunkler Grund, helle Goldschrift */

/* Bewerbung: aufklappbare Teile zeigen, dass man sie öffnen kann */
.bw-teil > summary{position:relative;padding-right:44px}
.bw-teil > summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--ink-mid);border-bottom:2px solid var(--ink-mid);transform:rotate(-45deg);transition:transform .2s var(--kurve)}
.bw-teil[open] > summary::after{transform:rotate(45deg);margin-top:-8px}
.bw-teil > summary:hover::after{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){:root:not([data-bewegung="voll"]) .bw-teil > summary::after{transition:none}}:root[data-bewegung="ruhig"] .bw-teil > summary::after{transition:none}
/* Stellenseite: Hinweis auf die Unternehmensrecherche in Bewerbung und Gespräch */
.recherche-hinweis{margin:0 0 var(--s4);font-size:14.5px;color:var(--ink-mid)}

/* Reiter Unternehmen: die Recherche voll ausgeklappt, gut lesbar gerendert */
.recherche-stand{margin:0 0 var(--s4);font-size:13.5px;color:var(--ink-mid)}
.recherche-text{max-width:72ch;font:16px/1.65 var(--ui);color:var(--ink)}
.recherche-text h3{font:700 1.15rem/1.3 var(--display);margin:var(--s5) 0 var(--s2);color:var(--ink)}
.recherche-text h3:first-child{margin-top:0}
.recherche-text p{margin:0 0 var(--s3)}
.recherche-text ul,.recherche-text ol{margin:0 0 var(--s3);padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.recherche-text a{color:var(--hyp-ink);text-decoration:underline;text-underline-offset:2px}
/* Recherche: zehn feste Abschnitte, aufklappbar. Überschrift als Summary (mind. 44 px), Pfeil wie bei den Bewerbungs-Kacheln. */
.recherche-werkzeug{margin:0 0 var(--s4)}
.recherche-alle{min-height:44px}
.recherche-abschnitt{border-top:1px solid var(--rule)}
.recherche-abschnitt:last-of-type{border-bottom:1px solid var(--rule)}
.recherche-abschnitt > summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;padding:var(--s3) 44px var(--s3) 0;font:700 1.15rem/1.3 var(--display);color:var(--ink)}
.recherche-abschnitt > summary::-webkit-details-marker{display:none}
.recherche-abschnitt > summary::after{content:"";position:absolute;right:var(--s3);top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--ink-mid);border-bottom:2px solid var(--ink-mid);transform:rotate(-45deg)}
.recherche-abschnitt[open] > summary::after{transform:rotate(45deg);margin-top:-8px}
.recherche-abschnitt > summary:hover::after{border-color:var(--ink)}
.recherche-abschnitt > summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--rund-klein)}
@media (prefers-reduced-motion:no-preference){.recherche-abschnitt > summary::after{transition:transform .2s var(--kurve)}}
.recherche-inhalt{padding:0 0 var(--s4)}
.tiefenanalyse{margin-top:var(--s3)}
.tiefenanalyse .aktionen{margin-top:0}
.tiefenanalyse .leise{margin:var(--s2) 0 0}
.recherche-inhalt > :last-child{margin-bottom:0}
.recherche-bewegt{background:var(--raum-tint);border-radius:14px;border-top:0;padding:0 var(--s4);margin:var(--s2) 0}
@media (min-width:641px){.recherche-bewegt{padding:0 var(--s5)}}

/* Deine Abschlüsse (Profil) und Formale Voraussetzungen (Stelle) */
.abschluesse-liste{display:grid;gap:var(--s3);margin-top:var(--s4)}
.abschluesse-meldung:empty{display:none}
.abschluss-zeile{border:1px solid var(--rule);border-radius:var(--rund);padding:var(--s4);background:var(--surface)}
.abschluss-zeile label.feld{margin-bottom:var(--s3)}
.abschluss-zeile .raster2.abschluss-jahr-note{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.abschluss-zeile input[type=text],.abschluss-zeile select{min-height:44px}
.abschluss-zeile .aktionen{margin-top:0}
.abschluss-zeile .link{min-height:44px;display:inline-flex;align-items:center}
.abschluss-note-mit{margin-top:calc(-1 * var(--s2));margin-bottom:var(--s2)}
.abschluesse-stand{font-weight:600}
.formal-liste{display:grid;gap:var(--s3);margin:0 0 var(--s5)}
.formal-zeile{border:1px solid var(--rule);border-left:3px solid var(--rule-strong);border-radius:var(--rund);padding:var(--s3) var(--s4);background:var(--surface)}
.formal-zeile.f-gut{border-left-color:var(--ok-line)}
.formal-zeile.f-fehlt{border-left-color:var(--gap-line)}
.formal-zeile.f-fehlt.f-zwingend{border-left-color:var(--alarm-line)}
.formal-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.formal-anforderung{flex:1 1 220px;min-width:0;margin:0;font:700 16px/1.4 var(--ui)}
.formal-stempel{display:flex;flex-wrap:wrap;gap:var(--s2)}
.formal-hinweis{margin:var(--s2) 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-mid)}
.formal-link{margin:0 0 var(--s5)}
.formal-link .link{min-height:44px}
.linkedin-tipps{margin:var(--s6) 0 0}
.linkedin-tipps > summary{min-height:44px;display:flex;align-items:center}
.linkedin-tipps p{margin:0 0 var(--s3);max-width:62ch}
.linkedin-tipps ul{margin:0 0 var(--s4);padding-left:1.3em;display:flex;flex-direction:column;gap:var(--s2);max-width:62ch}
.linkedin-tipps .aktionen{margin-top:0}
.linkedin-tipps .aktionen .link{min-height:44px;display:inline-flex;align-items:center}
.linkedin-tipps .leise{margin:var(--s3) 0 0}

/* Deine Daten als PDF (#/daten): ein Bericht wie Papier, gespeichert über das Druckfenster.
   Bewusst hell in beiden Darstellungen. Farben aus der Palette Morgenrot (Design-Vertrag Version 2). */
@page bericht{size:A4;margin:16mm 15mm 18mm}
.bericht-leiste{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;margin:0 0 var(--s4)}
.bericht{--logo-du:#6CCFF6;--logo-ziel:#FFFFFF;--logo-rand:#001011;--logo-schnitt:#001011;page:bericht;max-width:820px;margin:var(--s5) auto 0;padding:44px 48px;background:#FFFFFF;color:#001011;border-radius:16px;box-shadow:0 1px 2px rgba(0,16,17,.06),0 12px 28px -16px rgba(0,16,17,.32);font:400 15px/1.55 "Figtree",system-ui,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bericht-kopf{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:20px;border-bottom:2px solid #001011}
.bericht-kopf svg{width:44px;height:44px;flex:none}
.bericht-kopf div{display:flex;flex-direction:column;line-height:1.15}
.bericht-marke{font:700 22px/1.1 "Quicksand",system-ui,sans-serif}
.bericht-slogan{font:600 13px/1.3 "Quicksand",system-ui,sans-serif;color:#4E5058}
.bericht h1{font:700 32px/1.15 "Quicksand",system-ui,sans-serif;letter-spacing:-.01em;margin:0 0 4px;color:#001011}
.bericht-unter{color:#4E5058;margin:0 0 10px}
.bericht-satz{color:#4E5058;margin:0 0 12px;max-width:68ch}
.bericht-inhalt{margin:14px 0 8px;padding-left:22px;columns:2;column-gap:28px;color:#001011}
.bericht-inhalt li{break-inside:avoid;margin:0 0 2px}
.bericht-abschnitt{margin-top:28px}
.bericht-abschnitt>h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--b-tint,#F5F7F8);color:#001011;font:700 19px/1.25 "Quicksand",system-ui,sans-serif;text-transform:none;letter-spacing:0;border:0;break-after:avoid}
.bericht-abschnitt>h2::before{content:"";width:14px;height:14px;flex:none;border-radius:4px;background:var(--b-voll,#E4E8EA);box-shadow:inset 0 0 0 1.5px #001011}
.bericht-eintraege{display:flex;flex-direction:column;gap:12px}
.bericht-eintrag{padding:12px 14px;border:1px solid #E4E8EA;border-radius:12px}
.bericht-eintrag h3{margin:0 0 8px;font:700 16px/1.3 "Quicksand",system-ui,sans-serif;color:#001011;text-transform:none;letter-spacing:0}
.bericht-felder{display:grid;grid-template-columns:minmax(110px,28%) minmax(0,1fr);gap:4px 14px;margin:0}
.bericht-felder.innen{grid-template-columns:minmax(0,1fr);gap:2px;padding-left:10px;border-left:2px solid #E4E8EA}
.bericht-felder.innen dd{margin-bottom:6px}
.bericht-felder .breit{grid-column:1/-1}
.bericht-felder dt.breit{margin-top:4px}
.bericht-felder dt{font-weight:700;font-size:13.5px;color:#4E5058}
.bericht-felder dd{margin:0;min-width:0;overflow-wrap:anywhere;color:#001011}
.bericht-teile{display:flex;flex-direction:column;gap:8px}
.bericht-liste{margin:0;padding-left:18px}
.bericht-lang{white-space:pre-wrap;margin:0}
.bericht-tabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.bericht-tabelle th,.bericht-tabelle td{text-align:left;padding:5px 8px;border-bottom:1px solid #E4E8EA;vertical-align:top;color:#001011}
.bericht-tabelle th{font-weight:700;color:#4E5058}
.bericht-fuss{margin:32px 0 0;padding-top:12px;border-top:1px solid #E4E8EA;font-size:12.5px;color:#62646C}
@media (max-width:640px){.bericht{padding:24px 18px}.bericht-inhalt{columns:1}.bericht-felder,.bericht-felder.innen{grid-template-columns:minmax(0,1fr)}}
@media print{.bericht{margin:0;padding:0;max-width:none;box-shadow:none;border-radius:0;font-size:12.5px}.bericht-felder dt{font-size:11.5px}.bericht-eintrag{break-inside:avoid-page}.bericht-abschnitt>h2{break-after:avoid-page}}

/* =====================================================================
   Version 2 · Schritt 2: Kopf mit Logo A (Design-Vertrag 5.3, Muster 01)
   Der Kopf ist eine schwebende Milchglas-Karte wie auf der Startseite.
   Unten eine schmale Linie: die Farbe des Raums, in dem Du gerade bist
   (Orientierung); mit Wirkton dessen Farbe.
   ===================================================================== */
.logo{display:block;overflow:visible}
.logo .logo-ziel{fill:var(--logo-ziel)}
.logo .logo-du{fill:var(--logo-du);stroke:var(--logo-rand);stroke-width:6}
.logo .logo-schnitt{fill:var(--logo-schnitt)}
.logo .logo-kante{fill:none;stroke:var(--logo-rand);stroke-width:6}
.logo.logo-einfarbig .logo-ziel,.logo.logo-einfarbig .logo-du{fill:none}

.kopf{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:12px 12px 0;pointer-events:none}
.kopf-innen{pointer-events:auto;position:relative;max-width:1180px;padding:10px 14px 10px 16px;border-radius:16px;
  background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:var(--schwebe), inset 0 0 0 1px var(--rule)}
/* Farbschein oben in der Raumfarbe: Der Glaskopf liegt darüber und kommt zur Geltung.
   Ohne Raum (Konto, Admin, Neu) Frozen Lake. Im Dunkeln leiser. */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:min(560px,75vh);z-index:-1;pointer-events:none;opacity:var(--aura-staerke);
  background:radial-gradient(55% 90% at 12% -10%,var(--aura) 0%,transparent 70%),radial-gradient(45% 80% at 92% -20%,var(--aura-2) 0%,transparent 70%)}
.marke{gap:10px;min-height:44px}
.marke .logo{width:30px;height:30px;flex:none}
.marke b{font:700 20px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.marke .beta{font:600 11px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--rule-strong);border-radius:999px;color:var(--ink-faint)}
@media (max-width:480px){
  .kopf{padding:8px 8px 0}
  .kopf-innen{padding:8px 10px 8px 12px;border-radius:14px}
  .marke .logo{width:28px;height:28px}
}
.willkommen-kopf .willkommen-logo{width:64px;height:64px;flex:none}
@media (max-width:480px){.willkommen-kopf .willkommen-logo{width:48px;height:48px}}

/* =====================================================================
   Version 2 · Schritt 3: Kartenstapel statt Treppe und Spirale (kartenstapel.js)
   Alles ist eine Karte: Raumkarten mit Ink-Kontur, Tönung der Raumfarbe,
   Logo als Wasserzeichen; noch nicht erreichte Räume zeigen dezent ihre
   Rückseite. Erledigtes plastisch, Offenes gläsern, das Jetzt gehoben.
   ===================================================================== */
:root{--ks-ruecken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='8' y='8' width='56' height='56' rx='16' fill='none' stroke='%230B6A8E' stroke-width='5'/%3E%3Crect x='36' y='36' width='56' height='56' rx='16' fill='none' stroke='%230B6A8E' stroke-width='5'/%3E%3Cpath d='M52 36H64V48A16 16 0 0 1 48 64H36V52A16 16 0 0 1 52 36Z' fill='%230B6A8E'/%3E%3C/svg%3E")}

/* Erledigt: plastisch, Licht oben links */

/* Jetzt: aufgedeckt und gehoben */

/* Kommt noch: Glas mit dezenter Rückseite */

/* Die Zusage: Ziel ganz unten; Gold erst, wenn sie da ist */

/* Zwischen den Zeilen: ruhiger Stapel dessen, was noch kommt */

/* „Wo stehst Du gerade?“ nach der Anmeldung: dieselben Karten mit Bild wie auf der Startseite */
.standort-karte{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left}
.standort-karte::before{content:"";grid-row:span 2;width:48px;height:32px;background:center / contain no-repeat}
.standort-karte b,.standort-karte span{grid-column:2}
.standort-karte[data-stand="fuehrung"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect x='17' y='1.5' width='14' height='13' rx='3.5' fill='%23F9EFFF' stroke='%23001011' stroke-width='1.8'/%3E%3Cpath d='M24 14.5v3M13 17.5h22M13 17.5v1.5M35 17.5v1.5' fill='none' stroke='%23001011' stroke-width='1.6' stroke-linecap='round'/%3E%3Crect x='6' y='19' width='14' height='11.5' rx='3.5' fill='%23E1F8FF' stroke='%23001011' stroke-width='1.8'/%3E%3Crect x='28' y='19' width='14' height='11.5' rx='3.5' fill='%23FFF0E0' stroke='%23001011' stroke-width='1.8'/%3E%3C/svg%3E")}
.standort-karte[data-stand="einstieg"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect x='16' y='4' width='16' height='24' rx='4' fill='%23E1F8FF' stroke='%23001011' stroke-width='1.8'/%3E%3C/svg%3E")}
.standort-karte[data-stand="wechsel"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect x='6' y='5' width='16' height='24' rx='4' transform='rotate(-12 14 17)' fill='%23F9EFFF' stroke='%23001011' stroke-width='1.8'/%3E%3Crect x='26' y='5' width='16' height='24' rx='4' transform='rotate(12 34 17)' fill='%23FFF0E0' stroke='%23001011' stroke-width='1.8'/%3E%3Crect x='16' y='3' width='16' height='24' rx='4' fill='%23E1F8FF' stroke='%23001011' stroke-width='1.8'/%3E%3C/svg%3E")}
.standort-karte[data-stand="rueckkehr"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect x='3' y='4' width='15' height='24' rx='4' fill='%23E1F8FF' stroke='%23001011' stroke-width='1.8'/%3E%3Cpath d='M21 16h6' stroke='%23001011' stroke-width='1.8' stroke-linecap='round' stroke-dasharray='1 4'/%3E%3Crect x='30' y='4' width='15' height='24' rx='4' fill='%23FFF0E0' stroke='%23001011' stroke-width='1.8'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-thema="hell"]) .standort-karte::before{filter:invert(1) hue-rotate(180deg)}}
:root[data-thema="dunkel"] .standort-karte::before{filter:invert(1) hue-rotate(180deg)}

/* Im Raum: der Farbschein in dessen Farben */
:root[data-raum]{--aura:var(--raum-voll);--aura-2:var(--raum-tint)}
body:has(.st-seite:not(.st-statisch))::before,:root:not([data-sitzung="ja"]) body:has(.st-statisch)::before,body:has(.bericht)::before{display:none}
@media print{body::before{display:none}}

/* Meine Stellen: sortieren (Prio, Neueste, Stand, Firma) */
.stellen-sortieren{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:0 0 var(--s4)}
.stellen-sortieren-name{font:600 13px/1.2 var(--ui);color:var(--ink-mid)}
.stellen-sortieren .seg button{min-height:44px;padding:0 14px}

/* =====================================================================
   Version 2 · Schritt 4: Erkenntnis-Karten (Wenden, Stellung, Ablegen)
   Vermutung ist Glas (hell, feiner Frozen-Lake-Rand). „Trifft zu“ macht die
   Karte plastisch in der Raumfarbe. Abgelegtes ist matt.
   ===================================================================== */
.einsicht{border-radius:20px;border:1.5px solid color-mix(in srgb,var(--hyp) 55%,var(--rule));background:color-mix(in srgb,var(--surface) 92%,var(--hyp-bg));box-shadow:var(--lift);transition:background-color .3s,border-color .3s,box-shadow .3s}
.einsicht[data-resonanz="ja"]{border:2px solid var(--ink);background:linear-gradient(150deg,var(--surface) 30%,color-mix(in srgb,var(--raum-tint) 70%,var(--surface)) 70%,var(--raum-voll));box-shadow:0 18px 34px -22px rgba(0,16,17,.55)}
.einsicht[data-resonanz="teils"]{border-style:dashed;border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.einsicht[data-resonanz="nein"]{border-color:var(--rule-strong)}
.kommentar-leiste .ablegen-knopf{margin-left:auto}
.bitte-schalter .bitte-ziele legend{font-weight:700;color:var(--ink)}
@media (prefers-reduced-motion: reduce){:root:not([data-bewegung="voll"]) .einsicht{transition:none}}:root[data-bewegung="ruhig"] .einsicht{transition:none}

/* Zwischen den Zeilen: geklärte Punkte zusammengeklappt auf eine Zeile */
.geklaert-klapp > summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;color:var(--ink-mid)}
.geklaert-klapp > summary::-webkit-details-marker{display:none}
.geklaert-klapp > summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.geklaert-klapp[open] > summary::after{transform:rotate(-135deg)}
.geklaert-klapp-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.geklaert-klapp[open] .geklaert-klapp-text{display:none}
@media (prefers-reduced-motion: reduce){:root:not([data-bewegung="voll"]) .geklaert-klapp > summary::after{transition:none}}:root[data-bewegung="ruhig"] .geklaert-klapp > summary::after{transition:none}

/* Einstieg: Wie fühlst Du Dich wohl in Wirkraum? (Darstellung, Bewegung, Übung) */
.einrichten-teil{margin-top:var(--s5)}
.einrichten-teil h2{margin:0 0 var(--s2)}
.einrichten-teil .hinweis{max-width:62ch;margin:0 0 var(--s3)}
.einrichten .thema-wahl button,.einrichten .bewegung-wahl button,.bewegung-wahl button{min-height:44px}
.konto-bewegung{margin:var(--s5) 0 var(--s2)}
.uebung{max-width:620px}
.uebung-karte{min-height:0}
.uebung-karte .einsicht-titel{font-size:22px}
.uebung-erklaerung{margin:var(--s3) 0 0;color:var(--ink-mid);font-size:15.5px;line-height:1.5;max-width:56ch}
.uebung .feld.kommentar{margin-top:var(--s3)}
.uebung .kommentar-leiste:has(> [hidden]:only-child){display:none}
.uebung-abgelegt{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:var(--s4) var(--s5);border:1.5px dashed var(--rule-strong);border-radius:20px;color:var(--ink-mid)}
.uebung-abgelegt p{margin:0}
.einrichten .aktionen{margin-top:var(--s6)}

/* Zustände neben Etiketten: auf einer Mittellinie (Zustand hat ein Zeichen, Stempel nicht) */
.formal-stempel{align-items:center}
.karte-kopf:has(> .zustand){align-items:center}

/* =====================================================================
   Version 0.30.0: Recherche ist freiwillig, Fertig-Zeile in „Als Nächstes“
   Nur Variablen, hell und dunkel kommen über sie. Tippflächen mindestens 44 px.
   ===================================================================== */
/* Freiwilliger Schritt in der Schrittleiste der Stelle: gestrichelt wie „später“ in der Wegleiste */
.sw-optional .sw-knopf{border-style:dashed;background:transparent}
.sw-optional .sw-marke{border-style:dashed;background:transparent}
.sw-optional .sw-text{font-style:italic}
/* Die Recherche als Option unter den Aktionen: ruhig, mit feiner gestrichelter Linie davor */
.recherche-option-zeile{margin-top:var(--s4);padding-top:var(--s3);border-top:1px dashed var(--rule-strong)}
.recherche-option{margin:0 0 var(--s2);font-size:14.5px;line-height:1.5;color:var(--ink-mid);max-width:62ch}
.recherche-option-zeile .aktionen{margin-top:var(--s2)}
.recherche-option-zeile .knopf,.recherche-option-zeile .link,.auftrag-fertig .link{min-height:44px}
.recherche-option-zeile .link,.auftrag-fertig .link{display:inline-flex;align-items:center}
/* Nebenwege in „Als Nächstes“ (etwa „Ohne Recherche vorbereiten“) ebenfalls mit 44 px Tippfläche */
.naechster .aktionen .link{min-height:44px;display:inline-flex;align-items:center}
/* Fertiger Auftrag: Zustand „belegt“ mit Link zum Ergebnis, ganz oben in „Als Nächstes“ */
.auftrag-fertig{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);margin:0 0 var(--s3);font-size:15px;line-height:1.4;color:var(--ink)}

/* =====================================================================
   Version 0.32.0 · Grundlagen
   Tippflächen, Lesbarkeit, Schreibung, Stilreste. Steht ganz am Ende, weil frühere
   Regeln dieselben Elemente setzen; nur Variablen, Abstände aus --s1 bis --s7.
   ===================================================================== */

/* Auswahlfelder und Schalter in Ink (hell wie dunkel) */
:root,input[type=checkbox],input[type=radio],progress{accent-color:var(--ink)}

/* ---- Tippflächen: Knöpfe mindestens 44 px, auf dem Handy 48 px ---- */
.knopf,.knopf.klein,.ansicht-knopf,.thema-knopf,.einladen-knopf,.menue-knopf,.bereich-tab,.chip,.seg button,.admin-reiter-knopf,
.menue-abmelden,.auftrag-pille,.reiter-leiste .reiter-knopf{min-height:44px}
.knopf:not(:has(.ziel)),.ansicht-knopf,.thema-knopf,.einladen-knopf,.menue-knopf,.bereich-tab,.chip:not(:has(small)),.seg button,.reiter-leiste .reiter-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
.knopf:has(.ziel){padding-block:var(--s2)}
.chip{text-align:left;justify-content:flex-start}
select,input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],input[type=search],input[type=url]{min-height:44px}
@media (max-width:640px){
  .knopf,.knopf.klein{min-height:48px}
  .einladen-knopf,.menue-knopf{min-height:44px}
}
/* Antwortknöpfe „Trifft zu · Teilweise · Eher nicht“ */
.resonanz .knopf,.resonanz-bereich.kompakt .resonanz .knopf,.kurz-gefragt .knopf{min-height:48px;padding-inline:var(--s4);font-size:15px}

/* Textlinks, die Handlungen sind: Trefferfläche 44 px, ohne die Zeile höher zu machen */
/* Trefferfläche 44 px aus der Zeilenhöhe: innen Luft, außen gleich viel zurück, die Zeile bleibt so hoch wie vorher */
.link,a.dach.zurueck-link,a.karte-titel,.korridor-schalter,.feld-zeile>a,main p>a:only-child,main td>a:only-child,a[href^="https://www.linkedin.com"],.d-groesse{
  display:inline-block;padding-block:calc((44px - 1lh) / 2);margin-block:calc((44px - 1lh) / -2)}
details.box>summary,details.warum>summary,.geklaert-klapp>summary,.stelle-mehr>summary{padding-block:calc((44px - 1lh) / 2);margin-block:calc((44px - 1lh) / -2)}
.link{font:600 15px/20px var(--ui);letter-spacing:0;text-transform:none;text-underline-offset:4px}
a.dach.zurueck-link{display:inline-block;font:600 15px/20px var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-mid)}
details.box>summary,details.warum>summary{font:600 15px/20px var(--ui);letter-spacing:0;text-transform:none}
details.box.richtung>summary,details.box.anrede>summary{padding-block:0;margin-block:0;min-height:44px}
.sw-knopf,.thema-wahl button,.bewegung-wahl button,.d-groesse{min-height:44px}

.admin-mail.link{font:600 14px/20px var(--ui)}
.knopf .ziel{font:500 14px/1.3 var(--ui);letter-spacing:0;text-transform:none;opacity:.85}

/* Wegleiste auf dem Handy: sichtbar bleibt die kleine Karte, getippt wird auf 44 x 44 px */

/* ---- Lesbarkeit: Hilfstexte 16 px, Meta-Zeilen mindestens 14 px ---- */
.hinweis.hinweis,.leise.leise,.recherche-option,.uebung-erklaerung,.lede.lede{font-size:16px;line-height:1.5}
.dach,.kachel-dach,.korridor-art,.richtung-titel,.einsicht-art,.admin-kosten-name,.gesehen-etikett,.menue-gruppe,.druck-hilfe-titel,
.st-seite .st-dach,.menue-darstellung-name,.naechster h2{font-size:14px;letter-spacing:.08em}
/* Etiketten, Spaltenköpfe und Beschriftungen: normale Schreibung, nicht gesperrt */
.feld-name,dl.zeilen dt,.stempel,.schlagwort,.admin-tabelle th,.vergleich th,.admin-name,.fehlt b,.chip small,.anlass-messer,.doppelt-bleibt,.beta,.marke .beta,.admin-anpassen h3,.frage-wo,.bw-vorlage-ats,.bw-palette-titel{
  font-size:14px;letter-spacing:0;text-transform:none}
.frage-wo,.richtung-titel{letter-spacing:0}
label.feld.frage .feld-name,label.feld.kommentar .feld-name{font-size:15px}
.schlagwort,.stempel,.anlass-name,.anlass-zahl,.zustand,.treffer-herkunft,.treffer-neu,.meta-siegel,.station-stand,.zeit-datum,.stellen-meta,.admin-zusatz,
.d-bname,.d-bzahl,.d-unter,.balken-zahl,.zahl,.einsicht-stand,.frage-warum,.st-pille,.st-marke-ok,
.chip,.bereich-tab,.richtung-chips .chip,.knopf.klein,.knopf.klein span,.seg button,.thema-wahl button,.bewegung-wahl button,.reiter-stand,.sw-marke,.d-groesse,.st-beta,.stellen-sortieren-name,.uebernimmt-herkunft,.uebernimmt-stand,.admin-reiter-zahl,.admin-trend,details.stelle-mehr>summary,p.fehlt,button.link,.ansicht-knopf,.thema-knopf,.einladen-knopf,.reiter-leiste .reiter-knopf,.einsicht-art,.korridor-kurz,pre.wortlaut,small{font-size:14px}

/* Haken und Zahlen in Karten bleiben ruhig groß genug */
.anlass-segmente i{height:10px}

/* ---- Stilreste ---- */
/* Karten ohne Statusfarbe: weicher Schatten statt dicker Seitenlinie (Muster 06) */
.karte:not(.luecke):not(.alarm):not(.neutral),.korridor{border-left:1px solid var(--rule);border-radius:var(--rund);
  box-shadow:0 1px 2px rgba(0,16,17,.05),0 10px 26px -16px rgba(0,16,17,.25)}
/* Wirkprofil-Messer der Korridore: Ink in drei Deckkraft-Stufen statt Wirkton-Farbe */
.anlass-segmente i.an{background:var(--ink);border-color:transparent}
.anlass-segmente[data-stufe="niedrig"] i.an{opacity:.4}
.anlass-segmente[data-stufe="mittel"] i.an{opacity:.7}
.anlass-segmente[data-stufe="hoch"] i.an{opacity:1}
/* Kopf auf dem Handy: Die Zahl am Menüknopf nennt jetzt, was sie zählt („13 Aufgaben“). Damit
   Logo, Einladen und Menü in eine Zeile passen, entfällt dort das Schild „Beta“ (es steht auf
   der Startseite und in der Version im Menü). */
.menue-knopf .zahl{white-space:nowrap}
@media (max-width:480px){.kopf .marke .beta,.kopf-innen .beta{display:none}.menue-knopf{padding-inline:var(--s3);gap:var(--s2)}}
/* Die Anzeigeart der Knöpfe oben darf „hidden“ und die Handy-Regel nicht aushebeln */
.knopf[hidden],.einladen-knopf[hidden],.menue-knopf[hidden],.ansicht-knopf[hidden],.thema-knopf[hidden],.bereich-tab[hidden],.chip[hidden],.seg button[hidden],.link[hidden]{display:none}
@media (max-width:520px){.rueckmeldung-kopf{display:none}.einladen-knopf .lang{display:none}}
@media (max-width:480px){
  .kopf-innen .menue-knopf{padding-inline:var(--s2);gap:var(--s2)}
  .kopf-innen .menue-knopf .zahl{padding-inline:var(--s1)}
  .kopf-innen .einladen-knopf{padding-inline:var(--s2)}
  .kopf-innen .einladen-knopf + .menue-knopf{margin-left:var(--s1)}
}

/* Reste aus der Messung */
.admin-kachel .admin-zusatz,.admin-zusatz,li .link,li.ok .link,li.teil .link{font-size:14px}
li .link{font-size:15px}
.mehr-liste .link{min-height:44px;margin-block:0;padding-block:0}
input[type=range]{min-height:44px}
.link-zeile{display:inline-block;padding-block:calc((44px - 1lh) / 2);margin-block:calc((44px - 1lh) / -2)}
ul.voraussetzungen li .link,.gefunden-beleg .link{font-size:14px}
.konto-erinnerung .bw-haken{min-height:44px}
/* Fließtext und Aufklapper: 16 px (Meta-Zeilen wie Herkunft, Datum, Stand bleiben bei 14 px) */
main dl.zeilen dd,main dd>p,main details.warum p,main ul.belegstellen li,main p.vorschlag-feld,main p.vorschlaege-intro,main p.recherche-hinweis,
main p.uebernimmt-text,main label.bw-haken,main details>summary,main .admin-insights li,main p.weg-warum,main p.frage-warum,main p.korridor-kurz,
main p.treffer-warum,main .huerden-leiste>p.leise,main .st-vertrauen li,main .st-erkenntnis__belege li,main .st-erg__art,main .st-erg__fuss,
main .st-pille,main .st-standort__klein,main .st-fuss__mehr .doc p,main p.vorschlag-quelle,main .hinweiskasten,main p.leise,main p.hinweis{font-size:16px}
details.box>summary,details.warum>summary{font-size:16px}
details.box.richtung>summary,details.box.anrede>summary,details.stelle-mehr>summary{font-size:16px}
.bw-haken{min-height:44px}
.bitte-an input,.bitte-ort input{accent-color:var(--ink)}
/* Wegleiste am Desktop: Schrift 14 px braucht Platz, daher kürzere Verbinder und weniger Abstand */


/* =====================================================================
   0.33.0 · Weg in drei Etappen
   Wegleiste (nav.wl), Übersicht „Dein Weg“ (.dw), Reiter unten am Handy,
   Hinweis „Fehlt noch“, ein Hauptknopf je Bildschirm.
   Farben nur aus Variablen, Abstände --s1 bis --s7, Bewegung nur beim Wechsel.
   ===================================================================== */

/* ---------- Wegleiste: drei Etappen als Klammern über den Räumen ---------- */
nav.wl{position:sticky;top:calc(var(--kopf-h,56px) + var(--s2));z-index:10;display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s2) var(--s3);margin:0 0 var(--s5);padding:var(--s3) var(--s4);
  background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);
  border:1px solid var(--rule);border-radius:16px;box-shadow:var(--schwebe)}
.wl-etappen{flex:1 1 0;min-width:0;list-style:none;margin:0;padding:0;display:flex;gap:var(--s3)}
.wl-etappe{flex:var(--n,1) 1 0;min-width:0;display:flex;flex-direction:column}
.wl-etappe[data-etappe="erkennen"],.wl-etappe[data-etappe="richtung"]{--n:2}
.wl-etappe[data-etappe="passung"]{--n:3}
.wl-etappe-name{position:relative;margin:0 0 var(--s2);padding:0 var(--s2) var(--s1);font:600 16px/1.3 var(--ui);color:var(--ink-mid);border-bottom:2px solid var(--ink-faint)}
.wl-etappe-name::before,.wl-etappe-name::after{content:"";position:absolute;bottom:-2px;width:2px;height:8px;background:var(--ink-faint)}
.wl-etappe-name::before{left:0}
.wl-etappe-name::after{right:0}
.wl-raeume{flex:1;list-style:none;margin:0;padding:0;display:flex;gap:var(--s1)}
.wl-raum{flex:1 1 0;min-width:0;display:flex}
.wl-link{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-height:60px;padding:var(--s1) var(--s1) var(--s2);border-radius:12px;text-align:center;text-decoration:none;color:var(--ink);line-height:1.2}
.wl-link:hover{background:var(--sunk)}
.wl-link[aria-current]::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:4px;border-radius:2px;background:var(--ink)}
.wl-karte{position:relative;flex:none;display:grid;place-items:center;width:24px;height:32px;border-radius:6px;font:700 16px/1 var(--ui);color:var(--ink-mid);
  background:color-mix(in srgb,var(--surface) 55%,transparent);border:1.5px dashed var(--ink-faint);transition:transform .35s ease-out,box-shadow .35s ease-out}
.wl-raum.jetzt .wl-karte{background:var(--raum-voll);border:2px solid var(--ink);box-shadow:0 0 0 3px var(--raum-voll);transform:translateY(-3px);color:var(--raum-auf)}
.wl-raum.fertig .wl-karte{background:var(--raum-voll);border:1px solid var(--ink);box-shadow:inset 1px 1px 0 var(--raum-tint),0 3px 6px -2px var(--rule-strong);color:var(--raum-auf)}
.wl-name{font:600 16px/1.2 var(--ui);overflow-wrap:anywhere;hyphens:auto}
.wl-raum:not(.jetzt):not(.fertig):not(.hier) .wl-name{color:var(--ink-mid)}
.wl-bitten{position:absolute;top:0;right:var(--s1);min-width:24px;height:24px;padding:0 var(--s1);display:grid;place-items:center;border-radius:12px;background:var(--hyp);color:var(--on-cyan);font:700 16px/1 var(--ui)}
.wl-zusage{flex:none;width:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);padding:var(--s2);border:1.5px dashed var(--ink-faint);border-radius:var(--rund);color:var(--ink-mid);text-align:center}
.wl-stern{font-size:24px;line-height:1;color:var(--ink-faint)}
.wl-zusage-name{font:600 16px/1.2 var(--ui)}
.wl-zusage.erreicht{border:2px solid var(--zusage);background:var(--zusage-bg);color:var(--ink)}
.wl-zusage.erreicht .wl-stern{color:var(--zusage)}
.wl-jetzt{display:none;flex-basis:100%;margin:0;font:600 16px/1.3 var(--ui);color:var(--ink)}
.wl-weiter{flex-basis:100%;display:flex;justify-content:flex-end}
/* Beim Scrollen wird die Leiste schmal: nur die Karten, der aktuelle Raum bleibt benannt */
.weg-eng nav.wl{padding-top:var(--s2);padding-bottom:var(--s2);row-gap:0}
.weg-eng .wl-etappe-name,.weg-eng .wl-zusage{display:none}
.weg-eng .wl-raum:not(.hier) .wl-name{display:none}
.weg-eng .wl-link{flex-direction:row;justify-content:center;min-height:44px;padding-bottom:var(--s1)}
.weg-eng .wl-weiter{flex-basis:auto;align-items:center}
.weg-eng .wl-etappen{align-items:center}

/* ---------- Dein Weg: Du und der Job, drei Etappen, ein Hauptknopf ---------- */
.dw{margin:0 0 var(--s5);padding:var(--s5);background:var(--surface);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--schwebe)}
.dw-kopf{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.dw-titel{flex:1 1 280px;min-width:0}
.dw-titel .lede{margin:0}
.dw-zusage{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s3) var(--s4);border:1.5px dashed var(--ink-faint);border-radius:var(--rund);color:var(--ink-mid)}
.dw-stern{font-size:24px;line-height:1;color:var(--ink-faint)}
.dw-zusage-text b{color:var(--ink)}
.dw-zusage.erreicht{border:2px solid var(--zusage);background:var(--zusage-bg);color:var(--ink)}
.dw-zusage.erreicht .dw-stern{color:var(--zusage)}
.dw-bildhuelle{margin:var(--s5) 0 var(--s4)}
svg.dw-bild{display:block;width:100%;height:auto;overflow:visible}
.dw-du{fill:var(--logo-du);filter:drop-shadow(0 5px 8px color-mix(in srgb,var(--ink) 22%,transparent))}
.dw-job{fill:var(--logo-ziel);stroke:var(--logo-rand);stroke-width:2}
.dw-schnitt{fill:var(--logo-schnitt)}
.dw-schnitt.zusage{fill:var(--zusage)}
.dw-kante{fill:none;stroke:var(--logo-rand);stroke-width:2}
.dw-platz{fill:none;stroke:var(--ink-faint);stroke-width:1.5;stroke-dasharray:6 6}
.dw-wort{font:700 16px var(--ui);fill:var(--ink)}
.dw-wort:nth-of-type(1){fill:var(--on-cyan)}
.dw-etappen{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:2fr 2fr 3fr;gap:var(--s4)}
.dw-etappe-name{position:relative;margin:0 0 var(--s3);padding:0 var(--s2) var(--s1);font:600 16px/1.3 var(--ui);color:var(--ink-mid);border-bottom:2px solid var(--ink-faint)}
.dw-etappe-name::before,.dw-etappe-name::after{content:"";position:absolute;bottom:-2px;width:2px;height:8px;background:var(--ink-faint)}
.dw-etappe-name::before{left:0}
.dw-etappe-name::after{right:0}
.dw-etappe.jetzt .dw-etappe-name{color:var(--ink);border-bottom-color:var(--ink)}
.dw-etappe.jetzt .dw-etappe-name::before,.dw-etappe.jetzt .dw-etappe-name::after{background:var(--ink)}
.dw-stationen{list-style:none;margin:0;padding:0;display:flex}
.dw-station{position:relative;flex:1 1 0;min-width:0}
.dw-station + .dw-station::before{content:"";position:absolute;top:22px;right:50%;width:100%;border-top:3px dashed var(--ink-faint)}
.dw-station.fertig + .dw-station::before{border-top-style:solid;border-top-color:var(--ink)}
.dw-link{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s1) var(--s2);text-align:center;text-decoration:none;color:var(--ink);line-height:1.25}
.dw-link:hover .dw-name{text-decoration:underline;text-underline-offset:4px}
.dw-punkt{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font:700 16px/1 var(--ui);background:var(--ground);border:2px dashed var(--ink-faint);color:var(--ink-mid);transition:transform .45s ease-out,box-shadow .45s ease-out}
.dw-station.jetzt .dw-punkt{background:var(--raum-voll);border:3px solid var(--ink);box-shadow:0 0 0 4px var(--raum-voll);color:var(--raum-auf);transform:translateY(-3px)}
.dw-station.fertig .dw-punkt{background:var(--raum-voll);border:2px solid var(--ink);color:var(--raum-auf)}
.dw-name{font:600 16px/1.25 var(--ui)}
.dw-detail{font:500 16px/1.3 var(--ui);color:var(--ink-mid)}
.dw-weiter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s5);padding:var(--s5);background:var(--raum-tint);border:1px solid var(--rule);border-radius:20px}
.dw-weiter-text{flex:1 1 320px;min-width:0}
.dw-weiter h2{margin:var(--s1) 0 var(--s2);padding:0;border:0;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink)}
.dw-weiter .dach{color:var(--ink-mid);margin:0}
.dw-weiter-satz{margin:0;max-width:56ch;color:var(--ink)}
.dw-aktion{margin:0}

/* ---------- Hinweis „Fehlt noch“: ruhig, mit Grund, ohne zu sperren ---------- */
.mindest-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin:0 0 var(--s5);padding:var(--s3) var(--s4);background:var(--sunk-2);border:1px solid var(--rule);border-radius:var(--rund)}
.mindest-hinweis .zustand{flex:none}
.mindest-satz{flex:1 1 280px;margin:0}
.mindest-hinweis .aktionen{margin:0;align-items:center}
.mindest-hinweis .link{min-height:44px;display:inline-flex;align-items:center}

/* ---------- Zwischen den Zeilen: eine Zahl, drei gleiche Antworten ---------- */
.karten-zahl{display:inline-block;margin:0 0 var(--s3);padding:var(--s1) var(--s3);border-radius:999px;background:var(--raum-tint);color:var(--ink);font:700 16px/1.4 var(--ui)}
.antwort-leiste{margin:0}
.antwort-leiste .resonanz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);max-width:560px}
.antwort-leiste .resonanz .knopf{width:100%;min-height:48px;padding-inline:var(--s2);font-size:16px;justify-content:center}
.spaeter-klaeren{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
.antwort-leiste .spaeter-klaeren{margin-top:var(--s2)}
.spaeter-zeile{margin:var(--s2) 0 0;text-align:center}
.einsicht-stand{font-size:16px}

/* ---------- Kasten „Als Nächstes“: genau ein Hauptknopf ---------- */
.naechster-profil h2{margin-bottom:var(--s2)}
.naechster-profil .weg-titel{margin-bottom:var(--s2)}

/* ---------- Job: eine Zeile für den Schritt, ein Menü für Prio und Status ---------- */
.stelle-meta-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--s2) var(--s3);margin:0 0 var(--s2)}
.stelle-meta{margin:0;color:var(--ink-mid);font-size:16px}
.stelle-steuer{align-items:center;margin:0}
.stelle-menue{position:relative}
.stelle-menue > summary{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--rule-strong);border-radius:var(--rund-klein);background:var(--surface);cursor:pointer;list-style:none;font:700 20px/1 var(--ui);color:var(--ink)}
.stelle-menue > summary::-webkit-details-marker{display:none}
.stelle-menue > summary:hover{background:var(--sunk)}
.stelle-menue-inhalt{position:absolute;z-index:12;left:0;top:calc(100% + var(--s1));width:max-content;max-width:min(320px,calc(100vw - 2 * var(--s4)));padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--rund);box-shadow:var(--schwebe)}
.stelle-menue-name{margin:var(--s2) 0 var(--s1);font:700 16px/1.3 var(--ui);color:var(--ink)}
.stelle-menue-name:first-child{margin-top:0}
.stellen-schritte{margin:0 0 var(--s4)}
.stellen-schritte-zeile{display:flex;align-items:center;gap:var(--s2);min-height:44px;cursor:pointer;list-style:none;font:600 16px/1.4 var(--ui);color:var(--ink-mid)}
.stellen-schritte-zeile::-webkit-details-marker{display:none}
.stellen-schritte-zeile::after{content:"";width:8px;height:8px;margin-left:var(--s1);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease-out}
.stellen-schritte[open] .stellen-schritte-zeile::after{transform:rotate(-135deg)}
.stellen-schritte .stellen-weg{display:flex;flex-direction:column;gap:var(--s1);margin:var(--s2) 0 0}
.stellen-schritte .sw-knopf{width:100%;justify-content:flex-start;font-size:16px;text-align:left}
.stellen-schritte .sw-schritt:not(.sw-jetzt) .sw-name,.stellen-schritte .sw-schritt .sw-text,.stellen-schritte .sw-name,.stellen-schritte .sw-text{display:inline}
.stellen-schritte .sw-text{font-size:16px;color:var(--ink-mid)}

/* ---------- Menü: dieselben Etappen wie die Leiste ---------- */
.menue{max-height:calc(100vh - var(--kopf-h,56px) - var(--s4));overflow-y:auto}
.menue-gruppe-lose{border-top:1px solid var(--rule);margin-top:var(--s2)}
nav.haupt a.fertig .menue-nr{background:var(--raum-voll);border-color:var(--ink);color:var(--raum-auf)}
nav.haupt a.jetzt .menue-nr{background:var(--raum-voll);border:2px solid var(--ink);box-shadow:0 0 0 2px var(--raum-voll);color:var(--raum-auf)}
nav.haupt a[data-schritt] .menue-nr{border-style:dashed}
nav.haupt a[data-schritt].fertig .menue-nr{border-style:solid}
nav.haupt .menue-text small{font-size:16px}

/* ---------- Handy: Reiter unten, Hauptknopf im Daumenbereich ---------- */
.reiterleiste{display:none}
@media (max-width:760px){
  html.mit-reitern{--reiter-h:64px}
  .reiterleiste:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:25;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--surface);border-top:1px solid var(--rule-strong)}
  .reiterleiste a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;color:var(--ink-mid);text-decoration:none;font:600 16px/1.1 var(--ui)}
  .reiterleiste a[aria-current]{color:var(--ink);font-weight:700}
  .reiterleiste a[aria-current]::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--ink)}
  .reiterleiste svg{flex:none}
  html.mit-reitern main{padding-bottom:calc(var(--reiter-h) + env(safe-area-inset-bottom,0px) + var(--s6))}
  html.mit-reitern .rueckmeldung-knopf,html.mit-reitern .toast{bottom:calc(var(--reiter-h) + env(safe-area-inset-bottom,0px) + var(--s3))}

  /* Wegleiste: kleine Karten, Etappen als Klammern, darunter eine Zeile „Etappe · Raum x von 7 · Name“ */
  nav.wl{top:calc(var(--kopf-h,56px) + var(--s1));gap:var(--s1) var(--s2);margin-bottom:var(--s4);padding:var(--s2);border-radius:14px}
  .wl-etappen{gap:var(--s2)}
  .wl-etappe-name{height:8px;margin-bottom:var(--s1);padding:0;font-size:0;color:transparent}
  .wl-raeume{gap:0}
  .wl-link{min-height:44px;padding:var(--s1) 0;justify-content:center}
  .wl-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wl-karte{width:16px;height:22px;border-radius:4px;font-size:0}
  .wl-karte::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .wl-raum.jetzt .wl-karte{transform:translateY(-2px);box-shadow:0 0 0 2px var(--raum-voll)}
  .wl-link[aria-current]::after{left:30%;right:30%;bottom:2px}
  .wl-zusage{display:none}
  .wl-jetzt{display:flex;align-items:baseline;gap:var(--s2);padding:0 var(--s1);font:700 20px/1.2 var(--display);color:var(--ink)}
  .wl-jetzt small{font:600 14px/1 var(--ui);color:var(--ink-mid)}
  .wl-bitten{top:2px;right:0}
  .weg-eng nav.wl{padding-top:var(--s1);padding-bottom:var(--s1)}
  .weg-eng .wl-jetzt{display:none}
  .wl-weiter{justify-content:stretch}
  .wl-weiter .knopf{width:100%;min-height:48px;justify-content:center}
  .weg-eng .wl-weiter{display:none}

  /* Dein Weg: die Stationen untereinander */
  .dw{padding:var(--s4);border-radius:16px}
  .dw-etappen{grid-template-columns:1fr;gap:var(--s4)}
  .dw-stationen{flex-direction:column}
  .dw-station + .dw-station::before{top:-8px;right:auto;left:21px;width:0;height:16px;border-top:0;border-left:3px dashed var(--ink-faint)}
  .dw-station.fertig + .dw-station::before{border-top:0;border-left-style:solid;border-left-color:var(--ink)}
  .dw-link{flex-direction:row;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s1) 0;text-align:left}
  .dw-link > .dw-name{flex:1 1 auto}
  .dw-detail{flex:none;max-width:40%;text-align:right}
  .dw-weiter{margin:0 0 var(--s4);padding:var(--s4)}
  .dw-weiter-text{flex:1 1 100%}
  .dw-aktion{margin:0;width:100%}
  .dw-aktion .knopf{width:100%;min-height:48px;justify-content:center}

  /* Kasten „Als Nächstes“: der Hauptknopf steht voll breit und 48 px hoch */
  .naechster > .aktionen .knopf.haupt{min-height:48px;flex:1 1 100%;justify-content:center}

  /* Zwischen den Zeilen: drei gleiche Antworten fest unten (mindestens 48 px hoch, 16 px Abstand) */
  .antwort-leiste{position:fixed;left:0;right:0;bottom:0;z-index:24;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--rule-strong);box-shadow:var(--schwebe);text-align:center}
  .antwort-leiste .resonanz{max-width:none}
  html:has(.antwort-leiste) main{padding-bottom:calc(168px + env(safe-area-inset-bottom,0px))}
  .stelle-meta-zeile{position:relative}
  .stelle-menue{position:static}
  .stelle-menue-inhalt{left:0;right:0;width:auto;max-width:none}
}
@media (max-width:760px){
  :root[data-thema="dunkel"] .wl-raum.jetzt .wl-karte{box-shadow:0 0 0 2px var(--raum-voll), 0 0 10px color-mix(in srgb,var(--raum-voll) 45%,transparent), 0 0 22px color-mix(in srgb,var(--raum-voll) 18%,transparent)}
}
@media (max-width:760px) and (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]) .wl-raum.jetzt .wl-karte{box-shadow:0 0 0 2px var(--raum-voll), 0 0 10px color-mix(in srgb,var(--raum-voll) 45%,transparent), 0 0 22px color-mix(in srgb,var(--raum-voll) 18%,transparent)}
}
@media (prefers-reduced-motion:reduce){:root:not([data-bewegung="voll"]) .wl-karte,:root:not([data-bewegung="voll"]) .dw-punkt,:root:not([data-bewegung="voll"]) .stellen-schritte-zeile::after{transition:none}}
:root[data-bewegung="ruhig"] .wl-karte,:root[data-bewegung="ruhig"] .dw-punkt,:root[data-bewegung="ruhig"] .stellen-schritte-zeile::after{transition:none}

/* =====================================================================
   Passt es in beide Richtungen? (Job prüfen, Design-Vertrag 5.4)
   Zwei Hälften: Du (Frozen-Lake-Tönung) und der Job (weiß, Ink-Rand). Handy: untereinander, Du zuerst.
   ===================================================================== */
.pass{margin:var(--s5) 0 var(--s6)}
.pass-kopf{display:flex;align-items:center;gap:var(--s4)}
.pass-logo{width:56px;height:56px;flex:none}
h2.pass-ueberschrift,h2.pass-vorab-titel{font:700 26px/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--ink);margin:0;padding:0;border:0}
h2.pass-vorab-titel{font-size:22px;margin-bottom:var(--s3)}
.pass-unter{color:var(--ink-mid);margin:var(--s1) 0 0;max-width:60ch}
.pass-haelften{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4);align-items:start}
.pass-haelfte{border-radius:16px;padding:var(--s5);min-width:0}
.pass-du{background:var(--du-tint)}
.pass-job{background:var(--surface);border:2px solid var(--ink)}
h3.pass-haelfte-titel{font:700 22px/1.25 var(--display);letter-spacing:0;margin:0}
.pass-haelfte-unter{color:var(--ink-mid);margin:var(--s1) 0 var(--s3)}
.pass-liste{list-style:none;margin:0;padding:0}
.pass-zeile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);padding:var(--s3) 0;border-top:1px solid var(--rule-strong);overflow-wrap:anywhere}
.pass-titel{font-weight:700}
.pass-text{color:var(--ink-mid)}
.pass-zitat{margin:0;padding:0 0 0 var(--s3);border-left:3px solid var(--rule-strong);color:var(--ink-mid);font-style:normal}
.pass .zustand{font-size:16px}
.pass-aktion{margin-top:var(--s2)}
.pass-aktion .knopf{font-size:16px}
.pass-urteil{margin:var(--s3) 0 0;padding-top:var(--s3);border-top:1px solid var(--rule-strong);font-weight:600}
.pass-mehr{color:var(--ink-mid);margin:var(--s3) 0 0}
.pass-vorab{margin:var(--s6) 0}
.pass-fragen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.pass-frage{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:var(--s3) var(--s4)}
.pass-frage-text{margin:0;font-weight:600}
.pass-frage-fuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s4)}
.pass-frage-fuss details.warum{margin:0}
.pass-frage-wann{color:var(--ink-mid);font-size:16px}
.pass-frage details.warum>summary{font:600 16px/1.4 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-mid)}
.pass-frage details.warum p{font-size:16px;color:var(--ink-mid)}
@media (max-width:760px){
  .pass-haelften{grid-template-columns:minmax(0,1fr)}
  .pass-haelfte{padding:var(--s4)}
  h2.pass-ueberschrift{font-size:22px}
  .pass-logo{width:44px;height:44px}
  .pass-aktion .knopf{width:100%;justify-content:center}
}
.pass-art{font:600 14px/1.4 var(--ui);color:var(--ink-mid)}
.pass-art{letter-spacing:.04em}

/* Vertiefung „Was Dich antreibt“ (0.35.0): freiwillig, ein Hauptknopf je Schritt, Fortschritt als Quadrate */
.nur-leser{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.preis-hinweis{margin-left:var(--s2)}
.antrieb-karte{background:var(--du-tint);border-radius:16px;padding:var(--s5);margin:var(--s4) 0 var(--s6);box-shadow:var(--lift);max-width:none;overflow-wrap:anywhere}
.antrieb-etikett{font:600 13px/1.4 var(--ui);letter-spacing:.04em;color:var(--ink-mid);margin:0 0 var(--s2)}
.antrieb-titel,.antrieb-schritt-titel{font:700 22px/1.3 var(--display);margin:0 0 var(--s2);text-transform:none;letter-spacing:-.01em;border:0;padding:0;color:var(--ink);text-wrap:balance}
.antrieb-schritt-titel:focus{outline:none}
.antrieb-schritt-titel:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.antrieb-unter{font-size:16px;line-height:1.55;color:var(--ink-mid);margin:0 0 var(--s3);max-width:62ch}
.antrieb-kopf{margin-bottom:var(--s3)}
.antrieb-quadrate{display:flex;gap:6px;margin:0 0 var(--s3)}
.antrieb-quadrat{width:14px;height:14px;border-radius:4px;border:2px solid var(--rule-strong);background:transparent;box-sizing:border-box}
.antrieb-quadrat.fertig{background:var(--ink);border-color:var(--ink)}
.antrieb-quadrat.jetzt{border-color:var(--ink);background:var(--surface)}
.antrieb-aktionen{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;margin-top:var(--s4)}
.antrieb-knopf{min-height:44px;font-size:16px;padding:10px 18px;border-radius:12px}
.antrieb-link{min-height:44px;display:inline-flex;align-items:center;font:600 16px/1.4 var(--ui);letter-spacing:0;text-transform:none;color:var(--ink-mid)}
.antrieb-regler{margin:var(--s3) 0 0;max-width:520px}
.antrieb-regler.aus{opacity:.5}
.antrieb-regler-reihe{display:flex;align-items:center;gap:var(--s4)}
.antrieb-regler input[type=range]{flex:1 1 auto;min-width:0;min-height:44px;accent-color:var(--hyp-ink)}
.antrieb-zahl{flex:none;min-width:2ch;text-align:center;font:700 40px/1 var(--display);color:var(--ink)}
.antrieb-enden{display:flex;justify-content:space-between;font-size:14.5px;color:var(--ink-mid);margin-top:2px}
.antrieb-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.antrieb-feld{background:var(--surface);border-radius:16px;padding:var(--s4);box-shadow:var(--lift);display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.antrieb-name{font:700 17px/1.3 var(--display);margin:0;text-transform:none;letter-spacing:0;border:0;padding:0}
.antrieb-satz{font-size:16px;line-height:1.5;color:var(--ink-mid);margin:0 0 var(--s2)}
.antrieb-stufen{display:flex;align-items:flex-end;gap:2px;margin-top:auto}
.antrieb-stufe{width:44px;height:48px;padding:0;background:transparent;border:0;border-radius:10px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;box-sizing:border-box}
.antrieb-stufe:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.antrieb-stufe-quadrat{display:block;border-radius:28%;border:2px solid var(--rule-strong);background:transparent;box-sizing:border-box}
.antrieb-stufe:hover .antrieb-stufe-quadrat{border-color:var(--hyp-ink)}
.antrieb-stufe.an .antrieb-stufe-quadrat{background:var(--hyp);border-color:var(--hyp-ink)}
.antrieb-stufe-quadrat.st1{width:14px;height:14px}.antrieb-stufe-quadrat.st2{width:19px;height:19px}.antrieb-stufe-quadrat.st3{width:24px;height:24px}.antrieb-stufe-quadrat.st4{width:29px;height:29px}.antrieb-stufe-quadrat.st5{width:34px;height:34px}
.antrieb-wort{margin:0;font:600 16px/1.4 var(--ui);color:var(--ink);min-height:1.4em}
.antrieb-wort.offen-wort{font-weight:400;color:var(--ink-faint)}
.antrieb-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0}
.antrieb-chip{font:500 16px/1.3 var(--ui);padding:10px 14px;border-radius:12px;background:var(--surface);color:var(--ink);border:2px solid var(--rule-strong);display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
.antrieb-chip.fest{background:var(--hyp);border-color:var(--hyp-ink);color:var(--on-cyan);font-weight:700;min-height:0;padding:6px 12px}
.antrieb-chip.gedaempft{background:transparent;color:var(--ink-faint);border-color:var(--rule)}
button.antrieb-chip{cursor:pointer;text-align:left}
button.antrieb-chip.an{background:var(--hyp);border-color:var(--hyp-ink);color:var(--on-cyan);font-weight:700}
button.antrieb-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.antrieb-zaehler{font:700 16px/1.4 var(--ui);margin:var(--s2) 0 0}
.antrieb-meldung{font-size:16px;color:var(--ink-mid);margin:var(--s1) 0 0;min-height:1.5em}
.antrieb-hinweis{font-size:16px;line-height:1.55;background:var(--hyp-bg);border-radius:12px;padding:var(--s3) var(--s4);margin:0 0 var(--s3);max-width:62ch}
.antrieb-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.antrieb-kachel{background:var(--hyp);color:var(--on-cyan);border-radius:16px;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1);box-shadow:var(--lift)}
.antrieb-kachel-etikett{font:600 13px/1.3 var(--ui);letter-spacing:.04em;text-transform:uppercase}
.antrieb-kachel-titel{font:700 20px/1.3 var(--display)}
.antrieb-gruppe{font:700 17px/1.35 var(--display);margin:var(--s4) 0 var(--s1);text-transform:none;letter-spacing:0;border:0;padding:0}
.antrieb-nutzen{font-size:16px;line-height:1.55;margin:var(--s4) 0 0;max-width:62ch;font-weight:600}
.antrieb-vergleich{font-size:16px;margin:var(--s2) 0 0;min-height:1.5em;font-weight:600}
.antrieb-naechster{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule-strong)}
.antrieb-naechster-text{font-size:16px;line-height:1.55;margin:0 0 var(--s2);max-width:62ch}
.antrieb-fuss{font-size:14.5px;color:var(--ink-mid);margin:var(--s5) 0 0;max-width:62ch}
@media (max-width:760px){
  .antrieb-karte{padding:var(--s4)}
  .antrieb-liste{grid-template-columns:minmax(0,1fr)}
  .antrieb-stufe{height:52px}
  .antrieb-knopf,.antrieb-aktionen .knopf{min-height:48px}
  .antrieb-aktionen .haupt{flex:1 1 100%;justify-content:center}
}
.antrieb-regler input[type=range]{border:0;background:transparent;padding:0;box-shadow:none}
.antrieb-regler input[type=range]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Hell/Dunkel umschalten: weich überblenden (thema.js, wechseln). Nur während des Wechsels. */
html.thema-wechsel::view-transition-old(root),html.thema-wechsel::view-transition-new(root){animation-duration:.35s;animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* Statischer Ladetext (index.html, in main): steht, bis die App eine Ansicht zeichnet; ohne Skript bleibt er mit dem noscript-Hinweis stehen */
.laedt{display:none;flex-direction:column;align-items:center;text-align:center;gap:var(--s2);padding:var(--s7) var(--s4)}
/* Der Ladetext steht nur für Angemeldete da (thema.js setzt data-sitzung); alle anderen sehen gleich die feste Startseite */
:root[data-sitzung="ja"] .laedt{display:flex}
.laedt-logo{width:56px;height:56px;margin-bottom:var(--s2)}
.laedt-wort{font:700 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);margin:0}
.laedt-satz{font:600 16px/1.5 var(--ui);color:var(--ink);margin:var(--s3) 0 0}
.laedt-hilfe{font:400 14.5px/1.5 var(--ui);color:var(--ink-mid);max-width:34ch;margin:0}
.laedt-noscript{font:400 16px/1.5 var(--ui);color:var(--ink);text-align:center;max-width:44ch;margin:var(--s6) auto;padding:0 var(--s4)}