/* ============================================================================
   ankermann.tv – gemeinsames Design-System
   Liegt einmal unter www/larsde/assets und wird per Symlink in jede Domain
   eingehängt. Nichts hier ist projektspezifisch.

   Farben: Blau #00375D, Gold #C08A32, Teal #3CA7A3, Ghost White #F8F8F8,
   Spanish Grey #999999, Raisin Black #212121.

   Wichtig zu wissen: Gold, Teal und Grau tragen auf HELLEM Grund keinen Text
   (2,7–2,9:1). Im hellen Thema sind sie deshalb abgedunkelt. Blau verschwindet
   umgekehrt auf dunklem Grund (1,3:1) und dient dort nur als Fläche.
   ========================================================================== */

/* ---------- Schriften, lokal. Keine Fremd-Requests. ---------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/archivo-400_700-latin.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}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/archivo-400_700-latin-ext.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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-400-latin.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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-500-latin.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}

/* ---------- Token: dunkel ist die Grundeinstellung ---------- */
:root{
  --grund:#171A1C; --flaeche:#212121; --erhaben:#2A2F33; --tiefe:#00375D;
  --linie:#33383D; --linie-stark:#454B51;
  --text:#F8F8F8; --text-leise:#A8AEB4; --text-still:#767D84;
  --gold:#C08A32; --gold-hell:#D9A44E;
  --teal:#3CA7A3; --teal-hell:#5CC3BF;
  --warn:#D2604A; --gut:#4CAF7D;
  --gold-flaeche:rgba(192,138,50,.14);
  --teal-flaeche:rgba(60,167,163,.14);
  --warn-flaeche:rgba(210,96,74,.14);
  --gut-flaeche:rgba(76,175,125,.14);
  --logo-wort:#F8F8F8; --logo-anker:#C08A32;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);

  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r-klein:6px; --r:9px; --r-gross:14px;
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem;

  color-scheme:dark;
}

/* Der Nutzer stellt um; die Wahl liegt in localStorage und wird vor dem
   ersten Rendern gesetzt, damit nichts aufblitzt (siehe kopf.php). */
:root[data-thema="hell"]{
  --grund:#EDEEEF; --flaeche:#F8F8F8; --erhaben:#FFFFFF; --tiefe:#00375D;
  --linie:#DCDEE0; --linie-stark:#C2C6CA;
  --text:#212121; --text-leise:#5E646A; --text-still:#8C9298;
  --gold:#8A6120; --gold-hell:#6E4D19;      /* abgedunkelt: 5,2:1 auf Ghost White */
  --teal:#1F6F6C; --teal-hell:#175452;      /* abgedunkelt: 5,6:1 */
  --warn:#A83A26; --gut:#25704B;
  --gold-flaeche:rgba(192,138,50,.16);
  --teal-flaeche:rgba(60,167,163,.18);
  --warn-flaeche:rgba(210,96,74,.13);
  --gut-flaeche:rgba(76,175,125,.16);
  --schatten:0 1px 2px rgba(0,55,93,.08), 0 8px 24px rgba(0,55,93,.07);
  color-scheme:light;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}

/* Muss vor allen Komponenten stehen und !important tragen: Klassen wie .knopf
   (inline-flex) oder .merke (flex) haben hoehere Spezifitaet als der Standard
   des Browsers fuer [hidden] und wuerden versteckte Elemente sonst anzeigen. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:var(--ui);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--teal-hell)}
img,svg,video{max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;line-height:1.25;
  text-wrap:balance}
h1{font-size:clamp(1.45rem,3.4vw,2rem)}
h2{font-size:1.2rem}
h3{font-size:1rem;font-weight:600}
p{margin:0 0 var(--e3)}
p:last-child{margin-bottom:0}
.fliess{max-width:65ch}
.leise{color:var(--text-leise)}
.still{color:var(--text-still)}
.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums}
.etikett{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--text-still)}
.augenbraue{font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;color:var(--gold);margin:0 0 var(--e2)}

/* ---------- Icons ---------- */
.sym{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0}
.sym-gross{width:1.35em;height:1.35em}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.46rem .85rem;border-radius:var(--r);font-size:13.5px;font-weight:500;
  white-space:nowrap;border:1px solid var(--linie-stark);color:var(--text);
  text-decoration:none;transition:background .14s,border-color .14s,color .14s}
