/* nino web — das design-system „Ledger", nicht meine annäherung daran.
 *
 * Quelle: `design/claude-design.html`, turn 3 („spazio cockpit — the real app"),
 * von julian festgelegt. Dieselbe datei, aus der `CockpitUI/DesignTokens.swift`
 * kommt. Die werte unten sind dort ABGELESEN, nicht geschätzt: 34px/1.05 mit
 * -.028em für die kopfzeile, 15.5px/1.32 mit -.012em für den kartentitel,
 * 10.5px mono mit .09em für die kicker, 99px für jede pille, 10px radius und
 * 34px kantenlänge für die typ-kachel.
 *
 * Die drei prinzipien aus turn 3 gelten hier genauso, und sie erklären den
 * aufbau der seite:
 *
 *   1. DREI SEKUNDEN BIS „nichts braucht dich" — jede ansicht öffnet mit EINER
 *      zahl, nicht mit einem strom. Deshalb steht oben ein satz mit der anzahl
 *      und darunter erst die liste.
 *   2. NINO IST STANDARDMÄSSIG LEISE — was er allein erledigt hat, steht in
 *      grauem mono unter der liste; was er von dir braucht, in tinte darüber.
 *   3. AMBER HEISST GENAU EINES: das wartet auf dich.
 *
 * WAS HIER ANDERS IST ALS IN DER APP: die app ist bewusst nativ iOS. Diese
 * seite läuft auf windows und android. Also dieselbe typografie, dieselben
 * farben, dieselben bedeutungen — aber keine nachgebaute iOS-tableiste und
 * keine schwebende tab-pille. Was dort chrome war, ist hier seitenfluss.
 */

/* Die schriften liegen NEBEN der seite, nicht bei google. `style-src 'self'` in
 * der CSP wäre sonst nicht haltbar — und „zwischen der app und deinen daten
 * steht nichts" hört nicht bei den daten auf: eine schrift von einem fremden
 * host ist ein request mit IP und referrer bei jedem seitenaufruf. Beide
 * familien stehen unter der SIL OFL (`schrift/OFL-*.txt`), selbst-hosten ist
 * also ausdrücklich erlaubt. 101 kB für vier schnitte, als woff2. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../schrift/InstrumentSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../schrift/InstrumentSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../schrift/InstrumentSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../schrift/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --papier: #faf9f6;
  --flaeche: #fffdf9;
  --flaeche-hoch: rgba(20, 19, 15, 0.045);
  --linie: rgba(20, 19, 15, 0.07);
  --linie-knopf: rgba(20, 19, 15, 0.13);
  --schatten: 0 8px 24px rgba(20, 19, 15, 0.12);

  --tinte: #14130f;
  --text: #3d3a33;
  --text-still: #6e6a60;
  --text-leise: #8c877d;
  --text-label: #a09b92;
  --text-kicker: #a8a29a;
  --auf-tinte: #faf9f6;

  --amber: #f5a524;
  --amber-text: #8a6a21;
  --amber-flaeche: rgba(245, 165, 36, 0.16);

  --gruen: #2e7d5b;
  --gruen-text: #26694e;
  --gruen-flaeche: rgba(46, 125, 91, 0.1);

  --rot: #b3261e;
  --rot-flaeche: rgba(179, 38, 30, 0.1);

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --spalte: 40rem;
}

/* Dasselbe blatt bei anderem licht — die BEDEUTUNGEN bleiben. Julians regel für
 * die app war OLED-schwarz; auf einem laptop-browser ist das zu hart, deshalb
 * hier der warme tiefton. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0b0b0a;
    --flaeche: #131311;
    --flaeche-hoch: rgba(247, 245, 240, 0.07);
    --linie: rgba(247, 245, 240, 0.1);
    --linie-knopf: rgba(247, 245, 240, 0.2);
    --schatten: 0 8px 24px rgba(0, 0, 0, 0.5);

    --tinte: #f7f5f0;
    --text: #dcd8cf;
    --text-still: #a8a299;
    --text-leise: #938d84;
    --text-label: #7e7970;
    --text-kicker: #7e7970;
    --auf-tinte: #14130f;

    --amber-text: #edb35c;
    --amber-flaeche: rgba(245, 165, 36, 0.22);

    --gruen: #4fa57c;
    --gruen-text: #74c49c;
    --gruen-flaeche: rgba(46, 125, 91, 0.2);

    --rot: #e2776f;
    --rot-flaeche: rgba(179, 38, 30, 0.22);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- gerüst ------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}

.kopf-innen,
.huelle {
  max-width: var(--spalte);
  margin: 0 auto;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
}

.huelle {
  padding-top: 1.4rem;
  padding-bottom: 4rem;
}

/* Die wortmarke: tinte-kachel mit amber-„n", wie im system (turn 3, 3e). */
.marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 600 15px var(--sans);
  color: var(--tinte);
  letter-spacing: -0.012em;
}

/* Die wortmarke dreht NICHT mit dem rest mit.
 *
 * Sie ist im system tinte-kachel mit amber-„n". Wuerde sie den token folgen,
 * waere sie im dunkeln eine fast weisse kachel mit amber darauf — gesehen und
 * gemessen am 13.09.: ein heller fleck ohne kontrast, direkt neben dem wort.
 * Also dreht im dunkeln die PAARUNG statt der rolle: amber traegt, tinte
 * schreibt. Beide seiten behalten denselben zweiklang. */
.marke-kachel {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #14130f;
  color: #f5a524;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 10px var(--sans);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marke-kachel {
    background: #f5a524;
    color: #14130f;
  }
}

