/* dokumentenwerkstatt.css
 *
 * Hand geschriebenes CSS statt eines Tailwind-Builds (21.07.2026): Dashboard/Jahresplaner
 * nutzen einen vorkompilierten, statischen Tailwind-Build ohne JIT im Browser -- neue
 * Klassen, die nicht schon eingebacken sind, wirken dort nicht (siehe dashboard.compiled.js).
 * Fuer ein neues Tool ohne eigenen Build-Schritt sind CSS-Variablen + wenige Klassen nach
 * derselben Farbpalette robuster als ein zweiter, separat zu pflegender Tailwind-Build.
 * Werte 1:1 aus der Dashboard-Palette uebernommen (dashboard.compiled.js) --
 * Design-Vereinheitlichung ist Standing-Regel, keine Tool-eigene Farbwahl.
 */

/* ── Schriften, selbst ausgeliefert (20.08.2026, Schritt 4b) ─────────────────
 * Bis heute luden drei Zeilen in index.html Poppins und Inter von
 * fonts.googleapis.com/fonts.gstatic.com -- ein Abruf bei einem Dritten bei
 * jedem Oeffnen der Seite. Entscheidung E40: selbst ausliefern. Die vier TTF
 * liegen in vendor/schriften/, die Lizenztexte daneben (OFL, Weitergabe nur
 * MIT Lizenz).
 *
 * RELATIVE Pfade, und das ist kein Schoenheitsfehler, sondern der Punkt:
 * `url()` loest gegen den Ort DIESER Datei auf (css/), nicht gegen die Seite --
 * deshalb `../vendor/schriften/`. Der Fremdverweis-Sammler in
 * frontend_deploy_mehrdatei.js zaehlt absolute Adressen; stuende hier eine
 * vollstaendige Adresse, traege die naechste Bereitstellung fuenf Hosts statt
 * vier. Der vorher hingeschriebene Sollwert faengt genau diesen Fall
 * (Fortschreibung 11 zu STAND-DOKWERK-STUFE3.md).
 *
 * `format('truetype')`: die vier Dateien sind TTF -- Anfangsbytes 00 01 00 00,
 * gemessen 20.08.2026 an allen vieren. Eine falsche Formatangabe laesst den
 * Browser die Datei stillschweigend verwerfen; nichts schlaegt fehl, die
 * Schrift ist nur nicht da.
 *
 * INTER STATISCH, seit dem 20.08.2026 -- vorher stand hier die variable Datei
 * in EINEM Block mit `font-weight: 100 900`. Der Grund fuer die Umstellung ist
 * gemessen und liegt im PDF, nicht am Bildschirm: Chrome bettet eine variable
 * TTF als 21 einzelne TYPE-3-Ressourcen ein -- Zeichenprogramme statt einer
 * Schrift. Die Textebene haengt dann allein an der ToUnicode-Tabelle, und genau
 * dort ging der Bindestrich verloren. Poppins, statisch, landet als drei
 * ordentliche Type0-Saetze. Gegenprobe mit und ohne `font-variation-settings`:
 * gleiches Ergebnis, es liegt an der variablen Datei (Fortschreibung 15).
 *
 * Die drei Schnitte sind INSTANZEN derselben Datei, erzeugt mit
 * werkzeuge/schrift-referenz/erzeuge_inter_schnitte.py -- gleiche Version
 * 4.001, gleiche 2933 Glyphen, Achsen bei `wght` 400/500/600 und `opsz` 14
 * festgestellt. Kein zweiter Bezugsweg: amtliche Statik-Dateien einer anderen
 * Inter-Ausgabe haetten andere Metriken als die Datei, an der alles gemessen
 * wurde.
 *
 * Drei Bloecke mit je EINEM Gewicht, wie bei Poppins. Damit entfallen
 * `font-variation-settings` und `font-optical-sizing` ersatzlos -- eine
 * statische Schrift hat keine Achsen.
 *
 * `font-display: swap` -- Text sofort sichtbar, wie bisher mit `&display=swap`.
 * Der Renderpfad braucht das Gegenteil (`block` plus `document.fonts.ready`),
 * aber er existiert noch nicht; das gehoert zu AP3 und steht bewusst NICHT hier
 * (Fortschreibung 11, Korrektur der eigenen Liste).
 */
