/* Rahmen-Stylesheet (mit dem Skeleton identisch, Drift-Check in buendeln.py): Tokens, Basis,
   gemeinsame Komponenten, Druck. Werkzeugeigene Regeln stehen in index.html in
   '@layer komponenten' NACH diesem <link> - dieselbe Schicht, spaeter in der Reihenfolge. */
@layer base, komponenten, utilities;

@layer base {
  :root {
    --farbe-text: #1c1f26;
    --farbe-text-schwach: #5b6270;
    --farbe-grund: #f4f5f7;
    --farbe-flaeche: #ffffff;
    --farbe-rand: #d9dce3;
    --farbe-akzent: #1f5fbf;
    --farbe-akzent-text: #ffffff;
    --farbe-akzent-hover: #174a96;
    --farbe-plus: #1b7f3b;
    --farbe-minus: #b42318;
    --farbe-warn-grund: #fff4e0;
    --farbe-warn-text: #8a4b00;
    --farbe-fehler-grund: #fde8e6;
    --farbe-fehler-text: #8f1d14;
    --farbe-ok-grund: #e6f4ea;
    --farbe-ok-text: #1b5e20;
    --raum-1: 4px;
    --raum-2: 8px;
    --raum-3: 12px;
    --raum-4: 16px;
    --radius: 6px;
    --seitenleiste-breite: 15rem;
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-mono: ui-monospace, Consolas, "Courier New", monospace;
  }
  /* Dunkles Design: EIN Farbsatz, kein zweiter unter @media (prefers-color-scheme) -- welches Schema
     gilt, entscheidet data-dunkel (Skript im <head> vor dem ersten Zeichnen, danach rahmen.js aus
     einstellungen.farbschema). Nur am Bildschirm: Papier bleibt hell. Dunkle Werte werkzeugeigener
     Farben setzt index.html in '@layer komponenten' genauso: @media screen + derselbe Selektor. */
  @media screen {
    :root[data-dunkel="ja"] {
      color-scheme: dark;
      --farbe-text: #e6e8ec;
      --farbe-text-schwach: #a2a9b5;
      --farbe-grund: #14171c;
      --farbe-flaeche: #1c2027;
      --farbe-rand: #333a45;
      --farbe-akzent: #5b9bf5;
      --farbe-akzent-text: #10141a;
      --farbe-akzent-hover: #7fb2ff;
      --farbe-plus: #56c878;
      --farbe-minus: #ff6b5e;
      --farbe-warn-grund: #3a2c10;
      --farbe-warn-text: #ffcb6b;
      --farbe-fehler-grund: #3a1d1a;
      --farbe-fehler-text: #ff9b90;
      --farbe-ok-grund: #12301d;
      --farbe-ok-text: #7fdc9c;
    }
  }
  * { box-sizing: border-box; }
  body { margin: 0; font-family: var(--schrift); font-size: 15px; line-height: 1.4; color: var(--farbe-text); background: var(--farbe-grund); }
  h1 { font-size: 1.25rem; margin: 0; }
  h2 { font-size: 1.1rem; margin: 0 0 var(--raum-3); }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: var(--raum-1) var(--raum-2); text-align: left; border-bottom: 1px solid var(--farbe-rand); vertical-align: top; }
  th { font-weight: 600; color: var(--farbe-text-schwach); font-size: 0.85rem; white-space: nowrap; }
  input, select, textarea, button { font: inherit; color: inherit; }
  input, select, textarea { padding: var(--raum-1) var(--raum-2); border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); min-width: 0; }
  label { display: flex; flex-direction: column; gap: var(--raum-1); font-size: 0.85rem; color: var(--farbe-text-schwach); }
  code { font-family: var(--schrift-mono); font-size: 0.9em; }
}

