/*
  werkzeug.css, Werkzeug-Designsprache Studio 2, Version 1 (23.09.2026)
  Quelle: Zerlegung von produkte.ks04.de (gemessen 23.09.2026), Regelblatt WERKZEUG_DESIGN.md,
  Tokens werkzeug_tokens.json. Jede Variable hier entspricht genau einem Token dort.
  Hausregeln AGENTS.md 7: keine Emoji, kein Blur, kein Lila, kein Verlaufstext, keine Akzent-Seitenränder,
  keine Statuspunkte, keine Pillen in der Navigation, keine Serifen. Symbole nur Lucide (SVG, currentColor).
  Schrift: Public Sans statt Inter (Inter steht auf der Sperrliste). Laden: Google Fonts oder selbst gehostet,
  Schnitte 400, 500, 600, 700.
*/

:root {
  /* Farbe: Grund */
  --w-grund-seite: #f6f7fb;
  --w-grund-panel: #ffffff;
  --w-grund-kopf: #fafbfd;
  --w-grund-leise: #eef0f6;
  --w-grund-haupt-tint: #ecf0ff;
  /* Farbe: Text */
  --w-text-stark: #1a1d2e;
  --w-text-weich: #5b6478;
  --w-text-leise: #687085;
  --w-text-invers: #ffffff;
  /* Farbe: Rand */
  --w-rand-standard: #e4e7ef;
  --w-rand-leise: #eef0f6;
  --w-rand-hover: #d2d6e0;
  --w-rand-haupt: #c8d8ff;
  /* Farbe: Werkzeugfarbe (genau eine Hauptaktion je Ansicht) */
  --w-haupt: #2d5bff;
  --w-haupt-hover: #1e4ae6;
  --w-haupt-ring: rgba(45, 91, 255, 0.12);
  /* Farbe: Zustände (immer Text plus Symbol, nie nur Farbe, nie Punkt) */
  --w-ok-text: #0b6b48;
  --w-ok-grund: #e8f7f0;
  --w-ok-rand: #b8e5d0;
  --w-warn-text: #8f5b00;
  --w-warn-grund: #fff4e0;
  --w-fehler-text: #b32040;
  --w-fehler-grund: #fde8ec;
  --w-fehler-voll: #dc2e4a;
  --w-overlay: rgba(20, 25, 40, 0.5);

  /* Schrift */
  --w-schrift-ui: "Public Sans", system-ui, sans-serif;
  --w-schrift-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --w-gewicht-normal: 400;
  --w-gewicht-mittel: 500;
  --w-gewicht-halbfett: 600;
  --w-gewicht-fett: 700;
  --w-groesse-mikro: 11px;
  --w-groesse-klein: 12.5px;
  --w-groesse-basis: 14px;
  --w-groesse-titel: 18px;
  --w-groesse-seite: 22px;
  --w-groesse-kennzahl: 26px;
  --w-zeile-text: 1.5;
  --w-zeile-titel: 1.3;
  --w-laufweite-versal: 0.5px;
  --w-laufweite-titel: -0.5px;

  /* Abstand: Nachbarstufen mind. 25 Prozent auseinander */
  --w-abstand-2: 2px;
  --w-abstand-4: 4px;
  --w-abstand-6: 6px;
  --w-abstand-8: 8px;
  --w-abstand-12: 12px;
  --w-abstand-16: 16px;
  --w-abstand-20: 20px;
  --w-abstand-28: 28px;
  --w-abstand-36: 36px;

  /* Radius */
  --w-radius-klein: 6px;
  --w-radius-steuer: 8px;
  --w-radius-panel: 10px;
  --w-radius-gross: 14px;

  /* Schatten */
  --w-schatten-karte: 0 1px 2px rgba(20, 25, 40, 0.04), 0 4px 12px rgba(20, 25, 40, 0.04);
  --w-schatten-angehoben: 0 2px 4px rgba(20, 25, 40, 0.06), 0 8px 24px rgba(20, 25, 40, 0.08);
  --w-schatten-schwebend: 0 8px 24px rgba(0, 0, 0, 0.25);
  --w-schatten-dialog: 0 20px 60px rgba(0, 0, 0, 0.25);
  --w-schatten-fokus: 0 0 0 3px var(--w-haupt-ring);

  /* Höhen */
  --w-hoehe-abzeichen: 20px;
  --w-hoehe-kompakt: 32px;
  --w-hoehe-steuer: 36px;
  --w-hoehe-navigation: 40px;
  --w-hoehe-tabellenkopf: 42px;
  --w-hoehe-vorschaubild: 44px;
  --w-hoehe-tabellenzeile: 70px;
  --w-hoehe-arbeitskopf: 80px;

  /* Symbolgrößen (Lucide) */
  --w-symbol-klein: 12px;
  --w-symbol-standard: 16px;
  --w-symbol-gross: 20px;

  /* Layout */
  --w-leiste-links: 260px;
  --w-rail: 64px;
  --w-leiste-rechts: 320px;
  --w-dialog-breite: 720px;

  /* Bewegung */
  --w-zeit-schnell: 100ms;
  --w-zeit-normal: 150ms;
  --w-zeit-einblenden: 200ms;
  --w-kurve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Grundlage ===== */
.w-app, .w-app * { box-sizing: border-box; }
.w-app {
  margin: 0;
  font-family: var(--w-schrift-ui);
  font-size: var(--w-groesse-klein);
  line-height: var(--w-zeile-text);
  color: var(--w-text-stark);
  background: var(--w-grund-seite);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.w-app :focus-visible { outline: none; box-shadow: var(--w-schatten-fokus), 0 0 0 1px var(--w-haupt); }
.w-mono { font-family: var(--w-schrift-mono); font-size: var(--w-groesse-mikro); }
.w-abschneiden { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.w-versal {
  font-size: var(--w-groesse-mikro);
  font-weight: var(--w-gewicht-halbfett);
  letter-spacing: var(--w-laufweite-versal);
  text-transform: uppercase;
  color: var(--w-text-weich);
}
.w-hilfe { font-size: var(--w-groesse-mikro); color: var(--w-text-leise); }

/* Lucide-Symbol: <svg class="w-symbol"> mit stroke="currentColor", stroke-width 2 */
.w-symbol { width: var(--w-symbol-standard); height: var(--w-symbol-standard); flex-shrink: 0; stroke: currentColor; fill: none; }
.w-symbol--gross { width: var(--w-symbol-gross); height: var(--w-symbol-gross); }

/* ===== Rahmen: links fest, Mitte Bühne, rechts fest (Konzept 7.5, P10: keine atmenden Spalten) ===== */
.w-rahmen {
  display: grid;
  grid-template-columns: var(--w-leiste-links) minmax(0, 1fr) var(--w-leiste-rechts);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "links kopf rechts" "links buehne rechts" "links status rechts";
  height: 100vh;
}
.w-rahmen--ohne-rechts { grid-template-columns: var(--w-leiste-links) minmax(0, 1fr); grid-template-areas: "links kopf" "links buehne" "links status"; }
.w-rahmen--rail { grid-template-columns: var(--w-rail) minmax(0, 1fr) var(--w-leiste-rechts); }

/* ===== Seitenleiste mit Navigation (hell, aktiver Punkt als Tint) ===== */
.w-seitenleiste {
  grid-area: links;
  display: flex;
  flex-direction: column;
  background: var(--w-grund-panel);
  border-right: 1px solid var(--w-rand-standard);
  min-height: 0;
  overflow-y: auto;
}
.w-seitenleiste__kopf { display: flex; align-items: center; gap: var(--w-abstand-12); padding: var(--w-abstand-16) var(--w-abstand-12); border-bottom: 1px solid var(--w-rand-standard); }
.w-nav { display: flex; flex-direction: column; gap: var(--w-abstand-2); padding: var(--w-abstand-12); }
.w-nav__gruppe { padding: var(--w-abstand-12) var(--w-abstand-12) var(--w-abstand-4); }
.w-nav__punkt {
  display: flex;
  align-items: center;
  gap: var(--w-abstand-12);
  height: var(--w-hoehe-navigation);
  padding: 0 var(--w-abstand-12);
  border-radius: var(--w-radius-steuer);
  color: var(--w-text-weich);
  font-weight: var(--w-gewicht-mittel);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--w-zeit-normal), color var(--w-zeit-normal);
}
.w-nav__punkt:hover { background: var(--w-grund-kopf); color: var(--w-text-stark); }
.w-nav__punkt[aria-current="page"], .w-nav__punkt.ist-aktiv { background: var(--w-grund-haupt-tint); color: var(--w-haupt); }
.w-nav__zahl { margin-left: auto; font-size: var(--w-groesse-mikro); color: var(--w-text-leise); font-variant-numeric: tabular-nums; }

/* ===== Leiste: Arbeitskopf über der Bühne und Statuszeile darunter, beide außerhalb der Bühne ===== */
.w-leiste {
  grid-area: kopf;
  display: flex;
  align-items: center;
  gap: var(--w-abstand-16);
  min-height: var(--w-hoehe-arbeitskopf);
  padding: var(--w-abstand-16) var(--w-abstand-36);
  background: var(--w-grund-panel);
  border-bottom: 1px solid var(--w-rand-standard);
}
.w-leiste__titel { min-width: 0; }
.w-leiste__titel h1 { margin: 0; font-size: var(--w-groesse-titel); font-weight: var(--w-gewicht-fett); line-height: var(--w-zeile-titel); }
.w-leiste__titel p { margin: var(--w-abstand-2) 0 0; color: var(--w-text-weich); }
.w-leiste__aktionen { margin-left: auto; display: flex; align-items: center; gap: var(--w-abstand-8); }
.w-statuszeile {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: var(--w-abstand-16);
  min-height: var(--w-hoehe-kompakt);
  padding: 0 var(--w-abstand-16);
  font-size: var(--w-groesse-mikro);
  color: var(--w-text-weich);
  background: var(--w-grund-panel);
  border-top: 1px solid var(--w-rand-standard);
}
.w-buehne { grid-area: buehne; min-width: 0; min-height: 0; overflow: auto; padding: var(--w-abstand-28) var(--w-abstand-36); }
.w-seitentitel { margin: 0; font-size: var(--w-groesse-seite); font-weight: var(--w-gewicht-fett); line-height: var(--w-zeile-titel); letter-spacing: var(--w-laufweite-titel); }

/* ===== Knopf ===== */
.w-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w-abstand-6);
  height: var(--w-hoehe-steuer);
  padding: 0 var(--w-abstand-16);
  border: 1px solid var(--w-rand-standard);
  border-radius: var(--w-radius-steuer);
  background: var(--w-grund-panel);
  color: var(--w-text-stark);
  font: inherit;
  font-weight: var(--w-gewicht-mittel);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--w-zeit-normal), border-color var(--w-zeit-normal), color var(--w-zeit-normal);
}
.w-knopf:hover { background: var(--w-grund-kopf); border-color: var(--w-rand-hover); }
.w-knopf--haupt { background: var(--w-haupt); border-color: transparent; color: var(--w-text-invers); }
.w-knopf--haupt:hover { background: var(--w-haupt-hover); border-color: transparent; }
.w-knopf--gefahr { color: var(--w-fehler-text); }
.w-knopf--gefahr:hover { background: var(--w-fehler-grund); }
.w-knopf--gefahr-voll { background: var(--w-fehler-voll); border-color: transparent; color: var(--w-text-invers); }
.w-knopf--leise { border-color: transparent; background: transparent; color: var(--w-text-weich); }
.w-knopf--leise:hover { background: var(--w-grund-leise); color: var(--w-text-stark); }
.w-knopf--symbol { width: var(--w-hoehe-steuer); padding: 0; }
.w-knopf:disabled, .w-knopf[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.w-knopf.ist-laedt { cursor: progress; }
/* Knopfgruppe (Rückgängig/Wiederholen, Breitenwahl): gemeinsamer Rand, innen ohne Radius */
.w-knopfgruppe { display: inline-flex; }
.w-knopfgruppe > .w-knopf { border-radius: 0; margin-left: -1px; }
.w-knopfgruppe > .w-knopf:first-child { border-radius: var(--w-radius-steuer) 0 0 var(--w-radius-steuer); margin-left: 0; }
.w-knopfgruppe > .w-knopf:last-child { border-radius: 0 var(--w-radius-steuer) var(--w-radius-steuer) 0; }
.w-knopfgruppe > .w-knopf[aria-pressed="true"] { background: var(--w-grund-haupt-tint); color: var(--w-haupt); position: relative; }

/* ===== Eingabe ===== */
.w-feld { display: flex; flex-direction: column; gap: var(--w-abstand-4); min-width: 0; }
.w-felder { display: flex; flex-direction: column; gap: var(--w-abstand-12); }
.w-feld__label { font-size: var(--w-groesse-mikro); font-weight: var(--w-gewicht-mittel); color: var(--w-text-weich); }
.w-feld__zeile { display: flex; gap: var(--w-abstand-6); }
.w-feld__zeile > .w-eingabe { flex: 1; }
.w-feldraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w-abstand-12); }
.w-eingabe {
  width: 100%;
  height: var(--w-hoehe-steuer);
  padding: 0 var(--w-abstand-12);
  border: 1px solid var(--w-rand-standard);
  border-radius: var(--w-radius-steuer);
  background: var(--w-grund-panel);
  color: var(--w-text-stark);
  font: inherit;
  transition: border-color var(--w-zeit-normal), box-shadow var(--w-zeit-normal);
}
textarea.w-eingabe { height: auto; min-height: 88px; padding: var(--w-abstand-8) var(--w-abstand-12); resize: vertical; }
.w-eingabe::placeholder { color: var(--w-text-leise); }
.w-eingabe:hover { border-color: var(--w-rand-hover); }
.w-eingabe:focus { outline: none; border-color: var(--w-haupt); box-shadow: var(--w-schatten-fokus); }
.w-eingabe[aria-invalid="true"] { border-color: var(--w-fehler-text); }
.w-eingabe:disabled, .w-eingabe[readonly] { background: var(--w-grund-kopf); color: var(--w-text-weich); }
.w-feld__fehler { font-size: var(--w-groesse-mikro); color: var(--w-fehler-text); }
.w-auswahlkasten { width: 16px; height: 16px; accent-color: var(--w-haupt); border-radius: var(--w-radius-klein); }

