/* Cockpit, Hausfarben aus dem Design System "Das Ruebezahl", Stand 21.09.2026.
   Werte nicht geraten, sondern aus project/tokens.json uebernommen.

   Eine Abweichung, bewusst und hier benannt: Das System kennt kein Gruen.
   Eine Ampel mit Rot/Gelb/Gruen gehoert nicht zu diesem Haus. Ruhe wird
   deshalb nicht gefaerbt, sondern still gelassen. Aufmerksamkeit ist Gold,
   Dringlichkeit ist das Bordeaux. */

:root{
  color-scheme: light dark;

  --marke-bordeaux:#6d1a42;
  --marke-gold:#c8a87d;
  --marke-rose:#b06d6e;
  --flaeche-basis:#ffffff;
  --flaeche-warm:#f5ede4;
  --flaeche-sand:#e3d3be;
  --flaeche-kuehl:#eceef1;
  --schrift-basis:#4a4a49;
  --schrift-leise:#6f6f6e;
  --linie:#e6e6e6;

  --abstand-1:4px; --abstand-2:8px; --abstand-3:16px;
  --abstand-4:24px; --abstand-5:40px; --abstand-6:64px;

  --radius-klein:3px; --radius-pille:50px;

  --sans:"OfficinaSansITC W07","Officina Sans",Optima,Candara,"Gill Sans",
         "Gill Sans MT","Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    --marke-bordeaux:#c98aa4;
    --marke-gold:#d8bc94;
    --marke-rose:#c98e8f;
    --flaeche-basis:#1e1218;
    --flaeche-warm:#2a1a22;
    --flaeche-sand:#3a2630;
    --flaeche-kuehl:#26202a;
    --schrift-basis:#ece3d9;
    --schrift-leise:#b9aca4;
    --linie:#3d2e36;
  }
}
:root[data-thema="dunkel"]{
  --marke-bordeaux:#c98aa4; --marke-gold:#d8bc94; --marke-rose:#c98e8f;
  --flaeche-basis:#1e1218; --flaeche-warm:#2a1a22; --flaeche-sand:#3a2630;
  --flaeche-kuehl:#26202a; --schrift-basis:#ece3d9; --schrift-leise:#b9aca4;
  --linie:#3d2e36;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px; line-height:24px; font-weight:400;
  color:var(--schrift-basis);
  background:var(--flaeche-basis);
  padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
@media (min-width:760px){ body{padding-bottom:var(--abstand-6)} }

/* ---------- Auszeichnung: Versalien mit weitem Sperrsatz ---------- */
.label{
  font-size:12px; line-height:16px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--schrift-leise);
}
.label-gross{font-size:14px;line-height:20px;letter-spacing:.12em;text-transform:uppercase}

h1,h2,h3{font-weight:400;margin:0}
h1{font-size:19.8px;line-height:28px}
h2{font-size:17px;line-height:26px;margin:var(--abstand-5) 0 var(--abstand-3)}
h2:first-of-type{margin-top:var(--abstand-4)}
p{margin:0 0 var(--abstand-3)}
a{color:var(--marke-bordeaux)}

/* ---------- Kopf ---------- */
header{
  border-bottom:1px solid var(--linie);
  padding:var(--abstand-3) var(--abstand-3) var(--abstand-2);
  padding-top:calc(var(--abstand-3) + env(safe-area-inset-top));
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--abstand-3);
  flex-wrap:wrap;
  position:sticky;top:0;z-index:5;
  background:color-mix(in srgb, var(--flaeche-basis) 88%, transparent);
  backdrop-filter:blur(12px);
}
header .titel{color:var(--marke-bordeaux);font-size:17px;letter-spacing:.12em;text-transform:uppercase}

main{padding:0 var(--abstand-3);max-width:840px;margin:0 auto}
@media (min-width:760px){ main{padding:0 var(--abstand-5)} }

/* ---------- Navigation: unten am Daumen, oben am Schreibtisch ---------- */
nav{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:flex;
  background:color-mix(in srgb, var(--flaeche-basis) 92%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}
nav a{
  flex:1;text-align:center;padding:var(--abstand-2) var(--abstand-1) var(--abstand-3);
  text-decoration:none;color:var(--schrift-leise);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
}
nav a[aria-current="page"]{color:var(--marke-bordeaux)}
nav a .punkt{display:block;width:5px;height:5px;border-radius:50%;margin:0 auto var(--abstand-1);background:transparent}
nav a[aria-current="page"] .punkt{background:var(--marke-bordeaux)}
@media (min-width:760px){
  nav{position:static;border-top:0;border-bottom:1px solid var(--linie);
      max-width:840px;margin:0 auto;padding:0 var(--abstand-5);gap:var(--abstand-4);
      background:none;backdrop-filter:none}
  nav a{flex:0;padding:var(--abstand-3) 0;text-align:left}
  nav a .punkt{display:none}
  nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--marke-bordeaux)}
}