@font-face {
  font-family: 'Inter';
  src: url('../vendor/schriften/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../vendor/schriften/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../vendor/schriften/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../vendor/schriften/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../vendor/schriften/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../vendor/schriften/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --dw-bg: #0d1320;
  --dw-card: #1a2436;
  --dw-card-dim: #161f2e;
  /* VIERTE Flaechenstufe, ergaenzt 17.08.2026 (Gestaltungsauftrag, Arbeitspunkt 2).
   * GESTALTUNG.md fuehrt sie als `hub-card-dimmer` #141C2A -- "tiefste Ebene,
   * eingebettete Bereiche". Sie fehlte hier, und deshalb sassen Formularfelder
   * auf derselben Stufe wie die Karte, in der sie liegen: aufgeklebt statt
   * eingesenkt. Vier Flaechenstufen, mehr nicht -- wer eine fuenfte braucht, hat
   * ein Strukturproblem und kein Farbproblem. */
  --dw-card-dimmer: #141c2a;
  --dw-line: #2a3548;
  --dw-line-light: #344155;
  --dw-accent: #0e6a96;
  --dw-accent-light: #3ee0ff;
  --dw-text: #f8fafc;
  --dw-mut: #a8b6c8;
  --dw-dim: #8b97a8;
  /* VIERTE Textstufe (GESTALTUNG.md `hub-dimmer`): schwaechster Text, Zeitangaben.
   * Arbeitspunkt 4 verlangt vier sichtbare Stufen -- ohne die vierte sind
   * Beschriftung und Wert fast gleich betont, und eine Tabelle liest sich als
   * Flaeche. */
  --dw-dimmer: #6b7889;

  /* Zustandsfarben fuer Chips (Arbeitspunkt 3). 1:1 aus der Dashboard-Palette,
   * keine werkzeugeigene Farbwahl -- #f87171 stand hier schon fuer Fehler.
   * Getrennt in Rahmen-, Flaechen- und Textwert, weil GESTALTUNG.md die
   * Kontrastfalle dreimal belegt: eine fuer Flaechen entworfene Farbe als Text
   * ergibt WCAG-Kontraste zwischen 1,5 und 4,4 bei Soll 4,5. Der Textwert ist
   * darum jeweils die aufgehellte Fassung, die Flaeche die getoente. */
  --dw-gruen: #34d399;
  --dw-gruen-flaeche: rgba(52, 211, 153, 0.14);
  --dw-amber: #fbbf24;
  --dw-amber-flaeche: rgba(251, 191, 36, 0.14);
  --dw-rot: #f87171;
  --dw-rot-flaeche: rgba(248, 113, 113, 0.14);
  --dw-cyan-flaeche: rgba(62, 224, 255, 0.12);

  /* Gestaffelte Tiefe (Arbeitspunkt 2): grosse Flaechen tiefer, eingebettete
   * Bloecke flacher. Als Eigenschaft und nicht je Regel, damit die Staffelung an
   * EINER Stelle steht -- zwei Schattenwerte, die auseinanderlaufen, erzeugen
   * genau die Unruhe, die Tiefe verhindern soll. */
  --dw-schatten-tief: 0 1px 2px rgba(0,0,0,0.45), 0 12px 32px rgba(0,0,0,0.32);
  --dw-schatten-flach: 0 1px 2px rgba(0,0,0,0.35);
  /* Eingesenkt: Licht kommt von oben, also liegt der Schatten INNEN oben. */
  --dw-schatten-innen: inset 0 1px 3px rgba(0,0,0,0.45);

  --sk: 1; /* UI-Skalierungsfaktor, siehe app.js sk() */

  /* ── Breiten (10.08.2026, GESTALTUNG.md Nachtrag 2, G-BREITE-1 bis G-BREITE-4)
   *
   * Abschnitt 4 von GESTALTUNG.md nannte `max-w-5xl` (1024 px). Der Wert gilt
   * seit dem 10.08.2026 nicht mehr: jede Oberflaeche nutzt den Bildschirm
   * vollstaendig. Verbindlich ist `min(98vw, 1760px)`.
   *
   * WARUM ALS EIGENE EIGENSCHAFT und nicht als Hilfsklasse: 1760 px ist kein
   * Tailwind-Standardwert (`max-w-7xl` sind 1280 px), und dieses Werkzeug hat
   * ohnehin handgeschriebene CSS statt eines Builds.
   *
   * `--dw-breite` wird ABSICHTLICH NICHT mit `--sk` multipliziert. Der Regler
   * skaliert Elemente, nicht die aeussere Inhaltsbreite -- sonst wird die Seite
   * breiter als der Bildschirm und es entsteht waagerechtes Rollen fuer die
   * ganze Oberflaeche. Das ist Browser-Zoom, und den gibt es schon.
   */
  --dw-max: 1760px;
  --dw-breite: min(98vw, var(--dw-max));

  /* Umbruchschwelle der dritten Spalte, in WIRKSAMER Breite (Behaelter ÷ --sk),
   * nicht in Fensterbreite -- G-BREITE-2 samt Zusatz. Ohne Einheit, weil
   * app.js denselben Wert fuer seine Rechnung liest: eine Zahl, eine
   * Autoritaet (A13). */
  --dw-schwelle-spalte3: 1440;

  /* Mindestinhaltsbreiten je Umbruchzustand, Grundlage der oberen Reglergrenze
   * (G-BREITE-4). "Nicht der Wunsch, das Minimum." Gemessen an den schmalsten
   * tragfaehigen Spaltenbreiten der Stammdatenflaeche. */
  --dw-min-inhalt-offen: 1180;
  --dw-min-inhalt-schublade: 660;

  /* ── Schriftstufen ──────────────────────────────────────────────────────────
   * Zwei Eigenschaften je Stufe, und die Teilung ist Absicht:
   *
   *   --dw-fs-*-basis  traegt das clamp(), OHNE --sk. Aus ihr liest app.js die
   *                    unskalierte kleinste Inhaltsschrift fuer die untere
   *                    Reglergrenze -- gemessen am gerechneten Wert des
   *                    Browsers, nicht in JavaScript nachgerechnet.
   *   --dw-fs-*        traegt den max()-Mantel aus G-BREITE-1.
   *
   * Damit steht in KEINER Zeile `clamp(` und `var(--sk)` ohne `max(` --
   * pruefbar per grep, nicht per Augenmass. Der Mantel ist dabei Waechter und
   * nicht Werkzeug: greift er, ist nicht die Schrift zu klein, sondern die
   * Kappungsrechnung falsch (G-BREITE-4). */
  /* DIE ZAHLEN SIND GEGEN DIE ZWEI DURCHGERECHNETEN BEISPIELE IN GESTALTUNG.md
   * GEZOGEN, nicht nach Augenmass gewaehlt -- sie sind der Sollwert, den dieses
   * clamp() treffen muss (A16: der Sollwert kommt aus der Spezifikation):
   *
   *   Fenster 1512 px -> Basis 15,03 px -> 12/15,03 = 0,798 -> 80 % bleibt
   *                      waehlbar.            GESTALTUNG: "Keine untere
   *                                           Kappung noetig, 80 % bleibt
   *                                           waehlbar."                  OK
   *   Fenster 1024 px -> Basis 13,95 px -> 12/13,95 = 0,860 -> erster gueltiger
   *                      Schritt 90 %.        GESTALTUNG: "Regler beginnt bei
   *                                           90 %."                      OK
   *
   * Eine flachere Steigung (etwa 0.18vw + 10.6px) haette bei 1024 px eine
   * Kappung bei 100 % ergeben und dem Nutzer dort den halben Regler genommen. */
  --dw-fs-klein-basis: clamp(13px, 0.22vw + 11.7px, 16px);
  --dw-fs-klein: max(12px, calc(var(--dw-fs-klein-basis) * var(--sk)));
  --dw-fs-text-basis: clamp(14px, 0.24vw + 12.4px, 17px);
  --dw-fs-text: max(12px, calc(var(--dw-fs-text-basis) * var(--sk)));
  /* Bedienelemente duerfen bis 11 px (D-LESB-1), sind aber bewusst nicht
   * kleiner angesetzt als der Inhalt -- die 11 px sind eine Untergrenze, kein
   * Ziel. */
  --dw-fs-bedien-basis: clamp(13px, 0.2vw + 11.9px, 15.5px);
  --dw-fs-bedien: max(11px, calc(var(--dw-fs-bedien-basis) * var(--sk)));

  /* ── Zwei GROESSERE Stufen fuer die Rangfolge (17.08.2026, Arbeitspunkt 4) ──
   * Beide nach demselben Muster: Basis ohne --sk, Mantel darueber. Der Mantel ist
   * hier rechnerisch nie noetig -- beide liegen weit ueber 12 px, selbst bei
   * 80 %. Er steht trotzdem da, weil G-BREITE-1 ihn an JEDER Stelle verlangt, an
   * der clamp() und --sk zusammentreffen. Eine Ausnahme "weil hier ohnehin nichts
   * passieren kann" waere die Stelle, an der die naechste Stufe ihn dann auch
   * weglaesst. */
  --dw-fs-titel-basis: clamp(19px, 0.42vw + 15.6px, 26px);
  --dw-fs-titel: max(12px, calc(var(--dw-fs-titel-basis) * var(--sk)));
  --dw-fs-bereich-basis: clamp(15px, 0.28vw + 12.8px, 19px);
  --dw-fs-bereich: max(12px, calc(var(--dw-fs-bereich-basis) * var(--sk)));

  /* KEINE eigene, KLEINERE Stufe fuer Beschriftungen -- und das ist eine
   * Entscheidung, nicht eine Auslassung.
   *
   * app.js liest `--dw-fs-klein-basis` ueber den Messfuehler (.dw-messfuehler) als
   * die kleinste unskalierte Inhaltsschrift und leitet daraus die UNTERE
   * Reglergrenze ab. Eine neue Stufe unterhalb davon waere still an dieser
   * Rechnung vorbeigelaufen: der Regler haette weiter 80 % erlaubt, waehrend die
   * neue Beschriftung dort unter 12 px liegt. Genau die Fehlerform, die am
   * 10.08.2026 neununddreissig Elemente unter die Lesbarkeitsgrenze gebracht hat
   * -- die Kappung griff korrekt und traf den falschen Wert.
   *
   * Arbeitspunkt 4 verlangt "Beschriftung ueber Kleinschrift mit weitem
   * Zeichenabstand in Grossbuchstaben". Das leisten Grossbuchstaben,
   * Zeichenabstand und die gedaempfte Textstufe -- Kleinheit ist dafuer nicht
   * noetig. `.dw-label` benutzt deshalb `--dw-fs-klein` und macht den Unterschied
   * ueber Form und Farbe. Die Autoritaet des Messfuehlers bleibt damit bei genau
   * einer Eigenschaft (A13). */
}

/* Aeussere Arbeitsflaeche. Ersetzt die frueheren Inline-`maxWidth: '900px'`
 * beziehungsweise `'780px'` in app.js. */
.dw-flaeche {
  width: var(--dw-breite);
  margin: 0 auto;
  padding: calc(24px * var(--sk)) 0;
}

/* G-BREITE-3: Der Behaelter waechst, die Textspalte nicht. Volle Breite ist
 * fuer Spalten da, nicht fuer laengere Zeilen -- ein Fliesstext ueber 1760 px
 * ist schlechter lesbar als derselbe Text auf 1024 px, nicht besser.
 * `ch` statt px, weil die Grenze in Zeichen definiert ist (75-90). */
.dw-text { max-width: 82ch; }

/* Messfuehler fuer die untere Reglergrenze. Traegt die Basisschrift OHNE --sk,
 * damit app.js den vom Browser gerechneten clamp()-Wert ablesen kann statt ihn
 * nachzubilden -- ein Test, der die Logik nachbaut, prueft die Nachbildung
 * (A10). Unsichtbar, aber NICHT `display:none`: ein Element ohne Layout hat
 * keine gerechnete Schriftgroesse. */
.dw-messfuehler {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  font-size: var(--dw-fs-klein-basis);
  pointer-events: none;
}

/* Zweigeteilte Stammdatenflaeche. Oberhalb der Schwelle stehen Liste und
 * Formular nebeneinander, darunter wird das Formular zur Schublade -- die
 * Umschaltung macht app.js an der WIRKSAMEN Breite, nicht per Media Query,
 * weil eine Media Query die Skalierung nicht kennt (G-BREITE-2). */
.dw-zweigeteilt {
  display: flex;
  align-items: flex-start;
  gap: calc(16px * var(--sk));
}
/* `order` STATT DOM-REIHENFOLGE, und das ist kein Kunstgriff, sondern der
 * schonendere Eingriff: Das Anlegeformular steht im Baum vor der Liste, weil es
 * dort schon stand. Es zu verschieben haette bedeutet, einen ueber neunzig
 * Zeilen langen, verschachtelten Tabellenausdruck zu versetzen -- genau der
 * Eingriff, der eine laufende Oberflaeche bricht. `order` erreicht dasselbe
 * Bild ohne ihn, in beiden Richtungen (Zeile und Spalte). */
.dw-zweigeteilt > .dw-liste { flex: 1 1 auto; min-width: 0; order: 1; }
.dw-zweigeteilt > .dw-schublade { flex: 0 0 calc(420px * var(--sk)); order: 2; }

/* Eingeklappter Zustand: das Formular liegt UNTER der Liste und ist ueber
 * "Anlegen" ausfahrbar. Das ist der HAEUFIGERE Zustand, nicht der Ausnahmefall
 * -- bei 1440 px Fensterbreite gilt er schon bei 100 %.
 *
 * `flex-direction: column` und NICHT `display: block`: nur so gilt `order`
 * weiter. Mit `block` waere das Formular wieder ueber die Liste gerutscht --
 * der Zustand, aus dem dieser Umbau herausfuehrt. */
/* IN DER SCHUBLADE STEHEN DIE FELDER UNTEREINANDER, nicht nebeneinander.
 *
 * `Eingabefeld` und `Auswahlfeld` setzen ihre Breite als INLINE-Stil
 * (`flex: breite || 1`) -- gedacht fuer eine breite Zeile. In einem 420 px
 * schmalen Behaelter draengen sich damit sechs Felder in eine Zeile, die
 * Eingaben werden fingerbreit und "Firma (Rechtsträger)" bricht um. Gemessen
 * am ersten Bild der Schublade, nicht vermutet.
 *
 * `!important` ist hier kein Griff in die Trickkiste, sondern die einzige
 * Moeglichkeit: ein Inline-Stil schlaegt jede Regel aus dem Stylesheet. Die
 * Alternative waere, den von drei Bausteinen genutzten Helfer um einen
 * Schmal-Modus zu erweitern -- mehr Code an drei Stellen fuer dasselbe
 * Ergebnis. Wenn der Helfer eines Tages seine Breite als Klasse fuehrt, kann
 * das hier weg. */
.dw-schublade form label { flex: 1 1 100% !important; }

.dw-zweigeteilt.dw-eingeklappt { flex-direction: column; }
.dw-zweigeteilt.dw-eingeklappt > .dw-schublade {
  flex: none;
  width: 100%;
  margin-top: calc(12px * var(--sk));
}

* { box-sizing: border-box; }

/* ── Kontextuelle Alternativen aus (20.08.2026, gemessen) ────────────────────
 * Mit der variablen Inter-Datei ersetzte der Setzer den Bindestrich neben
 * Grossbuchstaben und Ziffern durch eine kontextuelle Alternative OHNE
 * Unicode-Zuordnung. Im erzeugten PDF stand dort U+E088 aus dem privaten
 * Bereich:
 *     gesetzt "M-02230-27789"  ->  gelesen "M<U+E088>02230<U+E088>27789"
 * Das ist eine Zertifikatsnummer: nicht suchbar, nicht kopierbar, fuer eine
 * Sprachausgabe unlesbar -- und dem Auge faellt nichts auf, weil ein Strich
 * wie ein Strich aussieht.
 *
 * Die Zeile steht hier, obwohl der Fall am Bildschirm keinen Schaden anrichtet:
 * Bildschirm und Druck sollen dieselben Glyphen setzen, sonst misst der
 * Renderpfad etwas anderes, als die Oberflaeche zeigt. Ob der Fall mit den
 * statischen Schnitten ueberhaupt noch auftritt, ist gemessen -- das Ergebnis
 * steht im Commit; die Zeile bleibt in jedem Fall, sie kostet nichts und
 * schliesst den Fall.
 *
 * Frueher stand hier ein Block ueber `font-variation-settings` je
 * Gewichtsstufe. Er ist mit den statischen Schnitten ersatzlos entfallen: eine
 * Schrift ohne Achsen hat nichts festzunageln.
 */
body.dw-bg {
  margin: 0;
  background: var(--dw-bg);
  color: var(--dw-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-feature-settings: "calt" 0;
  min-height: 100vh;
}

.dw-font-display { font-family: 'Poppins', 'Inter', system-ui, sans-serif; }

/* ── Kopfzeile (Arbeitspunkt 1) ──────────────────────────────────────────────
 * Marke als Keil, Werkzeugname, Version und Serverstand als Chips, rechts die
 * vier Pflichtstandards als eine ruhige Reihe. */
.dw-kopf {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--sk));
  flex-wrap: wrap;
  padding-bottom: calc(14px * var(--sk));
  border-bottom: 1px solid var(--dw-line);
  margin-bottom: calc(18px * var(--sk));
}
/* Der Keil. Eine schraege Kante, kein Bild -- das Logo ist ein Pixelbild und
 * skaliert nicht mit --sk. `clip-path` traegt die Schraege, `background` den
 * Akzentverlauf. */