/* ===== Reiter (rechte Spalte: Gestalt, Kritik, System) ===== */
.w-reiter { display: flex; gap: var(--w-abstand-4); padding: var(--w-abstand-4); background: var(--w-grund-leise); border-radius: var(--w-radius-panel); }
.w-reiter__punkt {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w-abstand-6);
  height: var(--w-hoehe-kompakt);
  padding: 0 var(--w-abstand-12);
  border: 0;
  border-radius: var(--w-radius-steuer);
  background: transparent;
  color: var(--w-text-weich);
  font: inherit;
  font-weight: var(--w-gewicht-mittel);
  cursor: pointer;
}
.w-reiter__punkt:hover { color: var(--w-text-stark); }
.w-reiter__punkt[aria-selected="true"] { background: var(--w-grund-panel); color: var(--w-text-stark); box-shadow: var(--w-schatten-karte); }

/* ===== Panel (Abschnitt mit Kopf und Hilfe) ===== */
.w-panel {
  background: var(--w-grund-panel);
  border: 1px solid var(--w-rand-standard);
  border-radius: var(--w-radius-gross);
  padding: var(--w-abstand-20);
  box-shadow: var(--w-schatten-karte);
}
.w-stapel { display: flex; flex-direction: column; gap: var(--w-abstand-16); }
.w-panel__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--w-abstand-16); margin-bottom: var(--w-abstand-16); }
.w-panel__titel { margin: 0; font-size: var(--w-groesse-basis); font-weight: var(--w-gewicht-halbfett); }
.w-panel--klein { border-radius: var(--w-radius-panel); padding: var(--w-abstand-12) var(--w-abstand-16); box-shadow: none; }
/* Seitenspalte rechts */
.w-spalte-rechts { grid-area: rechts; display: flex; flex-direction: column; gap: var(--w-abstand-12); padding: var(--w-abstand-16); background: var(--w-grund-panel); border-left: 1px solid var(--w-rand-standard); overflow-y: auto; min-height: 0; }

