/* Intranet für Optiker: --akzent kommt aus der Config der Instanz (datei.php?n=farbe), beim Öffnen eines Bausteins aus seiner Farbe.
   Seit 0.0.24 kann Wahrnehmungswerk je Betrieb alle Grundfarben unten einstellen (Reiter Erscheinungsbild, kern-erscheinungsbild.php); datei.php
   setzt dann die geänderten Werte und rechnet die abgeleiteten Kernfarben (Block "Abgeleitet") aus ihnen. Ohne Eingriff gilt genau das hier.
   GESTALTUNGSWERTE: Bausteine benutzen nur diese Variablen, keine eigenen Farben, keine eigene Schrift (geprüft von tools/stilpruefung.php). */
:root {
  /* Farben */
  --akzent: #3c7bff;            /* Betriebsfarbe bzw. Farbe des geöffneten Bausteins */
  --auf-akzent: #fff;           /* Schrift auf --akzent */
  --akzent-hell: color-mix(in srgb, var(--akzent) 62%, var(--hell));   /* helle Stufe des Akzents, z. B. Name der schreibenden Person im Chat */
  /* --akzent-knopf: Fläche für weiße Schrift (Knöpfe, Sprunglink), Formel unten bei .knopf */
  --bg: #03030a;                /* Seitenhintergrund */
  /* Verlauf (seit 0.0.48, nur wenn eingeschaltet): datei.php setzt dann --verlauf-winkel und die gesetzten zweiten Farben --akzent-2 (Knöpfe), --kopf-2 (Kopfleiste),
     --bg-2 (Seitenhintergrund); iw_kopf setzt am <html> die Klassen verlauf-knopf, verlauf-kopf, verlauf-bg. Ohne diese Klassen ändert sich nichts. */
  --verlauf-winkel: 90deg;
  --flaeche-1: #0b0d1a;         /* Fläche, Stufe 1: Karten, Blöcke, Kacheln */
  --flaeche-2: #11152a;         /* Fläche, Stufe 2: auf einer Karte erhöht (Blasen, Felder in Karten) */
  --karte: var(--flaeche-1);    /* älterer Name für Stufe 1, bleibt gültig */
  --eingabe: #05060f;           /* Eingabefelder */
  --linie: rgba(255,255,255,.1);
  --text: #f5f7ff;
  --dim: #98a0bd;               /* Nebentext */
  --rot: #ff8a80;               /* Fehler, kritisch */
  --gruen: #5fd6a0;             /* gut, gespeichert */
  --warnung: #e8d29a;           /* Achtung, Hinweis */
  --auf-warnung: #1a1406;       /* Schrift auf --warnung */
  /* Abgeleitet (nur Kern, seit 0.0.24): Werte des Standards; bei eigenem Erscheinungsbild rechnet datei.php sie aus den Grundfarben */
  --hell: #fff;                          /* Text bei Hover und aktiv */
  --hauch-1: rgba(255,255,255,.04);      /* Hover-Fläche */
  --hauch-2: rgba(255,255,255,.05);      /* feine Trennlinie */
  --glanz: #0d1330;                      /* Schein oben auf der Seite */
  --warnung-flaeche: rgba(224,182,89,.08); --warnung-rand: rgba(224,182,89,.4);
  --dim-2: #7c85a6;                      /* Zeit im Protokoll */
  --code-flaeche: #141831; --code-text: #2fc1ff;
  --logo-flaeche: #101426;
  --schalter-bahn: #2a2f4a; --schalter-knopf: #c9cee3;
  --lesend-flaeche: #070914;
  --schleier: rgba(0,0,0,.58);           /* abgedunkelter Hintergrund hinter Fenstern, in jedem Erscheinungsbild gleich */
  /* Abgeleitet für Diagramme, Zahlen und Chips (seit 0.0.49): rechnen immer per color-mix aus den Grundfarben oben, im Standard wie im eigenen Erscheinungsbild
     (die Werte hängen an den Grundfarben, nicht an festen Zahlen; ändert datei.php eine Grundfarbe, ziehen sie nach). Die Reihenfarben --reihe-1 bis
     --reihe-6 (Gruppen, Standorte) rechnet datei.php aus dem Akzent (kern-reihenfarben.php, Kontrast zur Karte geprüft); hier der Standard für den Akzent #3c7bff. */
  --linie-stark: color-mix(in srgb, var(--text) 17%, transparent);                /* kräftigere Linie: Gitter, Rand von Feldern */
  --prognose: color-mix(in srgb, var(--dim) 80%, var(--flaeche-1));               /* Linie und Rand der Schätzung (immer gestrichelt) */
  --vorjahr: var(--dim);                                                          /* Linie des Vorjahres (immer gepunktet) */
  --chip-gut: color-mix(in srgb, var(--gruen) 15%, transparent);                  /* Fläche der Chips; die Schrift darauf ist -text, ein Stück zur Textfarbe hin */
  --chip-schlecht: color-mix(in srgb, var(--rot) 15%, transparent);
  --chip-warn: color-mix(in srgb, var(--warnung) 16%, transparent);
  --chip-gut-text: color-mix(in srgb, var(--gruen) 82%, var(--text));
  --chip-schlecht-text: color-mix(in srgb, var(--rot) 82%, var(--text));
  --chip-warn-text: color-mix(in srgb, var(--warnung) 82%, var(--text));
  --akzent-hauch: color-mix(in srgb, var(--akzent) 14%, transparent);             /* zarte Akzentfläche (Symbolfläche leerer Zustand) */
  --leuchten: color-mix(in srgb, var(--akzent) 24%, transparent);                 /* weicher Schein in der Ecke großer Karten */
  --schatten-farbe: color-mix(in srgb, var(--bg) 55%, #000);                      /* Schatten unter Karten */
  --reihe-1: #3c7bff; --reihe-2: #f48126; --reihe-3: #d67ce2; --reihe-4: #9db11c; --reihe-5: #21bcb2; --reihe-6: #fa7091;   /* Standard (Akzent #3c7bff auf --flaeche-1 #0b0d1a), solange datei.php sie nicht rechnet */
  /* Schrift */
  --schrift: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --schrift-klein: .82rem;
  --schrift-text: 1rem;
  --schrift-gross: 1.15rem;
  --schrift-titel: 1.8rem;
  --schrift-zahl: 2.1rem;
  --schrift-anzeige: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;   /* große Zahlen und Titel (seit 0.0.49) */
  /* Abstände */
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 12px; --abstand-4: 16px; --abstand-5: 24px; --abstand-6: 32px;
  /* Radien */
  --radius-klein: 8px; --radius: 12px; --radius-gross: 16px; --radius-karte: 20px; --radius-rund: 99px;   /* --radius-karte seit 0.0.49: große Karten */
  /* Bewegung: hinein langsamer als hinaus */
  --dauer-rein: 220ms; --dauer-raus: 150ms;
  /* Fokusrahmen der Knöpfe (seit der Prüfrunde Kern 30.10.2026): die Textfarbe, deren Kontrast zum Hintergrund (auch zu beiden Enden eines Verlaufs)
     das Erscheinungsbild prüft. Der Rahmen liegt mit Abstand außen auf dem Hintergrund, nie auf der Knopffläche, darum lesbar auch bei Verlauf. */
  --fokus: var(--text);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(900px 480px at 50% -10%, var(--glanz), var(--bg) 62%) no-repeat, var(--bg); color: var(--text); font-family: var(--schrift); font-size: 16px; line-height: 1.55; }
.verlauf-bg body { background: radial-gradient(900px 480px at 50% -10%, var(--glanz), transparent 62%) no-repeat, linear-gradient(var(--verlauf-winkel), var(--bg), var(--bg-2)) no-repeat, var(--bg); }   /* Verlauf, 0.0.48 */
body.mittig { display: grid; place-items: center; padding: 20px; }
.logo { height: 36px; width: auto; display: block; }
.marke { display: flex; align-items: center; gap: 12px; }
.marke b { display: block; font-size: 1rem; }
.marke small { display: block; color: var(--dim); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }

.karte { width: 100%; max-width: 390px; padding: 28px 26px; background: var(--karte); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); border-radius: 18px; }
.karte h1 { margin: 22px 0 4px; font-size: 1.35rem; }
label { display: block; margin: 16px 0 6px; color: var(--dim); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel], input[type=url], input[type=search], textarea, select { width: 100%; padding: 11px 12px; background: var(--eingabe); color: var(--text); border: 1px solid var(--linie); border-radius: 10px; font: inherit; }
input:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
label.haken { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: var(--text); font-size: .92rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
label.haken input { width: 18px; height: 18px; margin: 0; accent-color: var(--akzent); }
/* Knopffarbe mit sicherem Kontrast (0.0.18): Weiße Schrift braucht 4,5 : 1, Betriebsfarben sind ab 3 : 1 erlaubt (IW_FARBE_MIN_KONTRAST).
   --akzent-knopf ist der Akzent, nur wenn nötig dunkler: Die linearen RGB-Anteile werden gemeinsam so weit verkleinert, dass die Leuchtdichte
   höchstens 0,1768 ist (= 4,63 : 1 gegen Weiß). Farbton und Sättigung bleiben, Farben mit genug Kontrast (Palette IW_FARBEN) bleiben unverändert.
   Ohne Relative-Farben-Syntax (ältere Browser): 78 % Akzent mit Schwarz (gerechnet: mindestens 4,67 : 1 für jede erlaubte Betriebsfarbe).
   Neu berechnet auch dort, wo --akzent örtlich ersetzt wird (Farbproben, Vorschau im Farbwähler). Hover dunkler statt heller, damit der Kontrast hält. */
:root, .mit-probe, .fw-vorschau, .eb-vorschau { --akzent-knopf: color-mix(in srgb, var(--akzent) 78%, #000); --akzent-2-knopf: color-mix(in srgb, var(--akzent-2) 78%, #000); }
@supports (color: color(from red srgb-linear r g b)) {
  :root, .mit-probe, .fw-vorschau, .eb-vorschau {
    --akzent-knopf: color(from var(--akzent) srgb-linear
      calc(r * min(1, 0.1768 / (0.2126 * r + 0.7152 * g + 0.0722 * b + 0.000001)))
      calc(g * min(1, 0.1768 / (0.2126 * r + 0.7152 * g + 0.0722 * b + 0.000001)))
      calc(b * min(1, 0.1768 / (0.2126 * r + 0.7152 * g + 0.0722 * b + 0.000001))));
    --akzent-2-knopf: color(from var(--akzent-2) srgb-linear   /* Ende des Knopf-Verlaufs: gleiche Abdunklung wie der Akzent (Verlauf, 0.0.48) */
      calc(r * min(1, 0.1768 / (0.2126 * r + 0.7152 * g + 0.0722 * b + 0.000001)))
      calc(g * min(1, 0.1768 / (0.2126 * r + 0.7152 * g + 0.0722 * b + 0.000001)))
      calc(b * min(1, 0.1768 / (0.2126 * r + 0.7152 * g + 0.0722 * b + 0.000001))));
  }
}
/* Eigenes Erscheinungsbild (seit 0.0.24, Reiter Erscheinungsbild): iw_kopf setzt am <html> die Klasse eb-eigen, sobald eine Grundfarbe außer dem
   Akzent geändert ist; dann kommen die abgeleiteten Kernfarben aus den Grundfarben statt aus den festen Werten des Standards. Die Vorschau im
   Reiter (.eb-vorschau) rechnet genauso. Dunkle Schrift auf dem Akzent (eb-dunkle-schrift): der Knopf wird nicht abgedunkelt, die Prüfung auf dem
   Server verlangt dafür mindestens 3 : 1 zwischen --auf-akzent und dem Akzent. */
.eb-eigen, .eb-vorschau {
  --linie: color-mix(in srgb, var(--text) 10%, transparent);   /* nur ohne eigene Linie: datei.php setzt eine eigene danach */
  --hell: var(--text);
  --hauch-1: color-mix(in srgb, var(--text) 4%, transparent);
  --hauch-2: color-mix(in srgb, var(--text) 6%, transparent);
  --glanz: color-mix(in srgb, var(--akzent) 10%, var(--bg));
  --warnung-flaeche: color-mix(in srgb, var(--warnung) 10%, transparent); --warnung-rand: color-mix(in srgb, var(--warnung) 45%, transparent);
  --dim-2: var(--dim);
  --code-flaeche: var(--flaeche-2); --code-text: var(--text);
  --logo-flaeche: var(--flaeche-2);
  --schalter-bahn: color-mix(in srgb, var(--text) 22%, var(--flaeche-1)); --schalter-knopf: color-mix(in srgb, var(--text) 70%, var(--flaeche-1));
  --lesend-flaeche: color-mix(in srgb, var(--bg) 50%, var(--flaeche-1));
}
.eb-hell { color-scheme: light; }
.eb-dunkle-schrift, .eb-dunkle-schrift .mit-probe, .eb-dunkle-schrift .fw-vorschau, .eb-vorschau.eb-dunkle-schrift { --akzent-knopf: var(--akzent); --akzent-2-knopf: var(--akzent-2); }
.knopf { display: block; width: 100%; margin-top: 20px; padding: 12px 18px; background: var(--akzent-knopf); color: var(--auf-akzent); border: 0; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.knopf:hover { background: color-mix(in srgb, var(--akzent-knopf) 86%, #000); }
/* Verlauf (seit 0.0.48): nur unter .verlauf-knopf (html bzw. die Vorschau im Erscheinungsbild); Hover wie beim Einfarbigen dunkler. Sonst bleibt alles wie oben. */
.verlauf-knopf .knopf:not(.hell):not(.gefahr) { background-image: linear-gradient(var(--verlauf-winkel), var(--akzent-knopf), var(--akzent-2-knopf)); }
.verlauf-knopf .knopf:not(.hell):not(.gefahr):hover { background-image: linear-gradient(var(--verlauf-winkel), color-mix(in srgb, var(--akzent-knopf) 86%, #000), color-mix(in srgb, var(--akzent-2-knopf) 86%, #000)); }
/* Dasselbe für die Hauptknöpfe der Bausteine, zentral hier statt je Baustein (Hauptknopf, Fragebogen-Tab, Team-Chat Senden). */
.verlauf-knopf :is(.ab-knopf.ab-haupt, .fb-knopf.haupt, .fb-tab-knopf.haupt, .ku-knopf.ku-haupt, .sf-knopf.sf-haupt, .vt-knopf.vt-haupt, .tc-senden-knopf) { background-image: linear-gradient(var(--verlauf-winkel), var(--akzent-knopf), var(--akzent-2-knopf)); }
.verlauf-knopf :is(.ab-knopf.ab-haupt, .fb-knopf.haupt, .fb-tab-knopf.haupt, .ku-knopf.ku-haupt, .sf-knopf.sf-haupt, .vt-knopf.vt-haupt, .tc-senden-knopf):hover { background-image: linear-gradient(var(--verlauf-winkel), color-mix(in srgb, var(--akzent-knopf) 86%, #000), color-mix(in srgb, var(--akzent-2-knopf) 86%, #000)); }
.knopf.klein { width: auto; margin: 0; padding: 7px 14px; min-height: 0; font-size: .85rem; }
/* Standort entfernen (0.0.7): Bestätigungsschritt im Hausdesign statt Browser-Rückfrage. Rot nur zusammen mit Worten. */
.knopf.gefahr { background: var(--rot); color: var(--auf-warnung); }
.knopf.gefahr:hover { filter: brightness(1.1); }
.knopf.gefahr:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.knopf.hell.gefahr-rand { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, transparent); }
.knopf.hell.gefahr-rand:hover { color: var(--rot); border-color: var(--rot); }
.knopf.hell:disabled { opacity: .5; cursor: not-allowed; }
.zeile .knopf.klein { min-height: 44px; display: inline-flex; align-items: center; }
.knopf-hinweis { align-self: center; color: var(--dim); font-size: var(--schrift-klein); }
.block.entfernen { border-color: color-mix(in srgb, var(--rot) 55%, transparent); border-top: 3px solid var(--rot); }
.block.entfernen:focus { outline: none; }
.entfernen-titel { margin: var(--abstand-4) 0 var(--abstand-1); font-size: var(--schrift-text); }
.entfernen-liste { margin: var(--abstand-1) 0 0; padding-left: 1.2em; }
.entfernen-liste li { margin: var(--abstand-1) 0; }
.block.entfernen > .entfernen-liste { color: var(--text); }
.entfernen-knoepfe { display: flex; gap: var(--abstand-3); flex-wrap: wrap; margin-top: var(--abstand-4); }
.entfernen-knoepfe .knopf { min-height: 44px; padding: 10px 20px; display: inline-flex; align-items: center; }
.code-version { margin: var(--abstand-6) 0 0; padding-top: var(--abstand-3); border-top: 1px solid var(--linie); color: var(--dim); font-size: var(--schrift-klein); font-variant-numeric: tabular-nums; }
.knopf.klein.mit-abstand { margin-top: 18px; }   /* ersetzt das frühere style="margin-top:18px", das die CSP blockiert hat (0.0.7) */
.knopf.hell { background: transparent; color: var(--dim); border: 1px solid var(--linie); }
.knopf.hell:hover { color: var(--hell); border-color: var(--akzent); }
.fehler { margin: 14px 0 0; padding: 10px 12px; background: color-mix(in srgb, var(--rot) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rot) 50%, transparent); border-radius: 10px; color: var(--rot); font-size: .9rem; }
.wechsel { margin: 18px 0 0; text-align: center; font-size: .9rem; }
.wechsel a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--linie); }
.wechsel a:hover { color: var(--hell); border-color: var(--akzent); }

.oben { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--linie); background: color-mix(in srgb, var(--bg) 90%, transparent); }
.ich { display: flex; align-items: center; gap: 14px; color: var(--dim); font-size: .9rem; }
/* Kopfleiste mit Verlauf (0.0.48): vom Akzent bis --kopf-2, Schrift ist "Schrift auf Akzent" (der Server prüft sie gegen beide Enden) */
.verlauf-kopf .oben { background: linear-gradient(var(--verlauf-winkel), var(--akzent), var(--kopf-2)); color: var(--auf-akzent); border-bottom-color: transparent; }
.verlauf-kopf .oben .ich, .verlauf-kopf .oben .marke small, .verlauf-kopf .oben .marke-rolle, .verlauf-kopf .oben .kopf-hinweis, .verlauf-kopf .oben .knopf.hell { color: inherit; }
.verlauf-kopf .oben .knopf.hell { border-color: currentColor; }
.ich form { margin: 0; }
/* Hinweise im Kopf (seit 0.0.35, kern-hinweise.php): großer, leicht schräger Briefumschlag mit rotem Ausrufezeichen (Zeichen, nicht nur Farbe) und der
   Zahl klein unten rechts. Trefffläche 56 px; der negative Rand hält die Kopfzeile so hoch wie ohne Umschlag. Bewegung: einmal kurz wackeln beim
   Seitenaufbau, nie dauernd, nie bei "Bewegung reduzieren". */
.ich { flex-wrap: wrap; min-width: 0; }
.kopf-hinweise { display: flex; gap: var(--abstand-2); margin-block: calc(-1 * var(--abstand-3)); margin-left: auto; }
.kopf-hinweis { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); color: var(--hell); text-decoration: none; }
.kopf-hinweis:hover { background: var(--hauch-1); }
.kopf-hinweis:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kopf-hinweis-bild { position: relative; display: block; width: 46px; height: 46px; transform: rotate(-9deg); }
.kopf-hinweis-bild svg { display: block; width: 46px; height: 46px; fill: color-mix(in srgb, var(--rot) 8%, var(--flaeche-2)); stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kopf-hinweis-zeichen { position: absolute; top: -3px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-rund);
  background: var(--rot); color: var(--bg); box-shadow: 0 0 0 2px var(--bg); font-size: .95rem; font-weight: 800; line-height: 1; }
.kopf-hinweis-zahl { position: absolute; bottom: -1px; right: -9px; min-width: 20px; padding: 0 5px; border: 1px solid var(--linie); border-radius: var(--radius-rund);
  background: var(--flaeche-2); color: var(--text); font-size: .72rem; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
@keyframes kopf-hinweis-wackeln { 0%, 100% { transform: rotate(-9deg); } 20% { transform: rotate(-17deg); } 45% { transform: rotate(1deg); } 70% { transform: rotate(-13deg); } 85% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: no-preference) { .kopf-hinweis-bild { animation: kopf-hinweis-wackeln 700ms ease-in-out 350ms 1; } }
.inhalt { max-width: 860px; margin: 0 auto; padding: 34px clamp(14px, 3vw, 28px) 60px; }
.inhalt h1 { margin: 0 0 6px; font-size: 1.8rem; }
.lead { color: var(--dim); margin: 0 0 24px; }
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; padding: 18px 22px; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; }
dl.daten dt { color: var(--dim); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
dl.daten dd { margin: 0; }
@media (max-width: 520px) { dl.daten { grid-template-columns: 1fr; gap: 2px; } dl.daten dd { margin-bottom: 10px; } }

/* Admin-Bereich */
.inhalt.breit { max-width: 980px; }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.reiter a { padding: 8px 16px; border-radius: 99px; border: 1px solid transparent; color: var(--dim); text-decoration: none; font-size: .9rem; }
.reiter a:hover { color: var(--hell); }
.reiter a.aktiv { color: var(--hell); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, transparent); }
.block { margin: 0 0 18px; padding: 16px 20px 18px; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; }
.block.aus { opacity: .6; }
.block h2 { margin: 0 0 6px; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.block .klein:not(.knopf) { margin: 0 0 6px; color: var(--dim); font-size: .85rem; }
.zeile { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 0; }
.zeile > div { flex: 1 1 200px; min-width: 0; }
.zeile .knopf { margin: 0; }
.zeile label small, .knopf small { text-transform: none; letter-spacing: 0; opacity: .75; font-size: .78em; }
fieldset { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px 10px; margin: 0; flex: 1 1 260px; }
legend { color: var(--dim); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 0 6px; }
fieldset label.haken { margin: 6px 0 0; }
fieldset small { display: block; margin-top: 6px; color: var(--dim); }
.meldung { margin: 0 0 16px; padding: 10px 14px; background: color-mix(in srgb, var(--gruen) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gruen) 50%, transparent); border-radius: 10px; color: var(--gruen); }
.hinweis { margin: 0 0 16px; padding: 10px 14px; background: var(--warnung-flaeche); border: 1px solid var(--warnung-rand); border-radius: 10px; color: var(--warnung); font-size: .9rem; }
.marke-aus, .marke-rolle { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 9px; border-radius: 99px; border: 1px solid currentColor; }
.marke-aus { color: var(--rot); }
.marke-rolle { color: var(--akzent); }
.protokoll { list-style: none; margin: 8px 0 0; padding: 0; color: var(--dim); font-size: .86rem; }
.protokoll li { padding: 4px 0; border-top: 1px solid var(--hauch-2); }
.protokoll time { color: var(--dim-2); margin-right: 8px; }
.wechsellink { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--linie); }
.wechsellink:hover { color: var(--hell); border-color: var(--akzent); }
code { background: var(--code-flaeche); padding: 1px 6px; border-radius: 6px; color: var(--code-text); font-size: .9em; }

/* Admin: Betrieb und Anmeldungen */
.farbzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 4px; }
.farbzeile small, .logozeile small, label small { color: var(--dim); }
.logozeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0; }
.logo-vorschau { height: 44px; width: auto; background: var(--logo-flaeche); border-radius: 8px; padding: 4px; }
input[type=file] { color: var(--dim); font: inherit; font-size: .9rem; }
/* seit 0.0.16 (Datei-Ablage): Knopf der Dateiauswahl im Hausdesign, Trefffläche 44 px */
input[type=file]::file-selector-button { min-height: 44px; margin-right: var(--abstand-3); padding: 0 var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius-rund); background: var(--flaeche-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--akzent); }
fieldset.modus { margin-top: 18px; flex: none; }
label.auswahl { display: flex; align-items: flex-start; gap: 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; color: var(--text); letter-spacing: 0; text-transform: none; font-size: .95rem; cursor: pointer; }
label.auswahl input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--akzent); flex: none; }
label.auswahl small { display: block; margin-top: 2px; color: var(--dim); font-size: .82rem; }
.hinweis-klein { display: block; margin-top: 10px; color: var(--dim); font-size: .82rem; }
.tabelle-wrap { position: relative; overflow-x: auto; margin-top: 8px; }   /* relative seit 0.0.32: die unsichtbaren Beschriftungen (.unsichtbar, absolut) bleiben im Rollbereich, breite Tabellen schieben die Seite nicht seitlich */
.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th { text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--hauch-2); vertical-align: middle; }
.tabelle tr.eigene td { background: color-mix(in srgb, var(--akzent) 9%, transparent); }
.tabelle form { margin: 0; }

