/* ===================================================================
   Sachkundewerk — Design-System (hell + dunkel)
   Gleiche DNA wie die GBS-Suite: ruhige Flächen, kräftiger Akzent,
   Mono für Daten. WICHTIG: keine Inline-Styles (CSP: style-src 'self').
   =================================================================== */
:root{
  --bg:#EBEEF4; --flaeche:#FFFFFF; --flaeche-2:#F0F3F9; --flaeche-3:#E8ECF4;
  --rand:rgba(22,27,38,.10); --rand-stark:rgba(22,27,38,.18);
  --text:#161B26; --gedaempft:#586074; --blass:#8993A6;
  --akzent:#2563eb; --akzent-tief:#1d4ed8; --akzent-weich:rgba(37,99,235,.12); --akzent-2:#0891b2;
  --gut:#1D9E68; --gut-weich:rgba(29,158,104,.14);
  --warn:#B5791E; --warn-weich:rgba(181,121,30,.14);
  --krit:#CE4A63; --krit-weich:rgba(206,74,99,.13);
  --schatten:0 1px 2px rgba(22,27,38,.05), 0 10px 30px rgba(22,27,38,.08);
  --raster:rgba(22,27,38,.045);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --radius:14px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#080A0F; --flaeche:#151921; --flaeche-2:#1A1F2A; --flaeche-3:#222836;
    --rand:rgba(255,255,255,.08); --rand-stark:rgba(255,255,255,.15);
    --text:#EBEDF3; --gedaempft:#949CAD; --blass:#5A6274;
    --akzent:#5b8def; --akzent-tief:#93b4f7; --akzent-weich:rgba(91,141,239,.13); --akzent-2:#22b8d4;
    --gut:#57C08A; --gut-weich:rgba(87,192,138,.14);
    --warn:#E0A94D; --warn-weich:rgba(224,169,77,.13);
    --krit:#E86B7E; --krit-weich:rgba(232,107,126,.13);
    --schatten:0 1px 2px rgba(0,0,0,.45), 0 18px 50px rgba(0,0,0,.55);
    --raster:rgba(255,255,255,.04);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(1100px 560px at 88% -12%, var(--akzent-weich), transparent),
    repeating-linear-gradient(to right, var(--raster) 0 1px, transparent 1px 96px),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--akzent); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--akzent-tief)}
h1,h2,h3{line-height:1.2; letter-spacing:-.015em; margin:0 0 .4em}
h1{font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem)}
h2{font-size:1.15rem}
.mono{font-family:var(--mono); font-size:.92em}
.leise{color:var(--gedaempft)}
.umbruch{overflow-wrap:anywhere}

.bahn{width:min(1060px,100% - 2.5rem); margin-inline:auto}
.sprung{position:absolute; left:-9999px}
.sprung:focus{left:1rem; top:1rem; z-index:10; background:var(--flaeche); padding:.6rem 1rem; border-radius:10px}