.dw-marke {
  width: calc(8px * var(--sk));
  height: calc(30px * var(--sk));
  flex: none;
  border-radius: calc(2px * var(--sk));
  background: linear-gradient(160deg, var(--dw-accent-light), var(--dw-accent));
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%);
}
/* Schiebt alles Folgende nach rechts -- ohne festen Abstand, damit die Reihe bei
 * schmalem Fenster umbricht statt sich zu ueberlagern. */
.dw-kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--sk));
  flex-wrap: wrap;
}
/* Eine Gruppe aus Beschriftung und Bedienelement, damit "Rollen-Simulation" und
 * sein Auswahlfeld beim Umbruch zusammenbleiben. */
.dw-kopf-gruppe {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--sk));
}

/* ── Tiefe statt Flaeche (Arbeitspunkt 2) ───────────────────────────────────
 * Die Regel aus dem Auftrag, woertlich: "Kein Schatten ohne Rahmen und kein
 * Rahmen ohne Grundtonwechsel" -- sonst entsteht Unruhe statt Tiefe. Jede der
 * drei Klassen hier haelt alle drei Merkmale zusammen: eigener Grundton, eigener
 * Rahmen, eigene Schattenstufe. */
.dw-card {
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: calc(14px * var(--sk));
  padding: calc(20px * var(--sk));
  box-shadow: var(--dw-schatten-tief);
}