/* Rahmen: Menü links, Inhalt rechts. Zeichen der Bausteine sitzen in einer runden "Linse" mit Lichtreflex. */
.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linse { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--hell);
  border: 1.5px solid color-mix(in srgb, var(--akzent) 60%, transparent);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), transparent 32%), radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--akzent) 38%, transparent), color-mix(in srgb, var(--akzent) 8%, transparent) 72%); }
.linse svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gestell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 62px); }
.menue { position: sticky; top: 0; align-self: start; padding: 22px 14px 30px; border-right: 1px solid var(--linie); min-height: calc(100vh - 62px); }
.menue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menue a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 12px; border-radius: 12px; color: var(--dim); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.menue a:hover { color: var(--hell); background: var(--hauch-1); }
.menue a.aktiv { color: var(--hell); background: color-mix(in srgb, var(--akzent) 15%, transparent); box-shadow: inset 3px 0 0 var(--akzent); }
.menue a:focus-visible, .kachel:focus-visible, .menue-einstellen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.menue .linse.start { border-color: var(--linie); background: var(--hauch-1); color: var(--dim); }
.menue a.aktiv .linse.start { color: var(--hell); }
.menue-leer { margin: 14px 12px 0; color: var(--dim); font-size: .85rem; }
.menue-einstellen { display: block; margin: 18px 12px 0; padding-top: 14px; border-top: 1px solid var(--linie); color: var(--dim); font-size: .85rem; text-decoration: none; }
.menue-einstellen:hover { color: var(--hell); }
.inhalt.rahmen-inhalt { max-width: 1120px; margin: 0; padding-left: clamp(18px, 3vw, 44px); }
.kacheln { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.kachel { display: flex; gap: 16px; align-items: flex-start; height: 100%; padding: 20px; background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.kachel:hover { border-color: color-mix(in srgb, var(--akzent) 70%, transparent); transform: translateY(-2px); }
.kachel .linse { width: 52px; height: 52px; }
.kachel .linse svg { width: 24px; height: 24px; }
.kachel-text b { display: block; font-size: 1.08rem; }
.kachel-text .marke-rolle { display: inline-block; margin-top: 10px; }
.marke-aus, .marke-rolle { white-space: nowrap; }
.kachel-text small { display: block; margin-top: 4px; color: var(--dim); font-size: .9rem; line-height: 1.45; }
.leer { display: grid; justify-items: start; gap: 6px; margin: 0 0 28px; padding: 26px 26px 24px; border: 1px dashed color-mix(in srgb, var(--akzent) 45%, transparent); border-radius: 16px; }
.leer h2 { margin: 8px 0 0; font-size: 1.15rem; }
.leer p { margin: 0 0 10px; color: var(--dim); max-width: 60ch; }
a.knopf { display: inline-block; text-decoration: none; }
.leer .knopf { min-height: 44px; padding: 11px 20px; font-size: .95rem; }
@media (min-width: 1800px) { .gestell { grid-template-columns: 290px minmax(0, 1fr); } .inhalt.rahmen-inhalt { max-width: 1320px; } }
@media (max-width: 760px) {
  .gestell { grid-template-columns: minmax(0, 1fr); }   /* seit 0.0.17: breiter Inhalt (Team-Chat) darf die Seite am Handy nicht seitlich aufschieben */
  .menue { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--linie); padding: 10px; }
  .menue ul { display: flex; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .kachel, .menue a, .schalter-bahn, .schalter-bahn::after { transition: none; } .kachel:hover { transform: none; } }

/* Admin: Bausteine mit Rechten */
.baustein.ist-an { border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.baustein-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.baustein-kopf .linse { width: 46px; height: 46px; }
.baustein-titel { flex: 1 1 300px; min-width: 0; }
.baustein-titel .klein { margin: 0; }
label.schalter { display: inline-flex; align-items: center; gap: 12px; margin: 0; min-height: 44px; padding: 0 4px; color: var(--text); font-size: .95rem; letter-spacing: 0; text-transform: none; cursor: pointer; position: relative; }
label.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { position: relative; width: 50px; height: 28px; border-radius: 99px; background: var(--schalter-bahn); border: 1px solid var(--linie); transition: background .15s; }
.schalter-bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--schalter-knopf); transition: transform .15s, background .15s; }
label.schalter input:checked + .schalter-bahn { background: var(--akzent); }
label.schalter input:checked + .schalter-bahn::after { transform: translateX(22px); background: var(--hell); }
label.schalter input:focus-visible + .schalter-bahn { outline: 2px solid var(--akzent); outline-offset: 3px; }
.tabelle.rechte { margin-top: 6px; }
.tabelle.rechte th[scope=row] { text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--text); font-weight: 500; padding: 10px; }
.tabelle.rechte th[scope=row] small { display: block; color: var(--dim); font-size: .8rem; font-weight: 400; }
.tabelle .mitte { text-align: center; width: 120px; }
label.zelle { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; cursor: pointer; border-radius: 10px; }
label.zelle:hover { background: var(--hauch-2); }
label.zelle input { width: 20px; height: 20px; margin: 0; accent-color: var(--akzent); }
fieldset.standortwahl { margin-top: 14px; }
.baustein-fuss { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.baustein-fuss small { color: var(--dim); font-size: .82rem; }
.baustein-fuss .knopf { min-height: 44px; padding: 10px 24px; font-size: .95rem; }
.rechteliste { list-style: none; margin: 8px 0 12px; padding: 0; }
.rechteliste li { padding: 6px 0; border-top: 1px solid var(--hauch-2); }
.rechteliste li.ja span { color: var(--gruen); }
.rechteliste li.nein { color: var(--dim); }
.rechteliste small { color: var(--dim); margin-left: 6px; }

/* Admin: zwei Stufen (Verwaltung, Wahrnehmungswerk). Was die eigene Stufe nicht ändern darf, steht lesbar da, nicht versteckt. */
.stufe { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; color: var(--dim); font-size: .9rem; max-width: 80ch; }
.stufe .marke-rolle { font-size: .7rem; }
.stufe-werk .marke-rolle { color: var(--warnung); }
.nurlesen { margin: 0 0 16px; padding: 10px 14px 10px 16px; border-left: 3px solid var(--linie); color: var(--dim); font-size: .9rem; max-width: 80ch; }
.nurlesen b { color: var(--text); }
.gebucht { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 99px; border: 1px dashed var(--linie); color: var(--dim); font-size: .9rem; white-space: nowrap; }
.gebucht.ja { border-style: solid; border-color: color-mix(in srgb, var(--akzent) 60%, transparent); color: var(--text); }
.gebucht.ja::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--gruen); }
label.zelle.lesend { cursor: default; }
label.zelle.lesend:hover { background: none; }
label.zelle.lesend input { opacity: .85; cursor: default; }
dl.daten.lesend { margin: 12px 0 0; background: var(--lesend-flaeche); }
.farbprobe { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; border-radius: 4px; background: var(--akzent); border: 1px solid var(--linie); }
.protokoll .wer { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text); padding: 1px 7px; margin-right: 4px; border: 1px solid var(--linie); border-radius: 99px; }
.block .klein.standorte-lesend:not(.knopf) { margin: 14px 0 0; font-size: .9rem; }
.karte label small { text-transform: none; letter-spacing: 0; }
.standorte-lesend b { color: var(--text); }
.standorte-lesend small { color: var(--dim); font-size: .85rem; }

