/* Kopie aus Gemeinsamer-Kern\php\kern – nicht hier ändern, werkzeuge\kern-holen.js ausführen. */
/* Stil der Kern-Bausteine (Anmeldung, 2FA, Passwort vergessen, Geräte). Marke über die Variablen der Anwendung:
   --kern-haupt (über data-marke, Abschnitt Designsystem 2.0 unten), --kern-gefahr, --kern-rand, --kern-leise, --kern-flaeche. UX-STANDARD.md Abschnitte 5.4, 6, 9. */
/* Designsystem 2.0 (Kern 1.8.0, 02.10.2026): Die Anwendung setzt nur <html data-marke="tm|lw">; Farben, Schriften und
   Status «Neu» kommen von hier. Kein Dunkelmodus (Entscheid D2-1). Schriften liegen lokal in schriften/ neben kern.css. */
@font-face { font-family: 'Manrope'; src: url('schriften/manrope-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('schriften/manrope-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('schriften/manrope-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('schriften/manrope-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('schriften/manrope-extrabold.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('schriften/figtree.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('schriften/anton.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Faro Display'; src: url('schriften/faro-display.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
/* Vorgaben mit Spezifität 0 (:where): die Anwendung überschreibt sie mit :root, egal in welcher Reihenfolge die Dateien laden.
   Ohne data-marke gilt Trade Monkey. */
:where(:root) { color-scheme: light; --kern-haupt: #4814B2; --kern-haupt-text: #fff; --kern-akzent: #1F7A54; --kern-status-neu: #4814B2;
        --kern-status-bereit: #1D5FD1; --kern-gefahr: #C41A4A; --kern-ok: #1F7A54; --kern-warn: #B45309;
        --kern-rand: #E3E1EA; --kern-leise: #6B6780; --kern-flaeche: #fff; --kern-text: #1F1B2D; --kern-radius: 10px;
        --kern-fehler-hell: #FDF1F4; --kern-ok-hell: #EFF8F3; --kern-warn-hell: #FFF7ED; --kern-hover: rgba(31, 27, 45, .06);
        --kern-menue-bg: #FAFAFA; --kern-kopf-bg: #fff; --kern-seite-bg: #F6F5F9; --kern-schatten: 0 8px 24px rgba(20, 16, 40, .14);
        --kern-schrift: 'Manrope', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
        --kern-titel-schrift: 'Faro Display', 'Manrope', 'Segoe UI', system-ui, sans-serif; --kern-titel-gewicht: 700; }
:where(:root[data-marke="lw"]) { --kern-haupt: #002D47; --kern-akzent: #2BA5CA; --kern-status-neu: #2BA5CA;
        --kern-rand: #DDE3E8; --kern-leise: #5B6B77; --kern-text: #17232C; --kern-hover: rgba(0, 45, 71, .06);
        --kern-menue-bg: #F5F7F9; --kern-seite-bg: #F4F6F8; --kern-schatten: 0 8px 24px rgba(0, 45, 71, .14);
        --kern-schrift: 'Figtree', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
        --kern-titel-schrift: 'Anton', 'Arial Narrow', Impact, sans-serif; --kern-titel-gewicht: 400; }
:where(body) { font-family: var(--kern-schrift); }
/* Seitentitel in der Titelschrift der Marke (D2-6): .kern-seitentitel oder h1 im Inhalt des Rahmens */
:where(.kern-seitentitel, .kern-inhalt h1) { font-family: var(--kern-titel-schrift); font-weight: var(--kern-titel-gewicht); }
:where(:root[data-marke="lw"]) :where(.kern-seitentitel, .kern-inhalt h1) { letter-spacing: .01em; }
/* Statuschips nach UX-STANDARD 7 (gleich für beide Marken, nur «Neu» je Marke, D2-7) */
.kern-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; color: var(--kern-leise); background: color-mix(in srgb, currentColor 12%, transparent); }
.kern-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kern-status-neu { color: var(--kern-status-neu); }
.kern-status-entwurf { color: var(--kern-leise); }
.kern-status-bereit { color: var(--kern-status-bereit); }
.kern-status-ok { color: var(--kern-ok); }
.kern-status-warn { color: var(--kern-warn); }
.kern-status-fehler { color: var(--kern-gefahr); }
.kern-karte { color: var(--kern-text); background: var(--kern-flaeche); border: 1px solid var(--kern-rand); border-radius: var(--kern-radius); padding: 28px; max-width: 460px; margin: 0 auto 16px; }
.kern-karte h1 { font-size: 22px; font-weight: 700; margin: 0 0 8px; }
.kern-karte h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.kern-leise { color: var(--kern-leise); }
.kern-klein { font-size: 13px; }
.kern-formular { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.kern-feld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.kern-feld input { color: var(--kern-text); background: var(--kern-flaeche); font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--kern-rand); border-radius: 8px; min-width: 0; }
.kern-feld input:focus { outline: 2px solid var(--kern-haupt); outline-offset: 1px; }
.kern-code { font-size: 22px !important; letter-spacing: 4px; text-align: center; }
.kern-haken, .kern-karte label.kern-haken { display: flex !important; flex-direction: row !important; gap: 8px; align-items: center; justify-content: flex-start; text-align: left; font-size: 14px; font-weight: 500; }
.kern-haken input { width: auto !important; margin: 0 !important; flex: 0 0 auto; }
.kern-knopf { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--kern-rand); background: var(--kern-flaeche); color: var(--kern-text); cursor: pointer; }
.kern-knopf-haupt { background: var(--kern-haupt); border-color: var(--kern-haupt); color: var(--kern-haupt-text); }
.kern-knopf-gefahr { background: var(--kern-gefahr); border-color: var(--kern-gefahr); color: #fff; }
.kern-knopf-klein { padding: 4px 10px; font-size: 13px; }
.kern-fuss { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.kern-link { color: var(--kern-haupt); }
.kern-meldung { padding: 10px 12px; border-radius: 8px; margin: 10px 0; font-size: 14px; border: 1px solid; }
.kern-meldung-fehler { color: var(--kern-gefahr); border-color: var(--kern-gefahr); background: var(--kern-fehler-hell); }
.kern-meldung-ok { color: var(--kern-ok); border-color: var(--kern-ok); background: var(--kern-ok-hell); }
.kern-meldung-warn { color: var(--kern-warn); border-color: var(--kern-warn); background: var(--kern-warn-hell); }
.kern-schritte { padding-left: 20px; line-height: 1.5; }
.kern-schritte li { margin-bottom: 10px; }
.kern-qr { width: 190px; margin: 10px 0; background: #fff; padding: 8px; border-radius: 8px; }
.kern-qr svg { width: 100%; height: auto; }
.kern-schluessel { font-family: ui-monospace, Consolas, monospace; font-size: 15px; word-break: break-all; }
.kern-codes { columns: 2; font-family: ui-monospace, Consolas, monospace; font-size: 16px; line-height: 1.9; }
.kern-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0; }
.kern-tabelle td { border-top: 1px solid var(--kern-rand); padding: 8px 4px; vertical-align: middle; }
.kern-r { text-align: right; }
.kern-karte-breit { max-width: none; margin: 0 0 16px; }
/* Im Rahmen stehen Karten linksbündig wie der übrige Inhalt; ausserhalb (Anmeldung) bleiben sie zentriert. */
.kern-inhalt .kern-karte, .kern-karte-links { margin-left: 0; margin-right: 0; }
/* In der Anmeldekarte einer Anwendung (.login-karte o. ä.) kein zweiter Rahmen */
[class*="login-karte"] > .kern-karte, [class*="anmelde-karte"] > .kern-karte { border: 0; padding: 0; margin: 0; max-width: none; background: transparent; box-shadow: none; }
.kern-karte h3 { font-size: 15px; margin: 18px 0 6px; }
.kern-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.kern-raster > .kern-fuss, .kern-raster > .kern-gruppe { grid-column: 1 / -1; }
.kern-gruppe { border: 1px solid var(--kern-rand); border-radius: 8px; padding: 12px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kern-gruppe legend { font-weight: 700; padding: 0 6px; }
.kern-zeile { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
/* Felder einer Zeile stehen auf einer Linie, Zusatzinformationen darunter (Regel Ronny 28.09. und 08.10.2026): Die Zeile richtet
   oben aus, damit ein Hinweis unter einem Feld dieses Feld nicht nach oben schiebt. Ein Knopf in der Zeile hat keine Beschriftung
   und rückt darum um deren Höhe nach unten (eine Textzeile der Beschriftung plus Abstand des Feldes; 1lh = Zeilenhöhe des Knopfs,
   der dieselbe Schriftgrösse und Zeilenhöhe erbt wie die Beschriftung). Ohne Feld in der Zeile bleibt der Knopf oben. */
.kern-zeile:has(> .kern-feld) > .kern-knopf, .kern-zeile:has(> .kern-feld) > button { margin-top: 27px; margin-top: calc(1lh + 6px); }
.kern-zeile .kern-feld { flex: 1 1 240px; }
.kern-feld select, .kern-feld textarea, .kern-tabelle select { color: var(--kern-text); background: var(--kern-flaeche); font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--kern-rand); border-radius: 8px; min-width: 0; max-width: 100%; }
.kern-feld textarea { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.kern-marke-ok, .kern-marke-warn, .kern-marke-fehler { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.kern-marke-ok { background: var(--kern-ok-hell); color: var(--kern-ok); }
.kern-marke-warn { background: var(--kern-warn-hell); color: var(--kern-warn); }
.kern-marke-fehler { background: var(--kern-fehler-hell); color: var(--kern-gefahr); }
/* Zustandsanzeige (Kern 1.7.0, M03): aus · unbekannt · veraltet · stoerung · ok, Text immer dabei, Farbe nur zusätzlich */
.kern-zustand { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; }
.kern-zustand::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-sizing: border-box; }
.kern-zustand-zeit { font-weight: 400; }
.kern-zustand-ok { background: var(--kern-ok-hell); color: var(--kern-ok); }
.kern-zustand-veraltet, .kern-zustand-unbekannt { background: var(--kern-warn-hell); color: var(--kern-warn); }
.kern-zustand-unbekannt::before { background: transparent; border: 1.5px solid currentColor; }
.kern-zustand-stoerung { background: var(--kern-fehler-hell); color: var(--kern-gefahr); }
.kern-zustand-aus { background: var(--kern-hover); color: var(--kern-leise); }
.kern-zustand-aus::before { background: transparent; border: 1.5px dashed currentColor; }
.kern-tabelle th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--kern-leise); padding: 6px 4px; }
.kern-tabelle td form { display: inline-block; margin-left: 4px; }
/* ───────── Rahmen (UX-STANDARD Abschnitt 2): Menü links 240 ↔ 64 px, unter 860 px Schublade ───────── */
.kern-vh-fokus { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--kern-flaeche); color: var(--kern-text); padding: 8px 12px; border-radius: 8px; }
.kern-vh-fokus:focus { left: 8px; }
.kern-app { --kern-menue-breite: 240px; display: grid; grid-template-columns: var(--kern-menue-breite) minmax(0, 1fr); min-height: 100vh; color: var(--kern-text); }
.kern-sym { width: 20px; height: 20px; flex: 0 0 20px; }
.kern-menue { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; background: var(--kern-menue-bg); border-right: 1px solid var(--kern-rand); }
.kern-menue-kopf { height: 64px; flex: 0 0 64px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--kern-rand); }
.kern-marke { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; overflow: hidden; text-decoration: none; color: var(--kern-text); }
.kern-logo { height: 26px; width: auto; max-width: 160px; display: block; }
.kern-logo-dunkel, .kern-signet { display: none; }
.kern-signet { width: 28px; height: 28px; object-fit: contain; }
.kern-marke-name { font-size: 10px; line-height: 1; font-weight: 700; color: var(--kern-leise); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.kern-menue-kipp, .kern-schublade-knopf, .kern-schublade-zu, .kern-symknopf { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--kern-leise); cursor: pointer; padding: 0; }
.kern-menue-kipp:hover, .kern-schublade-knopf:hover, .kern-schublade-zu:hover, .kern-symknopf:hover { background: var(--kern-hover); color: var(--kern-text); }
.kern-menue-kipp:focus-visible, .kern-schublade-knopf:focus-visible, .kern-schublade-zu:focus-visible, .kern-symknopf:focus-visible, .kern-menue-link:focus-visible, .kern-profil-kreis:focus-visible,
.kern-marke:focus-visible, .kern-profil-link:focus-visible, .kern-pfad a:focus-visible, .kern-sprachwahl button:focus-visible { outline: 2px solid var(--kern-haupt); outline-offset: 1px; }
.kern-schublade-zu { display: none; }
.kern-menue-ungespeichert .kern-menue-kipp { color: var(--kern-warn); }
.kern-sym-aus { display: none; }
.kern-menue-liste { padding: 8px 0; }
.kern-menue-titel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--kern-leise); padding: 14px 20px 4px; white-space: nowrap; }
.kern-menue-link { position: relative; display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: calc(100% - 16px); margin: 1px 8px; padding: 8px 12px; border: 0; border-radius: 8px; background: none;
  color: var(--kern-text); font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none; text-align: left; cursor: pointer; }
/* Farben mit .kern-app davor: a:link, a:visited und a:hover der Anwendung sollen sie nicht überschreiben. */
.kern-app .kern-menue-link, .kern-app .kern-menue-link:visited, .kern-app .kern-profil-link, .kern-app .kern-profil-link:visited { color: var(--kern-text); text-decoration: none; }
.kern-app .kern-menue-link:hover, .kern-app .kern-profil-link:hover { background: var(--kern-hover); color: var(--kern-text); text-decoration: none; }
.kern-app .kern-marke:hover { text-decoration: none; }
.kern-app .kern-menue-link.kern-aktiv { background: color-mix(in srgb, var(--kern-haupt) 12%, transparent); color: var(--kern-haupt); font-weight: 700; }
.kern-app .kern-menue-link.kern-aktiv:hover { background: color-mix(in srgb, var(--kern-haupt) 18%, transparent); color: var(--kern-haupt); }
.kern-app .kern-menue-zurueck { color: var(--kern-leise); font-size: 13px; }
/* Lange Texte brechen auf höchstens zwei Zeilen um, statt neben dem Zähler abgeschnitten zu werden */
.kern-menue-text { flex: 1 1 auto; min-width: 0; overflow: hidden; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.kern-sym-bild { border-radius: 50%; object-fit: contain; }
.kern-menue-modul { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 20px 6px; font-weight: 800; font-size: 14px; }
.kern-modul-bild { width: 26px; height: 26px; flex: 0 0 26px; }
.kern-modul-sym { color: var(--kern-haupt); }
.kern-zahl { font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; background: var(--kern-haupt); color: var(--kern-haupt-text); border-radius: 999px; padding: 3px 7px; }
.kern-menue-unten { margin-top: auto; border-top: 1px solid var(--kern-rand); padding: 8px 0; }
.kern-menue-form { margin: 0; }
.kern-menue-klapp > summary { list-style: none; }
.kern-menue-klapp > summary::-webkit-details-marker { display: none; }
.kern-klapp-pfeil { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .15s; }
.kern-menue-klapp[open] .kern-klapp-pfeil { transform: rotate(180deg); }
.kern-menue-klapp-liste { padding-left: 8px; }
/* Klappbereiche (Kern 1.4.0): Überschrift ist der Knopf, nur ein Bereich offen, zu mit Summe der Zähler */
.kern-bereich-knopf { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: calc(100% - 16px); margin: 2px 8px 0; padding: 10px 12px 6px; border: 0; border-radius: 8px; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.kern-app .kern-bereich-knopf:hover { background: var(--kern-hover); color: var(--kern-text); }
.kern-bereich-knopf:focus-visible { outline: 2px solid var(--kern-haupt); outline-offset: 1px; }
.kern-bereich-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kern-bereich-knopf .kern-zahl { letter-spacing: 0; }
.kern-bereich-offen > .kern-bereich-knopf .kern-zahl { display: none; }
.kern-bereich-offen > .kern-bereich-knopf .kern-klapp-pfeil { transform: rotate(180deg); }
.kern-bereich:not(.kern-bereich-offen) > .kern-bereich-liste { display: none; }
.kern-bereich-offen > .kern-bereich-knopf { color: var(--kern-text); }
.kern-schleier { display: none; }
.kern-haupt { min-width: 0; display: flex; flex-direction: column; background: var(--kern-seite-bg); }
.kern-kopf { position: sticky; top: 0; z-index: 20; height: 64px; flex: 0 0 64px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--kern-kopf-bg); border-bottom: 1px solid var(--kern-rand); }
.kern-schublade-knopf { display: none; }
.kern-kopf-titel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.kern-kopf-titel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kern-kopf-sym { color: var(--kern-haupt); }
.kern-kopf-bild { width: 28px; height: 28px; flex: none; }
.kern-kopf-rechts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.kern-profil { position: relative; }
.kern-profil > summary { list-style: none; }
.kern-profil > summary::-webkit-details-marker { display: none; }
.kern-profil-kreis { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--kern-haupt); color: var(--kern-haupt-text); font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; }
.kern-profil-menue { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 250px; padding: 6px; background: var(--kern-flaeche); color: var(--kern-text); border: 1px solid var(--kern-rand); border-radius: 10px; box-shadow: var(--kern-schatten); }
.kern-profil-name { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--kern-rand); font-weight: 700; font-size: 14px; }
.kern-profil-name small { display: block; font-weight: 400; color: var(--kern-leise); font-size: 12px; margin-top: 2px; }
.kern-profil-menue form { margin: 0; }
.kern-profil-link { display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--kern-text); font: inherit; font-size: 14px; text-decoration: none; text-align: left; cursor: pointer; }
.kern-profil-zeile { padding: 6px 10px; }
.kern-profil-sprache { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.kern-sprachwahl { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.kern-sprachwahl span { color: var(--kern-leise); }
.kern-sprachwahl button { font: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; padding: 2px 7px; border: 1px solid var(--kern-rand); border-radius: 6px; background: var(--kern-flaeche); color: var(--kern-text); cursor: pointer; }
.kern-sprachwahl button.kern-aktiv { background: var(--kern-haupt); border-color: var(--kern-haupt); color: var(--kern-haupt-text); }
.kern-inhalt { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 20px 24px 32px; }
.kern-pfad ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; font-size: 13px; color: var(--kern-leise); }
.kern-pfad li + li::before { content: "\203A"; margin-right: 6px; }
.kern-pfad a { color: var(--kern-leise); text-decoration: none; }
.kern-pfad a:hover { color: var(--kern-text); text-decoration: underline; }
.kern-fusszeile { padding: 10px 24px; font-size: 12px; color: var(--kern-leise); border-top: 1px solid var(--kern-rand); }
@media (min-width: 860px) {
  .kern-eingeklappt { --kern-menue-breite: 64px; }
  .kern-eingeklappt .kern-menue-kopf { justify-content: center; padding: 0; }
  .kern-eingeklappt .kern-marke, .kern-eingeklappt .kern-menue-text, .kern-eingeklappt .kern-klapp-pfeil { display: none; }
  .kern-eingeklappt .kern-sym-ein { display: none; }
  .kern-eingeklappt .kern-sym-aus { display: block; }
  .kern-eingeklappt .kern-menue-titel { font-size: 0; padding: 0; margin: 8px 16px; border-top: 1px solid var(--kern-rand); }
  .kern-eingeklappt .kern-menue-link { justify-content: center; padding: 10px 0; }
  .kern-eingeklappt .kern-zahl { position: absolute; top: 2px; right: 4px; padding: 2px 5px; font-size: 10px; }
  .kern-eingeklappt .kern-menue-klapp-liste { padding-left: 0; }
  .kern-eingeklappt .kern-menue-modul { justify-content: center; padding: 10px 0; }
  /* Eingeklappt: alle Symbole sichtbar, die Überschrift bleibt nur Trennlinie */
  .kern-eingeklappt .kern-bereich > .kern-bereich-liste { display: block; }
  .kern-eingeklappt .kern-bereich-knopf { width: auto; padding: 0; border-radius: 0; pointer-events: none; }
  .kern-eingeklappt .kern-bereich-knopf .kern-zahl, .kern-eingeklappt .kern-bereich-knopf .kern-klapp-pfeil { display: none; }
  /* Mit Signet: Bildmarke oben, darunter der Knopf zum Ausklappen */
  .kern-eingeklappt .kern-menue-kopf:has(.kern-signet) { flex-direction: column; height: auto; flex-basis: auto; padding: 18px 0 8px; gap: 8px; border-bottom: 0; }
  .kern-eingeklappt .kern-marke:has(.kern-signet) { display: flex; align-items: center; }
  .kern-eingeklappt .kern-marke:has(.kern-signet) > :not(.kern-signet) { display: none; }
  .kern-eingeklappt .kern-signet { display: block; }
}
@media (max-width: 859.98px) {
  .kern-app { grid-template-columns: minmax(0, 1fr); }
  .kern-menue { position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 85vw); height: auto; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; visibility: hidden; }
  .kern-schublade-offen .kern-menue { transform: none; box-shadow: var(--kern-schatten); visibility: visible; }
  .kern-schublade-offen .kern-schleier { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .35); }
  .kern-menue-kipp { display: none; }
  .kern-schublade-zu { display: inline-grid; }
  .kern-schublade-knopf { display: inline-grid; margin-left: -8px; }
  .kern-kopf { padding: 0 16px; }
  .kern-inhalt { padding: 16px 16px 28px; }
  .kern-fusszeile { padding: 10px 16px; }
}
/* Handy: Kopftitel darf zweizeilig werden statt abzuschneiden, rechts wird es enger */
@media (max-width: 520px) {
  .kern-kopf { height: auto; min-height: 64px; flex: 0 0 auto; gap: 8px; padding: 6px 12px; }
  .kern-kopf-titel { font-size: 15px; gap: 8px; }
  .kern-kopf-titel span { white-space: normal; overflow: hidden; overflow-wrap: break-word; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .kern-kopf-rechts { gap: 6px; min-width: 0; }
  .kern-profil-kreis { width: 34px; height: 34px; }
  .kern-profil-menue { min-width: min(250px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) { .kern-menue, .kern-klapp-pfeil { transition: none; } }
@media print { .kern-app { display: block; } .kern-menue, .kern-kopf, .kern-schleier, .kern-fusszeile, .kern-vh-fokus { display: none !important; } .kern-haupt { background: none; } .kern-inhalt { padding: 0; } }
@media (max-width: 520px) { .kern-karte { padding: 18px; border-radius: 0; border-left: 0; border-right: 0; } .kern-codes { columns: 1; } }
@media print { .kern-formular, .kern-link { display: none; } .kern-karte { border: 0; } }
/* ───────── Buchhaltung ONE Start (buchhaltung_seiten.php, 26.09.2026): Statuschips nach UX-STANDARD 7, Positionen, Prüfhinweise ───────── */
.kern-bh { display: flex; flex-direction: column; gap: 14px; color: var(--kern-text); }
.kern-bh h2 { font-size: 20px; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kern-bh h3 { font-size: 15px; margin: 0 0 8px; }
.kern-bh-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, currentColor 12%, transparent); }
.kern-bh-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kern-bh-chip-grau { color: var(--kern-leise); }
.kern-bh-chip-blau { color: var(--kern-status-bereit); }
.kern-bh-chip-gruen { color: var(--kern-ok); }
.kern-bh-chip-rot { color: var(--kern-gefahr); }
.kern-bh-chip-orange { color: var(--kern-warn); }
.kern-bh-chip-lila { color: var(--kern-status-neu); }
.kern-bh-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kern-bh-leiste { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kern-bh-leiste form { margin: 0; }
.kern-bh-leiste .kern-knopf, .kern-bh-fuss .kern-knopf, .kern-bh-neu .kern-knopf { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.kern-bh-leiste .kern-sym, .kern-bh-fuss .kern-sym, .kern-bh-neu .kern-sym { width: 18px; height: 18px; flex-basis: 18px; }
.kern-bh-neu { margin-top: 0; align-items: flex-start; }
.kern-bh-werkzeug { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.kern-bh-sichten { display: flex; gap: 4px; flex-wrap: wrap; }
.kern-bh-sichten a { padding: 5px 12px; border-radius: 999px; color: var(--kern-text); text-decoration: none; border: 1px solid var(--kern-rand); font-size: 13px; }
.kern-bh-sichten a.kern-aktiv { background: var(--kern-haupt); border-color: var(--kern-haupt); color: var(--kern-haupt-text); }
.kern-bh-suche { display: flex; gap: 6px; }
.kern-bh-suche input { font: inherit; padding: 6px 10px; border: 1px solid var(--kern-rand); border-radius: 8px; background: var(--kern-flaeche); color: var(--kern-text); }
.kern-bh-rollbar, .kern-rollbar { overflow-x: auto; max-width: 100%; }
.kern-bh-liste td, .kern-bh-pos td { white-space: nowrap; }
.kern-bh-liste td:nth-child(5) { white-space: normal; }
.kern-bh-pos input, .kern-bh-pos select { font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--kern-rand); border-radius: 6px; background: var(--kern-flaeche); color: var(--kern-text); }
/* Positionen (11.10.2026): Felder füllen ihre Spalte, die Tabelle passt bei 1280 Pixel ganz in die Gruppe; darunter rollt sie in .kern-bh-rollbar */
.kern-bh-pos input, .kern-bh-pos select { width: 100%; box-sizing: border-box; }
.kern-bh-pos th:nth-child(2) { width: 30%; }
.kern-bh-in-text { min-width: 13em; }
.kern-bh-in-zahl { min-width: 5em; text-align: right; }
.kern-bh-in-kurz { min-width: 4em; }
.kern-bh-in-konto { min-width: 7em; }
/* Unsichere Felder der Belegerkennung (leer oder Vorschlag der KI), bis «Geprüft» angekreuzt ist (07.10.2026); die rote Fehlermarke unten geht vor */
.kern-feld.kern-bh-pruefen { color: var(--kern-warn); }
.kern-feld.kern-bh-pruefen input, .kern-feld.kern-bh-pruefen select, .kern-bh-pos input.kern-bh-pruefen { border-color: var(--kern-warn); background: var(--kern-warn-hell); }
.kern-bh-kopfdaten { align-items: start; }
/* Feste Breiten: sonst läuft der Speichern-Knopf in die Spalte «Zahlung» */
.kern-bh-bezahlt { display: inline-flex; flex-wrap: nowrap; gap: 6px; align-items: center; min-width: 222px; }
.kern-bh-bezahlt .kern-knopf { flex: 0 0 auto; margin: 0; }
.kern-bh-bezahlt input[type="date"] { flex: 0 0 176px; width: 176px; min-width: 0; box-sizing: border-box; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--kern-rand); border-radius: 6px; background: var(--kern-flaeche); color: var(--kern-text); }
/* Positionen (07.10.2026): die Gruppe ist kein Raster, sonst wird die Tabelle in eine Spalte gequetscht und Betrag, Konto und MWST sind nicht erreichbar */
.kern-bh-pos-gruppe { display: block; }
.kern-bh-pos-gruppe > * + * { margin-top: 10px; }
.kern-bh-pos { width: 100%; }
.kern-bh-kopfdaten .kern-feld { white-space: nowrap; }
.kern-bh-kopfdaten .kern-feld small { white-space: normal; }
.kern-bh-fehlt, .kern-feld.kern-bh-fehlt input, .kern-feld.kern-bh-fehlt select { border-color: var(--kern-gefahr) !important; outline: 1px solid var(--kern-gefahr); }
.kern-feld.kern-bh-fehlt { color: var(--kern-gefahr); outline: 0; }
.kern-bh-pruef ul { margin: 6px 0 0; padding-left: 18px; }
.kern-bh-pruef a { color: inherit; }
.kern-bh-summen { max-width: 360px; margin-left: auto; }
/* Lohn und Stunden (Kern 1.20.0, 21.10.2026): drei Wege nebeneinander, Zahlweg in der Liste neben dem Datum */
.kern-bh-lohn-wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; align-items: stretch; }
.kern-bh-lohn-weg { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--kern-rand); border-radius: 10px; }
.kern-bh-lohn-weg h4 { margin: 0; font-size: 14px; }
.kern-bh-lohn-weg .kern-knopf { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.kern-bh-lohn-weg .kern-sym, .kern-bh-blatt .kern-sym { width: 18px; height: 18px; flex-basis: 18px; }
.kern-bh-lohn-weg input[type="file"] { max-width: 100%; }
.kern-bh-blatt { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.kern-bh-blatt .kern-feld { flex: 1 1 260px; margin: 0; }
.kern-bh-blatt-hinweis { flex: 1 0 100%; margin: 0; }
.kern-bh-blatt .kern-knopf { display: inline-flex; align-items: center; gap: 6px; }
.kern-bh-stunden td { vertical-align: top; }
.kern-bh-stunden td:nth-child(-n+4) { white-space: nowrap; }
.kern-bh-stunden tfoot td { border-top: 2px solid var(--kern-rand); }
.kern-bh-abzuege input, .kern-bh-abzuege select { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--kern-rand); border-radius: 6px; background: var(--kern-flaeche); color: var(--kern-text); }
.kern-bh-abzuege th:first-child { width: 45%; }
.kern-bh-neuperson summary { cursor: pointer; font-weight: 600; margin: 2px 0 8px; }
.kern-bh-neuperson .kern-raster { margin-top: 4px; }
.kern-bh-lohn-total { margin: 0; font-weight: 700; text-align: right; }
.kern-bh-bezahlt select { flex: 0 0 auto; max-width: 140px; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--kern-rand); border-radius: 6px; background: var(--kern-flaeche); color: var(--kern-text); }
.kern-bh-breit { grid-column: 1 / -1; }
.kern-bh-verlauf summary { cursor: pointer; font-weight: 600; }
.kern-bh-leer { padding: 18px; border: 1px dashed var(--kern-rand); border-radius: var(--kern-radius); }
.kern-bh fieldset[disabled] { opacity: .92; }
/* Export für ONE Start (CSV-Läufe, Rückmeldung, Anleitung; 27.09.2026) */
.kern-bh-lauf { border-top: 1px solid var(--kern-rand); padding-top: 12px; margin-top: 12px; }
.kern-bh-lauf:first-of-type { border-top: 0; margin-top: 0; }
.kern-bh-lauf h4, .kern-bh-rm h4 { margin: 0 0 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kern-bh-lauf .kern-bh-ord, .kern-bh-hash { white-space: nowrap; }
.kern-bh-lauf .kern-bh-datei { overflow-wrap: anywhere; min-width: 11em; }
.kern-bh-hash { font-size: 12px; }
.kern-bh .kern-knopf[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 520px) { .kern-bh-mobil-weg { display: none; } }
.kern-bh-zurueck { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kern-bh-zurueck .kern-haken { margin: 0; }
.kern-bh-rm { margin-top: 14px; }
.kern-bh-hilfe summary, .kern-bh-spalten summary { cursor: pointer; font-weight: 600; }
.kern-bh-hilfe ol { padding-left: 20px; }
.kern-bh-hilfe li { margin: 4px 0; }
.kern-bh-spalten { margin: 8px 0; }
.kern-bh-fuss small { flex-basis: 100%; }

/* ───────── Anmeldeseiten aus einem Guss (Kern 1.9.0, 03.10.2026; node/kern/anmeldeseite.js) ─────────
   Vorlage Prototyp: heller Grund, Logo über der Karte, Microsoft-Knopf oben, Passwort aufklappbar.
   Alles unter body.kern-anmeldeseite, damit globale Regeln der Anwendung (label, input, h1, main) nicht greifen. */
body.kern-anmeldeseite { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--kern-seite-bg); color: var(--kern-text); font-family: var(--kern-schrift); font-size: 15px; line-height: 1.5; }
.kern-anmeldeseite .kern-anmelde-spalte { flex: 1 0 auto; box-sizing: border-box; width: 100%; max-width: 420px; margin: 0 auto; padding: 56px 16px 24px; }
.kern-anmeldeseite .kern-anmelde-logo { display: flex; justify-content: center; align-items: center; margin: 0 0 22px; min-height: 34px; }
.kern-anmeldeseite .kern-anmelde-logo img { height: 34px; width: auto; max-width: 240px; display: block; }
.kern-anmeldeseite .kern-anmelde-wortmarke { font-family: var(--kern-titel-schrift); font-weight: var(--kern-titel-gewicht); font-size: 28px; letter-spacing: .02em; text-transform: uppercase; color: var(--kern-haupt); line-height: 1; }
.kern-anmeldeseite .kern-anmelde-wortmarke b { color: var(--kern-akzent); font-weight: inherit; }
.kern-anmeldeseite .kern-anmeldekarte { max-width: none; margin: 0; padding: 26px 24px 22px; border-radius: 16px; box-shadow: 0 6px 20px rgba(20, 16, 40, .06); }
.kern-anmeldeseite .kern-anmeldekarte h1 { font-family: var(--kern-schrift); font-size: 20px; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--kern-text); margin: 0 0 6px; }
.kern-anmeldeseite .kern-anmeldekarte p { margin: 0 0 12px; }
.kern-anmeldeseite .kern-anmelde-unter { margin: 0 0 18px; font-size: 14px; }
.kern-anmeldeseite .kern-formular { gap: 12px; margin: 12px 0 0; }
.kern-anmeldeseite .kern-formular + p { margin-top: 14px; }
.kern-anmeldeseite .kern-feld { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--kern-text); }
.kern-anmeldeseite .kern-feld input { box-sizing: border-box; width: 100%; min-height: 42px; margin: 0; padding: 9px 12px; font: inherit; font-size: 15px; font-weight: 400; color: var(--kern-text); background: var(--kern-flaeche); border: 1px solid var(--kern-rand); border-radius: 10px; }
.kern-anmeldeseite .kern-feld input:focus { outline: 2px solid var(--kern-haupt); outline-offset: 1px; border-color: var(--kern-haupt); }
.kern-anmeldeseite .kern-code { font-family: ui-monospace, Consolas, monospace; font-size: 22px !important; letter-spacing: .2em; text-align: center; }
.kern-anmeldeseite .kern-haken { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 2px 0; font-size: 14px; font-weight: 500; color: var(--kern-text); }
.kern-anmeldeseite .kern-haken input { width: 18px !important; height: 18px; margin: 0 !important; flex: 0 0 auto; accent-color: var(--kern-haupt); }
.kern-anmeldeseite .kern-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 40px; margin: 0; padding: 9px 16px; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; text-transform: none; letter-spacing: 0; border-radius: 10px; cursor: pointer; }
.kern-anmeldeseite a.kern-knopf:hover { text-decoration: none; }
.kern-anmeldeseite .kern-knopf-voll { display: flex; width: 100%; }
.kern-anmeldeseite .kern-knopf:not(.kern-knopf-haupt) { background: var(--kern-flaeche); border: 1px solid var(--kern-rand); color: var(--kern-text); }
.kern-anmeldeseite .kern-knopf-haupt, .kern-anmeldeseite a.kern-knopf-haupt:visited { background: var(--kern-haupt); border: 1px solid var(--kern-haupt); color: var(--kern-haupt-text); }
.kern-anmeldeseite .kern-knopf:focus-visible, .kern-anmeldeseite .kern-link:focus-visible, .kern-anmeldeseite summary:focus-visible { outline: 2px solid var(--kern-haupt); outline-offset: 2px; }
.kern-anmeldeseite .kern-knopf-ms { min-height: 48px; }
.kern-anmeldeseite .kern-ms-zeichen { width: 18px; height: 18px; flex: 0 0 18px; }
.kern-anmeldeseite .kern-anmelde-weitere { margin: 22px 0 0; }
.kern-anmeldeseite .kern-anmelde-weitere > summary { display: list-item; list-style: disclosure-closed inside; cursor: pointer; font-size: 13px; color: var(--kern-leise); }
.kern-anmeldeseite .kern-anmelde-weitere[open] > summary { list-style-type: disclosure-open; }
.kern-anmeldeseite .kern-anmelde-weitere > summary:hover { color: var(--kern-text); }
.kern-anmeldeseite .kern-anmelde-weitere > p { margin: 8px 0 0; font-size: 13px; }
.kern-anmeldeseite .kern-anmelde-link { margin: 14px 0 0; text-align: center; font-size: 14px; }
.kern-anmeldeseite .kern-link, .kern-anmeldeseite .kern-sprachen a, .kern-anmeldeseite .kern-anmelde-kontakt a { color: var(--kern-haupt); text-decoration: none; }
.kern-anmeldeseite .kern-link:hover, .kern-anmeldeseite .kern-sprachen a:hover { text-decoration: underline; }
:root[data-marke="lw"] .kern-anmeldeseite .kern-link, :root[data-marke="lw"] .kern-anmeldeseite .kern-sprachen a { color: #17789a; }
/* Kern 1.10.0 (php/kern/anmeldeseite.php): «Abbrechen» als POST-Formular sieht aus wie der Link, Wortmarke mit Zusatzzeile (Portal) */
.kern-anmeldeseite form.kern-anmelde-link { margin: 14px 0 0; }
.kern-anmeldeseite .kern-knopf-link { display: inline; min-height: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: inherit; font-weight: 400; cursor: pointer; }
.kern-anmeldeseite .kern-knopf-link:hover { text-decoration: underline; }
.kern-anmeldeseite .kern-anmelde-logo { flex-direction: column; gap: 6px; }
.kern-anmeldeseite .kern-qr img { display: block; width: 100%; height: auto; }
.kern-anmeldeseite .kern-anmelde-zusatz { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kern-leise); line-height: 1; }
.kern-anmeldeseite .kern-anmelde-trenner { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; font-size: 12px; color: var(--kern-leise); }
.kern-anmeldeseite .kern-anmelde-trenner::before, .kern-anmeldeseite .kern-anmelde-trenner::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--kern-rand); }
.kern-anmeldeseite .kern-mitte { text-align: center; }
.kern-anmeldeseite .kern-sprachen { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--kern-leise); }
.kern-anmeldeseite .kern-sprachen strong { color: var(--kern-text); font-weight: 600; }
.kern-anmeldeseite .kern-meldung { margin: 0 0 14px; }
.kern-anmeldeseite .kern-meldung-info { color: var(--kern-status-bereit); border-color: currentColor; background: color-mix(in srgb, currentColor 8%, #fff); }
.kern-anmeldeseite .kern-feldhinweis { margin: -4px 0 0; }
.kern-anmeldeseite .kern-schritte { margin: 12px 0; padding-left: 20px; }
.kern-anmeldeseite .kern-qr { width: 200px; max-width: 100%; box-sizing: border-box; margin: 10px 0; border: 1px solid var(--kern-rand); }
.kern-anmeldeseite .kern-schluessel { display: inline-block; margin: 6px 0; padding: 6px 10px; font-size: 16px; letter-spacing: .08em; background: var(--kern-flaeche); border: 1px solid var(--kern-rand); border-radius: 8px; }
.kern-anmeldeseite .kern-codes { margin: 12px 0; padding-left: 22px; column-gap: 28px; }
.kern-anmeldeseite .kern-codes code { background: none; padding: 0; font-size: 16px; }
.kern-anmeldeseite .kern-fuss { margin-top: 4px; }
.kern-anmeldeseite .kern-anmelde-kontakt { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--kern-leise); }
.kern-anmeldeseite .kern-anmelde-fuss { flex: 0 0 auto; padding: 14px 16px 18px; text-align: center; font-size: 12px; color: var(--kern-leise); }
.kern-anmeldeseite .kern-anmelde-fuss a { color: inherit; }
.kern-anmeldeseite .kern-anmelde-mandant { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; }
.kern-anmeldeseite .kern-anmelde-mandant form { margin: 0; }
.kern-anmeldeseite .kern-anmelde-mandant .kern-knopf { flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
.kern-anmeldeseite .kern-anmelde-mandant .kern-knopf small { font-weight: 400; font-size: 12.5px; color: var(--kern-leise); }
@media (max-width: 520px) {
  .kern-anmeldeseite .kern-anmelde-spalte { padding: 28px 12px 16px; }
  .kern-anmeldeseite .kern-anmeldekarte { padding: 20px 16px 18px; border-radius: 14px; border-left: 1px solid var(--kern-rand); border-right: 1px solid var(--kern-rand); }
  .kern-anmeldeseite .kern-codes { columns: 1; }
}
@media print { .kern-anmeldeseite .kern-anmelde-fuss, .kern-anmeldeseite .kern-sprachen, .kern-anmeldeseite .kern-formular { display: none; } }

/* ───────── Kunde ▾ Mandant ▾ oben rechts (Kern 1.9.0, rahmen.js kontextWahl, Vorlage Prototyp) ───────── */
.kern-kontext { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 0; }
.kern-kontext form { margin: 0; display: flex; }
.kern-kontext-feld { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--kern-leise); }
.kern-kontext-titel { white-space: nowrap; }
@media (max-width: 1440px) { .kern-kontext-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.kern-kontext-select { box-sizing: border-box; height: 36px; max-width: 15rem; margin: 0; padding: 0 30px 0 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--kern-text);
  background: var(--kern-flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6780' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--kern-rand); border-radius: 8px; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.kern-kontext-select:focus-visible { outline: 2px solid var(--kern-haupt); outline-offset: 1px; }
.kern-kontext-select[disabled] { opacity: 1; cursor: default; color: var(--kern-text); background-image: none; padding-right: 12px; }
.kern-kontext-knopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kern-kontext-knopf:focus { position: static; width: auto; height: auto; clip: auto; }
@media (max-width: 1180px) { .kern-kontext-select { max-width: 11rem; } }
@media (max-width: 859.98px) { .kern-kopf:has(.kern-kontext) { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
  .kern-kopf:has(.kern-kontext) .kern-kopf-rechts { display: contents; }
  .kern-kopf .kern-kontext { order: 9; flex: 1 0 100%; gap: 8px; }
  .kern-kontext > form, .kern-kontext > .kern-kontext-feld { flex: 1 1 0; min-width: 0; }
  .kern-kontext .kern-kontext-feld { width: 100%; }
  .kern-kontext-select { max-width: none; width: 100%; } }

/* Rückfrage-Fenster (kern.js rueckfrage, 01.10.2026) */
.kern-dialog { color: var(--kern-text); background: var(--kern-flaeche); border: 1px solid var(--kern-rand); border-radius: var(--kern-radius); box-shadow: var(--kern-schatten); padding: 24px; width: min(440px, calc(100vw - 32px)); box-sizing: border-box; }
.kern-dialog::backdrop { background: rgba(20, 16, 40, .45); }
.kern-dialog-text { margin: 0 0 20px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.kern-dialog-fuss { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
/* Kern 1.12.0: Fenster für einen Wert, der nur einmal sichtbar ist (kern.js einmal(), Kennzeichen data-kern-einmal) */
.kern-dialog-einmal { width: min(600px, calc(100vw - 32px)); overflow-x: hidden; font-family: var(--kern-schrift, inherit); }
.kern-dialog-titel { margin: 0 0 8px; font-size: 20px; line-height: 1.3; font-weight: 700; }
.kern-dialog-hinweis { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--kern-leise); }
.kern-einmal-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; margin: 0 0 16px; }
.kern-einmal-name { grid-column: 1 / -1; font-size: 14px; font-weight: 600; }
.kern-einmal-wert { box-sizing: border-box; width: 100%; min-height: 42px; margin: 0; padding: 10px 12px; resize: none; overflow: hidden; font-family: ui-monospace, Consolas, monospace; font-size: 15px; line-height: 1.4; word-break: break-all; color: var(--kern-text); background: var(--kern-ok-hell, var(--kern-flaeche)); border: 1px solid var(--kern-rand); border-radius: 8px; }
.kern-einmal-wert:focus { outline: 2px solid var(--kern-haupt); outline-offset: 1px; }
@media (max-width: 480px) { .kern-einmal-zeile { grid-template-columns: 1fr; } }
.kern-anbieter { margin: 0 0 14px; }
.kern-anbieter legend .kern-marke-ok, .kern-anbieter legend .kern-marke-warn { margin-left: 6px; font-weight: 600; }
.kern-anbieter-knoepfe { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
/* Interne Notiz je Beleg (Kern 1.14.0, 10.10.2026): Zeichen in der Liste, Notizfeld in normaler Schrift */
.kern-bh-notiz { display: inline-flex; vertical-align: middle; color: var(--kern-warn); cursor: help; }
.kern-bh-notiz .kern-sym { width: 15px; height: 15px; }
.kern-bh #notiz textarea, .kern-inv .kern-feld textarea { font-family: inherit; font-size: 14px; }
/* Geräte und Software (inventar.php, Kern 1.14.0, 10.10.2026): Reiter Bestand und Verlauf, Filterzeile oben ausgerichtet, Angaben als Liste */
.kern-inv-reiter { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--kern-rand); }
.kern-inv-reiter a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; margin-bottom: -1px; color: var(--kern-leise); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.kern-inv-reiter a:hover { color: var(--kern-text); }
.kern-inv-reiter a.kern-aktiv { color: var(--kern-haupt); border-bottom-color: var(--kern-haupt); }
.kern-inv-reiter .kern-sym, .kern-inv .kern-knopf .kern-sym { width: 18px; height: 18px; flex: 0 0 18px; }
.kern-inv .kern-knopf { display: inline-flex; align-items: center; gap: 6px; }
.kern-inv-filter { margin-top: 0; }
.kern-inv-filter .kern-feld { flex: 1 1 180px; max-width: 320px; }
.kern-inv-breit { grid-column: 1 / -1; }
.kern-inv .kern-raster { align-items: start; }
.kern-inv .kern-karte > h3:first-child { margin-top: 0; }
.kern-inv .kern-karte h4 { font-size: 14px; margin: 18px 0 0; }
.kern-inv-kopf h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 18px; }
.kern-inv-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; margin: 0; }
.kern-inv-daten dt { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--kern-leise); }
.kern-inv-daten dd { margin: 2px 0 0; }
.kern-inv-liste td, .kern-inv-verlauf td { vertical-align: top; }
.kern-inv-liste td:nth-child(n+2), .kern-inv-verlauf td:first-child { white-space: nowrap; }
.kern-inv-text { white-space: normal; overflow-wrap: anywhere; min-width: 16em; }
.kern-inv-neu > summary { cursor: pointer; font-weight: 600; }
.kern-inv-neu[open] > summary { margin-bottom: 4px; }
.kern-inv-weg { margin: 0; }
.kern-inv .kern-feldhinweis { color: var(--kern-gefahr); font-weight: 400; font-size: 13px; }
.kern-inv tfoot td { border-top: 2px solid var(--kern-rand); padding: 8px 4px; }
.kern-inv .kern-feld input:not([type="file"]), .kern-inv .kern-feld select { box-sizing: border-box; height: 43px; }

/* Marketing: Kontakte, Listen, Segmente (Kern 1.21.0, 24.10.2026) */
.kern-mkt .kern-zeile { display: flex; gap: 14px; }
.kern-mkt .kern-feld small { font-weight: 400; }
.kern-mkt .kern-feld-fehler input, .kern-mkt .kern-feld-fehler select, .kern-mkt .kern-feld-fehler textarea { border-color: var(--kern-gefahr); }
.kern-mkt .kern-feld-meldung { color: var(--kern-gefahr); font-weight: 500; }
.kern-mkt-filter .kern-feld { flex: 1 1 180px; max-width: 320px; }
.kern-mkt-listen { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.kern-mkt-listen legend { padding: 0; margin-bottom: 6px; }
.kern-mkt-ergebnis ul { margin: 0; padding-left: 20px; }/* Kampagnen (Kern 1.21.0, 24.10.2026) */
/* Felder einer Zeile oben bündig (Hinweise darunter verschieben nichts); Knöpfe neben Feldern auf Höhe der Eingabe */
.kern-mkt .kern-zeile { flex-wrap: wrap; align-items: flex-start; }
.kern-mkt .kern-zeile > .kern-feld ~ .kern-knopf, .kern-mkt .kern-zeile > .kern-feld ~ button { margin-top: 26px; }
.kern-mkt .kern-zeile > .kern-feld { flex: 1 1 200px; }
.kern-mkt .kern-inline { display: inline-block; margin: 0; }
.kern-mkt .kern-r { text-align: right; }
.kern-mkt .kern-nw { white-space: nowrap; }
.kern-mkt-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kern-mkt-zahl { border: 1px solid var(--kern-rand); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.kern-mkt-zahl span { font-size: 13px; color: var(--kern-leise); }
.kern-mkt-zahl b { font-size: 18px; }
.kern-mkt-vorschau { width: 100%; height: 640px; border: 1px solid var(--kern-rand); border-radius: 8px; background: #eef2f5; }
.kern-mkt-block { max-width: none; margin: 0 0 12px 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.kern-mkt-block legend { font-weight: 700; padding: 0 6px; }
.kern-mkt-block textarea { width: 100%; }
.kern-mkt-bild { display: block; max-width: 260px; height: auto; margin-bottom: 8px; border: 1px solid var(--kern-rand); }
.kern-mkt-url { word-break: break-all; }
@media (max-width: 640px) { .kern-mkt .kern-zeile { flex-direction: column; align-items: stretch; } .kern-mkt-vorschau { height: 480px; } }
/* Untereinander gilt die Grundbreite der Felder sonst als Höhe (200 px hohe Felder, Knopf weit unten); 25.10.2026 */
@media (max-width: 640px) { .kern-mkt .kern-zeile > .kern-feld, .kern-mkt .kern-mkt-filter .kern-feld, .kern-mkt .kern-zeile > [data-kern-zeige-bei] { flex: 0 0 auto; max-width: none; }
  .kern-mkt .kern-zeile > .kern-feld ~ .kern-knopf, .kern-mkt .kern-zeile > .kern-feld ~ button { margin-top: 0; align-self: flex-start; } }
.kern-mkt .kern-zeile > [data-kern-zeige-bei] { flex: 1 1 200px; display: block; }
.kern-mkt [data-kern-zeige-bei] > .kern-feld { width: 100%; }
.kern-mkt [data-kern-zeige-bei][hidden] { display: none; }
/* Formular-Editor (25.10.2026): Häkchen «Pflicht» und Knöpfe auf der Mitte des Eingabefelds, nicht auf der Beschriftung */
.kern-frm-feldzeile > .kern-haken, .kern-frm-feldzeile > button { align-self: flex-start; margin-top: calc(1lh + 6px); }
.kern-frm-feldzeile > .kern-haken { min-height: 43px; }
.kern-zeile.kern-frm-feldzeile:has(> .kern-feld) > button, .kern-mkt .kern-zeile.kern-frm-feldzeile > .kern-feld ~ button { margin-top: calc(1lh + 6px + 7.5px); }
/* Deals und Pipeline (Kern 1.21.0, Etappe 5, 25.10.2026) */
.kern-dl .kern-karte { max-width: none; }
.kern-dl-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.kern-dl-zwei > section, .kern-dl-zwei > div > section { margin: 0 0 16px; }
.kern-dl-neg { color: var(--kern-gefahr); }
.kern-dl-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.kern-dl-filter { align-items: flex-end; margin: 4px 0 12px; }
.kern-dl-filter .kern-feld { flex: 0 1 200px; }
.kern-dl-ansicht { display: flex; gap: 6px; margin-left: auto; }
.kern-dl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 16px; }
.kern-dl-spalte { background: color-mix(in srgb, var(--kern-rand) 35%, transparent); border: 1px solid var(--kern-rand); border-radius: var(--kern-radius); padding: 8px; min-height: 140px; }
.kern-dl-spalte-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 4px 8px; }
.kern-dl-karte { display: block; background: var(--kern-flaeche); border: 1px solid var(--kern-rand); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; text-decoration: none; color: var(--kern-text); }
.kern-dl-karte:hover { border-color: var(--kern-haupt); }
.kern-dl-karte small { display: block; color: var(--kern-leise); font-size: 12px; margin-top: 2px; }
.kern-dl-karte.kern-dl-ueberfaellig { border-left: 3px solid var(--kern-gefahr); }
.kern-dl-karte[draggable=true] { cursor: grab; }
.kern-dl-zieht { opacity: .45; } .kern-dl-wartet { opacity: .6; pointer-events: none; }
.kern-dl-ziel { border-color: var(--kern-haupt); box-shadow: inset 0 0 0 2px var(--kern-haupt); }
.kern-dl-erledigt td { color: var(--kern-leise); text-decoration: line-through; }
.kern-dl-erledigt td:last-child { text-decoration: none; }
.kern-dl details > summary { cursor: pointer; list-style: revert; }
@media (hover: none) { .kern-dl-hinweis { display: none; } }
@media (max-width: 860px) { .kern-dl-board { grid-auto-columns: minmax(78vw, 1fr); } .kern-dl-zwei { grid-template-columns: 1fr; } .kern-dl-ansicht { margin-left: 0; } }
/* Meetings (Kern 1.21.0, Etappe 5) */
.kern-mt .kern-karte { max-width: none; }
.kern-mt-fenster { border: 0; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 14px; }
.kern-mt-fenster legend { font-weight: 600; margin: 0 0 8px; }
.kern-mt .kern-tabelle td form input[type=text] { width: 140px; padding: 4px 8px; margin-right: 4px; }
/* Website-Chat im Management (Kern 1.21.0, Etappe 5) */
.kern-ch-admin .kern-karte { max-width: none; }
.kern-ch-admin-verlauf { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.kern-ch-admin-verlauf li { max-width: 80%; padding: 8px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
.kern-ch-admin-verlauf li span { white-space: pre-wrap; overflow-wrap: anywhere; }
.kern-ch-admin-verlauf small { font-size: 12px; color: var(--kern-leise); }
.kern-ch-admin-verlauf .kern-ch-besuch { align-self: flex-start; background: color-mix(in srgb, var(--kern-rand) 45%, transparent); }
.kern-ch-admin-verlauf .kern-ch-team { align-self: flex-end; background: color-mix(in srgb, var(--kern-haupt) 12%, transparent); }
.kern-dl-filter .kern-dl-ansicht { align-self: flex-start; margin-top: calc(1lh + 6px); }   /* gleiche Höhe wie «Filtern» und die Felder */
pre.kern-mkt-url { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }   /* Codes zum Einbinden (Formulare, Meetings, Chat) brechen um statt die Seite zu verbreitern */
/* Kampagnen: Kalender, Medienablage (Ergänzung nach dem REA-Abgleich mit Brevo, 25.10.2026) */
.kern-kmp-kal-kopf { align-items: center; gap: 10px; margin: 4px 0 8px; }
.kern-kmp-kal-kopf h2 { margin: 0; min-width: 11ch; text-align: center; }
.kern-kmp-kalender { table-layout: fixed; width: 100%; min-width: 700px; }
.kern-kmp-kalender td { vertical-align: top; height: 92px; padding: 6px; border: 1px solid var(--kern-rand); }
.kern-kmp-kal-leer { background: color-mix(in srgb, var(--kern-rand) 25%, transparent); }
.kern-kmp-kal-tag { display: block; font-size: 13px; color: var(--kern-leise); margin-bottom: 4px; }
.kern-kmp-kal-wtag { display: none; }
.kern-kmp-kal-heute .kern-kmp-kal-tag { color: var(--kern-haupt); font-weight: 700; }
.kern-kmp-kal-heute { box-shadow: inset 0 0 0 2px var(--kern-haupt); }
.kern-kmp-kal-eintrag { display: block; font-size: 13px; line-height: 1.35; margin-bottom: 6px; color: var(--kern-text); text-decoration: none; overflow-wrap: anywhere; }
.kern-kmp-kal-eintrag:hover { text-decoration: underline; }
.kern-kmp-kal-eintrag .kern-status { font-size: 11px; }
.kern-kmp-medien { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kern-kmp-medium { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kern-kmp-medium img { width: 100%; height: 150px; object-fit: contain; background: color-mix(in srgb, var(--kern-rand) 30%, transparent); border-radius: 6px; }
.kern-kmp-medium p { margin: 0; overflow-wrap: anywhere; }
.kern-kmp-medium .kern-feld input { width: 100%; }
.kern-kmp-medium details > summary { cursor: pointer; }
@media (max-width: 640px) {
  .kern-kmp-kalender, .kern-kmp-kalender tbody, .kern-kmp-kalender tr { display: block; min-width: 0; }
  .kern-kmp-kalender td { display: block; height: auto; border-width: 0 0 1px; }
  .kern-kmp-kalender thead, .kern-kmp-kalender td.kern-kmp-kal-leer, .kern-kmp-kalender td.kern-kmp-kal-ohne { display: none; }   /* auf dem Handy nur Tage mit Kampagnen */
  .kern-kmp-kal-wtag { display: inline; }
  .kern-mkt .kern-zeile.kern-kmp-kal-kopf { flex-direction: row; align-items: center; }
}