/* Eingebetteter Block INNERHALB einer Karte: eine Stufe dunkler und flacher
 * beschattet. Ohne den Grundtonwechsel saehe er wie eine zweite, gleichrangige
 * Karte aus -- und zwei gleichrangige Flaechen uebereinander sind genau die
 * Flaeche, aus der dieser Auftrag herausfuehrt. */
.dw-card-eingebettet {
  background: var(--dw-card-dim);
  border: 1px solid var(--dw-line);
  border-radius: calc(10px * var(--sk));
  padding: calc(14px * var(--sk));
  box-shadow: var(--dw-schatten-flach);
}

/* Innenflaeche -- Formularbereiche, die EINGESENKT wirken sollen. Tiefste
 * Flaechenstufe plus Innenschatten. */
.dw-senke {
  background: var(--dw-card-dimmer);
  border: 1px solid var(--dw-line);
  border-radius: calc(10px * var(--sk));
  padding: calc(14px * var(--sk));
  box-shadow: var(--dw-schatten-innen);
}

/* ── Badges mit Bedeutung, nicht als Farbtupfer (Arbeitspunkt 3) ────────────
 * Getoenter Hintergrund, farbiger Rahmen, farbige Schrift -- alle drei, sonst
 * ist es ein Farbtupfer. `padding` und `gap` skalieren jetzt mit --sk; vorher
 * standen dort feste 4px/10px/8px, die bei 130 % stehen blieben, waehrend die
 * Schrift darin wuchs (GESTALTUNG.md Abschnitt 4).
 *
 * D-LESB-3: Farbe nie allein ohne ihr Wort. Diese Klassen faerben nur -- den
 * Text liefert immer der Aufrufer, und ein Chip ohne Text ist keiner. */
