/* KingPrawn — Oberfläche (06.11.2026, from the scratch). Tokens in :root, sonst keine Rohwerte (W4.7). Hell und dunkel,
   Fingermaß 44 px, Fokus sichtbar, Bewegung nur in der Brücke und nur mit Zweck. Marke und Begründung: doku/design/MARKE.md */
:root{
  --papier:#f4f6f3; --flaeche:#ffffff; --flaeche-2:#eceff0; --tinte:#15222a; --tinte-2:#4c5b64; --linie:#d6dcd9;
  --tiefsee:#145c73; --tiefsee-text:#ffffff; --garnele:#c43a52;
  --ok:#1a7a4c; --ok-flaeche:#e3f3ea; --wartet:#9a5b00; --wartet-flaeche:#fbefd9; --rot:#b4281e; --rot-flaeche:#fbe6e3;
  --radius:10px; --radius-s:6px; --griff:44px; --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:40px;
  --s1:13px; --s2:15px; --s3:17px; --s4:20px; --s5:26px; --s6:34px; --s7:44px; --dauer:160ms;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --papier:#0f181e; --flaeche:#172129; --flaeche-2:#1f2b34; --tinte:#e9eeeb; --tinte-2:#a7b3b9; --linie:#2b3a43;
  --tiefsee:#6fc0d6; --tiefsee-text:#0f181e; --garnele:#f0738a;
  --ok:#6fd39a; --ok-flaeche:#16342a; --wartet:#f2b65a; --wartet-flaeche:#3a2c12; --rot:#ff8a7f; --rot-flaeche:#3d1a18;
}}
@media (prefers-reduced-motion:reduce){:root{--dauer:0ms}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:500 var(--s2)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-variant-numeric:tabular-nums;overflow-x:clip}
a{color:var(--tiefsee);text-underline-offset:.15em}
h1,h2,h3,p{margin:0}
h1{font-size:var(--s5);font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h2{font-size:var(--s4);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--s3);font-weight:700}
.neben{color:var(--tinte-2);font-size:var(--s1)}
.lese{max-width:66ch}
:focus-visible{outline:3px solid var(--tiefsee);outline-offset:2px;border-radius:var(--radius-s)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf: Wortmarke, Brücke, Mandant, Konto */
.kopf{display:flex;align-items:center;gap:var(--a4);padding:var(--a3) clamp(var(--a4),4vw,var(--a6));background:var(--flaeche);border-bottom:1px solid var(--linie);flex-wrap:wrap}
.marke{display:inline-flex;align-items:center;gap:var(--a2);font-weight:700;font-size:var(--s3);letter-spacing:-.01em;color:var(--tinte);text-decoration:none}
.marke i{width:12px;height:12px;border-radius:50% 50% 50% 2px;background:var(--garnele);display:inline-block;transform:rotate(-45deg)}
.kopf .konto{margin-left:auto;display:flex;align-items:center;gap:var(--a2);flex-wrap:wrap}
.kopf select{min-height:40px;font:inherit;padding:0 var(--a3);border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--flaeche);color:var(--tinte)}

/* Die Brücke: drei Spannen, Navigation und Fortschritt */
.kopf nav{display:contents}
.bruecke{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--a1);flex:1 1 300px;max-width:520px;min-width:0;list-style:none;margin:0;padding:0}
.bruecke a{display:grid;gap:2px;padding:var(--a2) var(--a3);min-height:var(--griff);border-radius:var(--radius-s);color:var(--tinte-2);text-decoration:none;position:relative;font-size:var(--s1)}
.bruecke a b{color:var(--tinte);font-size:var(--s2)}
.bruecke a::after{content:"";position:absolute;left:var(--a3);right:var(--a3);bottom:4px;height:3px;border-radius:2px;background:var(--linie);transform-origin:left;transition:transform var(--dauer) ease-out,background var(--dauer)}
.bruecke a[data-stand="voll"]::after{background:var(--tiefsee)}
.bruecke a[data-stand="teil"]::after{background:var(--tiefsee);transform:scaleX(var(--anteil,.5))}
.bruecke a[aria-current="page"]{background:var(--flaeche-2)}
.bruecke a[aria-current="page"] b{color:var(--tiefsee)}
.bruecke a:hover{background:var(--flaeche-2)}

/* Seite und Bühne */
.seite{padding:clamp(var(--a4),4vw,var(--a6));max-width:1080px;margin:0 auto;display:grid;gap:var(--a5)}
.buehne{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:clamp(var(--a4),3vw,var(--a5));display:grid;gap:var(--a4);min-width:0;align-content:start}
.titel{display:flex;align-items:baseline;justify-content:space-between;gap:var(--a3);flex-wrap:wrap}
.reihe{display:flex;gap:var(--a2);align-items:center;flex-wrap:wrap}
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--a4)}