.marke small {
  font: 500 9.5px var(--mono);
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.schub { margin-left: auto; }

/* --- typografie --------------------------------------------------------- */

/* Die eine zahl, mit der jede ansicht öffnet — prinzip 1. */
.ansage {
  font: 600 34px/1.05 var(--sans);
  letter-spacing: -0.028em;
  color: var(--tinte);
  text-wrap: balance;
  margin: 0.4rem 0 1.3rem;
}

/* `pretty` statt `balance`: ein kartentitel ist oft dreizeilig, und balance
 * gleicht die zeilen dann auf kosten des sinns aus („Öffnungszeiten / auf der /
 * Website anpassen"). pretty vermeidet nur die schusterjungen. */
h1 {
  font: 600 30px/1.05 var(--sans);
  letter-spacing: -0.02em;
  color: var(--tinte);
  text-wrap: pretty;
  margin: 0.4rem 0 0.75rem;
}

.kicker {
  font: 500 10.5px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-kicker);
  margin: 0;
}

.mono {
  font-family: var(--mono);
  font-size: 0.84em;
  font-variant-numeric: tabular-nums;
}

.still { color: var(--text-still); }

/* --- karten ------------------------------------------------------------- */

.liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.karte {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 16px;
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.06s;
}

.karte:hover { border-color: var(--linie-knopf); }
.karte:active { transform: translateY(1px); }

/* Eine karte, die man NICHT antippen kann, darf auch nicht so aussehen. Sonst
 * tippt der kunde darauf, nichts passiert, und er lernt: die seite reagiert
 * manchmal nicht. */
.karte-still,
.karte-still:hover {
  cursor: default;
  background: transparent;
  border-style: dashed;
  border-color: var(--linie);
}

.karte-still:active { transform: none; }

/* Die typ-kachel links — 34px, radius 10, mono 9px (system 3a). */
.kachel {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 9px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--amber-flaeche);
  color: var(--amber-text);
}

.kachel-still { background: var(--flaeche-hoch); color: var(--text-leise); }
.kachel-gut { background: var(--gruen-flaeche); color: var(--gruen-text); }

.karte-koerper {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.karte-titel {
  font: 500 15.5px/1.32 var(--sans);
  letter-spacing: -0.012em;
  color: var(--tinte);
  text-wrap: pretty;
}

.karte-zeile {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-still);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prinzip 2: was nino allein erledigt hat, steht unter der liste in grauem
 * mono — sichtbar, aber nie laut. */
.erledigt-kopf {
  font: 600 10.5px var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-label);
  margin: 2.25rem 0 0.5rem;
}

.erledigt-zeile {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 13px;
  color: var(--text-leise);
}

.erledigt-zeile:last-child { border-bottom: none; }

.erledigt-zeile time {
  font: 500 10px var(--mono);
  color: var(--text-label);
  flex: none;
}

/* --- marken ------------------------------------------------------------- */

.mal {
  font: 500 9.5px var(--sans);
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  align-self: center;
}

.mal-wartet { background: var(--amber-flaeche); color: var(--amber-text); }
.mal-gut { background: var(--gruen-flaeche); color: var(--gruen-text); }
.mal-still { background: var(--flaeche-hoch); color: var(--text-leise); }

/* --- knöpfe ------------------------------------------------------------- */

.knopf {
  font: 500 14px var(--sans);
  border-radius: 99px;
  border: 1px solid var(--linie-knopf);
  background: transparent;
  color: var(--tinte);
  padding: 0 1.15rem;
  min-height: 46px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.knopf-klein {
  min-height: 34px;
  font-size: 12.5px;
  padding: 0 0.9rem;
}

.knopf:hover { background: var(--flaeche-hoch); }

.knopf-voll {
  background: var(--tinte);
  color: var(--auf-tinte);
  border-color: transparent;
}

.knopf-voll:hover { background: var(--tinte); opacity: 0.88; }

.knopf-rot {
  color: var(--rot);
  border-color: color-mix(in srgb, var(--rot) 32%, transparent);
}

.knopf-rot:hover { background: var(--rot-flaeche); }
.knopf:disabled { opacity: 0.45; cursor: default; }

.karte:focus-visible,
.knopf:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.knopf-reihe {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Die entscheidungs-leiste klebt unten — auf einem telefon ist der daumen dort,
 * und ein langer kartentext darf die entscheidung nicht wegschieben. */
.leiste {
  position: sticky;
  bottom: 0.5rem;
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  margin: 1.25rem 0 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 99px;
  box-shadow: var(--schatten);
}

.leiste .knopf {
  flex: 1;
  padding: 0 0.5rem;
  min-height: 44px;
}

/* --- formular ----------------------------------------------------------- */

.feld { display: block; margin-bottom: 0.9rem; }

.feld > span {
  display: block;
  margin-bottom: 0.35rem;
  font: 500 12.5px var(--sans);
  color: var(--text-still);
}

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  font: 400 15px var(--sans);
  color: var(--tinte);
  background: var(--flaeche-hoch);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  min-height: 46px;
}

textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--linie-knopf); }

/* --- blatt (kartenansicht) ---------------------------------------------- */

.blatt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 18px;
  padding: 1.15rem 1.15rem 1.3rem;
  margin: 0.85rem 0 0;
}

.volltext {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 1rem 0 0;
}

.zeilen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
  font-size: 13.5px;
}

.zeilen dt {
  font: 500 9.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-label);
  padding-top: 0.3rem;
}

.zeilen dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }

/* --- meldungen ---------------------------------------------------------- */

.meldung {
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 13.5px;
  line-height: 1.45;
}

.meldung-fehler { background: var(--rot-flaeche); color: var(--rot); }
.meldung-gut { background: var(--gruen-flaeche); color: var(--gruen-text); }
.meldung-hinweis { background: var(--flaeche-hoch); color: var(--text-still); }

.leer { padding: 2.5rem 0; color: var(--text-leise); font-size: 14px; }

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