/* Stellium – gemeinsames Fundament für Konto und Anwendungen (Leitwert …).
   Kunstrichtung: docs/kunstrichtung.md (Verteiler, Aderfarben, Barlow/Barlow Condensed).
   Apple-Grundsätze: Material statt harter Linien, Rückmeldung beim Drücken, Federn statt fester Dauern,
   reduzierte Bewegung/Transparenz respektiert. */
@font-face { font-family: "Barlow"; src: url(schrift/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(schrift/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(schrift/barlow-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(schrift/barlow-condensed-600.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(schrift/barlow-condensed-700.woff2) format("woff2"); font-weight: 700 800; font-display: swap; }

/* Farben aus dem Verteiler (docs/kunstrichtung.md): RAL 7035 Lichtgrau, RAL 7016 Anthrazit, RAL 1003 Signalgelb.
   Gelb ist nur Füllung (Schrift darauf schwarz). Blau ist der N-Leiter und deshalb nie Bedienfarbe. */
:root {
  color-scheme: light dark;
  --grund: #e4e6e2;
  --flaeche: #f7f8f6;
  --flaeche-2: #fbfbfa;
  --text: #16191b;
  --text-2: #50575b;
  --text-3: #5f666a;
  --linie: rgba(22, 25, 27, 0.13);
  --akzent: #f5b000;
  --auf-akzent: #16191b;
  --akzent-weich: rgba(245, 176, 0, 0.22);
  --tint: var(--text);          /* Text-/Strichfarbe für „aktiv“ – hell: Textfarbe, dunkel: Gelb */
  --tint-weich: var(--akzent-weich);
  --gut: #17803f;
  --gut-weich: rgba(23, 128, 63, 0.13);
  --schlecht: #c42b2b;
  --schlecht-weich: rgba(196, 43, 43, 0.1);
  --warn: #b93f0c;
  --warn-weich: rgba(185, 63, 12, 0.12);
  /* Aderfarben (DIN EN 60445) – nur für Daten und Themen */
  --l1: #7b4a2b;  --l2: #23272a;  --l3: #8b8f90;  --n: #2563c9;  --pe: #2e9e4f;  --pe-gelb: #e5c400;
  --kupfer: #b8692f;
  --material: rgba(247, 248, 246, 0.8);
  --material-rand: rgba(255, 255, 255, 0.5);
  --schatten-1: 0 1px 0 rgba(22, 25, 27, 0.06), 0 0 0 1px rgba(22, 25, 27, 0.05);
  --schatten-2: 0 2px 6px rgba(22, 25, 27, 0.06), 0 14px 34px rgba(22, 25, 27, 0.12);
  --radius: 14px;
  --radius-klein: 10px;
  --rand: max(16px, env(safe-area-inset-left));
  --breite: 1080px;
  --schrift-schild: "Barlow Condensed", "Arial Narrow", sans-serif;
  font: 100%/1.55 "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #23292d; --flaeche: #2e353a; --flaeche-2: #293034; --text: #eef0ec; --text-2: #b0b7ba; --text-3: #959da0;
    --linie: rgba(238, 240, 236, 0.11); --tint: #f5b000; --akzent-weich: rgba(245, 176, 0, 0.16);
    --gut: #3cc26f; --gut-weich: rgba(60, 194, 111, 0.15); --schlecht: #ff6b6b; --schlecht-weich: rgba(255, 107, 107, 0.15);
    --warn: #ff8a4c; --warn-weich: rgba(255, 138, 76, 0.15);
    --l1: #a8693f; --l2: #d4d6d3; --n: #4c8bf0; --material: rgba(35, 41, 45, 0.82); --material-rand: rgba(255, 255, 255, 0.08);
    --schatten-1: 0 0 0 1px rgba(238, 240, 236, 0.06); --schatten-2: 0 0 0 1px rgba(238, 240, 236, 0.08), 0 18px 40px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --grund: #23292d; --flaeche: #2e353a; --flaeche-2: #293034; --text: #eef0ec; --text-2: #b0b7ba; --text-3: #959da0;
  --linie: rgba(238, 240, 236, 0.11); --tint: #f5b000; --akzent-weich: rgba(245, 176, 0, 0.16);
  --gut: #3cc26f; --gut-weich: rgba(60, 194, 111, 0.15); --schlecht: #ff6b6b; --schlecht-weich: rgba(255, 107, 107, 0.15);
  --warn: #ff8a4c; --warn-weich: rgba(255, 138, 76, 0.15);
  --l1: #a8693f; --l2: #d4d6d3; --n: #4c8bf0; --material: rgba(35, 41, 45, 0.82); --material-rand: rgba(255, 255, 255, 0.08);
  --schatten-1: 0 0 0 1px rgba(238, 240, 236, 0.06); --schatten-2: 0 0 0 1px rgba(238, 240, 236, 0.08), 0 18px 40px rgba(0, 0, 0, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: var(--grund); min-height: 100dvh; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
/* Links im Fließtext: Textfarbe, gelb unterstrichen wie ein markierter Leiter */
:where(p, li, small, label, .klein, .fuss, .unten, .meldung, td) a:not(.knopf) { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 500; }
:where(p, li, small, label, .klein, .fuss, .unten, .meldung, td) a:not(.knopf):hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
/* Browser-Oberflächen gehören zum Design */
::selection { background: var(--akzent); color: var(--auf-akzent); }
input, textarea { caret-color: var(--text); accent-color: var(--akzent); }
html { scrollbar-color: color-mix(in srgb, var(--text) 30%, transparent) transparent; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typografie: Tracking hängt an der Größe – groß enger, klein etwas weiter */
.gross, h1, .t1, h2, .t2 { font-family: var(--schrift-schild); font-weight: 700; margin: 0; text-wrap: balance; }
.gross { font-size: clamp(2.75rem, 6.6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.01em; }
h1, .t1 { font-size: clamp(2.25rem, 5vw, 3.375rem); line-height: 1; letter-spacing: -0.008em; }
h2, .t2 { font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1.04; letter-spacing: -0.004em; }
h3, .t3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: 0; font-weight: 600; margin: 0; }
.unter { font-size: clamp(1.1rem, 2vw, 1.375rem); line-height: 1.4; letter-spacing: -0.006em; color: var(--text-2); font-weight: 400; }
.klein { font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.002em; color: var(--text-2); }
.marke { font-family: var(--schrift-schild); font-size: 1rem; letter-spacing: 0.01em; font-weight: 600; color: var(--text-2); }
.zahl { font-variant-numeric: tabular-nums; }

/* Leiste oben: Material, Inhalt scrollt darunter durch */
.leiste { position: sticky; top: 0; z-index: 50; background: var(--material); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.leiste::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: var(--linie); opacity: var(--kante, 0); transition: opacity 0.2s; }
.leiste-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: 52px; display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--schrift-schild); font-size: 1.3125rem; font-weight: 700; letter-spacing: 0.005em; color: var(--text); text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.leiste nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.leiste nav a, .leiste nav button { font-size: 0.9375rem; font-weight: 500; color: var(--text); padding: 6px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; text-decoration: none; }
.leiste nav a:hover, .leiste nav button:hover { background: var(--linie); text-decoration: none; }
.leiste nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--akzent); border-radius: 8px 8px 0 0; }

/* Knöpfe: Rückmeldung sofort beim Drücken */
.knopf { -webkit-tap-highlight-color: transparent; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: var(--radius-klein); font-weight: 600; font-size: 1rem; letter-spacing: 0.005em; text-decoration: none;
  background: var(--akzent); color: var(--auf-akzent); transition: transform 100ms ease-out, filter 0.15s, background 0.2s; user-select: none; }
.knopf:hover { filter: brightness(1.08); text-decoration: none; }
.knopf:active { transform: scale(0.97); }
.knopf[disabled] { opacity: 0.4; cursor: default; transform: none; }
.knopf.zweit { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.knopf.leise { background: transparent; color: var(--text); padding: 0 12px; text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.knopf.gross-k { min-height: 54px; padding: 0 30px; font-size: 1.0625rem; }
.knopf.breit { width: 100%; }

.karte { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten-1); }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* Formulare */
.feld { display: grid; gap: 6px; }
.feld label { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.003em; }
.feld input { height: 48px; padding: 0 14px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--flaeche-2); font-size: 1.0625rem; transition: border-color 0.15s, box-shadow 0.15s; }
.feld input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 4px var(--akzent-weich); }
.feld .hinweis { font-size: 0.8125rem; color: var(--text-3); }
.feld.fehler input { border-color: var(--schlecht); }
.meldung { padding: 12px 14px; border-radius: var(--radius-klein); font-size: 0.9375rem; line-height: 1.45; }
.meldung.schlecht { background: var(--schlecht-weich); color: var(--schlecht); }
.meldung.gut { background: var(--gut-weich); color: var(--gut); }
.meldung.info { background: var(--akzent-weich); color: var(--text); }

/* Schalter */
.schalter { position: relative; width: 51px; height: 31px; flex: none; }
.schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.schalter span { position: absolute; inset: 0; background: var(--linie); border-radius: 31px; transition: background 0.2s; pointer-events: none; }
.schalter span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform 0.3s cubic-bezier(.3,1.3,.5,1); }
.schalter input:checked + span { background: var(--gut); }
.schalter input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }
.schalter input:checked + span::after { transform: translateX(20px); }

/* Fuß */
.fuss { max-width: var(--breite); margin: 64px auto 0; padding: 28px var(--rand) 48px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.8125rem; color: var(--text-3); }
.fuss a { color: var(--text-2); }
.fuss a:hover { color: var(--text); }

/* Erscheinen: Material kommt an (Unschärfe + Größe), nicht nur Deckkraft */
@keyframes erscheinen { from { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.erscheint { animation: erscheinen 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.12s !important; scroll-behavior: auto !important; }
  .erscheint { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .leiste { background: var(--flaeche); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --linie: color-mix(in srgb, var(--text) 40%, transparent); --text-2: color-mix(in srgb, var(--text) 85%, var(--grund)); --text-3: color-mix(in srgb, var(--text) 78%, var(--grund)); }
  .karte { box-shadow: 0 0 0 1.5px var(--text); }
}

/* Blatt (Sheet) */
.blatt { position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center; background: rgba(0, 0, 0, 0.32); }
/* <dialog>: Browser-Vorgaben (Rand, Innenabstand, Höchstmaße, Hintergrund) aus – das Blatt füllt den Schirm selbst. */
dialog.blatt { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: inherit; overscroll-behavior: contain; }
dialog.blatt:not([open]) { display: none; }
.blatt::backdrop { background: transparent; }
@media (min-width: 640px) { .blatt { place-items: center; } }
.blatt-innen { width: min(480px, 100%); max-height: 90dvh; overflow: auto; background: var(--flaeche); border-radius: 22px 22px 0 0; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); display: grid; gap: 16px; box-shadow: var(--schatten-2); }
@media (min-width: 640px) { .blatt-innen { border-radius: 22px; } }
.blatt-griff { width: 36px; height: 5px; border-radius: 5px; background: var(--linie); margin: -8px auto 0; }