/* ---------- Urteilszeile ---------- */
.urteil{
  background:var(--flaeche-warm);
  padding:var(--abstand-3);
  margin:var(--abstand-3) 0 var(--abstand-4);
  font-size:18px;line-height:28px;
  border-left:3px solid var(--marke-gold);
}
.urteil.still{border-left-color:var(--linie)}
.urteil.dringend{border-left-color:var(--marke-bordeaux)}

/* ---------- Kennzahlen ---------- */
.zahlen{display:grid;gap:1px;background:var(--linie);border:1px solid var(--linie);margin-bottom:var(--abstand-4)}
@media (min-width:560px){ .zahlen{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} }
.zahl{background:var(--flaeche-basis);padding:var(--abstand-3)}
.zahl .wert{font-size:28px;line-height:34px;color:var(--schrift-basis);font-variant-numeric:tabular-nums}
.zahl .wert.achtung{color:var(--marke-gold)}
.zahl .wert.dringend{color:var(--marke-bordeaux)}
.zahl .wert.leer{color:var(--schrift-leise)}
.zahl .dazu{font-size:12px;line-height:18px;color:var(--schrift-leise)}

/* ---------- Karten ---------- */
.karte{
  background:var(--flaeche-basis);
  border:1px solid var(--linie);
  padding:var(--abstand-3);
  margin-bottom:var(--abstand-2);
}
.karte.warm{background:var(--flaeche-warm);border-color:transparent}
.karte .kopf{display:flex;justify-content:space-between;gap:var(--abstand-2);align-items:baseline;flex-wrap:wrap}
.karte .kopf .was{font-size:17px;line-height:26px}
.karte .dazu{color:var(--schrift-leise);font-size:12px;line-height:18px;margin-top:var(--abstand-1)}
.karte .betrag{font-variant-numeric:tabular-nums;color:var(--marke-bordeaux);font-size:17px;white-space:nowrap}

/* ---------- Zustandspunkt: Kreis, die Handschrift des Hauses ---------- */
.punkt-z{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:var(--abstand-2);vertical-align:1px}
.z-still .punkt-z{background:var(--schrift-leise)}
.z-achtung .punkt-z{background:var(--marke-gold)}
.z-dringend .punkt-z{background:var(--marke-bordeaux)}
.z-leer .punkt-z{background:transparent;border:1px solid var(--linie)}

/* ---------- Tabelle: die einzige kuehle Flaeche ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
thead th{
  background:var(--marke-bordeaux);color:#fff;text-align:left;
  font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:var(--abstand-2) var(--abstand-3);
}
tbody td{padding:var(--abstand-2) var(--abstand-3);border-bottom:1px solid var(--linie)}
tbody tr:nth-child(even){background:var(--flaeche-kuehl)}
td.zahlenspalte{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Schaltflaechen: Pille oder Kante, nichts dazwischen ---------- */
button, .knopf{
  font:inherit;font-size:14px;
  padding:var(--abstand-2) var(--abstand-4);
  border-radius:var(--radius-pille);
  border:1px solid var(--marke-bordeaux);
  background:transparent;color:var(--marke-bordeaux);
  cursor:pointer;min-height:44px;
}
button.voll{background:var(--marke-bordeaux);color:var(--flaeche-basis);border-color:var(--marke-bordeaux)}
button:disabled{opacity:.45;cursor:default}
.knopfreihe{display:flex;gap:var(--abstand-2);flex-wrap:wrap;margin-top:var(--abstand-3)}

/* ---------- Hinweis ---------- */
.hinweis{
  background:var(--flaeche-kuehl);padding:var(--abstand-3);
  font-size:12px;line-height:18px;color:var(--schrift-leise);
  margin:var(--abstand-4) 0;
}
.fuss{color:var(--schrift-leise);font-size:12px;line-height:18px;margin:var(--abstand-5) 0 var(--abstand-4)}

@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto }
}

/* =====================================================================
   Schreibtisch-Aufbau, ab 1000px. Navigation als Spalte links, darunter
   Begruessung, Kennzahlenreihe, zwei Spalten.

   Warum erst ab 1000px: Darunter bleibt alles wie es war, unten am Daumen.
   Das Cockpit wird oefter am Telefon gelesen als am Schreibtisch, und eine
   Seitenleiste auf einem Telefon ist eine Schublade, die niemand aufzieht.

   Kein Gruen, keine weichen Ecken, keine erfundene Farbe. Die Seitenleiste
   ist warm hinterlegt, die aktive Zeile traegt das Bordeaux als Flaeche.
   ===================================================================== */