/* ===== BAUTEILE des Kerns (Version 0.0.5). Bausteine setzen sie mit den Funktionen in ansicht.php zusammen, statt eigene zu gestalten.
   Zu sehen auf der Musterseite (Einstellungen, Stufe Wahrnehmungswerk). */

/* Seitenkopf: Titel, eine Zeile Beschreibung, rechts optional Knöpfe */
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--abstand-4) var(--abstand-5); flex-wrap: wrap; margin: 0 0 var(--abstand-5); padding-bottom: var(--abstand-4); border-bottom: 1px solid var(--linie); }
.seitenkopf h1 { margin: 0 0 var(--abstand-1); font-size: var(--schrift-titel); line-height: 1.2; }
.seitenkopf .lead { margin: 0; max-width: 70ch; }
.seitenkopf-ueber { display: block; margin-bottom: var(--abstand-1); color: var(--akzent); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.seitenkopf-aktionen { display: flex; gap: var(--abstand-2); flex-wrap: wrap; }
.seitenkopf-aktionen .knopf { min-height: 44px; padding: 10px 18px; font-size: .92rem; }

/* Kennzahl-Kachel: eine Zahl, ihr Name, optional ein Zusatz. Der Ton steht auch als Wort da, nie nur als Farbe. */
.kennzahlen { list-style: none; margin: 0 0 var(--abstand-5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--abstand-4); }
.kennzahl { position: relative; display: grid; gap: var(--abstand-1); align-content: start; min-height: 128px; padding: var(--abstand-4) var(--abstand-5) var(--abstand-4) calc(var(--abstand-5) + 2px); background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; }
.kennzahl::before { content: ""; position: absolute; left: 0; top: var(--abstand-4); bottom: var(--abstand-4); width: 3px; border-radius: 0 3px 3px 0; background: var(--akzent); }
.kennzahl-name { order: -1; color: var(--dim); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.kennzahl-wert { font-size: var(--schrift-zahl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kennzahl-zusatz { color: var(--dim); font-size: var(--schrift-klein); }
.kennzahl-ton { justify-self: start; margin-top: var(--abstand-1); padding: 1px 9px; border: 1px solid currentColor; border-radius: var(--radius-rund); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kennzahl.gut::before { background: var(--gruen); }   .kennzahl.gut .kennzahl-ton { color: var(--gruen); }
.kennzahl.warnung::before { background: var(--warnung); } .kennzahl.warnung .kennzahl-ton { color: var(--warnung); }
.kennzahl.kritisch::before { background: var(--rot); } .kennzahl.kritisch .kennzahl-ton { color: var(--rot); }

/* Untermenü: Ansichten innerhalb einer Seite (zum Beispiel "Offen / Erledigt"). Gleiche Form wie die Reiter der Einstellungen. */
.untermenue { display: flex; gap: var(--abstand-2); flex-wrap: wrap; margin: 0 0 var(--abstand-5); }
.untermenue a { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; padding: 0 var(--abstand-4); border-radius: var(--radius-rund); border: 1px solid var(--linie); color: var(--dim); text-decoration: none; font-size: .92rem; }
.untermenue a:hover { color: var(--text); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); }
.untermenue a[aria-current] { color: var(--text); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 16%, transparent); }
.untermenue a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.untermenue-zahl { min-width: 22px; padding: 0 6px; border-radius: var(--radius-rund); background: color-mix(in srgb, var(--text) 10%, transparent); font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; }

/* Musterseite (Einstellungen, Stufe Wahrnehmungswerk) */
.muster-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--abstand-3); margin: var(--abstand-3) 0 0; padding: 0; list-style: none; }
.muster-wert { display: grid; gap: var(--abstand-1); padding: var(--abstand-3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); font-size: var(--schrift-klein); }
.muster-wert code { justify-self: start; }
.muster-hex { color: var(--dim); font-variant-numeric: tabular-nums; }
.muster-farbe { height: 44px; border-radius: var(--radius-klein); border: 1px solid var(--linie); }
.muster-abstand { height: 12px; background: var(--akzent); border-radius: 2px; }
.muster-radius { width: 64px; height: 44px; border: 2px solid var(--akzent); }
.muster-buehne { margin-top: var(--abstand-4); padding: var(--abstand-5); border: 1px dashed var(--linie); border-radius: var(--radius-gross); background: var(--bg); }
.muster-buehne > :last-child { margin-bottom: 0; }
.muster-reihe { display: flex; gap: var(--abstand-3); flex-wrap: wrap; align-items: center; }
.f-akzent { background: var(--akzent); } .f-auf-akzent { background: var(--auf-akzent); } .f-bg { background: var(--bg); }
.f-flaeche-1 { background: var(--flaeche-1); } .f-flaeche-2 { background: var(--flaeche-2); } .f-eingabe { background: var(--eingabe); }
.f-linie { background: var(--linie); } .f-text { background: var(--text); } .f-dim { background: var(--dim); } .f-rot { background: var(--rot); }
.f-gruen { background: var(--gruen); } .f-warnung { background: var(--warnung); } .f-auf-warnung { background: var(--auf-warnung); }
.a-1 { width: var(--abstand-1); } .a-2 { width: var(--abstand-2); } .a-3 { width: var(--abstand-3); } .a-4 { width: var(--abstand-4); } .a-5 { width: var(--abstand-5); } .a-6 { width: var(--abstand-6); }
.f-linie-stark { background: var(--linie-stark); } .f-prognose { background: var(--prognose); } .f-vorjahr { background: var(--vorjahr); } .f-chip-gut { background: var(--chip-gut); }
.f-chip-schlecht { background: var(--chip-schlecht); } .f-chip-warn { background: var(--chip-warn); } .f-akzent-hauch { background: var(--akzent-hauch); } .f-leuchten { background: var(--leuchten); }
.f-schatten-farbe { background: var(--schatten-farbe); } .f-reihe-1 { background: var(--reihe-1); } .f-reihe-2 { background: var(--reihe-2); } .f-reihe-3 { background: var(--reihe-3); }
.f-reihe-4 { background: var(--reihe-4); } .f-reihe-5 { background: var(--reihe-5); } .f-reihe-6 { background: var(--reihe-6); }
.muster-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-rund); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.muster-chip.chip-gut { background: var(--chip-gut); color: var(--chip-gut-text); } .muster-chip.chip-schlecht { background: var(--chip-schlecht); color: var(--chip-schlecht-text); }
.muster-chip.chip-warn { background: var(--chip-warn); color: var(--chip-warn-text); }
.s-anzeige { font-family: var(--schrift-anzeige); font-size: var(--schrift-zahl); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } .muster-klein-teil { color: var(--dim); font-weight: 500; font-size: .58em; letter-spacing: 0; }
.r-karte { border-radius: var(--radius-karte); }
.r-klein { border-radius: var(--radius-klein); } .r-normal { border-radius: var(--radius); } .r-gross { border-radius: var(--radius-gross); } .r-rund { border-radius: var(--radius-rund); }
.s-klein { font-size: var(--schrift-klein); } .s-text { font-size: var(--schrift-text); } .s-gross { font-size: var(--schrift-gross); } .s-titel { font-size: var(--schrift-titel); line-height: 1.2; } .s-zahl { font-size: var(--schrift-zahl); font-weight: 700; line-height: 1.1; }

/* ===== Menüwechsel (Version 0.0.5, Idee Tom): Ein Baustein mit Unterseiten ersetzt das Hauptmenü durch sein eigenes Menü.
   Bewegung nur mit transform und opacity; hinein 220 ms (abbremsend), hinaus 150 ms (beschleunigend); aus bei "Bewegung reduzieren". */
.sprung { position: absolute; left: var(--abstand-3); top: -60px; z-index: 10; padding: 10px 16px; border-radius: var(--radius); background: var(--akzent-knopf); color: var(--auf-akzent); text-decoration: none; font-weight: 600; }
.sprung:focus { top: var(--abstand-3); outline: 2px solid var(--text); outline-offset: 2px; }
main.inhalt:focus { outline: none; }
.menue-bahn { will-change: auto; }
.menue-text { flex: 1; min-width: 0; }
.menue-pfeil { flex: none; width: 8px; height: 8px; margin-right: 4px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .55; }
.menue a:hover .menue-pfeil { opacity: 1; }
.menue-zurueck { display: flex; align-items: center; gap: var(--abstand-3); min-height: 48px; margin: 0 0 var(--abstand-3); padding: 0 var(--abstand-3); border-radius: var(--radius); border: 1px solid var(--linie); color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; }
.menue .menue-zurueck { min-height: 48px; color: var(--text); }
.menue .menue-zurueck:hover { background: color-mix(in srgb, var(--text) 5%, transparent); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); }
.menue-zurueck-pfeil { flex: none; width: 9px; height: 9px; margin-left: 4px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); }
.menue-titel { display: flex; align-items: center; gap: var(--abstand-3); margin: var(--abstand-4) var(--abstand-3) var(--abstand-3); padding-bottom: var(--abstand-3); border-bottom: 1px solid var(--linie); }
.menue-titel b { font-size: var(--schrift-gross); line-height: 1.25; }
.menue-titel .linse { width: 40px; height: 40px; }
.menue-punkt { flex: none; width: 36px; display: inline-grid; place-items: center; }
.menue-punkt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.menue a.aktiv .menue-punkt::before { background: var(--akzent); border-color: var(--akzent); }
.menue-baustein { border-right-color: color-mix(in srgb, var(--akzent) 35%, var(--linie)); }
.inhalt.rahmen-inhalt.voll { max-width: none; padding-right: clamp(18px, 3vw, 44px); }

.menue.geht-rein .menue-bahn { transform: translateX(-28px); opacity: 0; transition: transform var(--dauer-raus) cubic-bezier(.4, 0, 1, 1), opacity var(--dauer-raus) linear; }
.menue.geht-raus .menue-bahn { transform: translateX(28px); opacity: 0; transition: transform var(--dauer-raus) cubic-bezier(.4, 0, 1, 1), opacity var(--dauer-raus) linear; }
.menue.kommt-rein .menue-bahn { animation: iw-menue-von-rechts var(--dauer-rein) cubic-bezier(0, 0, .2, 1); }
.menue.kommt-raus .menue-bahn { animation: iw-menue-von-links var(--dauer-rein) cubic-bezier(0, 0, .2, 1); }
@keyframes iw-menue-von-rechts { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes iw-menue-von-links { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .menue.geht-rein .menue-bahn, .menue.geht-raus .menue-bahn { transform: none; opacity: 1; transition: none; }
  .menue.kommt-rein .menue-bahn, .menue.kommt-raus .menue-bahn { animation: none; }
}
@media (max-width: 760px) {
  .menue-zurueck { margin-bottom: var(--abstand-2); }
  .menue-titel { display: none; }          /* auf schmalen Bildschirmen reicht der Seitenkopf als Titel */
  .menue .menue-pfeil { display: none; }
}

/* Farbe je Baustein (seit 0.0.24 frei, Farbwähler iw_farbfeld wie bei der Betriebsfarbe). Farbproben: data-farbe="<schlüssel>|#rrggbb|betrieb"
   setzt --probe (Regeln aus datei.php?n=farbe, weil die Inhaltsrichtlinie kein style="..." erlaubt), .mit-probe macht daraus den Akzent. */
.farbpunkt { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--probe, var(--akzent)); border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); }
.farbe-lesend { display: inline-flex; align-items: center; gap: var(--abstand-2); }
.farbe-lesend .farbpunkt { width: 18px; height: 18px; }
.farbzeile-baustein { display: flex; align-items: flex-end; gap: var(--abstand-3); flex-wrap: wrap; margin-top: var(--abstand-4); padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.farbzeile-feld { min-width: 0; }
.farbzeile-feld > label { margin-top: 0; }
.farbzeile-feld .fw { margin: 0; }
.farbzeile-baustein > .knopf { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 52px; padding: 10px 20px; }
.farbzeile-baustein .farbe-betrieb .farbpunkt { width: 20px; height: 20px; }
.farbzeile-baustein .farbe-betrieb[aria-pressed="true"] { opacity: 1; cursor: default; color: var(--text); border-color: var(--text); }
.farbzeile-baustein.mit-fehler { align-items: flex-start; }
.farbzeile-baustein.mit-fehler > .knopf { margin-top: calc(1.6em + var(--abstand-2)); }
.mit-probe { --akzent: var(--probe); }
.mit-probe, .eb-vorschau { --akzent-hell: color-mix(in srgb, var(--akzent) 62%, var(--hell)); }
/* Reiter Erscheinungsbild (0.0.24): links die Grundfarben, rechts die Vorschau (bleibt beim Rollen sichtbar), schmal untereinander */
.eb-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); flex-wrap: wrap; margin: 0 0 var(--abstand-4); }
.eb-kopf h2 { margin: 0; }
.eb-kopf-knoepfe { display: flex; gap: var(--abstand-2); flex-wrap: wrap; }
.eb-kopf-knoepfe .knopf { min-height: 44px; padding: 10px 20px; }
.eb-gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: var(--abstand-5); align-items: start; }
.eb-felder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--abstand-3); }
.eb-feld { padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius); }
.eb-feld.mit-fehler { border-color: var(--rot); }
.eb-feld > label { margin-top: 0; }
.eb-feld > label code { margin-left: var(--abstand-1); text-transform: none; letter-spacing: 0; }
.eb-feld-reihe { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }
.eb-feld-reihe .fw { margin: 0; }
.eb-feld-reihe > .knopf { min-height: 44px; }
.eb-vorschau { position: sticky; top: var(--abstand-4); background: var(--bg); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; }
.eb-v-seite { padding: var(--abstand-4); background: radial-gradient(420px 200px at 50% -20%, var(--glanz), var(--bg) 70%); }
.eb-v-titel { margin: 0 0 var(--abstand-3); color: var(--dim); font-size: var(--schrift-klein); letter-spacing: .12em; text-transform: uppercase; }
.eb-v-karte { padding: var(--abstand-4); background: var(--flaeche-1); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); border-radius: var(--radius); }
.eb-v-karte h3 { margin: 0; font-size: var(--schrift-gross); }
.eb-v-dim { margin: var(--abstand-1) 0 0; color: var(--dim); }
.eb-v-knoepfe { display: flex; gap: var(--abstand-2); margin-top: var(--abstand-3); }
.eb-vorschau .meldung, .eb-vorschau .hinweis, .eb-vorschau .fehler { margin: var(--abstand-3) 0 0; }
.eb-v-tabelle { margin-top: var(--abstand-3); background: var(--flaeche-2); border-radius: var(--radius-klein); }
.eb-v-warn { padding: 2px 8px; border-radius: var(--radius-rund); background: var(--warnung); color: var(--auf-warnung); font-size: var(--schrift-klein); font-weight: 600; }
/* Gespeicherte Designs (seit 0.0.34): Knöpfe in der Vorschau über der Beispieltabelle, Zustand mit Haken und "eingestellt" (nie nur Farbe),
   Farbpunkte als SVG (fill als Attribut), Treffflächen 44 px. Das Fenster "Speichern" ist ein <dialog> (designs.js), am Handy vollbreit. */