/* Kopf ------------------------------------------------------------- */
.kopf{border-bottom:1px solid var(--rand); background:var(--flaeche); position:sticky; top:0; z-index:5}
.kopf-innen{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:66px}
.marke{display:inline-flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:650}
.marke-zeichen{width:30px; height:30px; color:var(--akzent)}
.marke-text{letter-spacing:-.02em}
.nav{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.nav-kunde{font-family:var(--mono); font-size:.8rem; color:var(--gedaempft); padding-right:.3rem}
.nav-link{color:var(--gedaempft); text-decoration:none; padding:.45rem .6rem; border-radius:9px; font-size:.95rem}
.nav-link:hover{color:var(--text); background:var(--flaeche-2)}
.nav-form{margin:0}

/* Knöpfe ----------------------------------------------------------- */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font:inherit; font-size:.95rem; font-weight:560; line-height:1;
  padding:.62rem 1rem; border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .12s ease, background .15s ease;
}
.knopf:hover{transform:translateY(-1px)}
.knopf:active{transform:none}
.knopf-gross{padding:.8rem 1.35rem; font-size:1rem}
.knopf-voll{background:var(--akzent); color:#fff}
.knopf-voll:hover{background:var(--akzent-tief); color:#fff}
.knopf-rand{background:transparent; border-color:var(--rand-stark); color:var(--text)}
.knopf-rand:hover{background:var(--flaeche-2); color:var(--text)}
.knopf-leise{background:transparent; color:var(--gedaempft); border-color:var(--rand)}
.knopf-leise:hover{background:var(--flaeche-2); color:var(--text)}
.knopfreihe{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem}

/* Inhalt ----------------------------------------------------------- */
.inhalt{flex:1; padding:clamp(2rem,1rem + 4vw,4rem) 0}
.augenbrauen{
  margin:0 0 .5rem; font-size:.75rem; font-weight:650; letter-spacing:.14em;
  text-transform:uppercase; color:var(--akzent);
}
.fuehrung{font-size:1.08rem; color:var(--gedaempft); max-width:62ch; margin:.2rem 0 0}

.held{padding:1rem 0 2.5rem; max-width:48rem}
.karten{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.karte{
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--radius);
  padding:1.25rem 1.3rem; box-shadow:var(--schatten);
}
.karte h2{font-size:1.02rem}
.karte p{margin:0; color:var(--gedaempft); font-size:.95rem}

/* Formulare -------------------------------------------------------- */
.formularseite, .meldeseite{
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--radius);
  padding:clamp(1.4rem,1rem + 2vw,2.4rem); box-shadow:var(--schatten);
  max-width:46rem; margin-inline:auto;
}
.formularseite-schmal, .meldeseite{max-width:32rem}
.formular{display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem}
.formular-schlank{margin-top:1rem}
.feldpaar{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.feld{display:flex; flex-direction:column; gap:.35rem; font-size:.9rem; color:var(--gedaempft)}
.feld em{font-style:normal; color:var(--akzent)}
.feld em.leise{color:var(--blass)}
.feld input{
  font:inherit; font-size:1rem; color:var(--text); background:var(--flaeche-2);
  border:1px solid var(--rand-stark); border-radius:10px; padding:.68rem .8rem; width:100%;
}
.feld input:focus-visible, .knopf:focus-visible, a:focus-visible, .haken input:focus-visible{
  outline:2px solid var(--akzent); outline-offset:2px;
}
.hilfe{margin:-.4rem 0 0; font-size:.85rem; color:var(--blass)}
.haken{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--gedaempft)}
.haken input{margin-top:.2rem; accent-color:var(--akzent); width:1rem; height:1rem}
.unterzeile{margin-top:1.4rem; font-size:.93rem; color:var(--gedaempft)}

.meldung{border-radius:11px; padding:.85rem 1rem; font-size:.95rem; margin:1.2rem 0 0}
.meldung-fehler{background:var(--krit-weich); border:1px solid var(--krit); color:var(--text)}
.meldung-dev{background:var(--warn-weich); border:1px dashed var(--warn); margin-top:1.5rem}
.meldung p{margin:.2rem 0}

/* Kundenbereich ---------------------------------------------------- */
.konto-kopf{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem}
.plakette{
  margin:0; font-size:.85rem; color:var(--gedaempft);
  background:var(--akzent-weich); border:1px solid var(--rand); border-radius:999px; padding:.45rem .9rem;
}
.tafelreihe{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.tafel{
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--radius);
  padding:1.3rem 1.4rem; box-shadow:var(--schatten);
}
.tafel-weit{margin-top:1rem}
.tafel p{color:var(--gedaempft); font-size:.95rem}
.datenliste{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.2rem; margin:.8rem 0 0; font-size:.95rem}
.datenliste dt{color:var(--blass)}
.datenliste dd{margin:0}

/* Fuß -------------------------------------------------------------- */
.fuss{border-top:1px solid var(--rand); background:var(--flaeche); font-size:.86rem; color:var(--gedaempft)}
.fuss-innen{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.1rem 0}
.fuss a{color:var(--gedaempft)}
.fuss-mitte{text-align:center}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .knopf:hover{transform:none}
}