/* Vergleich: Quelle (Referenz) und Ziel (Nachbau) nebeneinander, Muster aus produkte "Plenty-Quelle / Odoo-Ziel" ohne Lila */
.w-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--w-abstand-16); }
.w-vergleich__seite { padding: var(--w-abstand-16); border: 1px solid var(--w-rand-standard); border-radius: var(--w-radius-panel); background: var(--w-grund-seite); }
.w-vergleich__seite--ziel { background: var(--w-grund-panel); border-color: var(--w-rand-haupt); }
.w-vergleich__kopf { padding-bottom: var(--w-abstand-8); margin-bottom: var(--w-abstand-12); border-bottom: 1px solid var(--w-rand-standard); }

/* ===== Liste (Tabelle und einfache Liste) ===== */
.w-liste-rahmen { background: var(--w-grund-panel); border: 1px solid var(--w-rand-standard); border-radius: var(--w-radius-gross); box-shadow: var(--w-schatten-karte); overflow: auto; }
.w-liste { width: 100%; border-collapse: collapse; table-layout: fixed; }
.w-liste th {
  height: var(--w-hoehe-tabellenkopf);
  padding: 0 var(--w-abstand-16);
  text-align: left;
  font-size: var(--w-groesse-mikro);
  font-weight: var(--w-gewicht-halbfett);
  letter-spacing: var(--w-laufweite-versal);
  text-transform: uppercase;
  color: var(--w-text-weich);
  background: var(--w-grund-kopf);
  border-bottom: 1px solid var(--w-rand-standard);
  white-space: nowrap;
}
.w-liste td { padding: var(--w-abstand-8) var(--w-abstand-16); border-bottom: 1px solid var(--w-rand-leise); vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-liste tbody tr { transition: background var(--w-zeit-schnell); }
.w-liste tbody tr:hover { background: var(--w-grund-kopf); cursor: pointer; }
.w-liste tbody tr[aria-selected="true"] { background: var(--w-grund-haupt-tint); }
.w-liste__bild { width: var(--w-hoehe-vorschaubild); height: var(--w-hoehe-vorschaubild); border-radius: var(--w-radius-steuer); object-fit: cover; background: var(--w-grund-leise); display: block; }
.w-liste__zahl { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--w-gewicht-mittel); }
.w-listenpunkt { display: flex; align-items: center; gap: var(--w-abstand-8); min-height: var(--w-hoehe-kompakt); padding: 0 var(--w-abstand-8); border-radius: var(--w-radius-klein); color: var(--w-text-stark); cursor: pointer; }
.w-listenpunkt:hover { background: var(--w-grund-kopf); }
.w-listenpunkt[aria-selected="true"] { background: var(--w-grund-haupt-tint); color: var(--w-haupt); }

