/* ============================================================
   Design-Grundlage — Tokens
   Einzige Quelle für Farbe, Schrift, Abstand, Layout.
   Nichts in Projekten hardcoden, was hier steht.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400&display=swap');

:root {
  /* Bildlaufleisten, Formularelemente und der Grund, den der Browser
     selbst zeichnet, folgen der Flächenleiter — nicht der Einstellung
     des Betriebssystems. Siehe die dunkle Variante weiter unten.       */
  color-scheme: light;

  /* --- Schrift ------------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Nur zwei Schnitte. 600/700 gibt es in diesem System nicht. */
  --weight-regular: 400;
  --weight-medium: 500;

  /* Größenskala, Verhältnis 1,25, Basis 16px */
  --fs-caption: 0.75rem;   /* 12px — Bildunterschrift, Fußnote     */
  --fs-label: 0.8125rem;   /* 13px — Formularlabel, Tabellenkopf   */
  --fs-body: 1rem;         /* 16px — Fließtext                     */
  --fs-lead: 1.25rem;      /* 20px — Vorspann, große Listen        */
  --fs-h3: 1.5625rem;      /* 25px                                 */
  --fs-h2: 1.9375rem;      /* 31px                                 */
  --fs-h1: 2.4375rem;      /* 39px                                 */
  --fs-display: 3.0625rem; /* 49px — nur Hero und Titelfolie       */

  --lh-tight: 1.15;        /* ab 25px aufwärts                     */
  --lh-snug: 1.4;          /* Vorspann, Listen                     */
  --lh-body: 1.7;          /* Fließtext                            */

  --ls-tight: -0.01em;     /* nur ab 25px aufwärts                 */
  --ls-mono: 0.06em;       /* Mono-Labels brauchen etwas Luft      */

  /* --- Flächenleiter ------------------------------------------ */
  /* Vier Stufen um den Seitengrund herum. Im Hellen liegen sie
     dicht beieinander — die Trennung macht die Linie, nicht der
     Sprung in der Fläche. Ein seitenbreiter Kopf soll ein ruhiger
     Streifen sein, kein schwarzer Riegel über hellem Papier.     */
  --surface-chrome: #EAE8E1;  /* Navigation, Sidebar, Footer      */
  --surface-page: #F2F1EC;    /* der Grund, auf dem alles liegt   */
  --surface-band: #EAE8E1;    /* Tabellenkopf, Abschnittsstreifen */
  --surface-card: #FCFBF8;    /* abgegrenzte Objekte              */

  /* --- Linien -------------------------------------------------- */
  --line: #E0DED6;            /* Haarlinie, Standard              */
  --line-strong: #D0CDC2;     /* Trennung, die etwas bedeutet     */
  --line-chrome: #C9C6BA;     /* Abschluss des Chrome-Streifens   */
  --border-width: 0.5px;

  /* --- Text ---------------------------------------------------- */
  --text: #121210;
  --text-secondary: #52524D;
  --text-muted: #6B6B66;
  --text-on-chrome: #121210;
  --text-on-chrome-muted: #52524D;   /* #6B6B66 ergäbe nur 4,37:1 */
  --text-on-accent: #FFFFFF;

  /* --- Akzent — Signal, keine Dekoration ----------------------- */
  /* Druckfähig gewählt: der Ton muss in CMYK reproduzierbar sein,
     sonst ist die Marke auf Papier eine andere als am Schirm.
     Ein Ton für alle Anwendungen. Der Akzent ist NICHT
     überschreibbar — bis 2.0.0 war er es, und genau daran ist es
     schiefgegangen: eine Anwendung nahm den Beispielblock samt
     seiner Dunkelwerte und hatte dunkelbraune Blöcke im hellen
     Blatt. Wiedererkennung trägt die Struktur, nicht die Farbe.  */
  --accent: #1A46A8;
  --accent-hover: #143885;
  --accent-surface: #E7EBFA;
  --accent-text: #1B3A9E;     /* Text auf --accent-surface        */

  /* --- Status -------------------------------------------------- */
  --success: #1F7A4D;
  --success-surface: #E3F0E8;
  --success-text: #145536;
  --warning: #A86B12;
  --warning-surface: #F7EDDB;
  --warning-text: #7A4D08;
  --danger: #B23124;
  --danger-surface: #F8E7E4;
  --danger-text: #8A2318;

  /* --- Datenreihen --------------------------------------------- */
  /* In dieser Reihenfolge vergeben. Alle Töne CMYK-reproduzierbar
     gewählt. Farbe nie als einziges Unterscheidungsmerkmal —
     Muster oder Beschriftung dazu, damit die Grafik auch in
     Schwarzweiß lesbar bleibt.                                   */
  --data-1: #1A46A8;
  --data-2: #0E9C8F;
  --data-3: #A8452B;
  --data-4: #6B6B66;
  --data-5: #A86B12;

  /* --- Abstand ------------------------------------------------- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2.5rem;    /* 40px */
  --space-7: 4rem;      /* 64px */
  --space-8: 6rem;      /* 96px */

  /* --- Layout -------------------------------------------------- */
  --radius: 4px;        /* Standard: klein wirkt technischer      */
  --radius-lg: 8px;     /* nur App-Shell und ganzseitige Container */
  --container: 1140px;
  --measure: 65ch;      /* Fließtext nie breiter                  */
  --gutter: var(--space-5);
  --grid-columns: 12;
  --control-height: 36px;   /* Zeiger und Tastatur                */

  /* --- Touch --------------------------------------------------- */
  /* Gilt in App-Ansichten, siehe das Kapitel dazu in den Regeln.
     Der Daumen ist ungenauer als der Zeiger: --control-height ist
     dort zu klein, und zwei Ziele ohne Abstand trifft er beide.  */
  --tap-min: 48px;          /* kleinstes Ziel, Kante wie Kante    */
  --tap-gap: var(--space-2);/* Mindestabstand zwischen zwei Zielen */
  --thumb-zone: 33dvh;      /* das untere Drittel, dort wird bedient */
  --app-width: 26rem;       /* App-Ansicht auf großem Schirm        */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  /* --- Rückmeldung über die Fläche ----------------------------- */
  /* Für „hat geklappt" und „hat nicht geklappt" darf ein großer Teil
     des Hintergrunds oder der ganze Bildschirm die Farbe annehmen.
     Sie bleibt nie: nach --feedback-hold blendet sie in
     --feedback-fade zum normalen Grund zurück.

     In beiden Varianten dieselben Töne, absichtlich: das ist ein
     Ereignis, keine Fläche. Es muss um Mitternacht dasselbe heißen
     wie um Mittag. Weiß darauf erreicht 5,3:1 bzw. 6,3:1.        */
  --feedback-ok: #1F7A4D;
  --feedback-fehler: #B23124;
  --feedback-text: #FFFFFF;
  --feedback-hold: 1200ms;   /* so lange steht die Farbe          */
  --feedback-fade: 400ms;    /* so lange dauert der Rückweg       */

  /* --- Inaktiv ------------------------------------------------- */
  /* Was gerade nicht geht, wird nicht ausgeblendet, sondern grau
     überlagert: der Platz bleibt, die Anordnung bleibt ruhig, und
     der Daumen muss sich nichts neu merken. Lesbar bleiben muss es
     trotzdem — man soll erkennen, was gerade nicht geht.         */
  --inactive-opacity: 0.5;
  --inactive-grayscale: 1;

  /* Kein Schatten in diesem System. Die Flächenleiter trägt die
     Tiefe. Ausnahme: Fokusring und echte Overlays.               */
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--accent);
}