.dw-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--sk));
  padding: calc(3px * var(--sk)) calc(10px * var(--sk));
  border-radius: 999px;
  border: 1px solid var(--dw-accent-light);
  background: var(--dw-cyan-flaeche);
  color: var(--dw-accent-light);
  font-size: var(--dw-fs-klein);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.dw-badge-gruen   { border-color: var(--dw-gruen); background: var(--dw-gruen-flaeche); color: var(--dw-gruen); }
.dw-badge-amber   { border-color: var(--dw-amber); background: var(--dw-amber-flaeche); color: var(--dw-amber); }
.dw-badge-rot     { border-color: var(--dw-rot);   background: var(--dw-rot-flaeche);   color: var(--dw-rot); }
/* Neutral: grau auf der Kartenstufe, fuer Zaehlungen und ruhende Zustaende. */
.dw-badge-neutral { border-color: var(--dw-line-light); background: var(--dw-card); color: var(--dw-mut); }

/* ── Typografie mit Rangfolge (Arbeitspunkt 4) ──────────────────────────────
 * Vier sichtbare Stufen: Werkzeugname, Bereichsueberschrift, Beschriftung, Wert.
 * Die Beschriftung ist NICHT kleiner als der Wert (Begruendung bei den
 * Schriftstufen oben) -- sie unterscheidet sich durch Grossbuchstaben, weiten
 * Zeichenabstand und die gedaempfte Textstufe. */