/* ===== Karte (Entwurf, Baustein): Bild über 70 Prozent, eine Aktion plus Überlauf ===== */
.w-kartenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--w-abstand-16); }
.w-karte { display: flex; flex-direction: column; background: var(--w-grund-panel); border: 1px solid var(--w-rand-standard); border-radius: var(--w-radius-panel); overflow: hidden; transition: box-shadow var(--w-zeit-normal), border-color var(--w-zeit-normal); }
.w-karte:hover { box-shadow: var(--w-schatten-angehoben); border-color: var(--w-rand-hover); }
.w-karte[aria-selected="true"] { border-color: var(--w-haupt); box-shadow: var(--w-schatten-fokus); }
.w-karte__bild { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; object-position: top; background: var(--w-grund-leise); display: block; }
.w-karte__fuss { display: flex; align-items: center; gap: var(--w-abstand-8); padding: var(--w-abstand-8) var(--w-abstand-8) var(--w-abstand-8) var(--w-abstand-12); }
.w-karte__text { flex: 1; min-width: 0; }
.w-karte__name { font-weight: var(--w-gewicht-mittel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-karte__meta { font-size: var(--w-groesse-mikro); color: var(--w-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kennzahl-Karte */
.w-kennzahl { background: var(--w-grund-panel); border: 1px solid var(--w-rand-standard); border-radius: var(--w-radius-panel); padding: var(--w-abstand-16); }
.w-kennzahl__wert { margin-top: var(--w-abstand-4); font-size: var(--w-groesse-kennzahl); font-weight: var(--w-gewicht-fett); line-height: var(--w-zeile-titel); letter-spacing: var(--w-laufweite-titel); }

/* ===== Abzeichen: Zustand als Tint plus Lucide-Symbol plus Wort. Kein Punkt davor ===== */
.w-abzeichen { display: inline-flex; align-items: center; gap: var(--w-abstand-4); height: var(--w-hoehe-abzeichen); padding: 0 var(--w-abstand-6); border-radius: var(--w-radius-klein); font-size: var(--w-groesse-mikro); font-weight: var(--w-gewicht-halbfett); background: var(--w-grund-leise); color: var(--w-text-weich); white-space: nowrap; }
.w-abzeichen .w-symbol { width: var(--w-symbol-klein); height: var(--w-symbol-klein); }
.w-abzeichen--ok { background: var(--w-ok-grund); color: var(--w-ok-text); }
.w-abzeichen--warn { background: var(--w-warn-grund); color: var(--w-warn-text); }
.w-abzeichen--fehler { background: var(--w-fehler-grund); color: var(--w-fehler-text); }
.w-abzeichen--haupt { background: var(--w-grund-haupt-tint); color: var(--w-haupt); }

/* ===== Dialog ===== */
.w-dialog-grund { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--w-overlay); animation: w-einblenden var(--w-zeit-einblenden) var(--w-kurve); }
.w-dialog { width: min(var(--w-dialog-breite), 94vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--w-grund-panel); border-radius: var(--w-radius-gross); box-shadow: var(--w-schatten-dialog); }
.w-dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--w-abstand-16); padding: var(--w-abstand-16) var(--w-abstand-20); border-bottom: 1px solid var(--w-rand-standard); }
.w-dialog__kopf h2 { margin: 0; font-size: var(--w-groesse-basis); font-weight: var(--w-gewicht-halbfett); }
.w-dialog__inhalt { flex: 1; overflow-y: auto; padding: var(--w-abstand-20); }
.w-dialog__fuss { display: flex; justify-content: flex-end; gap: var(--w-abstand-8); padding: var(--w-abstand-16) var(--w-abstand-20); border-top: 1px solid var(--w-rand-standard); }

/* ===== Aufklappmenü (Überlauf "Mehr") und Meldung ===== */
.w-menue { min-width: 180px; padding: var(--w-abstand-4); background: var(--w-grund-panel); border: 1px solid var(--w-rand-standard); border-radius: var(--w-radius-panel); box-shadow: var(--w-schatten-schwebend); }
.w-meldungen { position: fixed; right: var(--w-abstand-20); bottom: var(--w-abstand-20); z-index: 200; display: flex; flex-direction: column; gap: var(--w-abstand-8); }
.w-meldung { display: flex; align-items: center; gap: var(--w-abstand-8); max-width: 340px; padding: var(--w-abstand-12) var(--w-abstand-16); border-radius: var(--w-radius-steuer); background: var(--w-text-stark); color: var(--w-text-invers); box-shadow: var(--w-schatten-schwebend); }
.w-meldung--ok { background: var(--w-ok-text); }
.w-meldung--fehler { background: var(--w-fehler-text); }

@keyframes w-einblenden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .w-app * { animation: none !important; transition: none !important; } }