.eb-designs { margin-top: var(--abstand-4); }
.eb-designs .eb-v-titel { margin-bottom: var(--abstand-2); }
.eb-d-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.eb-d-zeile { display: flex; align-items: center; gap: var(--abstand-1) var(--abstand-2); flex-wrap: wrap; min-width: 0; }
.eb-d-knopf { flex: 1 1 200px; flex-wrap: wrap; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 6px 10px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-1); color: var(--text); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.eb-d-knopf:hover { border-color: color-mix(in srgb, var(--akzent) 60%, transparent); }
.eb-d-knopf:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.eb-d-knopf.an { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.eb-d-haken { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.eb-d-punkte { flex: none; width: 68px; height: 16px; }
.eb-d-punkte circle { stroke: var(--dim); stroke-width: 1; }
.eb-d-name { flex: 1 1 auto; min-width: 9ch; overflow-wrap: break-word; font-weight: 600; }   /* seit 0.0.48: schmale Zeilen brechen die Knöpfe um statt den Namen in Buchstaben zu zerlegen */
.eb-d-zustand { flex: none; margin-left: auto; color: var(--dim); font-size: var(--schrift-klein); }
.eb-d-zeile > .knopf.klein { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-size: .8rem; }
.eb-d-frage { padding: var(--abstand-2); border: 1px solid var(--rot); border-radius: var(--radius); }
.eb-d-frage-text { flex: 1 1 100%; margin: 0; font-weight: 600; }
.eb-d-neu { margin-top: var(--abstand-3); }
.eb-d-neu > label { margin-top: 0; }
.eb-d-neu-reihe { display: flex; gap: var(--abstand-2); flex-wrap: wrap; }
.eb-d-neu-reihe input[type=text] { flex: 1 1 150px; width: auto; min-width: 0; min-height: 44px; }
.eb-d-neu .knopf.klein { min-height: 44px; }
.eb-d-ueber { margin-top: var(--abstand-2); }
.eb-dialog { width: min(440px, calc(100% - 2 * var(--abstand-4))); max-width: none; padding: var(--abstand-5); background: var(--flaeche-1); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.eb-dialog::backdrop { background: var(--schleier); }
.eb-dialog h2 { margin: 0 0 var(--abstand-2); }
.eb-dialog [hidden] { display: none; }
.eb-dialog .hinweis, .eb-dialog .fehler { margin: var(--abstand-3) 0 0; }
.eb-dialog input[type=text] { min-height: 44px; }
.eb-dialog-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-4); }
.eb-dialog-knoepfe .knopf.klein { min-height: 44px; }
@media (max-width: 520px) {
  .eb-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--radius-gross) var(--radius-gross) 0 0; }
  .eb-dialog-knoepfe .knopf.klein { flex: 1 1 100%; }
}
@media (max-width: 1100px) { .eb-gitter { grid-template-columns: minmax(0, 1fr); } .eb-vorschau { position: static; } }
@media (max-width: 520px) { .eb-felder { grid-template-columns: minmax(0, 1fr); } }
/* Verlauf im Reiter Erscheinungsbild (0.0.48): ein Abschnitt über die ganze Breite der Felder, darin Schalter, drei Farben und die Richtung; die Vorschau zeigt eine
   kleine Kopfleiste (.eb-v-kopf) und folgt Schalter, Farben und Richtung sofort (verlauf.js setzt nur Klassen und Variablen, keine Stil-Attribute). */
.eb-verlauf { grid-column: 1 / -1; padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius); }
.eb-verlauf.mit-fehler { border-color: var(--rot); }
.eb-verlauf-satz { min-width: 0; margin: 0; padding: 0; border: 0; }
.eb-verlauf-satz > legend { padding: 0; margin: 0 0 var(--abstand-2); color: var(--dim); font-size: var(--schrift-klein); letter-spacing: .12em; text-transform: uppercase; }
.eb-verlauf-hilfe, .eb-verlauf-feldhilfe { margin: 0 0 var(--abstand-2); color: var(--dim); font-size: var(--schrift-klein); }
.eb-verlauf-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--abstand-3); margin-top: var(--abstand-3); }
.eb-verlauf-feld { background: var(--flaeche-2); }
.eb-verlauf-richtung { max-width: 360px; margin-top: var(--abstand-3); }
.eb-verlauf-richtung > label { margin-top: 0; }
.eb-verlauf-richtung select { min-height: 44px; }
.eb-v-kopf { display: flex; justify-content: space-between; gap: var(--abstand-2); padding: var(--abstand-3) var(--abstand-4); border-bottom: 1px solid var(--linie); background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--dim); font-size: .9rem; }
.eb-v-kopf b { color: var(--text); }
.eb-vorschau.verlauf-kopf .eb-v-kopf { background: linear-gradient(var(--verlauf-winkel), var(--akzent), var(--kopf-2)); color: var(--auf-akzent); border-bottom-color: transparent; }
.eb-vorschau.verlauf-kopf .eb-v-kopf b { color: inherit; }
.eb-vorschau.verlauf-bg .eb-v-seite { background: radial-gradient(420px 200px at 50% -20%, var(--glanz), transparent 70%), linear-gradient(var(--verlauf-winkel), var(--bg), var(--bg-2)); }
/* Rechtsklick-Menü bei gespeicherten Designs (0.0.48, designs.js): "Umbenennen" und "Löschen"; Tastatur: Pfeile, Enter, Escape */
.eb-menue { position: fixed; z-index: 60; min-width: 180px; margin: 0; padding: var(--abstand-1); list-style: none; background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius); }
.eb-menue button { display: block; width: 100%; min-height: 40px; padding: 6px var(--abstand-3); background: transparent; color: inherit; border: 0; border-radius: var(--radius-klein); font: inherit; text-align: left; cursor: pointer; }
.eb-menue button:hover, .eb-menue button:focus-visible { background: var(--hauch-1); outline: 2px solid var(--akzent-hell); outline-offset: -2px; }
.eb-d-umbenennen { flex: 1 1 100%; }
.eb-d-umbenennen > label { margin-top: 0; }
.eb-d-umbenennen .knopf.klein { min-height: 44px; display: inline-flex; align-items: center; }
.eb-d-umbenennen input[type=text] { flex: 1 1 150px; width: auto; min-width: 0; min-height: 44px; }
/* Von Webseite übernehmen / Design-Datei einlesen (0.0.39, nur Wahrnehmungswerk): zwei kleine Formulare über den Farbfeldern, Ergebnis und Hinweis darunter */
.fa { margin: 0 0 var(--abstand-5); padding: var(--abstand-4); background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius); }
.fa .lead-zeile { margin-bottom: var(--abstand-3); }
.fa-titel { margin-bottom: var(--abstand-2); }
.fa-form { margin: 0 0 var(--abstand-3); }
.fa-form > label { margin-top: 0; }
.fa-reihe, .fa-ablage { display: flex; gap: var(--abstand-2); flex-wrap: wrap; align-items: center; }
.fa-reihe input[type=text] { flex: 1 1 260px; width: auto; min-width: 0; min-height: 44px; }
.fa-reihe .knopf, .fa-ablage .knopf, .fa-befehl .knopf { min-height: 44px; display: inline-flex; align-items: center; }
.fa-ablage { padding: var(--abstand-3); border: 1px dashed var(--linie); border-radius: var(--radius); }
.fa-ablage input[type=file] { flex: 1 1 260px; min-width: 0; min-height: 44px; color: var(--text); font: inherit; }
.fa-ablage.zieht { border-color: var(--akzent); background: var(--hauch-2); }
.fa-hilfe { display: block; margin-top: var(--abstand-2); color: var(--dim); font-size: var(--schrift-klein); }
.fa-ergebnis { margin: 0 0 var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche-2); border: 1px solid var(--linie); border-left: 4px solid var(--gruen); border-radius: var(--radius); }
.fa-ergebnis.fa-schwach { border-left-color: var(--warnung); }
.fa-ergebnis.fa-leer { border-left-color: var(--rot); }
.fa-ergebnis:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.fa-ergebnis p { margin: 0 0 var(--abstand-2); overflow-wrap: anywhere; }
.fa-meldungen { margin: 0 0 var(--abstand-2); padding-left: var(--abstand-5); color: var(--text); }
.fa-meldungen li { margin: 0 0 var(--abstand-1); overflow-wrap: anywhere; }
.fa-nebenbei { color: var(--dim); font-size: var(--schrift-klein); }
.fa-hinweis { margin: 0 0 var(--abstand-3); }
.fa-hinweis p { margin: 0 0 var(--abstand-2); }
.fa-befehl { display: flex; gap: var(--abstand-2); flex-wrap: wrap; align-items: center; margin: 0 0 var(--abstand-2); }
.fa-befehl code { flex: 1 1 260px; min-width: 0; padding: var(--abstand-2) var(--abstand-3); background: var(--code-flaeche, var(--flaeche-2)); color: var(--code-text, var(--text)); border-radius: var(--radius-klein); overflow-wrap: anywhere; user-select: all; }
/* Farben dieser Seite (seit 0.0.42): Reihe von Farbfeldern, ohne Skript eine lesbare Liste mit Hex-Wert; farbanalyse.js macht das Feld zum Knopf */
.fa-palette { margin: 0 0 var(--abstand-3); padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius); }
.fa-palette-titel { margin: 0 0 var(--abstand-2); }
.fa-palette-hilfe { margin: 0 0 var(--abstand-3); color: var(--dim); font-size: var(--schrift-klein); }
.fa-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.fa-farbe { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; min-width: 0; padding: var(--abstand-2); background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.fa-farbe-kopf { display: inline-flex; flex: 0 0 auto; }
.fa-farbe-feld { display: block; width: 44px; height: 44px; border-radius: var(--radius-klein); }
button.fa-farbe-feld { padding: 0; border: 1px solid var(--linie); background: transparent; cursor: pointer; }
button.fa-farbe-feld:hover { border-color: var(--text); }
button.fa-farbe-feld[aria-pressed="true"] { border-color: var(--akzent-hell); outline: 2px solid var(--akzent-hell); outline-offset: 1px; }
button.fa-farbe-feld:focus-visible, .fa-als-hintergrund:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.fa-farbe-text { display: flex; flex-direction: column; flex: 1 1 80px; min-width: 0; }
.fa-farbe-hex { color: var(--text); overflow-wrap: anywhere; }
.fa-farbe-herkunft { color: var(--dim); font-size: var(--schrift-klein); overflow-wrap: anywhere; }
.fa-palette .fa-als-hintergrund { min-height: 44px; min-width: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.fa-palette-status { margin: var(--abstand-2) 0 0; min-height: 1.4em; color: var(--text); }
.palette { list-style: none; margin: var(--abstand-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--abstand-3); }
.palette li { display: grid; gap: var(--abstand-2); padding: var(--abstand-3); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); font-size: var(--schrift-klein); }
.palette .knopf { margin: 0; }
.palette small { color: var(--dim); }
.muster-menue { position: static; min-height: 0; max-width: 290px; padding: 0; border-right: 0; }

/* Wahrnehmungswerk im Rahmen (Version 0.0.6): sieht alle Bausteine, nicht gebuchte als Vorschau; jeder Zugriff steht im Protokoll.
   Erkennungsfarbe von Wahrnehmungswerk ist --warnung (wie die Stufe in den Einstellungen), immer zusammen mit einem Wort. */
.marke-vorschau { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  padding: 1px 8px; border-radius: var(--radius-rund); border: 1px dashed currentColor; color: var(--warnung); }
.menue-text .marke-vorschau { display: block; width: max-content; margin-top: 3px; }
.menue-titel .marke-vorschau { display: block; width: max-content; margin-top: var(--abstand-1); font-weight: 700; }
.kachel-text .marke-vorschau { margin-top: 10px; }
.kachel.vorschau { border-style: dashed; }

/* Zahl eines Bausteins an Kachel und Hauptmenü (Version 0.0.15, kern-zahlen.php): Pille mit Zahl UND Wort ("3 ungelesen"), nie nur ein farbiger Punkt.
   Schrift in --text auf leicht getönter Fläche (lesbar bei jeder Betriebsfarbe), die Betriebsfarbe nur im Rand. Bleibt auf einer Zeile, steht unter dem Titel. */
.zahl-marke { display: inline-flex; align-items: baseline; gap: var(--abstand-1); width: max-content; max-width: 100%; padding: 1px var(--abstand-2);
  border: 1px solid color-mix(in srgb, var(--akzent) 70%, transparent); border-radius: var(--radius-rund); background: color-mix(in srgb, var(--akzent) 18%, transparent);
  color: var(--text); font-size: .78rem; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.zahl-marke-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.menue-text .zahl-marke { display: flex; margin-top: 3px; }
.kachel-text .zahl-marke { margin-top: var(--abstand-2); font-size: var(--schrift-klein); }
.werk-hinweis { margin: 0 0 var(--abstand-5); padding: var(--abstand-2) var(--abstand-4); border-left: 3px solid var(--warnung); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  background: color-mix(in srgb, var(--warnung) 7%, transparent); color: var(--dim); font-size: .88rem; max-width: 90ch; }
.werk-hinweis b { color: var(--warnung); font-weight: 600; }
.werk-hinweis.vorschau { border-left-style: dashed; }
/* Zugriffsprotokoll in den Einstellungen (Reiter Anmeldungen) */
.zugriffe td.zeit { white-space: nowrap; color: var(--dim); font-variant-numeric: tabular-nums; }
.zugriffe td.zahl { white-space: nowrap; color: var(--dim); font-size: .82rem; }
.zugriffe .art { display: block; margin-bottom: 2px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.zugriffe .art.schreiben, .zugriffe .art.loeschen { color: var(--warnung); }
@media (max-width: 760px) { .gestell { align-content: start; } }   /* schmal: Menü oben, Inhalt direkt darunter (keine Lücke) */

/* ===== Farbwähler (Version 0.0.7, Bauteil iw_farbfeld, Verhalten in farbwahl.js). Ersetzt den Farbdialog des Betriebssystems.
   Die gewählte Farbe kommt als --fw-farbe (setProperty, CSP-konform); die Farbe erscheint als Linse wie die Zeichen der Bausteine.
   Einzige feste Farben: der Farbtonregler (Regenbogen) und die Ringe des Griffs (Weiß/Schwarz, damit er auf jeder Farbe sichtbar ist). */
.fw { position: relative; display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; margin: var(--abstand-1) 0; }
.fw .fw-hex { width: 9.5em; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.fw-hilfe { flex: 1 1 260px; color: var(--dim); font-size: var(--schrift-klein); }
.fw-bereit .fw-hilfe { flex-basis: 220px; }
.fw-feld { display: inline-flex; align-items: center; gap: var(--abstand-3); min-height: 52px; padding: var(--abstand-1) var(--abstand-4) var(--abstand-1) var(--abstand-1);
  background: var(--eingabe); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius-rund); font: inherit; cursor: pointer; }
.fw-feld:hover { border-color: color-mix(in srgb, var(--fw-farbe, var(--akzent)) 70%, transparent); }
.fw-feld:focus-visible, .fw-zu:focus-visible, .fw-probe:focus-visible, .fw-flaeche:focus-visible, .fw .knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.fw-offen .fw-feld { border-color: var(--fw-farbe, var(--akzent)); }
.fw-linse { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.38), transparent 34%), var(--fw-farbe, var(--akzent)); }
.fw-wert { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .04em; min-width: 5.6em; text-align: left; }
.fw-zustand:empty { display: none; }
.fw-zustand { padding: 1px 9px; border: 1px solid currentColor; border-radius: var(--radius-rund); color: var(--rot); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fw-pfeil { width: 8px; height: 8px; margin-left: var(--abstand-1); border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: translateY(-2px) rotate(45deg); }
.fw-offen .fw-pfeil { transform: translateY(2px) rotate(-135deg); }

.fw-fenster { position: absolute; z-index: 20; top: calc(100% + var(--abstand-2)); left: 0; width: min(380px, 100%); min-width: min(300px, 100%);
  display: grid; gap: var(--abstand-2); padding: var(--abstand-4); background: var(--flaeche-2); border: 1px solid var(--linie); border-top: 3px solid var(--fw-farbe, var(--akzent));
  border-radius: var(--radius-gross); box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: fw-auf var(--dauer-rein) cubic-bezier(0, 0, .2, 1); }
.fw-fenster[hidden] { display: none; }
@keyframes fw-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fw-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3); }
.fw-kopf b { font-size: var(--schrift-text); }
.fw-zu { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: calc(var(--abstand-2) * -1) calc(var(--abstand-2) * -1) 0 0; padding: 0; background: transparent; color: var(--dim);
  border: 1px solid transparent; border-radius: 50%; cursor: pointer; }