@layer komponenten {
  .kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3); padding: var(--raum-3) var(--raum-4); background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
  .kopf-titel { flex: 1 1 auto; }
  .ablage { display: flex; align-items: center; gap: var(--raum-2); font-size: 0.85rem; }
  .ablage-text { padding: var(--raum-1) var(--raum-2); border-radius: var(--radius); }
  .ablage-ok { color: var(--farbe-ok-text); background: var(--farbe-ok-grund); }
  .ablage-warn { color: var(--farbe-warn-text); background: var(--farbe-warn-grund); }
  .ablage-fehler { color: var(--farbe-fehler-text); background: var(--farbe-fehler-grund); }
  .start-dialog { max-width: 36rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-4); background: var(--farbe-flaeche); color: var(--farbe-text); }
  .start-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
  .start-dialog p { margin: 0 0 var(--raum-3); }
  .reiter { display: flex; flex-wrap: wrap; gap: var(--raum-1); }
  .reiter-knopf { padding: var(--raum-1) var(--raum-3); border: 1px solid transparent; border-radius: var(--radius); background: transparent; cursor: pointer; }
  .reiter-knopf:hover { background: var(--farbe-grund); }
  .reiter-knopf.aktiv { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
  .inhalt { padding: var(--raum-4); max-width: 1200px; margin: 0 auto; }
  .karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: var(--raum-4); margin-bottom: var(--raum-4); }
  .zeile { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: flex-end; }
  .knopf { padding: var(--raum-2) var(--raum-3); border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); cursor: pointer; }
  .knopf-primaer { background: var(--farbe-akzent); color: var(--farbe-akzent-text); border-color: var(--farbe-akzent); }
  /* Hover MIT Rang: '.knopf:hover' ist Klasse + Pseudoklasse (0,2,0) und schlaegt die einfache
     '.knopf-primaer' (0,1,0) -- ein blauer Knopf unter der Maus wuerde hellgrau bei weisser Schrift,
     also unsichtbar. Genau nach einem Klick steht die Maus dort. Deshalb bekommt der primaere Knopf
     eine eigene, gleich starke Hover-Regel, die NACH der allgemeinen steht. */
  .knopf:hover:not(:disabled) { background: var(--farbe-grund); }
  .knopf-primaer:hover:not(:disabled) { background: var(--farbe-akzent-hover); border-color: var(--farbe-akzent-hover); }
  /* Ohne eigene Regel sieht ein gesperrter Knopf aus wie ein aktiver. */
  .knopf:disabled { opacity: 0.45; cursor: not-allowed; }
  .knopf-gefahr { color: var(--farbe-minus); }
  .knopf-klein { padding: 0 var(--raum-2); font-size: 0.8rem; line-height: 1.6; }
  .tabelle-huelle { overflow-x: auto; }
  .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--raum-3); }
  .kennzahl { background: var(--farbe-grund); border-radius: var(--radius); padding: var(--raum-3); }
  .kennzahl-titel { font-size: 0.8rem; color: var(--farbe-text-schwach); }
  .kennzahl-wert { font-size: 1.3rem; font-weight: 600; font-family: var(--schrift-mono); }
  .zahl { text-align: right; font-family: var(--schrift-mono); white-space: nowrap; }
  .hinweis { display: inline-block; background: var(--farbe-warn-grund); color: var(--farbe-warn-text); border-radius: var(--radius); padding: 0 var(--raum-1); font-size: 0.8rem; margin: 1px 2px 1px 0; }
  .schwach { color: var(--farbe-text-schwach); font-size: 0.85rem; }
  .meldung { position: fixed; left: 50%; bottom: var(--raum-4); transform: translateX(-50%); max-width: 90vw; padding: var(--raum-3) var(--raum-4); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.2); z-index: 10; }
  .meldung-ok { background: var(--farbe-ok-grund); color: var(--farbe-ok-text); }
  .meldung-fehler { background: var(--farbe-fehler-grund); color: var(--farbe-fehler-text); }
}

@layer utilities {
  [hidden] { display: none; }
}

/* Druck: app.js fuellt #bereich-druck und setzt body.druck; nur dieser Block wird gedruckt,
   schwarz auf weiss. Der Container-Selektor mit * ist Absicht: die Zusage "Papier ist hell"
   muss auch fuer Markup gelten, das die Ansicht heute noch nicht hat. */