/* Knöpfe und Felder */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--a2);min-height:var(--griff);padding:0 var(--a4);border-radius:var(--radius-s);border:1px solid var(--tiefsee);background:var(--tiefsee);color:var(--tiefsee-text);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.knopf.leise{background:transparent;color:var(--tiefsee)}
.knopf.still{background:transparent;color:var(--tinte);border-color:var(--linie)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.feld{display:grid;gap:var(--a1);font-size:var(--s1);font-weight:700;color:var(--tinte-2)}
.feld input,.feld select,.feld textarea{font:inherit;font-weight:500;color:var(--tinte);min-height:var(--griff);padding:0 var(--a3);border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--flaeche);width:100%}
.feld textarea{padding:var(--a2) var(--a3)}
.meldung{font-size:var(--s1);color:var(--rot);min-height:1.4em}
.meldung.ok{color:var(--ok)}
.hinweis{font-size:var(--s1);color:var(--tinte-2)}

/* Ablage für die Datei */
.ablage{display:grid;place-items:center;gap:var(--a2);min-height:160px;padding:var(--a5);border:2px dashed var(--linie);border-radius:var(--radius);background:var(--flaeche-2);text-align:center;cursor:pointer}
.ablage.aktiv,.ablage:focus-visible{border-color:var(--tiefsee);background:var(--flaeche)}
.ablage b{font-size:var(--s3)}

/* Tabellen: eine Rahmung, Zebra, Zahlen rechts */
.tabelle{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--linie);border-radius:var(--radius-s);overflow:hidden;font-size:var(--s2)}
.tabelle th,.tabelle td{padding:var(--a2) var(--a3);text-align:left;vertical-align:middle;border-bottom:1px solid var(--linie)}
.tabelle th{font-size:var(--s1);color:var(--tinte-2);font-weight:700;background:var(--flaeche-2)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td.zahl,.tabelle th.zahl{text-align:right}
.tabelle select{min-height:40px;font:inherit;padding:0 var(--a2);border:1px solid var(--linie);border-radius:var(--radius-s);background:var(--flaeche);color:var(--tinte);max-width:100%}
.rollen{overflow:auto;max-width:100%}

/* Meter der Sinnschicht: Spur + Füllung in Garnele, Zahl daneben */
.meter{display:inline-grid;grid-template-columns:72px auto;gap:var(--a2);align-items:center;font-size:var(--s1);font-weight:700}
.meter i{height:8px;border-radius:4px;background:var(--flaeche-2);overflow:hidden;display:block}
.meter i::after{content:"";display:block;height:100%;width:var(--anteil,0%);background:var(--garnele);transition:width var(--dauer)}
.meter[data-stufe="hand"] i::after{background:var(--tiefsee)}

/* Zustand je Zeile */
.zustand{display:inline-flex;align-items:center;gap:var(--a2);font-size:var(--s1);font-weight:700;padding:2px var(--a2);border-radius:var(--radius-s)}
.zustand::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.zustand.angekommen{color:var(--ok);background:var(--ok-flaeche)}
.zustand.wartet,.zustand.sendet{color:var(--wartet);background:var(--wartet-flaeche)}
.zustand.abgelehnt{color:var(--rot);background:var(--rot-flaeche)}
.zustand.geplant,.zustand.still{color:var(--tinte-2);background:var(--flaeche-2)}

/* Kennzahlen: Zahl groß, Wort klein, nebeneinander */
.zahlen{display:flex;gap:var(--a5);flex-wrap:wrap}
.zahlen div{display:grid}
.zahlen b{font-size:var(--s6);font-weight:700;letter-spacing:-.02em;line-height:1}
.zahlen span{font-size:var(--s1);color:var(--tinte-2)}
.zahlen .ok b{color:var(--ok)} .zahlen .rot b{color:var(--rot)} .zahlen .wartet b{color:var(--wartet)}

/* Listen ohne Kartenkasten */
.liste{display:grid;gap:0}
.liste > *{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--a3);align-items:center;padding:var(--a3) 0;border-bottom:1px solid var(--linie);min-height:var(--griff)}
.liste > *:last-child{border-bottom:0}
.liste b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leer{color:var(--tinte-2);padding:var(--a4) 0}

/* Anmeldung und Preis (öffentliche Startseite) */
.start{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--a6);align-items:start}
.preis{display:grid;gap:var(--a2)}
.preis b{font-size:var(--s7);font-weight:700;letter-spacing:-.03em;line-height:1}
.preis small{font-size:var(--s1);color:var(--tinte-2)}
@media (width<=720px){.kopf{gap:var(--a2)}.bruecke{max-width:100%;order:3;flex-basis:100%}.zahlen{gap:var(--a4)}.zahlen b{font-size:var(--s5)}}