.fw-zu:hover { color: var(--text); border-color: var(--linie); }
.fw-zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fw label.fw-marke, .fw .fw-marke { display: block; margin: var(--abstand-2) 0 0; color: var(--dim); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fw-klein { color: var(--dim); font-size: .76rem; line-height: 1.4; }
.fw-flaeche { position: relative; height: 176px; border-radius: var(--radius); border: 1px solid var(--linie); cursor: crosshair; touch-action: none; }
.fw-leinwand { display: block; width: 100%; height: 100%; border-radius: inherit; }
.fw-griff { position: absolute; left: var(--fw-x, 50%); top: var(--fw-y, 50%); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none;
  background: var(--fw-farbe, var(--akzent)); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5); }
.fw-flaeche:focus-visible .fw-griff { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 5px var(--text); }

input.fw-ton { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
input.fw-ton::-webkit-slider-runnable-track { height: 14px; border-radius: var(--radius-rund); border: 1px solid var(--linie);
  background: linear-gradient(to right, #f00 0%, #ff0 16.7%, #0f0 33.3%, #0ff 50%, #00f 66.7%, #f0f 83.3%, #f00 100%); }
input.fw-ton::-moz-range-track { height: 14px; border-radius: var(--radius-rund); border: 1px solid var(--linie);
  background: linear-gradient(to right, #f00 0%, #ff0 16.7%, #0f0 33.3%, #0ff 50%, #00f 66.7%, #f0f 83.3%, #f00 100%); }
input.fw-ton::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -7px; border-radius: 50%; background: var(--fw-ton-farbe, var(--akzent));
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5); }
input.fw-ton::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--fw-ton-farbe, var(--akzent)); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
input.fw-ton:focus { outline: none; }
input.fw-ton:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 0 5px var(--text); }
input.fw-ton:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--text); }

.fw-schnell { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin: 0; padding: 0; }
.fw-probe { width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.32), transparent 34%), var(--probe); }
.fw-probe[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--flaeche-2), 0 0 0 5px var(--text); }
.fw-hexzeile { display: flex; gap: var(--abstand-2); }
.fw-hexzeile .fw-hex { width: 100%; min-height: 44px; }
.fw .fw-hex[aria-invalid="true"] { border-color: var(--rot); }
.fw-kontrast { display: flex; align-items: flex-start; gap: var(--abstand-2); margin: var(--abstand-1) 0 0; padding: var(--abstand-2) var(--abstand-3); border-radius: var(--radius-klein);
  border: 1px solid var(--linie); font-size: .86rem; line-height: 1.4; }
.fw-kontrast-zeichen { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .72rem; font-weight: 700; }
[data-fw-zustand="gut"] .fw-kontrast { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 45%, transparent); }
[data-fw-zustand="knapp"] .fw-kontrast { color: var(--warnung); border-color: color-mix(in srgb, var(--warnung) 45%, transparent); }
[data-fw-zustand="zu-hell"] .fw-kontrast, [data-fw-zustand="ungueltig"] .fw-kontrast { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 55%, transparent); background: color-mix(in srgb, var(--rot) 8%, transparent); }
[data-fw-zustand="zu-hell"] .fw-feld, [data-fw-zustand="ungueltig"] .fw-feld { border-color: color-mix(in srgb, var(--rot) 70%, transparent); }
.fw-vorschau { --akzent: var(--fw-farbe); }
.fw-vorschau-reihe { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; padding: var(--abstand-3); border-radius: var(--radius); background: var(--bg); border: 1px dashed var(--linie); }
.fw-vorschau-reihe .knopf { cursor: default; pointer-events: none; }
.fw-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; margin-top: var(--abstand-2); }
.fw-fuss .knopf { min-height: 44px; padding: 10px 16px; }
.fw-fuss .knopf:disabled { opacity: .45; cursor: default; }
.fw-fertig { margin-left: auto; }
@media (max-width: 520px) { .fw-fenster { width: 100%; } .fw-flaeche { height: 150px; } }
@media (prefers-reduced-motion: reduce) { .fw-fenster { animation: none; } }

/* Reiter Bausteine (0.0.9): Einstellungen je Baustein, Zugangsdaten (Tresor), Datenbank-Stand. Nur Gestaltungswerte, keine eigenen Farben. */
.baustein-bereich { margin-top: var(--abstand-5); padding-top: var(--abstand-4); border-top: 1px solid var(--linie); }
.baustein-bereich h3 { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; margin: 0 0 var(--abstand-1); font-size: var(--schrift-text); }
.baustein-bereich .baustein-fuss { margin-top: var(--abstand-4); }
.einstellungen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--abstand-4) var(--abstand-5); margin-top: var(--abstand-3); }
.feld { min-width: 0; }
.feld label:not(.haken) { margin-top: 0; }
.feld label.haken { margin-top: var(--abstand-2); min-height: 44px; }
.feld-hilfe { display: block; margin-top: var(--abstand-1); color: var(--dim); font-size: var(--schrift-klein); line-height: 1.4; }
.feld-fehler { margin: var(--abstand-2) 0 0; color: var(--rot); font-size: var(--schrift-klein); font-weight: 600; }
.feld-fehler::before { content: "Fehler: "; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rot); }
.feld.lesend { padding: var(--abstand-3) var(--abstand-4); border: 1px dashed var(--linie); border-radius: var(--radius); }
.feld-titel { display: block; color: var(--dim); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.feld-wert { display: block; margin-top: var(--abstand-1); color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.marke-rolle.gut { color: var(--gruen); font-variant-numeric: tabular-nums; }
.marke-rolle.offen { color: var(--dim); }
.tresor-eintrag { padding: var(--abstand-4) 0 var(--abstand-2); border-top: 1px solid var(--linie); }
.tresor-eintrag:first-of-type { border-top: 0; }
.tresor-kopf { display: flex; align-items: center; gap: var(--abstand-3); flex-wrap: wrap; }
.tresor-kopf + .klein { margin-top: var(--abstand-1); }
.tresor-zeile { align-items: flex-start; }
.tresor-zeile > div { flex: 1 1 100%; }
.geheim-feld { display: flex; gap: var(--abstand-2); }
.geheim-feld input { flex: 1 1 auto; min-width: 0; }
.geheim-feld .knopf.klein, .tresor-zeile .knopf.klein, .tresor-loeschen .knopf.klein { min-height: 44px; }
.tresor-loeschen { align-items: center; margin-top: var(--abstand-2); }
.tresor-loeschen label.haken { margin: 0; min-height: 44px; }
.schema-zeile .hinweis, .schema-zeile .fehler { margin: var(--abstand-2) 0 0; }

/* Reiter Bausteine (0.0.10): Hintergrundaufgaben und Verbindungen nach außen. Zustand immer als Wort UND Farbe, nie nur Farbe. */
.marke-rolle.warnung { color: var(--warnung); }
.marke-rolle.kritisch { color: var(--rot); }
.tabelle.aufgaben { margin-top: var(--abstand-2); }
.tabelle.aufgaben th[scope=row] { text-transform: none; letter-spacing: 0; font-size: var(--schrift-text); color: var(--text); font-weight: 500; padding: var(--abstand-3) var(--abstand-3) var(--abstand-3) 0; }
.tabelle.aufgaben small { display: block; margin-top: var(--abstand-1); color: var(--dim); font-size: var(--schrift-klein); font-weight: 400; }
.tabelle.aufgaben td.zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle.aufgaben td.aktion { text-align: right; width: 1%; white-space: nowrap; }
.tabelle.aufgaben td.aktion small { white-space: normal; text-align: left; min-width: 180px; }
.tabelle.aufgaben .knopf.klein { min-height: 44px; }
.aufgabe-meldung { color: var(--text); overflow-wrap: anywhere; }
.adressen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); list-style: none; margin: var(--abstand-2) 0 var(--abstand-3); padding: 0; }
.adressen li { padding: var(--abstand-1) var(--abstand-3); border: 1px solid var(--linie); border-radius: var(--radius-rund); background: var(--flaeche-2); font-size: var(--schrift-klein); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Dashboard (0.0.19, kern-dashboard.php): Raster nach der Breite des Inhalts (Container-Abfrage, nicht des Fensters, weil das Menü Platz nimmt):
   eine Spalte, ab 560 px zwei, ab 980 px drei, ab 1360 px vier. klein = eine Spalte, mittel = zwei, gross = ganze Zeile.
   Jedes Widget trägt die Farbe seines Bausteins (data-farbe + .mit-probe) als Linie oben; Bedeutung steht immer auch als Wort. */
.dash-kopf { margin: 0 0 var(--abstand-5); }
.dash-kopf h1 { margin: 0; }
.dash-datum { margin: var(--abstand-1) 0 0; color: var(--dim); font-size: var(--schrift-gross); }
.dash { container-type: inline-size; }
.dash-raster { list-style: none; margin: 0 0 var(--abstand-6); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--abstand-4); }
/* Seit 0.0.48 (Tom 27.10.2026: "alle Kacheln die gleiche Größe, immer 4 in einer Reihe"): alle Kacheln gleich groß und gleich hoch, ab 1040 px Breite des Bereichs vier je Reihe
   (darunter drei, zwei, eine; schmaler als etwa 250 px je Kachel wird der Titel zu eng). Die Größe klein/mittel/gross aus den Einstellungen ändert die Breite nicht mehr. */