.marke{display:none}

@media (min-width:1000px){
  body{padding-left:236px;padding-bottom:var(--abstand-6)}

  nav{
    position:fixed;left:0;top:0;bottom:0;right:auto;width:236px;
    flex-direction:column;align-items:stretch;gap:2px;
    max-width:none;margin:0;
    padding:var(--abstand-4) var(--abstand-3);
    background:var(--flaeche-warm);
    border:0;border-right:1px solid var(--linie);
    backdrop-filter:none;
    overflow-y:auto;
  }
  .marke{
    display:block;
    padding:0 var(--abstand-3) var(--abstand-5);
    color:var(--marke-bordeaux);
  }
  .marke b{
    display:block;font-weight:400;font-size:17px;
    letter-spacing:.12em;text-transform:uppercase;
  }
  .marke span{
    display:block;font-size:12px;line-height:18px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--schrift-leise);
  }
  nav a{
    flex:0 0 auto;text-align:left;
    padding:var(--abstand-2) var(--abstand-3);
    min-height:44px;display:flex;align-items:center;
  }
  nav a[aria-current="page"]{
    box-shadow:none;
    background:var(--marke-bordeaux);
    color:var(--flaeche-basis);
  }
  nav a .punkt{display:none}

  header{
    max-width:none;margin:0;
    padding:var(--abstand-3) var(--abstand-5);
  }
  main{max-width:1240px;margin:0;padding:0 var(--abstand-5)}
}

/* ---------- Begruessung: die Seite sagt zuerst, wer und wann ---------- */
.gruss{margin:var(--abstand-4) 0 var(--abstand-3)}
.gruss h1{font-size:26px;line-height:34px;color:var(--schrift-basis)}
.gruss p{color:var(--schrift-leise);font-size:15px;margin:var(--abstand-1) 0 0}

/* ---------- Zwei Spalten: Hauptansicht und Meldeliste ---------- */
.spalten{display:grid;gap:var(--abstand-4);align-items:start}
@media (min-width:1000px){
  .spalten{grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr)}
}
.spalten > section > h2:first-child{margin-top:0}

/* Ein Block mit eigener Kante, wie die Karten im Entwurf, nur groesser.
   Traegt Tabelle oder Liste und macht den Spaltenaufbau sichtbar. */
.block{border:1px solid var(--linie);background:var(--flaeche-basis);padding:var(--abstand-3)}
.block > .kopfzeile{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--abstand-3);flex-wrap:wrap;margin-bottom:var(--abstand-3);
}
.block > .kopfzeile h2{margin:0;font-size:17px}
.block table{margin:0 calc(-1 * var(--abstand-3));width:calc(100% + 2 * var(--abstand-3))}

/* ---------- Notizfeld am Befund ----------
   Eckig wie alles hier, volle Breite, damit der Satz Platz hat. Wer einen
   Befund abnickt, erklaert oft in einem Nebensatz, warum er keiner ist, und
   genau dieser Nebensatz ist das Wertvollste an der ganzen Ruecklaufstrecke. */
.notiz{
  font:inherit;font-size:14px;width:100%;
  padding:var(--abstand-2) var(--abstand-3);
  margin-top:var(--abstand-1);
  border:1px solid var(--linie);border-radius:0;
  background:var(--flaeche-basis);color:var(--schrift-basis);
  min-height:44px;
}
.notiz:focus{outline:2px solid var(--marke-bordeaux);outline-offset:-2px}
.notiz::placeholder{color:var(--schrift-leise)}

/* ---------- Tagesauswahl ----------
   Pillen, weil sie Schaltflaechen sind. Der gewaehlte Tag traegt das
   Bordeaux als Flaeche, wie die aktive Zeile in der Seitenleiste. */
.tagwahl{display:flex;gap:var(--abstand-1);flex-wrap:wrap;align-items:center}
.tagwahl a{
  text-decoration:none;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:var(--abstand-1) var(--abstand-3);
  border:1px solid var(--linie);border-radius:var(--radius-pille);
  color:var(--schrift-leise);white-space:nowrap;line-height:22px;
}
.tagwahl a[aria-current="page"]{
  background:var(--marke-bordeaux);border-color:var(--marke-bordeaux);
  color:var(--flaeche-basis);
}
.tagwahl a.hat-befund{border-color:var(--marke-bordeaux);color:var(--marke-bordeaux)}
.tagwahl a.hat-befund[aria-current="page"]{color:var(--flaeche-basis)}