/* === Onboarding-Assistent ========================================== */
.fortschritt-leiste{border-bottom:1px solid var(--rand); background:var(--flaeche-2)}
.schritte{display:flex; gap:.4rem; list-style:none; margin:0; padding:.7rem 0; flex-wrap:wrap; font-size:.85rem}
.schritt{display:flex; align-items:center; gap:.45rem; color:var(--blass); padding:.2rem .7rem .2rem .2rem}
.schritt-aktiv{color:var(--text)}
.schritt-nr{
  display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem;
  border-radius:50%; background:var(--flaeche-3); color:var(--blass);
  font-family:var(--mono); font-size:.78rem;
}
.schritt-aktiv .schritt-nr{background:var(--akzent); color:#fff}

.gruppe{border:1px solid var(--rand); border-radius:var(--radius); padding:1.1rem 1.2rem; margin:0}
.gruppe legend{padding:0 .4rem; font-weight:600; font-size:.95rem}
.wahlliste{display:grid; gap:.6rem}
.wahlreihe{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.wahl{
  display:flex; gap:.7rem; align-items:flex-start; cursor:pointer;
  border:1px solid var(--rand-stark); border-radius:11px; padding:.75rem .9rem; background:var(--flaeche-2);
}
.wahl:hover{border-color:var(--akzent)}
.wahl input{margin-top:.25rem; accent-color:var(--akzent); width:1.05rem; height:1.05rem; flex:none}
.wahl span{display:flex; flex-direction:column; gap:.15rem}
.wahl strong{font-weight:580; font-size:.97rem}
.wahl small{color:var(--gedaempft); font-size:.86rem; line-height:1.35}
.wahl:has(input:checked){border-color:var(--akzent); background:var(--akzent-weich)}

.feld-kurz{max-width:12rem}
.feld-weit{flex:1}
.feld select{
  font:inherit; font-size:1rem; color:var(--text); background:var(--flaeche-2);
  border:1px solid var(--rand-stark); border-radius:10px; padding:.68rem .8rem; width:100%;
}
.code-feld{letter-spacing:.5em; font-size:1.5rem !important; text-align:center}
.zeilen{display:grid; gap:.8rem}
.zeile{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* === Listen, Plaketten, Meldungen ================================== */
.liste-schlicht{list-style:none; margin:.6rem 0 1.2rem; padding:0; display:grid; gap:.7rem}
.liste-schlicht li{
  border:1px solid var(--rand); border-radius:11px; padding:.75rem .9rem;
  background:var(--flaeche-2); font-size:.95rem;
}
.zeile-mit-aktion{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.badges{display:flex; gap:.4rem; flex-wrap:wrap; margin:.6rem 0 0}
.plakette-klein{
  display:inline-block; font-size:.78rem; padding:.2rem .6rem; border-radius:999px;
  background:var(--flaeche-3); color:var(--gedaempft); border:1px solid var(--rand);
}
.plakette-akzent{background:var(--akzent-weich); color:var(--akzent-tief); border-color:transparent}
.plakette-gut{background:var(--gut-weich); color:var(--gut); border-color:transparent}
.meldung-gut{background:var(--gut-weich); border:1px solid var(--gut); color:var(--text)}
.meldung-warn{background:var(--warn-weich); border:1px solid var(--warn); color:var(--text)}
.tafel h2{margin-bottom:.8rem}
.tafel form{margin-top:1rem}

/* === Verwaltung & Preise =========================================== */
.block-rand{border:1px solid var(--rand); border-radius:var(--radius); padding:1.1rem 1.2rem; margin-bottom:1.2rem}
.ausklapp{border:1px dashed var(--rand-stark); border-radius:var(--radius); padding:.9rem 1.1rem; margin-top:1rem}
.ausklapp summary{cursor:pointer; font-weight:580}
.ausklapp[open] summary{margin-bottom:.6rem}
.feld textarea{
  font:inherit; font-size:.97rem; color:var(--text); background:var(--flaeche-2);
  border:1px solid var(--rand-stark); border-radius:10px; padding:.68rem .8rem; width:100%; resize:vertical;
}
.preise{margin-top:2.5rem}
.preise-kopf{font-size:1.25rem; margin-bottom:1rem}
.preis{font-size:1.5rem; margin:.3rem 0 .2rem}
.karte-hervor{border-color:var(--akzent); box-shadow:0 0 0 1px var(--akzent), var(--schatten)}
.merkmale{margin:.7rem 0 1.1rem; padding-left:1.1rem; color:var(--gedaempft); font-size:.93rem}
.merkmale li{margin:.25rem 0}


/* === Aufgaben-Checklisten (Phase 2) ================================ */
.reiter{display:flex; gap:.5rem; flex-wrap:wrap; margin:1.2rem 0}
.reiter-link{
  display:inline-block; padding:.5rem .9rem; border-radius:999px; text-decoration:none;
  background:var(--flaeche-2); border:1px solid var(--rand); color:var(--text); font-size:.9rem;
}
.reiter-link:hover{border-color:var(--akzent); color:var(--akzent-tief)}

.fortschritt{display:flex; align-items:center; gap:.8rem; margin:.8rem 0 1.2rem; flex-wrap:wrap}
.fortschritt-zeile{margin:.5rem 0}
.fortschritt-name{min-width:8rem; font-weight:560}
.balken{flex:1; min-width:140px; height:10px; border-radius:999px; background:var(--flaeche-3); overflow:hidden}
.balken-fuellung{display:block; height:100%; background:var(--akzent); border-radius:999px}
.balken-0{width:0%}
.balken-5{width:5%}
.balken-10{width:10%}
.balken-15{width:15%}
.balken-20{width:20%}
.balken-25{width:25%}
.balken-30{width:30%}
.balken-35{width:35%}
.balken-40{width:40%}
.balken-45{width:45%}
.balken-50{width:50%}
.balken-55{width:55%}
.balken-60{width:60%}
.balken-65{width:65%}
.balken-70{width:70%}
.balken-75{width:75%}
.balken-80{width:80%}
.balken-85{width:85%}
.balken-90{width:90%}
.balken-95{width:95%}
.balken-100{width:100%}

.gruppentitel{margin:1.6rem 0 .6rem; font-size:1rem; color:var(--gedaempft);
  text-transform:uppercase; letter-spacing:.08em; font-weight:650}
.aufgabenliste{list-style:none; margin:0; padding:0; display:grid; gap:.9rem}
.aufgabe{
  border:1px solid var(--rand); border-left:3px solid var(--blass); border-radius:12px;
  padding:.95rem 1.1rem; background:var(--flaeche-2);
}
.aufgabe-beantragt{border-left-color:var(--warn)}
.aufgabe-erledigt{border-left-color:var(--gut)}
.aufgabe-kopf{display:flex; justify-content:space-between; gap:.8rem; flex-wrap:wrap; align-items:flex-start}
.aufgabe-titel{font-weight:580}
.aufgabe-marken{display:flex; gap:.35rem; flex-wrap:wrap}
.aufgabe-text{margin:.5rem 0 .3rem; font-size:.94rem; color:var(--gedaempft)}
.aufgabe-warnung{
  margin:.5rem 0; font-size:.9rem; background:var(--warn-weich); border:1px solid var(--warn);
  border-radius:9px; padding:.55rem .75rem;
}
.aufgabe-form{display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; margin-top:.8rem}
.feld-inline{margin:0}
.statusknoepfe{display:flex; gap:.35rem; flex-wrap:wrap}
.knopf-status{
  background:var(--flaeche-3); color:var(--gedaempft); border:1px solid var(--rand);
  font-size:.86rem; padding:.5rem .8rem;
}
.knopf-status:hover{color:var(--text)}
.status-aktiv{background:var(--flaeche-solid,var(--flaeche)); color:var(--text); border-color:var(--rand-stark)}
.status-aktiv-gelb{background:var(--warn-weich); color:var(--text); border-color:var(--warn)}
.status-aktiv-gruen{background:var(--gut-weich); color:var(--text); border-color:var(--gut)}
.plakette-warn{background:var(--warn-weich); color:var(--warn); border-color:transparent}
.plakette-krit{background:var(--krit-weich); color:var(--krit); border-color:transparent}
.kopierzeile{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin:.6rem 0}
.kopiertext{
  background:var(--flaeche-3); border:1px solid var(--rand); border-radius:9px;
  padding:.5rem .8rem; font-size:.92rem;
}
.hinweiszeile{font-size:.93rem; color:var(--gedaempft); background:var(--akzent-weich);
  border-radius:10px; padding:.6rem .85rem}

/* === Dokumente & Glocke ============================================ */
.dokumentenzeile{list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.3rem; font-size:.9rem}
.dokumentenzeile li{background:var(--flaeche-3); border-radius:8px; padding:.4rem .7rem}
.feld input[type=file]{
  font:inherit; font-size:.92rem; color:var(--text); background:var(--flaeche-2);
  border:1px dashed var(--rand-stark); border-radius:10px; padding:.6rem .7rem; width:100%;
}
.glocke{position:relative}
.glocke-knopf{
  cursor:pointer; list-style:none; padding:.45rem .7rem; border-radius:9px;
  border:1px solid var(--rand); background:var(--flaeche-2); font-size:.95rem;
}
.glocke-knopf::-webkit-details-marker{display:none}
.glocke-zahl{font-family:var(--mono); font-size:.8rem; color:var(--krit); font-weight:700}
.glocke-liste{
  position:absolute; right:0; top:2.6rem; z-index:20; width:min(22rem,80vw);
  background:var(--flaeche-solid,var(--flaeche)); border:1px solid var(--rand-stark);
  border-radius:12px; box-shadow:var(--schatten); padding:.6rem; display:grid; gap:.4rem;
}
.glocke-eintrag{
  display:grid; gap:.15rem; padding:.55rem .7rem; border-radius:9px; text-decoration:none;
  background:var(--flaeche-2); color:var(--text); font-size:.9rem;
}
.glocke-eintrag:hover{background:var(--flaeche-3); color:var(--text)}

/* === Portal-Oberfläche: Seitenleiste + Kopfzeile (Phase 4) ========= */
.verborgen{display:none}
.nur-lesen{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

body.mit-leiste{display:grid; grid-template-columns:250px 1fr; grid-template-rows:auto 1fr;
  grid-template-areas:"leiste kopf" "leiste inhalt"; min-height:100vh}
body.mit-leiste.leiste-zu{grid-template-columns:0 1fr}
.leiste{
  grid-area:leiste; background:var(--flaeche); border-right:1px solid var(--rand);
  padding:1rem .8rem; overflow-y:auto; position:sticky; top:0; max-height:100vh;
}
body.leiste-zu .leiste{display:none}
.marke-leiste{margin:.2rem .4rem 1.2rem; display:flex}
.leiste-nav{display:flex; flex-direction:column; gap:.15rem}
.leiste-titel{
  margin:1.1rem .6rem .35rem; font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint,var(--blass));
}
.leiste-link{
  display:flex; align-items:center; gap:.6rem; padding:.55rem .65rem; border-radius:9px;
  text-decoration:none; color:var(--gedaempft); font-size:.94rem;
}
.leiste-link:hover{background:var(--flaeche-2); color:var(--text)}
.leiste-aktiv{background:var(--akzent-weich); color:var(--akzent-tief); font-weight:560}
.leiste-icon{width:1.3rem; text-align:center; font-size:.95rem}
.leiste-bald{color:var(--blass); cursor:default}
.leiste-bald:hover{background:transparent; color:var(--blass)}
.leiste-bald em{
  font-style:normal; font-size:.7rem; margin-left:auto; padding:.1rem .4rem;
  border:1px solid var(--rand); border-radius:999px;
}
.kopf-portal{grid-area:kopf; position:sticky; top:0; z-index:6}
.kopf-portal-innen{width:auto; margin:0; padding:0 1.4rem; gap:1rem}
.leiste-schalter{padding:.45rem .7rem}
.status-marken{display:flex; gap:.35rem; flex-wrap:wrap; margin:0; flex:1}
.kopf-rechts{display:flex; align-items:center; gap:.7rem}
.kopf-profil{display:flex; flex-direction:column; text-decoration:none; color:var(--text); font-size:.85rem; line-height:1.25}
.kopf-name{font-weight:560}
.inhalt-portal{grid-area:inhalt; width:min(1100px,100%); margin-inline:auto; padding:2rem 1.4rem 3rem}

/* Schmale Fenster: Die Leiste liegt über dem Inhalt und ist standardmäßig zu —
   sie erscheint erst auf Klick, sonst verdeckt sie die Seite. */
@media (max-width:900px){
  body.mit-leiste{grid-template-columns:1fr; grid-template-areas:"kopf" "inhalt"}
  .leiste{display:none; position:fixed; z-index:30; width:250px; inset:0 auto 0 0;
    box-shadow:var(--schatten); max-height:100vh}
  body.mit-leiste.leiste-offen .leiste{display:block}
  .inhalt-portal{padding-inline:1rem}
}

/* === Kennzahlen & Kacheln ========================================== */
.kennzahlen{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:1.5rem 0}
.kennzahl{
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--schatten); display:grid; gap:.2rem;
}
.kennzahl-wert{font-size:1.6rem; font-weight:600; letter-spacing:-.02em}
.kennzahl-text{font-size:.86rem; color:var(--gedaempft)}
.kennzahl-warnung .kennzahl-wert{color:var(--warn)}
.bereichstitel{margin:2rem 0 .9rem; font-size:1.15rem}
.kacheln{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.kachel{
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--radius);
  padding:1.2rem 1.3rem; box-shadow:var(--schatten); display:flex; flex-direction:column; gap:.5rem;
}
.kachel h3{font-size:1.02rem; margin:0}
.kachel p{margin:0; font-size:.92rem; color:var(--gedaempft)}
.kachel-kpi{font-size:1.5rem; color:var(--text); font-weight:600}
.kachel-zeile{display:flex; justify-content:space-between; gap:.6rem; font-size:.9rem}
.kachel .knopf{margin-top:auto; align-self:flex-start}
.knopf-aus{opacity:.55; cursor:default}
.knopf-aus:hover{transform:none; background:transparent}

/* === Einführung (Product Tour) ===================================== */
.tour-schleier{position:fixed; inset:0; background:rgba(4,8,16,.62); z-index:100}
.tour-karte{
  position:absolute; width:min(380px,calc(100vw - 2rem));
  background:var(--flaeche-solid,var(--flaeche)); border:1px solid var(--rand-stark);
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.5); padding:1.2rem 1.3rem;
}
.tour-karte-mitte{top:50%; left:50%; transform:translate(-50%,-50%)}
.tour-karte h2{font-size:1.15rem; margin:.2rem 0 .5rem}
.tour-karte p{margin:0 0 .9rem; font-size:.94rem; color:var(--gedaempft); line-height:1.5}
.tour-zaehler{font-size:.75rem !important; letter-spacing:.12em; text-transform:uppercase;
  color:var(--akzent) !important; font-weight:650; margin-bottom:.2rem !important}
.tour-knoepfe{display:flex; gap:.5rem; flex-wrap:wrap}
.tour-hervor{
  position:relative; z-index:101; border-radius:12px;
  outline:3px solid var(--akzent); outline-offset:4px; background:var(--flaeche);
}

/* === Tabellen auf den Modulseiten (Phase 5) ======================== */
.tabelle{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.93rem}
.tabelle th, .tabelle td{
  text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--rand); vertical-align:top;
}
.tabelle thead th{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gedaempft);
  border-bottom:1px solid var(--rand-stark);
}
.tabelle tbody tr:last-child td{border-bottom:none}
.tabelle td.mono{white-space:nowrap}
@media (max-width:640px){
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td{display:block; width:100%}
  .tabelle thead{display:none}
  .tabelle tr{border-bottom:1px solid var(--rand); padding:.4rem 0}
  .tabelle td{border:none; padding:.25rem .2rem}
}