.dw-titel {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-size: var(--dw-fs-titel);
  font-weight: 700;
  letter-spacing: -0.02em; /* engerer Zeichenabstand, Arbeitspunkt 1 */
  line-height: 1.15;
  margin: 0;
}
.dw-bereich {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  font-size: var(--dw-fs-bereich);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}
.dw-label {
  font-size: var(--dw-fs-klein);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em; /* GESTALTUNG.md Abschnitt 3: tracking-[0.14em] */
  color: var(--dw-dim);
}
.dw-wert { font-size: var(--dw-fs-text); color: var(--dw-text); }

.dw-mut { color: var(--dw-mut); }
.dw-dim { color: var(--dw-dim); }
.dw-dimmer { color: var(--dw-dimmer); }

.dw-btn {
  background: var(--dw-accent);
  color: var(--dw-text);
  border: 1px solid transparent; /* Rahmen von Anfang an, damit die sekundaere
                                  * Fassung ihn nur umfaerbt und der Knopf dabei
                                  * nicht um zwei Pixel springt. */
  border-radius: calc(8px * var(--sk));
  padding: calc(8px * var(--sk)) var(--dw-fs-bedien);
  /* Vorher `calc(14px * var(--sk))` -- eine feste Pixelzahl ohne max()-Mantel.
   * Bei 80 % ergab das 11,2 px auf einem Knopf, dessen Nachbarn ueber
   * `--dw-fs-bedien` bei 12,4 px lagen: zwei Bedienelemente nebeneinander mit
   * verschiedener Schrift, ohne dass eine Grenze verletzt war. G-BREITE-1b vom
   * 17.08.2026 verbietet die feste Pixelzahl. */
  font-size: var(--dw-fs-bedien);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dw-btn:hover { background: var(--dw-accent-light); color: var(--dw-bg); }
/* KEIN `transform: scale()` beim Druecken. Es war hier bis zum 17.08.2026 mit
 * 0.98 eingebaut und ist seit dem 30.06.2026 ausdruecklich verworfen: es bricht
 * die Groessenverstellung, weil es die gerechneten Masse nachtraeglich verzerrt
 * -- eine Messung der Schriftgroesse trifft dann nicht mehr, was auf dem Schirm
 * steht. Ersatz ist ein Wechsel der Flaechenfarbe, der nichts verschiebt. */
.dw-btn:active { background: var(--dw-accent-light); color: var(--dw-bg); }

/* Sekundaer: Handlungen in Listen, die nicht die Hauptsache sind (Arbeitspunkt 5
 * -- "Handlungen rechts, sekundaer gestaltet"). Ruhige Flaeche, sichtbarer
 * Rahmen, gedaempfte Schrift. */
.dw-btn-sekundaer {
  background: transparent;
  border-color: var(--dw-line-light);
  color: var(--dw-mut);
  font-weight: 400;
}
.dw-btn-sekundaer:hover { background: var(--dw-card-dim); border-color: var(--dw-accent-light); color: var(--dw-text); }
.dw-btn-sekundaer:active { background: var(--dw-card-dim); color: var(--dw-text); }

/* "Loeschen" ist NICHT durchgehend rot (Arbeitspunkt 5): rot erst im
 * Bestaetigungsschritt. Hier nur der Hinweis beim Ueberfahren, damit die Liste
 * nicht aus roten Knoepfen besteht und die Farbe ihre Warnkraft behaelt. */
.dw-btn-gefahr:hover { border-color: var(--dw-rot); color: var(--dw-rot); background: var(--dw-rot-flaeche); }
.dw-btn-gefahr:active { border-color: var(--dw-rot); color: var(--dw-rot); background: var(--dw-rot-flaeche); }

/* Fokusring als Ersatz fuer die Umrandung, nicht zusaetzlich zu ihr
 * (GESTALTUNG.md Abschnitt 5: "outline-none NUR mit Ring als Ersatz"). Ohne ihn
 * ist die Oberflaeche mit der Tastatur unbedienbar. `:focus-visible` statt
 * `:focus`, damit der Ring beim Mausklick nicht stehen bleibt. */
.dw-btn:focus-visible,
select.dw-select:focus-visible,
input.dw-input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 calc(2px * var(--sk)) rgba(62, 224, 255, 0.4);
}