@container (min-width: 560px) { .dash-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 800px) { .dash-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1040px) { .dash-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.widget > section { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--abstand-4) var(--abstand-5) var(--abstand-5); background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; }
.widget > section::before { content: ""; position: absolute; left: var(--abstand-5); right: var(--abstand-5); top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--akzent); }
.widget.vorschau > section, .widget.platz > section { border-style: dashed; }
.widget.platz > section::before { display: none; }
.widget-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-1) var(--abstand-3); margin: 0 0 var(--abstand-3); }
.widget-kopf h2 { margin: 0; font-size: var(--schrift-text); font-weight: 600; min-width: 0; flex: 1 1 auto; }
.widget-kopf h2 a, .widget-titel { max-width: 100%; }   /* schmale Kachel (vier je Reihe, 0.0.48): die Marke oder Summe rutscht unter den Titel, statt ihn zu überdecken */
.widget-kopf > .widget-summe, .widget-kopf > .marke-vorschau { flex: none; }
.widget-kopf h2 a, .widget-titel { display: inline-flex; align-items: center; gap: var(--abstand-3); min-height: 44px; color: var(--text); text-decoration: none; border-radius: var(--radius-klein); }
.widget-kopf h2 a:hover .widget-titel-text { text-decoration: underline; text-underline-offset: 3px; }
.widget-kopf h2 a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.widget-kopf .linse { width: 30px; height: 30px; }
.widget-kopf .linse svg { width: 16px; height: 16px; }
.widget-pfeil { width: 8px; height: 8px; border-top: 2px solid var(--dim); border-right: 2px solid var(--dim); transform: rotate(45deg); margin-left: var(--abstand-1); flex: none; }
.widget-summe { flex: none; color: var(--dim); font-size: var(--schrift-klein); white-space: nowrap; }
.widget-summe b { color: var(--text); font-variant-numeric: tabular-nums; }
.widget-inhalt { flex: 1; display: flex; flex-direction: column; gap: var(--abstand-3); }
.widget-zahlen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--abstand-5); }
.widget-wert { display: grid; gap: 2px; }
.widget-wert-n { font-size: var(--schrift-zahl); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.widget-wert-wort { color: var(--dim); font-size: var(--schrift-klein); }
.widget-ton { justify-self: start; display: inline-block; padding: 1px 9px; border: 1px solid currentColor; border-radius: var(--radius-rund); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.widget-wert.warnung .widget-ton, .widget-hinweis.warnung .widget-ton { color: var(--warnung); }
.widget-wert.gut .widget-ton, .widget-hinweis.gut .widget-ton { color: var(--gruen); }
.widget-zusatz, .widget-leer, .widget-still { margin: 0; color: var(--dim); font-size: var(--schrift-klein); }
.widget-leer { font-size: var(--schrift-text); }
.widget-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.widget-eintrag { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: var(--abstand-3); min-height: 44px; padding: var(--abstand-1) 0; border-top: 1px solid var(--linie); }
.widget-eintrag:first-child { border-top: 0; }
.widget-zeit { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.widget-text { min-width: 0; }
.widget-text b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-weight: 500; overflow: hidden; overflow-wrap: anywhere; }   /* bis zu zwei Zeilen statt einer abgeschnittenen */
.widget-text small { display: block; color: var(--dim); font-size: var(--schrift-klein); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-marke { padding: 1px var(--abstand-2); border: 1px solid color-mix(in srgb, var(--akzent) 60%, transparent); border-radius: var(--radius-rund); font-size: var(--schrift-klein); white-space: nowrap; }
.widget-eintrag.vorbei { color: var(--dim); }
.widget-eintrag.vorbei .widget-text b { color: var(--dim); }
/* Jetzt-Linie: wo die Gegenwart zwischen den Einträgen liegt (Zeichen des Dashboards) */
.widget-jetzt { display: flex; align-items: center; gap: var(--abstand-2); margin: var(--abstand-1) 0; color: var(--akzent-hell); font-size: var(--schrift-klein); font-weight: 700; font-variant-numeric: tabular-nums; }
.widget-jetzt::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--akzent); }
.widget-jetzt + .widget-eintrag { border-top: 0; }
.widget-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.widget-balken li { display: grid; grid-template-columns: minmax(0, 7em) minmax(0, 1fr) auto; align-items: center; gap: var(--abstand-3); min-height: 32px; }
.widget-balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-balken-n { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.widget-balken-n b { color: var(--text); }
.widget-balken progress { appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--radius-rund); background: var(--flaeche-2); overflow: hidden; }
.widget-balken progress::-webkit-progress-bar { background: var(--flaeche-2); border-radius: var(--radius-rund); }
.widget-balken progress::-webkit-progress-value { background: var(--akzent); border-radius: var(--radius-rund); }
.widget-balken progress::-moz-progress-bar { background: var(--akzent); border-radius: var(--radius-rund); }
.widget-hinweis { margin: 0; }
.widget-unscharf { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }
.dash-einstellen .dash-liste { list-style: none; margin: var(--abstand-3) 0 0; padding: 0; display: grid; gap: var(--abstand-2); }
.dash-zeile { display: flex; align-items: center; gap: var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius); }
.dash-zeile.aus .dash-name { opacity: .6; }
.dash-schieben { display: inline-flex; gap: var(--abstand-1); }
.dash-schieben .knopf.klein { min-width: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; }
.dash-name { flex: 1; min-width: 0; }
.dash-name b { display: block; }
.dash-name small { color: var(--dim); font-size: var(--schrift-klein); }
@media (max-width: 520px) { .dash-zeile { flex-wrap: wrap; } .dash-zeile .linse { display: none; } }
/* Seit 0.0.33: "Sichtbar für" je Widget, ein Chip je Rolle (verwalten-dashboard.php). Zustand nie nur über Farbe: Haken oder Kreuz, ausgeblendete Namen
   durchgestrichen, nach Recht nicht mögliche Rollen mit Schloss und "kein Recht". Treffflächen 44 px. */
.dash-zeile { flex-wrap: wrap; }
.dr-zeile { flex: 1 1 100%; display: flex; align-items: center; gap: var(--abstand-2) var(--abstand-3); padding-top: var(--abstand-2); border-top: 1px dashed var(--linie); min-width: 0; }
.dr-titel { flex: none; color: var(--dim); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.dr-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-2); min-width: 0; }
.dr-chip { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; min-width: 44px; margin: 0; padding: 0 var(--abstand-4) 0 var(--abstand-3); border-radius: var(--radius-rund);
  border: 1px solid var(--linie); background: transparent; color: var(--dim); font: inherit; font-size: .92rem; letter-spacing: 0; text-transform: none; line-height: 1.2; text-align: left; }
.dr-chip svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dr-chip .dr-name { overflow-wrap: anywhere; }
button.dr-chip { cursor: pointer; }
.dr-chip.an { color: var(--text); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.dr-chip.aus { border-style: dashed; }
.dr-chip.aus .dr-name { text-decoration: line-through; text-decoration-thickness: 1px; }
button.dr-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); }
button.dr-chip:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.dr-chip.gesperrt { border-style: dotted; opacity: .75; cursor: not-allowed; }
.dr-chip.gesperrt small { color: var(--dim); font-size: .76rem; }
.dr-chip.dr-trenn { margin-left: var(--abstand-2); }
@media (max-width: 520px) { .dr-zeile { flex-direction: column; align-items: stretch; } .dr-chip.dr-trenn { margin-left: 0; } }
/* ===== Zugriffsprotokoll vertraulicher Daten (Version 0.0.19, Reiter Zugriffe, nur Verwaltung, verwalten-zugriffe.php).
   Zugriffe des Anbieters: Rand links und das Wort "Anbieter" (nie nur Farbe). Filter in einer Zeile, Felder ab 44 px. */
input[type=date] { width: 100%; min-height: 44px; padding: 11px 12px; background: var(--eingabe); color: var(--text); border: 1px solid var(--linie); border-radius: 10px; font: inherit; }
input[type=date]:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
input[type=date][aria-invalid="true"] { border-color: var(--rot); }
.zp-filter > div { flex: 1 1 130px; }
.zp-filter > .zp-knoepfe { flex: 0 0 auto; display: flex; gap: var(--abstand-2); }
.zp-knoepfe .knopf.klein { min-height: 46px; display: inline-flex; align-items: center; }
.zp-filter select { min-height: 44px; }
.block .zp-summe:not(.knopf) { margin: var(--abstand-5) 0 var(--abstand-1); }
.zp-summe b { color: var(--text); font-variant-numeric: tabular-nums; }
.zp-summe-anbieter { color: var(--warnung); font-weight: 600; }
.zp-leer { margin-top: var(--abstand-4); }
.zp-tabelle td small { display: block; color: var(--dim); font-size: var(--schrift-klein); }
.zp-tabelle td small.zp-nr { display: inline; margin-left: var(--abstand-1); font-variant-numeric: tabular-nums; }
.zp-tabelle tr.zp-anbieter td { background: color-mix(in srgb, var(--warnung) 7%, transparent); }
.zp-tabelle tr.zp-anbieter td:first-child { box-shadow: inset 3px 0 0 var(--warnung); }
.zp-marke-anbieter { color: var(--warnung); margin-left: var(--abstand-1); }
.zp-marke { color: var(--dim); margin-left: var(--abstand-1); }
.zp-aktion { white-space: nowrap; }
.zp-abgewiesen { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rot); }
.zp-offen { color: var(--warnung); }
/* ===== Zeit- und Datumswahl (Version 0.0.19, Bauteile iw_zeitfeld/iw_datumfeld in kern-zeitwahl.php, Verhalten in zeitwahl.js). Ersetzt die
   Auswahl des Browsers. Gewählt = gefüllt und fett, gesperrt = gestrichelt und durchgestrichen, Bereich = getönt; Bedeutung nie nur über Farbe. */
.zw-feld { position: relative; display: inline-flex; flex-direction: column; vertical-align: top; max-width: 100%; }
.zw-feld.zw-breit { display: flex; width: 100%; }
.zw-feld > input { margin: 0; padding-right: 34px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.zw-feld.zw-breit > input { width: 100%; }
.zw-feld:not(.zw-breit) > input.zw-uhr { width: 7rem; }
.zw-feld:not(.zw-breit) > input.zw-datum { width: 11.6rem; }
.zw-feld > input:focus { cursor: text; }
.zw-offen > input { border-color: var(--akzent); }
.zw-pfeil { position: absolute; right: 14px; top: 16px; width: 7px; height: 7px; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim); transform: rotate(45deg); pointer-events: none; }
.zw-offen > .zw-pfeil { transform: translateY(4px) rotate(-135deg); }
.zw-feld > .zw-pruef { position: absolute; top: 48px; left: 0; width: max-content; max-width: 21rem; color: var(--dim); font-size: .78rem; line-height: 1.3; white-space: nowrap; }
.zw-pruef:empty { display: none; }
.zw-feld[data-zustand="hinweis"], .zw-feld[data-zustand="fehler"] { padding-bottom: 22px; }
.zw-feld[data-zustand="hinweis"] > .zw-pruef::before { content: "→ "; }
.zw-feld[data-zustand="fehler"] > input { border-color: var(--rot); }
.zw-feld[data-zustand="fehler"] > .zw-pruef { color: var(--rot); font-weight: 600; }
.zw-feld[data-zustand="fehler"] > .zw-pruef::before { content: "! "; }
.zw-dauer { min-width: 6.5em; line-height: 44px; color: var(--dim); font-size: var(--schrift-klein); font-variant-numeric: tabular-nums; }

.zw-pop { position: absolute; z-index: 30; top: 52px; left: 0; width: 352px; max-width: calc(100vw - 24px); padding: var(--abstand-3) var(--abstand-4) var(--abstand-4); color: var(--text);
  background: var(--flaeche-2); border: 1px solid var(--linie); border-top: 3px solid var(--akzent); border-radius: var(--radius-gross);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); animation: zw-auf var(--dauer-rein) cubic-bezier(0, 0, .2, 1); }
.zw-pop[hidden] { display: none; }
.zw-feld .zw-pop span { color: inherit; }
.zw-feld[data-zustand="hinweis"] > .zw-pop:not(.nach-oben):not(.zw-blatt), .zw-feld[data-zustand="fehler"] > .zw-pop:not(.nach-oben):not(.zw-blatt) { top: 72px; }
.zw-pop.nach-oben { top: auto; bottom: calc(100% + var(--abstand-2)); }
.zw-pop.nach-links { left: auto; right: 0; }
@keyframes zw-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.zw-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1) var(--abstand-2); min-height: 28px; margin-bottom: var(--abstand-2); }
.zw-kopf-titel { white-space: nowrap; color: var(--dim); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.zw-kopf-wert { margin-left: auto; white-space: nowrap; font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums; }
.zw-tippen, .zw-zu { display: none; }
.zw-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.zw-kachel { position: relative; min-height: 44px; min-width: 44px; padding: 0 var(--abstand-1); background: transparent; color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius-klein);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.zw-kachel:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.zw-kachel:focus-visible, .zw-teil:focus-visible, .zw-takt button:focus-visible, .zw-rund:focus-visible, .zw-tippen:focus-visible, .zw-zu:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.zw-kachel[aria-pressed="true"] { background: var(--akzent-knopf); border-color: var(--akzent-knopf); color: var(--auf-akzent); font-weight: 700; }
.zw-kachel:disabled { color: color-mix(in srgb, var(--dim) 60%, transparent); border-style: dashed; text-decoration: line-through; cursor: not-allowed; }
.zw-kachel.im-bereich { background: color-mix(in srgb, var(--akzent) 20%, transparent); border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.zw-kachel.im-bereich[aria-pressed="true"] { background: var(--akzent-knopf); border-color: var(--akzent-knopf); }
.zw-kachel.bereich-ende:not([aria-pressed="true"]) { border: 2px solid var(--akzent); font-weight: 700; }
.zw-kachel.zw-beginn { color: var(--text); text-decoration: none; border-style: solid; border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 32%, transparent); font-weight: 700; cursor: default; }
.zw-voll { font-weight: 600; }
.zw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--abstand-3); }
.zw-chip { padding: 0 var(--abstand-4); border-radius: var(--radius-rund); background: var(--flaeche-1); font-weight: 600; }
.zw-teile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand-1); margin-bottom: var(--abstand-3); padding: var(--abstand-1); background: var(--eingabe); border: 1px solid var(--linie); border-radius: var(--radius); }
.zw-teil { display: grid; place-content: center; min-height: 44px; padding: 2px var(--abstand-1); background: transparent; color: var(--dim); border: 0; border-radius: var(--radius-klein); font: inherit; font-size: .88rem; line-height: 1.2; cursor: pointer; }
.zw-teil small { font-size: .7rem; }
.zw-teil:hover { color: var(--text); }
.zw-teil[aria-pressed="true"] { background: var(--flaeche-2); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); }
.zw-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); flex-wrap: wrap; margin-top: var(--abstand-3); padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.zw-takt { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linie); border-radius: var(--radius-rund); }
.zw-takt button { min-height: 44px; padding: 0 var(--abstand-3); background: transparent; color: var(--dim); border: 0; border-radius: var(--radius-rund); font: inherit; font-size: .82rem; cursor: pointer; }
.zw-takt button[aria-pressed="true"] { background: color-mix(in srgb, var(--akzent) 24%, transparent); color: var(--text); font-weight: 700; }
.zw-tipp { color: var(--dim); font-size: .76rem; }
.zw-pop-datum { width: 356px; }
.zw-monatnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--abstand-1); }
.zw-monatname { font-size: var(--schrift-text); }
.zw-rund { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 50%; cursor: pointer; }
.zw-rund:hover { border-color: var(--linie); }
.zw-rund svg, .zw-zu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zw-wt { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0 0 4px; color: var(--dim); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.zw-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.zw-tag { border-color: transparent; }
.zw-tag.zw-sonntag:not([aria-pressed="true"]):not(.im-bereich):not(.zw-beginn) { color: var(--dim); }
.zw-tag.zw-heute:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.zw-tag.zw-heute::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: currentColor; }
.zw-tag:disabled { border-color: transparent; }
.zw-chips-datum { margin: var(--abstand-3) 0 0; padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
/* Schmale Bildschirme: Blatt von unten (Daumen), größere Kacheln. Schließen über das Kreuz, Esc oder Tippen daneben (Wegziehen gibt es nicht). */
.zw-schleier { position: fixed; inset: 0; z-index: 40; background: var(--schleier); }
.zw-schleier[hidden] { display: none; }
.zw-pop.zw-blatt { position: fixed; z-index: 41; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; max-height: 88vh; overflow-y: auto;
  padding: var(--abstand-4) var(--abstand-4) calc(var(--abstand-5) + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border-bottom: 0; animation: zw-hoch var(--dauer-rein) cubic-bezier(0, 0, .2, 1); }
@keyframes zw-hoch { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.zw-blatt .zw-kopf { min-height: 48px; margin-bottom: var(--abstand-3); }
.zw-blatt .zw-kopf-wert { font-size: 1.15rem; }
.zw-blatt .zw-tippen { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--abstand-3); background: transparent; color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius-rund); font: inherit; font-size: .85rem; cursor: pointer; }
.zw-blatt .zw-zu { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--dim); border: 1px solid var(--linie); border-radius: 50%; cursor: pointer; }
.zw-blatt .zw-kachel { min-height: 52px; font-size: 1.05rem; }
.zw-blatt .zw-raster { gap: var(--abstand-2); }
.zw-blatt .zw-tage .zw-kachel, .zw-blatt .zw-chip { min-height: 48px; }
.zw-blatt-offen body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .zw-pop, .zw-pop.zw-blatt { animation: none; } }