@media print {
  body { background: white; color: black; font-size: 11px; }
  body.druck .kopf, body.druck .inhalt > :not(#bereich-druck), .meldung { display: none !important; }
  body.druck #bereich-druck[hidden] { display: block; }
  .inhalt { padding: 0; max-width: none; }
  .karte { border: none; padding: 0; margin: 0 0 8px; }
  .karte *, .karte *::before, .karte *::after { background: transparent !important; color: black !important; }
  .druck-seite { break-before: page; }
  .hinweis { border: 1px solid #999; font-size: 8px; white-space: nowrap; }
  .kennzahl-wert { font-size: 1rem; }
  .unterschriften { display: flex; justify-content: space-between; margin-top: 24px; }
  .unterschrift { width: 40%; border-top: 1px solid black; padding-top: 4px; font-size: 10px; }
  thead { display: table-header-group; }
  th, td { padding: 2px 4px; border-bottom: 1px solid #bbb; }
  .mit-seitenleiste { display: block; }
  .seitenleiste, .seitenleiste-schalter { display: none !important; }
  @page { size: A4; margin: 15mm; }
}

/* Bausteine „wenige Knöpfe“ (references/bedienung.md; aus Preispflege 1.25.0, 06.10.2026). Nur Tokens -- das dunkle
   Design tragen sie von selbst mit. Verborgen werden sie ueber [hidden] in '@layer utilities'. */
@layer komponenten {
  /* Kartenkopf: der Titel links, EINE Hauptaktion rechts, weitere hinter „⋯“. */
  .karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2) var(--raum-3); margin-bottom: var(--raum-3); }
  .karte-kopf > h2 { margin: 0 auto 0 0; }
  /* „⋯“-Menü als <details>: jede Handlung zeichnet neu, und ein neu gezeichnetes <details> ist zu -- ohne eigenes Skript. */
  .menue { position: relative; }
  .menue > summary { list-style: none; cursor: pointer; padding: var(--raum-1) var(--raum-3); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); background: var(--farbe-flaeche); }
  .menue > summary::-webkit-details-marker { display: none; }
  .menue > summary:hover { background: var(--farbe-grund); }
  .menue-inhalt { position: absolute; right: 0; top: calc(100% + var(--raum-1)); z-index: 4; display: grid; gap: var(--raum-1);
    min-width: max-content; padding: var(--raum-2); border: 1px solid var(--farbe-rand); border-radius: var(--radius);
    background: var(--farbe-flaeche); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
  /* Auswahl-Leiste: unten am Fenster, solange etwas markiert ist -- markiert wird oft weit unten in einer Tabelle.
     z-index unter der Meldung (10), die nur kurz darueber liegt; der Platz unter dem Inhalt haelt die letzte Zeile frei. */
  .auswahl-leiste { position: fixed; inset-inline: 0; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--raum-3);
    justify-content: center; align-items: center; padding: var(--raum-2) var(--raum-4); border-top: 1px solid var(--farbe-rand);
    background: var(--farbe-flaeche); box-shadow: 0 -1px 6px rgba(0,0,0,.12); }
  body:has(.auswahl-leiste:not([hidden])) { padding-bottom: 5rem; }
}

/* Seitenleiste (references/bedienung.md „Seitenleiste“; aus Preispflege 1.40.0, 18.10.2026): die Bereiche links, beim
   Scrollen stehend, darunter die Unterpunkte des gewaehlten. Markup: <div class="mit-seitenleiste"><nav class="seitenleiste"
   id="reiter">…</nav><main class="inhalt">…</main></div>, im Kopf <button class="seitenleiste-schalter"
   aria-controls="reiter">. Klebt der Kopf des Werkzeugs, setzt es --seitenleiste-oben auf seine Hoehe. Die Bereiche tragen
   zusaetzlich .reiter-knopf (Aktiv-Farbe von dort): '.seitenleiste-bereich' (0,1,0) steht danach und gewinnt nur bei
   Abstand und Ausrichtung -- eine Hintergrundfarbe hier schluege '.reiter-knopf.aktiv' nicht, das ist Absicht. */