.knopf:hover{background:var(--erhaben);border-color:var(--text-still)}
.knopf:disabled{opacity:.5;cursor:not-allowed}
.knopf .sym{font-size:.95em}
.knopf-haupt{background:var(--gold);color:#17191A;border-color:var(--gold);font-weight:600}
.knopf-haupt:hover{background:var(--gold-hell);border-color:var(--gold-hell);color:#17191A}
:root[data-thema="hell"] .knopf-haupt{color:#FFF}
.knopf-still{border-color:transparent;color:var(--text-leise)}
.knopf-still:hover{background:var(--erhaben);color:var(--text)}
.knopf-weg{border-color:transparent;color:var(--warn)}
.knopf-weg:hover{background:var(--warn-flaeche);border-color:var(--warn)}
.knopf-gross{padding:.66rem 1.25rem;font-size:15px}
.knopf-ikon{width:32px;height:32px;padding:0;border-color:transparent;
  color:var(--text-leise)}
.knopf-ikon:hover{background:var(--erhaben);color:var(--text)}

/* ---------- Formularfelder ---------- */
.feld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:var(--e4)}
.feld > label{font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;color:var(--text-still)}
.feld .mit{font-size:12px;color:var(--text-still)}
input[type=text],input[type=search],input[type=email],input[type=password],
input[type=date],input[type=number],select,textarea{
  padding:.52rem .7rem;border-radius:var(--r);border:1px solid var(--linie-stark);
  background:var(--grund);color:var(--text);font:inherit;font-size:14px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal)}
input::placeholder,textarea::placeholder{color:var(--text-still)}
textarea{min-height:5.5rem;resize:vertical}

/* Schalter. aria-pressed trägt den Zustand, nicht eine Klasse. */
.schalter{width:38px;height:21px;border-radius:999px;background:var(--linie-stark);
  position:relative;flex-shrink:0;transition:background .18s}
.schalter i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--text);transition:transform .18s}
.schalter[aria-pressed="true"]{background:var(--teal)}
.schalter[aria-pressed="true"] i{transform:translateX(17px);background:var(--grund)}
.schalter-reihe{display:flex;align-items:center;justify-content:space-between;gap:var(--e4);
  padding:.55rem 0;border-top:1px solid var(--linie)}
.schalter-reihe span{font-size:14px}
.schalter-reihe small{display:block;font-size:12px;color:var(--text-still)}

/* ---------- Flächen ---------- */
.karte{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--r-gross);padding:var(--e4)}
.karte-still{background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--r);padding:var(--e3)}

/* Hinweiskasten. Farbe über die Zusatzklasse, nie über eine feste Farbe. */
.merke{display:flex;gap:.7rem;align-items:flex-start;padding:.8rem 1rem;
  border-radius:var(--r);background:var(--teal-flaeche);
  border:1px solid rgba(60,167,163,.28)}
.merke .sym{color:var(--teal-hell);margin-top:.15rem}
.merke p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-leise)}
.merke b{color:var(--text)}
.merke-warn{background:var(--warn-flaeche);border-color:rgba(210,96,74,.3)}
.merke-warn .sym{color:var(--warn)}
.merke-gut{background:var(--gut-flaeche);border-color:rgba(76,175,125,.3)}
.merke-gut .sym{color:var(--gut)}

/* ---------- Marken / Pillen ---------- */
.marke{display:inline-flex;align-items:center;gap:.32rem;padding:.14rem .5rem;
  border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;
  color:var(--text-still)}