select.dw-select {
  background: var(--dw-card-dimmer);
  color: var(--dw-text);
  border: 1px solid var(--dw-line);
  border-radius: calc(8px * var(--sk));
  padding: calc(7px * var(--sk)) calc(10px * var(--sk));
  font-size: var(--dw-fs-text);
  box-shadow: var(--dw-schatten-innen);
}

input[type="range"].dw-range { accent-color: var(--dw-accent-light); }

input.dw-input {
  /* Eine Stufe DUNKLER als die Karte, in der das Feld liegt, plus Innenschatten
   * -- damit es eingesenkt wirkt und nicht aufgeklebt (Arbeitspunkt 2). Vorher
   * lag es auf `--dw-card-dim` und damit fast auf der Kartenstufe. */
  background: var(--dw-card-dimmer);
  color: var(--dw-text);
  border: 1px solid var(--dw-line);
  border-radius: calc(8px * var(--sk));
  padding: calc(7px * var(--sk)) calc(10px * var(--sk));
  /* Eingaben sind Inhalt, nicht Bedienelement: `--dw-fs-text` mit 12-px-Untergrenze
   * statt `--dw-fs-bedien` mit 11. Wer seinen eigenen Eintrag liest, liest Inhalt. */
  font-size: var(--dw-fs-text);
  box-shadow: var(--dw-schatten-innen);
  width: 100%;
}
/* `outline` durch den Ring ersetzt, nicht ergaenzt -- ein Feld mit Umrandung UND
 * Ring springt beim Fokus um einen Pixel. Der Rahmen wechselt zusaetzlich die
 * Farbe, damit der Fokus auch ohne Schattenwiedergabe erkennbar ist. */
input.dw-input:focus-visible { border-color: var(--dw-accent-light); }