@layer komponenten {
  .mit-seitenleiste { display: grid; grid-template-columns: var(--seitenleiste-breite) minmax(0, 1fr); align-items: start; }
  /* Neben der Leiste die ganze Restbreite statt 1200px: sonst verliert der Inhalt bei 1400px Fensterbreite Platz
     gegenueber der Reiterleiste oben, und breite Tabellen schneiden ihre letzte Spalte ab (MCP-Durchgang 18.10.2026). */
  .mit-seitenleiste > .inhalt { margin: 0; max-width: none; }
  .seitenleiste { position: sticky; top: var(--seitenleiste-oben, 0px); z-index: 2; display: flex; flex-direction: column; gap: 2px;
    height: calc(100vh - var(--seitenleiste-oben, 0px)); overflow-y: auto; padding: var(--raum-3) var(--raum-2);
    background: var(--farbe-flaeche); border-right: 1px solid var(--farbe-rand); }
  /* Block statt flex: die Zahl steht im selben Textfluss -- innerText bleibt „6 Nacharbeit (35)“ wie am Reiter, flex
     machte daraus zwei Zeilen. */
  .seitenleiste-bereich { display: block; width: 100%; padding: var(--raum-2) var(--raum-3); text-align: left; }
  .seitenleiste-zahl { font-family: var(--schrift-mono); font-size: 0.85rem; color: var(--farbe-text-schwach); white-space: nowrap; }
  .seitenleiste-zahl-warn { color: var(--farbe-warn-text); font-weight: 600; }
  /* Auf der Akzentflaeche des aktiven Bereichs traegt die Zahl dessen Schrift: das Warn-Orange hat dort keinen Kontrast. */
  .reiter-knopf.aktiv .seitenleiste-zahl { color: inherit; }
  .seitenleiste-unter { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 var(--raum-2) var(--raum-3);
    padding-left: var(--raum-2); border-left: 2px solid var(--farbe-rand); }
  /* Lange Listen scrollen fuer sich: die Bereiche darunter und die Extras bleiben in der Leiste erreichbar. */
  .seitenleiste-unter-lang { max-height: 45vh; overflow-y: auto; }
  .seitenleiste-punkt { display: flex; justify-content: space-between; align-items: baseline; gap: var(--raum-2); width: 100%;
    padding: var(--raum-1) var(--raum-2); border: 1px solid transparent; border-radius: var(--radius); background: transparent;
    font-size: 0.88rem; text-align: left; cursor: pointer; }
  .seitenleiste-punkt:hover { background: var(--farbe-grund); }
  .seitenleiste-punkt.aktiv { background: var(--farbe-grund); font-weight: 600; box-shadow: inset 3px 0 0 var(--farbe-akzent); }
  .seitenleiste-suche { position: sticky; top: 0; margin-bottom: var(--raum-1); width: 100%; font-size: 0.85rem; }
  .seitenleiste-extras { display: flex; flex-direction: column; gap: 2px; margin-top: var(--raum-3); padding-top: var(--raum-3);
    border-top: 1px solid var(--farbe-rand); }
  .seitenleiste-extra { border-color: var(--farbe-rand); font-weight: 600; }
  .seitenleiste-schalter { display: none; padding: var(--raum-1) var(--raum-3); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); background: var(--farbe-flaeche); cursor: pointer; }
  /* Ein Sprung markiert sein Ziel kurz (rahmen.zeigeStelle). */
  .sprung-ziel { animation: sprung-markieren 1.6s ease-out; }
  @keyframes sprung-markieren { from { outline: 3px solid var(--farbe-akzent); outline-offset: 2px; }
    to { outline: 3px solid transparent; outline-offset: 2px; } }
  /* Die Leisten unten am Fenster beginnen rechts der Seitenleiste, sonst decken sie deren untere Eintraege. */
  @media (min-width: 60.01rem) {
    body:has(.mit-seitenleiste) .auswahl-leiste { inset-inline-start: var(--seitenleiste-breite); }
  }
  /* Schmales Fenster: die Leiste klappt ein; der Schalter im Kopf oeffnet sie ueber dem Inhalt, eine Wahl schliesst sie.
     z-index ueber Kopf und Band, unter der Meldung (10). */
  @media (max-width: 60rem) {
    .mit-seitenleiste { display: block; }
    .seitenleiste { display: none; }
    .seitenleiste.seitenleiste-offen { display: flex; position: fixed; inset-block: 0; left: 0; z-index: 8;
      width: min(20rem, 85vw); height: auto; box-shadow: 0 4px 24px rgba(0,0,0,.3); }
    .seitenleiste-schalter { display: inline-block; }
  }
}