/* === Assistent (Phase 7) =========================================== */
.schweber{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:40;
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--akzent); color:#fff; text-decoration:none;
  padding:.7rem 1.1rem; border-radius:999px; box-shadow:var(--schatten);
  font-size:.92rem; font-weight:560;
}
.schweber:hover{background:var(--akzent-tief); color:#fff}
@media (max-width:520px){ .schweber-text{display:none} .schweber{padding:.8rem} }

.gespraech{list-style:none; margin:0 0 1.2rem; padding:0; display:grid; gap:.8rem}
.beitrag{border-radius:12px; padding:.8rem 1rem; display:grid; gap:.3rem}
.beitrag p{margin:0; white-space:pre-wrap; font-size:.95rem; line-height:1.55}
.beitrag-wer{font-size:.78rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--gedaempft)}
.beitrag-kunde{background:var(--akzent-weich); border:1px solid var(--rand)}
.beitrag-assistent{background:var(--flaeche-2); border:1px solid var(--rand)}

/* === Startseite (Phase 8) ========================================== */
.held-gross{max-width:54rem; padding:2.5rem 0 1.5rem}
.fuehrung-gross{font-size:1.18rem; max-width:48rem}
.abschnitt{padding:2.6rem 0; border-top:1px solid var(--rand)}
.abschnitt-hell{background:var(--flaeche-2); border-radius:var(--radius); padding:2.2rem 1.6rem; border-top:none}
.abschnitt-titel{font-size:1.35rem; margin-bottom:1.2rem}
.ablauf{counter-reset:schritt; list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ablauf li{counter-increment:schritt; display:grid; gap:.3rem; padding-left:2.6rem; position:relative}
.ablauf li::before{
  content:counter(schritt); position:absolute; left:0; top:0;
  width:1.9rem; height:1.9rem; border-radius:50%; background:var(--akzent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.9rem;
}
.ablauf span{color:var(--gedaempft); font-size:.94rem}
.fragen{display:grid; gap:.6rem}
.frage{background:var(--flaeche); border:1px solid var(--rand); border-radius:11px; padding:.9rem 1.1rem}
.frage summary{cursor:pointer; font-weight:560}
.frage p{margin:.7rem 0 0; color:var(--gedaempft); font-size:.95rem}
.textseite{
  background:var(--flaeche); border:1px solid var(--rand); border-radius:var(--radius);
  padding:clamp(1.4rem,1rem + 2vw,2.4rem); box-shadow:var(--schatten); max-width:52rem; margin-inline:auto;
}
.textseite h2{margin-top:1.6rem; font-size:1.1rem}
.textseite h3{margin-top:1.2rem; font-size:1rem}
.textseite p{color:var(--gedaempft); font-size:.96rem; line-height:1.6}
.fuss-portal{margin-top:2.5rem; border-top:1px solid var(--rand); background:transparent}
.fuss-portal .fuss-innen{padding:1.1rem 0}