/* ── Listen und Tabellen (Arbeitspunkt 5) ───────────────────────────────────
 * Kopfzeile als gedaempfte Kleinschrift mit weitem Zeichenabstand. ZEILENTRENNER
 * statt Gitter -- senkrechte Linien gab es hier ohnehin nie, aber die letzte
 * Zeile trug einen Trenner ins Leere, und genau der laesst eine Tabelle unten
 * offen aussehen. */
.dw-table { width: 100%; border-collapse: collapse; font-size: var(--dw-fs-text); }
.dw-table th, .dw-table td {
  text-align: left;
  padding: calc(9px * var(--sk)) calc(10px * var(--sk));
  border-bottom: 1px solid var(--dw-line);
}
/* Kopfzeile: dieselben Merkmale wie `.dw-label`, damit Beschriftung ueberall
 * gleich aussieht -- eine Spaltenueberschrift IST eine Beschriftung. */
.dw-table th {
  color: var(--dw-dim);
  font-weight: 600;
  font-size: var(--dw-fs-klein);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom-color: var(--dw-line-light);
}
/* Werte hell, Beschriftung gedaempft (Arbeitspunkt 4). Ohne diese Zeile erben
 * die Zellen die Kartenfarbe und liegen mit dem Kopf auf einer Betonungsstufe. */
.dw-table td { color: var(--dw-text); }
.dw-table tbody tr:last-child td { border-bottom: none; }
/* Ueberfahren einer Zeile: nur ein Grundtonwechsel, kein Verschieben -- in einer
 * Tabelle wandert sonst die ganze Zeile unter dem Zeiger weg. */
.dw-table tbody tr:hover td { background: var(--dw-card-dim); }
/* Handlungsspalte rechts, damit die Knoepfe nicht mitten im Text stehen. */
.dw-table .dw-handlungen {
  text-align: right;
  white-space: nowrap;
}
.dw-table .dw-handlungen > * + * { margin-left: calc(6px * var(--sk)); }

.dw-fehler {
  /* #f87171 1:1 aus der Dashboard-Palette (dashboard.compiled.js) -- gleiche
     Fehlerfarbe wie im Dashboard/Jahresplaner, keine Tool-eigene Farbwahl. */
  color: #f87171;
  font-size: var(--dw-fs-klein);
  margin: 0 0 10px;
}

/* Tutorial-Modal + Hilfe-Modus (23.07.2026, app.js v0.6). Alle Masse skalieren
   mit --sk; das Modal scrollt intern (max-height), damit der Tutorial-Text auch
   bei 130 % Skalierung vollstaendig erreichbar bleibt statt ueber den Viewport
   hinauszulaufen. */
.dw-modal-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 16, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(32px * var(--sk)) 16px;
  z-index: 100;
}
.dw-modal {
  max-width: min(720px, 94vw);
  width: 100%;
  max-height: calc(100vh - 2 * (32px * var(--sk)));
  overflow-y: auto;
}

.dw-hilfe-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(20px * var(--sk));
  height: calc(20px * var(--sk));
  border-radius: 999px;
  border: 1px solid var(--dw-accent-light);
  background: rgba(62, 224, 255, 0.12);
  color: var(--dw-accent-light);
  font-size: var(--dw-fs-bedien);
  font-weight: 600;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif; /* klassisches Serifen-i als Info-Glyphe */
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex: none;
}
.dw-hilfe-symbol:hover { background: rgba(62, 224, 255, 0.25); }

/* Popover als bewusste Ebene UEBER dem Inhalt (z-index) -- verschiebt kein
   Layout und kollidiert dadurch bei keiner Skalierungsstufe mit anderen
   Bedienelementen; max-width haelt es auch auf schmalen Fenstern im Viewport. */
.dw-hilfe-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: calc(320px * var(--sk));
  max-width: 76vw;
  background: var(--dw-card-dim);
  border: 1px solid var(--dw-accent-light);
  border-radius: calc(10px * var(--sk));
  padding: calc(10px * var(--sk)) calc(12px * var(--sk));
  font-size: var(--dw-fs-klein);
  font-weight: 400;
  font-style: normal;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
  color: var(--dw-text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 60;
  cursor: pointer; /* Klick aufs Popover schliesst es (siehe HilfeInfo in app.js) */
}

#debug-error {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #4a1010;
  color: #ffdcdc;
  font-family: monospace;
  /* Vorher feste 12px. G-BREITE-1b (17.08.2026) verbietet die feste Pixelzahl
   * ausnahmslos, und eine Ausnahme "nur die Fehlerleiste" waere die erste
   * Bruchstelle: sie ist genau die Flaeche, die jemand bei 130 % liest, weil
   * etwas kaputt ist. */
  font-size: var(--dw-fs-klein);
  padding: calc(8px * var(--sk)) calc(12px * var(--sk));
  display: none;
  white-space: pre-wrap;
  max-height: 40vh;
  overflow: auto;
}