/* --- Dark Mode: Chrome wird zum Grund --------------------------- */
[data-theme='dark'] {
  color-scheme: dark;

  --surface-chrome: #121210;
  --surface-page: #1C1C19;
  --surface-band: #24241F;
  --surface-card: #2B2B25;

  --line: #3A3A33;
  --line-strong: #4A4A42;
  --line-chrome: #2B2B25;

  --text: #EDEBE4;
  --text-secondary: #B5B2A7;
  --text-muted: #8A887E;

  /* Im Dunkeln ist Chrome wieder die dunkelste Fläche, der Text
     darauf also hell. Ohne diese beiden Zeilen bliebe der Text
     aus dem hellen Blatt stehen — schwarz auf fast schwarz.     */
  --text-on-chrome: #EDEBE4;
  --text-on-chrome-muted: #8A887E;

  --accent: #7B9BF0;
  --accent-hover: #98B0F5;
  --accent-surface: #22305C;
  --accent-text: #C3D0F8;

  --success: #4FA97B;
  --success-surface: #1B3A2A;
  --success-text: #A8DCC0;
  --warning: #D69A3E;
  --warning-surface: #3D2F14;
  --warning-text: #EFCB8B;
  --danger: #DE6A5C;
  --danger-surface: #3E211C;
  --danger-text: #F2AFA5;

  --data-1: #7B9BF0;
  --data-2: #4CD3C3;
  --data-3: #D8836A;
  --data-4: #8A887E;
  --data-5: #D69A3E;
}