/* Info-Zeichen und kurze Einleitung (seit 0.0.21, iw_info/iw_lead in ansicht.php): Erklärungen liegen hinter einem kleinen "i", nicht im Fließtext */
.lead-zeile { display: flex; align-items: flex-start; gap: var(--abstand-2); margin: 0 0 var(--abstand-5); }
.lead-zeile .lead { margin: 0; padding-top: 4px; }
details.info { position: relative; flex: none; }
/* Seit 0.0.32: die Trefffläche selbst ist 44 × 44 px (vorher 30 px mit unsichtbarem Rand), der sichtbare Kreis bleibt 30 px (::before); der negative Rand hält die Zeile so hoch wie bisher */
details.info > summary { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -7px; border-radius: var(--radius-rund); color: var(--dim); font-size: .8rem; font-weight: 700; font-style: italic; line-height: 1; list-style: none; cursor: pointer; transition: color var(--dauer-rein, .15s); }
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary::before { content: ''; position: absolute; inset: 7px; border: 1px solid var(--linie); border-radius: var(--radius-rund); transition: border-color var(--dauer-rein, .15s); }
details.info > summary:hover, details.info[open] > summary { color: var(--text); }
details.info > summary:hover::before, details.info[open] > summary::before { border-color: var(--akzent); }
details.info > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: -5px; }
.info-text { position: absolute; z-index: 5; top: calc(100% + var(--abstand-2)); left: 0; width: min(440px, 80vw); padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius); color: var(--dim); font-size: .88rem; line-height: 1.5; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.info-text p { margin: 0 0 var(--abstand-2); }
.info-text p:last-child { margin-bottom: 0; }
.karte .lead { margin: 0 0 var(--abstand-2); font-size: .92rem; }
.titel-info { display: flex; align-items: center; gap: var(--abstand-2); margin: 0 0 var(--abstand-3); }
.titel-info h2 { margin: 0; }
.stufe.lead-zeile { align-items: center; }
.label-zusatz { display: block; margin-top: 2px; font-size: .78rem; letter-spacing: 0; text-transform: none; }

/* Formularzeilen der Einstellungen (26.10.2026, Tom: Auswahl- und Passwortfelder nur halb so breit, alle gleich lang, Knöpfe gleich breit) */
.zeile > div { flex: 0 1 calc(50% - 7px); }
.zeile .knopf.klein { min-width: 170px; justify-content: center; }
@media (max-width: 640px) { .zeile > div { flex: 1 1 100%; } }

/* Person- und Standortkarten (26.10.2026, Tom): alle Zeilen enden bündig mit der längsten Zeile ("Erst sperren, dann entfernen."), Feld und Auswahl füllen den Rest */
.block[id^="p-"], .block[id^="s-"] { display: grid; grid-template-columns: max-content; justify-content: start; max-width: 100%; }
.block[id^="p-"] .zeile > div, .block[id^="s-"] .zeile > div { flex: 1 1 0; }
.block[id^="p-"] .zeile.ro-person-form > div { flex: 0 0 12rem; min-width: 12rem; }   /* Grundstufe: wurde zu einer schmalen Spalte gequetscht (Tom, 26.10.2026) */
@media (max-width: 640px) { .block[id^="p-"], .block[id^="s-"] { grid-template-columns: minmax(0, 1fr); } }
/* Tresen-Modus (0.0.24, tresen.php): ein Gerät, eine Seite. Ruhig und groß für das Tablet am Empfang: schmale Leiste oben mit Marke und „Verlassen“,
   darunter nur der Inhalt, mittig, größere Schrift, Treffflächen mindestens 56 px. Keine Bewegung. */
body.tresen { font-size: 18px; }
.tresen-kopf { display: flex; justify-content: space-between; align-items: center; gap: var(--abstand-4); padding: var(--abstand-3) clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--linie); }
.tresen-verlassen { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 48px; padding: 0 var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius-rund); color: var(--dim); text-decoration: none; font-size: .9rem; }
.tresen-verlassen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tresen-verlassen:hover, .tresen-verlassen:focus-visible { color: var(--text); border-color: var(--akzent); outline: none; }
.tresen-inhalt { max-width: 880px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px; }
.tresen-inhalt h1 { font-size: var(--schrift-titel); margin: 0 0 var(--abstand-3); }
.tresen-inhalt input[type=text], .tresen-inhalt input[type=password], .tresen-inhalt input[type=number], .tresen-inhalt select, .tresen-inhalt textarea { min-height: 56px; font-size: 1.05rem; }
.tresen-inhalt .knopf { min-height: 56px; font-size: 1.05rem; }
.tresen-inhalt .karte { margin: 0 auto; }
.tresen-karte .knopf { min-height: 56px; }
.tresen-karte input[type=password], .tresen-karte select { min-height: 52px; }
.tresen-geraet-name { margin: var(--abstand-4) 0 0; font-size: var(--schrift-gross); font-weight: 600; }
.tresen-leer { justify-items: center; text-align: center; }
.tresen-leer h1 { margin: var(--abstand-2) 0 0; }
/* Einstellungen: Liste der Tresen-Geräte und Agentur-Zugänge */
.tresen-zeile { margin: var(--abstand-5) 0 0; padding-top: var(--abstand-4); border-top: 1px solid var(--linie); }
.tresen-zeile.aus { opacity: .7; }
.tresen-zeile h3 { margin: 0 0 var(--abstand-1); font-size: 1rem; display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }
.tresen-zeile .zeile { margin-top: var(--abstand-2); }
.block .klein.tresen-seite-hinweis:not(.knopf) { margin: var(--abstand-2) 0 0; }
.menue-einstellen.aktiv { color: var(--text); }
.tresen-kopf .marke small { display: none; }   /* Kundschaft am Tresen sieht nur den Namen des Betriebs, nicht "Intranet" */

/* Zuklappbare Blöcke der Verwaltung (Dashboard, Bausteine; seit 0.0.29) */
details.klapp > summary { display: flex; align-items: center; gap: var(--abstand-2); cursor: pointer; list-style: none; min-height: 44px; }
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::after { content: "▾"; margin-left: auto; color: var(--dim); transition: transform .15s; }
details.klapp:not([open]) > summary::after { transform: rotate(-90deg); }
details.klapp > summary h2 { margin: 0; }
details.klapp > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 8px; }
details.klapp[open] > summary { margin-bottom: var(--abstand-2); }
@media (prefers-reduced-motion: reduce) { details.klapp > summary::after { transition: none; } }

/* Farbwähler als breites Fenster (Tom, 26.10.2026: das Fenster hatte Handyformat). Ab 640 px zwei Spalten, darunter eine. */
.fw-spalte { display: grid; gap: var(--abstand-2); align-content: start; min-width: 0; }
@media (min-width: 640px) {
  .fw-fenster { width: min(600px, calc(100vw - var(--abstand-6))); grid-template-columns: 1fr 1fr; column-gap: var(--abstand-5); }
  .fw-fenster > .fw-kopf, .fw-fenster > .fw-fuss { grid-column: 1 / -1; }
  .fw-flaeche { height: 200px; }
}
/* ---------------------------------------------------------------- Menü Einstellungen, Reihenfolge ändern (seit 0.0.30)
   Einstellungen: Menüpunkt im Hauptmenü, der das Menü Einstellungen öffnet (Aufbau wie .menue-baustein). Ordnen-Modus: nur nach dem Knopf
   "Reihenfolge ändern", Einträge ohne Links, Griff zum Ziehen, Hoch und Runter je 44 px (menue-ordnen.js; ohne Skript normale Formulare). */
/* seit 0.0.31: Trennbalken "Chefbereich" (Teambereich oben, Chefbereich unten): Beschriftung wie die Menüüberschriften, dahinter eine kräftige Linie */
.menue-balken { display: flex; align-items: center; gap: var(--abstand-2); margin: var(--abstand-5) var(--abstand-3) var(--abstand-3); }
.menue-balken::after { content: ""; flex: 1; height: 2px; border-radius: var(--radius-rund); background: color-mix(in srgb, var(--dim) 35%, var(--linie)); }
.menue-balken-text { color: var(--dim); font-size: var(--schrift-klein); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.menue-ordnen-liste li.menue-ordnen-balken { min-height: 54px; border-style: dashed; background: transparent; }
.menue-ordnen-liste .menue-ordnen-balken .menue-text { flex: 1; display: flex; align-items: center; gap: var(--abstand-2); font-weight: 600; }
.menue-ordnen-liste .menue-ordnen-balken .menue-text::after { content: ""; flex: 1; height: 2px; border-radius: var(--radius-rund); background: color-mix(in srgb, var(--dim) 35%, var(--linie)); }
.menue .menue-ordnen-an { display: flex; align-items: center; gap: var(--abstand-2); min-height: 44px; margin: var(--abstand-4) 0 0; padding: 0 var(--abstand-3); border-radius: var(--radius); border: 1px dashed var(--linie); color: var(--dim); font-size: var(--schrift-klein); font-weight: 500; }
.menue .menue-ordnen-an:hover { color: var(--hell); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); background: var(--hauch-1); }
.menue-griff { flex: none; display: inline-grid; place-items: center; width: 20px; color: var(--dim); }
.menue-griff svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.rahmen.ordnen .gestell { grid-template-columns: 340px minmax(0, 1fr); }
.menue-ordnen-titel { margin: 0 var(--abstand-3) var(--abstand-2); color: var(--dim); font-size: var(--schrift-klein); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.menue-ordnen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-1); }
.menue-ordnen-liste li { display: flex; align-items: center; gap: var(--abstand-2); min-height: 54px; padding: var(--abstand-1) var(--abstand-1) var(--abstand-1) var(--abstand-2); border-radius: var(--radius);
  border: 1px solid var(--linie); background: var(--hauch-1); color: var(--text); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: background var(--dauer-raus), border-color var(--dauer-raus), box-shadow var(--dauer-raus); }