.marke .sym{font-size:.95em}
.marke-gold{background:var(--gold-flaeche);color:var(--gold)}
.marke-teal{background:var(--teal-flaeche);color:var(--teal)}
.marke-warn{background:var(--warn-flaeche);color:var(--warn)}
.marke-gut{background:var(--gut-flaeche);color:var(--gut)}
:root[data-thema="hell"] .marke-gold{color:var(--gold-hell)}
:root[data-thema="hell"] .marke-teal{color:var(--teal-hell)}

/* ---------- Tabellen ---------- */
.tabellenraum{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse}
table.liste thead th{text-align:left;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text-still);font-weight:600;padding:.6rem 1rem;
  border-bottom:1px solid var(--linie);white-space:nowrap;background:var(--grund)}
table.liste tbody tr{border-bottom:1px solid var(--linie);transition:background .12s}
table.liste tbody tr:hover{background:var(--flaeche)}
table.liste tbody tr[aria-selected="true"]{background:var(--gold-flaeche)}
table.liste td{padding:.6rem 1rem;vertical-align:middle}
table.liste .r{text-align:right}
table.liste .zahl{font-size:12.5px;color:var(--text-leise)}

/* ---------- Fortschritt ---------- */
.spur{height:6px;border-radius:3px;background:var(--linie);overflow:hidden}
.spur > i{display:block;height:100%;width:0;background:var(--teal);
  transition:width .25s}
.spur-fertig > i{background:var(--gold)}
.wirbel{width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--linie-stark);border-top-color:var(--teal);
  animation:ak-dreh .9s linear infinite}
@keyframes ak-dreh{to{transform:rotate(360deg)}}

/* ---------- Dialog ---------- */
.schleier{position:fixed;inset:0;z-index:70;background:rgba(8,10,11,.72);
  display:grid;place-items:center;padding:var(--e4)}
.schleier[hidden]{display:none}
.blatt{width:min(500px,100%);max-height:88vh;overflow-y:auto;background:var(--flaeche);
  border:1px solid var(--linie-stark);border-radius:var(--r-gross);padding:var(--e5);
  box-shadow:var(--schatten)}
.blatt h2{margin-bottom:.25rem}
.blatt .unter{margin-bottom:var(--e4);font-size:13.5px;color:var(--text-still)}
.blatt-fuss{display:flex;gap:var(--e2);margin-top:var(--e5)}
.blatt-fuss .knopf{flex:1}

/* ---------- Kopfleiste ---------- */
.kopfleiste{display:flex;align-items:center;gap:var(--e4);padding:.7rem 1.1rem;
  background:var(--tiefe);color:#F8F8F8;border-bottom:1px solid rgba(0,0,0,.3)}
.kopfleiste .logo{height:23px;width:auto;display:block}
.kopfleiste .anhang{color:rgba(248,248,248,.55);font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;font-weight:600;padding-left:.7rem;
  border-left:1px solid rgba(248,248,248,.22)}
.kopfleiste .knopf-ikon{color:rgba(248,248,248,.75)}
.kopfleiste .knopf-ikon:hover{background:rgba(248,248,248,.12);color:#fff}
.kopfleiste .rechts{margin-left:auto;display:flex;align-items:center;gap:var(--e2)}
.kopfleiste input[type=search]{background:rgba(0,0,0,.22);color:#F8F8F8;
  border-color:rgba(248,248,248,.14)}
.kopfleiste input[type=search]::placeholder{color:rgba(248,248,248,.4)}

/* ---------- Hilfen ---------- */
.reihe{display:flex;align-items:center;gap:var(--e2)}
.reihe-um{flex-wrap:wrap}
.spalte{display:flex;flex-direction:column;gap:var(--e2)}
.schub{margin-left:auto}
.bahn{max-width:1400px;margin:0 auto;padding:var(--e5) clamp(1rem,4vw,1.6rem)}
.bahn-eng{max-width:940px}
.kurz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nur-screenreader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}