/* Die Einstellung des Betriebssystems schaltet die Variante nicht.
   Ein Wechsel ins Dunkle ist eine Entscheidung des Benutzers, und er
   gilt nur für Anwendungen: eine projizierte Folie soll nicht dunkel
   werden, weil der Rechner dunkel eingestellt ist. Wer den Wunsch des
   Systems anbieten will, liest ihn in der Anwendung aus und setzt
   data-theme — bewusst, an einer Stelle, umschaltbar.                */

/* ============================================================
   Basis — das Minimum, damit die Tokens greifen.
   Alles Weitere gehört in die Komponenten des Projekts.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: normal; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius);
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--line);
  margin: var(--space-6) 0;
}

/* Rückmeldung. Das Attribut kommt dran, wenn etwas geklappt hat oder
   nicht, und geht nach --feedback-hold wieder ab — von selbst, per
   Zeitgeber. Der Rückweg ist die Überblendung; wer weniger Bewegung
   eingestellt hat, bekommt ihn hart, aber er bekommt ihn. Eine
   Rückmeldung, die stehen bleibt, ist keine mehr, sondern ein
   Zustand — und der gehört in den Status, nicht in den Grund. */
[data-rueckmeldung] { transition: background-color var(--feedback-fade) ease-out; }
[data-rueckmeldung='ok'] {
  background: var(--feedback-ok);
  color: var(--feedback-text);
}
[data-rueckmeldung='fehler'] {
  background: var(--feedback-fehler);
  color: var(--feedback-text);
}

/* Inaktiv. Farbe raus, Deckkraft runter, Platz bleibt.
   [data-inaktiv] ist für alles, was kein Formularelement ist —
   eine ganze Karte etwa. Achtung: filter erzeugt einen neuen
   Bezugsrahmen, ein position:fixed darin klebt am Kasten statt am
   Fenster. Deshalb nie an den Kasten hängen, der die Bedienleiste
   enthält. */
:disabled,
[aria-disabled='true'],
[data-inaktiv] {
  filter: grayscale(var(--inactive-grayscale));
  opacity: var(--inactive-opacity);
}

/* Grau allein genügt nicht — was inaktiv aussieht, darf auch nicht
   reagieren, sonst tippt der Daumen ins Leere. Formularelemente
   erledigt :disabled von selbst. */
[aria-disabled='true'],
[data-inaktiv] { pointer-events: none; }

/* Zahlen, Messwerte, Metadaten. Nicht für Fließtext. */
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Druck

   Auf Papier trägt die Struktur die Typografie und die Linie,
   nicht die Fläche. Die Chrome-Stufe und die dunkle Variante
   entfallen. Flächentöne nie unter 8 % Deckung.
   ============================================================ */

@media print {
  :root {
    color-scheme: light;

    --surface-page: #FFFFFF;
    --surface-chrome: #FFFFFF;
    --surface-band: #E8E6DE;   /* ca. 9 % — druckt zuverlässig    */
    --surface-card: #FFFFFF;

    --line: #B8B5AA;           /* dünn wirkt gedruckt heller      */
    --line-strong: #8A877C;
    --border-width: 0.5pt;     /* darunter reißt die Linie auf    */

    --text: #000000;
    --text-secondary: #3A3A36;
    --text-muted: #5C5C56;

    --fs-caption: 8pt;
    --fs-label: 9pt;
    --fs-body: 10.5pt;
    --fs-lead: 13pt;
    --fs-h3: 16pt;
    --fs-h2: 20pt;
    --fs-h1: 25pt;
    --fs-display: 31pt;

    --lh-body: 1.4;
    --lh-snug: 1.3;

    --space-6: 1.75rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;
  }

  body {
    background: #FFFFFF;
  }

  /* Karten verlieren die Fläche und behalten die Linie. */
  [class*='card'],
  [data-surface='card'] {
    background: none;
    border: var(--border-width) solid var(--line);
  }

  h1, h2, h3 { break-after: avoid; }
  table, figure, blockquote { break-inside: avoid; }

  a { color: var(--text); text-decoration: underline; }

  /* Adressen ausschreiben, ein Link ohne Ziel ist auf Papier wertlos. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: var(--fs-caption);
    color: var(--text-muted);
    word-break: break-all;
  }
}