.menue-ordnen-liste li:hover { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); }
.menue-ordnen-liste .linse { width: 32px; height: 32px; }
.menue-ordnen-liste .menue-text { line-height: 1.25; overflow-wrap: anywhere; font-weight: 500; }
.menue-ordnen-liste li.zieht { cursor: grabbing; border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 18%, var(--flaeche-2)); box-shadow: 0 10px 28px var(--schleier); }
.menue-ordnen-liste.ordnen-zieht, .menue-ordnen-liste.ordnen-zieht li { cursor: grabbing; }
.menue-ordnen-liste li:target { border-color: var(--akzent); }
.menue-schieben { flex: none; display: flex; gap: var(--abstand-1); margin: 0; }
.menue-schieben button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: transparent; color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
.menue-schieben button:hover:not(:disabled) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.menue-schieben button:disabled { opacity: .3; cursor: default; }
.menue-schieben button:focus-visible, .menue .menue-ordnen-an:focus-visible, .menue .menue-ordnen-fertig:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.menue-ordnen-ansage { min-height: 1.5em; margin: var(--abstand-2) var(--abstand-3) 0; color: var(--gruen); font-size: var(--schrift-klein); }
.menue-ordnen-ansage.fehler-text { color: var(--rot); }
.menue .menue-ordnen-fertig { justify-content: center; min-height: 44px; margin-top: var(--abstand-2); border-radius: var(--radius); background: var(--akzent-knopf); color: var(--auf-akzent); font-weight: 600; }
.menue .menue-ordnen-fertig:hover { color: var(--auf-akzent); background: color-mix(in srgb, var(--akzent-knopf) 86%, var(--bg)); }
@media (min-width: 1800px) { .rahmen.ordnen .gestell { grid-template-columns: 360px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .rahmen.ordnen .gestell { grid-template-columns: minmax(0, 1fr); }
  .menue-balken { margin: var(--abstand-3) var(--abstand-1) var(--abstand-2); }
  .menue .menue-ordnen-an { margin-top: var(--abstand-2); }
  .menue-ordnen-liste { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .menue-ordnen-liste li { transition: none; } }

/* ---------------------------------------------------------------- Eigene Rollen (seit 0.0.32, Entwurf "Freie Rollen" Variante A, verwalten-rollen.php)
   Vorsilbe ro-. Bedeutung nie nur über Farbe: jede Rolle trägt ihren Namen, der Farbpunkt (data-farbe setzt --probe, datei.php) ist nur Beigabe. */
.ro-marke { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-rund); border: 1px solid var(--linie); background: var(--hauch-1); color: var(--text); font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle; }
.ro-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--probe, transparent); border: 1px solid color-mix(in srgb, var(--probe, var(--dim)) 80%, var(--text)); }
.ro-punkt.ohne { background: transparent; border: 1px dashed var(--dim); }
.ro-fest { display: inline-flex; color: var(--dim); }
.ro-fest svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ro-zahl { color: var(--dim); font-size: .85rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro-knopf-gross { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: 44px; padding: 0 var(--abstand-4); text-decoration: none; }
.knopf.klein.ro-knopf-gross { display: inline-flex; min-height: 44px; padding: 0 var(--abstand-4); font-size: .9rem; }   /* vor a.knopf (inline-block) */
.ro-knopf-gross svg, .ro-rund svg, .ro-leer-zeichen svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ro-rund { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--dim); cursor: pointer; }
.ro-rund:hover:not(:disabled) { color: var(--hell); border-color: var(--linie); background: var(--hauch-1); }
.ro-rund:disabled { opacity: .3; cursor: default; }
.ro-rund:focus-visible, .ro-knopf-gross:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.ro-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
.ro-leiter { list-style: none; margin: var(--abstand-3) 0 0; padding: 0; }
.ro-leiter li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--abstand-3); padding: var(--abstand-3) 0; border-top: 1px solid var(--hauch-2); }
.ro-leiter li:first-child { border-top: 0; }
.ro-stufe-nr { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linie); color: var(--dim); font-weight: 700; font-variant-numeric: tabular-nums; }
.ro-leiter b { display: inline-flex; align-items: center; gap: 6px; }
.ro-leiter small { display: block; color: var(--dim); font-size: .85rem; }
.ro-liste { list-style: none; margin: var(--abstand-3) 0 0; padding: 0; display: grid; gap: var(--abstand-2); }
.ro-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--abstand-3); padding: var(--abstand-2) var(--abstand-2) var(--abstand-2) var(--abstand-4); background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius); }
.ro-zeile.neu, .ro-zeile:target { border-color: color-mix(in srgb, var(--gruen) 60%, transparent); }
.ro-zeile-name { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; min-width: 0; }
.ro-zeile-name .ro-marke { font-size: .88rem; white-space: normal; overflow-wrap: anywhere; }
.ro-zeile-aktionen { display: flex; gap: var(--abstand-1) var(--abstand-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ro-schieben { display: flex; gap: var(--abstand-1); margin: 0; }
.ro-zeile-form { grid-column: 1 / -1; padding: var(--abstand-3) 0 var(--abstand-2); border-top: 1px solid var(--hauch-2); }
.ro-leer { display: grid; justify-items: start; gap: var(--abstand-2); margin-top: var(--abstand-3); padding: var(--abstand-5) var(--abstand-4); border: 1px dashed var(--linie); border-radius: var(--radius); }
.ro-leer-zeichen { color: var(--dim); }
.ro-leer-zeichen svg { width: 30px; height: 30px; stroke-width: 1.6; }
.ro-form { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--abstand-3) var(--abstand-5); align-items: start; margin-top: var(--abstand-2); }
.ro-form > div > label { margin-top: 0; }
.ro-form input[type=text] { min-height: 44px; }
.ro-form .ro-knoepfe { grid-column: 1 / -1; }
.ro-farben { display: flex; flex-wrap: wrap; gap: var(--abstand-1); border: 0; margin: 0; padding: 0; min-width: 0; }
.ro-farben legend { margin: 0 0 6px; padding: 0; color: var(--dim); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.ro-farben legend small { text-transform: none; letter-spacing: 0; font-size: 1em; }
label.ro-farbe { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; border-radius: 50%; cursor: pointer; }
.ro-farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ro-farbe .ro-punkt { width: 24px; height: 24px; }
.ro-farbe input:checked + .ro-punkt { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--text); }
.ro-farbe input:focus-visible + .ro-punkt { outline: 2px solid var(--akzent-hell); outline-offset: 5px; }
.ro-fehler { margin: var(--abstand-2) 0 0; color: var(--rot); font-size: .9rem; }
.ro-form input[aria-invalid=true] { border-color: var(--rot); }
label.haken.ro-haken { min-height: 44px; margin-top: var(--abstand-2); }
/* Zugänge: Grundstufe plus eigene Rollen als Chips */
.ro-person-kopf { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; }
.zeile.ro-person-form > .ro-chips, .zeile.ro-person-form > .ro-chips-leer { flex: 1 1 100%; }
.ro-person-form fieldset label.haken { min-height: 44px; margin: 0; }   /* Standorte der Person: Trefffläche 44 px wie die Chips */
.kachel-text .kachel-ueber { display: block; margin-top: var(--abstand-2); color: var(--dim); font-size: .8rem; }
.ro-chips { display: flex; flex-wrap: wrap; gap: var(--abstand-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.ro-chips legend, .ro-feldname { display: block; margin: 0 0 6px; padding: 0; color: var(--dim); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
label.ro-chip { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; margin: 0; padding: 0 var(--abstand-4) 0 var(--abstand-3); border-radius: var(--radius-rund); border: 1px solid var(--linie); color: var(--dim); font-size: .92rem; letter-spacing: 0; text-transform: none; cursor: pointer; }
label.ro-chip input { width: 18px; height: 18px; margin: 0; accent-color: var(--akzent); }
label.ro-chip:hover { color: var(--text); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); }
label.ro-chip:has(input:checked) { color: var(--text); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
label.ro-chip:has(input:focus-visible) { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
/* Rechte-Tabelle: erste Spalte bleibt beim seitlichen Rollen stehen, eigene Rollen hinter einem Trennstrich */
.tabelle.rechte th[scope=row] { position: sticky; left: 0; z-index: 1; min-width: 220px; background: var(--karte); }
.tabelle.rechte thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--karte); }
.tabelle.rechte thead th { white-space: nowrap; }
.tabelle.rechte thead .ro-marke { font-size: .76rem; }
.tabelle.rechte .ro-trenn { border-left: 2px solid color-mix(in srgb, var(--dim) 35%, var(--linie)); }
.tabelle.rechte td.mitte { min-width: 96px; }
.tabelle.rechte .zellname { display: none; }
/* Menü und Kacheln: Baustein im Chefbereich, den eine eigene Rolle öffnen darf */
.menue-ueber { display: block; color: var(--dim); font-size: .72rem; font-weight: 500; line-height: 1.3; }
@media (max-width: 760px) {
  .ro-form { grid-template-columns: minmax(0, 1fr); }
  .ro-zeile { grid-template-columns: minmax(0, 1fr); }
  .ro-zeile-aktionen { justify-content: flex-start; }
  /* schmal: die Rechte-Tabelle wird je Recht eine Karte, jede Stufe und Rolle ein Feld mit Namen (kein seitliches Rollen) */
  .tabelle.rechte, .tabelle.rechte tbody, .tabelle.rechte tr, .tabelle.rechte th, .tabelle.rechte td { display: block; }
  .tabelle.rechte thead { display: none; }
  .tabelle.rechte tbody tr { display: flex; flex-wrap: wrap; gap: var(--abstand-2); padding: var(--abstand-3) 0; border-bottom: 1px solid var(--hauch-2); }
  .tabelle.rechte th[scope=row] { position: static; flex: 1 1 100%; min-width: 0; padding: 0; border: 0; background: none; }
  .tabelle.rechte td, .tabelle.rechte td.mitte { width: auto; min-width: 0; padding: 0; border: 0; }
  .tabelle.rechte .ro-trenn { border: 0; }
  .tabelle.rechte td label.zelle { display: inline-flex; width: auto; height: auto; min-height: 44px; gap: var(--abstand-2); padding: 0 14px 0 12px; border: 1px solid var(--linie); border-radius: var(--radius-rund); color: var(--dim); font-size: .88rem; letter-spacing: 0; text-transform: none; }
  .tabelle.rechte td label.zelle:has(input:checked) { color: var(--text); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
  .tabelle.rechte .zellname { display: inline; }
}

/* Abschnitte der Seite „Protokolle“ (seit 0.0.37): einfache Links als Pillen, Zustand nie nur über Farbe (Unterstreichung + aria-current) */
.teile ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0 0 var(--abstand-4); padding: 0; }
.teile a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius-rund); color: var(--dim); text-decoration: none; font-weight: 500; }
.teile a:hover { color: var(--text); border-color: var(--dim); }
.teile a.aktiv { color: var(--text); background: var(--flaeche-2); border-color: var(--akzent); text-decoration: underline; text-underline-offset: 4px; }
.teile a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---------------------------------------------------------------- Dashboard anordnen (seit 0.0.39, dashboard-ordnen.js)
   Nur nach dem Knopf "Dashboard anordnen" (?anordnen=1). Die Kacheln tragen oben einen Streifen mit Griff und zwei Pfeil-Knöpfen (je 44 px). Beim Ziehen schwebt
   eine Kopie (.geist) am Zeiger, an der Stelle der Kachel steht ein gestrichelter Platzhalter (.platzhalter), der zeigt, wo sie landet. Das Raster fließt wie sonst. */
.dash-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--abstand-3) var(--abstand-5); }
.knopf.klein.dash-anordnen-an, .dash-ordnen-leiste .knopf.klein { display: inline-flex; align-items: center; justify-content: center; gap: var(--abstand-2); min-height: 44px; width: auto; text-decoration: none; }
.dash-anordnen-an:hover { color: var(--hell); border-color: color-mix(in srgb, var(--akzent) 60%, transparent); background: var(--hauch-1); }
.dash-ordnen-leiste { margin: 0 0 var(--abstand-5); }
.dash-ordnen-kopf { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-4); margin: 0 0 var(--abstand-3); padding: var(--abstand-2) 0; background: var(--bg); border-bottom: 1px solid var(--linie); }
.dash-ordnen-kopf h2 { margin: 0; font-size: var(--schrift-text); }
.dash-ordnen-ansage { flex: 1 1 14em; min-height: 1.5em; margin: 0; color: var(--gruen); font-size: var(--schrift-klein); }
.dash-ordnen-ansage.fehler-text { color: var(--rot); }
.dash-ordnen-hilfe { max-width: 80ch; margin: 0 0 var(--abstand-3); color: var(--dim); font-size: var(--schrift-klein); }
.dash-zurueck [hidden] { display: none; }
.dash-zurueck-leer { display: flex; align-items: center; gap: var(--abstand-3); }
.dash-zurueck-leer small { color: var(--dim); font-size: var(--schrift-klein); }
.dash-zurueck-leer .knopf:disabled { opacity: .5; cursor: default; }
.dash-zurueck summary { list-style: none; cursor: pointer; }
.dash-zurueck summary::-webkit-details-marker { display: none; }
.dash-zurueck summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.dash-zurueck-form { display: grid; justify-items: start; gap: var(--abstand-3); max-width: 60ch; margin-top: var(--abstand-3); padding: var(--abstand-4); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-1); }
.dash-zurueck-form p { margin: 0; }
.dash.anordnen .widget > section { border-style: dashed; }
.dash.anordnen .widget-inhalt { opacity: .55; pointer-events: none; user-select: none; -webkit-user-select: none; }
.widget-ordnen { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-2); margin: 0 0 var(--abstand-3); padding: var(--abstand-1); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--hauch-1); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dash:not(.mit-js) .widget-griff { display: none; }
.dash:not(.mit-js) .widget-ordnen { justify-content: flex-end; cursor: default; touch-action: auto; }
.widget-griff { display: inline-flex; align-items: center; gap: var(--abstand-2); min-height: 44px; min-width: 44px; padding: 0 var(--abstand-3) 0 var(--abstand-2); border: 1px solid transparent; border-radius: var(--radius-klein); background: transparent; color: var(--dim); font: inherit; font-size: var(--schrift-klein); cursor: grab; touch-action: none; }
.widget-griff:hover { color: var(--text); }
.widget-griff:focus-visible, .widget-schieben button:focus-visible, .dash-ordnen-leiste a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.widget.gegriffen > section { border-style: solid; border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent); }
.widget.gegriffen .widget-griff { color: var(--text); border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.widget-schieben { flex: none; display: flex; gap: var(--abstand-1); margin: 0; }
.widget-schieben button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: transparent; color: var(--text); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.widget-schieben button:hover:not(:disabled) { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, transparent); }
.widget-schieben button:disabled { opacity: .3; cursor: default; }
/* seit 0.0.41: kleines × entfernt die Kachel vom eigenen Dashboard (nur im Anordnen-Modus), in Rahmenfarbe; die Liste "Entfernte Kacheln" holt sie zurück */
.widget-schieben { margin-left: auto; }
.widget-weg { flex: none; margin: 0 0 0 var(--abstand-1); }
.widget-weg button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: transparent; color: var(--dim); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.widget-weg button:hover { border-color: var(--rot); color: var(--rot); background: color-mix(in srgb, var(--rot) 12%, transparent); }
.widget-weg button:focus-visible, .dash-entfernt .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.dash-entfernt { margin: var(--abstand-6) 0 0; padding: var(--abstand-4); border: 1px dashed var(--linie); border-radius: var(--radius); }
.dash-entfernt h2 { margin: 0 0 var(--abstand-2); font-size: var(--schrift-text); }
.dash-entfernt-hilfe { margin: 0 0 var(--abstand-3); color: var(--dim); font-size: var(--schrift-klein); }
.dash-entfernt ul { display: grid; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
.dash-entfernt li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.dash-entfernt .widget-zurueck { margin: 0; }
/* Platzhalter: die Kachel selbst bleibt an ihrer Stelle im Raster, ihr Inhalt verschwindet, ein gestrichelter Rahmen zeigt, wo sie landet */
.dash.anordnen .widget.platzhalter { position: relative; }
.dash.anordnen .widget.platzhalter > section { visibility: hidden; }
.dash.anordnen .widget.platzhalter::after { content: ""; position: absolute; inset: 0; border: 2px dashed var(--akzent); border-radius: var(--radius-gross); background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.dash.zieht-gerade, .dash.zieht-gerade * { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.dash.zieht-gerade .dash-raster { overflow-anchor: none; }
.widget.geist { position: fixed; left: 0; top: 0; z-index: 50; display: block; margin: 0; list-style: none; pointer-events: none; scale: 1.02; box-shadow: 0 14px 34px var(--schleier); border-radius: var(--radius-gross); }
.widget.geist > section { border-style: solid; border-color: var(--akzent); }
@media (max-width: 520px) { .dash-ordnen-kopf { gap: var(--abstand-1) var(--abstand-3); } }

/* seit 0.0.44: Screenshot als Zusatz zur Adresse (Von Webseite übernehmen) */
.fa-zusatz { display: block; margin: var(--abstand-4) 0 var(--abstand-1); }
#fa-screenshot { display: block; max-width: 100%; margin-bottom: var(--abstand-1); }
.fa-dunkel { display: flex; align-items: center; gap: var(--abstand-2); margin: var(--abstand-3) 0 0; font-size: var(--schrift-klein); }
.eb-d-status { margin: var(--abstand-2) 0 0; color: var(--gruen); font-size: var(--schrift-klein); }
.eb-d-status[hidden] { display: none; }

/* Prüfrunde Kern 30.10.2026 ---------------------------------------------------------------------------------------------------------------
   Fokusrahmen der Knöpfe, zentral: Kern-Knopf und die Hauptknöpfe der Bausteine bekommen bei Tastaturbedienung denselben gut sichtbaren Rahmen,
   2 px in --fokus (Textfarbe), mit 2 px Abstand außen auf dem Hintergrund, damit er auch neben einem Verlauf oder einem dunklen Akzent lesbar ist.
   Steht am Ende der Datei und hat mit :is() die Gewichtung von drei Klassen, damit er die älteren Regeln der Bausteine (Akzent) ersetzt. */
:is(.knopf, .ab-knopf.ab-haupt, .fb-knopf.haupt, .fb-tab-knopf.haupt, .ku-knopf.ku-haupt, .sf-knopf.sf-haupt, .vt-knopf.vt-haupt, .tc-senden-knopf):focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* "Bausteine einstellen" und "Tresen-Geräte" unten im Menü: .menue a gab dem Link 12 px Rundung, dadurch bog sich die Trennlinie oben an den Ecken
   (dasselbe wie bei "Ordner verwalten" im Postfach). Jetzt ein schlichter Textlink mit Abstand, ohne Linie und ohne Rundung, 44 px hoch. */
.menue .menue-einstellen { min-height: 44px; margin: var(--abstand-4) 0 0; padding: var(--abstand-2) var(--abstand-3); border: 0; border-radius: 0; box-shadow: none; font-size: .85rem; }
.menue .menue-einstellen:hover { background: transparent; }
/* Treffflächen 44 px (WCAG 2.5.8, gemessen in tests/test-kern-browser.mjs): Der kleine Knopf war 35 bis 37 px hoch (Abmelden, Öffnen, Beenden, Speichern),
   die Links im Kopf („Einstellungen“, „Übersicht“) und unter der Anmeldung („Admin“) 21 bis 23 px. Einzelne Stellen hatten das schon für sich gelöst;
   jetzt gilt es zentral. Die Unterstreichung ist jetzt eine Textlinie statt eines Randes, damit sie bei 44 px Höhe am Text bleibt. */
.knopf.klein { min-height: 44px; }
a.knopf.klein { display: inline-flex; align-items: center; justify-content: center; }
.wechsellink, .wechsel a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--linie); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wechsellink:hover, .wechsel a:hover { text-decoration-color: var(--akzent); }