/*
 * CUMODIS Adminbereich – Design-Grundlagen und Komponenten (PLAN.md 3.8 / 3.10 / 3.14).
 * Richtung laut docs/design/: dunkle Navy-Kopfleiste, Petrol als Primärfarbe, Cyan als Akzent,
 * weiße Karten auf hellem Blaugrau, viel Weißraum. Mobile-first, max. 1.600 px Arbeitsbreite.
 * Keine Inline-Styles in Templates (Content-Security-Policy) – alles steht hier.
 */

/* ---------- Schrift ---------- */
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Design-Grundlagen ---------- */
:root {
    /*
     * Die 12 Grundfarben. Standardwerte – eigene Werte stellt man in der Komponenten-Übersicht (/styleguide) ein;
     * sie werden als /design.css nach dieser Datei geladen und überschreiben diese Werte (Liste: src/Support/DesignFarben.php).
     */
    --farbe-kopfleiste: #0f2740;
    --farbe-kopfleiste-text: #ffffff;
    --farbe-primaer: #0e5a75;
    --farbe-akzent: #1fb5d6;
    --farbe-hintergrund: #eef3f7;
    --farbe-flaeche: #ffffff;
    --farbe-rand: #e1e8ef;
    --farbe-text: #13233a;
    --farbe-text-leise: #5d6e80;
    --farbe-erfolg: #17a34a;
    --farbe-warnung: #e8890c;
    --farbe-flieder: #9b7bc9; /* Farbe des Modulbereichs „Kontakt“ (nicht über die Designfarben einstellbar) */
    --farbe-gefahr: #d93636;

    /* Abgeleitete Farben – passen sich automatisch an die Grundfarben an */
    --farbe-kopfleiste-hell: color-mix(in srgb, var(--farbe-kopfleiste) 82%, white);
    --farbe-primaer-dunkel: color-mix(in srgb, var(--farbe-primaer) 82%, black);
    --farbe-primaer-hell: color-mix(in srgb, var(--farbe-primaer) 11%, white);
    --farbe-akzent-hell: color-mix(in srgb, var(--farbe-akzent) 12%, white);
    --farbe-flaeche-leise: color-mix(in srgb, var(--farbe-hintergrund) 45%, var(--farbe-flaeche));
    --farbe-rand-stark: color-mix(in srgb, var(--farbe-rand) 78%, var(--farbe-text-leise));
    --farbe-text-hell: color-mix(in srgb, var(--farbe-text-leise) 70%, var(--farbe-flaeche));
    --farbe-erfolg-hell: color-mix(in srgb, var(--farbe-erfolg) 11%, white);
    --farbe-warnung-hell: color-mix(in srgb, var(--farbe-warnung) 12%, white);
    --farbe-gefahr-hell: color-mix(in srgb, var(--farbe-gefahr) 10%, white);

    --schrift: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

    --radius-gross: 14px;
    --radius: 10px;
    --radius-klein: 7px;

    --schatten-karte: 0 1px 2px rgba(15, 39, 64, 0.04), 0 6px 24px rgba(15, 39, 64, 0.05);
    --schatten-schwebend: 0 12px 40px rgba(15, 39, 64, 0.16);

    --kopfleiste-hoehe: 64px;
    --arbeitsbreite: 1600px;
    --seitenrand: 16px;
    --abstand: 24px;

    --uebergang: 160ms ease;
}

@media (min-width: 900px) {
    :root { --kopfleiste-hoehe: 92px; --seitenrand: 32px; --abstand: 28px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopfleiste-hoehe) + 16px); }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.55;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; }
a { color: var(--farbe-primaer); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--farbe-primaer-dunkel); }
hr { border: 0; border-top: 1px solid var(--farbe-rand); margin: 8px 0; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--farbe-akzent) 60%, transparent); outline-offset: 2px; border-radius: var(--radius-klein); }

.icon { width: 20px; height: 20px; flex: none; }
.icon-klein { width: 16px; height: 16px; }

.nur-screenreader {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sprungmarke { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; background: var(--farbe-flaeche); border-radius: var(--radius); }
.sprungmarke:focus { top: 12px; }

.text-leise { color: var(--farbe-text-leise); }

/* ---------- Knöpfe ---------- */
.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    font-weight: 600; font-size: 0.975rem; line-height: 1; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
    transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
}
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf-primaer { background: var(--farbe-primaer); color: #fff; }
.knopf-primaer:hover:not(:disabled) { background: var(--farbe-primaer-dunkel); color: #fff; }
.knopf-rand { background: var(--farbe-flaeche); color: var(--farbe-primaer); border-color: var(--farbe-rand-stark); }
.knopf-rand:hover { border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.knopf-leise { background: transparent; color: var(--farbe-primaer); }
.knopf-leise:hover { background: var(--farbe-primaer-hell); }
.knopf-gefahr { background: var(--farbe-flaeche); color: var(--farbe-gefahr); border-color: color-mix(in srgb, var(--farbe-gefahr) 35%, transparent); }
.knopf-gefahr:hover { background: var(--farbe-gefahr-hell); }
.knopf-icon {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    background: transparent; border: 0; border-radius: var(--radius); color: var(--farbe-text-leise); cursor: pointer;
}
.knopf-icon:hover { background: var(--farbe-flaeche-leise); color: var(--farbe-text); }
.knopf-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Kopfleiste (fixiert) ---------- */
.kopfleiste {
    position: fixed; inset: 0 0 auto 0; z-index: 40;
    height: var(--kopfleiste-hoehe);
    background: var(--farbe-kopfleiste); color: var(--farbe-kopfleiste-text);
    transition: box-shadow var(--uebergang);
}
.kopfleiste.ist-gescrollt { box-shadow: 0 6px 24px color-mix(in srgb, var(--farbe-kopfleiste) 30%, transparent); }
.kopfleiste-innen {
    display: flex; align-items: center; gap: 12px;
    height: 100%; max-width: calc(var(--arbeitsbreite) + 2 * var(--seitenrand)); margin: 0 auto; padding: 0 var(--seitenrand);
}
.kopfleiste-logo { flex: none; display: flex; align-items: center; }
/* Logo mit Luft: Höhe der Kopfleiste = Logo + Abstand oben/unten (Handy 14 px, ab Tablet 20 px) */
.kopfleiste-logo img { display: block; width: auto; height: 36px; }
.kopfleiste-menueknopf {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-left: -8px;
    color: var(--farbe-kopfleiste-text); background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.kopfleiste-menueknopf:hover { background: color-mix(in srgb, var(--farbe-kopfleiste-text) 8%, transparent); }
.kopfleiste-menueknopf .icon { width: 24px; height: 24px; }

.hauptmenue { display: none; }
/* Menüpunkte als Pillen: Hover leicht hinterlegt, aktiver Punkt kräftiger mit kleiner Spitze zur Seite hin */
.hauptmenue-punkt {
    position: relative; display: flex; align-items: center; height: 46px; padding: 0 18px; border-radius: var(--radius);
    color: color-mix(in srgb, var(--farbe-kopfleiste-text) 82%, transparent); font-weight: 600; font-size: 1.02rem; text-decoration: none;
    transition: color var(--uebergang), background var(--uebergang);
}
.hauptmenue-punkt:hover { color: var(--farbe-kopfleiste-text); background: color-mix(in srgb, var(--farbe-kopfleiste-text) 10%, transparent); }
.hauptmenue-punkt.ist-aktiv { color: var(--farbe-kopfleiste-text); background: color-mix(in srgb, var(--farbe-kopfleiste-text) 18%, transparent); }
.hauptmenue-punkt.ist-aktiv::after {
    content: ""; position: absolute; left: 50%; bottom: calc((46px - var(--kopfleiste-hoehe)) / 2); width: 0; height: 0; transform: translateX(-50%);
    border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--farbe-hintergrund);
}

.kopfleiste-rechts { display: flex; align-items: center; flex: none; gap: 8px; margin-left: auto; }
/* Freie Mitte zwischen Hauptmenü und den Knöpfen rechts: gehört dem Speichern-Bereich, damit Suchen/Lizenz/Account nie wandern */
.kopfleiste-mitte { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 0; container-type: inline-size; }
/* Der Hinweis passt sich dem Platz an: ausgeschrieben, kurz, sonst nur der Punkt (der Ring am Knopf zeigt „ungespeichert“ ohnehin) */
.hinweis-lang, .hinweis-kurz { display: none; }
@container (min-width: 262px) { .hinweis-kurz { display: inline; } }
@container (min-width: 372px) { .hinweis-kurz { display: none; } .hinweis-lang { display: inline; } }

.speichern-bereich { display: none; align-items: center; justify-content: flex-end; gap: 14px; min-width: 0; margin-right: 8px; }
.ungespeichert-hinweis { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; font-weight: 600; color: color-mix(in srgb, var(--farbe-warnung) 55%, white); white-space: nowrap; }
.knopf-kopfleiste { background: var(--farbe-akzent); color: var(--farbe-kopfleiste); }
.knopf-kopfleiste:hover:not(:disabled) { background: color-mix(in srgb, var(--farbe-akzent) 82%, white); color: var(--farbe-kopfleiste); }
.speichern-bereich.ist-geaendert .knopf-kopfleiste { box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe-akzent) 28%, transparent); }

.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punkt-warnung { background: var(--farbe-warnung); }
.punkt-erfolg { background: var(--farbe-erfolg); }
.punkt-leise { background: var(--farbe-rand-stark); }
.punkt-gefahr { background: var(--farbe-gefahr); }

/* Aufklapper (Site-Umschalter, Benutzermenü) – <details>, funktioniert auch ohne JavaScript */
.aufklapper { position: relative; }
.aufklapper > summary { list-style: none; }
.aufklapper > summary::-webkit-details-marker { display: none; }
.aufklapper-ausloeser {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
    border-radius: var(--radius); cursor: pointer; color: color-mix(in srgb, var(--farbe-kopfleiste-text) 90%, transparent); font-weight: 600; user-select: none;
}
.aufklapper-ausloeser:hover, .aufklapper[open] > .aufklapper-ausloeser { background: color-mix(in srgb, var(--farbe-kopfleiste-text) 8%, transparent); color: var(--farbe-kopfleiste-text); }
.site-umschalter { display: none; }
.site-umschalter-name, .benutzer-name { display: none; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--farbe-akzent), var(--farbe-primaer)); color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em;
}
.aufklapper-inhalt {
    position: absolute; top: calc(100% + 10px); z-index: 50; min-width: 270px; padding: 8px;
    background: var(--farbe-flaeche); color: var(--farbe-text); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-schwebend);
}
.aufklapper-rechts { right: 0; }
/* Sanftes Auf-/Zuklappen (0,3 s): Menüs blenden ein; Elemente und <details> beschneiden während der Bewegung ihren Überstand (cumodisKlappen in app.js) */
@keyframes klapp-ein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.aufklapper[open] > .aufklapper-inhalt { animation: klapp-ein 0.3s ease; }
.klappt { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .aufklapper[open] > .aufklapper-inhalt { animation: none; } }
.aufklapper-titel { padding: 10px 12px 8px; font-weight: 700; }
.aufklapper-titel small { display: block; font-weight: 400; color: var(--farbe-text-leise); }
.aufklapper-eintrag {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: var(--radius-klein); color: var(--farbe-text); text-decoration: none; font-weight: 600;
}
a.aufklapper-eintrag:hover { background: var(--farbe-flaeche-leise); color: var(--farbe-primaer-dunkel); }
.aufklapper-eintrag .icon { color: var(--farbe-text-leise); }
.aufklapper-eintrag.ist-aktiv .icon { color: var(--farbe-primaer); }
.aufklapper-fuss { padding: 8px 12px 6px; font-size: 0.85rem; color: var(--farbe-text-leise); }
.aufklapper-knopf { width: 100%; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
button.aufklapper-eintrag:hover { background: var(--farbe-flaeche-leise); color: var(--farbe-primaer-dunkel); }
.handy-menue-punkt.aufklapper-knopf:hover { background: color-mix(in srgb, var(--farbe-kopfleiste-text) 7%, transparent); color: var(--farbe-kopfleiste-text); }
.aufklapper-hinweis { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; font-size: 0.85rem; color: var(--farbe-text-leise); }

/* ---------- Handy-Menü ---------- */
.handy-menue {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 340px); overflow-y: auto;
    padding: 0 12px 24px; background: var(--farbe-kopfleiste); color: var(--farbe-kopfleiste-text); box-shadow: var(--schatten-schwebend);
    animation: einfahren 180ms ease-out;
}
.handy-menue-kopf img { display: block; width: auto; height: 36px; }
.handy-menue-kopf { display: flex; align-items: center; justify-content: space-between; height: var(--kopfleiste-hoehe); padding: 0 4px 0 8px; }
.handy-menue-site { display: flex; align-items: center; gap: 10px; margin: 4px 4px 12px; padding: 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--farbe-kopfleiste-text) 7%, transparent); font-weight: 600; }
.handy-menue-punkt {
    display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 12px; border-radius: var(--radius);
    color: color-mix(in srgb, var(--farbe-kopfleiste-text) 85%, transparent); text-decoration: none; font-weight: 600; font-size: 1.05rem;
}
.handy-menue-punkt:hover { background: color-mix(in srgb, var(--farbe-kopfleiste-text) 7%, transparent); color: var(--farbe-kopfleiste-text); }
.handy-menue-punkt.ist-aktiv { background: color-mix(in srgb, var(--farbe-akzent) 16%, transparent); color: var(--farbe-kopfleiste-text); }
.handy-menue-punkt.ist-aktiv .icon { color: var(--farbe-akzent); }
.handy-menue hr { border-top-color: color-mix(in srgb, var(--farbe-kopfleiste-text) 12%, transparent); margin: 10px 4px; }
.handy-menue-schleier { position: fixed; inset: 0; z-index: 55; background: color-mix(in srgb, var(--farbe-kopfleiste) 45%, transparent); animation: einblenden 180ms ease-out; }
body.menue-offen { overflow: hidden; }
@keyframes einfahren { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Seitenrahmen ---------- */
.hauptinhalt { padding: calc(var(--kopfleiste-hoehe) + 24px) 0 96px; }
.rahmen { max-width: calc(var(--arbeitsbreite) + 2 * var(--seitenrand)); margin: 0 auto; padding: 0 var(--seitenrand); }

.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: var(--abstand); }
.seitenkopf-text { min-width: 0; }
.seitenkopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.seitenkopf-aktionen:empty { display: none; }
.seitentitel { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--farbe-kopfleiste); }
.untertitel { margin-top: 6px; font-size: 1.08rem; color: var(--farbe-text-leise); }
.brotkrumen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 0.92rem; color: var(--farbe-text-leise); }
.brotkrumen a { color: var(--farbe-text-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--farbe-primaer); text-decoration: underline; }

/* Reiter / Submenü (Unterpunkte eines Bereichs, PLAN.md E13): abgesetztes Feld mit gefülltem aktivem Punkt.
   Gleiche Gestalt für die Unterreiter (.unterreiter: SEO, Statistik) und den Filter der Bilder-Seite (.seo-bilder-filter).
   Auf dem Handy waagerecht scrollbar; das Innenpolster der Spur lässt den Schatten des aktiven Punkts stehen. */
.reiter, .unterreiter, .seo-bilder-filter {
    padding: 4px; background: var(--farbe-primaer-hell); border: 1px solid color-mix(in srgb, var(--farbe-primaer) 14%, var(--farbe-rand));
    border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15, 39, 64, 0.04);
}
.reiter { margin: 0 0 var(--abstand); }
.reiter-spur { position: relative; display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.reiter-spur::-webkit-scrollbar { display: none; }
/* Werkzeuge rechts in der Reiterleiste (Block reiter_zusatz); ohne Reiterleiste stehen sie allein in einer Zeile */
.reiter-mit-zusatz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.reiter-mit-zusatz .reiter-spur { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.reiter-zusatz { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; padding: 4px 4px 4px 0; }
.reiter-zusatz-allein { justify-content: flex-start; margin: 0 0 var(--abstand); padding: 0; }
/* Werkzeuge neben dem Submenü statt darin (Seite setzt reiter_zusatz_ausserhalb) */
.reiter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 var(--abstand); }
.reiter-zeile > .reiter { margin: 0; flex: 0 1 auto; max-width: 100%; }
.reiter-zusatz-aussen { padding: 0; flex: 1 1 320px; }
@media (max-width: 700px) {
    .reiter-zusatz { flex: 1 1 100%; justify-content: flex-start; padding: 0 4px 4px; }
    .reiter-zusatz .suchfeld { flex: 1 1 100%; }
}
.reiter-punkt, .unterreiter-punkt {
    position: relative; flex: none; padding: 9px 20px; color: var(--farbe-kopfleiste); font-weight: 700; text-decoration: none; white-space: nowrap;
    border-radius: var(--radius-klein); transition: background-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
}
.reiter-punkt:hover, .unterreiter-punkt:hover { background: color-mix(in srgb, var(--farbe-flaeche) 70%, transparent); }
.reiter-punkt:focus-visible, .unterreiter-punkt:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.reiter-punkt.ist-aktiv, .unterreiter-punkt.ist-aktiv {
    color: #fff; background: var(--farbe-primaer); box-shadow: 0 1px 2px rgba(15, 39, 64, 0.2), 0 3px 8px rgba(15, 39, 64, 0.12);
}

/* Speichern-Leiste (Handy) */
.speichern-leiste {
    position: fixed; inset: auto 0 0 0; z-index: 35;
    display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 12px var(--seitenrand) calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--farbe-flaeche) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--farbe-rand);
}
.speichern-leiste .ungespeichert-hinweis { margin-right: auto; color: var(--farbe-warnung); }
.speichern-leiste .knopf { flex: 1 1 auto; max-width: 260px; }

/* ---------- Karten & Raster ---------- */
.karte {
    min-width: 0; padding: 22px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte);
}
.karte + .karte { margin-top: var(--abstand); }
.karte.karte-ohne-innenabstand { padding: 0; }
.karte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.karte-titel { font-size: 1.25rem; font-weight: 700; color: var(--farbe-kopfleiste); }

.raster { display: grid; gap: var(--abstand); }
.raster > .karte + .karte { margin-top: 0; }
@media (min-width: 900px) {
    .karte { padding: 28px; }
    .raster-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .raster-dashboard .karte-breit { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
    .raster-dashboard { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .raster-dashboard .karte-breit { grid-column: auto; }
}

.link-pfeil { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.link-pfeil:hover { text-decoration: underline; }

/* Dashboard */
/* Schnellzugriff (Favoriten der Modul-Übersicht, E55); die Bereichsfarben kommen wie bei den Modulkarten über .bereich-N */
.favoriten { margin-bottom: var(--abstand); }
.favoriten-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.favoriten-titel { margin: 0; font-size: 1.05rem; color: var(--farbe-kopfleiste); }
.favoriten-verwalten { font-size: 0.9rem; color: var(--farbe-text-leise); }
.favoriten-reihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
/* Fünf feste Plätze auf breiten Bildschirmen: jede Kachel gleich breit, freie Plätze grau (nur dort, auf dem Handy ausgeblendet) */
@media (min-width: 700px) { .favoriten-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .favoriten-reihe { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.favorit-platz {
    display: none; align-items: center; justify-content: center; min-height: 64px; color: var(--farbe-text-hell); text-decoration: none;
    background: var(--farbe-flaeche-leise); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-gross);
    transition: border-color var(--uebergang), color var(--uebergang), background-color var(--uebergang);
}
@media (min-width: 700px) { .favorit-platz { display: flex; } }
.favorit-platz .icon { width: 20px; height: 20px; }
.favorit-platz:hover, .favorit-platz:focus-visible { color: var(--farbe-primaer); border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); outline: none; }
.favorit {
    --bereich-farbe: var(--farbe-primaer);
    display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; color: var(--farbe-text); text-decoration: none;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-left: 6px solid color-mix(in srgb, var(--bereich-farbe) 55%, var(--farbe-flaeche));
    border-radius: var(--radius-gross); box-shadow: var(--schatten-karte);
    transition: border-color var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
.favorit.bereich-1 { --bereich-farbe: var(--farbe-akzent); }
.favorit.bereich-2 { --bereich-farbe: var(--farbe-flieder); }
.favorit.bereich-3 { --bereich-farbe: var(--farbe-primaer); }
.favorit.bereich-4 { --bereich-farbe: var(--farbe-warnung); }
.favorit:hover, .favorit:focus-visible { box-shadow: var(--schatten-schwebend); transform: translateY(-1px); outline: none; }
.favorit .modul-kachel { flex: none; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
.favorit .modul-kachel .icon { width: 22px; height: 22px; }
.favorit-text { display: grid; min-width: 0; }
.favorit-text strong { color: var(--farbe-kopfleiste); overflow-wrap: anywhere; }
.favorit-text small { font-size: 0.8rem; color: var(--farbe-text-leise); }
.favoriten-leer { display: flex; align-items: center; gap: 8px; margin: 0; }
.favoriten-leer .icon { flex: none; color: var(--farbe-warnung); }
.schnellaktionen { display: grid; gap: 12px; margin-bottom: var(--abstand); }
@media (min-width: 700px) { .schnellaktionen { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--abstand); } }
.schnellaktion {
    display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 20px;
    background: var(--farbe-flaeche); color: var(--farbe-kopfleiste); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
    text-decoration: none; font-weight: 700; font-size: 1.08rem; box-shadow: var(--schatten-karte);
    transition: transform var(--uebergang), border-color var(--uebergang), box-shadow var(--uebergang);
}
.schnellaktion:hover { color: var(--farbe-primaer-dunkel); border-color: var(--farbe-primaer); transform: translateY(-1px); box-shadow: var(--schatten-schwebend); }
.schnellaktion-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--farbe-primaer-hell); color: var(--farbe-primaer); }
.schnellaktion-text { flex: 1; }
.schnellaktion-pfeil { color: var(--farbe-text-hell); }
.schnellaktion-primaer { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff; }
.schnellaktion-primaer:hover { background: var(--farbe-primaer-dunkel); color: #fff; }
.schnellaktion-primaer .schnellaktion-icon { background: rgba(255, 255, 255, 0.14); color: #fff; }
.schnellaktion-primaer .schnellaktion-pfeil { color: rgba(255, 255, 255, 0.7); }

.kennzahl { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.kennzahl-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--farbe-akzent-hell); color: var(--farbe-primaer); }
.kennzahl-icon .icon { width: 26px; height: 26px; }
.kennzahl-wert { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--farbe-kopfleiste); }
.kennzahl-einheit { font-size: 1.05rem; font-weight: 600; }
.status-zeile { display: flex; align-items: center; gap: 8px; color: var(--farbe-erfolg); font-weight: 600; }

.linkliste { display: grid; gap: 8px; margin-top: 14px; }
.linkliste-eintrag {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px;
    border: 1px solid var(--farbe-rand); border-radius: var(--radius); color: var(--farbe-primaer); text-decoration: none; font-weight: 600;
}
.linkliste-eintrag span { flex: 1; }
.linkliste-eintrag .zaehler, .linkliste-eintrag .text-leise { flex: none; }
.linkliste-eintrag:hover { border-color: var(--farbe-primaer); background: var(--farbe-flaeche-leise); }


/* Servermeldung (cm_meldungen) */
.servermeldung {
    display: flex; gap: 16px; align-items: flex-start; margin-bottom: var(--abstand); padding: 20px 22px;
    background: var(--farbe-warnung-hell); border: 1px solid color-mix(in srgb, var(--farbe-warnung) 30%, transparent); border-radius: var(--radius-gross);
}
.servermeldung-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--farbe-warnung); color: #fff; }
.servermeldung-text { flex: 1; min-width: 0; }
.servermeldung-text h2 { margin-bottom: 4px; font-size: 1.1rem; color: color-mix(in srgb, var(--farbe-warnung) 55%, black); }
.servermeldung-zu { margin: -8px -8px 0 0; }

/* Zeitraum-Umschalter */
.segmente { display: inline-flex; padding: 3px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: 999px; }
.segment { padding: 6px 14px; border-radius: 999px; color: var(--farbe-text-leise); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.segment:hover { color: var(--farbe-text); }
.segment.ist-aktiv { background: var(--farbe-flaeche); color: var(--farbe-primaer); box-shadow: 0 1px 3px rgba(15, 39, 64, 0.12); }

/* Besucherstatistik */
.statistik { display: grid; gap: 24px; }
@media (min-width: 700px) { .statistik { grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); align-items: end; } }
.statistik-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 20px 0 0; }
.statistik-liste dt { font-size: 0.85rem; color: var(--farbe-text-leise); }
.statistik-liste dd { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--farbe-kopfleiste); }
.diagramm { margin: 0; min-width: 0; }
.diagramm-flaeche { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 200px; gap: 10px; height: 200px; }
.diagramm-achse { display: flex; flex-direction: column; justify-content: space-between; margin: -0.55em 0; font-size: 0.78rem; color: var(--farbe-text-hell); text-align: right; }
/* Feste Höhe: sonst nimmt das SVG die Höhe aus dem Seitenverhältnis der viewBox und wächst bei breiten Fenstern über die Fläche */
.diagramm-svg { display: block; width: 100%; height: 200px; overflow: hidden; }
.diagramm-linie { stroke: var(--farbe-rand); stroke-width: 1; }
.diagramm-balken { fill: var(--farbe-akzent); transition: fill var(--uebergang); }
.diagramm-balken:hover { fill: var(--farbe-primaer); }
.diagramm-beschriftung { display: flex; justify-content: space-between; margin: 8px 0 0 34px; font-size: 0.8rem; color: var(--farbe-text-leise); }

/* Zähler (z. B. neue Anfragen, offene Tickets) */
.zaehler {
    display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
    background: var(--farbe-gefahr); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1;
}

/* Neuigkeiten */
.neuigkeiten { display: grid; gap: 20px; }
@media (min-width: 700px) { .neuigkeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.neuigkeit { padding: 18px; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.neuigkeit-datum { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--farbe-text-leise); }
.neuigkeit-titel { margin: 6px 0; font-size: 1.08rem; color: var(--farbe-kopfleiste); }
.neuigkeit-text { color: var(--farbe-text-leise); }

/* Leerzustand */
.leerzustand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; }
.leerzustand[hidden] { display: none; }
.leerzustand-gross { padding: 56px 16px; }
.leerzustand-icon { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 6px; border-radius: 50%; background: var(--farbe-flaeche-leise); color: var(--farbe-text-hell); }
.leerzustand-icon .icon { width: 28px; height: 28px; }
.leerzustand-titel { font-weight: 700; font-size: 1.1rem; color: var(--farbe-kopfleiste); }
.leerzustand-text { max-width: 420px; color: var(--farbe-text-leise); }
.leerzustand .knopf { margin-top: 12px; }

/* ---------- Abzeichen, Hinweise ---------- */
.abzeichen {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
    background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); color: var(--farbe-text-leise); font-size: 0.8rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.abzeichen-info { background: var(--farbe-akzent-hell); border-color: transparent; color: var(--farbe-primaer-dunkel); }
.abzeichen-erfolg { background: var(--farbe-erfolg-hell); border-color: transparent; color: color-mix(in srgb, var(--farbe-erfolg) 72%, black); }
.abzeichen-warnung { background: var(--farbe-warnung-hell); border-color: transparent; color: color-mix(in srgb, var(--farbe-warnung) 65%, black); }
.abzeichen-klasse { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.abzeichen-gefahr { background: var(--farbe-gefahr-hell); border-color: transparent; color: color-mix(in srgb, var(--farbe-gefahr) 75%, black); }

.hinweis { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); }
.hinweis-info { background: var(--farbe-akzent-hell); color: var(--farbe-primaer-dunkel); }
.hinweis-erfolg { background: var(--farbe-erfolg-hell); color: color-mix(in srgb, var(--farbe-erfolg) 72%, black); }
.hinweis-warnung { background: var(--farbe-warnung-hell); color: color-mix(in srgb, var(--farbe-warnung) 60%, black); }

/* ---------- Formulare ---------- */
.formular-raster { display: grid; gap: 18px; margin-bottom: 20px; }
@media (min-width: 700px) { .formular-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } .feld-breit { grid-column: 1 / -1; } }
.feld { display: grid; gap: 6px; align-content: start; }
.feld-titel { font-weight: 600; font-size: 0.95rem; }
.feld-hilfe { font-size: 0.875rem; color: var(--farbe-text-leise); }
.feld input, .feld select, .feld textarea, .suchfeld input {
    width: 100%; min-height: 46px; padding: 10px 14px;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld textarea { min-height: 96px; resize: vertical; }
.feld .eingabe-code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .suchfeld input:focus {
    outline: none; border-color: var(--farbe-primaer); box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe-primaer) 15%, transparent);
}
.feld-fehler input, .feld-fehler select, .feld-fehler textarea { border-color: var(--farbe-gefahr); }
/* Hinweis am Feld (gespeichert wird trotzdem), z. B. Lesbarkeit der Newsletter-Designfarben */
.feld-warnung input, .feld-warnung select, .feld-warnung textarea { border-color: var(--farbe-warnung); }
.feld-warnung .feld-hilfe { color: color-mix(in srgb, var(--farbe-warnung) 70%, black); }
.feld-fehler .feld-hilfe { color: var(--farbe-gefahr); }

/*
 * Grundregel für den ganzen Arbeitsbereich: **jedes** Text-, Auswahl- und Textfeld sieht aus wie die auf der E-Mail-Seite –
 * auch außerhalb von .feld (Zeilen auf Social Media, SEO …). :where() gibt der Regel keine Spezifität: Spezialfälle
 * (kompakte Felder, Suchfelder, Felder mit Vorsatz) überschreiben einzelne Werte wie bisher. Checkboxen, Optionsfelder,
 * Farbwähler, Dateifelder und versteckte Felder sind absichtlich ausgenommen.
 */
.hauptinhalt :where(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea) {
    width: 100%; min-height: 46px; padding: 10px 14px;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.hauptinhalt :where(textarea) { min-height: 96px; resize: vertical; }
.hauptinhalt :where(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], select, textarea):focus {
    outline: none; border-color: var(--farbe-primaer); box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe-primaer) 15%, transparent);
}

.auswahl { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.auswahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--farbe-primaer); }

.schalter { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter-bahn { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--farbe-rand-stark); transition: background var(--uebergang); }
.schalter-bahn::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--uebergang);
}
.schalter input:checked + .schalter-bahn { background: var(--farbe-primaer); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(18px); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid color-mix(in srgb, var(--farbe-akzent) 60%, transparent); outline-offset: 2px; }

.suchfeld { position: relative; display: block; flex: 1 1 240px; min-width: 0; }
@media (min-width: 900px) { .seitenkopf-aktionen { flex-wrap: nowrap; } .seitenkopf-aktionen .suchfeld { flex: 0 1 300px; } }
.suchfeld .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--farbe-text-hell); pointer-events: none; }
.suchfeld input { padding-left: 44px; }

/* ---------- Seitenbaum ---------- */
.baum-kopf { display: none; }
.baum-zeile {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "griff name aktionen" "griff url aktionen" "griff status status";
    gap: 4px 8px; align-items: center; padding: 14px 16px 14px 8px; border-top: 1px solid var(--farbe-rand);
    transition: background var(--uebergang);
}
.baum-zeile:first-of-type { border-top: 0; }
.baum-zeile:hover { background: var(--farbe-flaeche-leise); }
.baum-zeile.ist-gedimmt .baum-titel { color: var(--farbe-text-leise); }
.baum-griff { grid-area: griff; align-self: stretch; display: grid; place-items: center; color: var(--farbe-text-hell); cursor: grab; }
.baum-status { grid-area: status; display: flex; gap: 4px; }
.baum-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.baum-titel { font-weight: 600; font-size: 1.05rem; color: var(--farbe-kopfleiste); }
.baum-typ { color: var(--farbe-text-leise); }
.baum-url { grid-area: url; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.92rem; color: var(--farbe-primaer); }
.baum-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baum-auge { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: -6px; color: var(--farbe-text-leise); border-radius: var(--radius-klein); opacity: 0.7; transition: opacity var(--uebergang), background var(--uebergang), color var(--uebergang); }
/* Roter Punkt am Seitennamen: die Seite verweist auf Bilder/Dateien, die es nicht mehr gibt (Medien gelöscht oder verschoben) */
.hilfe.baum-fehlt { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--farbe-gefahr); color: #fff; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 3px var(--farbe-gefahr-hell); transition: transform var(--uebergang), box-shadow var(--uebergang); }
.hilfe.baum-fehlt .icon { width: 16px; height: 16px; }
.hilfe.baum-fehlt:hover, .hilfe.baum-fehlt:focus-visible, .hilfe.baum-fehlt[aria-describedby] { background: var(--farbe-gefahr); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px var(--farbe-gefahr-hell); }
.baum-auge:hover, .baum-auge:focus-visible { opacity: 1; color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.baum-slideshow { display: none; }
.baum-aufklappen {
    display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 -2px 0 -4px; padding: 0;
    background: transparent; border: 0; border-radius: var(--radius-klein); color: var(--farbe-text-leise); cursor: pointer; transition: transform var(--uebergang);
}
.baum-aufklappen:hover { background: var(--farbe-rand); color: var(--farbe-text); }
.baum-aufklappen[aria-expanded="false"] { transform: rotate(-90deg); }
.baum-aufklappen-platz { display: inline-block; width: 22px; }
.baum-keine-treffer { padding: 24px; text-align: center; color: var(--farbe-text-leise); }
.abzeichen-status { display: inline-flex; }

/* Einrückung je Ebene (ohne Inline-Styles) */
/* Jede Ebene beginnt mit einer „Ecke“ (22 px); die Einrückung davor entspricht den Ebenen darüber */
.ebene-2 .baum-name { padding-left: 22px; } .ebene-3 .baum-name { padding-left: 44px; }
.ebene-4 .baum-name { padding-left: 66px; } .ebene-5 .baum-name { padding-left: 88px; } .ebene-6 .baum-name { padding-left: 110px; }
.baum-ecke { display: inline-grid; place-items: center; flex: none; width: 22px; margin-right: -2px; color: var(--farbe-rand-stark); }
.baum-ecke .icon { width: 16px; height: 16px; }

.status-symbol { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-klein); background: transparent; color: var(--farbe-rand-stark); }
button.status-symbol { cursor: pointer; transition: background var(--uebergang), color var(--uebergang); }
button.status-symbol:not(.ist-aktiv):hover { background: var(--farbe-flaeche-leise); color: var(--farbe-text-leise); }
button.status-symbol.ist-aktiv { cursor: default; }
@media (max-width: 899px) { .baum-status .status-symbol { width: 38px; height: 38px; } }
.status-symbol .icon { width: 18px; height: 18px; }
.status-symbol.ist-aktiv { color: #fff; }
.status-symbol.status-1 { background: var(--farbe-primaer); }
.status-symbol.status-2 { background: var(--farbe-kopfleiste-hell); }
.status-symbol.status-3 { background: var(--farbe-warnung); }
.status-symbol.status-4 { background: var(--farbe-text-hell); }

.baum-kopf { border-radius: var(--radius-gross) var(--radius-gross) 0 0; }
.baum-aktionen { grid-area: aktionen; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; }
.baum-aktionen form { margin: 0; }
.baum-zeile.ist-entwurf .baum-titel { color: color-mix(in srgb, var(--farbe-warnung) 55%, var(--farbe-text)); }
.zeilenmenue .aufklapper-inhalt { min-width: 230px; }
.zeilenmenue summary { list-style: none; }
.aufklapper-knopf:disabled { opacity: 0.4; cursor: not-allowed; }
.aufklapper-eintrag.ist-gefahr, .aufklapper-eintrag.ist-gefahr .icon { color: var(--farbe-gefahr); }
.knopf-klein { min-height: 34px; padding: 0 12px; font-size: 0.875rem; gap: 6px; }

/* Ziehen & Ablegen im Seitenbaum */
.baum.ist-am-ziehen { user-select: none; cursor: grabbing; }
.baum-griff { touch-action: none; }
.baum-zeile.ist-gezogen { opacity: 0.45; }
.baum-zeile.ziel-davor { box-shadow: inset 0 3px 0 var(--farbe-akzent); }
.baum-zeile.ziel-danach { box-shadow: inset 0 -3px 0 var(--farbe-akzent); }
.baum-zeile.ziel-hinein { background: var(--farbe-akzent-hell); box-shadow: inset 0 0 0 2px var(--farbe-akzent); }
.baum-zeile.ziel-ungueltig { background: var(--farbe-gefahr-hell); }


/* Einstellungen einer Seite */
.einstellungen > .hinweis { margin: 0 0 var(--abstand); }
.unterbereich { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--farbe-rand); }
.unterbereich .formular-raster { margin-bottom: 0; }
.formular-ende { margin-top: var(--abstand); }
.baum-titel-link { color: inherit; text-decoration: none; }
.baum-titel-link:hover .baum-titel { color: var(--farbe-primaer); text-decoration: underline; text-underline-offset: 3px; }
/* Formular „Neue Seite" */
.karte-schmal { max-width: 860px; }
.feld-mit-vorsatz { display: flex; align-items: stretch; }
.feld-vorsatz { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--farbe-rand-stark); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--farbe-flaeche-leise); color: var(--farbe-text-leise); white-space: nowrap; }
.feld-mit-vorsatz input { border-radius: 0 var(--radius) var(--radius) 0; }
.auswahlgruppe { margin: 0; padding: 0; border: 0; }
.auswahlgruppe legend { margin-bottom: 4px; padding: 0; }
.auswahlgruppe .auswahl { display: flex; }
.legende { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; color: var(--farbe-text-leise); font-size: 0.95rem; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 8px; }
.legende .status-symbol { width: 26px; height: 26px; }

@media (min-width: 900px) {
    .baum-kopf, .baum-zeile {
        grid-template-columns: 44px 150px minmax(0, 2fr) minmax(0, 1.4fr) 120px 210px; grid-template-areas: "griff status name url slideshow aktionen";
        column-gap: 16px; padding: 0 20px 0 8px;
    }
    .baum-kopf {
        display: grid; align-items: center; min-height: 52px; background: var(--farbe-flaeche-leise); border-bottom: 1px solid var(--farbe-rand);
        font-size: 0.85rem; font-weight: 700; color: var(--farbe-text-leise); text-transform: uppercase; letter-spacing: 0.04em;
    }
    .baum-kopf span:nth-child(2) { grid-area: status; } .baum-kopf span:nth-child(3) { grid-area: name; }
    .baum-kopf span:nth-child(4) { grid-area: url; } .baum-kopf span:nth-child(5) { grid-area: slideshow; } .baum-kopf span:nth-child(6) { grid-area: aktionen; }
    .baum-zeile { min-height: 58px; }
    .baum-zeile:first-of-type { border-top: 1px solid var(--farbe-rand); }
    .baum-kopf + .baum-zeile { border-top: 0; }
    .baum-slideshow { grid-area: slideshow; display: block; }
    .abzeichen-status { display: none; }
    .baum-status .status-symbol:not(.ist-aktiv) { background: transparent; }
}

/* ---------- Toasts ---------- */
.toast-bereich { position: fixed; z-index: 70; right: 16px; bottom: 88px; left: 16px; display: grid; gap: 10px; justify-items: end; pointer-events: none; }
@media (min-width: 900px) { .toast-bereich { bottom: 28px; left: auto; } }
.toast {
    display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 14px 18px; pointer-events: auto;
    background: var(--farbe-kopfleiste); color: var(--farbe-kopfleiste-text); border-radius: var(--radius); box-shadow: var(--schatten-schwebend); font-weight: 600;
    animation: toast-ein 220ms ease-out;
}
.toast .icon { color: var(--farbe-akzent); }
.toast-erfolg .icon { color: color-mix(in srgb, var(--farbe-erfolg) 65%, white); }
.toast.ist-weg { opacity: 0; transform: translateY(8px); transition: opacity 200ms, transform 200ms; }
@keyframes toast-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Komponenten-Übersicht ---------- */
.farben-einleitung { max-width: 760px; margin-bottom: 20px; }
.farbfelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.farbfeld { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); }
.farbfeld-waehler { position: relative; flex: none; width: 56px; height: 56px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--farbe-rand-stark); cursor: pointer; }
.farbfeld-waehler input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); padding: 0; border: 0; cursor: pointer; }
.farbfeld-text { display: grid; gap: 2px; min-width: 0; }
.farbfeld-text small { color: var(--farbe-text-leise); font-size: 0.85rem; line-height: 1.35; }
.farbfeld-hex {
    width: 104px; min-height: 32px; padding: 2px 8px; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem;
    border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-klein); background: var(--farbe-flaeche);
}
.farbfeld-hex[aria-invalid="true"] { border-color: var(--farbe-gefahr); }
.farben-aktionen { margin-top: 20px; }


/* ---------- Anmeldung (Login, Passwort vergessen) ---------- */
.seite-anmeldung { background: var(--farbe-flaeche); }
.anmeldung { display: grid; min-height: 100vh; grid-template-rows: 180px 1fr; }
.anmeldung-bild { position: relative; overflow: hidden; background: var(--farbe-kopfleiste); }
.anmeldung-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anmeldung-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--farbe-kopfleiste) 70%, transparent)); }
.anmeldung-bild-text { position: absolute; z-index: 1; left: var(--seitenrand); right: var(--seitenrand); bottom: 18px; color: #fff; }
.anmeldung-claim { font-size: 1.35rem; font-weight: 700; line-height: 1.2; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.anmeldung-feld { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px var(--seitenrand) 24px; }
.anmeldung-box { width: 100%; max-width: 420px; }
.anmeldung-logo { width: 170px; height: auto; margin-bottom: 32px; }
.anmeldung-titel { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700; color: var(--farbe-kopfleiste); letter-spacing: -0.01em; }
.anmeldung-text { margin: 8px 0 24px; }
.anmeldung-box > .hinweis { margin: 0 0 20px; }
.anmeldung-formular { display: grid; gap: 18px; }
.knopf-breit { width: 100%; min-height: 50px; font-size: 1.05rem; }
.anmeldung-link { margin-top: 22px; }
.anmeldung-zurueck { margin-top: 24px; }
.anmeldung-fuss { margin-top: 40px; font-size: 0.85rem; color: var(--farbe-text-hell); text-align: center; }
@media (min-width: 900px) {
    .anmeldung { grid-template-rows: none; grid-template-columns: minmax(0, 1.25fr) minmax(460px, 1fr); }
    .anmeldung-bild-text { left: 56px; right: 56px; bottom: 56px; }
    .anmeldung-claim { font-size: 2.6rem; }
    .anmeldung-feld { padding: 48px; }
}

/* Anmelden-Knopf: Wartezustand statt Doppelklick (anmeldung.js) – bewusst nicht :disabled, damit er voll sichtbar bleibt */
.knopf.ist-wartet { pointer-events: none; }
.knopf.ist-wartet .icon { display: none; }
.knopf.ist-wartet::before {
    content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: drehen 700ms linear infinite;
}
.anmeldung-formular.ruettelt { animation: anmeldung-ruetteln 0.4s ease-in-out; }
@keyframes anmeldung-ruetteln {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ---------- Einfache Seiten (Fehler, später Login) ---------- */
.seite-einfach { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px 16px; }
.einfach-box { width: 100%; max-width: 560px; padding: 48px 40px; background: var(--farbe-flaeche); border-radius: var(--radius-gross); box-shadow: var(--schatten-schwebend); }
.einfach-box h1 { margin: 4px 0 12px; font-size: 1.75rem; color: var(--farbe-kopfleiste); }
.einfach-box p + p { margin-top: 20px; }
.einfach-logo { width: 180px; height: auto; margin-bottom: 32px; }
.einfach-status { color: var(--farbe-text-leise); font-size: 0.9rem; }
.fehler-details { max-height: 320px; overflow: auto; margin-top: 20px; padding: 16px; font-size: 0.75rem; white-space: pre-wrap; background: var(--farbe-hintergrund); border-radius: var(--radius-klein); }
@media (max-width: 600px) { .einfach-box { padding: 32px 24px; } }

/* ---------- Ab Tablet/Desktop: volle Kopfleiste ---------- */
@media (min-width: 900px) {
    .kopfleiste-menueknopf, .handy-menue, .handy-menue-schleier, .speichern-leiste { display: none !important; }
    .kopfleiste-logo img { height: 52px; }
    .kopfleiste-logo { margin-right: 48px; }
    .hauptmenue { display: flex; align-items: center; align-self: stretch; gap: 6px; }
    .site-umschalter { display: block; }
    .speichern-bereich { display: flex; }
    .hauptinhalt { padding-bottom: 64px; }
}
@media (min-width: 1280px) {
    .site-umschalter-name, .benutzer-name { display: inline; }
}
/* Schmaler Desktop: Speichern nur als Symbol und etwas engeres Menü, damit der Speichern-Bereich in die freie Mitte passt */
@media (min-width: 900px) and (max-width: 1179px) {
    .kopfleiste-logo { margin-right: 24px; }
    .hauptmenue-punkt { padding: 0 12px; }
    .speichern-bereich .knopf-kopfleiste > span { display: none; }
    .speichern-bereich { margin-right: 4px; }
}
@media (max-width: 899px) {
    .hauptinhalt.hat-speichern-leiste { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- Hilfe-Bubbles („?" an Feldern) ---------- */
.feld-kopf { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.hilfe {
    display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; padding: 0;
    background: transparent; border: 0; border-radius: 50%; color: var(--farbe-text-hell); cursor: help;
    transition: color var(--uebergang), background var(--uebergang);
}
.hilfe .icon { width: 17px; height: 17px; }
.hilfe:hover, .hilfe[aria-describedby] { color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
/* Nur Agentur-Konten: Platzhalter für einen noch nicht geschriebenen Text */
.hilfe-leer { color: var(--farbe-warnung); border: 1px dashed currentColor; cursor: pointer; }
.hilfe-leer .icon { width: 13px; height: 13px; }
.hilfe-bubble {
    position: fixed; z-index: 90; max-width: min(340px, calc(100vw - 16px)); padding: 12px 14px;
    background: var(--farbe-kopfleiste); color: var(--farbe-kopfleiste-text); border-radius: var(--radius);
    box-shadow: var(--schatten-schwebend); font-size: 0.92rem; line-height: 1.45;
}
.hilfe-bubble[hidden] { display: none; }
.hilfe-text { white-space: pre-line; }
/* Automatisch ergänzter, nicht pflegbarer Teil einer Bubble (z. B. Namen der fehlenden Dateien) */
.hilfe-zusatz { margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--farbe-kopfleiste-text) 25%, transparent); white-space: pre-line; word-break: break-word; }
.hilfe-text + .hilfe-zusatz, .hilfe-bubble textarea + .hilfe-zusatz { margin-top: 10px; }
.hilfe-zusatz:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hilfe-schluessel { margin-bottom: 6px; font-size: 0.78rem; opacity: 0.7; word-break: break-all; }
.hilfe-bubble textarea {
    width: min(320px, calc(100vw - 48px)); min-height: 90px; padding: 8px 10px; resize: vertical;
    background: var(--farbe-flaeche); color: var(--farbe-text); border: 0; border-radius: var(--radius-klein);
}
.hilfe-aktionen { display: flex; gap: 8px; margin-top: 8px; }
.hilfe-bubble.hat-editor { width: min(360px, calc(100vw - 16px)); max-width: none; }
.hilfe-bubble.hat-editor textarea { width: 100%; }
.hilfe-aktionen { align-items: center; }
.hilfe-tipp { margin-left: auto; font-size: 0.75rem; opacity: 0.6; }
.hilfe-speichern, .hilfe-abbrechen {
    min-height: 32px; padding: 0 12px; border-radius: var(--radius-klein); border: 0; cursor: pointer; font-weight: 600; font-size: 0.85rem;
}
.hilfe-speichern { background: var(--farbe-akzent); color: var(--farbe-kopfleiste); }
.hilfe-abbrechen { background: transparent; color: inherit; border: 1px solid color-mix(in srgb, var(--farbe-kopfleiste-text) 35%, transparent); }
.hilfe-speichern:disabled { opacity: 0.5; }

/* ---------- Reiter-Box (Seiteneinstellungen) ---------- */
.reiterbox { padding: 0; }
.reiterbox-kopf { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--farbe-rand); }
.reiterbox.ist-zugeklappt .reiterbox-kopf { border-bottom: 0; }
.reiterbox-reiter { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.reiterbox-reiter::-webkit-scrollbar { display: none; }
/* Jeder Reiter hat einen farbigen Balken davor (Farbe je Bereich), der aktive zusätzlich eine Linie darunter */
.reiterbox-tab {
    --tab-farbe: var(--farbe-primaer);
    position: relative; display: flex; align-items: center; gap: 10px; flex: none; padding: 16px 18px 14px 14px;
    color: var(--farbe-text-leise); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.reiterbox-tab::before {
    content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--tab-farbe); opacity: 0.7; transition: opacity var(--uebergang);
}
.reiterbox-tab + .reiterbox-tab { margin-left: 6px; }
.reiterbox-tab.farbe-1 { --tab-farbe: var(--farbe-primaer); }
.reiterbox-tab.farbe-2 { --tab-farbe: var(--farbe-warnung); }
.reiterbox-tab.farbe-3 { --tab-farbe: var(--farbe-akzent); }
.reiterbox-tab:hover { color: var(--farbe-text); }
.reiterbox-tab:hover::before { opacity: 0.9; }
.reiterbox.ist-aktiv .reiterbox-tab.ist-aktiv { color: var(--farbe-text); }
.reiterbox.ist-aktiv .reiterbox-tab.ist-aktiv::before { opacity: 1; }
.reiterbox.ist-aktiv .reiterbox-tab.ist-aktiv::after { content: ""; position: absolute; left: 14px; right: 18px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--tab-farbe); }
/* Der Bereich selbst trägt oben die Farbe des aktiven Reiters als feine Linie */
.reiterbox-feld { border-top: 0; }
.reiterbox-einklappen { display: none; align-self: center; }
.reiterbox.ist-aktiv .reiterbox-einklappen { display: inline-grid; }
.reiterbox-einklappen .icon { transition: transform var(--uebergang); }
.reiterbox.ist-zugeklappt .reiterbox-einklappen .icon { transform: rotate(-90deg); }
.reiterbox-feld { padding: 22px; }
.reiterbox:not(.ist-aktiv) .reiterbox-feld + .reiterbox-feld { border-top: 1px solid var(--farbe-rand); }
.spalten-3 { display: grid; gap: 20px 32px; }
@media (min-width: 1000px) { .spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reiterbox-feld { padding: 26px 28px; } }
.spalte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }
.spalte-titel { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-text-leise); }
.dicht .feld { gap: 4px; }
.dicht .feld input, .dicht .feld select { min-height: 40px; padding: 7px 12px; }
.dicht .feld-hilfe { font-size: 0.8rem; }
.einstellungen > .hinweis { margin: 0 0 var(--abstand); }
.formular-ende { margin-top: var(--abstand); }
.unterfeld { display: grid; gap: 14px; padding: 12px; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.unterfeld[hidden] { display: none; }
.zeile-auswahl { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.zugang-listen { display: grid; gap: 16px 32px; margin-top: 20px; }
@media (min-width: 700px) { .zugang-listen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Spalteneditor (PLAN.md 3.3) ---------- */
.raster-layout { display: grid; gap: 20px; margin-top: var(--abstand); align-items: start; }
@media (min-width: 1200px) { .raster-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; } }

.raster-leiste { padding: 18px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); }
@media (min-width: 1200px) { .raster-leiste { position: sticky; top: calc(var(--kopfleiste-hoehe) + 20px); } }
.raster-leiste-titel { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--farbe-kopfleiste); }
.raster-leiste-text { margin: 0 0 14px; font-size: 0.875rem; }

/* Auswahl der Spaltenaufteilung: Bildchen + Beschriftung */
.layout-wahl { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) and (max-width: 1199px) { .layout-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.layout-knopf {
    display: grid; gap: 8px; justify-items: stretch; padding: 10px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--farbe-text);
    background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); cursor: pointer;
    transition: border-color var(--uebergang), background var(--uebergang);
}
.layout-knopf:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.layout-knopf span { text-align: center; }
.layout-bild { display: flex; gap: 3px; height: 26px; }
.layout-bild i { display: block; border-radius: 3px; background: color-mix(in srgb, var(--farbe-primaer) 55%, white); }
.layout-knopf:hover .layout-bild i { background: var(--farbe-primaer); }
.fb-1 { flex: 1; } .fb-2 { flex: 2; } .fb-3 { flex: 3; } .fb-4 { flex: 4; } .fb-5 { flex: 5; } .fb-6 { flex: 6; }
.fb-7 { flex: 7; } .fb-8 { flex: 8; } .fb-9 { flex: 9; } .fb-10 { flex: 10; } .fb-11 { flex: 11; } .fb-12 { flex: 12; }

.raster-liste { display: flex; flex-direction: column; min-width: 0; }
.raster-leer {
    display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 48px 24px; text-align: center;
    color: var(--farbe-text-leise); border: 2px dashed var(--farbe-rand-stark); border-radius: var(--radius-gross);
}
.raster-leer[hidden] { display: none; }

/* Trenner mit Plus zwischen den Abschnitten (wie im Altsystem: großer runder Knopf auf einer Linie, mit Luft zu den Abschnitten) */
.abschnitt-einfuegen { position: relative; display: flex; justify-content: center; height: 72px; }
.abschnitt-einfuegen::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -1px; border-top: 2px solid var(--farbe-rand); }
.einfuegen-plus {
    position: relative; z-index: 1; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    color: #fff; background: var(--farbe-rand-stark); border: 0; border-radius: 50%; cursor: pointer;
    box-shadow: 0 0 0 6px var(--farbe-hintergrund);
    transition: background var(--uebergang), transform var(--uebergang);
}
.einfuegen-plus .icon { width: 24px; height: 24px; stroke-width: 2.5; }
.einfuegen-plus:hover, .einfuegen-plus:focus-visible, .einfuegen-plus[aria-expanded="true"] { background: var(--farbe-primaer); }
.einfuegen-plus[aria-expanded="true"] { transform: rotate(45deg); }
/* Das Menü öffnet über dem Plus (wie im Altsystem): unten auf der Seite müsste man sonst erst nach unten scrollen.
   Fehlt oben der Platz (Plus ganz oben unter der Kopfleiste), setzt spalteneditor.js `nach-unten`. */
.einfuegen-menue {
    position: absolute; z-index: 20; bottom: 62px; left: 50%; width: min(420px, calc(100vw - 2 * var(--seitenrand))); transform: translateX(-50%);
    padding: 14px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-schwebend);
}
.einfuegen-menue.nach-unten { bottom: auto; top: 62px; }
.einfuegen-menue[hidden] { display: none; }
.einfuegen-menue .layout-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.einfuegen-titel { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--farbe-text-leise); }

/* Abschnitt löschen mit Animation: Kopie fliegt in einen Papierkorb, der von unten einfährt (spalteneditor.js) */
.abschnitt-flug { position: fixed; z-index: 95; margin: 0; overflow: hidden; pointer-events: none; transform-origin: center; box-shadow: var(--schatten-schwebend); }
.papierkorb-flug {
    position: fixed; z-index: 96; left: 50%; bottom: 28px; display: grid; place-items: center; width: 76px; height: 76px; margin-left: -38px;
    color: #fff; background: var(--farbe-gefahr); border-radius: 50%; box-shadow: var(--schatten-schwebend); pointer-events: none;
}
.papierkorb-flug .icon { width: 36px; height: 36px; }

/* Abschnitt */
.abschnitt {
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte);
    transition: box-shadow var(--uebergang), border-color var(--uebergang), opacity var(--uebergang);
}
.abschnitt:focus-within { border-color: color-mix(in srgb, var(--farbe-akzent) 55%, var(--farbe-rand)); }
.abschnitt.ist-versteckt { border-style: dashed; background: var(--farbe-flaeche-leise); }
.abschnitt.ist-versteckt .abschnitt-spalten { opacity: 0.55; }
.abschnitt.ist-neu, .abschnitt.ist-bewegt { box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 40%, transparent), var(--schatten-karte); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--farbe-rand); }
.abschnitt-nr {
    display: grid; place-items: center; width: 28px; height: 28px; font-size: 0.85rem; font-weight: 700;
    color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-radius: 50%;
}
.abschnitt-titel { font-weight: 700; color: var(--farbe-kopfleiste); }
.abschnitt-titel small { font-weight: 400; margin-left: 4px; }
/* Roter Hinweis „Bild/Datei fehlt“ am Abschnitt und an der Spalte (Bubble wie die „?“-Hilfe) */
.abschnitt-fehlt { display: inline-flex; align-items: center; }
.abschnitt-kopf .hilfe.baum-fehlt { width: 22px; height: 22px; }
.zelle-kopf .hilfe.baum-fehlt { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--farbe-gefahr-hell); margin-right: auto; margin-left: 4px; }
.zelle-kopf .hilfe.baum-fehlt .icon { width: 14px; height: 14px; }
.abschnitt-marken { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.abschnitt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: auto; }
.abschnitt-aktionen .knopf-icon { width: 40px; height: 40px; }
.abschnitt-aktionen .knopf-icon:disabled { opacity: 0.3; cursor: default; background: transparent; }
.abschnitt-aktionen .knopf-icon[aria-pressed="true"] { color: var(--farbe-warnung); background: var(--farbe-warnung-hell); }
.knopf-icon-gefahr:hover { color: var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }

.abschnitt-breiten-hilfe { display: none; align-items: center; gap: 6px; margin-right: 10px; font-size: 0.85rem; }
@media (min-width: 768px) { .abschnitt-breiten-hilfe { display: inline-flex; } }

/* Regler für die Spaltenbreiten: Griffe zwischen den Spalten ziehen (wie im Altsystem); nur sinnvoll, wenn die Spalten nebeneinander stehen */
.breiten-regler { display: none; padding: 14px 16px 0; }
@media (min-width: 768px) { .breiten-regler { display: block; } }
.regler-spur { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; height: 30px; user-select: none; }
.regler-teil {
    display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: var(--farbe-primaer);
    background: color-mix(in srgb, var(--farbe-primaer) 16%, white); border-radius: 8px;
}
.regler-griff {
    position: absolute; top: -4px; width: 24px; height: 38px; margin: 0 0 0 -12px; padding: 0; cursor: ew-resize; touch-action: none;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: 8px; box-shadow: 0 2px 6px rgba(15, 39, 64, 0.18);
}
.regler-griff::before {
    content: ""; position: absolute; left: 8px; right: 8px; top: 11px; bottom: 11px;
    border-left: 2px solid var(--farbe-text-hell); border-right: 2px solid var(--farbe-text-hell);
}
.regler-griff:hover, .regler-griff:focus-visible, .regler-griff.ist-gezogen { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 30%, transparent); }

/* Spalten im 12er-Raster; auf dem Handy stehen sie untereinander */
.abschnitt-spalten { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.raster-zelle {
    grid-column: 1 / -1; display: flex; flex-direction: column; min-width: 0; min-height: 130px;
    background: var(--farbe-flaeche); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius);
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.raster-zelle:hover { border-color: var(--farbe-text-hell); }
.raster-zelle:focus-within { border-style: solid; border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 22%, transparent); }
@media (min-width: 768px) {
    .breite-1 { grid-column: span 1; } .breite-2 { grid-column: span 2; } .breite-3 { grid-column: span 3; } .breite-4 { grid-column: span 4; }
    .breite-5 { grid-column: span 5; } .breite-6 { grid-column: span 6; } .breite-7 { grid-column: span 7; } .breite-8 { grid-column: span 8; }
    .breite-9 { grid-column: span 9; } .breite-10 { grid-column: span 10; } .breite-11 { grid-column: span 11; } .breite-12 { grid-column: span 12; }
    .breite-sonder { grid-column: span 4; }
}
.zelle-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 4px 8px 0 12px; font-size: 0.8rem; color: var(--farbe-text-leise); }
.zelle-art { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.zelle-ausrichtung { display: inline-flex; align-items: center; gap: 1px; }
.zelle-ausrichtung[hidden] { display: none; }
.zelle-aus {
    display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--farbe-text-hell);
    background: transparent; border: 0; border-radius: var(--radius-klein); cursor: pointer;
}
.zelle-aus:hover { color: var(--farbe-text); background: var(--farbe-flaeche-leise); }
.zelle-aus[aria-pressed="true"] { color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.zelle-inhalt { flex: 1 1 auto; min-width: 0; padding: 4px 14px 14px; }

.zelle-text {
    min-height: 120px; max-height: 70vh; max-height: 70dvh; padding: 12px 14px; outline: none; overflow: auto; overflow-wrap: anywhere; resize: vertical;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.zelle-aus.zelle-hoehe[hidden] { display: none; }
.zelle-hoehe .zelle-hoehe-zu, .zelle-hoehe[aria-pressed="true"] .zelle-hoehe-auf { display: none; }
.zelle-hoehe[aria-pressed="true"] .zelle-hoehe-zu { display: inline-block; }
.zelle-text.ist-voll { max-height: none; }
.zelle-werkzeug + .zelle-text { border-radius: 0 0 var(--radius) var(--radius); }
.raster-zelle:focus-within .zelle-text { border-color: var(--farbe-akzent); }
.zelle-text:empty::before { content: "Hier Text eingeben …"; color: var(--farbe-text-hell); }
.zelle-text > :first-child { margin-top: 0; }
.zelle-text > :last-child { margin-bottom: 0; }
.zelle-text h1, .zelle-text h2, .zelle-text h3, .zelle-text h4 { margin: 0.8em 0 0.4em; line-height: 1.25; color: var(--farbe-kopfleiste); }
.zelle-text h1 { font-size: 1.7rem; } .zelle-text h2 { font-size: 1.4rem; } .zelle-text h3 { font-size: 1.2rem; } .zelle-text h4 { font-size: 1.05rem; }
.zelle-text p { margin: 0 0 0.8em; }
.zelle-text ul, .zelle-text ol { margin: 0 0 0.8em; padding-left: 1.4em; }
.zelle-text img, .zelle-text iframe, .zelle-text video { max-width: 100%; height: auto; }
/* Klassen-Marker im Texteditor (texteditor.js): Anzeige-Ebene über dem Text, nicht Teil des gespeicherten HTML */
.klassen-ebene { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.klassen-ebene[hidden], .klassen-aus .klassen-ebene { display: none; }
.klassen-rahmen { position: absolute; box-sizing: border-box; border: 1px dashed color-mix(in srgb, var(--farbe-primaer) 55%, transparent); border-radius: 3px; }
.klassen-marke { position: absolute; max-width: 16em; padding: 0 8px; overflow: hidden; font: 600 11px/17px ui-monospace, Consolas, monospace; color: var(--farbe-primaer); text-overflow: ellipsis; white-space: nowrap; background: var(--farbe-primaer-hell); border: 1px solid color-mix(in srgb, var(--farbe-primaer) 45%, transparent); border-radius: 999px; cursor: pointer; pointer-events: auto; }
.klassen-marke:hover { color: #fff; background: var(--farbe-primaer); }
/* Auswahl „CSS-Klasse“ (klassenwahl.js): Element wählen, Klassen entfernen, hinzufügen oder aus der Liste wählen */
.dialog-klassenwahl { width: min(640px, calc(100vw - 24px)); }
.dialog-klassenwahl .dialog-formular { max-height: calc(100vh - 24px); overflow-y: auto; box-sizing: border-box; }
.kw-pfad, .kw-aktuell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kw-pfad-knopf { display: inline-flex; gap: 6px; align-items: center; min-height: 34px; padding: 0 12px; font: inherit; font-size: 0.9rem; color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: 999px; cursor: pointer; }
.kw-pfad-knopf:hover { border-color: var(--farbe-primaer); }
.kw-pfad-knopf.ist-aktiv { font-weight: 700; color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); }
.kw-pfad-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; font-size: 0.75rem; font-weight: 700; color: #fff; background: var(--farbe-primaer); border-radius: 999px; }
.kw-klasse { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px; background: var(--farbe-primaer-hell); border: 1px solid color-mix(in srgb, var(--farbe-primaer) 40%, transparent); border-radius: 999px; }
.kw-klasse code, .kw-vorschlag code { font: 600 0.875rem ui-monospace, Consolas, monospace; color: var(--farbe-primaer); }
.kw-klasse-weg { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; font: inherit; font-size: 0.8rem; color: var(--farbe-text-leise); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.kw-klasse-weg:hover { color: var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }
.kw-neu { display: flex; gap: 8px; }
.kw-neu input { flex: 1 1 auto; min-width: 0; }
.kw-warnung { margin: 0; padding: 10px 14px; font-size: 0.9rem; color: color-mix(in srgb, var(--farbe-warnung) 65%, black); background: var(--farbe-warnung-hell); border-radius: var(--radius); }
.kw-warnung[hidden] { display: none; }
.kw-liste { display: grid; gap: 14px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.kw-gruppe { display: grid; gap: 4px; }
.kw-gruppe-titel { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--farbe-text-leise); }
.kw-vorschlag { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 10px; font: inherit; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-klein); cursor: pointer; }
.kw-vorschlag:hover { background: var(--farbe-flaeche-leise); border-color: var(--farbe-rand); }
.kw-vorschlag.ist-gesetzt { background: var(--farbe-primaer-hell); }
.kw-haken { font-weight: 700; color: var(--farbe-primaer); text-align: center; }
.kw-hinweis { overflow: hidden; font-size: 0.875rem; color: var(--farbe-text-leise); text-overflow: ellipsis; white-space: nowrap; }
.zelle-text table { max-width: 100%; border-collapse: collapse; }
.zelle-text td, .zelle-text th { padding: 4px 8px; border: 1px solid var(--farbe-rand-stark); }

.zelle-karte { display: flex; flex-direction: column; gap: 10px; min-height: 84px; }
.zelle-karte p { margin: 0; font-size: 0.9rem; }
.zelle-karte-modul { flex-direction: row; align-items: center; gap: 14px; padding: 12px; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.zelle-karte-modul > .icon { width: 28px; height: 28px; color: var(--farbe-primaer); }
.zelle-bild { max-width: 100%; max-height: 260px; width: auto; height: auto; align-self: flex-start; border-radius: var(--radius-klein); }

/* Dialog: Einstellungen des Abschnitts */
.dialog {
    width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; color: var(--farbe-text);
    background: var(--farbe-flaeche); border: 0; border-radius: var(--radius-gross); box-shadow: var(--schatten-schwebend);
}
.dialog::backdrop { background: rgba(15, 39, 64, 0.45); backdrop-filter: blur(3px); }
.dialog-formular { display: grid; gap: 16px; padding: 22px; }
@media (min-width: 900px) { .dialog-formular { padding: 28px 30px; } }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-kopf h2 { margin: 0; font-size: 1.3rem; color: var(--farbe-kopfleiste); }
.dialog-hinweis { margin: -8px 0 0; font-size: 0.9rem; }
.dialog-spalten { display: grid; gap: 22px 32px; }
@media (min-width: 800px) { .dialog-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dialog .feld input, .dialog .feld select { min-height: 40px; padding: 7px 12px; }
.dialog-ende { margin-top: 4px; }
.feld-fehler-text { margin: 0; padding: 10px 14px; color: color-mix(in srgb, var(--farbe-gefahr) 75%, black); background: var(--farbe-gefahr-hell); border-radius: var(--radius); }
.feld-fehler-text[hidden] { display: none; }
.farbfeld { display: flex; gap: 8px; }
.farbfeld input[type="color"] { flex: none; width: 48px; padding: 3px; cursor: pointer; }
.farbfeld input[type="text"] { flex: 1 1 auto; min-width: 0; }
.datumspaar { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Texteditor (TinyMCE 4, Skin „lightgray") an das Aussehen des Admins angepasst ---------- */
/* Werkzeugleiste: eigener Platz oberhalb des Textes der Spalte, nur bei der Spalte mit dem Cursor sichtbar (Platz bleibt reserviert) */
/* Bleibt beim Scrollen unter der Kopfleiste stehen, solange die Spalte im Bild ist; der Text darunter ist auf 70 % der Fensterhöhe begrenzt (dann Bildlaufleiste) und per Ziehen an der Ecke vergrößerbar (spalteneditor.js hebt dabei die Grenze auf) */
.zelle-werkzeug { position: sticky; top: calc(var(--kopfleiste-hoehe) + 8px); z-index: 20; min-height: 40px; padding: 0; }
/* gedämpft nur die Knöpfe (die Leiste selbst bleibt deckend, damit der darunter scrollende Text nicht durchscheint) */
.zelle-werkzeug .mce-btn-group { opacity: 0.6; transition: opacity var(--uebergang); }
.raster-zelle:focus-within .zelle-werkzeug .mce-btn-group, .zelle-werkzeug:hover .mce-btn-group { opacity: 1; }
.zelle-werkzeug .mce-tinymce, .zelle-werkzeug .mce-tinymce-inline {
    position: static !important; display: block !important; width: auto !important; height: auto !important;
    background: var(--farbe-hintergrund) !important; border: 1px solid var(--farbe-rand-stark) !important; border-bottom: 1px solid var(--farbe-rand-stark) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important; box-shadow: none !important;
}
.zelle-werkzeug .mce-container, .zelle-werkzeug .mce-container-body, .zelle-werkzeug .mce-toolbar-grp, .zelle-werkzeug .mce-toolbar {
    position: static !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; background: transparent !important; border: 0 !important;
}
.zelle-werkzeug .mce-abs-end { display: none !important; }
.zelle-werkzeug .mce-toolbar-grp { padding: 3px 2px !important; }
.zelle-werkzeug .mce-btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; margin: 0 !important; padding: 0 3px; border: 0 !important; border-right: 1px solid var(--farbe-rand-stark) !important; }
.zelle-werkzeug .mce-btn-group:last-child { border-right: 0 !important; }
.zelle-werkzeug .mce-btn-group .mce-btn, .zelle-werkzeug .mce-btn-group .mce-btn:hover { margin: 1px 0 !important; }
.mce-btn { background: transparent !important; border: 0 !important; border-radius: var(--radius-klein) !important; box-shadow: none !important; }
.mce-btn:hover:not(.mce-disabled), .mce-btn:focus { background: var(--farbe-primaer-hell) !important; }
.mce-btn.mce-active, .mce-btn.mce-active:hover { background: var(--farbe-primaer) !important; }
.mce-btn.mce-active i, .mce-btn.mce-active .mce-txt { color: #fff !important; }
.mce-btn .mce-ico, .mce-btn .mce-txt { color: var(--farbe-text) !important; }
.mce-btn.mce-disabled .mce-ico { opacity: 0.35; }
.mce-btn button { padding: 5px 7px !important; }
/* Aufklappmenüs, Dialoge */
.mce-tinymce.mce-floatpanel, .mce-menu.mce-floatpanel, .mce-window, .mce-floatpanel.mce-popover { border-radius: var(--radius) !important; box-shadow: var(--schatten-schwebend) !important; border-color: var(--farbe-rand) !important; }
.mce-window { border-radius: var(--radius-gross) !important; overflow: hidden; }
.mce-menu-item:hover, .mce-menu-item.mce-selected, .mce-menu-item:focus { background: var(--farbe-primaer-hell) !important; }
.mce-menu-item:hover .mce-text, .mce-menu-item.mce-selected .mce-text { color: var(--farbe-text) !important; }
.mce-btn button .mce-txt, .mce-menu-item .mce-text, .mce-label, .mce-textbox, .mce-window-head .mce-title, .mce-combobox input, .mce-listbox .mce-txt { font-family: var(--schrift) !important; }
.mce-window-head .mce-title { font-size: 1.05rem; font-weight: 700; color: var(--farbe-kopfleiste); }
.mce-primary { background: var(--farbe-primaer) !important; border-color: var(--farbe-primaer-dunkel) !important; }
.mce-primary button, .mce-primary button i { color: #fff !important; text-shadow: none !important; }
.mce-edit-focus { outline: none !important; }
.zelle-text.mce-content-body { cursor: text; }
.zelle-text.mce-content-body:focus { outline: none; }

/* Auswahl der Inhaltsart in einer leeren Spalte */
.zelle-wahl { display: grid; gap: 12px; align-content: center; min-height: 150px; }
.zelle-wahl-titel { margin: 0; font-weight: 600; color: var(--farbe-text-leise); text-align: center; }
.zelle-wahl .zelle-rueckgaengig { justify-self: center; }
/* Abschnitt wird gerade auf dem Server in den Papierkorb gelegt */
.abschnitt.ist-loeschend { opacity: 0.55; pointer-events: none; }
.art-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.art-kachel {
    position: relative; display: grid; justify-items: center; gap: 6px; padding: 14px 8px 10px; font: inherit; font-weight: 600; color: var(--farbe-primaer);
    background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); cursor: pointer;
    transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}
.art-kachel .icon { width: 30px; height: 30px; }
.art-kachel small { font-size: 0.7rem; font-weight: 600; color: var(--farbe-text-hell); }
.art-kachel:hover, .art-kachel:focus-visible { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); }
.art-kachel.ist-bald { color: var(--farbe-text-hell); }
.art-kachel.ist-bald:hover { background: var(--farbe-flaeche-leise); border-color: var(--farbe-rand-stark); }
.raster-zelle[data-typ=""] .zelle-leeren { display: none; }
/* Werkzeugleiste umbricht in schmalen Spalten */
.zelle-werkzeug .mce-tinymce { overflow: visible !important; }
.zelle-werkzeug .mce-toolbar .mce-container-body { display: flex !important; flex-wrap: wrap; white-space: normal !important; overflow: visible !important; }
.zelle-werkzeug .mce-btn-group > div { display: flex; flex-wrap: wrap; }
.zelle-werkzeug .mce-btn { float: none !important; position: relative !important; left: auto !important; top: auto !important; }
/* Kacheln: in schmalen Spalten 2 × 2, ab genug Breite 4 nebeneinander */
.zelle-inhalt { container-type: inline-size; }
.art-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 400px) { .art-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mce-btn button { padding: 4px 4px !important; }
/* Werkzeugleiste: eng in schmalen Spalten (2–4 Spalten), luftig, wenn die Spalte breit genug für alle Werkzeuge in einer Reihe ist (Björn, 19.10.2026) */
.zelle-werkzeug { container-type: inline-size; }
@container (min-width: 760px) {
    .mce-btn button { padding: 6px 9px !important; }
    .mce-btn-group { padding: 0 6px !important; }
}

/* ---------- Grafik, Video, Modul in der Spalte; Medien- und Modulauswahl ---------- */
.zelle-bildwahl { display: grid; gap: 10px; justify-items: start; }
.bild-rahmen { display: grid; justify-items: start; align-items: center; width: 100%; min-height: 110px; padding: 8px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.zelle-bildwahl .zelle-bild { display: block; max-width: 100%; max-height: 300px; width: auto; height: auto; border-radius: var(--radius-klein); }
.bild-leer { display: grid; justify-items: center; gap: 6px; color: var(--farbe-text-hell); text-align: center; word-break: break-all; }
.bild-leer .icon { width: 34px; height: 34px; }
.zelle-pfad { margin: 0; max-width: 100%; font-size: 0.8rem; color: var(--farbe-text-leise); word-break: break-all; }
.zelle-pfad:empty { display: none; }
.zelle-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; font-size: 0.85rem; color: color-mix(in srgb, var(--farbe-warnung) 60%, black); background: var(--farbe-warnung-hell); border-radius: var(--radius-klein); }
.zelle-hinweis[hidden] { display: none; }

.zelle-video { display: grid; gap: 12px; }
.zelle-video .feld input[type="text"], .zelle-video .feld textarea { min-height: 40px; padding: 7px 12px; }
.zelle-video .feld textarea { min-height: 64px; resize: vertical; }
.pfadfeld-zeile { display: flex; align-items: center; gap: 6px; }
.pfadfeld-zeile input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; background: var(--farbe-flaeche-leise); }
.pfadfeld-zeile .knopf-icon { width: 34px; height: 34px; }
.pfadfeld-leeren[hidden] { display: none; }
.video-mehr summary { cursor: pointer; font-weight: 600; color: var(--farbe-primaer); padding: 6px 0; }
.video-mehr-inhalt { display: grid; gap: 12px; padding-top: 8px; }
.video-optionen { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.zelle-karte-modul .modul-text { display: grid; gap: 4px; min-width: 0; }
.zelle-karte-modul .modul-text p { margin: 0; }
.zelle-karte-modul .modul-text strong { color: var(--farbe-kopfleiste); }
.zelle-karte-modul .knopf-reihe { margin-top: 6px; }

.dialog-medien { width: min(1000px, calc(100vw - 24px)); }
.dialog-medien.ist-ziel { outline: 3px dashed var(--farbe-akzent); outline-offset: -8px; }
.medien-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.medien-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; color: var(--farbe-text-leise); }
.medien-pfad button { padding: 4px 8px; font: inherit; font-weight: 600; color: var(--farbe-primaer); background: transparent; border: 0; border-radius: var(--radius-klein); cursor: pointer; }
.medien-pfad button:hover { background: var(--farbe-primaer-hell); }
.medien-liste {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; align-content: start;
    min-height: 200px; max-height: min(52vh, 460px); overflow: auto; padding: 4px; outline: none;
}
.medium {
    display: grid; grid-template-rows: 96px auto auto; gap: 6px; justify-items: center; align-content: start; padding: 8px; font: inherit; color: var(--farbe-text);
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); cursor: pointer; text-align: center;
    transition: border-color var(--uebergang), background var(--uebergang);
}
.medium:hover { border-color: var(--farbe-primaer); }
.medium[aria-pressed="true"] { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); box-shadow: 0 0 0 2px var(--farbe-primaer); }
.medium-bild { display: grid; place-items: center; width: 100%; height: 96px; overflow: hidden; background: var(--farbe-flaeche-leise); border-radius: var(--radius-klein); }
.medium-bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.medium-bild .icon { width: 36px; height: 36px; color: var(--farbe-primaer); }
.medium.ist-ordner .medium-bild { background: var(--farbe-primaer-hell); }
.medium-name { max-width: 100%; font-size: 0.85rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.medium small { color: var(--farbe-text-hell); }
.medien-leer { grid-column: 1 / -1; margin: 24px 0; text-align: center; }
.medien-tipp { margin: 0; font-size: 0.85rem; }
.medien-auswahl { margin-left: auto; min-width: 0; overflow-wrap: anywhere; }

.dialog-modul { width: min(1040px, calc(100vw - 24px)); }
.modul-liste { display: grid; gap: 16px; max-height: min(62vh, 560px); overflow: auto; padding: 2px; }
.modul-wahl-suche { flex: none; }
.modul-wahl-suche[hidden], .modul-wahl[hidden], .modul-wahl-gruppe[hidden] { display: none; }
.modul-liste section { display: grid; gap: 6px; }
/* Auswahlfenster: Karten der Modultypen, nur Symbol und Titel (Bereichsfarbe wie in der Modul-Übersicht), danach die Einträge */
.modul-wahl-raster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.modul-wahl {
    --bereich-farbe: var(--farbe-primaer);
    display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; padding: 14px 8px 12px; font: inherit; color: var(--farbe-text); text-align: center; cursor: pointer;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-left: 5px solid color-mix(in srgb, var(--bereich-farbe) 55%, var(--farbe-flaeche)); border-radius: var(--radius);
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.modul-wahl.bereich-1 { --bereich-farbe: var(--farbe-akzent); }
.modul-wahl.bereich-2 { --bereich-farbe: var(--farbe-flieder); }
.modul-wahl.bereich-3 { --bereich-farbe: var(--farbe-primaer); }
.modul-wahl.bereich-4 { --bereich-farbe: var(--farbe-warnung); }
.modul-wahl:hover, .modul-wahl:focus-visible { border-color: color-mix(in srgb, var(--bereich-farbe) 55%, var(--farbe-rand)); box-shadow: var(--schatten-karte); outline: none; }
.modul-wahl:focus-visible { box-shadow: 0 0 0 2px var(--farbe-akzent); }
.modul-wahl .modul-kachel { width: 44px; height: 44px; margin: 0; border-radius: 13px; }
.modul-wahl .modul-kachel .icon { width: 24px; height: 24px; }
.modul-wahl { position: relative; }
.modul-wahl-gruppe { grid-column: 1 / -1; margin: 4px 0 -2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--farbe-text-hell); }
.modul-wahl-gruppe:not(:first-child) { margin-top: 10px; }
.modul-wahl-stern { position: absolute; top: 7px; right: 7px; width: 14px; height: 14px; color: var(--farbe-warnung); }
.modul-wahl-name { font-weight: 700; font-size: 0.95rem; line-height: 1.25; color: var(--farbe-kopfleiste); overflow-wrap: anywhere; }
.modul-wahl-kopf { display: flex; align-items: center; gap: 10px; }
.modul-wahl-titel { margin: 0; font-size: 1.1rem; color: var(--farbe-kopfleiste); }
.modul-eintrag-neu { gap: 8px; color: var(--farbe-primaer-dunkel, var(--farbe-primaer)); }
.modul-eintrag {
    display: flex; align-items: center; min-height: 46px; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--farbe-text); text-align: left;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); cursor: pointer;
}
.modul-eintrag:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.modul-eintrag[aria-pressed="true"] { border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px var(--farbe-primaer); }

/* Grafik: Platzierung und volle Breite in der Vorschau */
.bild-rahmen[data-ausrichtung="mitte"] { justify-items: center; }
.bild-rahmen[data-ausrichtung="rechts"] { justify-items: end; }
.bild-rahmen[data-breit="1"] .zelle-bild { width: 100%; max-height: none; }
/* Bildquelle: unter dem Bild oder unten im Bild; die Hülle schließt eng ums Bild */
.bild-huelle { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.bild-rahmen[data-breit="1"] .bild-huelle { display: block; width: 100%; }
.bild-quelle-vorschau { font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; }
.bild-rahmen[data-quellenposition^="unten-"] .bild-quelle-vorschau { display: block; margin-top: 4px; color: var(--farbe-text-leise); }
.bild-rahmen[data-quellenposition="unten-links"] .bild-quelle-vorschau { text-align: left; }
.bild-rahmen[data-quellenposition="unten-mitte"] .bild-quelle-vorschau { text-align: center; }
.bild-rahmen[data-quellenposition="unten-rechts"] .bild-quelle-vorschau { text-align: right; }
.bild-rahmen[data-quellenposition^="im-"] .bild-quelle-vorschau { position: absolute; bottom: 0; max-width: 100%; box-sizing: border-box; padding: 2px 8px; color: #fff; background: rgba(0, 0, 0, 0.55); }
.bild-rahmen[data-quellenposition="im-rechts"] .bild-quelle-vorschau { right: 0; }
.bild-rahmen[data-quellenposition="im-links"] .bild-quelle-vorschau { left: 0; }
.bild-zeile > select { flex: 1 1 140px; min-width: 0; min-height: 36px; font-size: 0.92rem; }
.bild-rahmen .bild-leer { justify-self: center; }
.bild-einstellungen { display: grid; gap: 10px; width: 100%; }
.bild-einstellungen .feld input[type="text"] { min-height: 40px; padding: 7px 12px; }
.bild-ausrichtung { display: inline-flex; gap: 2px; padding: 3px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); width: fit-content; }
.bild-ausrichtung .zelle-aus { width: 36px; height: 34px; }
.zelle-bildwahl .zelle-bild { cursor: pointer; }

/* Bestätigungsdialog (zentriert, Hintergrund unscharf) */
.dialog-bestaetigung { width: min(440px, calc(100vw - 32px)); }
.dialog-inhalt { display: grid; gap: 12px; padding: 24px; }
.dialog-inhalt h2 { margin: 0; font-size: 1.3rem; color: var(--farbe-kopfleiste); }
.dialog-inhalt p { margin: 0; color: var(--farbe-text-leise); line-height: 1.55; }
.dialog-aktionen { justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
/* Dritter Weg im Bestätigungsfenster („Speichern und verlassen“): breiter, damit die drei Knöpfe nebeneinander passen */
.dialog-bestaetigung.hat-zusatz { width: min(720px, calc(100vw - 32px)); }
.dialog-bestaetigung.hat-zusatz .dialog-aktionen { flex-wrap: nowrap; }
/* Handy: untereinander über die volle Breite, „Speichern und verlassen“ oben */
@media (max-width: 720px) {
    .dialog-bestaetigung.hat-zusatz .dialog-aktionen { flex-direction: column-reverse; align-items: stretch; }
    .dialog-bestaetigung.hat-zusatz .dialog-aktionen .knopf { justify-content: center; }
}
.dialog-aktionen [hidden] { display: none; }
.knopf-erfolg-voll { background: var(--farbe-erfolg); color: #fff; }
.knopf-erfolg-voll:hover:not(:disabled) { background: color-mix(in srgb, var(--farbe-erfolg) 82%, black); color: #fff; }
.knopf-gefahr-voll { background: var(--farbe-gefahr); color: #fff; }
.knopf-gefahr-voll:hover:not(:disabled) { background: color-mix(in srgb, var(--farbe-gefahr) 82%, black); color: #fff; }

/* Kleine Symbole im Abschnitt (Pfeile, Zahnrad, Auge, Mülleimer): gedämpft, beim Überfahren voll */
.abschnitt-aktionen .knopf-icon { opacity: 0.7; transition: opacity var(--uebergang), background var(--uebergang), color var(--uebergang); }
.abschnitt-aktionen .knopf-icon:not(:disabled):hover, .abschnitt-aktionen .knopf-icon:not(:disabled):focus-visible { opacity: 1; }
.abschnitt-aktionen .knopf-icon[aria-pressed="true"] { opacity: 1; }
.abschnitt-aktionen .knopf-icon:disabled { opacity: 0.3; }.zelle-werkzeug .mce-tinymce.mce-container {
    background: var(--farbe-hintergrund) !important; border: 1px solid var(--farbe-rand-stark) !important;
    border-radius: var(--radius) var(--radius) 0 0 !important;
}
.bild-einstellungen .feld-kopf .auswahl { min-height: 36px; }

/* Grafik-Einstellungen kompakt */
.zelle-bildwahl { gap: 8px; }
.bild-rahmen { min-height: 80px; padding: 6px; }
.bild-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; min-width: 0; }
.bild-zeile > input[type="text"] { flex: 1 1 140px; min-width: 0; min-height: 36px; padding: 5px 10px; font: inherit; font-size: 0.92rem; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-klein); }
.bild-zeile > input[type="text"]:focus { outline: none; border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 22%, transparent); }
.bild-zeile .auswahl-klein { min-height: 34px; gap: 6px; font-size: 0.92rem; }
.bild-zeile .auswahl-klein input { width: 18px; height: 18px; }
.bild-ausrichtung .zelle-aus { width: 32px; height: 30px; }
.bild-mehr summary { cursor: pointer; padding: 2px 0; font-size: 0.88rem; font-weight: 600; color: var(--farbe-primaer); }
.bild-mehr .bild-zeile { padding-top: 6px; }
.zelle-bildwahl .zelle-pfad { flex: 1 1 100px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.dialog-eingabe { min-height: 44px; padding: 8px 14px; font: inherit; color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); }
.dialog-eingabe[hidden] { display: none; }
.dialog-eingabe:focus { outline: none; border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 22%, transparent); }

/* ---------- Papierkorb ---------- */
.pk-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pk-eintrag { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 0; border-top: 1px solid var(--farbe-rand); }
.pk-eintrag:first-child { border-top: 0; }
.pk-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; flex: 1 1 320px; }
.pk-text small { flex-basis: 100%; }
.pk-vorschau { flex-basis: 100%; color: var(--farbe-text-leise); font-size: 0.92rem; overflow-wrap: anywhere; }
.pk-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-aktionen form { margin: 0; }

/* ---------- Schmale Spalten: Inhalt zugeklappt, Symbol öffnet ihn als schwebendes Feld (spalteneditor.js) ---------- */
/* Schwellen (Pixel) legt spalteneditor.js fest: Text/Grafik unter 150, Video/Module unter 250 */
.raster-zelle { position: relative; container: zelle / inline-size; }
.zelle-koerper { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.zelle-zu, .zelle-schliessen { display: none; }
.raster-zelle[data-zugeklappt] { min-height: 0; }
.raster-zelle[data-zugeklappt] .zelle-zu {
    display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
    width: 100%; min-height: 96px; padding: 14px 6px 12px; font: inherit; color: var(--farbe-text-leise);
    background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.zelle-zu-kreis {
    display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; color: var(--farbe-primaer);
    background: var(--farbe-primaer-hell); border: 2px solid transparent; border-radius: 50%;
    transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang);
}
.zelle-zu-kreis .icon { width: 22px; height: 22px; }
.zelle-zu-bild { display: none; width: 100%; height: 100%; object-fit: cover; }
.zelle-zu-kreis.hat-bild .zelle-zu-bild { display: block; }
.zelle-zu-kreis.hat-bild .icon { display: none; }
.zelle-zu-text { max-width: 100%; overflow: hidden; font-size: 0.75rem; font-weight: 600; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.raster-zelle[data-zugeklappt] .zelle-zu:hover .zelle-zu-kreis, .raster-zelle[data-zugeklappt] .zelle-zu:focus-visible .zelle-zu-kreis,
.raster-zelle.ist-offen .zelle-zu-kreis { background: var(--farbe-primaer); border-color: var(--farbe-akzent); color: #fff; }
.raster-zelle[data-zugeklappt] .zelle-zu:focus-visible { outline: none; }

.raster-zelle[data-zugeklappt]:not(.ist-offen) .zelle-koerper { display: none; }
.raster-zelle[data-typ="text"] { --panel-breite: 560px; }
.raster-zelle[data-typ="image"] { --panel-breite: 440px; }
.raster-zelle[data-typ="video"] { --panel-breite: 480px; }
.raster-zelle[data-typ=""] { --panel-breite: 400px; }
.raster-zelle.ist-offen { border-style: solid; border-color: var(--farbe-akzent); }
.raster-zelle[data-zugeklappt].ist-offen .zelle-koerper {
    position: absolute; z-index: 30; top: -2px; left: -1px; width: min(var(--panel-breite, 360px), calc(100vw - 24px));
    background: var(--farbe-flaeche); border: 2px solid var(--farbe-akzent); border-radius: var(--radius);
    box-shadow: var(--schatten-schwebend); animation: feld-auf 140ms ease-out;
}
.raster-zelle[data-zugeklappt].ist-offen .zelle-schliessen { display: inline-flex; margin-left: auto; }
@keyframes feld-auf { from { transform: scale(0.97); transform-origin: top left; } to { transform: none; } }

/* Spaltenkopf in knappen Spalten: nur das Symbol der Art, ohne Beschriftung und Hilfe-Icon */
@container zelle (max-width: 229px) {
    .raster-zelle:not(.ist-offen) .zelle-art > span { display: none; }
    .raster-zelle:not(.ist-offen) .zelle-ausrichtung .hilfe { display: none; }
}

/* Modul-Karte: in schmalen Spalten Symbol über dem Text, Knopf bricht um statt über den Rand zu ragen */
.zelle-karte-modul .knopf { max-width: 100%; height: auto; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; text-align: left; white-space: normal; }
@container (max-width: 300px) { .zelle-karte-modul { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------- Video: Vorschau in der Spalte ---------- */
.video-vorschau { display: grid; gap: 8px; }
.video-rahmen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--farbe-kopfleiste); border-radius: var(--radius); }
.video-rahmen iframe, .video-rahmen video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; }
.video-leer {
    position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12px;
    color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; text-align: center;
}
.video-leer .icon { width: 36px; height: 36px; }
.video-status { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; font-size: 0.85rem; line-height: 1.4; color: var(--farbe-text-leise); background: var(--farbe-flaeche-leise); border-radius: var(--radius-klein); }
.video-status[hidden] { display: none; }
.video-status .icon { flex: none; margin-top: 1px; }
.video-status[data-art="ok"] { color: color-mix(in srgb, var(--farbe-erfolg) 72%, black); background: var(--farbe-erfolg-hell); }
.video-status[data-art="fehler"] { color: color-mix(in srgb, var(--farbe-gefahr) 75%, black); background: var(--farbe-gefahr-hell); }
.video-status[data-art="hinweis"] { color: color-mix(in srgb, var(--farbe-warnung) 60%, black); background: var(--farbe-warnung-hell); }
.video-vorschau[data-zustand="fehler"] .video-rahmen { box-shadow: 0 0 0 2px var(--farbe-gefahr); }
.video-vorschau[data-zustand="ok"] .video-rahmen { box-shadow: 0 0 0 2px var(--farbe-erfolg); }
/* Container-Eigenschaften machen jede Spalte zum eigenen Stapelkontext: ein geöffnetes Feld muss über Nachbarspalten und folgende Abschnitte */
.raster-zelle.ist-offen { z-index: 30; }
.abschnitt:has(.raster-zelle.ist-offen) { position: relative; z-index: 25; }

/* ---------- Einstellungsseiten: Kopfbereich, Meldungen ---------- */
.einstellungen-spalten { display: grid; gap: var(--abstand); align-items: start; }
@media (min-width: 1100px) { .einstellungen-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.einstellungen-spalte { display: grid; gap: var(--abstand); min-width: 0; }
.einstellungen-spalte > .karte + .karte, .einstellungen > .karte + .karte { margin-top: 0; }
/* Kopfbereich: Favicon und Apple Touch Icon nebeneinander (kleine Bilder, die Karten brauchen keine volle Breite) */
.kopf-symbole { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: start; }
.kopf-symbole > .karte { margin: 0; min-width: 0; }
.kopf-symbole .bildfeld-rahmen { max-width: 180px; }
.einstellungen > .karte { margin-bottom: var(--abstand); }
.einstellungen-spalte > .karte { margin-bottom: 0; }
.karte-kopf .hilfe { margin-left: 6px; }
.karte > .text-leise + .bildfeld, .karte > .text-leise + .feld { margin-top: 12px; }
.karte > .feld + .feld, .karte > .feld + .feld-gruppe, .karte > .feld-gruppe + .feld, .karte > .bildfeld + .formular-raster, .karte > .formular-raster + .feld { margin-top: 16px; }
.karte > .formular-raster { margin-bottom: 0; }
/* Farbwert: Farbfläche + Hex-Text (nicht „.farbfeld“: das ist die Karte der Komponenten-Übersicht) */
.farbwert { display: flex; gap: 8px; }
.farbwert input[type="color"] { flex: none; width: 48px; padding: 3px; cursor: pointer; }
.farbwert input[type="text"] { flex: 1 1 auto; min-width: 0; }
.feld-gruppe { margin: 16px 0 0; padding: 0; border: 0; min-width: 0; }
.feld-gruppe legend { padding: 0; }
.auswahl-reihe { display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* Statistik: Kacheln, Vergleichsdiagramm, Geräteanteile, Tabelle, meistbesuchte Seiten */
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 14px; }
.stat-kachel { padding: 14px 16px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.stat-kachel dt { font-size: 0.8125rem; font-weight: 600; color: var(--farbe-text-leise); }
.stat-kachel dd { margin: 4px 0 0; font-size: 1.5rem; font-weight: 700; color: var(--farbe-kopfleiste); }
.karte > .diagramm { margin-top: 18px; }
.diagramm-balken-vorjahr { fill: var(--farbe-rand-stark); }
.diagramm-balken-vorjahr:hover { fill: var(--farbe-text-hell); }
.diagramm-monate span { flex: 1; text-align: center; }
.diagramm-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 0; font-size: 0.875rem; color: var(--farbe-text-leise); }
.legende-punkt { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: -6px; border-radius: 50%; }
.legende-aktuell { background: var(--farbe-akzent); }
.legende-vorjahr { background: var(--farbe-rand-stark); }
.geraet-desktop { fill: var(--farbe-primaer); background: var(--farbe-primaer); }
.geraet-mobil { fill: var(--farbe-akzent); background: var(--farbe-akzent); }
.geraet-tablet { fill: var(--farbe-warnung); background: var(--farbe-warnung); }
.geraete-balken { display: block; width: 100%; height: 14px; overflow: hidden; border-radius: 7px; background: var(--farbe-rand); }
.stat-untertitel { margin: 22px 0 8px; font-size: 0.9375rem; }
.stat-tabelle-rahmen { overflow-x: auto; }
.stat-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stat-tabelle th, .stat-tabelle td { padding: 8px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--farbe-rand); }
.stat-tabelle th:first-child { text-align: left; }
.stat-tabelle thead th { font-size: 0.8125rem; color: var(--farbe-text-leise); }
.stat-tabelle tr.ist-leer td { color: var(--farbe-text-hell); }
.stat-tabelle tfoot th, .stat-tabelle tfoot td { font-weight: 700; border-top: 2px solid var(--farbe-rand-stark); border-bottom: 0; }
.stat-seiten { margin: 0; padding: 0; list-style: none; counter-reset: platz; }
.stat-seite { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--farbe-rand); counter-increment: platz; }
.stat-seite::before { content: counter(platz) “.”; min-width: 2.2em; text-align: right; color: var(--farbe-text-leise); }
.stat-seite-name { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.stat-seite-zahl { font-weight: 700; }
/* Kartenkopf mit Zusatzangabe: Angabe und Hilfe-Symbol rechts zusammen (sonst rutscht das „?” in die Mitte) */
.karte-kopf-rechts { display: inline-flex; align-items: center; gap: 6px; }
/* Kundenlogin: Abzeichen in der Liste, neue Gruppe, Seiten eines Benutzers */
.kl-abzeichen { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-gruppe-neu { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--farbe-rand); }
.kl-gruppe-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.kl-gruppe-zeile input { flex: 1 1 240px; min-width: 0; }
.kl-seiten { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
/* SEO: Unterreiter, Seitenliste mit Titel/Description/noindex, Vorschau wie in der Suche */
/* Aussehen von .unterreiter / .unterreiter-punkt: Block „Reiter / Submenü“ oben */
.unterreiter { display: flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; margin: 0 0 var(--abstand); }
.seo-website { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 14px 0; }
.seo-website dt { font-weight: 600; }
.seo-website dd { margin: 0; overflow-wrap: anywhere; }
.seo-vorschau { position: sticky; top: calc(var(--kopfleiste-hoehe, 72px) + 8px); z-index: 5; margin: 0 0 var(--abstand); padding: 14px 18px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); }
.seo-vorschau[hidden] { display: none; }
.seo-vorschau-kopf { margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--farbe-text-leise); }
.seo-vorschau-url { font-size: 0.8125rem; color: var(--farbe-erfolg); overflow-wrap: anywhere; }
.seo-vorschau-titel { font-size: 1.15rem; color: var(--farbe-primaer); overflow-wrap: anywhere; }
.seo-vorschau-text { font-size: 0.875rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.seo-liste { display: grid; margin-top: 8px; }
.seo-kopfzeile, .seo-zeile { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.4fr) minmax(0, 2fr) 88px; gap: 8px 16px; align-items: start; padding: 12px 0; }
.seo-kopfzeile { align-items: center; padding: 6px 0; font-size: 0.8125rem; font-weight: 600; color: var(--farbe-text-leise); border-bottom: 1px solid var(--farbe-rand); }
.seo-zeile + .seo-zeile { border-top: 1px solid var(--farbe-rand); }
.seo-seite { display: grid; gap: 2px; min-width: 0; }
.seo-name { font-weight: 600; overflow-wrap: anywhere; }
.seo-pfad { font-size: 0.8125rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.seo-status { justify-self: start; padding: 1px 8px; font-size: 0.75rem; border-radius: 999px; background: var(--farbe-warnung-hell); color: color-mix(in srgb, var(--farbe-warnung) 70%, black); }
.seo-ebene-1 { padding-left: 16px; } .seo-ebene-2 { padding-left: 32px; } .seo-ebene-3 { padding-left: 48px; } .seo-ebene-4 { padding-left: 64px; } .seo-ebene-5 { padding-left: 80px; }
.seo-feld { display: grid; gap: 4px; min-width: 0; }
.seo-feld input { width: 100%; }
.seo-feldname { display: none; font-size: 0.8125rem; font-weight: 600; color: var(--farbe-text-leise); }
.seo-zaehler { min-height: 1em; font-size: 0.75rem; color: var(--farbe-text-leise); text-align: right; }
.seo-zaehler.ist-lang { color: var(--farbe-warnung); font-weight: 600; }
.seo-feld.ist-doppelt input { border-color: var(--farbe-warnung); }
.seo-warnung { color: color-mix(in srgb, var(--farbe-warnung) 70%, black); }
.seo-original { font-size: 0.8125rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.seo-noindex { display: flex; align-items: center; min-height: 44px; }
.seo-meta { grid-column: 1 / -1; }
.seo-meta summary { cursor: pointer; font-size: 0.875rem; color: var(--farbe-text-leise); }
.seo-meta textarea { width: 100%; margin-top: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; }
@media (max-width: 900px) {
    .seo-kopfzeile { display: none; }
    .seo-zeile { grid-template-columns: minmax(0, 1fr); }
    .seo-feldname { display: block; }
    .seo-noindex .auswahl { gap: 8px; }
}
/* SEO → Bilder: Vorschau links, Alt-Text/Titel/Quelle rechts */
.seo-bilder-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; }
.seo-bilder-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.seo-bilder-liste { display: grid; margin-top: 8px; }
.seo-bild { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 18px; align-items: start; padding: 14px 0; }
.seo-bild + .seo-bild { border-top: 1px solid var(--farbe-rand); }
.seo-bild-vorschau { display: grid; place-items: center; width: 120px; height: 84px; overflow: hidden; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.seo-bild-vorschau img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.seo-bild-felder { display: grid; gap: 8px; min-width: 0; }
.seo-bild-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.seo-bild-datei { font-weight: 600; overflow-wrap: anywhere; }
.seo-bild-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.seo-bild-zeile input { width: 100%; }
.seo-bild-zeile input.ohne-alt { border-color: var(--farbe-warnung); }
.seo-bilder-seiten { display: flex; align-items: center; justify-content: center; gap: 16px; margin: var(--abstand) 0; }
@media (max-width: 600px) {
    .seo-bild { grid-template-columns: minmax(0, 1fr); }
}
/* Einstellungsseiten: Erklärtext direkt über Feldern bekommt Abstand */
.karte > .text-leise + .formular-raster, .karte > .text-leise + .feld { margin-top: 16px; }
/* Social Media: je Netzwerk eine Zeile (Aktiv · Name · Adresse · Teilen); auf dem Handy untereinander */
.sitemap-auswahl { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 12px; }
.sm-liste { display: grid; gap: 0; margin-top: 16px; }
.sm-kopfzeile, .sm-zeile { display: grid; grid-template-columns: 64px minmax(110px, 170px) minmax(0, 1fr) 80px; gap: 8px 16px; align-items: center; padding: 8px 0; }
.sm-kopfzeile { font-size: 0.8125rem; font-weight: 600; color: var(--farbe-text-leise); border-bottom: 1px solid var(--farbe-rand); }
.sm-zeile + .sm-zeile { border-top: 1px solid var(--farbe-rand); }
.sm-aktiv, .sm-teilen { display: flex; align-items: center; }
.sm-aktiv input, .sm-teilen input { width: 20px; height: 20px; margin: 0; accent-color: var(--farbe-primaer); }
.sm-name { font-weight: 600; }
.sm-url input { width: 100%; }
.sm-fehler { grid-column: 1 / -1; margin: 0; }
@media (max-width: 720px) {
    .sm-kopfzeile { display: none; }
    .sm-zeile { grid-template-columns: auto 1fr auto; }
    .sm-url { grid-column: 1 / -1; order: 4; }
}
/* Länderauswahl der Spam-Abwehr: gleich breite Spalten, die auf dem Handy umbrechen */
.laenderliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 20px; margin: 16px 0; }

/* Bild wählen (Logo, Favicon): Vorschau, Wählen, Entfernen */
.bildfeld { display: grid; gap: 10px; justify-items: start; margin-bottom: 18px; }
.bildfeld-rahmen {
    display: grid; place-items: center; width: 100%; min-height: 110px; padding: 14px; background: var(--farbe-flaeche-leise);
    border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius);
}
.bildfeld-bild { display: block; max-width: 100%; max-height: 180px; width: auto; height: auto; }
.bildfeld-rahmen .bild-leer[hidden], .bildfeld-bild[hidden] { display: none; }
.bildfeld .zelle-pfad { word-break: break-all; }

/* Formatierter Text außerhalb des Spalteneditors */
.textfeld .zelle-werkzeug { opacity: 0.6; }
.textfeld:focus-within .zelle-werkzeug { opacity: 1; }
.textfeld:focus-within .zelle-text { border-color: var(--farbe-akzent); }
.textfeld .zelle-text { min-height: 160px; }

/* ---------- Aufbau der Website ---------- */
.aufbau-raster { display: grid; gap: var(--abstand); align-items: start; }
@media (min-width: 1000px) { .aufbau-raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.aufbau-skizze { display: grid; gap: 12px; padding: 22px; background: var(--farbe-flaeche-leise); }
.aufbau-bereich {
    display: grid; gap: 8px; padding: 14px 16px; color: var(--farbe-text); background: var(--farbe-flaeche);
    border: 2px dashed var(--farbe-rand-stark); border-radius: var(--radius); text-decoration: none;
    transition: border-color var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
a.aufbau-bereich:hover, a.aufbau-bereich:focus-visible { border-style: solid; border-color: var(--farbe-akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe-akzent) 18%, transparent); outline: none; }
.aufbau-bereich.ist-inaktiv { color: var(--farbe-text-hell); background: transparent; cursor: default; }
.aufbau-name { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--farbe-kopfleiste); }
.aufbau-text { font-size: 0.85rem; color: var(--farbe-text-leise); }
.aufbau-inhalt { display: flex; flex-wrap: wrap; gap: 8px; }
.aufbau-klotz { display: inline-grid; place-items: center; min-height: 34px; padding: 0 14px; font-size: 0.8rem; font-weight: 600; color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-radius: var(--radius-klein); }
.aufbau-kopfzeile-zeile { justify-content: space-between; }
.aufbau-logo { min-width: 120px; min-height: 44px; }
.aufbau-suche { min-width: 90px; }
.aufbau-menue .aufbau-klotz { flex: 1 1 70px; }
.aufbau-spalten { flex-wrap: nowrap; }
.aufbau-zeilen { display: grid; flex: 1 1 0; gap: 7px; align-content: start; }
.aufbau-zeilen i { display: block; height: 8px; background: var(--farbe-rand); border-radius: 4px; }
.aufbau-zeilen i:last-child { width: 70%; }
.aufbau-breit { flex: 2 1 0; }
.aufbau-bild { flex: 1 1 0; min-height: 70px; }
.aufbau-fuss { flex-wrap: nowrap; gap: 18px; }
.aufbau-weitere .karte-kopf { margin-bottom: 8px; }
.aufbau-liste { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.aufbau-liste a { display: flex; align-items: flex-start; gap: 12px; padding: 12px; color: var(--farbe-text); border-radius: var(--radius); text-decoration: none; }
.aufbau-liste a:hover, .aufbau-liste a:focus-visible { background: var(--farbe-primaer-hell); outline: none; }
.aufbau-liste .icon { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--farbe-primaer); }
.aufbau-liste span { display: grid; gap: 2px; }
.aufbau-liste small { font-size: 0.85rem; color: var(--farbe-text-leise); }

/* ---------- Sprachen / Bearbeitungssprache (PLAN.md 3.22) ---------- */
.sprach-kuerzel {
    display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-radius: 6px;
}
.sprach-kuerzel-gross { min-width: 48px; height: 48px; font-size: 1rem; border-radius: 12px; }
.sprach-umschalter .aufklapper-ausloeser { gap: 8px; }
.sprach-umschalter .sprach-kuerzel { color: #fff; background: rgba(255, 255, 255, 0.18); }
.sprach-umschalter.ist-fremd .sprach-kuerzel { color: var(--farbe-kopfleiste); background: var(--farbe-akzent); }
.sprach-name { display: none; }
@media (min-width: 1280px) { .sprach-name { display: inline; } }
.aufklapper-eintrag .sprach-kuerzel { margin-right: 10px; }
.handy-menue-sprachen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px; }
.sprach-wahl { min-width: 44px; min-height: 40px; padding: 0 10px; font: inherit; font-weight: 700; color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border: 2px solid transparent; border-radius: var(--radius); cursor: pointer; }
.sprach-wahl.ist-aktiv { border-color: var(--farbe-akzent); }
body.sprache-fremd .kopfleiste { border-bottom: 3px solid var(--farbe-akzent); }

/* Hinweis in anderen Sprachen als der Standardsprache */
.sprache-hinweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; padding: 12px 16px;
    background: var(--farbe-akzent-hell); border: 1px solid color-mix(in srgb, var(--farbe-akzent) 45%, white); border-radius: var(--radius);
}
.sprache-hinweis > div { flex: 1 1 320px; font-size: 0.92rem; }
.sprache-hinweis form { margin: 0; }

/* Aufbau, Reihenfolge und Einstellungen sind nur in der Standardsprache bearbeitbar: Bedienelemente ausblenden (Server sperrt zusätzlich) */
body.sprache-fremd [data-nur-standard] { display: none !important; }

/* Original und Status über einem Textfeld */
.original-box { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px 12px; font-size: 0.9rem; background: var(--farbe-flaeche-leise); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius); }
.original-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--farbe-text-leise); }
.original-kopf .abzeichen { text-transform: none; letter-spacing: 0; }
.original-kopf .original-aktionen { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.original-text { max-height: 140px; overflow: auto; color: var(--farbe-text); overflow-wrap: anywhere; }
.original-text > :first-child { margin-top: 0; }
.original-text > :last-child { margin-bottom: 0; }
.original-text img { max-width: 100%; height: auto; }
.original-leer { color: var(--farbe-text-hell); font-style: italic; }
.zelle-nur-lesen { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; color: var(--farbe-text-leise); background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.zelle-nur-lesen .icon { flex: none; width: 24px; height: 24px; color: var(--farbe-primaer); }
.zelle-nur-lesen img { max-width: 120px; max-height: 80px; border-radius: var(--radius-klein); }

/* Seite „Sprachen" */
.sprachen-raster { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.sprach-karte { display: grid; gap: 14px; margin: 0 !important; }
.sprach-karte.ist-inaktiv { background: var(--farbe-flaeche-leise); }

/* Flaggen (public/assets/img/flaggen.svg, Twig-Funktion flagge()) */
.flagge { flex: none; width: 36px; height: 24px; filter: drop-shadow(0 1px 2px rgba(16, 24, 40, 0.28)); }
.flagge-gross { width: 66px; height: 44px; filter: drop-shadow(0 2px 5px rgba(16, 24, 40, 0.28)); }
.sprach-karte.ist-inaktiv .flagge { filter: saturate(0.6) opacity(0.85) drop-shadow(0 2px 5px rgba(16, 24, 40, 0.22)); }
.sprach-kopf { display: flex; align-items: center; gap: 14px; }
.sprach-titel { display: grid; gap: 4px; min-width: 0; }
.sprach-titel h2 { margin: 0; font-size: 1.15rem; color: var(--farbe-kopfleiste); }
.sprach-titel > span { display: flex; flex-wrap: wrap; gap: 6px; }
.sprach-stand { display: grid; gap: 8px; }
.fortschritt { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 5px; background: var(--farbe-rand); overflow: hidden; }
.fortschritt::-webkit-progress-bar { background: var(--farbe-rand); }
.fortschritt::-webkit-progress-value { background: var(--farbe-erfolg); border-radius: 5px; }
.fortschritt::-moz-progress-bar { background: var(--farbe-erfolg); border-radius: 5px; }
.sprach-zahl { margin: 0; font-size: 0.92rem; }
.sprach-warten { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.88rem; color: var(--farbe-primaer); }
.sprach-verwalten { padding-top: 12px; border-top: 1px solid var(--farbe-rand); }
.sprach-aktion { margin: 0; }
.sprach-aktionsleiste { margin-bottom: var(--abstand); }
.sprach-gruppe { margin-bottom: var(--abstand); }
.sprach-offen { display: grid; margin: 0; padding: 0; list-style: none; }
.sprach-offen li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--farbe-rand); }
.sprach-offen li:first-child { border-top: 0; }
.sprach-offen-text { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
.uebersetzung-original { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.uebersetzung-original strong { font-weight: 600; color: var(--farbe-text); }
/* Übersetzungsansicht: ohne Seitenleiste „Abschnitt hinzufügen" füllt die Liste die ganze Breite */
body.sprache-fremd .raster-layout { grid-template-columns: minmax(0, 1fr); }
.sprache-hinweis { margin-bottom: 22px; }
.sprach-verwalten .knopf-reihe { gap: 8px; }

/* ---------- Slideshow-Editor (PLAN.md 3.23) ---------- */
.ss-formular > .karte { margin-bottom: var(--abstand); }
.ss-einstellungs-raster { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ss-hoehen { margin-top: 20px; }
.ss-hoehen > legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.ss-anzahl { font-weight: 400; color: var(--farbe-text-leise); }

.ss-liste { display: grid; gap: 14px; }
.ss-element { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.ss-element.ist-offen { border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 14%, transparent); }
.ss-element.hat-fehler { border-color: var(--farbe-gefahr); }
.ss-kopf { display: flex; align-items: center; gap: 4px; padding-right: 6px; }
.ss-kopf-haupt {
    display: flex; flex: 1 1 auto; align-items: center; gap: 14px; min-width: 0; min-height: 72px; padding: 10px 12px; font: inherit; color: inherit;
    text-align: left; background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.ss-kopf-haupt:hover { background: var(--farbe-flaeche-leise); }
.ss-nummer {
    display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 30px; padding: 0 8px; font-size: 0.85rem; font-weight: 700;
    color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-radius: 999px;
}
.ss-mini {
    display: grid; place-items: center; flex: none; width: 88px; height: 50px; overflow: hidden; color: var(--farbe-text-hell);
    background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein);
}
.ss-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-titel { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.ss-titel strong, .ss-titel small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-titel small { font-size: 0.85rem; color: var(--farbe-text-leise); }
.ss-warnung[hidden] { display: none; }
.ss-pfeil { flex: none; color: var(--farbe-text-leise); transition: transform var(--uebergang); }
.ss-element.ist-offen .ss-pfeil { transform: rotate(180deg); }
.ss-werkzeuge { display: inline-flex; flex: none; }
.ss-werkzeuge .knopf-icon:disabled { opacity: 0.3; cursor: default; background: transparent; }
.ss-werkzeuge .knopf-icon-gefahr:hover { color: var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }
.ss-koerper { padding: 6px 18px 22px; border-top: 1px solid var(--farbe-rand); }
.ss-koerper[hidden] { display: none; }
.ss-spalten { display: grid; gap: 24px; align-items: start; margin-top: 16px; }
@media (min-width: 1000px) { .ss-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.ss-links, .ss-rechts { display: grid; gap: 16px; min-width: 0; align-content: start; }
.ss-links > .feld-gruppe, .ss-rechts > .feld-gruppe { margin-top: 0; }
.ss-bildbereich { display: grid; gap: 14px; }
.ss-bildbereich[hidden], .ss-modulbereich[hidden], [data-ss-videooptionen][hidden] { display: none; }

/* Bildrahmen mit Positionswahl der Textbox */
.ss-rahmen {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--farbe-flaeche-leise); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius);
}
.ss-rahmen .ss-bild { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-rahmen .ss-bild[hidden], .ss-rahmen .bild-leer[hidden] { display: none; }
.ss-positionen { position: absolute; inset: 0; display: none; grid-template: repeat(3, 1fr) / repeat(3, 1fr); }
.ss-element.hat-textbox .ss-positionen { display: grid; }
.ss-pos { position: relative; display: block; cursor: pointer; }
.ss-pos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ss-pos-feld { position: absolute; inset: 4px; display: grid; place-items: center; border: 2px dashed transparent; border-radius: var(--radius-klein); transition: background var(--uebergang), border-color var(--uebergang); }
.ss-pos:hover .ss-pos-feld { background: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.9); }
.ss-pos input:focus-visible + .ss-pos-feld { border-color: var(--farbe-akzent); }
.ss-pos-marke {
    display: none; padding: 5px 12px; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--farbe-primaer);
    border-radius: var(--radius-klein); box-shadow: 0 2px 8px rgba(15, 39, 64, 0.35);
}
.ss-pos input:checked + .ss-pos-feld .ss-pos-marke { display: inline-block; }
.ss-pos input:disabled { cursor: default; }

.ss-modulbereich { margin: 0; }
.ss-link .auswahlgruppe { display: grid; gap: 0; }
.ss-link-eigene, .ss-link-andere { margin-top: 10px; }
.ss-link-eigene[hidden], .ss-link-andere[hidden] { display: none; }
.ss-link .hinweis { margin-top: 14px; }
.ss-leer { border: 2px dashed var(--farbe-rand-stark); border-radius: var(--radius); }
.ss-leer[hidden] { display: none; }

@media (max-width: 640px) {
    .ss-kopf { flex-wrap: wrap; padding-right: 0; }
    .ss-mini { width: 64px; height: 40px; }
    .ss-warnung { display: none; }
    .ss-werkzeuge { margin-left: auto; padding: 0 6px 6px; }
}

/* ---------- Seite anlegen im Fenster, Plus zwischen den Zeilen ---------- */
.feld-hilfe:empty { display: none; }
.dialog-seite-neu { width: min(640px, calc(100vw - 24px)); }
.seite-neu-formular { display: grid; gap: 26px; }
.seite-neu-formular .formular-raster { margin-bottom: 0; }
.seite-neu-formular .formular-raster > * { grid-column: 1 / -1; }
.formular-zeile-2 { display: grid; gap: 18px; }
@media (min-width: 560px) { .formular-zeile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dialog-hinweis { margin: -6px 0 0; }
.ansicht-wahl { display: grid; gap: 10px; margin-top: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 480px) { .ansicht-wahl { grid-template-columns: minmax(0, 1fr); } }
.ansicht-karte { position: relative; display: block; cursor: pointer; }
.ansicht-karte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ansicht-inhalt {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 12px 8px; text-align: center;
    font-weight: 600; font-size: 0.95rem; color: var(--farbe-text-leise); background: var(--farbe-flaeche); border: 2px solid var(--farbe-rand);
    border-radius: var(--radius); transition: border-color var(--uebergang), background var(--uebergang), color var(--uebergang);
}
.ansicht-inhalt .icon { width: 24px; height: 24px; }
.ansicht-karte:hover .ansicht-inhalt { border-color: var(--farbe-rand-stark); background: var(--farbe-flaeche-leise); }
.ansicht-karte input:checked + .ansicht-inhalt { color: var(--farbe-primaer-dunkel); background: var(--farbe-primaer-hell); border-color: var(--farbe-akzent); }
.ansicht-karte input:focus-visible + .ansicht-inhalt { outline: 3px solid color-mix(in srgb, var(--farbe-akzent) 60%, transparent); outline-offset: 2px; }

.baum { position: relative; }
.baum-einfuegen { position: absolute; left: 0; right: 0; height: 0; z-index: 5; pointer-events: none; }
.baum-einfuegen[hidden] { display: none; }
.baum-einfuegen-linie { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--farbe-akzent); opacity: 0.85; }
.baum-einfuegen-knopf {
    position: absolute; left: 3px; top: -17px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; pointer-events: auto;
    color: var(--farbe-kopfleiste-text); background: var(--farbe-primaer); border: 2px solid var(--farbe-flaeche); border-radius: 50%;
    box-shadow: 0 2px 8px rgba(15, 39, 64, 0.3); cursor: pointer; transition: transform var(--uebergang), background var(--uebergang);
}
.baum-einfuegen-knopf:hover, .baum-einfuegen-knopf:focus-visible { background: var(--farbe-primaer-dunkel); transform: scale(1.12); }
.baum-einfuegen-knopf .icon { width: 19px; height: 19px; }
.baum.ist-am-ziehen .baum-einfuegen { display: none; }
@media (hover: none) { .baum-einfuegen { display: none; } }
.baum-slideshow-link { text-decoration: none; }

/* ---------- Medienverwaltung (PLAN.md 3.25) ---------- */
[data-bestaetigung-text] { white-space: pre-line; }
.medien { position: relative; }
.medien > .hinweis { margin: 0 0 16px; }
.medien-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.medien-leiste-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.medien-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; min-width: 0; }
.medien-pfad a { color: var(--farbe-primaer); text-decoration: none; padding: 4px 6px; border-radius: var(--radius-klein); }
.medien-pfad a:hover { background: var(--farbe-primaer-hell); }
.medien-pfad a[aria-current="page"] { color: var(--farbe-kopfleiste); }
.medien-pfad-start { display: inline-flex; align-items: center; gap: 7px; }
.medien-pfad-start .icon { width: 18px; height: 18px; margin-top: -1px; }
.medien-pfad-trenner { color: var(--farbe-text-hell); }
/* Hochladen / Neuer Ordner / Aktualisieren als Symbole neben dem Ordnerpfad (dunkel, damit sie sich vom Pfad abheben) */
.medien-icons { display: inline-flex; gap: 2px; padding-left: 12px; border-left: 1px solid var(--farbe-rand); }
.medien-icons .knopf-icon { width: 38px; height: 38px; color: var(--farbe-kopfleiste); }
.medien-icons .knopf-icon:hover, .medien-icons .knopf-icon:focus-visible { color: var(--farbe-primaer); background: var(--farbe-primaer-hell); outline: none; }
.medien-icons .knopf-icon.ist-laedt .icon { animation: drehen 700ms linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.medien-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Speicherplatz (Kontingent der Website) */
.medien-speicher { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; max-width: 100%; padding: 10px 16px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.reiter-zusatz .medien-speicher { flex: 1 1 auto; max-width: 760px; }
.medien-speicher-titel { font-weight: 600; }
.medien-speicher-balken { appearance: none; -webkit-appearance: none; flex: 1 1 80px; min-width: 70px; height: 10px; border: 0; border-radius: 999px; overflow: hidden; background: var(--farbe-rand); }
.medien-speicher-balken::-webkit-progress-bar { background: var(--farbe-rand); border-radius: 999px; }
.medien-speicher-balken::-webkit-progress-value { background: var(--farbe-primaer); border-radius: 999px; }
.medien-speicher-balken::-moz-progress-bar { background: var(--farbe-primaer); border-radius: 999px; }
.medien-speicher.ist-knapp .medien-speicher-balken::-webkit-progress-value { background: var(--farbe-warnung); }
.medien-speicher.ist-knapp .medien-speicher-balken::-moz-progress-bar { background: var(--farbe-warnung); }
.medien-speicher.ist-voll .medien-speicher-balken::-webkit-progress-value { background: var(--farbe-gefahr); }
.medien-speicher.ist-voll .medien-speicher-balken::-moz-progress-bar { background: var(--farbe-gefahr); }
.medien-speicher-text { font-size: 0.92rem; color: var(--farbe-text-leise); }
.medien-speicher.ist-voll .medien-speicher-text { color: var(--farbe-gefahr); }
.medien-speicher-mehr { margin-left: auto; white-space: nowrap; flex: none; }
.medien-speicher-dialog { margin: 10px 0 0; padding: 8px 12px; }
.medien-speicher-dialog[hidden] { display: none; }
.medien-speicher-text { white-space: nowrap; }

/* Mehr Speicherplatz: drei Pakete (Medien → Speicherplatz, E79) */
.sp-stand { margin-bottom: 16px; }
.sp-stand .medien-speicher { border: 0; padding: 0; background: none; }
.sp-pakete { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0; }
@media (max-width: 1000px) { .sp-pakete { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.sp-paket, .sp-paket + .sp-paket { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; text-align: center; }
/* Illustration: Kachel mit Farbverlauf und Farbklassen .wk-* der Einführung (.willkommen-bild), hier kleiner */
.sp-paket .sp-bild { order: 0; padding: 14px 16px; border-radius: 16px; }
.sp-paket .sp-bild svg { max-height: 170px; }
.sp-name { margin: 6px 0 0; font-size: 1.35rem; }
.sp-menge { margin: 0; font-size: 1.05rem; color: var(--farbe-primaer); }
.sp-text { margin: 4px 0 8px; color: var(--farbe-text-leise); flex: 1 1 auto; }
.sp-preis { margin: 0 0 8px; font-size: 1.05rem; }
.sp-preis strong { font-size: 1.5rem; }
.sp-knopf { width: 100%; justify-content: center; }
.sp-hinweis, .sp-kontakt { max-width: 760px; }

/* Filter nach Dateiart – gleiche helle Gestalt wie der Umschalter Kacheln/Liste (.medien-ansicht), bewusst nicht wie das Submenü */
.medien-filter { display: inline-flex; gap: 2px; padding: 3px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.medien-filter-punkt {
    display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; font: inherit; font-weight: 600; white-space: nowrap;
    color: var(--farbe-text-leise); background: transparent; border: 0; border-radius: var(--radius-klein); cursor: pointer;
    transition: background-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
}
.medien-filter-punkt:hover { color: var(--farbe-text); background: color-mix(in srgb, var(--farbe-flaeche) 60%, transparent); }
.medien-filter-punkt:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.medien-filter-punkt.ist-aktiv { color: var(--farbe-primaer); background: var(--farbe-flaeche); box-shadow: 0 1px 3px rgba(15, 39, 64, 0.15); }
.medien-filter-zahl { min-width: 22px; padding: 1px 6px; font-size: 0.76rem; font-weight: 700; text-align: center; color: var(--farbe-text-leise); background: var(--farbe-rand); border-radius: 999px; }
.medien-filter-punkt.ist-aktiv .medien-filter-zahl { color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
@media (max-width: 1100px) { .medien-filter-text { display: none; } .medien-filter-punkt { padding: 0 10px; } }
.medien-unverwendet-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 0.88rem; }
.medien-unverwendet-hinweis .icon { flex: none; margin-top: 2px; }

.medien-sortierung { display: inline-flex; align-items: center; gap: 6px; }
.medien-sortierung select { min-height: 40px; padding: 6px 12px; font: inherit; color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); }
.medien-richtung { width: 40px; height: 40px; color: var(--farbe-kopfleiste); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); }
.medien-richtung .icon { transition: transform var(--uebergang); }
.medien-richtung.ist-absteigend .icon { transform: rotate(180deg); }
.medien-ansicht { display: inline-flex; padding: 3px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.medien-ansicht .knopf-icon { width: 36px; height: 36px; border-radius: var(--radius-klein); }
.medien-ansicht .knopf-icon[aria-pressed="true"] { color: var(--farbe-primaer); background: var(--farbe-flaeche); box-shadow: 0 1px 3px rgba(15, 39, 64, 0.15); }

.medien-sammel {
    position: sticky; top: calc(var(--kopfleiste-hoehe) + 8px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    margin-bottom: 16px; padding: 8px 14px; background: var(--farbe-primaer-hell); border: 1px solid color-mix(in srgb, var(--farbe-akzent) 45%, white); border-radius: var(--radius);
}
.medien-sammel[hidden] { display: none; }
.medien-sammel .auswahl { min-height: 36px; font-weight: 600; }

.medien-upload { display: grid; gap: 8px; margin-bottom: 16px; padding: 12px 14px; background: var(--farbe-flaeche-leise); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius); }
.medien-upload[hidden] { display: none; }
.upload-zeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) minmax(0, 1.2fr); align-items: center; gap: 12px; font-size: 0.92rem; }
.upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.upload-balken { display: block; height: 8px; overflow: hidden; background: var(--farbe-rand); border-radius: 4px; }
.upload-balken i { display: block; width: 0; height: 100%; background: var(--farbe-akzent); transition: width 120ms linear; }
.upload-zeile.ist-fertig .upload-balken i { background: var(--farbe-erfolg); }
.upload-zeile.ist-fehler .upload-balken i { width: 100%; background: var(--farbe-gefahr); }
.upload-zeile.ist-fehler .upload-status { color: var(--farbe-gefahr); }
@media (max-width: 600px) { .upload-zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.medien-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.medien-eintrag {
    position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.medien-eintrag:hover { border-color: var(--farbe-rand-stark); box-shadow: var(--schatten-karte); }
.medien-eintrag.ist-gewaehlt { border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 20%, transparent); }
.medien-eintrag[hidden] { display: none; }
/* Verschieben per Ziehen: gezogene Einträge blasser, Ablageziel (Ordner, „Eine Ebene höher“, Pfadabschnitt) hervorgehoben */
.medien-eintrag.ist-gezogen { opacity: 0.45; }
.medien-eintrag.ist-ablageziel { border-color: var(--farbe-akzent); background: var(--farbe-akzent-hell); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 28%, transparent); }
.medien-pfad a.ist-ablageziel { background: var(--farbe-akzent-hell); box-shadow: 0 0 0 2px var(--farbe-akzent); }
/* Klon eines Eintrags, der in den Zielordner „fliegt“ (medien.js: einfliegen) */
.medien-flug { position: fixed; z-index: 90; margin: 0; pointer-events: none; transform-origin: center; box-shadow: var(--schatten-schwebend); }.medien-vorschau {
    position: relative; display: grid; place-items: center; align-content: center; gap: 6px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; color: var(--farbe-text-hell);
    background: var(--farbe-flaeche-leise); border: 0; border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; text-decoration: none;
}
.medien-vorschau img { display: block; width: 100%; height: 100%; object-fit: cover; }
.medien-vorschau .icon { width: 44px; height: 44px; }
.ist-ordner .medien-vorschau { color: var(--farbe-akzent); background: var(--farbe-akzent-hell); }
.medien-endung { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--farbe-text-leise); }
.medien-info { display: grid; gap: 2px; min-width: 0; padding: 10px 44px 12px 12px; }
.medien-name { display: block; padding: 0; overflow: hidden; font: inherit; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-kopfleiste); background: transparent; border: 0; text-decoration: none; cursor: pointer; }
.medien-name:hover { color: var(--farbe-primaer); text-decoration: underline; text-underline-offset: 3px; }
.medien-meta { font-size: 0.85rem; color: var(--farbe-text-leise); }
.medien-haken {
    position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-klein); opacity: 0; transition: opacity var(--uebergang); cursor: pointer;
}
.medien-haken input { width: 18px; height: 18px; margin: 0; accent-color: var(--farbe-primaer); cursor: pointer; }
.medien-eintrag:hover .medien-haken, .medien-haken:focus-within, .medien-eintrag.ist-gewaehlt .medien-haken, .medien-sammel:not([hidden]) ~ .medien-raster .medien-haken { opacity: 1; }
@media (hover: none) { .medien-haken { opacity: 1; } }
.medien-menue { position: absolute; right: 4px; bottom: 6px; z-index: 3; }
.medien-menue > summary { width: 36px; height: 36px; }
.medien-eintrag.ist-hoch { grid-template-rows: auto; text-decoration: none; border-style: dashed; }
.medien-eintrag.ist-hoch .medien-vorschau { aspect-ratio: 4 / 2; border-radius: var(--radius) var(--radius) 0 0; }
.medien-eintrag.ist-hoch .medien-info { padding-right: 12px; }
.medien-fuss { margin: 18px 0 0; font-size: 0.88rem; }
.medien-ziehen {
    position: fixed; inset: calc(var(--kopfleiste-hoehe) + 12px) 12px 12px 12px; z-index: 60; display: grid; place-items: center; align-content: center; gap: 12px;
    padding: 20px; font-size: 1.2rem; font-weight: 700; text-align: center; color: var(--farbe-primaer-dunkel); pointer-events: none;
    background: color-mix(in srgb, var(--farbe-akzent) 18%, white); border: 3px dashed var(--farbe-akzent); border-radius: var(--radius-gross);
}
.medien-ziehen[hidden] { display: none; }
.medien-ziehen .icon { width: 48px; height: 48px; }

/* Kachelansicht: Typ steht in der Vorschau, die übrigen Angaben als eine Zeile */
.medien-kopfzeile { display: none; }
.medien-meta .m-typ { display: none; }
.medien-meta .m-masse:not(:empty)::before, .medien-meta .m-datum::before { content: " · "; }

/* Listenansicht: Spalten Dateiname, Typ, Größe, Maße, Datum – der Kopf (.medien-kopfzeile) sortiert */
.medien-raster.ist-liste { --liste-spalten: 34px 56px minmax(0, 1fr) 70px 100px 116px 100px 40px; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.ist-liste .medien-kopfzeile {
    display: grid; grid-template-columns: var(--liste-spalten); align-items: center; gap: 0 12px; padding: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--farbe-text-leise); background: var(--farbe-primaer-hell); border-bottom: 1px solid var(--farbe-rand); border-radius: var(--radius) var(--radius) 0 0;
}
.medien-kopf-haken { display: grid; place-items: center; width: 34px; height: 30px; cursor: pointer; }
.medien-kopf-haken input { width: 18px; height: 18px; margin: 0; accent-color: var(--farbe-primaer); cursor: pointer; }
.medien-kopf-spalte { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; background: transparent; border: 0; }
button.medien-kopf-spalte { cursor: pointer; }
button.medien-kopf-spalte:hover, button.medien-kopf-spalte:focus-visible { color: var(--farbe-primaer); outline: none; }
.medien-kopf-spalte .icon { width: 14px; height: 14px; opacity: 0; transition: transform var(--uebergang), opacity var(--uebergang); }
.medien-kopf-spalte.ist-sortiert { color: var(--farbe-primaer); }
.medien-kopf-spalte.ist-sortiert .icon { opacity: 1; }
.medien-kopf-spalte.ist-absteigend .icon { transform: rotate(180deg); }
.ist-liste .medien-eintrag { grid-template-rows: auto; grid-template-columns: var(--liste-spalten); align-items: center; gap: 0 12px; padding: 6px 8px; border: 0; border-top: 1px solid var(--farbe-rand); border-radius: 0; box-shadow: none; }
.ist-liste .medien-kopfzeile + .medien-eintrag { border-top: 0; }
.ist-liste .medien-eintrag:hover { background: var(--farbe-flaeche-leise); }
.ist-liste .medien-haken { position: static; opacity: 1; width: 34px; height: 34px; background: transparent; }
.ist-liste .medien-vorschau { width: 56px; height: 42px; aspect-ratio: auto; border-radius: var(--radius-klein); }
.ist-liste .medien-vorschau .icon { width: 24px; height: 24px; }
.ist-liste .medien-endung { display: none; }
/* Name und Angaben werden zu eigenen Spalten des Eintrags */
.ist-liste .medien-info, .ist-liste .medien-meta { display: contents; }
.ist-liste .medien-name { min-width: 0; }
.ist-liste .medien-meta > span { min-width: 0; overflow: hidden; font-size: 0.9rem; color: var(--farbe-text-leise); text-overflow: ellipsis; white-space: nowrap; }
.ist-liste .medien-meta .m-typ { display: block; font-weight: 600; letter-spacing: 0.03em; }
.ist-liste .medien-meta .m-masse::before, .ist-liste .medien-meta .m-datum::before { content: none; }
.ist-liste .medien-menue { position: static; }
.ist-liste .medien-eintrag.ist-hoch { grid-template-columns: 56px minmax(0, 1fr); padding-left: 52px; }
/* Seite „Nicht verwendet“: zusätzliche Spalte „Ordner“ hinter dem Dateinamen */
.medien-raster.ist-liste.hat-ordner { --liste-spalten: 34px 56px minmax(0, 1.1fr) minmax(0, 0.9fr) 70px 100px 116px 100px 40px; }
.ist-liste .m-ordner a { color: var(--farbe-text-leise); text-decoration: none; }
.ist-liste .m-ordner a:hover { color: var(--farbe-primaer); text-decoration: underline; }
.m-ordner { display: none; }
.ist-liste .m-ordner { display: block; }
@media (max-width: 860px) {
    .medien-raster.ist-liste { --liste-spalten: 34px 52px minmax(0, 1fr) 88px 100px 40px; }
    .medien-raster.ist-liste.hat-ordner { --liste-spalten: 34px 52px minmax(0, 1fr) minmax(0, 1fr) 88px 100px 40px; }
    .ist-liste .m-typ, .ist-liste .m-masse, .ist-liste .spalte-typ, .ist-liste .spalte-masse { display: none !important; }
}
@media (max-width: 560px) {
    .medien-raster.ist-liste { --liste-spalten: 34px 52px minmax(0, 1fr) 80px 40px; }
    .medien-raster.ist-liste.hat-ordner { --liste-spalten: 34px 52px minmax(0, 1fr) 80px 40px; }
    .ist-liste.hat-ordner .m-ordner, .ist-liste.hat-ordner .spalte-ordner { display: none !important; }
    .ist-liste .m-datum, .ist-liste .spalte-datum { display: none !important; }
}

/* Datei ansehen */
.dialog-medium-detail { width: min(760px, calc(100vw - 24px)); }
.datei-vorschau { display: grid; place-items: center; min-height: 120px; max-height: 52vh; overflow: hidden; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.datei-vorschau img, .datei-vorschau video { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; object-fit: contain; }
.datei-vorschau video { width: 100%; background: #000; }
.datei-symbol { display: grid; place-items: center; gap: 8px; padding: 30px; color: var(--farbe-text-hell); }
.datei-symbol .icon { width: 64px; height: 64px; }
.datei-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; font-size: 0.95rem; }
.datei-daten dt { color: var(--farbe-text-leise); }
.datei-daten dd { margin: 0; overflow-wrap: anywhere; }
.datei-verwendung { font-size: 0.95rem; }
.datei-verwendung ul { margin: 6px 0 0; padding-left: 20px; }
.ist-gefahr:not(.knopf-icon):hover { color: var(--farbe-gefahr); }

.datei-farbhinweis { margin: 0; align-items: flex-start; font-size: 0.92rem; }
.upload-zeile.ist-fertig .upload-status { color: var(--farbe-text); }
.upload-zeile { align-items: start; }

/* ---------- Bild-Beschnitt (PLAN.md 3.26) ---------- */
.beschnitt-leer { display: grid; justify-items: center; gap: 12px; padding: 48px 20px; text-align: center; }
.beschnitt-leer .leerzustand-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--farbe-akzent-hell); color: var(--farbe-primaer); }
.beschnitt-leer .leerzustand-icon .icon { width: 30px; height: 30px; }

.beschnitt { display: grid; gap: var(--abstand); align-items: start; grid-template-areas: "format" "buehne" "rechts" "fertig"; }
.beschnitt-format { grid-area: format; }
.beschnitt-buehne-karte { grid-area: buehne; }
.beschnitt-rechts { grid-area: rechts; }
.beschnitt-fertig { grid-area: fertig; }
/* Mittlere Breite: Formate links, Bühne rechts, Vorschau und Datei darunter nebeneinander */
@media (min-width: 800px) {
    .beschnitt { grid-template-columns: 290px minmax(0, 1fr); grid-template-areas: "format buehne" "rechts rechts" "fertig fertig"; }
    .beschnitt-rechts { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Breit: Formate | Beschnitt | Vorschau und neue Datei */
@media (min-width: 1250px) {
    .beschnitt { grid-template-columns: 290px minmax(0, 1fr) 330px; grid-template-areas: "format buehne rechts" "fertig fertig fertig"; }
    .beschnitt-rechts { grid-template-columns: minmax(0, 1fr); }
}
.beschnitt-buehne-karte { padding: 14px; min-width: 0; }
.beschnitt-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.werkzeug-gruppe { display: inline-flex; padding: 3px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.werkzeug-gruppe .knopf-icon { width: 38px; height: 38px; border-radius: var(--radius-klein); }
.werkzeug-gruppe .knopf-icon:hover { background: var(--farbe-flaeche); color: var(--farbe-primaer); }
.werkzeug-rest { margin-left: auto; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.beschnitt-buehne { height: min(56vh, 560px); min-height: 300px; overflow: hidden; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.beschnitt-buehne img { display: block; max-width: 100%; }
.beschnitt-status { margin: 12px 2px 0; font-size: 0.92rem; color: var(--farbe-text-leise); }
.beschnitt-status.ist-warnung { color: color-mix(in srgb, var(--farbe-warnung) 60%, var(--farbe-text)); font-weight: 600; }
.beschnitt-cmyk { margin: 12px 0 0; }
.beschnitt-format, .beschnitt-rechts { display: grid; gap: var(--abstand); min-width: 0; }
.beschnitt-format > .karte, .beschnitt-rechts > .karte { margin: 0; }

/* Vorschau des fertigen Bildes (Cropper.js verkleinert das Element selbst auf das Seitenverhältnis des Ausschnitts) */
.vorschau-rahmen {
    display: grid; place-items: center; width: 100%; height: 220px; overflow: hidden; background: var(--farbe-flaeche-leise);
    border: 1px solid var(--farbe-rand); border-radius: var(--radius);
}
.vorschau-bild { width: 100%; height: 100%; overflow: hidden; }
.vorschau-bild img { display: block; max-width: none !important; max-height: none !important; }
.vorschau-text { margin: 10px 2px 0; font-size: 0.92rem; font-weight: 600; color: var(--farbe-text-leise); text-align: center; }

.format-frei { display: flex; flex-wrap: wrap; gap: 8px; }
.format-chip { position: relative; cursor: pointer; }
.format-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.format-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; font-weight: 600; color: var(--farbe-text-leise); background: var(--farbe-flaeche); border: 2px solid var(--farbe-rand); border-radius: 999px; transition: border-color var(--uebergang), background var(--uebergang), color var(--uebergang); }
.format-chip:hover span { border-color: var(--farbe-rand-stark); }
.format-chip input:checked + span { color: var(--farbe-primaer-dunkel); background: var(--farbe-primaer-hell); border-color: var(--farbe-akzent); }
.format-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--farbe-akzent) 60%, transparent); outline-offset: 2px; }
.format-titel { margin: 18px 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); }
.format-liste { display: grid; gap: 8px; margin-bottom: 4px; }
.format-leer { margin: 0; font-size: 0.9rem; }
.format-karte { position: relative; display: block; cursor: pointer; }
.format-karte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.format-inhalt { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--farbe-flaeche); border: 2px solid var(--farbe-rand); border-radius: var(--radius); transition: border-color var(--uebergang), background var(--uebergang); }
.format-karte:hover .format-inhalt { border-color: var(--farbe-rand-stark); background: var(--farbe-flaeche-leise); }
.format-karte input:checked + .format-inhalt { border-color: var(--farbe-akzent); background: var(--farbe-primaer-hell); }
.format-karte input:focus-visible + .format-inhalt { outline: 3px solid color-mix(in srgb, var(--farbe-akzent) 60%, transparent); outline-offset: 2px; }
.format-symbol { flex: none; width: 56px; height: 36px; fill: color-mix(in srgb, var(--farbe-primaer) 30%, white); stroke: var(--farbe-primaer); stroke-width: 3; vector-effect: non-scaling-stroke; }
.format-symbol rect { vector-effect: non-scaling-stroke; }
.format-text { display: grid; gap: 1px; min-width: 0; }
.format-text small { color: var(--farbe-text-leise); }
.format-fest { margin-left: auto; color: var(--farbe-text-hell); }
.beschnitt-format .knopf-klein { margin-top: 12px; }
.beschnitt-rechts .knopf-klein { margin-top: 12px; }

.groesse-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.feld-mit-nachsatz { display: flex; align-items: stretch; }
.feld-mit-nachsatz input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.feld-mit-nachsatz input[readonly] { background: var(--farbe-flaeche-leise); color: var(--farbe-text-leise); }
.feld-mit-nachsatz .feld-vorsatz { display: inline-flex; align-items: center; padding: 0 12px; color: var(--farbe-text-leise); background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.beschnitt-format .feld + .feld { margin-top: 14px; }
.beschnitt-rechts .feld + .feld { margin-top: 14px; }
.beschnitt-format .feld-hilfe { margin: 10px 0 0; }
.beschnitt-rechts .feld-hilfe { margin: 10px 0 0; }
.beschnitt-format .knopf-reihe { margin-top: 16px; }
.beschnitt-rechts .knopf-reihe { margin-top: 16px; }

.beschnitt-fertig { display: grid; gap: 20px; align-items: center; }
.beschnitt-fertig[hidden] { display: none; }
@media (min-width: 700px) { .beschnitt-fertig { grid-template-columns: 220px minmax(0, 1fr); } }
.beschnitt-fertig-bild { display: block; overflow: hidden; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.beschnitt-fertig-bild img { display: block; width: 100%; height: auto; }
.beschnitt-fertig-text { display: grid; gap: 10px; }
.beschnitt-fertig-text p { margin: 0; }

.formate-tabelle { display: grid; gap: 10px; }
.formate-zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) auto minmax(0, 0.8fr) auto auto; align-items: center; gap: 8px; }
.formate-zeile input { min-height: 40px; padding: 6px 10px; font: inherit; color: var(--farbe-text); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); min-width: 0; }
.formate-zeile .mal { color: var(--farbe-text-leise); }
.formate-zeile.ist-neu { padding-top: 10px; border-top: 1px dashed var(--farbe-rand-stark); }
@media (max-width: 560px) { .formate-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; } .formate-zeile input[name="name"] { grid-column: 1 / -1; } .formate-zeile .mal { display: none; } }

/* Cropper.js: Farben des Admins */
.beschnitt-buehne .cropper-view-box { outline-color: var(--farbe-akzent); }
.beschnitt-buehne .cropper-line, .beschnitt-buehne .cropper-point { background-color: var(--farbe-akzent); }
.beschnitt-buehne .cropper-point { width: 10px; height: 10px; opacity: 1; }
.beschnitt-buehne .cropper-point.point-e { right: -5px; margin-top: -5px; }
.beschnitt-buehne .cropper-point.point-n { top: -5px; margin-left: -5px; }
.beschnitt-buehne .cropper-point.point-w { left: -5px; margin-top: -5px; }
.beschnitt-buehne .cropper-point.point-s { bottom: -5px; margin-left: -5px; }
.beschnitt-buehne .cropper-point.point-ne { top: -5px; right: -5px; }
.beschnitt-buehne .cropper-point.point-nw { top: -5px; left: -5px; }
.beschnitt-buehne .cropper-point.point-sw { bottom: -5px; left: -5px; }
.beschnitt-buehne .cropper-point.point-se { right: -5px; bottom: -5px; width: 12px; height: 12px; opacity: 1; }

.beschnitt-format .groesse-raster .feld + .feld { margin-top: 0; }
.beschnitt-rechts .groesse-raster .feld + .feld { margin-top: 0; }
.vorschau-bild { box-shadow: 0 0 0 1px var(--farbe-rand-stark), 0 4px 14px rgba(15, 39, 64, 0.12); }
.format-symbol { width: 46px; height: 32px; }
.format-inhalt { gap: 12px; padding: 10px; }
@media (min-width: 800px) { .beschnitt { grid-template-columns: 310px minmax(0, 1fr); } }
@media (min-width: 1250px) { .beschnitt { grid-template-columns: 310px minmax(0, 1fr) 330px; } }

/* ---------- Template-Einstellungen: volle Fläche, Dummy links, Einstellungen rechts (PLAN.md E41 / 3.32) ---------- */
/* Seiten mit voller Fläche: kein Seitentitel, keine Reiter, kein Rahmen – die Fläche reicht von der Kopfleiste bis zum unteren Rand */
.vollflaeche .hauptinhalt { padding: var(--kopfleiste-hoehe) 0 0; }
.vollflaeche .rahmen { max-width: none; padding: 0; }
.vollflaeche .seitenkopf { display: none; }

.vorlage {
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    height: calc(100vh - var(--kopfleiste-hoehe)); height: calc(100dvh - var(--kopfleiste-hoehe));
}
.vorlage-umschalter { display: flex; gap: 8px; padding: 10px var(--seitenrand); background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
.vorlage-umschalter .ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.vorlage-leer-seite { padding: var(--abstand) var(--seitenrand); }

/* Schmale Bildschirme: entweder Vorschau oder Einstellungen */
.vorlage[data-ansicht="vorschau"] .vorlage-einstellungen { display: none; }
.vorlage[data-ansicht="einstellungen"] .vorlage-vorschau { display: none; }

.vorlage-vorschau { display: flex; flex-direction: column; min-height: 0; background: var(--farbe-hintergrund); }
.dummy-buehne { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.dummy-fuss { margin: 0; padding: 8px 16px; font-size: 0.85rem; border-top: 1px solid var(--farbe-rand); background: var(--farbe-flaeche); }

.vorlage-einstellungen { min-height: 0; overflow-y: auto; padding: 18px 16px 96px; background: #e7ecf1; border-left: 1px solid var(--farbe-rand); }

@media (min-width: 1100px) {
    .vorlage { grid-template-columns: minmax(0, 1fr) clamp(380px, 28vw, 480px); grid-template-rows: minmax(0, 1fr); }
    .vorlage-umschalter { display: none; }
    .vorlage[data-ansicht] .vorlage-vorschau { display: flex; }
    .vorlage[data-ansicht] .vorlage-einstellungen { display: block; padding-bottom: 32px; }
}

/* Kopf der Einstellungen */
.vorlage-kopf { display: grid; gap: 4px; margin-bottom: 14px; }
.vorlage-titel { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--farbe-kopfleiste); }
.vorlage-zurueck-link { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 0.9rem; color: var(--farbe-text-leise); text-decoration: none; }
.vorlage-zurueck-link:hover { color: var(--farbe-primaer); }

.vorlage-suche { margin-bottom: 14px; }
.vorlage-leer { margin: 0 0 14px; }
.vorlage-gruppe { margin-bottom: 10px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); }
.vorlage-gruppe[hidden] { display: none; }
.vorlage-gruppe-kopf {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none;
    font-weight: 700; font-size: 1.05rem; color: var(--farbe-kopfleiste); border-radius: var(--radius-gross);
}
.vorlage-gruppe-kopf::-webkit-details-marker { display: none; }
.vorlage-gruppe-kopf:hover { background: var(--farbe-flaeche-leise); }
.vorlage-gruppe-titel { flex: 1 1 auto; }
.vorlage-pfeil { transition: transform var(--uebergang); color: var(--farbe-text-leise); }
.vorlage-gruppe[open] > .vorlage-gruppe-kopf .vorlage-pfeil { transform: rotate(180deg); }
/* Felder stehen zu zweit nebeneinander (schmale Spalte: untereinander); Zwischenüberschriften, Paare Desktop/Mobil, Bilder und lange Namen füllen die Breite */
.vorlage-gruppe-inhalt {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: stretch; container-type: inline-size;
    padding: 4px 16px 18px; border-top: 1px solid var(--farbe-rand);
}
@container (max-width: 400px) { .vorlage-gruppe-inhalt { grid-template-columns: minmax(0, 1fr); } }
.vorlage-gruppe-werkzeug { grid-column: 1 / -1; display: flex; justify-content: flex-end; margin: 8px 0 -6px; }
.vorlage-unterueberschrift {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 12px -16px 0; padding: 9px 16px; font-size: 0.82rem; font-weight: 800;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--farbe-kopfleiste); background: var(--farbe-flaeche-leise);
    border-top: 1px solid var(--farbe-rand); border-bottom: 1px solid var(--farbe-rand); border-left: 4px solid var(--farbe-akzent);
}
.vorlage-unterueberschrift:first-of-type { margin-top: 10px; }
.vorlage-zeile, .vorlage-paar { margin-top: 0; min-width: 0; }
/* Beschriftungen unterschiedlicher Länge: die Eingabefelder nebeneinander stehen trotzdem auf einer Höhe */
.vorlage-zeile > .vorlage-feld { display: flex; flex-direction: column; height: 100%; }
.vorlage-zeile > .vorlage-feld > .feld-kopf + * { margin-top: auto; }
.vorlage-paar, .vorlage-zeile.vorlage-breit { grid-column: 1 / -1; }
.vorlage-zeile[hidden], .vorlage-paar[hidden], .vorlage-unterueberschrift[hidden] { display: none; }
.vorlage-paar-name { margin: 0 0 4px; font-weight: 600; font-size: 0.95rem; }
.vorlage-paar-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.vorlage-paar .feld-kopf label { font-weight: 400; font-size: 0.8rem; color: var(--farbe-text-leise); }
.vorlage-feld .feld-kopf { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.vorlage-feld .feld-kopf label { font-weight: 600; font-size: 0.95rem; }
.vorlage-feld.ist-geaendert .feld-kopf label::after {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%;
    background: var(--farbe-akzent); vertical-align: middle;
}
.vorlage-feld.ist-markiert { border-radius: var(--radius); outline: 3px solid var(--farbe-akzent); outline-offset: 6px; transition: outline-color 0.4s; }
.vorlage-zurueck { width: 28px; height: 28px; margin-left: auto; }
.vorlage-zurueck[hidden] { display: none; }
.vorlage-kurz { font-weight: 400; color: var(--farbe-text-leise); }
.vorlage-anzahl[hidden] { display: none; }

/* Schriftwahl: Liste, in der jede Schrift in ihrer eigenen Schriftart steht (schriftwahl.js; das <select> bleibt unsichtbar als Formularfeld) */
.schriftwahl { position: relative; }
.schriftwahl-original { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.schriftwahl-knopf {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 8px 14px;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
    color: var(--farbe-text); font-size: 1.1rem; line-height: 1.3; text-align: left; cursor: pointer;
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.schriftwahl-knopf:hover { border-color: var(--farbe-primaer); }
.schriftwahl-knopf:focus-visible, .schriftwahl-knopf[aria-expanded="true"] {
    outline: none; border-color: var(--farbe-primaer); box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe-primaer) 15%, transparent);
}
.schriftwahl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schriftwahl-pfeil {
    flex: 0 0 auto; width: 8px; height: 8px; margin: -4px 4px 0 0; border: solid var(--farbe-text-leise); border-width: 0 2px 2px 0;
    transform: rotate(45deg); transition: transform var(--uebergang);
}
.schriftwahl-knopf[aria-expanded="true"] .schriftwahl-pfeil { margin-top: 4px; transform: rotate(-135deg); }
.schriftwahl-liste {
    position: fixed; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); box-shadow: var(--schatten-schwebend);
}
.schriftwahl-liste[hidden] { display: none; }
.schriftwahl-option {
    min-height: 40px; padding: 7px 12px; border-radius: var(--radius-klein); color: var(--farbe-text); font-size: 1.2rem; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.schriftwahl-option.ist-aktiv { background: var(--farbe-primaer-hell); }
.schriftwahl-option[aria-selected="true"] { color: var(--farbe-primaer-dunkel); box-shadow: inset 3px 0 0 var(--farbe-primaer); }

.vorlage-sicherungsliste { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.vorlage-sicherungsliste li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 10px 12px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius);
}
.vorlage-sicherungsliste li > span { display: grid; gap: 2px; font-size: 0.95rem; }

/* ---------- Template-Dummy (PLAN.md E41): Beispielaufbau, gestaltet nur über --d-<option> und data-o-<option> ---------- */
.dummy-leinwand { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -50%); transform-origin: center center; }
.dummy { display: flex; gap: 28px; align-items: flex-start; padding: 6px; color: #333; font-family: Arial, "Open Sans", sans-serif; font-size: 14px; line-height: 1.4; text-align: left; }
.dummy *, .dummy *::before, .dummy *::after { box-sizing: border-box; }
.dummy ul { margin: 0; padding: 0; list-style: none; }
.dummy p, .dummy h1, .dummy h2, .dummy h3, .dummy h4, .dummy h5 { margin: 0; }
.dummy a { color: inherit; text-decoration: none; cursor: pointer; }
.dummy [data-opts] { cursor: pointer; }
.dummy .ist-hover { outline: 2px dashed var(--farbe-akzent); outline-offset: 1px; }
/* Nur Umrandung: position/z-index dürfen sich hier nie ändern (Untermenüs sind absolut positioniert und liegen über der Slideshow) */
.dummy .ist-markiert { outline: 3px solid var(--farbe-akzent); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(31, 181, 214, 0.25); }

.dm-geraet-titel { margin: 0 0 6px; font: 600 12px/1 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--farbe-text-leise); }
.dm-desktop { width: 900px; flex: none; }
.dm-mobil { width: 300px; flex: none; }
.dm-seite {
    position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px rgba(15, 39, 64, 0.14), 0 14px 34px rgba(15, 39, 64, 0.16);
    background: var(--d-seite-hintergrund, linear-gradient(180deg, #ffffff, #eef0f2));
    font-family: var(--d-text-font, "Open Sans", Arial, sans-serif);
}

/* Linkbalken, Kopfzeile, Infobalken */
.dm-linkbar, .dm-topbar, .dm-infobar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px; font-size: 12px; }
.dm-linkbar { height: 26px; background: var(--d-linkbar-bgtext, #1f2d3d); color: var(--d-linkbar-textcolor, #ffffff); }
.dm-linkbar a { color: var(--d-linkbar-linkcolor, #ffffff); } .dm-linkbar a.is-hover { color: var(--d-linkbar-linkcolor2, #cfe3ff); }
.dm-topbar { height: var(--d-topbar-hoehe, 34px); background: var(--d-topbar-bgcolor, #2b3a4a); color: var(--d-topbar-textcolor, #d6dde5); }
.dummy[data-o-topbar="0"] .dm-topbar { display: none; }
.dm-topbar a { color: var(--d-topbar-linkcolor, #ffffff); } .dm-topbar a.is-hover { color: var(--d-topbar-linkcolor2, #9ad4ff); }
.dm-infobar { height: 32px; background: var(--d-infobar-bgcolor, #f0c040); color: var(--d-infobar-color, #222222); }
.dummy[data-o-infobar="0"] .dm-infobar { display: none; }
.dm-infobar-knopf { padding: 2px 10px; border: 1px solid currentColor; border-radius: 3px; }

/* Kopf mit Logo und Menü */
.dm-kopf { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--d-header-padding, 12px) 20px 0; background: var(--d-header-bgcolor, transparent); }
.dm-logo { display: grid; place-items: center; height: var(--d-logo-hoehe, 44px); aspect-ratio: 2.4 / 1; background: #b0b4b8; color: #ffffff; font: 600 15px/1 var(--schrift); letter-spacing: 0.06em; }
.dm-menue {
    align-self: flex-end; background: var(--d-menu-bgcolor, #ffffff); border-top: 1px solid var(--d-menu-outer-border, transparent); border-bottom: 3px solid var(--d-menu-line, transparent);
    font-size: var(--d-menu-fontsize, 13px); font-weight: var(--d-menu-fontstyle-w, 400); font-style: var(--d-menu-fontstyle-s, normal); text-transform: var(--d-menu-transform, none);
}
.dm-menue-liste { display: flex; }
.dm-punkt { position: relative; }
.dm-punkt > a { display: block; padding: 11px 16px; color: var(--d-menu-linkcolor, #333333); }
.dm-punkt.is-hover { background: var(--d-menu-bgcolor2, #eceff2); }
.dm-punkt.is-hover > a { color: var(--d-menu-linkcolor2, #000000); }
.dm-punkt.is-aktiv { background: var(--d-menu-active-bgcolor, #dfe5eb); border-bottom: 3px solid var(--d-menu-active-border, transparent); box-shadow: inset 0 -2px 0 var(--d-menu-active-linecolor, transparent); margin-bottom: -3px; }
.dm-punkt.is-aktiv > a { color: var(--d-menu-active-linkcolor, #000000); }
.dm-unter { position: absolute; z-index: 8; min-width: 150px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.dm-unter1 { top: 100%; left: 0; background: var(--d-submenu1-bgcolor, #f4f6f8); }
.dm-unter2 { top: 0; right: 100%; background: var(--d-submenu2-bgcolor, #e6eaee); } /* nach links: das Menü sitzt am rechten Rand */
.dm-unter li { position: relative; }
.dm-unter a { display: block; padding: 8px 14px; font-size: 13px; text-transform: none; color: var(--d-submenu-linkcolor, #333333); }
.dm-unter li.is-hover > a { color: var(--d-submenu-linkcolor2, #000000); }
.dummy[data-o-menumaxlevels="2"] .dm-unter2 { display: none; }

/* Slideshow mit Textbox */
.dm-slideshow {
    position: relative; display: grid; height: var(--d-slideshow-hoehe, 200px); max-width: var(--d-w-slideshow, 100%); margin: 0 auto; padding: 16px;
    background: #6b7d90; place-items: end start; overflow: hidden;
}
.dm-slideshow-bild { position: absolute; inset: 0; background: repeating-linear-gradient(115deg, #7b8da1 0 46px, #6b7d90 46px 92px); }
.dummy[data-o-slideshow_margin="0"] .dm-slideshow { padding: 0; }
.dummy[data-o-slideshow_margin="2"] .dm-slideshow { padding: 30px; }
.dm-box {
    position: relative; z-index: 1; max-width: 46%; padding: 14px; background: var(--d-slideshow-bgcolor, rgba(0, 0, 0, 0.6)); color: var(--d-slideshow-textcolor, #ffffff);
    place-self: end start;
}
.dm-box-titel { display: block; margin-bottom: 4px; font-size: 18px; }
.dm-box p { margin-bottom: 8px; font-size: 13px; }
.dm-box-link { color: var(--d-slideshow-linkcolor, #ffffff); text-decoration: underline; font-size: 13px; }
.dm-box-link.is-hover { color: var(--d-slideshow-linkcolor2, #9ad4ff); }
.dummy[data-o-slideshow_padding="1"] .dm-box { padding: 8px; }
.dummy[data-o-slideshow_padding="3"] .dm-box { padding: 24px; }
.dummy[data-o-slideshow_position="1"] .dm-box { place-self: start start; }
.dummy[data-o-slideshow_position="2"] .dm-box { place-self: start center; }
.dummy[data-o-slideshow_position="3"] .dm-box { place-self: start end; }
.dummy[data-o-slideshow_position="4"] .dm-box { place-self: center start; }
.dummy[data-o-slideshow_position="5"] .dm-box { place-self: center center; }
.dummy[data-o-slideshow_position="6"] .dm-box { place-self: center end; }
.dummy[data-o-slideshow_position="7"] .dm-box { place-self: end start; }
.dummy[data-o-slideshow_position="8"] .dm-box { place-self: end center; }
.dummy[data-o-slideshow_position="9"] .dm-box { place-self: end end; }
.dm-pfeil { position: absolute; top: 50%; z-index: 2; width: 22px; height: 34px; margin-top: -17px; background: rgba(255, 255, 255, 0.75); border-radius: 3px; }
.dm-pfeil-l { left: 8px; } .dm-pfeil-r { right: 8px; }
.dm-punkte { position: absolute; right: 12px; bottom: 8px; z-index: 2; display: flex; gap: 4px; }
.dm-punkte i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.dm-punkte i:first-child { background: #333333; }
.dm-pause, .dm-timer, .dm-pfeilunten { display: none; position: absolute; z-index: 2; }
.dummy[data-o-slideshow_playpause="1"] .dm-pause { display: block; right: 56px; bottom: 6px; font-size: 9px; color: #ffffff; }
.dummy[data-o-slideshow_timerbar="1"] .dm-timer { display: block; left: 0; bottom: 0; width: 45%; height: 4px; background: var(--d-slideshow-linkcolor, #ffffff); opacity: 0.9; }
.dummy[data-o-slideshow_arrowdown="1"] .dm-pfeilunten {
    display: grid; place-items: center; left: 50%; bottom: 8px; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%;
    background: var(--d-slideshow-arrowdown-bg, rgba(0, 0, 0, 0.55)); color: #ffffff; font-size: 20px; line-height: 1;
}
.dummy[data-o-slideshow_arrowdown_color="arrowdown_dark.png"] .dm-pfeilunten { color: #222222; }

/* Textboxen auf der Startseite (einzelne Templates) */
.dm-startboxen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 20px; }
.dm-startbox { padding: 14px; color: #ffffff; text-align: center; background: var(--d-startbox-color1, #5b7a99); }
.dm-startbox-1 { background: var(--d-startbox1-color, var(--d-startbox-color1, #5b7a99)); }
.dm-startbox-2 { background: var(--d-startbox2-color, var(--d-startbox-color2, #4a6785)); }
.dm-startbox-3 { background: var(--d-startbox3-color, var(--d-startbox-color1, #3b5571)); }

/* Inhalt */
.dm-inhalt {
    background-color: var(--d-content-bgcolor, #ffffff);
    background-position: center var(--d-content-bgimage-pos, top); background-repeat: no-repeat; background-size: cover;
}
.dummy[data-o-use_content_bgimage="1"] .dm-inhalt { background-image: var(--d-content-bgimage, none); }
.dm-inhalt-innen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 24px; max-width: var(--d-w-content, 100%); margin: 0 auto; padding: 18px 28px; }
.dm-breadcrumbs { display: none; grid-column: 1 / -1; font-size: 11px; color: #7a8794; }
.dummy[data-o-breadcrumbs="1"] .dm-breadcrumbs { display: block; }
.dm-text {
    color: var(--d-text-color, #505050); font-size: var(--d-text-size, 10pt); font-weight: var(--d-text-style-w, 400); font-style: var(--d-text-style-s, normal);
    font-family: var(--d-text-font, "Open Sans", Arial, sans-serif);
}
.dm-text p { margin: 6px 0 10px; }
.dm-link { color: var(--d-text-linkcolor, #2a5db0); text-decoration: underline; }
.dm-link.is-hover { color: var(--d-text-linkcolor2, #0a2f77); }
.dummy[data-o-link_arrow="1"] .dm-link::before {
    content: ""; display: inline-block; width: 0; height: 0; margin: 0 4px 1px 2px; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 5px solid var(--d-link-arrow-color, #000000);
}
.dm-h1, .dm-h2, .dm-h3, .dm-h4, .dm-h5 { margin: 6px 0 4px; line-height: 1.2; font-family: var(--d-h-font, var(--d-text-font, "Open Sans", Arial, sans-serif)); }
.dm-h1 { color: var(--d-h1-color, #505050); font-size: var(--d-h1-size, 22pt); font-weight: var(--d-h1-style-w, 400); font-style: var(--d-h1-style-s, normal); }
.dm-h2 { color: var(--d-h2-color, #505050); font-size: var(--d-h2-size, 18pt); font-weight: var(--d-h2-style-w, 400); font-style: var(--d-h2-style-s, normal); }
.dm-h3 { color: var(--d-h3-color, #505050); font-size: var(--d-h3-size, 16pt); font-weight: var(--d-h3-style-w, 400); font-style: var(--d-h3-style-s, normal); }
.dm-h4 { color: var(--d-h4-color, #505050); font-size: var(--d-h4-size, 14pt); font-weight: var(--d-h4-style-w, 400); font-style: var(--d-h4-style-s, normal); }
.dm-h5 { color: var(--d-h5-color, #505050); font-size: var(--d-h5-size, 12pt); font-weight: var(--d-h5-style-w, 400); font-style: var(--d-h5-style-s, normal); }
.dm-mob.dm-h1 { color: var(--d-h1-color-mobile, var(--d-h1-color, #505050)); font-size: var(--d-h1-size-mobile, var(--d-h1-size, 22pt)); font-weight: var(--d-h1-style-mobile-w, var(--d-h1-style-w, 400)); font-style: var(--d-h1-style-mobile-s, var(--d-h1-style-s, normal)); }
.dm-mob.dm-h2 { color: var(--d-h2-color-mobile, var(--d-h2-color, #505050)); font-size: var(--d-h2-size-mobile, var(--d-h2-size, 18pt)); font-weight: var(--d-h2-style-mobile-w, var(--d-h2-style-w, 400)); font-style: var(--d-h2-style-mobile-s, var(--d-h2-style-s, normal)); }
.dm-mob.dm-h3 { color: var(--d-h3-color-mobile, var(--d-h3-color, #505050)); font-size: var(--d-h3-size-mobile, var(--d-h3-size, 16pt)); font-weight: var(--d-h3-style-mobile-w, var(--d-h3-style-w, 400)); font-style: var(--d-h3-style-mobile-s, var(--d-h3-style-s, normal)); }
.dm-mob.dm-h4 { color: var(--d-h4-color-mobile, var(--d-h4-color, #505050)); font-size: var(--d-h4-size-mobile, var(--d-h4-size, 14pt)); font-weight: var(--d-h4-style-mobile-w, var(--d-h4-style-w, 400)); font-style: var(--d-h4-style-mobile-s, var(--d-h4-style-s, normal)); }
.dm-mob.dm-h5 { color: var(--d-h5-color-mobile, var(--d-h5-color, #505050)); font-size: var(--d-h5-size-mobile, var(--d-h5-size, 12pt)); font-weight: var(--d-h5-style-mobile-w, var(--d-h5-style-w, 400)); font-style: var(--d-h5-style-mobile-s, var(--d-h5-style-s, normal)); }
.dm-bild { height: 120px; background: linear-gradient(135deg, #c3cbd3, #9aa6b2); border-radius: 2px; }

/* Buttons */
.dm-knoepfe { margin-top: 14px; }
.dm-knoepfe-titel { margin: 8px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7a8794; }
.dm-knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-btn {
    display: inline-block; padding: 7px 11px; background: #dfe3e8; color: #333333; border: 1px solid #b9c1ca; border-radius: 3px; font-size: 12px; text-align: center; line-height: 1.3;
}
.dummy[data-o-use_button_style="1"] .dm-btn-p {
    background: var(--d-primary-bg-color, #2a6ebb); color: var(--d-primary-text-color, #ffffff);
    border: var(--d-primary-border-width, 2px) solid var(--d-primary-border-color, transparent); border-radius: var(--d-primary-border-radius, 0);
    padding: var(--d-primary-padding, 10px 20px); min-width: var(--d-primary-minwidth, 0); line-height: var(--d-primary-line-height, 1.3);
    font-size: var(--d-primary-text-size, 12pt); font-weight: var(--d-primary-text-style-w, 400); font-style: var(--d-primary-text-style-s, normal); text-transform: var(--d-primary-transform, none);
}
.dummy[data-o-use_button_style="1"] .dm-btn-p.is-hover { background: var(--d-primary-bg-color2, #1d5496); color: var(--d-primary-text-color2, #ffffff); border-color: var(--d-primary-border-color2, transparent); }
.dummy[data-o-use_button_style="1"] .dm-btn-p.is-klick { background: var(--d-primary-bg-color3, #143b6a); color: var(--d-primary-text-color3, #ffffff); border-color: var(--d-primary-border-color3, transparent); }
.dummy[data-o-use_button_style="1"] .dm-btn-a {
    background: var(--d-button-bg-color, #e8ecf0); color: var(--d-button-text-color, #1f2d3d);
    border: var(--d-button-border-width, 2px) solid var(--d-button-border-color, #9aa6b2); border-radius: var(--d-button-border-radius, 0);
    padding: var(--d-button-padding, 10px 20px); min-width: var(--d-button-minwidth, 0); line-height: var(--d-button-line-height, 1.3);
    font-size: var(--d-button-text-size, 12pt); font-weight: var(--d-button-text-style-w, 400); font-style: var(--d-button-text-style-s, normal);
}
.dummy[data-o-use_button_style="1"] .dm-btn-a.is-hover { background: var(--d-button-bg-color2, #d5dbe2); color: var(--d-button-text-color2, #1f2d3d); border-color: var(--d-button-border-color2, #7d8a97); }
.dummy[data-o-use_button_style="1"] .dm-btn-a.is-klick { background: var(--d-button-bg-color3, #bfc7d0); color: var(--d-button-text-color3, #1f2d3d); border-color: var(--d-button-border-color3, #5f6d7b); }
.dummy[data-o-use_button_style="1"] .dm-btn-mobil { padding: var(--d-primary-padding2, 8px 14px); font-size: var(--d-primary-text-size2, 11pt); }

/* Fußzeile, Cookie-Hinweis */
.dm-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 28px; font-size: 12px; background: var(--d-footer-bgcolor, #2b3a4a); color: var(--d-footer-textcolor, #cdd6df); }
.dm-fuss a { color: var(--d-footer-linkcolor, #ffffff); } .dm-fuss a.is-hover { color: var(--d-footer-linkcolor2, #9ad4ff); }
.dm-cookie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 28px; font-size: 12px; background: var(--d-cookie-bgcolor, #111111); color: var(--d-cookie-textcolor, #dddddd); }
.dm-cookie a { color: var(--d-cookie-linkcolor, #ffffff); text-decoration: underline; } .dm-cookie a.is-hover { color: var(--d-cookie-linkcolor2, #9ad4ff); }
.dm-cookie-knopf { padding: 4px 10px; border-radius: 2px; background: var(--d-cookie-buttoncolor, #3aa648); color: var(--d-cookie-buttontextcolor, #ffffff); }

/* Mobil */
.dm-seite-mobil { font-size: 13px; }
.dm-kopf-mobil, .dm-kleinmenue { background: var(--d-smallmenu-bgcolor, #2b3a4a); }
.dm-kopf-mobil { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.dm-logo-mobil { height: 30px; font-size: 12px; }
.dm-burger { display: grid; gap: 4px; width: 26px; }
.dm-burger i { display: block; height: 3px; border-radius: 2px; background: #ffffff; }
.dummy[data-o-smallmenu_iconcolor="menu-icon-dark.png"] .dm-burger i { background: #222222; }
.dm-kleinmenue { padding-bottom: 6px; }
.dm-kleinmenue a { display: block; padding: 8px 14px; color: var(--d-smallmenu-linkcolor, #ffffff); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.dm-kleinmenue li.is-hover a { color: var(--d-smallmenu-linkcolor2, #9ad4ff); }
.dm-slideshow-mobil { height: 100px; padding: 8px; margin: 0; max-width: none; }
.dm-slideshow-mobil .dm-box { max-width: 70%; padding: 8px; }
.dm-slideshow-mobil .dm-box-titel { font-size: 13px; margin: 0 0 2px; }
.dm-inhalt-mobil .dm-inhalt-innen { display: block; padding: 10px 14px; }
.dm-knopfreihe-mobil { margin-top: 8px; }
.dm-fuss-mobil { padding: 12px 14px; font-size: 11px; }

/* Handy: nur der mobile Aufbau, dafür groß (der Desktop-Aufbau wäre nicht mehr lesbar) */
@media (max-width: 760px) {
    .dm-desktop { display: none; }
}

/* Beim Hinscrollen (Klick im Dummy) bleibt oben etwas Luft */
.vorlage-unterueberschrift, .vorlage-feld, .vorlage-gruppe { scroll-margin-top: 12px; }

/* ---------- Template-Übersicht (PLAN.md E42 / 3.33) ---------- */
.template-raster { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: var(--abstand); }
.template-karte {
    display: flex; flex-direction: column; overflow: hidden; background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte);
}
.template-karte.ist-aktiv { border-color: var(--farbe-akzent); box-shadow: 0 0 0 2px var(--farbe-akzent), var(--schatten-karte); }
.template-bild { position: relative; aspect-ratio: 700 / 450; background: var(--farbe-flaeche-leise); border-bottom: 1px solid var(--farbe-rand); }
.template-bild-desktop { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.template-bild-mobil {
    position: absolute; right: 12px; bottom: 12px; width: 21%; height: auto; border-radius: 8px;
    border: 3px solid #ffffff; box-shadow: 0 6px 20px rgba(15, 39, 64, 0.35);
}
.template-ohne-bild { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--farbe-text-hell); }
.template-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.template-name { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }

/* ---------- Admin-Konten (PLAN.md 3.37) ---------- */
.konten-tabelle th, .konten-tabelle td { text-align: left; white-space: normal; vertical-align: middle; }
.konten-tabelle th small { display: block; font-weight: 400; }
.konten-tabelle td .abzeichen + .abzeichen { margin-left: 4px; }
.konten-zelle-aktionen { text-align: right; }
.konten-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.konten-aktionen form { margin: 0; }
.konten-hinweis { margin-top: 12px; }
.rollen-raster { display: grid; gap: 14px; margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rolle-karte { padding: 14px 16px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche-leise); }
.rolle-karte h3 { margin: 0 0 6px; font-size: 1rem; }
.rolle-karte p { margin: 0; font-size: 0.9rem; color: var(--farbe-text-leise); }
.rollen-wahl { display: grid; gap: 10px; }
.rolle-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; cursor: pointer;
    border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); background: var(--farbe-flaeche);
}
.rolle-option:has(input:checked) { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); box-shadow: 0 0 0 1px var(--farbe-primaer); }
.rolle-option input { margin-top: 4px; }
.rolle-text { display: grid; gap: 2px; }
.rolle-text small { color: var(--farbe-text-leise); font-size: 0.875rem; }
.rechte-gruppe { margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 8px; }
.rechte-gruppe legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.rechte-raster { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.passwort-werkzeuge { align-items: center; margin-top: 14px; gap: 14px; }
.karte-schmal { max-width: 680px; }
.karte-schmal .feld + .formular-raster { margin-top: 18px; }
.karte-schmal .passwort-werkzeuge + .knopf-reihe { margin-top: 22px; }

/* ---------- Hilfecenter (PLAN.md 3.38) ---------- */
/* „?" am rechten Rand; das Panel fährt von rechts ein und überlagert die Seite (unterhalb der Kopfleiste) */
/*
 * Optik 1:1 wie im Altsystem (#helpcenter in styles/style.css): der Reiter ist die Originalgrafik (grüner Halbkreis mit hellem
 * Ring, 120 × 120 px, hier um 60 bzw. 100 px Breite beschnitten), darin das „?“ als Originalgrafik (25 × 38 px).
 * Ruhezustand 60 px breit und blass, beim Überfahren und wenn geöffnet 100 px breit; das Panel hat 10 px grünen Rand.
 * Grün = Farbwert der Grafik (#92b359).
 */
:root {
    --hilfecenter-breite: clamp(340px, 30vw, 480px);
    --farbe-hilfe: #92b359;
}
.hilfecenter-reiter {
    position: fixed; z-index: 44; top: 45%; right: 0; display: block; width: 60px; height: 120px; padding: 0;
    background: url('../img/hilfecenter-reiter.png') no-repeat left top; border: 0; cursor: pointer;
    opacity: 0.3; transition: right 300ms ease, opacity 300ms ease, width 300ms ease;
}
/* Fest 40 px unter der Oberkante, 10 px eingerückt und in der Breite zentriert (Altsystem: .helpcenter-question). Absolut, weil ein
   <button> seinen Inhalt sonst senkrecht zentriert. content-box wie im Altsystem: Breite = Breite des Reiters (60 bzw. 100 px). */
.hilfecenter-frage { position: absolute; top: 40px; left: 10px; width: 100%; box-sizing: content-box; pointer-events: none; }
.hilfecenter-frage img { display: block; width: 25px; height: 38px; margin: 0 auto; }
.hilfecenter-reiter:hover, .hilfecenter-reiter:focus-visible { opacity: 1; width: 100px; }
.hilfecenter-reiter:focus-visible { outline: 3px solid var(--farbe-kopfleiste); outline-offset: 2px; border-radius: 60px 0 0 60px; }
.hilfecenter-reiter.ist-offen { right: var(--hilfecenter-breite); opacity: 1; width: 100px; }
.hilfecenter {
    position: fixed; z-index: 45; top: var(--kopfleiste-hoehe); right: 0; bottom: 0; display: flex; flex-direction: column;
    width: var(--hilfecenter-breite); background: var(--farbe-flaeche); border-left: 10px solid var(--farbe-hilfe);
    transform: translateX(100%); visibility: hidden; transition: transform 260ms ease, visibility 0s linear 260ms;
}
.hilfecenter.ist-offen { transform: none; visibility: visible; transition: transform 260ms ease, visibility 0s; }
/* Beim Wiederherstellen des offenen Zustands auf der nächsten Seite: ohne Einfahren */
.hilfecenter.ohne-uebergang, .hilfecenter-reiter.ohne-uebergang { transition: none; }
.hilfecenter-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 16px; color: #ffffff; background: var(--farbe-hilfe); }
.hilfecenter-ueber { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.hilfecenter-titel { margin: 2px 0 0; font-size: 1.35rem; line-height: 1.25; outline: none; }
.hilfecenter-schliessen {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; color: #ffffff;
    background: transparent; border: 0; border-radius: var(--radius); cursor: pointer;
}
.hilfecenter-schliessen:hover { background: rgba(255, 255, 255, 0.22); }
.hilfecenter-schliessen:focus-visible { outline-color: #ffffff; }
.hilfecenter-inhalt { flex: 1; min-height: 0; padding: 18px 20px 28px; overflow-y: auto; overflow-wrap: anywhere; font-size: 0.95rem; }
.hilfecenter-inhalt h1 { margin: 0 0 12px; font-size: 1.15rem; }
.hilfecenter-inhalt h2 { margin: 22px 0 8px; font-size: 1.05rem; }
.hilfecenter-inhalt h3, .hilfecenter-inhalt h4 { margin: 18px 0 6px; font-size: 0.95rem; }
.hilfecenter-inhalt > :first-child { margin-top: 0; }
.hilfecenter-inhalt p, .hilfecenter-inhalt ul, .hilfecenter-inhalt ol, .hilfecenter-inhalt table { margin: 0 0 12px; }
.hilfecenter-inhalt ul, .hilfecenter-inhalt ol { padding-left: 22px; }
.hilfecenter-inhalt hr { margin: 20px 0; }
.hilfecenter-inhalt table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.hilfecenter-inhalt th, .hilfecenter-inhalt td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--farbe-rand); }
.hilfecenter-fuss { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 20px; border-top: 1px solid var(--farbe-rand); background: var(--farbe-flaeche-leise); font-size: 0.875rem; }
/* Auf schmalen Fenstern kleiner (das Altsystem verkleinerte den Reiter unter 1600 px auf die Hälfte), rechts verankert */
@media (max-width: 1200px) {
    .hilfecenter-reiter { transform: scale(0.75); transform-origin: 100% 50%; }
}
@media (max-width: 700px) {
    :root { --hilfecenter-breite: 100vw; }
    .hilfecenter-reiter { top: auto; bottom: 104px; transform: scale(0.65); transform-origin: 100% 100%; }
    .hilfecenter-reiter.ist-offen { display: none; }
    .hilfecenter { border-left: 0; }
}
@media print { .hilfecenter, .hilfecenter-reiter { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .hilfecenter, .hilfecenter.ist-offen, .hilfecenter-reiter { transition: none; }
}
.hilfe-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.hilfe-intro-symbol { display: grid; place-items: center; width: 64px; height: 64px; color: #ffffff; background: var(--farbe-primaer); border-radius: var(--radius-gross); }
.hilfe-intro-symbol .icon { width: 34px; height: 34px; }
.hilfe-intro p { margin-top: 10px; }
.hilfe-intro-mini { display: inline-block; vertical-align: -3px; color: var(--farbe-primaer); }
.hilfe-gruppen { display: grid; gap: 20px 32px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hilfe-gruppe h3 { margin: 0 0 8px; font-size: 1rem; }
.hilfe-gruppe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

/* ---------- Account (PLAN.md 3.36) ---------- */
.konto-daten { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 0 20px; margin: 0 0 16px; }
.konto-daten dt, .konto-daten dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--farbe-rand); }
.konto-daten dt { font-weight: 600; }
.konto-daten dt:last-of-type, .konto-daten dd:last-of-type { border-bottom: 0; }
/* Knopf unter dem Formularraster nicht am letzten Feld kleben lassen (Kontaktdaten) */
.karte > .formular-raster + .knopf-reihe { margin-top: 24px; }
.konto-rechnungen th a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.konto-rechnungen th span { font-weight: 600; }
.einstellungen-spalte > form.einstellungen { margin: 0; }

/* ---------- CSS-Editor (PLAN.md 3.35) ---------- */
/*
 * Textfeld mit Zeilennummern und Farbhervorhebung: die gefärbte Kopie (.code-farbe) liegt exakt unter dem durchsichtigen
 * Textfeld (.code-eingabe). Ohne JavaScript bleibt es ein gewöhnliches Textfeld (die Schrift wird erst mit .ist-aktiv durchsichtig).
 * Schrift, Zeilenhöhe und Innenabstand müssen in beiden Ebenen identisch sein, sonst läuft die Färbung auseinander.
 */
.code-editor {
    --code-schrift: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace;
    --code-zeile: 22px;
    --code-innen: 12px;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    height: clamp(320px, 62vh, 760px); margin-top: 16px; overflow: hidden;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
    font: 14px/var(--code-zeile) var(--code-schrift); letter-spacing: 0; font-variant-ligatures: none; tab-size: 4;
}
.code-editor:focus-within { border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-akzent) 30%, transparent); }
.code-nummern {
    min-width: 3.4em; padding: var(--code-innen) 10px var(--code-innen) 12px; overflow: hidden; text-align: right; white-space: pre;
    color: var(--farbe-text-hell); background: var(--farbe-flaeche-leise); border-right: 1px solid var(--farbe-rand); user-select: none;
}
.code-nummern span { line-height: 0; }
.code-nummern .ist-fehler { color: var(--farbe-gefahr); }
.code-flaeche { position: relative; min-width: 0; }
.code-farbe, .code-eingabe {
    position: absolute; inset: 0; margin: 0; padding: var(--code-innen) 14px; border: 0; border-radius: 0;
    font: inherit; letter-spacing: inherit; font-variant-ligatures: inherit; tab-size: inherit; white-space: pre; word-wrap: normal; overflow-wrap: normal;
}
/* Rand rechts/unten größer als die Bildlaufleisten des Textfelds, damit die Kopie bis ganz ans Ende mitscrollen kann */
.code-farbe { overflow: hidden; pointer-events: none; color: var(--farbe-text); padding-right: 40px; padding-bottom: calc(var(--code-innen) + 28px); }
.code-eingabe { width: 100%; height: 100%; min-height: 0; overflow: auto; resize: none; color: var(--farbe-text); background: transparent; outline: none; box-shadow: none; }
.code-eingabe:focus { outline: none; box-shadow: none; }
.code-editor.ist-aktiv .code-eingabe { color: transparent; caret-color: var(--farbe-text); }
.code-editor.ist-aktiv .code-eingabe::selection { background: color-mix(in srgb, var(--farbe-akzent) 38%, transparent); }
/*
 * Nur Farben – kein fett/kursiv: andere Schriftschnitte haben leicht andere Metriken und würden Zeilen höher machen als die
 * des Textfelds (die Färbung und die Zeilennummern liefen auseinander). line-height: 0 hält die Spans aus der Zeilenbox heraus.
 */
.code-farbe span { line-height: 0; }
/* <code> hat sonst die Standardschrift des Browsers (monospace, 13 px) – dann wären die Zeilen 1 px höher als im Textfeld */
.code-farbe code { font: inherit; letter-spacing: inherit; }
.code-farbe .c-kommentar { color: var(--farbe-text-hell); }
.code-farbe .c-text { color: color-mix(in srgb, var(--farbe-erfolg) 78%, black); }
.code-farbe .c-regel { color: #7c3aed; }
.code-farbe .c-selektor { color: color-mix(in srgb, var(--farbe-text) 70%, #7c3aed); }
.code-farbe .c-eigenschaft { color: var(--farbe-primaer); }
.code-farbe .c-zahl { color: color-mix(in srgb, var(--farbe-warnung) 80%, black); }
.code-farbe .c-farbe { color: #b4237a; }
.code-farbe .c-funktion { color: var(--farbe-primaer-dunkel); }
.code-farbe .c-wichtig { color: var(--farbe-gefahr); }
.code-farbe .c-klammer { color: var(--farbe-text-leise); }
.code-statusleiste { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 0.875rem; }
.code-fehlerliste { margin: 8px 0 0; padding-left: 20px; }
.code-fehlerliste li + li { margin-top: 4px; }
.code-springen {
    padding: 0 8px; margin-right: 4px; font: inherit; font-weight: 600; color: inherit; cursor: pointer;
    background: color-mix(in srgb, currentColor 12%, transparent); border: 0; border-radius: var(--radius-klein);
}
.code-springen:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.code-staende { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.code-staende li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
@media (max-width: 600px) {
    .code-editor { height: clamp(280px, 56vh, 560px); font-size: 13px; }
}

/* ---------- Module (PLAN.md 3.39) ---------- */
/* Übersicht: flache Liste gleich großer Karten (E55). Die Farbkante links zeigt den Bereich, der Filter blendet Karten aus. */
/* Suche und Bereichsfilter rechts in der Reiterleiste (Block reiter_zusatz): kein Submenü, deshalb hell und dezent */
.modul-suche { flex: 0 1 210px; width: 210px; }
.reiter-zusatz .suchfeld.modul-suche input { height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; }
.modul-filter { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.modul-filter-punkt {
    padding: 6px 10px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--farbe-text-leise); white-space: nowrap; cursor: pointer;
    background: transparent; border: 0; border-radius: var(--radius-klein); transition: background-color var(--uebergang), color var(--uebergang);
}
.modul-filter-punkt:hover { color: var(--farbe-text); background: var(--farbe-flaeche-leise); }
.modul-filter-punkt:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.modul-filter-punkt.ist-aktiv { color: var(--farbe-primaer-dunkel); background: color-mix(in srgb, var(--farbe-primaer) 13%, var(--farbe-flaeche)); }
/* Farbklotz vor dem Bereich: dieselbe Farbe wie die Karten (.modul-karte.bereich-N) */
.modul-filter-punkt { display: inline-flex; align-items: center; gap: 7px; --bereich-farbe: var(--farbe-primaer); }
.modul-filter-punkt.bereich-1 { --bereich-farbe: var(--farbe-akzent); }
.modul-filter-punkt.bereich-2 { --bereich-farbe: var(--farbe-flieder); }
.modul-filter-punkt.bereich-3 { --bereich-farbe: var(--farbe-primaer); }
.modul-filter-punkt.bereich-4 { --bereich-farbe: var(--farbe-warnung); }
.modul-filter-farbe { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--bereich-farbe); }
.modul-gruppe { margin: 0 0 calc(var(--abstand) * 1.5); }
.modul-gruppe[hidden] { display: none; }
.modul-gruppe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; }
.modul-gruppe-titel { margin: 0; font-size: 1.25rem; color: var(--farbe-kopfleiste); }
.modul-favoriten-zaehler { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.9rem; }
.modul-favoriten-zaehler .icon { color: var(--farbe-warnung); }
/* Spaltenzahl in Schritten, die acht Karten der ersten Gruppe ohne Lücke füllen (8 / 4 / 2 / 1) */
.modul-raster { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .modul-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .modul-raster { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 380px) { .modul-raster { grid-template-columns: minmax(0, 1fr); } }
.modul-karte {
    --bereich-farbe: var(--farbe-primaer);
    position: relative; display: grid; min-width: 0; color: var(--farbe-text);
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-left: 6px solid color-mix(in srgb, var(--bereich-farbe) 55%, var(--farbe-flaeche));
    border-radius: var(--radius-gross); box-shadow: var(--schatten-karte);
    transition: border-color var(--uebergang), box-shadow var(--uebergang), transform var(--uebergang);
}
.modul-karte[hidden] { display: none; }
.modul-karte.bereich-1 { --bereich-farbe: var(--farbe-akzent); }
.modul-karte.bereich-2 { --bereich-farbe: var(--farbe-flieder); }
.modul-karte.bereich-3 { --bereich-farbe: var(--farbe-primaer); }
.modul-karte.bereich-4 { --bereich-farbe: var(--farbe-warnung); }
.modul-karte:hover, .modul-karte:focus-within { box-shadow: var(--schatten-schwebend); border-color: color-mix(in srgb, var(--bereich-farbe) 45%, var(--farbe-rand)); }
.modul-karte:has(a.modul-karte-inhalt:hover) { transform: translateY(-1px); }
.modul-karte.ist-geplant { background: var(--farbe-flaeche-leise); box-shadow: none; border-left-color: var(--farbe-rand); }
.modul-karte-inhalt {
    display: grid; justify-items: center; align-content: start; gap: 4px; padding: 22px 16px 16px; text-align: center; color: inherit; text-decoration: none; border-radius: inherit;
}
a.modul-karte-inhalt:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; }
div.modul-karte-inhalt { cursor: default; }
.modul-kachel {
    display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; color: var(--bereich-farbe); border-radius: 16px;
    background: color-mix(in srgb, var(--bereich-farbe) 14%, var(--farbe-flaeche));
}
.modul-kachel .icon { width: 28px; height: 28px; }
.modul-karte.ist-geplant .modul-kachel { color: var(--farbe-text-hell); background: var(--farbe-rand); }
.modul-name { color: var(--farbe-kopfleiste); font-size: 1.05rem; line-height: 1.25; }
.modul-karte.ist-geplant .modul-name { color: var(--farbe-text-leise); }
.modul-beschreibung {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    font-size: 0.85rem; line-height: 1.35; color: var(--farbe-text-leise);
}
.modul-zaehler { min-height: 1.3em; margin-top: 4px; font-size: 0.8rem; color: var(--farbe-text-leise); }
/* Grüner Punkt mit weißem Haken: bei Ihnen angelegt */
.modul-aktiv {
    position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 22px; height: 22px;
    color: #fff; background: var(--farbe-erfolg); border-radius: 50%; box-shadow: 0 0 0 2px var(--farbe-flaeche);
}
.modul-aktiv .icon { width: 13px; height: 13px; stroke-width: 3; }
/* Stern: Favorit für das Dashboard; ungefüllt erst beim Darüberfahren, auf Touch-Geräten immer leicht sichtbar */
.modul-stern-formular { position: absolute; top: 6px; left: 6px; margin: 0; }
.modul-stern {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--farbe-text-hell); cursor: pointer;
    background: transparent; border: 0; border-radius: 50%; opacity: 0; transition: opacity var(--uebergang), color var(--uebergang), background-color var(--uebergang);
}
.modul-stern .icon { width: 18px; height: 18px; }
.modul-karte:hover .modul-stern, .modul-karte:focus-within .modul-stern, .modul-stern[aria-pressed="true"] { opacity: 1; }
.modul-stern:hover { color: var(--farbe-warnung); background: color-mix(in srgb, var(--farbe-warnung) 12%, transparent); }
.modul-stern:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.modul-stern[aria-pressed="true"] { color: var(--farbe-warnung); }
.modul-stern .stern-voll, .modul-stern[aria-pressed="true"] .stern-leer { display: none; }
.modul-stern[aria-pressed="true"] .stern-voll { display: block; }
.modul-stern[disabled] { cursor: progress; }
@media (hover: none) { .modul-stern { opacity: 0.7; } }
.modul-leer { padding: 24px 0; }
.modul-leer[hidden] { display: none; }
@media (max-width: 600px) {
    .modul-raster { gap: 12px; }
    .modul-karte-inhalt { padding: 22px 10px 14px; }
    .modul-favoriten-hinweis { display: none; }
}
.modul-tabelle th, .modul-tabelle td { text-align: left; white-space: normal; vertical-align: middle; }
.modul-tabelle th .punkt { margin-right: 8px; }
.modul-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.modul-aktionen form { margin: 0; }
.modul-orte, .modul-varianten { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
a.modul-eintrag { text-decoration: none; }

/* Grundangaben eines Moduls (Bezeichnung, Verwendet in): klappen über den Knopf „Einstellungen“ oben rechts auf (module/_grund.twig) */
.modul-grund { display: grid; gap: 20px 32px; margin-bottom: 20px; }
@media (min-width: 900px) {
    .modul-grund-s2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modul-grund-s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.modul-grund-spalte { min-width: 0; }
.modul-grund-titel { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.modul-grund-knopf[aria-expanded="true"] { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); }

/* ---------- Module mit Arbeitsfläche: drei feste Spalten mit eigenem Scroll (PLAN.md 3.39 / 3.40) ---------- */
/* Volle Fläche unter der Kopfleiste (vollflaeche). Links eine schmale Leiste (nur wenn das Modul sie einschaltet), in der Mitte
   der Inhalt des Moduls, rechts eine feste Spalte. Links und rechts sind Spuren eines Rasters, die per data-palette / data-rechts
   am Körper auf 0 zusammenfahren. Unter 1100 px gibt es nur Mitte und rechts, dazwischen wechselt ein Umschalter. */
.modul-arbeit {
    display: flex; flex-direction: column; margin: 0;
    height: calc(100vh - var(--kopfleiste-hoehe)); height: calc(100dvh - var(--kopfleiste-hoehe));
}
.modul-arbeit-umschalter { flex: none; display: flex; gap: 8px; padding: 10px var(--seitenrand); background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
.modul-arbeit-umschalter .ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.modul-arbeit[data-ansicht="vorschau"] .modul-arbeit-mitte { display: none; }
.modul-arbeit[data-ansicht="bearbeiten"] .modul-arbeit-rechts { display: none; }

.modul-arbeit-koerper { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.modul-arbeit-palette { display: none; }

/* Mitte: Zurück-Link, Bezeichnung und Aktionen oben, darunter der Inhalt des Moduls */
.modul-arbeit-mitte { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f8f8f8; }
.modul-arbeit-kopf { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px var(--seitenrand); }
.modul-arbeit-name { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 260px; max-width: 640px; gap: 4px 10px; }
.modul-arbeit-name .feld-kopf { flex: none; display: flex; align-items: center; gap: 6px; }
.modul-arbeit-name .feld-titel { margin: 0; font-weight: 600; }
.modul-arbeit-name input { flex: 1 1 160px; min-width: 0; }
.modul-arbeit-name .feld-hilfe { flex: 1 0 100%; }
.modul-arbeit-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.modul-arbeit-meldung { flex: none; margin: 0 var(--seitenrand) 12px; }
.modul-arbeit-mitte button.unterreiter-punkt, .modul-arbeit-palette button.unterreiter-punkt { padding: 8px 13px; font: inherit; font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.modul-arbeit-mitte button.unterreiter-punkt.ist-aktiv, .modul-arbeit-palette button.unterreiter-punkt.ist-aktiv { background: var(--farbe-primaer); }

/* Rechte Spalte: Eigenschaften oder Vorschau */
.modul-arbeit-rechts { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--farbe-flaeche); }

@media (min-width: 1100px) {
    .modul-arbeit-umschalter { display: none; }
    .modul-arbeit-koerper {
        --spalte-links: clamp(210px, 12vw, 280px);
        --spalte-rechts: clamp(380px, 25vw, 560px);
        display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: 0 minmax(0, 1fr) 0;
    }
    /* animiert erst, wenn das Skript den Ausgangszustand gesetzt hat (sonst fahren die Spalten beim Laden ein) */
    .modul-arbeit-koerper.ist-animiert { transition: grid-template-columns 200ms ease; }
    .modul-arbeit-koerper[data-palette="an"] { grid-template-columns: var(--spalte-links) minmax(0, 1fr) 0; }
    .modul-arbeit-koerper[data-rechts="an"] { grid-template-columns: 0 minmax(0, 1fr) var(--spalte-rechts); }
    .modul-arbeit-koerper[data-palette="an"][data-rechts="an"] { grid-template-columns: var(--spalte-links) minmax(0, 1fr) var(--spalte-rechts); }
    .modul-arbeit[data-ansicht] .modul-arbeit-mitte, .modul-arbeit[data-ansicht] .modul-arbeit-rechts { display: flex; }

    .modul-arbeit-palette, .modul-arbeit-rechts { overflow: hidden; visibility: hidden; }
    .modul-arbeit-palette { grid-column: 1; display: flex; flex-direction: column; min-width: 0; background: var(--farbe-flaeche); }
    .modul-arbeit-koerper[data-palette="an"] .modul-arbeit-palette { visibility: visible; border-right: 1px solid var(--farbe-rand); }
    .modul-arbeit-mitte { grid-column: 2; }
    .modul-arbeit-rechts { grid-column: 3; border-left: 1px solid var(--farbe-rand); }
    .modul-arbeit-koerper[data-rechts="an"] .modul-arbeit-rechts { visibility: visible; }
    .modul-arbeit-koerper[data-rechts="aus"] .modul-arbeit-rechts { border-left-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .modul-arbeit-koerper.ist-animiert { transition: none; }
}

/* ---------- Onpage-Editor (PLAN.md E73 / 3.57): Website im iframe, Werkzeuge außen ---------- */
/* Einstieg in der Reiterleiste der Inhalte: hervorgehoben, aber ruhig (helle Primärfläche statt Vollfarbe) */
.knopf-onpage { background: var(--farbe-akzent); border: 0; color: #fff; font-weight: 700; }
.knopf-onpage:hover, .knopf-onpage:focus-visible { background: color-mix(in srgb, var(--farbe-akzent) 85%, black); color: #fff; }
/* Im Onpage-Editor gibt es keine Kopfleiste (zum reinen Bearbeiten unnötig): Logo und Speichern stehen oben in der Werkzeugspalte */
body.ist-onpage { --kopfleiste-hoehe: 0px; }
.ist-onpage .kopfleiste, .ist-onpage .handy-menue, .ist-onpage .handy-menue-schleier, .ist-onpage .speichern-leiste, .ist-onpage .sprungmarke { display: none !important; }
.onpage-kopfzeile { display: grid; gap: 12px; padding: 14px var(--seitenrand) 16px; border-bottom: 1px solid var(--farbe-rand); }
.onpage-logo { display: block; width: fit-content; }
.onpage-logo img { display: block; width: auto; height: 44px; }
/* Speichern oben rechts: der Hinweis und der Knopf im Grün der Kopfleiste (.knopf-kopfleiste); immer sichtbar, auch unter 1100 px */
.onpage-speichern { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0 0 0 auto; }
.onpage-speichern .knopf { flex: none; }
/* Speichern oben rechts: Schrift und Symbol in Weiß (Björn, 15.10.2026) */
.onpage-speichern .knopf-kopfleiste, .onpage-speichern .knopf-kopfleiste:hover:not(:disabled) { color: #fff; }
.onpage-speichern .knopf-kopfleiste:hover:not(:disabled) { background: color-mix(in srgb, var(--farbe-akzent) 85%, black); }
.onpage-speichern .ungespeichert-hinweis { font-size: 0.875rem; color: var(--farbe-text); }
.onpage-speichern .ungespeichert-hinweis[hidden] { display: none; }
.onpage-sprache { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--farbe-text-leise); }
.onpage-sprache select { min-height: 32px; padding: 3px 8px; font-size: 0.875rem; }
.onpage { display: flex; flex-direction: column; margin: 0; height: calc(100vh - var(--kopfleiste-hoehe)); height: calc(100dvh - var(--kopfleiste-hoehe)); }
.onpage-koerper { flex: 1 1 auto; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: clamp(300px, 22vw, 420px) minmax(0, 1fr); min-height: 0; }
.onpage-mitte { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #e9ebef; }
.onpage-kopf { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px var(--seitenrand); background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
.onpage-titel { margin: 0; font-size: 1rem; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onpage-geraete { display: flex; gap: 6px; }
.onpage-geraete .ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.onpage-buehne { position: relative; flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; overflow: hidden; }
.onpage-rahmen { display: block; width: 100%; height: 100%; border: 0; background: #fff; transition: width 200ms ease; }
.onpage-buehne[data-geraet="tablet"] .onpage-rahmen { width: min(100%, 820px); box-shadow: 0 0 0 1px var(--farbe-rand); }
.onpage-buehne[data-geraet="handy"] .onpage-rahmen { width: min(100%, 400px); box-shadow: 0 0 0 1px var(--farbe-rand); }
.onpage-laden { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); font-size: 0.875rem; color: var(--farbe-text-leise); pointer-events: none; }
.onpage-werkzeuge { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--farbe-flaeche); border-right: 1px solid var(--farbe-rand); overflow: auto; }
.onpage-werkzeuge-inhalt { padding: 16px var(--seitenrand); }
.onpage-leer { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 40px 0; text-align: center; color: var(--farbe-text-leise); }
.onpage-leer .icon { width: 32px; height: 32px; }
.onpage-auswahl-titel { margin: 0 0 6px; font-size: 1rem; }
/* Eigenschaften der gewählten Spalte: die Formulare des Spalteneditors (Grafik, Video) in der schmalen Spalte */
.onpage-eigenschaften { margin-top: 14px; }
.onpage-eigenschaften .zelle-bildwahl .zelle-bild { max-height: 220px; }
.onpage-eigenschaften [data-video-vorschau] { display: none; }
.onpage-eigenschaften .zelle-wahl-titel { margin: 0 0 8px; }
.onpage-eigenschaften .art-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.onpage-abschnitt { display: grid; gap: 12px; }
.onpage-abschnitt .feld { margin: 0; }
.onpage-abschnitt .datumspaar { display: grid; gap: 6px; }
.onpage-abschnitt-hinweis { margin: 0 0 10px; }
/* Knöpfe unter „Diese Seite“: volle Breite der Werkzeugspalte, Beschriftung linksbündig */
.onpage-seite-knoepfe { display: grid; gap: 8px; justify-items: stretch; }
.onpage-seite-knoepfe .knopf { width: 100%; justify-content: flex-start; }
.onpage-modul { display: grid; gap: 10px; }
.onpage-modul .zelle-karte-modul { margin: 0; }
.onpage-modul .modul-text { display: grid; gap: 2px; min-width: 0; }
.onpage-modul-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
/* Seiteneinstellungen im Dialog: Kopf, Hinweis, scrollbarer Inhalt, Knopfreihe – der Innenabstand kommt wie überall von .dialog-formular */
.dialog-onpage-einstellungen { width: min(1180px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: hidden; }
.dialog-onpage-einstellungen[open] { display: grid; }
.dialog-onpage-einstellungen .dialog-formular { grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: calc(100vh - 24px); box-sizing: border-box; }
.dialog-onpage-einstellungen-inhalt { min-height: 0; overflow: auto; padding: 2px; }
.dialog-onpage-einstellungen .reiterbox { margin: 0; }
/* Die Box ist im Dialog immer offen (onpage.js klappt sie beim Öffnen auf); der Einklapp-Knopf hat hier keinen Sinn */
.dialog-onpage-einstellungen .reiterbox.ist-aktiv .reiterbox-einklappen { display: none; }
/* Hilfecenter-Reiter nicht über der Website in der Fenstermitte (verdeckt die Leisten der Abschnitte), sondern unten rechts */
.ist-onpage .hilfecenter-reiter { top: auto; bottom: 28px; transform: none; }
@media (max-width: 1099px) {
    /* schmal: Website oben, Werkzeuge darunter */
    .onpage-koerper { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
    .onpage-werkzeuge { order: 2; border-right: 0; border-top: 1px solid var(--farbe-rand); max-height: 40vh; }
}
@media (prefers-reduced-motion: reduce) { .onpage-rahmen { transition: none; } }

/* ---------- Formular-Baukasten: Builder und Anfragen (PLAN.md 3.40) ---------- */
.fbk-admin-links { display: grid; gap: 16px; min-width: 0; }
.fbk-admin-links[hidden] { display: none; }
.fbk-vorschau-rahmen { display: block; width: 100%; height: 100%; background: #fff; border: 1px solid var(--farbe-rand); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(15, 39, 64, 0.1); }
.fbk-abschnitt-inhalt { display: grid; gap: 14px; }

/* Mitte: Titelzeile (mit Vorlagen-Auswahl), Hinweis, Reiter mit Umschalter Aufbau/Vorschau, darunter der Inhalt des Reiters */
.fbk-mitte-kopf { flex: none; padding: 0 var(--seitenrand); }
.fbk-mitte-titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 46px; }
.fbk-mitte-titel { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.fbk-mitte-hinweis { margin: 2px 0 10px; }
.fbk-mitte-hinweis[hidden] { display: none; }
.fbk-mitte-hinweis[hidden] + .fbk-mitte-leiste { margin-top: 10px; }
.fbk-kopf-name { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fbk-mitte-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.fbk-mitte-leiste .unterreiter { margin: 0; }
.fbk-mitte-leiste .unterreiter[hidden] { display: none; }
.fbk-mitte-inhalt { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.fbk-mitte-flaeche { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--seitenrand) 96px; }
.fbk-vorschau-buehne { overflow: hidden; padding-bottom: 16px; }
.fbk-ansicht-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fbk-ansicht-wahl .ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.fbk-ansicht-wahl[hidden] { display: none; }
@media (min-width: 1100px) {
    .fbk-mitte-flaeche { padding-bottom: 24px; }
}

/* Vorlagen-Auswahl (nur bei neuen Formularen) neben dem Titel */
.fbk-vorlagen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fbk-vorlagen[hidden] { display: none; }
.fbk-vorlagen label { font-weight: 600; white-space: nowrap; }
.fbk-vorlagen select { width: auto; max-width: 220px; }

/* Rechte Spalte: Eigenschaften des angeklickten Elements – oder die Vorschau */
.fbk-rechts-inspektor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 14px 16px 96px; }
.fbk-rechts-inspektor > .fbk-inspektor { flex: none; }
/* Hinweis ohne gewähltes Element: horizontal und vertikal zentriert */
.fbk-rechts-leer { margin: auto; max-width: 300px; padding: 24px 8px; text-align: center; color: var(--farbe-text-leise); }
.fbk-rechts-leer-titel { margin: 0 0 8px; font-size: 1.15rem; color: var(--farbe-kopfleiste); }
.fbk-rechts-leer p { margin: 0; }
.fbk-rechts-inspektor[hidden], .fbk-rechts-vorschau[hidden] { display: none; }
.fbk-rechts-vorschau { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: #f1f1f1; }
.fbk-rechts-kopf { display: grid; gap: 2px; padding: 12px 16px 8px; }
.fbk-rechts-buehne { flex: 1 1 auto; min-height: 0; padding: 0 16px 80px; }
@media (min-width: 1100px) {
    .fbk-rechts-inspektor { padding-bottom: 32px; }
    .fbk-rechts-buehne { padding-bottom: 16px; }
}

/* Palette links (Reiter „Felder“): Feldarten zum Hineinziehen (oder, in der Listenansicht, zum Anklicken) */
.fbk-palette-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 0 14px; }
.fbk-palette-titel { margin: 0; font-size: 1rem; }
.fbk-palette { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 16px; padding: 12px 12px 24px; }
.fbk-palette > *, .fbk-bibliothek > *, .fbk-bib-gruppe { min-width: 0; }
.fbk-palette-hinweis { margin: 0; font-size: 0.82rem; }
.fbk-palette-modus { justify-self: start; }
.fbk-bibliothek { display: grid; gap: 14px; }
.fbk-bib-titel { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--farbe-text-leise); }
.fbk-bib-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.fbk-kachel {
    display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; font-size: 0.86rem; font-weight: 600; line-height: 1.2;
    color: var(--farbe-kopfleiste); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius);
    cursor: grab; user-select: none; transition: border-color var(--uebergang), background-color var(--uebergang);
}
.fbk-kachel:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.fbk-kachel:active { cursor: grabbing; }
.fbk-kachel.ist-klickbar, .fbk-kachel.ist-klickbar:active { cursor: pointer; }
.fbk-kachel:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.fbk-kachel .icon { flex: none; color: var(--farbe-primaer); }
.fbk-kachel span { min-width: 0; }
.fbk-kachel .fbk-kachel-griff { margin-left: auto; color: var(--farbe-text-hell); opacity: 0.7; }

/* Eigenschaften des angeklickten Elements: die ganze rechte Spalte, Kopf mit Aktionen bleibt oben stehen */
.fbk-inspektor { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); box-shadow: var(--schatten-karte); }
.fbk-inspektor-kopf { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--farbe-rand); }
.fbk-inspektor-kopf .fbk-karte-aktionen { margin-left: auto; align-items: center; }
.fbk-inspektor-kopf .fbk-inspektor-trenner { width: 1px; height: 20px; margin: 0 4px; background: var(--farbe-rand); }
.fbk-inspektor .fbk-karte-innen { border-top: 0; }

.fbk-aufbau-buehne { overflow-y: auto; }
.fbk-aufbau-schritt { margin: 0 0 16px; padding: 14px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); }
.fbk-aufbau-schritt.ist-aktiv { border-color: var(--farbe-primaer); }
.fbk-aufbau-schrittkopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fbk-aufbau-schrittkopf input { flex: 1 1 auto; min-width: 0; }
.fbk-aufbau-buehne > .fbk-schritt-hinzu { padding: 0 2px 8px; }

/* Zeile = 4 Zellen als Untergrund; die Felder liegen darüber in einem 12er-Raster (wie auf der Website) */
.fbk-zeile { position: relative; min-height: 84px; border-radius: var(--radius); transition: box-shadow var(--uebergang); }
.fbk-zeile-raster { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.fbk-zeile-raster span { background: var(--farbe-flaeche-leise); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-klein); }
.fbk-zeile-inhalt { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; min-height: 84px; }
.fbk-zeile-leer { display: grid; place-items: center; margin-top: 16px; }
.fbk-leer-text { position: relative; margin: 0; padding: 4px 14px; text-align: center; font-size: 0.9rem; color: var(--farbe-text-leise); background: var(--farbe-flaeche); border-radius: 999px; pointer-events: none; }
.fbk-zeile.ist-ablageziel { box-shadow: 0 0 0 2px var(--farbe-primaer); }
.fbk-zeile.ist-ablageziel .fbk-zeile-raster span { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); }
.fbk-zeile.ist-voll { box-shadow: 0 0 0 2px var(--farbe-gefahr); }
.fbk-zeile.ist-voll::after {
    content: "Zeile ist voll (höchstens 4 Felder)"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.85rem; font-weight: 600;
    color: var(--farbe-gefahr); background: color-mix(in srgb, var(--farbe-flaeche) 80%, transparent); border-radius: var(--radius); pointer-events: none;
}

/* Fläche zwischen zwei Zeilen: legt beim Ablegen eine neue Zeile an */
.fbk-zwischen { height: 8px; margin: 2px 0; border-radius: 4px; transition: height var(--uebergang), background-color var(--uebergang); }
.fbk-zieht .fbk-zwischen { height: 14px; }
.fbk-zwischen.ist-ablageziel { height: 14px; background: var(--farbe-primaer); }

.fbk-spanne-12 { grid-column: span 12; }
.fbk-spanne-9 { grid-column: span 9; }
.fbk-spanne-8 { grid-column: span 8; }
.fbk-spanne-6 { grid-column: span 6; }
.fbk-spanne-4 { grid-column: span 4; }
.fbk-spanne-3 { grid-column: span 3; }
.fbk-element {
    position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; padding: 8px 10px 10px;
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-klein);
    box-shadow: 0 1px 2px rgba(15, 39, 64, 0.08); cursor: grab;
}
.fbk-element:hover { border-color: var(--farbe-primaer); }
.fbk-element:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.fbk-element.ist-gewaehlt { border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px var(--farbe-primaer); }
.fbk-element.ist-gezogen { opacity: 0.4; }
.fbk-element.ist-einfuegen-vor::before, .fbk-element.ist-einfuegen-ende::after {
    content: ""; position: absolute; top: -2px; bottom: -2px; width: 5px; background: var(--farbe-akzent); border-radius: 3px;
}
.fbk-element.ist-einfuegen-vor::before { left: -7px; }
.fbk-element.ist-einfuegen-ende::after { right: -7px; }
.fbk-el-kopf { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.fbk-el-art { min-width: 0; overflow: hidden; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-text-leise); }
.fbk-el-aktionen { display: flex; margin-left: auto; opacity: 0; transition: opacity var(--uebergang); }
.fbk-element:hover .fbk-el-aktionen, .fbk-element:focus-within .fbk-el-aktionen, .fbk-element.ist-gewaehlt .fbk-el-aktionen { opacity: 1; }
.fbk-el-aktionen .fbk-icon-knopf { width: 26px; height: 26px; }
.fbk-el-titel { font-size: 0.92rem; font-weight: 600; overflow-wrap: anywhere; }
.fbk-el-ueberschrift .fbk-el-titel { font-size: 1.1rem; }
.fbk-el-trenner { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--farbe-rand-stark); }
.fbk-faux { height: 30px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.fbk-faux-nachricht { height: 62px; }
.fbk-faux-datei { border-style: dashed; }
.fbk-faux-auswahl { position: relative; }
.fbk-faux-auswahl::after { content: ""; position: absolute; top: 11px; right: 10px; width: 7px; height: 7px; border-right: 2px solid var(--farbe-text-hell); border-bottom: 2px solid var(--farbe-text-hell); transform: rotate(45deg); }
.fbk-faux-radio, .fbk-faux-mehrfach, .fbk-faux-einverstaendnis, .fbk-faux-hinweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; height: auto; background: none; border: 0;
}
.fbk-faux-punkt { flex: none; width: 13px; height: 13px; border: 2px solid var(--farbe-rand-stark); border-radius: 50%; }
.fbk-faux-mehrfach .fbk-faux-punkt, .fbk-faux-einverstaendnis .fbk-faux-punkt { border-radius: 3px; }
.fbk-faux-linie { display: inline-block; width: 34%; height: 8px; background: var(--farbe-rand); border-radius: 4px; }
.fbk-faux-lang { width: 70%; }
.fbk-schritt-box { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius); }
.fbk-schritt-kopf { display: grid; gap: 8px; padding-bottom: 8px; }
.fbk-schritt-hinzu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fbk-karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.fbk-karte.ist-offen { border-color: var(--farbe-rand-stark); box-shadow: var(--schatten-karte); }
.fbk-karte-kopf { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; }
.fbk-karte-titel { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; font: inherit; text-align: left; color: inherit; background: transparent; border: 0; border-radius: var(--radius-klein); cursor: pointer; }
.fbk-karte-titel:hover { background: var(--farbe-flaeche-leise); }
.fbk-karte-art { flex: none; padding: 2px 8px; font-size: 0.75rem; font-weight: 700; color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-radius: 999px; }
.fbk-karte-text { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fbk-karte-pflicht { color: var(--farbe-gefahr); font-weight: 700; }
.fbk-karte-aktionen { display: flex; flex: none; gap: 2px; }
.fbk-icon-knopf { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; font: inherit; font-size: 1rem; color: var(--farbe-text-leise); background: transparent; border: 0; border-radius: var(--radius-klein); cursor: pointer; }
.fbk-icon-knopf:hover:not([disabled]) { color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.fbk-icon-knopf[disabled] { opacity: 0.35; cursor: default; }
.fbk-karte-innen { display: grid; gap: 14px; padding: 6px 16px 16px; border-top: 1px solid var(--farbe-rand); }
.fbk-hinzu select { max-width: 100%; }
/* Möglichkeiten eines Felds: je Möglichkeit eine Karte mit „Name“ und (bei Empfängerwahl) „E-Mail-Adresse“ */
.fbk-moeglichkeiten { display: grid; gap: 10px; min-width: 0; }
.fbk-moeglichkeiten-liste { display: grid; gap: 8px; }
.fbk-moeglichkeit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 4px; padding: 6px 8px 12px 12px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.fbk-moeglichkeit-felder { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; padding-right: 4px; }
.fbk-moeglichkeit-nr { font-size: 0.8125rem; font-weight: 700; color: var(--farbe-text-leise); }
.fbk-moeglichkeit-feld { display: grid; gap: 3px; min-width: 0; }
.fbk-moeglichkeit-feld input { width: 100%; box-sizing: border-box; }
.fbk-moeglichkeit-titel { font-size: 0.8125rem; font-weight: 600; color: var(--farbe-text-leise); }
.fbk-moeglichkeit-aktionen { display: flex; gap: 2px; }
.fbk-moeglichkeit-hinweis { font-size: 0.8125rem; color: var(--farbe-gefahr); }
.fbk-moeglichkeit-hinweis:empty { display: none; }
.fbk-moeglichkeiten input.fbk-ungueltig { border-color: var(--farbe-gefahr); }
.fbk-moeglichkeiten > .knopf { justify-self: start; }
.fbk-bedingung { display: grid; gap: 10px; padding: 10px 12px; background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.fbk-erweitert > summary { cursor: pointer; font-weight: 600; color: var(--farbe-text-leise); }
.fbk-eingaenge { padding: 0; }
.fbk-eingang { border-top: 1px solid var(--farbe-rand); }
.fbk-eingang:first-child { border-top: 0; }
.fbk-eingang > summary { display: grid; grid-template-columns: 110px 200px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 18px; cursor: pointer; }
.fbk-eingang.ist-neu > summary { font-weight: 700; }
.fbk-eingang-vorschau { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--farbe-text-leise); }
.fbk-eingang-inhalt { display: grid; gap: 10px; padding: 4px 18px 18px; }
.fbk-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.fbk-daten dt { color: var(--farbe-text-leise); }
.fbk-daten dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .fbk-eingang > summary { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.fbk-admin-links > *, .fbk-schritt-box > *, .fbk-karte, .fbk-karte-kopf, .fbk-abschnitt-inhalt > *, .fbk-karte-innen > * { min-width: 0; }
.fbk-hinzu select { width: 100%; }
/* Hinweis ohne Auswahl: gleich viel Rand oben und unten, damit er in der Mitte der Spalte steht */
.fbk-rechts-inspektor:has(> .fbk-rechts-leer) { padding-bottom: 14px; }

/* ---------- To-Dos (templates/todos.twig, Infrastructure/Checkliste) ---------- */
/* Barrierefreiheits-Check (Einstellungen → Barrierefreiheit, E81) */
.bfp { margin-top: var(--abstand); }
.bfp > .karte-kopf { flex-wrap: wrap; gap: 8px 12px; }
.bfp > .karte-kopf .abzeichen { margin-left: auto; }
.bfp-einleitung { margin: 0 0 14px; }
.bfp-liste { margin: 0; padding: 0; list-style: none; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.bfp-thema + .bfp-thema { border-top: 1px solid var(--farbe-rand); }
.bfp-thema.ist-ok, .bfp-kopf { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; }
.bfp-kopf { cursor: pointer; list-style: none; }
.bfp-kopf::-webkit-details-marker { display: none; }
.bfp-kopf:hover { background: var(--farbe-flaeche-leise); }
.bfp-status { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.8rem; font-weight: 700; }
.ist-ok .bfp-status { color: #fff; background: var(--farbe-erfolg); }
.ist-ok .bfp-status .icon { width: 17px; height: 17px; stroke-width: 3; }
.ist-offen .bfp-status { color: var(--farbe-warnung); background: var(--farbe-warnung-hell); border: 2px solid var(--farbe-warnung); }
.bfp-text { display: grid; gap: 2px; min-width: 0; }
.bfp-titel { margin: 0; font-weight: 600; }
.bfp-beschreibung { margin: 0; font-size: 0.9rem; }
.bfp-pfeil { color: var(--farbe-text-leise); transition: transform 0.25s ease; }
.bfp-details[open] .bfp-pfeil { transform: rotate(180deg); }
.bfp-funde { padding: 0 18px 16px 62px; }
.bfp-tipp { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; font-size: 0.9rem; background: var(--farbe-primaer-hell); border-radius: var(--radius-klein); }
.bfp-tipp .icon { flex: none; margin-top: 2px; color: var(--farbe-primaer); }
.bfp-fundliste { margin: 0; padding: 0; list-style: none; }
.bfp-fund { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 9px 0; border-top: 1px solid var(--farbe-rand); }
.bfp-fund:first-child { border-top: 0; }
.bfp-fund-text { min-width: 0; flex: 1 1 320px; }
.bfp-fund-titel { margin: 0; font-weight: 600; }
.bfp-fund-detail { margin: 2px 0 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.bfp-grenzen { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 0.88rem; }
.bfp-grenzen .icon { flex: none; margin-top: 2px; }
@media (max-width: 600px) { .bfp-funde { padding-left: 18px; } }

.todos-fortschritt { display: grid; gap: 14px; margin-bottom: var(--abstand); }
.todos-fortschritt-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.todos-zahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 1.15rem; }
.todos-zahl strong { font-size: 1.6rem; }
.todos-balken { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: var(--farbe-rand); -webkit-appearance: none; appearance: none; }
.todos-balken::-webkit-progress-bar { background: var(--farbe-rand); }
.todos-balken::-webkit-progress-value { background: var(--farbe-erfolg); border-radius: 999px; }
.todos-balken::-moz-progress-bar { background: var(--farbe-erfolg); border-radius: 999px; }
.todos-fertig { display: grid; justify-items: center; gap: 6px; margin-bottom: var(--abstand); padding: 36px 24px; text-align: center; }
.todos-fertig .icon { width: 44px; height: 44px; color: var(--farbe-erfolg); }
.todos-fertig h2 { margin: 0; }
.todos-fertig p { margin: 0; }
.todos-gruppe { padding: 0; margin-bottom: var(--abstand); }
.todos-gruppe > .karte-kopf { justify-content: flex-start; flex-wrap: wrap; gap: 4px 14px; padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--farbe-rand); }
.todos-gruppe > .karte-kopf .abzeichen { margin-left: auto; }
.todos-liste { margin: 0; padding: 0; list-style: none; }
.todo { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--farbe-rand); }
.todo:first-child { border-top: 0; }
.todo-status { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; border: 2px solid var(--farbe-warnung); border-radius: 50%; }
.todo-status .icon { width: 17px; height: 17px; stroke-width: 3; }
.todo.ist-erledigt .todo-status { background: var(--farbe-erfolg); border-color: var(--farbe-erfolg); }
.todo.ist-offen { background: color-mix(in srgb, var(--farbe-warnung) 5%, var(--farbe-flaeche)); }
.todo-text { min-width: 0; }
.todo-titel { margin: 0; font-weight: 700; }
.todo-detail { margin: 2px 0 0; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.todo.ist-offen .todo-detail { color: color-mix(in srgb, var(--farbe-warnung) 55%, var(--farbe-text)); font-weight: 600; }
.todo-hinweis { margin: 4px 0 0; font-size: 0.9rem; }
.todo-aktion { display: flex; justify-content: flex-end; }
.todo-ohne-recht { font-size: 0.85rem; text-align: right; }
@media (max-width: 640px) {
    .todo { grid-template-columns: 30px minmax(0, 1fr); }
    .todo-aktion { grid-column: 2; justify-content: flex-start; }
}
.schnellaktion-zahl { flex: none; }
.todo-aktion { align-items: center; gap: 8px; }
.todo-ausblenden { margin: 0; }
.todos-ausgeblendet { padding: 0; margin-bottom: var(--abstand); }
.todos-ausgeblendet > summary { padding: 16px 20px; font-weight: 700; cursor: pointer; }
.todos-ausgeblendet > p { margin: 0; padding: 0 20px 12px; }
.todo.ist-ausgeblendet .todo-status { border-style: dashed; border-color: var(--farbe-rand-stark); }
.todo.ist-ausgeblendet .todo-titel { color: var(--farbe-text-leise); }

/* Support-Tickets (PLAN.md E52 / 3.43): aufklappbare Karten mit Verlauf und Antwortformular */
.ticket-zusammenfassung { margin: 0 0 var(--abstand); }
.ticket { padding: 0; margin-bottom: var(--abstand); }
.ticket > summary { list-style: none; }
.ticket > summary::-webkit-details-marker { display: none; }
.sm-druckansicht { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.sm-druckansicht select { width: auto; min-width: 0; max-width: 100%; }
.ticket-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; background: rgb(212 231 186 / 35%); }
.ticket-kopf-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.ticket-titel { font-weight: 700; color: var(--farbe-kopfleiste); overflow-wrap: anywhere; }
.ticket-meta { font-size: 0.875rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.ticket-pfeil { flex: none; color: var(--farbe-text-hell); transition: transform 0.2s; }
.ticket[open] > .ticket-kopf { border-bottom: 1px solid var(--farbe-rand); }
.ticket[open] > .ticket-kopf .ticket-pfeil { transform: rotate(180deg); }
.ticket-verlauf { display: grid; gap: 14px; padding: 20px; }
.ticket-nachricht { max-width: 760px; padding: 14px 16px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); }
.ticket-nachricht-team { margin-left: auto; border-color: transparent; border-left: 4px solid var(--farbe-erfolg); background: var(--farbe-erfolg-hell); }
.ticket-nachricht-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 6px; }
.ticket-text { margin: 0; overflow-wrap: anywhere; }
.ticket-anhaenge { margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.ticket-anhaenge li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ticket-antwort { display: grid; gap: 14px; margin: 0; padding: 20px; border-top: 1px solid var(--farbe-rand); background: var(--farbe-flaeche-leise); }
.ticket-antwort .knopf-reihe { margin: 0; }
.support-datei { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .ticket-pfeil { transition: none; }
}
@media (max-width: 640px) {
    .ticket-kopf { flex-wrap: wrap; padding: 14px 16px; }
    .ticket-verlauf, .ticket-antwort { padding: 16px; }
    .ticket-nachricht-team { margin-left: 0; }
}
.karte > .feld + .knopf-reihe { margin-top: 24px; }

/* Alte Formulare umwandeln (Formular-Baukasten, PLAN.md 3.40 / E54) */
.umw-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--abstand); align-items: start; }
.umw-links, .umw-rechts { display: grid; gap: var(--abstand); min-width: 0; }
.umw-links > .karte + .karte, .umw-links > form, .umw-rechts > .karte { margin-top: 0; }
.umw-rahmen { display: block; width: 100%; height: 640px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); }
.umw-gruppe { margin: 14px 0 4px; }
.umw-nicht strong { color: var(--farbe-gefahr); }
.umw-pruefen strong { color: color-mix(in srgb, var(--farbe-warnung) 70%, black); }
.umw-liste { margin: 0 0 8px; padding-left: 20px; }
.umw-liste li { margin: 3px 0; overflow-wrap: anywhere; }
.umw-schritte { margin: 0; padding-left: 20px; }
.umw-schritte li { margin: 6px 0; }
@media (max-width: 1100px) {
    .umw-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* Papierkorb: Vorschau eines gelöschten Abschnitts beim Überfahren (PLAN.md 3.19) */
.pk-pop {
    position: fixed; z-index: 70; width: min(760px, calc(100vw - 32px)); max-height: 70vh; overflow: visible;
    padding: 12px 14px 14px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark, var(--farbe-rand));
    border-radius: var(--radius); box-shadow: 0 14px 36px rgba(15, 39, 64, 0.22); pointer-events: none;
}
.pk-pop[hidden] { display: none; }
.pk-pop.ist-fest { pointer-events: auto; }
/* Pfeil zum Knopf: unten an der Vorschau (steht sie über dem Knopf) bzw. oben (steht sie darunter) */
.pk-pop::after {
    content: ''; position: absolute; left: calc(var(--pk-pfeil, 40px) - 7px); bottom: -8px; width: 14px; height: 14px;
    background: var(--farbe-flaeche); border: solid var(--farbe-rand-stark, var(--farbe-rand)); border-width: 0 1px 1px 0; transform: rotate(45deg);
}
.pk-pop.ist-darunter::after { bottom: auto; top: -8px; border-width: 1px 0 0 1px; }
.pk-pop-kopf { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--farbe-text-leise); }
.pk-pop-raster { display: flex; align-items: flex-start; gap: 10px; }
.pk-pop-spalte {
    flex: 1 1 0; min-width: 0; max-height: 50vh; overflow: hidden; padding: 10px 12px; font-size: 0.92rem; line-height: 1.45;
    overflow-wrap: anywhere; border: 1px dashed var(--farbe-rand-stark, var(--farbe-rand)); border-radius: 6px; background: var(--farbe-flaeche-leise);
}
.pk-b1 { flex-grow: 1; } .pk-b2 { flex-grow: 2; } .pk-b3 { flex-grow: 3; } .pk-b4 { flex-grow: 4; } .pk-b5 { flex-grow: 5; } .pk-b6 { flex-grow: 6; }
.pk-b7 { flex-grow: 7; } .pk-b8 { flex-grow: 8; } .pk-b9 { flex-grow: 9; } .pk-b10 { flex-grow: 10; } .pk-b11 { flex-grow: 11; } .pk-b12 { flex-grow: 12; }
.pk-pop-spalte > :first-child { margin-top: 0; }
.pk-pop-spalte > :last-child { margin-bottom: 0; }
.pk-pop-spalte p, .pk-pop-spalte ul, .pk-pop-spalte ol { margin: 0 0 0.6em; }
.pk-pop-spalte h1, .pk-pop-spalte h2, .pk-pop-spalte h3, .pk-pop-spalte h4 { margin: 0 0 0.4em; font-size: 1.05rem; line-height: 1.25; }
.pk-pop-spalte ul, .pk-pop-spalte ol { padding-left: 1.3em; }
.pk-pop-spalte img { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; margin: 0 auto 6px; object-fit: contain; }
.pk-pop-spalte table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pk-pop-spalte td, .pk-pop-spalte th { padding: 2px 6px; border: 1px solid var(--farbe-rand); text-align: left; }
.pk-pop-hinweis { display: flex; align-items: center; gap: 8px; color: var(--farbe-text-leise); }
.pk-pop-hinweis .icon { flex: none; width: 18px; height: 18px; }
.pk-pop-titel { display: block; font-size: 0.8rem; color: var(--farbe-text-leise); text-align: center; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .pk-pop-raster { flex-direction: column; }
    .pk-pop-spalte { width: 100%; max-height: 30vh; }
}
.umw-schnell { margin-top: 6px; }
.umw-rahmen-schmal { max-width: 360px; height: 520px; }
.modul-aktionen { align-items: center; }

/* Anfahrt / Karte (PLAN.md E57): Adresssuche und Vorschau im Formular */
.gm-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.gm-status { margin: 0; }
.gm-status-fehler { color: var(--farbe-gefahr, #b3261e); }
.gm-karte { position: relative; z-index: 0; width: 100%; border: 1px solid var(--farbe-rand); border-radius: var(--radius); overflow: hidden; }
.gm-tipp { margin: 8px 0 0; }
/* Anfahrt / Karte: kompakte Reihen im Einstellungsformular (templates/bearbeiten.twig des Moduls) */
.gm-zeile { display: grid; align-items: start; gap: 16px 24px; margin-bottom: 18px; }
.gm-zeile:last-child { margin-bottom: 0; }
@media (min-width: 480px) { .gm-zeile-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) {
    .gm-zeile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gm-zeile-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gm-zeile-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gm-orte { margin: 0; padding-top: 10px; font-size: 0.95rem; }
ul.gm-orte { padding-left: 20px; }

/* Auf-/zuklappbare Karte (<details class="karte karte-klappbar">, Verhalten in app.js): Titelzeile ist der Schalter */
.karte-klappbar > summary { list-style: none; cursor: pointer; margin-bottom: 0; align-items: center; flex-wrap: nowrap; border-radius: var(--radius); }
.karte-klappbar > summary::-webkit-details-marker { display: none; }
.karte-klappbar > summary .karte-titel { margin: 0; }
.karte-klappbar[open] > summary { margin-bottom: 16px; }
.karte-klappbar > summary:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 4px; }
.klapp-pfeil { display: grid; place-items: center; flex: none; color: var(--farbe-text-leise); transition: transform var(--uebergang); }
.karte-klappbar[open] > summary .klapp-pfeil { transform: rotate(180deg); }
.karte-klappbar > summary:hover .klapp-pfeil { color: var(--farbe-text); }

/* Ansprechpartner (PLAN.md E58): Personenliste, Darstellung und Vorschau im Admin */
.pm-admin { display: grid; gap: 18px; padding: 0 var(--seitenrand) 40px; }
.pm-reiter { margin: 0; }
.pm-reiter .unterreiter-punkt { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.pm-reiter .unterreiter-punkt.ist-aktiv { color: #fff; }
.pm-gruppe { display: grid; gap: 14px; }
.pm-gruppe[hidden] { display: none; }
.pm-zaehler { display: inline-block; min-width: 1.6em; padding: 0 6px; font-size: 0.8rem; text-align: center; border-radius: 999px; background: var(--farbe-flaeche); color: var(--farbe-text-leise); }
.pm-bereich { display: grid; gap: 14px; align-content: start; }
.pm-bereich[hidden] { display: none; }
.pm-titel { margin: 10px 0 0; font-size: 1rem; color: var(--farbe-kopfleiste); }
.pm-liste { display: grid; gap: 14px; }
.pm-leer[hidden], .pm-liste:empty { display: none; }
.pm-fehlerliste { margin: 0; padding: 10px 14px 10px 32px; color: var(--farbe-gefahr, #b3261e); background: color-mix(in srgb, var(--farbe-gefahr, #b3261e) 8%, var(--farbe-flaeche)); border-radius: var(--radius); }
.pm-person-admin { margin: 0; padding: 14px 16px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); min-width: 0; }
.pm-person-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.pm-person-titel { font-weight: 700; color: var(--farbe-kopfleiste); overflow-wrap: anywhere; }
.pm-person-aktionen { display: inline-flex; gap: 2px; flex: none; }
.pm-person-aktionen .knopf-icon[disabled] { opacity: 0.3; cursor: default; }
.pm-person-raster { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 560px) { .pm-person-raster { grid-template-columns: minmax(0, 1fr); } }
.pm-bildfeld { display: grid; gap: 6px; justify-items: start; }
.pm-bildknopf { display: block; width: 132px; height: 132px; padding: 0; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--farbe-primaer) 7%, var(--farbe-flaeche)); border: 2px dashed var(--farbe-rand); border-radius: var(--radius); }
.pm-bildknopf:hover { border-color: var(--farbe-primaer); }
.pm-bildvorschau, .pm-bildvorschau img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm-bildleer { display: grid; place-items: center; gap: 4px; height: 100%; padding: 8px; font-size: 0.85rem; color: var(--farbe-text-leise); }
.pm-bildleer[hidden], .pm-bildfeld [hidden] { display: none; }
.pm-felder { display: grid; gap: 12px; min-width: 0; }
.pm-zeile { display: grid; gap: 12px 16px; align-items: start; }
@media (min-width: 560px) {
    .pm-zeile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-zeile-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pm-zeile-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .pm-zeile-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pm-zeile > [hidden], .pm-zeile > div[hidden] { display: none; }
.pm-social-admin summary { cursor: pointer; font-weight: 600; color: var(--farbe-text-leise); padding: 4px 0; }
.pm-social-admin[open] summary { margin-bottom: 8px; }
.pm-vorlagen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pm-vorlage { position: relative; display: grid; gap: 6px; align-content: start; padding: 10px; cursor: pointer; background: var(--farbe-flaeche); border: 2px solid var(--farbe-rand); border-radius: var(--radius); }
.pm-vorlage:hover { border-color: color-mix(in srgb, var(--farbe-primaer) 55%, var(--farbe-rand)); }
.pm-vorlage.ist-gewaehlt { border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px color-mix(in srgb, var(--farbe-primaer) 25%, transparent); }
.pm-vorlage input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pm-vorlage input[type="radio"]:focus-visible + .pm-vorlage-bild { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.pm-vorlage-titel { font-weight: 700; color: var(--farbe-kopfleiste); }
.pm-vorlage-text { font-size: 0.82rem; line-height: 1.3; color: var(--farbe-text-leise); }
.pm-vorlage-eigen { align-content: center; border-style: dashed; }
/* Skizzen der Vorlagen: drei Kästchen, die die Struktur andeuten */
.pm-vorlage-bild { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; height: 58px; padding: 6px; background: color-mix(in srgb, var(--farbe-primaer) 6%, var(--farbe-flaeche)); border-radius: var(--radius-klein); }
.pm-vorlage-bild i { display: block; background: color-mix(in srgb, var(--farbe-primaer) 38%, var(--farbe-flaeche)); border-radius: 3px; }
.pm-skizze-karte-rund i { border-radius: 50% 50% 4px 4px; }
.pm-skizze-karte-abgerundet i { border-radius: 8px 8px 3px 3px; }
.pm-skizze-horizontal-rund { grid-template-columns: repeat(2, 1fr); }
.pm-skizze-horizontal-rund i { border-radius: 50%; }
.pm-skizze-horizontal-karte { grid-template-columns: repeat(2, 1fr); }
.pm-skizze-horizontal-karte i { border-radius: 6px; }
.pm-skizze-schild i { border-bottom: 8px solid color-mix(in srgb, var(--farbe-primaer) 70%, var(--farbe-flaeche)); }
.pm-skizze-raute { grid-template-columns: repeat(2, 1fr); }
.pm-skizze-raute i { transform: rotate(45deg) scale(0.65); }
.pm-skizze-farbblock i { background: color-mix(in srgb, var(--farbe-erfolg) 40%, var(--farbe-flaeche)); }
.pm-skizze-profil { grid-template-columns: 1fr 1.4fr; }
.pm-skizze-profil i:nth-child(n+3) { display: none; }
.pm-skizze-klassisch i { border-radius: 0; background: color-mix(in srgb, var(--farbe-text-hell) 35%, var(--farbe-flaeche)); }
.pm-farbe { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.pm-farbe input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: var(--farbe-flaeche); }
.pm-farbe input[type="color"][disabled] { opacity: 0.4; }
.pm-sichtbar { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pm-vorschau-spalte { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pm-vorschau-kopf { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--farbe-rand); }
.pm-vorschau-titel { margin: 0; font-size: 1rem; }
.pm-vorschau-rahmen { flex: 1 1 auto; width: 100%; min-height: 320px; border: 0; background: #fff; }

/* Modul bearbeiten im Overlay der Seitenbearbeitung: Dialog mit iframe (spalteneditor.js) und die Seite darin (?overlay=1) */
.dialog-modul-overlay { width: min(1560px, 96vw); max-width: none; height: min(980px, 94vh); padding: 0; overflow: hidden; border-radius: var(--radius-gross); }
.dialog-modul-overlay[open] { display: flex; flex-direction: column; }
.modul-overlay-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--farbe-flaeche); border-bottom: 1px solid var(--farbe-rand); }
.modul-overlay-kopf h2 { margin: 0; font-size: 1.1rem; color: var(--farbe-kopfleiste); }
.modul-overlay-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modul-overlay-rahmen { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--farbe-hintergrund); }
@media (max-width: 700px) { .dialog-modul-overlay { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; } }
body.ist-overlay { --kopfleiste-hoehe: 0px; }
.ist-overlay .kopfleiste, .ist-overlay .handy-menue, .ist-overlay .handy-menue-schleier, .ist-overlay .speichern-leiste,
.ist-overlay .sprungmarke, .ist-overlay .hilfecenter, .ist-overlay .hilfecenter-reiter, .ist-overlay .brotkrumen,
.ist-overlay .seitenkopf, .ist-overlay .layout-reiter, .ist-overlay .vorlage-zurueck-link { display: none !important; }
/* (nur der Bereichsreiter des Layouts; Reiter, die ein Modul in seiner Maske selbst zeichnet – Bilder | Einstellungen –, bleiben) */
.ist-overlay .hauptinhalt { padding-top: 16px; padding-bottom: 28px; }

/* Solange ein modaler Dialog offen ist (Overlay „Modul bearbeiten“, Medienauswahl, Rückfragen …), scrollt die Seite dahinter nicht.
   scrollbar-gutter hält den Platz der Bildlaufleiste frei, damit der Inhalt beim Öffnen nicht zur Seite springt. */
html:has(dialog[open]) { overflow: hidden; }
/* Den Platz der Bildlaufleiste nur freihalten, wenn es vorher eine gab (app.js setzt die Klasse): ein „stable“ ohne Leiste
   schöbe Seiten mit voller Fläche (Arbeitsflächen der Module) beim Öffnen eines Dialogs um die Breite der Leiste zur Seite. */
html.hat-bildlaufleiste:has(dialog[open]) { scrollbar-gutter: stable; }
dialog { overscroll-behavior: contain; }

/* Neuigkeiten (modules/news): Beitragsliste, Eckdaten und Teaser eines Beitrags */
.news-vorschau { width: 48px; height: 36px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 10px; background: var(--farbe-hintergrund); }
.news-tabelle th a { vertical-align: middle; }
.news-kopfgruppe { display: flex; align-items: center; gap: 8px; }
.news-kopfgruppe .karte-titel { margin: 0; }
.news-inhalt-titel { margin: var(--abstand) 0 12px; }
.news-eckdaten .karte-klappbar > .feld, .news-eckdaten .karte-klappbar > .formular-raster { margin-top: 16px; }
.news-teaser-aus textarea { opacity: .6; }
.news-teaser-aus [data-bildfeld-waehlen], .news-teaser-aus [data-bildfeld-entfernen] { display: none; }
/* Neuigkeiten: Felder nebeneinander (gm-zeile-N), einzelne Felder über mehrere Spalten */
@media (min-width: 700px) {
    .gm-zeile-4 > .gm-spanne-2 { grid-column: span 2; }
    .gm-zeile-4 > .gm-spanne-3 { grid-column: span 3; }
}
.news-haken { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 6px; }
.news-eckdaten .gm-zeile { margin-bottom: 18px; }
.news-eckdaten .karte > .gm-zeile:last-child { margin-bottom: 0; }

/* ---------- Bildergalerie (PLAN.md 3.45 / E61): Editor mit Kategorien, Bilderraster, Einstellungen, Vorschau ---------- */
.medien-nur-mehrfach { display: none; }
.dialog-medien.ist-mehrfach .medien-nur-mehrfach { display: inline-flex; }

/* Links: Kategorien */
.bg-palette-kopf { flex: none; display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; }
.bg-palette-titel { margin: 0; font-size: 1rem; color: var(--farbe-kopfleiste); }
.bg-kategorien { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; padding: 4px 8px 12px; }
.bg-kat { display: flex; align-items: center; border: 1px solid transparent; border-radius: var(--radius); }
.bg-kat.ist-unter { margin-left: 16px; }
.bg-kat-knopf {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; font: inherit; text-align: left; color: var(--farbe-text); background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.bg-kat-knopf:hover { background: var(--farbe-flaeche-leise); }
.bg-kat-knopf:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; }
.bg-kat.ist-aktiv { background: color-mix(in srgb, var(--farbe-primaer) 13%, var(--farbe-flaeche)); }
.bg-kat.ist-aktiv .bg-kat-knopf { font-weight: 700; color: var(--farbe-primaer-dunkel); }
.bg-kat.ist-ziel { border-color: var(--farbe-akzent); background: var(--farbe-akzent-hell); }
.bg-kat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-kat-zahl { flex: none; font-size: 0.85rem; font-weight: 400; color: var(--farbe-text-leise); }
.bg-kat-werkzeuge { flex: none; display: flex; gap: 0; padding-right: 2px; }
.bg-iconknopf { width: 28px; height: 28px; }
.bg-mitte .feld-kopf, .bg-rechts .feld-kopf { justify-content: flex-start; gap: 6px; }
.bg-iconknopf:disabled { opacity: 0.35; cursor: default; }
.bg-palette-fuss { flex: none; padding: 10px 12px; border-top: 1px solid var(--farbe-rand); }

/* Mitte */
.bg-mitte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bg-mitte-kopf { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 var(--seitenrand); margin-bottom: 12px; }
.bg-mitte-kopf .unterreiter { margin: 0; }
.bg-kat-schmal { display: none; flex: 1 1 200px; }
.bg-kat-schmal select { width: 100%; }
@media (max-width: 1099px) { .bg-kat-schmal { display: block; } }
.bg-mitte-flaeche { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--seitenrand) 96px; }
.bg-mitte-flaeche[hidden] { display: none; }
.bg-mitte > .hinweis { margin: 0 var(--seitenrand) 12px; flex: none; }
.bg-bilder-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.bg-bilder-titel { display: grid; gap: 2px; min-width: 0; }
.bg-mitte-titel { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
.bg-bilder-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-markiert {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 8px 12px;
    background: var(--farbe-akzent-hell); border-radius: var(--radius);
}
.bg-markiert select { width: auto; min-width: 190px; }
.bg-hinweiszeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 12px; font-size: 0.9rem; }
.bg-status { margin: 0 0 8px; }
.bg-status[hidden] { display: none; }
.bg-unterhinweis { margin: 16px 0 0; }

.bg-raster-flaeche { min-height: 260px; border: 2px dashed transparent; border-radius: var(--radius-gross); transition: border-color var(--uebergang), background-color var(--uebergang); }
.bg-raster-flaeche.ist-datei-ziel { border-color: var(--farbe-akzent); background: var(--farbe-akzent-hell); }
.bg-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.bg-kachel {
    position: relative; display: block; overflow: hidden; background: var(--farbe-flaeche); cursor: pointer;
    border: 2px solid var(--farbe-rand); border-radius: var(--radius);
    content-visibility: auto; contain-intrinsic-size: auto 190px;
}
.bg-kachel:hover { border-color: color-mix(in srgb, var(--farbe-primaer) 55%, var(--farbe-rand)); }
.bg-kachel:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 1px; }
.bg-kachel.ist-gewaehlt { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-primaer) 28%, transparent); }
.bg-kachel.ist-markiert { border-color: var(--farbe-akzent); }
.bg-kachel.wird-gezogen { opacity: 0.45; }
.bg-kachel.ist-ziel-vor { box-shadow: -6px 0 0 var(--farbe-akzent); }
.bg-kachel.ist-ziel-nach { box-shadow: 6px 0 0 var(--farbe-akzent); }
.bg-kachel-bild { display: block; aspect-ratio: 1; background: var(--farbe-hintergrund); }
.bg-kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.bg-kachel-titel { display: block; padding: 6px 8px; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-kachel-haken {
    position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 26px; height: 26px; line-height: 0;
    background: rgba(255, 255, 255, 0.92); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity var(--uebergang);
}
.bg-kachel:hover .bg-kachel-haken, .bg-kachel:focus-within .bg-kachel-haken, .bg-kachel.ist-markiert .bg-kachel-haken, .bg-raster:has(.ist-markiert) .bg-kachel-haken { opacity: 1; }
.bg-kachel-haken input { margin: 0; width: 16px; height: 16px; }
.bg-kachel-nr { position: absolute; top: 6px; right: 6px; padding: 1px 7px; font-size: 0.75rem; font-weight: 700; color: #fff; background: rgba(15, 39, 64, 0.72); border-radius: 10px; }
.bg-kachel-warn, .bg-kachel-link {
    position: absolute; bottom: 36px; display: grid; place-items: center; width: 24px; height: 24px;
    background: rgba(255, 255, 255, 0.94); border-radius: 50%; line-height: 0;
}
.bg-kachel-warn { right: 6px; color: var(--farbe-warnung); }
.bg-kachel-link { left: 6px; color: var(--farbe-primaer); }
.bg-kachel-warn .icon, .bg-kachel-link .icon { width: 14px; height: 14px; }

.bg-leer { display: grid; justify-items: center; gap: 6px; padding: 56px 16px; text-align: center; }
.bg-leer-icon { display: grid; place-items: center; width: 64px; height: 64px; color: var(--farbe-primaer); background: var(--farbe-primaer-hell); border-radius: 50%; }
.bg-leer-icon .icon { width: 30px; height: 30px; }
.bg-leer-titel { margin: 8px 0 0; font-size: 1.15rem; font-weight: 700; }
.bg-leer-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }

/* Rechts: Eigenschaften */
.bg-rechts { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.bg-inspektor, .bg-vorschau-kasten { display: grid; gap: 14px; align-content: start; }
.bg-inspektor-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.bg-iconleiste { display: flex; gap: 2px; }
.bg-inspektor-bild img { display: block; width: 100%; max-height: 260px; object-fit: contain; background: var(--farbe-hintergrund); border-radius: var(--radius); }
.bg-pfad { margin: -6px 0 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.bg-inspektor-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.bg-uebernehmen { justify-self: start; }
.bg-rechts-leer { padding: 40px 8px; text-align: center; }

/* Einstellungen */
.bg-abschnitt-kopf { margin: 22px 0 10px; }
.bg-abschnitt-kopf:first-child { margin-top: 4px; }
.bg-abschnitt-titel { margin: 0; font-size: 1.05rem; color: var(--farbe-kopfleiste); }
.bg-layouts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); margin-bottom: 20px; }
.bg-layout {
    display: grid; gap: 6px; align-content: start; padding: 12px; cursor: pointer;
    background: var(--farbe-flaeche); border: 2px solid var(--farbe-rand); border-radius: var(--radius);
}
.bg-layout:hover { border-color: color-mix(in srgb, var(--farbe-primaer) 55%, var(--farbe-rand)); }
.bg-layout.ist-gewaehlt { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.bg-layout:focus-within { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.bg-layout-name { font-weight: 700; }
.bg-layout-text { font-size: 0.85rem; line-height: 1.35; }
.bg-skizze { display: grid; gap: 3px; height: 62px; margin-bottom: 4px; }
.bg-skizze i { display: block; background: var(--farbe-primaer); opacity: 0.38; border-radius: 2px; }
.bg-skizze-raster { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.bg-skizze-mauerwerk { display: block; column-count: 3; column-gap: 3px; }
.bg-skizze-mauerwerk i { margin-bottom: 3px; height: 18px; }
.bg-skizze-mauerwerk i:nth-child(3n + 1) { height: 28px; }
.bg-skizze-mauerwerk i:nth-child(3n) { height: 12px; }
.bg-skizze-streifen { display: flex; }
.bg-skizze-streifen i { flex: 1 1 0; }
.bg-skizze-slider { display: flex; overflow: hidden; }
.bg-skizze-slider i { flex: 0 0 42%; }
.bg-skizze-slider-mehrzeilig { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.bg-skizze-laufband { display: flex; overflow: hidden; align-items: center; }
.bg-skizze-laufband i { flex: 0 0 30%; height: 70%; }

/* Layout-Vorschau (schematisch, mit den Bildern der Galerie) */
.bg-vorschau { --bg-spalten: 3; --bg-zeilen: 2; padding: 10px; background: var(--farbe-hintergrund); border-radius: var(--radius); overflow: hidden; }
.bg-vorschau img, .bg-platzhalter { display: block; width: 100%; background: var(--farbe-rand); border-radius: 3px; object-fit: cover; }
.bg-vorschau-raster { display: grid; gap: 6px; grid-template-columns: repeat(var(--bg-spalten), minmax(0, 1fr)); }
.bg-vorschau-raster img, .bg-vorschau-raster .bg-platzhalter { aspect-ratio: 1; height: auto; }
.bg-vorschau-mauerwerk { display: block; column-count: var(--bg-spalten); column-gap: 6px; }
.bg-vorschau-mauerwerk img, .bg-vorschau-mauerwerk .bg-platzhalter { margin-bottom: 6px; height: auto; break-inside: avoid; }
.bg-vorschau-mauerwerk .bg-platzhalter { height: 70px; }
.bg-vorschau-mauerwerk .bg-platzhalter:nth-child(3n + 1) { height: 110px; }
.bg-vorschau-mauerwerk .bg-platzhalter:nth-child(3n) { height: 50px; }
.bg-vorschau-streifen { display: flex; gap: 4px; height: 280px; }
.bg-vorschau-streifen img, .bg-vorschau-streifen .bg-platzhalter { flex: 1 1 0; width: 0; height: 100%; border-radius: 0; }
.bg-vorschau-slider { display: flex; gap: 6px; overflow: hidden; }
.bg-vorschau-slider img, .bg-vorschau-slider .bg-platzhalter { flex: 0 0 62%; aspect-ratio: 4 / 3; height: auto; }
.bg-vorschau-slider-mehrzeilig { display: grid; grid-auto-flow: column; gap: 6px; overflow: hidden;
    grid-template-rows: repeat(var(--bg-zeilen), minmax(0, 1fr)); grid-auto-columns: calc((100% - (var(--bg-spalten) - 1) * 6px) / var(--bg-spalten)); }
.bg-vorschau-slider-mehrzeilig img, .bg-vorschau-slider-mehrzeilig .bg-platzhalter { aspect-ratio: 1; height: auto; }
.bg-vorschau-laufband { overflow: hidden; }
.bg-laufband-spur { display: flex; gap: 6px; width: max-content; animation: bg-laufband 18s linear infinite; }
.bg-laufband-spur img, .bg-laufband-spur .bg-platzhalter { flex: none; width: 110px; height: 80px; }
@keyframes bg-laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bg-laufband-spur { animation: none; } }
.bg-verwendung { margin-top: 24px; }
.bg-hinweisliste { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.bg-umwandeln-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }

/* Bildergalerie: Reiterleiste wie in der Modul-Übersicht (Reiter links, heller Bereich mit Bezeichnung und Knöpfen rechts) */
.bg-leiste-rahmen { flex: none; padding: 4px var(--seitenrand) 0; }
.bg-leiste-rahmen .bg-leiste { margin-bottom: 14px; }
.bg-leiste .reiter-punkt { font: inherit; font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.bg-leiste .reiter-punkt.ist-aktiv { background: var(--farbe-primaer); }
.bg-leiste-zusatz { flex: 1 1 360px; flex-wrap: nowrap; gap: 8px 12px; }
.bg-bezeichnung { display: flex; align-items: center; flex: 1 1 200px; gap: 8px; min-width: 190px; padding: 0 0 0 12px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.bg-bezeichnung .feld-kopf { flex: none; display: flex; align-items: center; gap: 6px; }
.bg-bezeichnung .feld-titel { margin: 0; font-weight: 700; font-size: 0.9rem; }
.bg-bezeichnung input { flex: 1 1 auto; min-width: 0; height: 38px; border: 0; background: transparent; box-shadow: none; }
.bg-bezeichnung input:focus { outline: none; box-shadow: none; }
.bg-bezeichnung:focus-within { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-primaer) 22%, transparent); }
.bg-bezeichnung.feld-fehler { border-color: var(--farbe-gefahr); }
.bg-leiste-knoepfe { display: flex; flex: none; gap: 8px; }
.bg-leiste-knoepfe[hidden] { display: none; }
.bg-name-fehler { margin: -8px 0 12px; }
.bg-kat-neu { padding: 8px 4px 0; }
.bg-kat-neu .knopf { width: 100%; justify-content: flex-start; }
@media (max-width: 900px) {
    .bg-leiste-zusatz { flex-wrap: wrap; }
    .bg-bezeichnung { flex: 1 1 100%; }
}

/* ---------- Download-Manager (PLAN.md E62 / 3.46): Kategorien und Dateien, Darstellung, Schutz, Statistik ---------- */
.dl { display: grid; gap: 4px; min-width: 0; }
.dl-bereich[hidden], .dl-reiter[hidden] { display: none; }
.dl-bereich { display: grid; gap: 16px; align-content: start; }

.dl-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.dl-summe-text { margin: 0; }
.dl-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .dl-leiste-aktionen { flex-wrap: nowrap; } .dl-leiste-aktionen .suchfeld { flex: 0 1 300px; } }
.dl-vorschau { display: block; width: 40px; height: 44px; object-fit: cover; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.dl-dateiname { min-width: 0; font-size: 0.85rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }

.dl-felder { display: grid; gap: 16px; }
.dl-felder-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dl-notiz { margin: 12px 0 0; font-size: 0.9rem; }
.dl-summe { margin: 0 0 12px; }
.dl-verlauf { display: block; width: 100%; height: 72px; }
.dl-balken { fill: var(--farbe-primaer); }
.dl-balken-leer { fill: var(--farbe-rand-stark); }
/* ---------- Foto-Diashow (PLAN.md E63 / 3.47): Bilderliste wie der Seitenbaum, Darstellung, Vorschau ---------- */
.ds { display: grid; gap: 4px; min-width: 0; }
.ds-bereich[hidden], .ds-reiter[hidden] { display: none; }
.ds-bereich { display: grid; gap: 16px; align-content: start; }
.ds-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.ds-summe-text { margin: 0; }
.ds-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-thumb { display: block; flex: none; width: 64px; height: 48px; object-fit: cover; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }

.ds-darstellung { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .ds-darstellung { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.ds-spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ds-felder { display: grid; gap: 16px; }
.ds-notiz { margin: 12px 0 0; font-size: 0.9rem; }
.ds-modus-hinweis { margin: -8px 0 0; }
.ds-vorschau-karte { min-width: 0; }
.ds-vorschau, .ds-v { display: grid; gap: 10px; min-width: 0; }

/* Vorschau: Bühne mit festem Seitenverhältnis (--ds-hoehe = Höhe in Prozent der Breite) */
.ds-buehne { position: relative; overflow: hidden; width: 100%; aspect-ratio: 100 / var(--ds-hoehe, 56); background: var(--farbe-kopfleiste); border-radius: var(--radius); }
.ds-folie { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.ds-folie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-fit-contain .ds-folie img, .ds-fit-contain .ds-streifen-bild img, .ds-fit-contain .ds-vergleich img { object-fit: contain; }
.ds-uebergang-1 .ds-folie, .ds-uebergang-2 .ds-folie { opacity: 1; transform: translateX(100%); }
.ds-uebergang-2 .ds-folie { transform: translateX(-100%); }
.ds-uebergang-1 .ds-folie.ist-vorher { transform: translateX(-100%); }
.ds-uebergang-2 .ds-folie.ist-vorher { transform: translateX(100%); }
.ds-uebergang-1 .ds-folie.ist-aktiv, .ds-uebergang-2 .ds-folie.ist-aktiv { transform: none; }
.ds-uebergang-3 .ds-folie.ist-aktiv, .ds-uebergang-4 .ds-folie.ist-aktiv { opacity: 1; }
.ds-uebergang-4 .ds-folie.ist-aktiv img { animation: ds-zoom 7s ease-out forwards; }
@keyframes ds-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .ds-uebergang-4 .ds-folie.ist-aktiv img { animation: none; } .ds-folie, .ds-streifen { transition: none; } }
.ds-unterschrift { min-height: 1.4em; font-size: 0.95rem; color: var(--farbe-text-leise); }
.ds-punkte { display: flex; justify-content: center; gap: 8px; }
.ds-punkt { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--farbe-rand-stark); cursor: pointer; }
.ds-punkt:hover { background: var(--farbe-primaer); }
.ds-pfeil { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 39, 64, 0.55); color: #fff; cursor: pointer; }
.ds-pfeil:hover { background: rgba(15, 39, 64, 0.8); }
.ds-pfeil-links { left: 10px; }
.ds-pfeil-rechts { right: 10px; }
.ds-thumbs { display: flex; gap: 6px; overflow-x: auto; }
.ds-thumbs-bild { flex: 0 0 72px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-klein); overflow: hidden; background: none; opacity: 0.7; cursor: pointer; }
.ds-thumbs-bild.ist-aktiv { border-color: var(--farbe-primaer); opacity: 1; }
.ds-thumbs-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-seitenreihe { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 8px; align-items: start; }
.ds-seitenreihe .ds-thumbs { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
.ds-seitenreihe .ds-thumbs-bild { flex: none; width: 100%; }
.ds-text-ueber { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 20px 18px; font-size: clamp(1.05rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.25; color: #fff; background: linear-gradient(to top, rgba(8, 20, 36, 0.78), transparent); transition: padding-left 0.3s ease; }

/* „Bei Berührung anhalten“: Pause-Symbol fährt bei Maus darüber unten links in die Bühne, bei Mouse-out wieder hinaus */
.ds-rahmen { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius); }
.ds-pause { position: absolute; left: 10px; bottom: 10px; z-index: 4; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(15, 39, 64, 0.65); color: #fff; opacity: 0; transform: translateY(calc(100% + 16px)); transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; }
.ds-pause .icon { width: 16px; height: 16px; }
.ds-v.ist-pause .ds-pause { opacity: 1; transform: none; }
.ds-modus-8.ist-pause .ds-text-ueber { padding-left: 58px; }
@media (prefers-reduced-motion: reduce) { .ds-pause, .ds-text-ueber { transition: none; } }
.ds-streifen { display: flex; height: 100%; gap: 8px; transition: transform 0.6s ease; }
.ds-buehne-streifen { background: none; }
.ds-streifen-bild { margin: 0; }
.ds-modus-3 .ds-streifen-bild { flex: 0 0 calc((100% - 16px) / 3); }
.ds-modus-4 .ds-streifen-bild { flex: none; height: 100%; }
.ds-streifen-bild img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-klein); }
.ds-modus-4 .ds-streifen-bild img { width: auto; }
.ds-modus-4 .ds-buehne-streifen { overflow-x: auto; }

/* Vorher/Nachher-Vergleich */
.ds-vergleich { cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ds-vergleich-nachher, .ds-vergleich-vorher { position: absolute; inset: 0; }
.ds-vergleich-vorher { clip-path: inset(0 calc(100% - var(--ds-schnitt, 50%)) 0 0); }
.ds-vergleich img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ds-vergleich-griff { position: absolute; top: 0; bottom: 0; left: var(--ds-schnitt, 50%); z-index: 3; display: grid; place-items: center; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); }
.ds-vergleich-griff .icon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #fff; color: var(--farbe-kopfleiste); box-shadow: var(--schatten-karte); }
.ds-vergleich-marke { position: absolute; top: 10px; z-index: 3; padding: 3px 10px; border-radius: 999px; background: rgba(15, 39, 64, 0.6); color: #fff; font-size: 0.8rem; font-weight: 700; }
.ds-vergleich-marke-vorher { left: 10px; }
.ds-vergleich-marke-nachher { right: 10px; }

/* Fenster „Bild bearbeiten“: Fokuspunkt per Klick ins Bild */
.ds-fokus-box { position: relative; display: inline-block; max-width: 100%; line-height: 0; overflow: hidden; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.ds-fokus-box.ist-klickbar { cursor: crosshair; }
.ds-fokus-bild { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; }
.ds-fokus-punkt { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid #fff; border-radius: 50%; background: rgba(14, 90, 117, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.35); pointer-events: none; }
/* ---- Multi Inhalt (PLAN.md E66 / 3.48): Einträge, Darstellung, Vorschau ---- */
.mc-bereich[hidden], .mc-reiter[hidden] { display: none; }
.mc-bereich { display: grid; gap: 16px; align-content: start; }
.mc-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mc-summe-text { margin: 0; }
.mc-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-zeile, .mc-kopfzeile { display: grid; grid-template-columns: 28px 36px minmax(160px, 1fr) 150px 120px minmax(110px, 170px) auto; gap: 10px; align-items: center; padding: 8px 12px; }
.mc-kopfzeile { font-size: 0.8rem; font-weight: 700; color: var(--farbe-text-leise); border-bottom: 1px solid var(--farbe-rand); }
.mc-zeile { border-bottom: 1px solid var(--farbe-rand); background: var(--farbe-flaeche); }
.mc-zeile.ist-inaktiv .mc-name, .mc-zeile.ist-inaktiv .mc-nr { opacity: 0.55; }
.mc-nr { font-weight: 700; color: var(--farbe-text-leise); }
.mc-name-feld { display: grid; gap: 4px; min-width: 0; }
.mc-name, .mc-css, .mc-symbol, .mc-status { width: 100%; min-width: 0; }
.mc-original { font-size: 0.8rem; }
.mc-zeile .baum-aktionen { flex-wrap: wrap; }
.mc-neu-abzeichen { white-space: nowrap; }
.mc-inhalt-knopf { white-space: nowrap; }
.mc-darstellung { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .mc-darstellung { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.mc-spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.mc-felder { display: grid; gap: 16px; }
.mc-felder > [data-mc-fuer] { display: grid; gap: 16px; }
.mc-felder [hidden], .mc-spalte [data-mc-fuer][hidden] { display: none; }
.mc-notiz { margin: 0; font-size: 0.9rem; }
.mc-farben { display: grid; gap: 12px; }
.mc-farben[hidden] { display: none; }
.mc-farbe-reihe { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mc-vorschau-karte { min-width: 0; }
@media (max-width: 900px) {
    .mc-kopfzeile { display: none; }
    .mc-zeile { grid-template-columns: 28px 30px minmax(0, 1fr); }
    .mc-zeile > .mc-symbol, .mc-zeile > .mc-status, .mc-zeile > .mc-css, .mc-zeile > .baum-aktionen { grid-column: 3; }
}

/* Vorschau: eine Skizze der gewählten Darstellung (--mcv-* = Farben der Reiter, ohne Angabe die Farbe des Admins) */
.mc-v { --mcv-bg: var(--farbe-flaeche-leise); --mcv-bg-hover: var(--farbe-rand); --mcv-text: var(--farbe-text); --mcv-bg-aktiv: var(--farbe-primaer); --mcv-text-aktiv: #fff; display: grid; gap: 10px; font-size: 0.9rem; }
.mc-v[data-farbmodus="heller"] { --mcv-bg-aktiv: color-mix(in srgb, var(--farbe-primaer) 80%, #fff); }
.mc-v[data-farbmodus="dunkler"] { --mcv-bg-aktiv: color-mix(in srgb, var(--farbe-primaer) 80%, #000); }
.mc-v-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--farbe-rand); }
.mc-v-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--mcv-bg); color: var(--mcv-text); border-radius: 8px 8px 0 0; }
.mc-v-tab.ist-aktiv { background: var(--mcv-bg-aktiv); color: var(--mcv-text-aktiv); }
.mc-v-stil-unterstrich .mc-v-tab { background: none; border-radius: 0; border-bottom: 3px solid transparent; }
.mc-v-stil-unterstrich .mc-v-tab.ist-aktiv { background: none; color: inherit; border-bottom-color: var(--mcv-bg-aktiv); }
.mc-v-stil-pille .mc-v-tabs { border-bottom: 0; }
.mc-v-stil-pille .mc-v-tab { border-radius: 999px; }
.mc-v-ausr-mitte .mc-v-tabs { justify-content: center; }
.mc-v-ausr-breit .mc-v-tab { flex: 1 1 0; justify-content: center; }
.mc-v-art-5 { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
.mc-v-art-5 .mc-v-tabs { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--farbe-rand); padding-right: 6px; }
.mc-v-art-5 .mc-v-tab { border-radius: 8px; }
.mc-v-inhalt { display: grid; gap: 6px; padding: 10px 2px; }
.mc-v-inhalt span { display: block; height: 8px; border-radius: 4px; background: var(--farbe-rand); }
.mc-v-inhalt span.kurz { width: 55%; }
.mc-v-box { border-bottom: 1px solid var(--farbe-rand); }
.mc-v-kopf { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--mcv-bg); color: var(--mcv-text); }
.mc-v-box.ist-offen .mc-v-kopf { background: var(--mcv-bg-aktiv); color: var(--mcv-text-aktiv); }
.mc-v-box .mc-v-inhalt { padding: 10px; }
.mc-v-spalten { display: grid; gap: 14px; grid-template-columns: repeat(var(--mcv-spalten, 3), minmax(0, 1fr)); }
.mc-v-spalte, .mc-v-stapel { display: grid; gap: 6px; align-content: start; padding: 10px; border: 1px dashed var(--farbe-rand-stark); border-radius: 6px; }
.mc-v-name { display: inline-flex; align-items: center; gap: 6px; }
.mc-v-blatt { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 8px; align-items: center; }
.mc-v-pfeil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mcv-bg-aktiv); color: var(--mcv-text-aktiv); font-size: 1.1rem; line-height: 1; }
.mc-v-punkte { display: flex; justify-content: center; gap: 8px; }
.mc-v-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--farbe-rand-stark); }
.mc-v-punkt.ist-aktiv { background: var(--mcv-bg-aktiv); }

/* ---------- Referenzen (PLAN.md E68 / 3.49): Kategorien und Kacheln wie der Seitenbaum, Darstellung ---------- */
.rf { display: grid; gap: 4px; min-width: 0; }
.rf-bereich[hidden], .rf-reiter[hidden] { display: none; }
.rf-bereich { display: grid; gap: 16px; align-content: start; }
.rf-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.rf-summe-text { margin: 0; }
.rf-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .rf-leiste-aktionen { flex-wrap: nowrap; } .rf-leiste-aktionen .suchfeld { flex: 0 1 300px; } }
.rf-vorschau { display: inline-block; width: 52px; height: 40px; margin-right: 6px; object-fit: cover; vertical-align: middle; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.rf-vorschau-logo { object-fit: contain; padding: 2px; }
.rf-dateiname { min-width: 0; font-size: 0.85rem; color: var(--farbe-text-leise); overflow-wrap: anywhere; }
.rf-bildwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rf-bildwahl .rf-vorschau { width: 72px; height: 54px; margin-right: 0; }
.rf-felder { display: grid; gap: 16px; }
.rf-felder-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rf-farben[hidden] { display: none; }
.rf-hinzu .baum-name { gap: 8px; }
@media (min-width: 900px) {
    /* fünf Symbole bei Kategorien (Pfeile, Unterkategorie, Bearbeiten, Löschen) in einer Reihe */
    .rf .baum-kopf, .rf .baum-zeile { grid-template-columns: 44px 150px minmax(0, 2fr) minmax(0, 1.4fr) 120px 214px; }
}

/* ---------- Historie (PLAN.md E69): Einträge als Karten, Darstellung mit Vorschau ---------- */
.hi-admin { display: grid; gap: 4px; min-width: 0; }
.hi-bereich[hidden], .hi-reiter[hidden] { display: none; }
.hi-bereich { display: grid; gap: 16px; align-content: start; }
.hi-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.hi-summe { margin: 0; }
.hi-liste-admin { display: grid; gap: 12px; }
.hi-leer { padding: 24px; text-align: center; background: var(--farbe-flaeche); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-gross); }
.hi-karte {
    display: grid; gap: 12px; padding: 14px 16px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-gross); box-shadow: var(--schatten-karte);
}
.hi-karte.ist-aus { background: var(--farbe-flaeche-leise); }
.hi-karte.ist-aus .hi-karte-felder, .hi-karte.ist-aus .hi-karte-unten { opacity: 0.65; }
.hi-karte.ist-gezogen { opacity: 0.45; }
.hi-karte.ziel-davor { box-shadow: inset 0 3px 0 var(--farbe-akzent); }
.hi-karte.ziel-danach { box-shadow: inset 0 -3px 0 var(--farbe-akzent); }
.hi-karte-kopf { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.hi-griff { flex: none; width: 24px; display: grid; place-items: center; cursor: grab; color: var(--farbe-text-hell); touch-action: none; }
.hi-aktionen { margin-left: auto; display: flex; gap: 4px; }
.hi-karte-felder { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .hi-karte-felder { grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); } }
.hi-karte-unten { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .hi-karte-unten { grid-template-columns: minmax(0, 1fr) 220px; } }
.hi-bild-inhalt { display: grid; gap: 8px; justify-items: start; }
.hi-bild-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.hi-vorschau { display: block; width: 100%; max-width: 220px; aspect-ratio: 3 / 2; object-fit: cover; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.hi-bild-leer { display: grid; place-items: center; width: 100%; max-width: 220px; aspect-ratio: 3 / 2; border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-klein); }
.hi-felder { display: grid; gap: 16px; }
.hi-felder-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hi-farben[hidden] { display: none; }
.hi-darstellung { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .hi-darstellung { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.5fr); } }
.hi-einstellungen { display: grid; gap: 16px; }
.hi-vorschau-karte { position: sticky; top: 100px; }
.hi-vorschau-rahmen { display: block; width: 100%; height: 560px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: #fff; }

/* ---------- Eigene Karte (Editor, modules/map, public/assets/js/map-admin.js) ---------- */
/* Die Mitte füllt die Höhe des Arbeitsbereichs: die Karte nimmt den Rest unter der Werkzeugzeile, die Seite scrollt nicht.
   Nur die Einstellungen scrollen (eigener Bereich). Links und rechts scrollen die Spalten selbst. */
.mp-mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 0 var(--seitenrand) var(--seitenrand); overflow: hidden; }
.mp-ansicht-karte { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.mp-ansicht-karte[hidden], .mp-ansicht-einstellungen[hidden] { display: none; }
.mp-ansicht-einstellungen { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.mp-werkzeuge { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; margin-bottom: 8px; }
.mp-tipp, .mp-meldung { font-size: 0.88rem; }
.mp-tipp-setzen { font-weight: 600; color: var(--farbe-primaer-dunkel); }

.mp-viewport {
    position: relative; overflow: hidden; width: 100%; flex: 1 1 auto; min-height: 220px; background: #dff1f6; border-radius: var(--radius); border: 1px solid var(--farbe-rand);
    cursor: grab; touch-action: none; user-select: none;
}
.mp-viewport:active { cursor: grabbing; }
.mp-viewport.ist-setzen { cursor: crosshair; }
.mp-viewport:focus-visible { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }
/* kein will-change: transform – sonst rastert der Browser die Karte einmal und skaliert nur das Bitmap (matschig beim Zoomen) */
.mp-buehne { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.mp-bild, .mp-punkte { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mp-bild svg, .mp-bild .mp-eigenes-bild { display: block; width: 100%; height: 100%; }
.mp-bild .mp-eigenes-bild { object-fit: contain; pointer-events: none; }
/* Linienstärke gleichbleibend 1 px auch beim Zoomen: die CSS-Skalierung der Bühne würde sie sonst mitnehmen */
.mp-bild .gebiet { fill: var(--map-flaeche, #ffffff); stroke: var(--map-grenze, #c9d1d5); stroke-width: calc(1px / var(--mp-z, 1)); vector-effect: non-scaling-stroke; }
.mp-mit-schatten .mp-bild .gebiete { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25)); }
.mp-leer { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; text-align: center; padding: 20px; }

.mp-punkt {
    position: absolute; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; overflow: visible;
    transform: scale(calc(1 / var(--mp-z, 1)));
}
/* Unsichtbare, größere Trefferfläche: mindestens 44 px (bzw. Punktgröße + 20 px), mit der Gegenskalierung des Punktes also auch beim Zoomen gleich groß */
.mp-punkt::before {
    content: ""; position: absolute; border-radius: 50%;
    width: max(44px, calc(var(--map-punkt, 16px) + 20px)); height: max(44px, calc(var(--map-punkt, 16px) + 20px));
    left: calc(max(44px, calc(var(--map-punkt, 16px) + 20px)) / -2); top: calc(max(44px, calc(var(--map-punkt, 16px) + 20px)) / -2);
}
.mp-punkt-flaeche {
    position: absolute; left: calc(var(--map-punkt, 16px) / -2); top: calc(var(--map-punkt, 16px) / -2);
    width: var(--map-punkt, 16px); height: var(--map-punkt, 16px); box-sizing: border-box; background-size: contain; background-repeat: no-repeat; background-position: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.mp-punkt.mp-kreis .mp-punkt-flaeche { border-radius: 50%; }
.mp-punkt.mp-quadrat .mp-punkt-flaeche { border-radius: 3px; }
.mp-punkt.mp-bild .mp-punkt-flaeche { box-shadow: none; }
.mp-punkt.ist-gewaehlt .mp-punkt-flaeche { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }
.mp-punkt.ist-inaktiv { opacity: 0.45; }
.mp-label {
    position: absolute; white-space: nowrap; pointer-events: none; font-size: var(--map-label-groesse, 13px); color: var(--map-label-farbe, #333);
    text-shadow: 0 0 3px #fff, 0 0 3px #fff; line-height: 1.2;
}
.mp-lage-1 { bottom: calc(var(--map-punkt, 16px) / 2 + 2px); left: 0; transform: translateX(-50%); }
.mp-lage-2 { bottom: calc(var(--map-punkt, 16px) / 2 + 2px); left: calc(var(--map-punkt, 16px) / 2); }
.mp-lage-3 { left: calc(var(--map-punkt, 16px) / 2 + 4px); top: 0; transform: translateY(-50%); }
.mp-lage-4 { top: calc(var(--map-punkt, 16px) / 2 + 2px); left: calc(var(--map-punkt, 16px) / 2); }
.mp-lage-5 { top: calc(var(--map-punkt, 16px) / 2 + 2px); left: 0; transform: translateX(-50%); }
.mp-lage-6 { top: calc(var(--map-punkt, 16px) / 2 + 2px); right: calc(var(--map-punkt, 16px) / 2); }
.mp-lage-7 { right: calc(var(--map-punkt, 16px) / 2 + 4px); top: 0; transform: translateY(-50%); }
.mp-lage-8 { bottom: calc(var(--map-punkt, 16px) / 2 + 2px); right: calc(var(--map-punkt, 16px) / 2); }

.mp-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; z-index: 3; }
.mp-zoom-knopf {
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein);
    background: var(--farbe-flaeche); color: var(--farbe-text); cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.mp-zoom-knopf:hover, .mp-zoom-knopf:focus-visible { background: var(--farbe-primaer-hell); color: var(--farbe-primaer); }
.mp-zoom-anzeige { text-align: center; font-size: 0.75rem; color: var(--farbe-text-leise); background: var(--farbe-flaeche); border-radius: var(--radius-klein); padding: 2px 0; }

/* Links: Punkteliste */
.mp-koerper { --spalte-links: clamp(250px, 16vw, 320px); }
.mp-reiter { flex: none; width: auto; margin: 12px 12px 0 12px; gap: 0; }
.mp-reiter .unterreiter-punkt { flex: 1 1 0; text-align: center; padding-left: 8px; padding-right: 8px; }
.mp-bezeichnung { flex: none; margin: 12px 12px 0 12px; }
.mp-palette-kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 16px 14px 6px 14px; }
.mp-palette-titel { margin: 0; font-size: 1rem; }
.mp-liste-platz { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 14px 10px; }
.mp-liste-kopf { display: grid; gap: 8px; margin-bottom: 8px; }
.mp-suche { width: 100%; }
.mp-anzahl { margin: 0 0 6px 0; font-size: 0.82rem; }
.mp-eintraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mp-eintrag {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; text-align: left; border: 0; background: transparent;
    border-radius: var(--radius-klein); color: var(--farbe-text); cursor: pointer; font: inherit;
}
.mp-eintrag:hover { background: var(--farbe-primaer-hell); }
.mp-eintrag.ist-gewaehlt { background: var(--farbe-primaer-hell); font-weight: 600; box-shadow: inset 3px 0 0 var(--farbe-primaer); }
.mp-eintrag.ist-inaktiv .mp-eintrag-name { opacity: 0.55; }
.mp-liste-farbe { flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }
.mp-eintrag-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rechts: Eigenschaften */
.mp-rechts { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.mp-rechts-leer { padding: 20px 20px; text-align: center; }
.mp-rechts-kopf { flex: none; display: grid; gap: 8px; padding: 14px; border-bottom: 1px solid var(--farbe-rand); }
.mp-rechts-titel { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.mp-rechts-karte { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; padding: 14px; }
.mp-gruppe { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.mp-gruppe-titel { margin: 0; font-size: 0.9rem; color: var(--farbe-text-leise); text-transform: none; }
.mp-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mp-positionszeile, .mp-hinweis-klein { margin: 0; font-size: 0.85rem; }
.mp-farbe { width: 56px; height: 36px; padding: 2px; }
.mp-zahl { width: 80px; }
.mp-zahl-zeile { display: flex; align-items: center; gap: 8px; }
.mp-lagen { display: inline-grid; grid-template-columns: repeat(3, 32px); gap: 4px; margin: 4px 0; }
.mp-lage { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: var(--farbe-flaeche); cursor: pointer; }
.mp-lage.ist-aktiv { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.mp-lage-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-text-leise); }
.mp-lage.ist-aktiv .mp-lage-punkt { background: var(--farbe-primaer); }
.mp-lage-mitte { display: grid; place-items: center; }
.mp-lage-mitte::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--farbe-text); opacity: 0.5; }
.mp-ohne-label { display: block; margin-top: 4px; font-size: 0.88rem; }

/* Einstellungen */
.mp-ansicht { min-width: 0; }
.mp-karte-einstellung { margin-bottom: 14px; }
/* Knopf in derselben Zeile wie das letzte Feld, rechtsbündig (auf schmalen Flächen darunter) */
.mp-feld-aktion { grid-column: 2 / -1; justify-self: end; align-self: end; }
@media (max-width: 700px) { .mp-feld-aktion { grid-column: 1 / -1; justify-self: start; } }
.mp-felder { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin-top: 8px; }
.mp-vorlagen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 10px; }
.mp-vorlage {
    display: grid; gap: 6px; padding: 8px; border: 2px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche);
    cursor: pointer; text-align: center; font: inherit; color: var(--farbe-text);
}
.mp-vorlage:hover { border-color: var(--farbe-primaer); }
.mp-vorlage.ist-gewaehlt { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.mp-vorlage-bild { display: grid; place-items: center; height: 110px; background: #dff1f6; border-radius: var(--radius-klein); overflow: hidden; }
.mp-vorlage-bild svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.mp-vorlage-bild .gebiet { fill: #ffffff; stroke: #b7c0c4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-vorlage-eigen { color: var(--farbe-text-leise); }
.mp-vorlage-eigen .icon { width: 36px; height: 36px; }
.mp-vorlage-name { font-size: 0.9rem; font-weight: 600; }
.mp-eigenes { display: grid; gap: 10px; margin-top: 14px; }
.mp-eigenes-vorschau { height: 160px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: #f1f4f5 center / contain no-repeat; }
.mp-verwendung { margin-top: 8px; }

/* ---------- Medienauswahl im Ordner-Modus (cumodisMedien.waehlen({ordner: true})) ---------- */
.dialog-medien.ist-ordnermodus [data-medien-hochladen], .dialog-medien.ist-ordnermodus .medien-tipp { display: none; }

/* ---------- Collage (Editor, modules/collage, public/assets/js/collage-admin.js) ---------- */
/* Die Fläche nutzt die Klassen der Website (clg-…, mod_collage.css); hier nur der Rahmen des Editors */
.cl-koerper { --spalte-links: clamp(250px, 16vw, 320px); }
.cl-bezeichnung { flex: none; margin: 12px 12px 0 12px; }
.cl-palette-kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 16px 14px 6px 14px; }
.cl-palette-titel { margin: 0; font-size: 1rem; }
.cl-liste-platz { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 10px 14px 10px; }
.cl-verwendung { flex: none; max-height: 30%; overflow: auto; padding: 8px 12px 12px 12px; border-top: 1px solid var(--farbe-rand); }
.cl-anzahl { margin: 0 0 6px 0; font-size: 0.82rem; }
.cl-ebenen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.cl-ebenen > li { min-width: 0; }
.cl-ebene {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; text-align: left; border: 0;
    border-radius: var(--radius-klein); background: transparent; color: var(--farbe-text); cursor: pointer; font: inherit;
}
.cl-ebene:hover { background: var(--farbe-primaer-hell); }
.cl-ebene.ist-gewaehlt { background: var(--farbe-primaer-hell); font-weight: 600; box-shadow: inset 3px 0 0 var(--farbe-primaer); }
.cl-ebene.ist-ziel { box-shadow: inset 0 3px 0 var(--farbe-primaer); }
.cl-griff-liste { display: inline-flex; flex: none; color: var(--farbe-text-leise); cursor: grab; }
.cl-thumb { flex: none; display: block; width: 44px; height: 34px; border-radius: 3px; overflow: hidden; background: #e8ecee; }
.cl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cl-ebene { min-width: 0; }
.cl-ebene-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ebene-text { position: relative; left: 0; }
.cl-ebene.laeuft .cl-ebene-name { text-overflow: clip; }
.cl-ebene.laeuft .cl-ebene-text { animation: cl-lauf var(--cl-dauer, 2s) ease-in-out infinite alternate; }
/* Zügig hinüber (30 % der Zeit), an beiden Enden eine längere Pause (je 35 %, am Wendepunkt zusammen 70 %) */
@keyframes cl-lauf { 0%, 35% { left: 0; } 65%, 100% { left: var(--cl-schieben, 0px); } }
@media (prefers-reduced-motion: reduce) { .cl-ebene.laeuft .cl-ebene-text { animation: none; } .cl-ebene.laeuft .cl-ebene-name { text-overflow: ellipsis; } }

/* Mitte: die Fläche füllt die Höhe, nichts scrollt */
.cl-mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 0 var(--seitenrand) var(--seitenrand); overflow: hidden; }
.cl-ansicht { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cl-werkzeuge { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; margin-bottom: 8px; }
.cl-meldung { font-size: 0.88rem; }
.cl-buehne {
    position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: #e9edef; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
}
.cl-flaeche { background: #ffffff; box-shadow: 0 0 0 1px var(--farbe-rand), 0 4px 18px rgba(0, 0, 0, 0.08); outline: none; flex: none; }
.cl-flaeche:focus, .cl-flaeche:focus-visible { outline: none; }
/* Im Editor ohne Übergänge: Foto und Griffe müssen beim Drehen/Skalieren gleichzeitig folgen */
.cl-flaeche .clg-item, .cl-flaeche .clg-rahmen { transition: none; }
.cl-flaeche .clg-item { cursor: grab; touch-action: none; user-select: none; }
.cl-flaeche .clg-item:active { cursor: grabbing; }
.cl-flaeche .clg-item img { pointer-events: none; }
.cl-flaeche .clg-item.ist-gewaehlt .clg-rahmen { outline: 2px solid var(--farbe-primaer); outline-offset: 3px; }
.cl-griffe { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); pointer-events: none; }
.cl-griff {
    position: absolute; width: 13px; height: 13px; box-sizing: border-box; transform: translate(-50%, -50%);
    background: #ffffff; border: 2px solid var(--farbe-primaer); border-radius: 3px; pointer-events: auto; touch-action: none;
}
.cl-griff-nw { left: 0; top: 0; cursor: nwse-resize; }
.cl-griff-ne { left: 100%; top: 0; cursor: nesw-resize; }
.cl-griff-sw { left: 0; top: 100%; cursor: nesw-resize; }
.cl-griff-se { left: 100%; top: 100%; cursor: nwse-resize; }
.cl-griff-drehen { left: 50%; top: -28px; width: 15px; height: 15px; border-radius: 50%; cursor: grab; }
.cl-griff-stiel { position: absolute; left: 50%; top: -28px; width: 2px; height: 28px; transform: translateX(-50%); background: var(--farbe-primaer); pointer-events: none; }
.cl-leer { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px; text-align: center; pointer-events: none; }
.cl-leer .icon { width: 40px; height: 40px; }
.cl-leer p { margin: 0; }
.cl-abwurf {
    position: absolute; inset: 8px; z-index: 5; display: grid; place-items: center; pointer-events: none;
    border: 3px dashed var(--farbe-primaer); border-radius: var(--radius); background: color-mix(in srgb, var(--farbe-primaer-hell) 80%, transparent);
    font-weight: 700; color: var(--farbe-primaer-dunkel);
}
.cl-abwurf[hidden] { display: none; }

/* Rechts: Eigenschaften (Kopf mit Aktionen fest, Felder scrollen) */
.cl-rechts { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.cl-rechts-kopf { flex: none; display: grid; gap: 8px; padding: 14px; border-bottom: 1px solid var(--farbe-rand); }
.cl-rechts-titel { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.cl-rechts-karte { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; padding: 14px; }
.cl-gruppe { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.cl-gruppe-titel { margin: 0; font-size: 0.9rem; color: var(--farbe-text-leise); text-transform: none; }
.cl-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip {
    padding: 6px 11px; border: 1px solid var(--farbe-rand); border-radius: 999px; background: var(--farbe-flaeche);
    color: var(--farbe-text); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.cl-chip:hover { border-color: var(--farbe-primaer); }
.cl-chip.ist-aktiv { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); font-weight: 700; }
/* Die allgemeine Feldregel (.feld input) gäbe dem Regler Innenabstand und dem Zahlenfeld die volle Breite: gezielt überschreiben */
.cl-regler-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 84px 1.5rem; align-items: center; gap: 10px; }
.cl-regler-zeile .cl-regler { width: 100%; min-width: 0; height: 32px; min-height: 32px; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; accent-color: var(--farbe-primaer); }
.cl-regler-zeile .cl-zahl { width: 84px; min-width: 0; }
.cl-regler-zeile .text-leise { white-space: nowrap; font-size: 0.85rem; }
.cl-farbe { width: 56px; height: 36px; padding: 2px; }
.cl-ordner-pfad { display: flex; align-items: center; gap: 6px; margin: 0 0 8px 0; font-size: 0.9rem; overflow-wrap: anywhere; }

/* ---------- Termine / Kalender (Editor, modules/events, public/assets/js/events-admin.js) ---------- */
.ev-koerper { --spalte-links: clamp(230px, 15vw, 300px); --spalte-rechts: clamp(400px, 27vw, 580px); }
.ev-bezeichnung { flex: none; margin: 12px 12px 0 12px; }
.ev-links { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 14px 10px; }
.ev-verwendung { flex: none; max-height: 30%; overflow: auto; padding: 8px 12px 12px 12px; border-top: 1px solid var(--farbe-rand); }
.ev-bereiche { display: grid; gap: 4px; margin: 14px 0 6px 0; }
.ev-bereich {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; text-align: left; border: 0; background: transparent;
    border-radius: var(--radius-klein); color: var(--farbe-text); cursor: pointer; font: inherit; font-weight: 600;
}
.ev-bereich:hover { background: var(--farbe-primaer-hell); }
.ev-bereich.ist-aktiv { background: var(--farbe-primaer-hell); box-shadow: inset 3px 0 0 var(--farbe-primaer); }
.ev-palette-kopf { display: flex; align-items: center; gap: 6px; padding: 14px 4px 6px 4px; }
.ev-palette-titel { margin: 0; font-size: 1rem; }
.ev-filter { display: grid; gap: 2px; }
.ev-filter-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 4px; cursor: pointer; border-radius: var(--radius-klein); }
.ev-filter-zeile:hover { background: var(--farbe-primaer-hell); }
.ev-filter-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-punkt { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.ev-anzahl { margin: 10px 4px 0 4px; font-size: 0.82rem; }

/* Mitte */
.ev-mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 0 var(--seitenrand) var(--seitenrand); overflow: hidden; }
.ev-ansicht { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ev-leiste { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.ev-nav { display: flex; align-items: center; gap: 6px; }
.ev-kalender-titel { margin: 0 0 0 8px; font-size: 1.15rem; min-width: 10ch; }
.ev-umschalter { display: inline-flex; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); overflow: hidden; }
.ev-umschalter-knopf { padding: 6px 12px; border: 0; background: var(--farbe-flaeche); color: var(--farbe-text); font: inherit; font-size: 0.9rem; cursor: pointer; }
.ev-umschalter-knopf + .ev-umschalter-knopf { border-left: 1px solid var(--farbe-rand); }
.ev-umschalter-knopf.ist-aktiv { background: var(--farbe-primaer); color: #ffffff; font-weight: 700; }
.ev-kalender { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
/* Raster: Kopfzeile mit den Wochentagen, darunter je Woche ein eigenes Raster (Zeile 1 = Tageskopf, danach je Spur eine Zeile für die Balken) */
.ev-raster { display: flex; flex-direction: column; min-height: 100%; }
.ev-wochentage { flex: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--farbe-rand); background: #f6f8f9; }
.ev-wochentag { padding: 6px 8px; font-size: 0.8rem; font-weight: 700; color: var(--farbe-text-leise); }
.ev-woche { flex: 1 0 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 152px; position: relative; }
.ev-woche.ist-hoch { min-height: 220px; }
.ev-tag { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px; border-right: 1px solid var(--farbe-rand); border-bottom: 1px solid var(--farbe-rand); cursor: pointer; background: var(--farbe-flaeche); }
.ev-tag.ist-letzter { border-right: 0; }
.ev-tag:hover { background: #f3f8fb; }
.ev-kalender.ist-zieht { user-select: none; cursor: grabbing; }
.ev-kalender.ist-zieht .ev-tag { cursor: grabbing; }
.ev-tag.ist-auswahl, .ev-tag.ist-auswahl:hover { background: color-mix(in srgb, var(--farbe-primaer) 14%, #ffffff); box-shadow: inset 0 0 0 2px var(--farbe-primaer); }
.ev-tag.ist-anderer-monat { background: #fafbfb; color: var(--farbe-text-leise); }
.ev-tag.ist-ferien { background: #eaf4fb; }
.ev-tag.ist-ferien.ist-anderer-monat { background: #f2f7fa; }
.ev-tag.ist-heute .ev-tag-nr { background: var(--farbe-primaer); color: #ffffff; }
.ev-tag.ist-ziel { outline: 2px solid var(--farbe-primaer); outline-offset: -2px; }
.ev-tag-kopf { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.ev-tag-nr { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; font-size: 0.82rem; font-weight: 600; }
.ev-tag.ist-feiertag .ev-tag-nr { color: #c0392b; }
.ev-tag.ist-heute.ist-feiertag .ev-tag-nr { color: #ffffff; }
.ev-tag-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }
.ev-feiertag { color: #c0392b; }
.ev-ferienname { color: #2b6f94; }
.ev-chip-termin {
    display: flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 6px; border-left: 4px solid var(--c, #2f7fb0); border-radius: 3px;
    background: color-mix(in srgb, var(--c, #2f7fb0) 14%, #ffffff); font-size: 0.8rem; line-height: 1.35; cursor: pointer; user-select: none;
}
.ev-chip-termin:hover { background: color-mix(in srgb, var(--c, #2f7fb0) 26%, #ffffff); }
.ev-chip-termin.ist-gewaehlt { outline: 2px solid var(--farbe-primaer); outline-offset: 0; }
.ev-chip-termin.ist-abgesagt .ev-titel { text-decoration: line-through; opacity: 0.7; }
.ev-chip-termin.ist-fortsetzung { margin-left: 0; border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 8px; }
.ev-chip-termin.geht-weiter { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ev-balken { position: relative; z-index: 1; margin: 0 4px 3px 4px; align-self: start; height: 21px; box-sizing: border-box; overflow: hidden; }
.ev-griff { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; opacity: 0; }
.ev-griff-beginn { left: 0; }
.ev-griff-ende { right: 0; }
.ev-balken:hover .ev-griff, .ev-balken.ist-gewaehlt .ev-griff { opacity: 1; background: color-mix(in srgb, var(--c, #2f7fb0) 45%, transparent); }
.ev-woche > .ev-mehr { z-index: 1; margin: 0 4px; align-self: start; line-height: 18px; }
.ev-zeit { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; }
.ev-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-serie-symbol { flex: none; width: 12px; height: 12px; opacity: 0.7; }
.ev-mehr { align-self: flex-start; padding: 0 4px; border: 0; background: transparent; color: var(--farbe-primaer); font: inherit; font-size: 0.78rem; cursor: pointer; }
.ev-leer { margin: 0; padding: 30px 20px; text-align: center; }
.ev-listen-monat { margin: 0; padding: 12px 14px 6px 14px; font-size: 0.95rem; background: #f6f8f9; border-bottom: 1px solid var(--farbe-rand); position: sticky; top: 0; }
.ev-listen-zeile {
    display: grid; grid-template-columns: 11rem 6.5rem minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 14px 8px 12px;
    text-align: left; border: 0; border-left: 4px solid var(--c, #2f7fb0); border-bottom: 1px solid var(--farbe-rand); background: var(--farbe-flaeche);
    color: var(--farbe-text); font: inherit; cursor: pointer;
}
.ev-listen-zeile:hover, .ev-listen-zeile.ist-gewaehlt { background: var(--farbe-primaer-hell); }
.ev-listen-zeile.ist-abgesagt .ev-listen-titel { text-decoration: line-through; opacity: 0.7; }
.ev-listen-datum { font-weight: 600; font-size: 0.9rem; }
.ev-listen-zeit { color: var(--farbe-text-leise); font-size: 0.9rem; }
.ev-listen-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rechts */
.ev-rechts { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.ev-rechts-kopf { flex: none; display: grid; gap: 8px; padding: 14px; border-bottom: 1px solid var(--farbe-rand); }
.ev-rechts-titel { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.ev-rechts-karte { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; padding: 14px; }
.ev-gruppe { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.ev-gruppe-titel { margin: 0; font-size: 0.9rem; color: var(--farbe-text-leise); text-transform: none; }
.ev-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ev-datum { width: 100%; }
.ev-zahl { width: 84px; flex: none; }
.ev-farbe { width: 56px; height: 36px; padding: 2px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--farbe-rand); border-radius: 999px;
    background: var(--farbe-flaeche); color: var(--farbe-text); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.ev-chip:hover { border-color: var(--farbe-primaer); }
.ev-chip.ist-aktiv { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); font-weight: 700; }
.ev-chip[disabled] { opacity: 0.6; cursor: default; }
.ev-serie-text { margin: 0; padding: 8px 10px; border-radius: var(--radius-klein); background: var(--farbe-primaer-hell); font-size: 0.9rem; }
.ev-ausnahmen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ev-ausnahmen li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.ev-banner { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius); background: #fff8e1; border: 1px solid #f0d98a; }
.ev-banner-text { margin: 0; font-size: 0.9rem; }
.ev-bild-name { overflow-wrap: anywhere; font-size: 0.9rem; }
.ev-kategorien { display: grid; gap: 8px; }
.ev-kat-zeile { display: flex; align-items: center; gap: 8px; }
.ev-kat-name { flex: 1 1 auto; min-width: 0; }
.ev-hinweise { margin: 8px 0 0 0; padding-left: 18px; font-size: 0.88rem; color: var(--farbe-text-leise); }
.ev-import-liste { margin: 8px 0; padding-left: 18px; font-size: 0.9rem; }
.hi-hinzufuegen-unten { display: flex; justify-content: flex-start; padding: 6px 0 4px; }

/* ---------- Willkommen: Einführung „Willkommen in Ihrer Zentrale“ (willkommen.js, layouts/_willkommen.twig) ---------- */
.willkommen {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--farbe-flaeche); color: var(--farbe-text); overflow: hidden;
}
.willkommen[open] { display: block; animation: willkommen-ein 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.willkommen.schliesst { animation: willkommen-aus 0.3s ease forwards; }
.willkommen::backdrop { background: transparent; }
@keyframes willkommen-ein { from { opacity: 0; transform: scale(1.025); } to { opacity: 1; transform: none; } }
@keyframes willkommen-aus { to { opacity: 0; transform: scale(0.99); } }
.willkommen-rahmen {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%;
    max-width: 1280px; margin: 0 auto; padding: 0 var(--seitenrand);
}
.willkommen-kopf { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 12px; }
.willkommen-logo { display: block; height: 40px; width: auto; }
.willkommen-ueberspringen {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: var(--radius-klein);
    background: none; color: var(--farbe-text-leise); font: inherit; cursor: pointer;
    transition: color var(--uebergang), background var(--uebergang);
}
.willkommen-ueberspringen:hover, .willkommen-ueberspringen:focus-visible { color: var(--farbe-primaer); background: var(--farbe-primaer-hell); outline: none; }
/* overflow-x: hidden, sonst zeigt die seitliche Einfahrt der Schritte kurz einen waagerechten Balken */
.willkommen-buehne { position: relative; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.willkommen-schritt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; min-height: 100%; padding: 8px 0 16px; }
.willkommen-schritt[hidden] { display: none; }
.willkommen-schritt.kommt-rechts { animation: willkommen-rechts 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.willkommen-schritt.kommt-links { animation: willkommen-links 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes willkommen-rechts { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes willkommen-links { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.willkommen-zaehler { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--farbe-primaer); }
.willkommen-titel { margin: 8px 0 14px; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--farbe-kopfleiste); }
.willkommen-absatz { max-width: 36em; font-size: 1.1rem; line-height: 1.55; color: var(--farbe-text-leise); }
.willkommen-punkte { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.willkommen-punkte li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.willkommen-punkte .icon {
    flex: none; box-sizing: border-box; width: 24px; height: 24px; padding: 4px; margin-top: -1px;
    border-radius: 50%; background: var(--farbe-erfolg-hell); color: var(--farbe-erfolg);
}
.willkommen-bild {
    order: -1; padding: clamp(12px, 3vw, 34px); border-radius: 22px;
    background: linear-gradient(145deg, var(--farbe-primaer-hell), var(--farbe-akzent-hell));
}
.willkommen-bild svg { display: block; width: 100%; height: auto; max-height: 30vh; margin: 0 auto; }
@media (min-width: 900px) {
    .willkommen-schritt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
    .willkommen-bild { order: 0; }
    .willkommen-bild svg { max-height: 54vh; }
}
.willkommen-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 max(24px, env(safe-area-inset-bottom)); }
.willkommen-punkte-nav { display: flex; align-items: center; gap: 8px; }
.willkommen-punkt {
    position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 5px;
    background: var(--farbe-rand-stark); cursor: pointer; transition: width 0.25s ease, background 0.25s ease;
}
.willkommen-punkt::after { content: ""; position: absolute; inset: -10px -4px; }
.willkommen-punkt.ist-aktiv { width: 30px; background: var(--farbe-primaer); }
.willkommen-punkt:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 3px; }
.willkommen-knoepfe { display: flex; gap: 10px; }
.willkommen-knoepfe .knopf { min-height: 46px; padding-inline: 20px; }
.willkommen-knoepfe .ist-versteckt { visibility: hidden; }

/* Illustrationen: Farben folgen den Designfarben */
.willkommen-bild svg .wk-karte { fill: var(--farbe-flaeche); stroke: var(--farbe-rand-stark); stroke-width: 1; }
.willkommen-bild svg .wk-kachel { fill: var(--farbe-flaeche); stroke: var(--farbe-rand-stark); stroke-width: 1.2; }
.willkommen-bild svg .wk-kopf { fill: var(--farbe-kopfleiste); }
.willkommen-bild svg .wk-primaer { fill: var(--farbe-primaer); }
.willkommen-bild svg .wk-akzent { fill: var(--farbe-akzent); }
.willkommen-bild svg .wk-hell { fill: var(--farbe-primaer-hell); }
.willkommen-bild svg .wk-flaeche { fill: var(--farbe-hintergrund); }
.willkommen-bild svg .wk-linie { fill: var(--farbe-rand-stark); }
.willkommen-bild svg .wk-balken { fill: var(--farbe-text-hell); }
.willkommen-bild svg .wk-weiss { fill: #fff; }
.willkommen-bild svg .wk-gruen { fill: var(--farbe-erfolg); }
.willkommen-bild svg .wk-warn { fill: var(--farbe-warnung); }
.willkommen-bild svg .wk-stern { fill: var(--farbe-warnung); }
.willkommen-bild svg .wk-hilfe { fill: var(--farbe-akzent); }
.willkommen-bild svg .wk-leise { opacity: 0.45; }
.willkommen-bild svg .wk-schatten { filter: drop-shadow(0 8px 14px rgba(15, 39, 64, 0.16)); }
.willkommen-bild svg .wk-aussen { fill: none; stroke: var(--farbe-primaer); stroke-width: 2; }
.willkommen-bild svg .wk-fokus { stroke: var(--farbe-primaer); stroke-width: 2; }
.willkommen-bild svg .wk-strich-primaer { fill: none; stroke: var(--farbe-primaer); stroke-width: 2; }
.willkommen-bild svg .wk-gestrichelt { stroke-dasharray: 6 6; }
.willkommen-bild svg .wk-knopf { fill: #fff; stroke: var(--farbe-primaer); stroke-width: 2.5; }
.willkommen-bild svg .wk-kreis-leer { fill: none; stroke: var(--farbe-rand-stark); stroke-width: 2; }
.willkommen-bild svg .wk-pfeil, .willkommen-bild svg .wk-haken, .willkommen-bild svg .wk-pfeil-dunkel {
    fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.willkommen-bild svg .wk-pfeil-dunkel { stroke: var(--farbe-text-hell); }
.willkommen-bild svg .wk-fragezeichen { fill: #fff; font: 700 24px var(--schrift); }
.willkommen-knoepfe .icon[hidden] { display: none; }

/* ---------- Textshow (PLAN.md E74 / 3.58): Elementliste wie der Seitenbaum, Darstellung, Vorschau mit dem Stil der Website ---------- */
.tsa { display: grid; gap: 4px; min-width: 0; }
.tsa-bereich[hidden], .tsa-reiter[hidden] { display: none; }
.tsa-bereich { display: grid; gap: 16px; align-content: start; }
.tsa-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.tsa-summe-text { margin: 0; }
.tsa-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.tsa-thumb { display: block; flex: none; width: 64px; height: 48px; object-fit: cover; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); }
.tsa-thumb-leer { display: grid; place-items: center; color: var(--farbe-text-hell); }
.tsa .baum-zeile.ist-versteckt .baum-titel, .tsa .baum-zeile.ist-versteckt .tsa-thumb { opacity: 0.5; }
.tsa-darstellung { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .tsa-darstellung { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.tsa-spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tsa-felder { display: grid; gap: 16px; }
.tsa-felder [hidden] { display: none; }
.tsa-notiz { margin: 12px 0 0; font-size: 0.9rem; }
.tsa-vorschau-karte { min-width: 0; }
.tsa-vorschau { min-width: 0; padding: 8px 0; }
.tsa-bildbox { display: grid; place-items: center; min-height: 120px; padding: 8px; background: var(--farbe-flaeche-leise); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius); }
.tsa-bildbox-bild { display: block; max-width: 100%; max-height: 220px; border-radius: var(--radius-klein); }

.tsa-status { cursor: pointer; border: 0; font: inherit; }
.tsa-status:hover { filter: brightness(0.95); }

/* Textshow: Fenster für ein Element – breit, zwei Spalten, nur der Inhalt scrollt (so bleiben die Ecken rechts rund) */
.tsa-dialog { width: min(1040px, calc(100vw - 24px)); overflow: hidden; }
.tsa-dialog .dialog-formular { max-height: calc(100vh - 24px); overflow-y: auto; }
.tsa-dialog-spalten { display: grid; gap: 16px 32px; }
@media (min-width: 820px) { .tsa-dialog-spalten { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.tsa-dialog-spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.tsa-dialog-paar { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tsa-dialog-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.tsa-dialog .tsa-bildbox { min-height: 110px; }
.tsa-dialog .tsa-bildbox-bild { max-height: 150px; }
.tsa-dialog input[type="color"] { flex: none; width: 56px; min-height: 40px; padding: 3px; cursor: pointer; }
.tsa-dialog input[type="color"]:disabled { opacity: 0.4; cursor: not-allowed; }
/* Knopfleiste bleibt am unteren Rand des Fensters sichtbar, auch wenn der Inhalt scrollt */
.tsa-dialog-fuss { position: sticky; bottom: -22px; z-index: 1; margin: 0 -22px -22px; padding: 14px 22px; background: var(--farbe-flaeche); border-top: 1px solid var(--farbe-rand); }
@media (min-width: 900px) { .tsa-dialog-fuss { bottom: -28px; margin: 0 -30px -28px; padding: 14px 30px; } }

/* ---------- Feedback / Rezension (PLAN.md E75 / 3.59): Bearbeiten-Seite, Eingänge, Einladungen ---------- */
.fba { display: grid; gap: 16px; min-width: 0; }
.fba-bereich[hidden], .fba-reiter[hidden] { display: none; }
.fba-bereich { display: grid; gap: 16px; align-content: start; }
.fba-raster { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .fba-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.fba-vorschau-spalte { min-width: 0; }
/* Die Vorschau bleibt beim Scrollen stehen (die Spalte streckt sich auf die Höhe der Eingaben, damit die Karte darin mitfahren kann) */
@media (min-width: 1100px) {
    .fba-raster { align-items: stretch; }
    .fba-vorschau-karte { position: sticky; top: calc(var(--kopfleiste-hoehe, 72px) + 16px); max-height: calc(100vh - var(--kopfleiste-hoehe, 72px) - 32px); display: flex; flex-direction: column; }
    .fba-vorschau-karte .fba-vorschau { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
}
.fba-eingabe { display: grid; gap: 16px; min-width: 0; }
.fba-felder { display: grid; gap: 16px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fba-felder-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .fba-felder, .fba-felder-3 { grid-template-columns: minmax(0, 1fr); } }
/* Mehrzeilige Texte und einzelne lange Felder nehmen die ganze Breite */
.fba-felder > .feld-breit,
.fba-felder > .feld:has(input[name="titel"], input[name="fehler_sterne"], input[name="label_datenschutz"], input[name="danke_titel"], input[name="mail_betreff"], input[name="empfaenger"]) { grid-column: 1 / -1; }
.fba-gruppe > summary { gap: 12px; }
.fba-gruppe-zahl { margin-left: auto; }
.fba-felder [hidden] { display: none; }
.fba-notiz { margin: 12px 0 0; font-size: 0.9rem; }
.fba-vorschau { padding: 8px 0; min-width: 0; }
.fba-uebersicht { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.fba-kennzahl { display: flex; align-items: baseline; gap: 12px; }
.fba-kennzahl-wert { font-size: 2.2rem; font-weight: 700; color: var(--farbe-kopfleiste); line-height: 1; }
.fba-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- Newsletter-Addon (PLAN.md E90) ---------- */
/* Kennzahlen über der Liste */
.nl-kennzahlen { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.nl-kennzahl { display: flex; align-items: baseline; gap: 10px; }
.nl-kennzahl-wert { font-size: 1.8rem; font-weight: 700; color: var(--farbe-kopfleiste); line-height: 1; }

/* Abonnenten: Statusfilter als zweites Submenü, Suche, Gruppen-Häkchen, Blättern */
.nl-filter { margin-top: -6px; }
.nl-suche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.nl-suchfeld { flex: 1 1 260px; max-width: 420px; }
.nl-gruppenwahl select { min-width: 180px; }
.nl-trefferzeile { margin: 0 0 10px; }
.nl-tabelle .modul-aktionen form { margin: 0; }
.nl-gruppenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.nl-blaettern { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.nl-ergebnis { margin: 0 0 12px; padding-left: 18px; }
.nl-uebersprungen { margin: 0 0 14px; }
.nl-uebersprungen > summary { cursor: pointer; }
.nl-uebersprungen ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.88rem; }

/* Versand: Prüfliste, Empfängerwahl, Fortschritt */
.nl-versand-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.nl-versand-links { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1100px) { .nl-versand-spalten { grid-template-columns: minmax(0, 1fr) 320px; } }
.nl-pruef-summe { margin-left: auto; display: flex; gap: 6px; }
.nl-pruefliste { list-style: none; margin: 0; padding: 0; }
.nl-pruefpunkt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--farbe-rand); line-height: 1.45; }
.nl-pruefpunkt:last-child { border-bottom: 0; }
.nl-pruefpunkt-symbol { display: grid; margin-top: 3px; color: var(--farbe-text-leise); }
.nl-pruefpunkt-ok .nl-pruefpunkt-symbol { color: var(--farbe-erfolg); }
.nl-pruefpunkt-warnung .nl-pruefpunkt-symbol { color: var(--farbe-warnung); }
.nl-pruefpunkt-fehler .nl-pruefpunkt-symbol { color: var(--farbe-gefahr); }
.nl-pruefpunkt-fehler { font-weight: 600; }
.nl-nochmal { margin-top: 12px; }
.nl-erreichbar { margin: 12px 0 0; font-size: 1.05rem; }
.nl-laufliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nl-laufliste li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nl-fortschritt { width: 100%; height: 14px; accent-color: var(--farbe-primaer); margin: 4px 0 14px; }
.nl-lauf-zahlen { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-bottom: 10px; }
.nl-lauf-hinweis { margin: 0 0 8px; color: var(--farbe-gefahr); }
.nl-lauf-hinweis[hidden] { display: none; }
.nl-lauf-aktionen { margin-top: 14px; }
.nl-lauf-aktionen form { margin: 0; }
.nl-fehlertext { max-width: 420px; overflow-wrap: anywhere; font-size: 0.85rem; }

/* Baukasten: Palette links (Elemente zum Anklicken, Piktogramme folgen den Designfarben) */
.nl-palette { padding: 14px 12px 20px; overflow-y: auto; }
.nl-palette-kopf { display: flex; align-items: center; gap: 6px; margin: 0 0 10px 4px; }
.nl-palette-titel { margin: 0; font-size: 0.95rem; }
.nl-palette-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nl-element { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 7px; border: 1px solid var(--farbe-rand); border-radius: 10px; background: var(--farbe-flaeche); color: var(--farbe-text); cursor: pointer; font: inherit; transition: border-color var(--uebergang), background var(--uebergang); }
.nl-element:hover { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.nl-element:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.nl-element-name { font-size: 0.74rem; line-height: 1.2; text-align: center; }
.nlp { display: block; width: 100%; max-width: 104px; height: auto; }
.nlp-zeile { fill: var(--farbe-rand-stark, #c9ced4); }
.nlp-bild { fill: var(--farbe-primaer-hell); stroke: var(--farbe-primaer); stroke-width: 1; }
.nlp-berg { fill: var(--farbe-primaer); opacity: 0.55; }
.nlp-akzent { fill: var(--farbe-primaer); }
.nlp-hell { fill: var(--farbe-flaeche); }
.nlp-flaeche { fill: var(--farbe-flaeche-leise); stroke: var(--farbe-rand); stroke-width: 1; }

/* Mitte: Grunddaten und Bausteine scrollen für sich */
.nl-mitte-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px var(--seitenrand) 48px; display: grid; gap: 16px; align-content: start; }
.nl-grunddaten .karte-klappkopf { gap: 12px; }
.nl-grunddaten-kurz { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.nl-grunddaten[open] .nl-grunddaten-kurz { visibility: hidden; }
.nl-platzhalter code { font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: var(--farbe-flaeche-leise); }
.nl-fehlerliste { margin: 6px 0 0; padding-left: 18px; }
.nl-bausteine-titel { margin: 4px 0 10px; font-size: 1rem; }
.nl-bausteine { display: flex; flex-direction: column; gap: 12px; }
.nl-leer { margin-top: 4px; }

.nl-baustein { margin: 0; padding: 0; min-width: 0; border: 1px solid var(--farbe-rand); border-radius: 10px; background: var(--farbe-flaeche); }
.nl-baustein.ist-gezogen { opacity: 0.45; }
.nl-baustein-kopf { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--farbe-rand); background: var(--farbe-flaeche-leise); border-radius: 10px 10px 0 0; }
.nl-baustein-griff { display: grid; color: var(--farbe-text-leise); cursor: grab; }
.nl-baustein-titel { padding: 0; margin: 0; font-weight: 600; float: none; width: auto; flex: none; }
.nl-baustein-kurz { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.nl-baustein:not(.ist-zu) .nl-baustein-kurz { visibility: hidden; }
.nl-baustein-aktionen { display: flex; gap: 2px; margin-left: auto; }
.nl-baustein-aktionen .knopf-icon { width: 32px; height: 32px; }
.nl-baustein-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; padding: 12px 14px 14px; }
.nl-feld { margin: 0; }
.nl-feld-breit { grid-column: 1 / -1; }
/* Zweispaltige Bausteine (Zwei Spalten, Zwei Bilder, Bild und Text): Felder nebeneinander wie in der Mail; ist-getauscht = Bild rechts */
.nl-baustein-spalten { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.nl-baustein-spalte { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 10px 12px; border: 1px dashed var(--farbe-rand); border-radius: 8px; }
.nl-baustein-spalten.ist-getauscht .nl-baustein-spalte:first-child { order: 2; }
/* Ist der Baustein selbst schmal (enge Mitte), stehen die Spalten untereinander – in der Reihenfolge der Mail */
.nl-baustein { container-type: inline-size; }
@container (max-width: 520px) { .nl-baustein-spalten { grid-template-columns: 1fr; } .nl-baustein-spalten.ist-getauscht .nl-baustein-spalte:first-child { order: 2; } }
.nl-baustein.ist-zu .nl-baustein-felder { display: none; }
.nl-baustein.ist-zu .nl-baustein-kopf { border-bottom: 0; border-radius: 10px; }
.nl-baustein [data-aktion="einklappen"] .icon { transition: transform 0.15s; }
.nl-baustein.ist-zu [data-aktion="einklappen"] .icon { transform: rotate(-90deg); }
.nl-formatleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0 6px; }

/* Bildwahl: Miniatur, Pfad, Knöpfe */
.nl-bildwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nl-bildwahl-vorschau { width: 72px; height: 54px; object-fit: contain; border: 1px solid var(--farbe-rand); border-radius: 6px; background: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px; flex: none; }
.nl-bildwahl-vorschau[hidden] { display: none; }
.nl-bildwahl-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-size: 0.88rem; }

/* Rechts: Vorschau in einem Rahmen (Desktop = Mailbreite + Rand, Handy 390 px), bei knappem Platz maßstabsgetreu verkleinert
   (--skala aus newsletter-admin.js); die Mail wird kleiner gezeichnet, nie umgebrochen */
.nl-rechts { padding: 0; }
.nl-rechts-kopf { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--farbe-rand); }
.nl-vorschau-umschalter { display: flex; gap: 6px; }
.nl-vorschau-umschalter .ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.nl-vorschau-rahmen { --rahmen-breite: 700px; --skala: 1; flex: 1 1 auto; min-height: 320px; padding: 12px; background: var(--farbe-flaeche-leise); overflow: hidden; display: flex; justify-content: center; }
.nl-vorschau-blatt { position: relative; width: calc(var(--rahmen-breite) * var(--skala)); height: 100%; overflow: hidden; border: 1px solid var(--farbe-rand); border-radius: 8px; background: #ffffff; flex: none; }
.nl-vorschau-frame { display: block; width: var(--rahmen-breite); height: calc(100% / var(--skala)); border: 0; background: #ffffff; transform: scale(var(--skala)); transform-origin: top left; }
.nl-vorschau-hinweis { flex: none; margin: 0; padding: 8px 14px; border-top: 1px solid var(--farbe-rand); color: var(--farbe-warnung-dunkel, #8a5a00); }
.nl-vorschau-hinweis[hidden] { display: none; }
.nl-test { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--farbe-rand); }
.nl-test-feld { flex: 1 1 200px; min-width: 0; margin: 0; }
.nl-test .text-leise { margin: 0; }
/* Testversand-Karte auf der Versandseite: Adresse und Knopf in einer Zeile */
.nl-test-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: 560px; }
.nl-pruefpunkt-link { font-weight: 600; white-space: nowrap; }
@media (max-width: 1099px) {
    .nl-palette { display: block; }
    .nl-vorschau-rahmen { flex: none; height: 70vh; }
}

/* Designs: Karten mit Farbvorschau (Farben per Skript aus data-farbe, keine Inline-Stile) */
.nl-design-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.nl-design-karte { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.nl-design-vorschau { display: flex; gap: 10px; align-items: center; padding: 22px; min-height: 90px; border-bottom: 1px solid var(--farbe-rand); background: var(--farbe-flaeche-leise); }
.nl-design-logo { height: 36px; width: auto; max-width: 110px; object-fit: contain; margin-right: 6px; }
.nl-farbfeld { display: inline-block; width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.18); flex: none; }
.nl-design-koerper { flex: 1; padding: 16px 20px 4px; }
.nl-design-titel { margin: 0 0 10px; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nl-design-daten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 0.9rem; }
.nl-design-daten dt { color: var(--farbe-text-leise); }
.nl-design-daten dd { margin: 0; overflow-wrap: anywhere; }
.nl-design-aktionen { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 16px; }
.nl-design-aktionen form { margin: 0; }

/* Design-Editor: links Karten, rechts die Vorschau (bleibt beim Scrollen stehen) */
.nl-gestaltung-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.nl-gestaltung-links { display: grid; gap: 16px; min-width: 0; }
.nl-gestaltung-rechts { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); overflow: hidden; }
.nl-vorschau-rahmen-fest { min-height: 480px; }
.nl-absender { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.nl-absender-link { font-size: 0.88rem; }
@media (min-width: 1100px) {
    .nl-gestaltung-spalten { grid-template-columns: minmax(0, 1fr) clamp(420px, 44%, 760px); }
    .nl-gestaltung-rechts { position: sticky; top: calc(var(--kopfleiste-hoehe) + 16px); height: calc(100vh - var(--kopfleiste-hoehe) - 32px); height: calc(100dvh - var(--kopfleiste-hoehe) - 32px); }
    .nl-vorschau-rahmen-fest { min-height: 0; }
}
.fba-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.fba-zusatzfelder { display: grid; gap: 14px; }
.fba-zusatz { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche-leise); }
.fba-zusatz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fba-zusatz-aktionen { display: inline-flex; gap: 2px; }
.fba-zusatz-paar { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .fba-zusatz-paar { grid-template-columns: 1fr; } }

/* Eingänge */
.fba-eingaenge { display: grid; gap: 0; padding: 0; }
.fba-eintrag { display: grid; gap: 10px; padding: 18px 22px; border-top: 1px solid var(--farbe-rand); }
.fba-eintrag:first-child { border-top: 0; }
.fba-eintrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fba-eintrag-punkte { display: inline-flex; align-items: center; gap: 2px; }
.fba-eintrag-punkte strong { margin-left: 8px; }
.fba-stern {
    width: 18px; height: 18px; background: var(--farbe-rand-stark);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.fba-stern.ist-voll { background: #f5a623; }
.fba-eintrag-status { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fba-eintrag-text { margin: 0; padding: 10px 14px; border-left: 3px solid var(--farbe-rand-stark); background: var(--farbe-flaeche-leise); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.fba-daten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.fba-daten dt { color: var(--farbe-text-leise); }
.fba-daten dd { margin: 0; }
.fba-eintrag-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.fba-aktion { margin: 0; }

/* Einladungen */
.fba-fortschritt { margin: 0 0 16px; }
.fba-balken { height: 8px; border-radius: 4px; background: var(--farbe-rand); overflow: hidden; }
.fba-balken span { display: block; height: 100%; width: 0; background: var(--farbe-primaer); transition: width 0.3s ease; }
.fba-adressen .fba-tabelle-aktion { text-align: right; width: 1%; }
.fba-adressen form { margin: 0; }

/* ---------- Umbau des Rasters (E76 / 3.60): Spalten ändern, Verschieben und Kopieren ---------- */
[data-spalteneditor]:not([data-umbau-seite]) [data-umbau-aktion] { display: none; }
.dialog-umbau { width: min(680px, calc(100vw - 24px)); }
.dialog-umbau .dialog-formular { overflow-y: auto; max-height: calc(100vh - 24px); }
.dialog-umbau .dialog-ende { position: sticky; bottom: 0; z-index: 1; margin: 0; padding: 14px 0 4px; background: var(--farbe-flaeche); }
.umbau-bereich { display: grid; gap: 18px; }
.umbau-bereich[hidden] { display: none; }
.umbau-gruppen { display: grid; gap: 14px; }
.umbau-gruppe { display: grid; gap: 8px; }
.umbau-gruppe-titel { font-weight: 600; font-size: 0.9rem; color: var(--farbe-text-leise); }
.umbau-vorlagen { display: flex; flex-wrap: wrap; gap: 10px; }
.umbau-vorlage {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; width: 168px; padding: 7px; cursor: pointer;
    border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); background: var(--farbe-flaeche);
}
.umbau-vorlage:hover { border-color: var(--farbe-akzent); }
.umbau-vorlage:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.umbau-vorlage[aria-pressed="true"] { border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px var(--farbe-primaer); }
.umbau-vorlage.ist-aktuell { background: var(--farbe-flaeche-leise); }
.umbau-teil {
    display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 4px; font-size: 0.75rem;
    color: var(--farbe-text-leise); background: color-mix(in srgb, var(--farbe-primaer) 22%, white);
}
.umbau-b-1 { grid-column: span 1; } .umbau-b-2 { grid-column: span 2; } .umbau-b-3 { grid-column: span 3; }
.umbau-b-4 { grid-column: span 4; } .umbau-b-5 { grid-column: span 5; } .umbau-b-6 { grid-column: span 6; }
.umbau-b-7 { grid-column: span 7; } .umbau-b-8 { grid-column: span 8; } .umbau-b-9 { grid-column: span 9; }
.umbau-b-10 { grid-column: span 10; } .umbau-b-11 { grid-column: span 11; } .umbau-b-12 { grid-column: span 12; }
.umbau-wahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.umbau-wahl legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.umbau-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); cursor: pointer; }
.umbau-option:has(input:checked) { border-color: var(--farbe-primaer); background: var(--farbe-flaeche-leise); }
.umbau-option.ist-gesperrt { opacity: 0.55; cursor: not-allowed; }
.umbau-option input { margin-top: 3px; }
.umbau-weg-liste { margin: 0 0 8px; padding-left: 20px; color: var(--farbe-text-leise); }
.umbau-hinweis { margin: 0; font-size: 0.9rem; }
.onpage-umbau { display: grid; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--farbe-rand); }
.onpage-umbau-titel { margin: 0; font-size: 0.95rem; color: var(--farbe-kopfleiste); }
.onpage-umbau .knopf { justify-content: flex-start; }

/* Spalten tauschen: unsichtbarer Streifen in der Lücke zwischen zwei Spalten (über die ganze Höhe); der runde Knopf erscheint,
   sobald die Maus in der Lücke ist (Tastatur: bei Fokus; Touch: immer) */
.abschnitt-spalten { position: relative; }
.spalten-tausch {
    all: unset; box-sizing: border-box; position: absolute; z-index: 4; display: grid; place-items: center; width: 26px; cursor: pointer;
    top: 0; bottom: 0; transform: translateX(-50%); /* volle Höhe des Abschnitts: bleibt richtig, wenn die Editoren Höhe ändern */
}
.spalten-tausch[hidden] { display: none; }
.spalten-tausch svg {
    box-sizing: content-box; width: 18px; height: 18px; padding: 8px; border-radius: 50%; color: var(--farbe-primaer);
    border: 1px solid var(--farbe-rand-stark); background: var(--farbe-flaeche); box-shadow: var(--schatten-karte);
    opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.spalten-tausch:hover svg, .spalten-tausch:focus-visible svg { opacity: 1; }
.spalten-tausch:hover svg { background: var(--farbe-flaeche-leise); border-color: var(--farbe-primaer); }
@media (hover: none) { .spalten-tausch svg { opacity: 1; } }
.raster-zelle.ist-getauscht { animation: spalte-getauscht 0.9s ease; }
@keyframes spalte-getauscht { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe-akzent) 55%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .raster-zelle.ist-getauscht { animation: none; } }

/* ---------- Seitenbalken (E77 / 3.61): Bearbeiten-Seite, Vorlagen, Vorschau ---------- */
.sba { display: grid; gap: 16px; min-width: 0; }
.sba-raster { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .sba-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; } }
.sba-bereich { display: grid; gap: 16px; align-content: start; }
.sba-bereich[hidden], .sba-reiter[hidden] { display: none; }
.sba-eingabe { display: grid; gap: 16px; align-content: start; min-width: 0; }
.sba-ende { margin-top: 0; }
.sba-felder { display: grid; gap: 18px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sba-felder > .sba-feld-breit { grid-column: 1 / -1; }
@media (max-width: 800px) { .sba-felder { grid-template-columns: minmax(0, 1fr); } }
.sba-felder .feld.ist-aus { opacity: 0.45; }

/* Elementliste */
.sba-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sba-leiste p { margin: 0; }
.sba-liste { display: grid; gap: 8px; }
.sba-leer { margin: 8px 0; }
.sba-zeile { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); }
.sba-zeile.ist-aus { opacity: 0.6; background: var(--farbe-flaeche-leise); }
.sba-zeile-symbol { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--farbe-primaer); color: #fff; }
.sba-zeile-symbol .icon { width: 22px; height: 22px; }
.sba-zeile-text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sba-zeile-name { font-weight: 600; color: var(--farbe-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sba-zeile-name:hover { text-decoration: underline; }
.sba-zeile-aktionen { display: inline-flex; gap: 2px; flex: none; }

/* Vorlagen */
.sba-vorlagen { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sba-vorlage {
    all: unset; box-sizing: border-box; display: grid; gap: 4px; padding: 12px; cursor: pointer; text-align: left;
    border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); background: var(--farbe-flaeche);
}
.sba-vorlage:hover { border-color: var(--farbe-akzent); }
.sba-vorlage:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.sba-vorlage.ist-aktiv { border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px var(--farbe-primaer); }
.sba-vorlage small { color: var(--farbe-text-leise); font-size: 0.8rem; line-height: 1.35; }
.sba-mini { position: relative; display: block; height: 74px; margin-bottom: 4px; border-radius: 8px; overflow: hidden; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); }
.sba-mini-balken { position: absolute; top: 12px; display: grid; gap: 4px; }
.sba-mini-rechts .sba-mini-balken { right: 0; }
.sba-mini-links .sba-mini-balken { left: 0; }
.sba-mini-balken span { display: block; width: 24px; height: 16px; background: var(--m-ak, #3d6485); }
.sba-mini-rechts .sba-mini-balken span { border-radius: var(--m-r, 8px) 0 0 var(--m-r, 8px); }
.sba-mini-links .sba-mini-balken span { border-radius: 0 var(--m-r, 8px) var(--m-r, 8px) 0; }
.sba-mini-schwebend.sba-mini-rechts .sba-mini-balken { right: 6px; }
.sba-mini-schwebend.sba-mini-links .sba-mini-balken { left: 6px; }
.sba-mini-schwebend .sba-mini-balken span { border-radius: var(--m-r, 8px); width: 18px; height: 18px; }
.sba-mini-dock .sba-mini-balken { gap: 0; }
.sba-mini-dock .sba-mini-balken span { border-radius: 0; width: 20px; height: 18px; }
.sba-mini-dock.sba-mini-rechts .sba-mini-balken span:first-child { border-top-left-radius: var(--m-r, 8px); }
.sba-mini-dock.sba-mini-rechts .sba-mini-balken span:last-child { border-bottom-left-radius: var(--m-r, 8px); }
.sba-mini-seite::before, .sba-mini-seite::after { content: ""; position: absolute; left: 10px; height: 6px; border-radius: 3px; background: var(--farbe-rand-stark); }
.sba-mini-seite::before { top: 14px; width: 40%; }
.sba-mini-seite::after { top: 28px; width: 56%; }

/* Auswahl-Chips und -Karten */
.sba-wahl-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.sba-wahl { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--farbe-rand-stark); border-radius: 999px; background: var(--farbe-flaeche); }
.sba-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.sba-wahl:has(input:checked) { border-color: var(--farbe-primaer); background: var(--farbe-flaeche-leise); box-shadow: 0 0 0 1px var(--farbe-primaer); }
.sba-wahl:has(input:focus-visible) { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.sba-wahl-karte { display: grid; gap: 2px; border-radius: var(--radius); padding: 10px 14px; flex: 1 1 160px; }
.sba-wahl-titel { font-weight: 600; }
.sba-wahl-text { font-size: 0.82rem; color: var(--farbe-text-leise); }
.sba-ecke { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--farbe-primaer); border-right: 0; border-bottom: 0; background: transparent; }
.sba-ecke-kantig { border-top-left-radius: 0; }
.sba-ecke-leicht { border-top-left-radius: 5px; }
.sba-ecke-rund { border-top-left-radius: 11px; }
.sba-ecke-kapsel { border-top-left-radius: 22px; }
.sba-zahl { display: inline-flex; align-items: center; gap: 8px; }
.sba-zahl input { width: 110px; }

/* Vorschau: eine kleine Beispielseite, an deren rechtem Rand der Balken gezeichnet wird */
.sba-vorschau-spalte { min-width: 0; }
@media (min-width: 1100px) {
    .sba-vorschau-karte { position: sticky; top: calc(var(--kopfleiste-hoehe, 72px) + 16px); }
}
.sba-offen-schalter { margin-left: auto; font-size: 0.9rem; }
.sba-buehne {
    position: relative; height: 520px; overflow: hidden; border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
    background: #f4f6f8; transform: translateZ(0); /* macht fixed des Balkens relativ zur Bühne */
}
.sba-buehne-seite { position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 18px 24px; }
.sba-seite-kopf { display: block; height: 34px; border-radius: 6px; background: #dfe4ea; }
.sba-seite-titel { display: block; width: 45%; height: 22px; border-radius: 5px; background: #cdd4dc; margin-top: 10px; }
.sba-seite-zeile { display: block; width: 80%; height: 10px; border-radius: 4px; background: #e2e7ed; }
.sba-seite-zeile.kurz { width: 50%; }
.sba-seite-bild { display: block; width: 60%; height: 110px; border-radius: 8px; background: #dfe4ea; }
.sba-vorschau { position: absolute; inset: 0; }
/* In der Vorschau gilt die Breite der Bühne, nicht die des Fensters: der Balken bleibt auch bei schmalen Fenstern sichtbar */
.sba-vorschau .sb-balken { display: flex !important; }
.sba-vorschau-leer { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; text-align: center; }
.sba-notiz { margin: 12px 0 0; font-size: 0.9rem; }

/* Fenster */
.sba-dialog { width: min(980px, calc(100vw - 24px)); }
.sba-dialog-spalten { display: grid; gap: 20px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sba-dialog-spalte { display: grid; gap: 14px; align-content: start; min-width: 0; }
@media (max-width: 800px) { .sba-dialog-spalten { grid-template-columns: minmax(0, 1fr); } }
.sba-dialog-paar { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sba-symbole { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); max-height: 168px; overflow-y: auto; padding: 4px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.sba-symbolwahl { all: unset; box-sizing: border-box; display: grid; place-items: center; height: 40px; cursor: pointer; border-radius: 8px; color: var(--farbe-text); }
.sba-symbolwahl:hover { background: var(--farbe-flaeche-leise); }
.sba-symbolwahl:focus-visible { outline: 2px solid var(--farbe-akzent); }
.sba-symbolwahl.ist-aktiv { background: var(--farbe-primaer); color: #fff; }
.sba-bildbox { display: grid; gap: 8px; margin-top: 8px; }
.sba-modulzeile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche-leise); }
.sba-modulbox[hidden], .sba-textbox .feld[hidden] { display: none; }
.sba-seitenwahl { display: grid; gap: 6px; }
.sba-seitenliste { display: grid; gap: 4px; max-height: 180px; overflow-y: auto; padding: 8px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.sba-seite-ebene-1 { padding-left: 16px; }
.sba-seite-ebene-2 { padding-left: 32px; }
.sba-seite-ebene-3 { padding-left: 48px; }
.sba-hinweis { margin: -6px 0 0; font-size: 0.85rem; }


/* ---------- Segmentmenü (PLAN.md E87): Segmente als aufklappbare Karten, Darstellung mit Vorschau ---------- */
.bxa-admin { display: grid; gap: 4px; min-width: 0; }
.bxa-bereich[hidden], .bxa-reiter[hidden] { display: none; }
.bxa-bereich { display: grid; gap: 16px; align-content: start; }
.bxa-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.bxa-summe { margin: 0; }
.bxa-liste { display: grid; gap: 12px; }
.bxa-leer { padding: 24px; text-align: center; background: var(--farbe-flaeche); border: 1px dashed var(--farbe-rand-stark); border-radius: var(--radius-gross); }
.bxa-hinzufuegen-unten { display: flex; justify-content: flex-end; }

/* Karte: Kopf (immer sichtbar) und Körper (klappt auf) */
.bxa-karte {
    display: grid; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); overflow: hidden;
}
.bxa-karte.ist-aus { background: var(--farbe-flaeche-leise); }
.bxa-karte.ist-aus .bxa-karte-raster, .bxa-karte.ist-aus .bxa-daumen { opacity: 0.65; }
.bxa-karte.ist-gezogen { opacity: 0.45; }
.bxa-karte.ziel-davor { box-shadow: inset 0 3px 0 var(--farbe-akzent); }
.bxa-karte.ziel-danach { box-shadow: inset 0 -3px 0 var(--farbe-akzent); }
.bxa-karte-kopf { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; }
.bxa-karte-kopf.ist-klappbar { cursor: pointer; }
.bxa-karte-kopf.ist-klappbar:hover { background: var(--farbe-flaeche-leise); }
.bxa-griff { flex: none; width: 24px; display: grid; place-items: center; cursor: grab; color: var(--farbe-text-hell); touch-action: none; }
.bxa-daumen {
    flex: none; display: grid; place-items: center; width: 56px; height: 38px; overflow: hidden; color: var(--farbe-text-hell);
    background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein);
}
.bxa-daumen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bxa-kopf-text { display: grid; min-width: 0; flex: 1 1 auto; }
.bxa-kopf-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bxa-kopf-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.bxa-kopf-meta:empty { display: none; }
.bxa-aktionen { margin-left: auto; display: flex; gap: 2px; flex: none; }
.bxa-pfeil svg { transition: transform 0.3s; }
.bxa-pfeil.ist-offen svg { transform: rotate(180deg); }
.bxa-karte-koerper[hidden] { display: none; }
.bxa-karte-raster {
    display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); padding: 18px 18px 20px; border-top: 1px solid var(--farbe-rand);
}
@media (min-width: 900px) {
    .bxa-karte-raster { grid-template-columns: 260px minmax(0, 1fr); }
    .bxa-karte-raster.bxa-nur-texte { grid-template-columns: minmax(0, 1fr); }
}

/* Bilder: gleich große Kacheln, die ganze Fläche ist der Knopf */
.bxa-medien { display: grid; gap: 16px; align-content: start; }
.bxa-medien-klein { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.bxa-medien-klein .feld[hidden] { display: none; }
.bxa-medium .feld-titel { font-size: 0.9rem; }
.bxa-kachel { position: relative; aspect-ratio: 3 / 2; }
.bxa-kachel-flaeche {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; overflow: hidden; font: inherit;
    color: var(--farbe-text-leise); background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
}
button.bxa-kachel-flaeche { cursor: pointer; }
.bxa-kachel-flaeche.ist-leer { border-style: dashed; }
button.bxa-kachel-flaeche:hover, button.bxa-kachel-flaeche:focus-visible { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.bxa-kachel-flaeche img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.bxa-kachel-symbol .bxa-kachel-flaeche img { object-fit: contain; padding: 10px; }
.bxa-kachel-leer { display: grid; gap: 4px; justify-items: center; font-size: 0.85rem; }
.bxa-kachel-aendern {
    position: absolute; left: 50%; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; transform: translateX(-50%);
    border-radius: 999px; background: rgba(20, 30, 40, 0.8); color: #fff; font-size: 0.8rem; opacity: 0; transition: opacity 0.2s;
}
button.bxa-kachel-flaeche:hover .bxa-kachel-aendern, button.bxa-kachel-flaeche:focus-visible .bxa-kachel-aendern { opacity: 1; }
.bxa-kachel-weg {
    position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; cursor: pointer;
    border: 0; border-radius: 50%; background: rgba(20, 30, 40, 0.8); color: #fff;
}
.bxa-kachel-weg:hover, .bxa-kachel-weg:focus-visible { background: #b3261e; }

/* Texte und Verweis */
.bxa-daten { display: grid; gap: 16px; align-content: start; min-width: 0; }
.bxa-verweis { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
    .bxa-verweis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bxa-verweis .feld:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1250px) {
    .bxa-verweis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 0.8fr); }
    .bxa-verweis .feld:last-child { grid-column: auto; }
}
.bxa-farbfeld { display: flex; align-items: center; gap: 8px; }
.bxa-farbfeld input[type="color"] { flex: none; width: 44px; height: 38px; padding: 2px; border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-klein); background: var(--farbe-flaeche); cursor: pointer; }
.bxa-farbfeld input[type="text"] { flex: 1 1 auto; min-width: 0; }

/* Darstellung */
.bxa-felder { display: grid; gap: 16px; }
.bxa-felder-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bxa-farben[hidden] { display: none; }
.bxa-hintergrund .bxa-kachel { max-width: 260px; }
.bxa-darstellung { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .bxa-darstellung { grid-template-columns: minmax(320px, 1fr) minmax(0, 1.5fr); } }
.bxa-einstellungen { display: grid; gap: 16px; }
.bxa-vorschau-karte { position: sticky; top: 100px; }
.bxa-vorschau-rahmen { display: block; width: 100%; height: 560px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: #fff; }

/* ---------- Bildtext-Kasten (PLAN.md E88): Text mit Editor, Einstellungen und Vorschau (Bildkachel: .bxa-kachel vom Segmentmenü) ---------- */
.lba-admin { display: grid; gap: 16px; min-width: 0; }
.lba-text-karte .zelle-text { min-height: 160px; }
.lba-spalten { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .lba-spalten { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.5fr); } }
.lba-einstellungen { display: grid; gap: 16px; }
.lba-felder { display: grid; gap: 16px; }
.lba-felder[hidden] { display: none; }
.lba-felder-2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lba-bildzeile { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .lba-bildzeile { grid-template-columns: 220px minmax(0, 1fr); } }
.lba-vorschau-karte { position: sticky; top: 100px; }
/* Die Vorschau zeigt die Website in 1000 px Breite (sonst gälte in der schmalen Spalte schon die Handy-Ansicht) und wird verkleinert */
.lba-vorschau-huelle { --lba-skala: 1; position: relative; width: 100%; height: calc(var(--lba-hoehe, 200px) * var(--lba-skala)); overflow: hidden; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: #e9edf1; }
.lba-vorschau-rahmen.ist-neu { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.lba-vorschau-rahmen { display: block; width: 1000px; height: var(--lba-hoehe, 200px); border: 0; background: #e9edf1; transform-origin: 0 0; transform: scale(var(--lba-skala)); }

/* ---------- Geschützter Bereich (PLAN.md E89): Zugang, geschützte Seite, Text mit Editor und Vorschau ---------- */
.lfa-admin { display: grid; gap: 16px; min-width: 0; }
.lfa-spalten { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .lfa-spalten { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.2fr); } }
.lfa-einstellungen, .lfa-rechts { display: grid; gap: 16px; min-width: 0; }
.lfa-felder { display: grid; gap: 16px; }
.lfa-felder-2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lfa-codezeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.lfa-codezeile input { flex: 1 1 180px; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; }
.lfa-rechts .zelle-text { min-height: 140px; }
.lfa-vorschau-rahmen { display: block; width: 100%; height: 440px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: #fff; }

/* Shopsystem-Addon (PLAN.md E91): Kennzahlen, Einstellungsgruppen */
.sh-kennzahlen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; }
.sh-kennzahlen .sh-kennzahl { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon wert" "icon text"; align-items: center; column-gap: 16px; row-gap: 2px; margin: 0; }
.sh-kennzahl-icon { grid-area: icon; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); color: var(--farbe-akzent); }
.sh-kennzahl-icon .icon { width: 24px; height: 24px; }
.sh-kennzahl-wert { grid-area: wert; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--farbe-kopfleiste); }
.sh-kennzahl .text-leise { grid-area: text; font-size: 0.9rem; }
.sh-gruppe > summary { gap: 12px; }
.sh-gruppe-text { margin: 4px 0 0; font-size: 0.9rem; }
.sh-felder { display: grid; gap: 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px) { .sh-felder { grid-template-columns: minmax(0, 1fr); } }
.sh-felder > .feld-breit { grid-column: 1 / -1; }

.sh-unter { margin-top: -6px; }
.sh-felder-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
@media (max-width: 800px) { .sh-felder-3 { grid-template-columns: minmax(0, 1fr); } }
.sh-auswahl { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Listen mit einer Zeile je Eintrag (Versandzeiten, Zuschläge, Zahlungsziele) */
.sh-zeilen { display: grid; gap: 10px; }
.sh-zeile { display: grid; gap: 10px 12px; align-items: center; margin: 0; }
.sh-zeile-kopf { font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 600; }
.sh-zeile-zeit { grid-template-columns: minmax(180px, 1fr) 90px 90px minmax(150px, auto) auto; }
.sh-zeile-plz { grid-template-columns: minmax(140px, 1fr) 130px minmax(140px, 200px) 140px auto; }
.sh-zeile-ziel { grid-template-columns: minmax(200px, 1fr) minmax(150px, auto) auto; }
.sh-zeile-neu { padding-top: 12px; border-top: 1px dashed var(--farbe-rand); margin-top: 4px; }
.sh-zeile-aktionen { display: flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 800px) { .sh-zeile-zeit, .sh-zeile-plz, .sh-zeile-ziel { grid-template-columns: 1fr 1fr; } .sh-zeile-kopf { display: none; } .sh-zeile > :first-of-type:not([type=hidden]) { grid-column: 1 / -1; } .sh-zeile-aktionen { grid-column: 1 / -1; } }
/* Verweiskarten unter den Formularen */
.sh-verweise { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 16px; }
.sh-verweis { display: flex; align-items: center; gap: 14px; margin: 0; color: inherit; text-decoration: none; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.sh-verweis:hover { border-color: var(--farbe-akzent); }
.sh-verweis > span:last-child { display: grid; gap: 2px; }
.sh-verweis-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); color: var(--farbe-akzent); }
/* Staffeln je Land */
.sh-laender { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); margin-top: 12px; }
.sh-land-name { margin: 0 0 8px; font-size: 1rem; }
.sh-staffel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.sh-staffel-kopf { font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 600; margin-bottom: 4px; }
.sh-staffel .feld-hilfe { grid-column: 1 / -1; color: var(--farbe-gefahr, #b3261e); }
/* Zahlarten und Länder: Tabelle mit Häkchen */
.sh-zahlarten, .sh-laenderliste { display: grid; gap: 4px; }
.sh-zahlart { display: grid; grid-template-columns: minmax(0, 1fr) 90px 150px; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--farbe-rand); }
.sh-zahlart-name { display: grid; gap: 2px; }
.sh-zahlart-kopf, .sh-land-kopf { font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 600; border-bottom-width: 2px; }
.sh-zahlart.ist-abgekuendigt { opacity: 0.8; }
.sh-land-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--farbe-rand); }
.sh-zahlart .auswahl, .sh-land-zeile .auswahl { justify-self: start; }

/* Shopsystem-Addon: Sortiment, Kategorienbaum, Produkt-Editor */
.sh-sortiment { display: grid; gap: 16px; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .sh-sortiment { grid-template-columns: minmax(0, 1fr); } }
.sh-baum { margin: 0; }
.sh-baum-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.sh-baum-zeile a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.sh-baum-zeile a:hover { background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, 0.04)); }
.sh-baum-zeile.ist-aktiv a { background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); font-weight: 700; }
.sh-baum-zeile.ebene-2 a { padding-left: 26px; }
.sh-baum-zeile.ebene-3 a { padding-left: 42px; }
.sh-baum-zeile.ist-versteckt .sh-baum-name { opacity: 0.6; }
.sh-baum-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-baum-zahl { flex: none; font-size: 0.8rem; color: var(--farbe-text-leise); background: color-mix(in srgb, var(--farbe-text-leise) 12%, transparent); border-radius: 999px; padding: 1px 8px; }
.sh-baum-icon { flex: none; color: var(--farbe-text-leise); display: grid; }
.sh-neu-kategorie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.sh-neu-kategorie input { flex: 1 1 180px; min-width: 0; }
.sh-neu-unter { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--farbe-rand); }
.sh-produkte { display: grid; gap: 16px; min-width: 0; }
.sh-produkte .karte { margin: 0; }
.sh-kategorie-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.sh-kategorie-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sh-kategorie-aktionen form { margin: 0; display: inline-flex; }
.sh-kategorie-info { margin: 6px 0 0; }
.sh-pfad { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 1.15rem; }
.sh-pfad a { color: var(--farbe-text-leise); text-decoration: none; }
.sh-pfad span { color: var(--farbe-text-leise); }
.sh-tabelle .sh-rechts { text-align: right; white-space: nowrap; }
.sh-bild-zelle { width: 64px; }
.sh-vorschau { display: block; width: 52px; height: 52px; object-fit: cover; border-radius: 10px; background: var(--farbe-hintergrund-leise, #f1f4f7); }
.sh-vorschau-leer { display: grid; place-items: center; color: var(--farbe-text-leise); }
.abzeichen-warnung { background: color-mix(in srgb, #e0a100 20%, transparent); color: #7a5600; }
.punkt-warnung { background: #e0a100; }

.sh-editor { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
@media (max-width: 1100px) { .sh-editor { grid-template-columns: minmax(0, 1fr); } }
.sh-editor-haupt, .sh-editor-seite { display: grid; gap: 16px; min-width: 0; }
.sh-editor .karte { margin: 0; }
.sh-felder-1 { grid-template-columns: minmax(0, 1fr); }
.sh-preise { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sh-fehlertext { color: var(--farbe-gefahr); margin: 0 0 8px; }
.sh-bildwahl-vorschau img { max-width: 240px; max-height: 160px; border-radius: 10px; display: block; margin-bottom: 8px; }

/* Bilder und Dokumente eines Produkts */
.sh-medien-liste { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 12px; }
.sh-medien-liste:empty { display: none; }
.sh-medium { position: relative; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--farbe-rand); border-radius: 12px; background: var(--farbe-karte, #fff); }
.sh-medium-bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--farbe-hintergrund-leise, #f1f4f7); }
.sh-medium-aktionen { display: flex; gap: 4px; justify-content: flex-end; }
.sh-medien-dateien .sh-medien-liste { grid-template-columns: minmax(0, 1fr); }
.sh-medium-datei { grid-template-columns: auto minmax(120px, 1fr) minmax(160px, 1fr) auto; align-items: center; }
.sh-medium-symbol { display: grid; place-items: center; color: var(--farbe-text-leise); }
.sh-medium-pfad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; color: var(--farbe-text-leise); }
@media (max-width: 700px) { .sh-medium-datei { grid-template-columns: minmax(0, 1fr); } }

/* Shopsystem-Addon: Bestellungen */
.sh-suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.sh-suche input[type="search"] { flex: 1 1 280px; max-width: 460px; }
.sh-filter-zahl { margin-left: 4px; font-size: 0.8rem; opacity: 0.75; }
.sh-seiten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sh-fuss { margin: 12px 0 0; font-size: 0.9rem; }
.abzeichen-neu { background: color-mix(in srgb, var(--farbe-akzent) 18%, transparent); color: var(--farbe-akzent); font-weight: 700; }
.sh-option { display: block; font-weight: 400; font-size: 0.85rem; color: var(--farbe-text-leise); }
.sh-summen { margin: 16px 0 0; display: grid; gap: 4px; max-width: 420px; margin-left: auto; }
.sh-summen > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.sh-summen dt, .sh-summen dd { margin: 0; }
.sh-summen .ist-summe { border-top: 2px solid var(--farbe-rand-stark, var(--farbe-rand)); margin-top: 6px; padding-top: 10px; font-weight: 700; font-size: 1.1rem; }
.sh-adressen { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sh-adresse { font-style: normal; line-height: 1.5; }
.sh-klein-titel { margin: 0 0 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--farbe-text-leise); }
.sh-nachricht { margin: 0; }
.sh-kunde { margin: 0; line-height: 1.6; }
.sh-belege { display: grid; gap: 8px; }
.sh-belege form { margin: 0; }
.sh-belege .knopf { width: 100%; justify-content: flex-start; }
.sh-verlauf { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.sh-verlauf li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, 0.04)); }
.sh-verlauf li.vom-kunden { background: color-mix(in srgb, var(--farbe-akzent) 10%, transparent); }
.sh-verlauf .text-leise { font-size: 0.8rem; }
.sh-notiz { display: grid; gap: 8px; margin: 0; }
.sh-notiz .knopf { justify-self: start; }
.sh-daten { margin: 0; display: grid; gap: 8px; }
.sh-daten > div { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 12px; align-items: baseline; }
.sh-daten dt { color: var(--farbe-text-leise); margin: 0; }
.sh-daten dd { margin: 0; }
@media (max-width: 600px) { .sh-daten > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.sh-kennzahl-link { color: inherit; text-decoration: none; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.sh-kennzahl-link:hover { border-color: var(--farbe-akzent); }

/* ---- Shop-Addon: Varianten, Produktoptionen (E91) ---- */
.sh-chip { display: inline-block; padding: 1px 8px; margin: 0 4px 2px 0; border-radius: 999px; background: color-mix(in srgb, var(--farbe-akzent) 12%, transparent); font-size: 0.8rem; font-weight: 600; line-height: 1.5; }
.sh-tabelle-rahmen { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.sh-varianten { width: 100%; border-collapse: collapse; min-width: 760px; }
.sh-varianten th { text-align: left; padding: 8px 6px; font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 600; white-space: nowrap; vertical-align: bottom; }
.sh-varianten td { padding: 4px 6px; vertical-align: top; }
.sh-varianten tbody tr + tr td { border-top: 1px solid var(--farbe-rand); }
.sh-varianten input[type="text"], .sh-varianten select { min-width: 0; width: 100%; }
.sh-var-nr { width: 36px; color: var(--farbe-text-leise); padding-top: 14px !important; }
.sh-var-name { min-width: 180px; }
.sh-var-preis { min-width: 110px; }
.sh-var-brutto { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--farbe-text-leise); min-height: 1em; }
.sh-var-merkmal input { font-weight: 600; }
.sh-var-optionen { min-width: 90px; padding-top: 12px !important; }
.sh-var-aktionen { white-space: nowrap; text-align: right; }
.sh-var-fuss { display: grid; gap: 8px; margin-top: 14px; }
.sh-var-fuss .text-leise { margin: 0; font-size: 0.9rem; }
.sh-options-felder { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 6px 0 14px; }
.sh-optionsgruppe { margin: 0; padding: 14px 16px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); display: grid; gap: 8px; align-content: start; }
.sh-optionsgruppe legend { padding: 0 6px; font-weight: 600; }
.sh-werte { display: grid; gap: 6px; }
.sh-werteliste { display: grid; gap: 8px; margin-bottom: 12px; max-width: 520px; }
.sh-wert { display: flex; gap: 8px; align-items: center; }
.sh-wert input { flex: 1 1 auto; min-width: 0; }
a.sh-zeile-link { grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) auto; padding: 10px 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color .2s; }
a.sh-zeile-link:hover { border-color: var(--farbe-akzent); }
@media (max-width: 700px) { a.sh-zeile-link { grid-template-columns: minmax(0, 1fr); } }
.sh-werte-spalten { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 20px; margin-bottom: 12px; }
.sh-werte-scroll { max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.sh-buendelzeilen { grid-template-columns: minmax(0, 1fr) 140px; align-items: center; max-width: 560px; }
.sh-unterueberschrift { margin: 18px 0 8px; font-size: 1rem; }

/* Untermenü-Stile (Template-Einstellungen → Untermenüs, PLAN-Archiv 3.69): Auswahlkarten mit Skizze; gewählt = Akzentrahmen */
.smn-wahl-text { margin: 0 0 14px; }
.smn-wahl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.smn-wahl {
    position: relative; display: grid; gap: 6px; padding: 14px; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
    background: var(--farbe-flaeche, #fff); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .15s;
}
.smn-wahl:hover { border-color: var(--farbe-rand-stark); transform: translateY(-1px); }
.smn-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.smn-wahl:has(input:checked) { border-color: var(--farbe-akzent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--farbe-akzent) 35%, transparent); }
.smn-wahl:has(input:focus-visible) { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.smn-skizze { display: block; color: var(--farbe-text-leise); }
.smn-skizze svg { display: block; width: 100%; height: auto; }
.smn-wahl:has(input:checked) .smn-skizze { color: var(--farbe-akzent); }
.smn-wahl-name { font-size: .95rem; }
.smn-wahl-kurz { color: var(--farbe-text-leise); line-height: 1.4; }
.untermenue-felder { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--farbe-rand); }
.smn-wahl.ist-gesperrt { opacity: .6; cursor: default; }
.smn-wahl.ist-gesperrt:hover { transform: none; border-color: var(--farbe-rand); }

/* Inhalte → Hauptmenü (PLAN-Archiv 3.69) */
.hm-formular .karte + .karte { margin-top: 16px; }
.hm-koerper { padding-top: 6px; }
.hm-oben .spalte-doppelt { grid-column: span 2; }
.hm-bildkarte-raster { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 20px; align-items: start; }
.hm-bildkarte-raster .feld + .feld { margin-top: 12px; }
.hm-untertitel { margin: 26px 0 6px; font-size: 1rem; }
.hm-unterseiten { display: grid; gap: 10px; margin-top: 12px; }
.hm-unterseite {
    display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.1fr) minmax(220px, 1.6fr); gap: 18px; align-items: start;
    padding: 14px 16px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: var(--farbe-flaeche-leise);
}
.hm-unterseite-name { display: grid; gap: 4px; padding-top: 6px; font-weight: 600; }
.hm-unterseite-name a { color: inherit; text-decoration: none; }
.hm-unterseite-name a:hover { color: var(--farbe-akzent); }
.hm-unterseite-symbol .bildfeld { margin-bottom: 0; }
.hm-unterseite-symbol .bildfeld-rahmen { width: 72px; height: 72px; min-height: 0; }
.hm-unterseite-symbol .bildfeld-bild { max-height: 72px; }
.hm-unterseite-symbol .bild-leer span { display: none; }
@media (max-width: 900px) {
    .hm-bildkarte-raster, .hm-unterseite { grid-template-columns: 1fr; }
    .hm-oben .spalte-doppelt { grid-column: auto; }
}

/* ---------- Speisekarten-Addon (PLAN.md E93): Kennzahlen, Karte (Baum + Einträge), Editor, Wochenkarte, Allergene ---------- */
.spk-kennzahlen { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; }
.spk-kennzahlen .spk-kennzahl { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon wert" "icon text"; align-items: center; column-gap: 16px; row-gap: 2px; margin: 0; color: inherit; text-decoration: none; transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.spk-kennzahl:hover { border-color: var(--farbe-akzent); }
.spk-kennzahl-icon { grid-area: icon; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); color: var(--farbe-akzent); }
.spk-kennzahl-icon .icon { width: 24px; height: 24px; }
.spk-kennzahl-wert { grid-area: wert; font-size: 2rem; font-weight: 700; line-height: 1; color: var(--farbe-kopfleiste); }
.spk-kennzahl .text-leise { grid-area: text; font-size: 0.9rem; }
.spk-gruppe > summary { gap: 12px; }
.spk-gruppe-text { margin: 4px 0 0; font-size: 0.9rem; }
.spk-felder { display: grid; gap: 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spk-felder > .feld-breit { grid-column: 1 / -1; }
.spk-felder-1 { grid-template-columns: minmax(0, 1fr); }
.spk-felder-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 800px) { .spk-felder, .spk-felder-4 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 801px) { .spk-feld-name { grid-column: 1 / span 1; } }
/* Eingabe mit Einheit rechts (Preise in Euro) */
.feld-mit-einheit { display: flex; align-items: stretch; }
.feld-mit-einheit input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; text-align: right; }
.feld-einheit { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--farbe-rand); border-left: 0; border-radius: 0 var(--radius-klein) var(--radius-klein) 0; background: var(--farbe-hintergrund-leise, #f1f4f7); color: var(--farbe-text-leise); font-weight: 600; }
/* Karte: Baum links, Einträge rechts */
.spk-karte { display: grid; gap: 16px; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .spk-karte { grid-template-columns: minmax(0, 1fr); } }
.spk-baum { margin: 0; }
.spk-baum .karte-kopf { display: flex; align-items: center; gap: 6px; }
.spk-baum-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.spk-baum-zeile a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.spk-baum-zeile a:hover { background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, 0.04)); }
.spk-baum-zeile.ist-aktiv a { background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); font-weight: 700; }
.spk-baum-zeile.ebene-2 a { padding-left: 26px; }
.spk-baum-zeile.ist-versteckt .spk-baum-name { opacity: 0.6; }
.spk-baum-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spk-baum-zahl { flex: none; font-size: 0.8rem; color: var(--farbe-text-leise); background: color-mix(in srgb, var(--farbe-text-leise) 12%, transparent); border-radius: 999px; padding: 1px 8px; }
.spk-baum-icon { flex: none; color: var(--farbe-text-leise); display: grid; }
.spk-neu-kategorie { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.spk-neu-kategorie input { flex: 1 1 180px; min-width: 0; }
.spk-neu-unter { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--farbe-rand); }
.spk-eintraege { display: grid; gap: 16px; min-width: 0; }
.spk-eintraege .karte { margin: 0; }
.spk-kategorie-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.spk-kategorie-titel { display: flex; align-items: center; gap: 14px; min-width: 0; }
.spk-kategorie-bild { width: 64px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; }
.spk-kategorie-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spk-kategorie-aktionen form { margin: 0; display: inline-flex; }
.spk-kategorie-info { margin: 6px 0 0; }
.spk-pfad { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 1.15rem; }
.spk-pfad a { color: var(--farbe-text-leise); text-decoration: none; }
.spk-pfad span { color: var(--farbe-text-leise); }
.spk-pfad .abzeichen { font-size: 0.75rem; }
.spk-tabelle .spk-rechts { text-align: right; white-space: nowrap; }
.spk-tabelle th[scope="row"] { font-weight: 600; }
.spk-tabelle th[scope="row"] a { color: inherit; }
.spk-griff-spalte { width: 28px; padding-right: 0; }
.spk-griff { display: inline-grid; place-items: center; width: 24px; height: 28px; border-radius: 8px; color: var(--farbe-text-leise); cursor: grab; touch-action: none; transition: background var(--uebergang), color var(--uebergang); }
.spk-griff:hover { background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); color: var(--farbe-akzent); }
.spk-griff:active { cursor: grabbing; }
/* Griff gedrückt: die ganze Zeile hebt sich ab und zeigt, dass sie jetzt gezogen werden kann */
.spk-tabelle tr.ist-gegriffen > td, .spk-tabelle tr.ist-gegriffen > th { background: color-mix(in srgb, var(--farbe-akzent) 8%, transparent); }
.spk-tabelle tr.ist-gegriffen, .spk-allergen-zeile.ist-gegriffen { cursor: grabbing; }
.spk-allergen-zeile.ist-gegriffen { background: color-mix(in srgb, var(--farbe-akzent) 8%, transparent); border-radius: 10px; }
.spk-nr-spalte, .spk-nr { width: 56px; color: var(--farbe-text-leise); font-variant-numeric: tabular-nums; }
.spk-menge { margin-left: 8px; font-weight: 400; font-size: 0.85rem; }
.spk-text { display: block; font-weight: 400; font-size: 0.85rem; margin-top: 2px; }
.spk-tabelle tr.ist-versteckt th, .spk-tabelle tr.ist-versteckt td:not(:last-child) { opacity: 0.55; }
.spk-tabelle tr.ist-ziehen { opacity: 0.4; }
.spk-tabelle tr.ist-ziel-oben > td, .spk-tabelle tr.ist-ziel-oben > th { box-shadow: inset 0 3px 0 var(--farbe-akzent); }
.spk-tabelle tr.ist-ziel-unten > td, .spk-tabelle tr.ist-ziel-unten > th { box-shadow: inset 0 -3px 0 var(--farbe-akzent); }
.spk-allergene { white-space: nowrap; }
.spk-chip { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin: 0 3px 2px 0; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); color: var(--farbe-akzent); }
.spk-status { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.spk-status .spk-schalter { min-height: 0; }
.js .spk-status-knopf { display: none; }
.spk-pfeile { display: inline-flex; margin: 0; }
/* Stil- und Spaltenwahl in den Einstellungen: zweite Überschrift in derselben Karte, zwei Spaltenkacheln links */
.spk-spaltenkopf { margin: 26px 0 8px; padding-top: 22px; border-top: 1px solid var(--farbe-rand); }
.spk-spaltenkopf .karte-titel { font-size: 1.05rem; }
.spk-spaltenwahl { grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); }
/* Eintrag im Overlay der Karte (iframe): eigene Überschrift statt des ausgeblendeten Seitenkopfs */
.spk-overlay-titel { margin: 0 0 16px; font-size: 1.35rem; }
.spk-overlay-titel .text-leise { font-weight: 400; font-size: 1rem; }
/* Editor: Hauptspalte und Seitenspalte */
.spk-editor { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1100px) { .spk-editor { grid-template-columns: minmax(0, 1fr); } }
.spk-editor-haupt, .spk-editor-seite { display: grid; gap: 16px; min-width: 0; }
.spk-editor .karte { margin: 0; }
.spk-editor .karte-kopf { display: flex; align-items: center; gap: 6px; }
.spk-bildwahl-vorschau:empty { display: none; }
.spk-bildwahl-vorschau img { max-width: 100%; max-height: 160px; border-radius: 10px; display: block; margin-bottom: 8px; }
.spk-regler { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.spk-regler input[type="range"] { width: 100%; accent-color: var(--farbe-akzent); }
.spk-regler output { font-variant-numeric: tabular-nums; text-align: right; color: var(--farbe-text-leise); }
.spk-allergen-wahl { display: grid; gap: 6px; }
.spk-allergen { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.spk-allergen:hover { background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, 0.04)); }
.spk-allergen input { margin: 0; }
.spk-allergen:has(input:checked) { background: color-mix(in srgb, var(--farbe-akzent) 10%, transparent); }
/* Wochenkarte */
.spk-wochen { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 12px; scrollbar-width: thin; }
.spk-woche { position: relative; flex: none; display: grid; gap: 2px; min-width: 92px; padding: 8px 12px; border: 1px solid var(--farbe-rand); border-radius: 12px; background: var(--farbe-karte, #fff); color: inherit; text-decoration: none; transition: border-color var(--uebergang), background var(--uebergang); }
.spk-woche:hover { border-color: var(--farbe-akzent); }
.spk-woche.ist-aktiv { background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); border-color: var(--farbe-akzent); }
.spk-woche-kw { font-weight: 700; }
.spk-woche-datum { font-size: 0.8rem; color: var(--farbe-text-leise); white-space: nowrap; }
.spk-woche-punkt { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--farbe-erfolg, #2e9d4a); }
.spk-wochen-art { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 16px; }
.spk-tage { display: grid; gap: 10px; }
.spk-tag { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 20px; padding: 14px 0; border-top: 1px solid var(--farbe-rand); }
.spk-tag:first-child { border-top: 0; padding-top: 4px; }
.spk-tag-kopf { display: grid; gap: 2px; align-content: start; padding-top: 4px; }
.spk-tag-kopf strong { font-size: 1.05rem; }
.spk-tag.ist-gefuellt .spk-tag-kopf strong::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--farbe-erfolg, #2e9d4a); vertical-align: middle; }
.spk-tag-felder { display: grid; gap: 10px 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) 130px; align-items: start; }
.spk-tag-felder > .feld-breit { grid-column: 1 / -1; }
@media (max-width: 900px) { .spk-tag { grid-template-columns: minmax(0, 1fr); } .spk-tag-felder { grid-template-columns: minmax(0, 1fr); } }
/* Allergene: Zeilen */
.spk-allergen-zeilen { display: grid; gap: 8px; }
.spk-allergen-zeile { display: grid; grid-template-columns: 24px 90px minmax(0, 1fr) 100px 36px; gap: 10px; align-items: center; }
.spk-allergen-kopf > span:nth-child(4) { text-align: center; }
.spk-allergen-zeile .spk-schalter { min-height: 0; justify-self: center; }
.spk-allergen-zeile.ist-fehler input[type="text"] { border-color: var(--farbe-gefahr, #b3261e); }
.spk-allergen-fehler { grid-column: 2 / -1; color: var(--farbe-gefahr, #b3261e); }
.spk-allergen-kopf { font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 600; }
.spk-allergen-zeile.ist-ziehen { opacity: 0.4; }
.spk-allergen-zeile.ist-ziel-oben { box-shadow: 0 -3px 0 var(--farbe-akzent); }
.spk-allergen-zeile.ist-ziel-unten { box-shadow: 0 3px 0 var(--farbe-akzent); }
.spk-symbol { text-transform: uppercase; text-align: center; font-weight: 700; }
.spk-allergen-neu { margin-top: 12px; }
@media (max-width: 700px) { .spk-allergen-zeile { grid-template-columns: 24px 70px minmax(0, 1fr) 50px 36px; gap: 6px; } .spk-allergen-kopf { display: none; } }

/* Blog-Addon (PLAN.md E94): Listen der Kategorien und Schlagworte */
.blg-zeilen { display: grid; gap: 8px; margin-top: 14px; }
.blg-zeile { display: grid; gap: 10px; align-items: center; }
.blg-zeilen-kategorie .blg-zeile { grid-template-columns: 24px minmax(0, 1fr) 80px 36px; }
.blg-zeilen-schlagwort .blg-zeile { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr) 80px 36px; }
.blg-zeile-kopf { font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 600; }
.blg-kopf-hilfe { display: inline-flex; align-items: center; gap: 6px; }
.blg-zahl { text-align: center; font-size: 0.9rem; }
.blg-zeile-kopf > span:nth-last-child(2) { text-align: center; }
.blg-zeile.ist-fehler input[type="text"] { border-color: var(--farbe-gefahr, #b3261e); }
.blg-zeile-fehler { grid-column: 1 / -1; color: var(--farbe-gefahr, #b3261e); }
.blg-zeile.ist-gegriffen { cursor: grabbing; background: color-mix(in srgb, var(--farbe-akzent) 8%, transparent); border-radius: 10px; }
.blg-zeile.ist-ziehen { opacity: 0.4; }
.blg-zeile.ist-ziel-oben { box-shadow: 0 -3px 0 var(--farbe-akzent); }
.blg-zeile.ist-ziel-unten { box-shadow: 0 3px 0 var(--farbe-akzent); }
.blg-neu { margin-top: 12px; }
/* Blog: Beitragsübersicht und Beitrag */
.blg-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 14px; }
.blg-filter select { width: auto; min-width: 170px; }
.blg-filter-suche { position: relative; flex: 1 1 260px; max-width: 420px; }
.blg-filter-suche .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--farbe-text-leise); pointer-events: none; }
.blg-filter-suche input { width: 100%; padding-left: 36px; }
.blg-zustaende { margin-bottom: 16px; }
.blg-zahl-klein { margin-left: 4px; font-size: 0.8rem; opacity: 0.7; }
.blg-tabelle th a { vertical-align: middle; }
.blg-vorschau { width: 56px; height: 40px; }
.blg-pin { color: var(--farbe-warnung, #e0a100); margin-left: 4px; vertical-align: middle; }
.blg-pin .icon { fill: currentColor; }
.blg-zusatz { display: block; margin: 2px 0 0; font-weight: 400; font-size: 0.85rem; }
.blg-tabelle td .abzeichen { margin: 0 4px 4px 0; }
.blg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.blg-chip { cursor: pointer; }
.blg-chip input { position: absolute; opacity: 0; pointer-events: none; }
.blg-chip span { display: inline-block; padding: 6px 14px; border: 1px solid var(--farbe-rand); border-radius: 999px; background: var(--farbe-karte, #fff); transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang); }
.blg-chip:hover span { border-color: var(--farbe-akzent); }
.blg-chip input:checked + span { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: #fff; }
.blg-chip input:focus-visible + span { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
@media (max-width: 800px) {
    .blg-zeilen-schlagwort .blg-zeile { grid-template-columns: minmax(0, 1fr) 36px; }
    .blg-zeilen-schlagwort .blg-zeile > .blg-zahl { display: none; }
    .blg-zeilen-schlagwort .blg-zeile > input[type="text"], .blg-zeilen-schlagwort .blg-zeile > select { grid-column: 1 / -1; }
    .blg-zeilen-schlagwort .blg-zeile > button, .blg-zeilen-schlagwort .blg-zeile > span:last-child { grid-column: 2; grid-row: 1; }
    .blg-zeilen-schlagwort .blg-zeile > input[name$="[name]"] { grid-column: 1; grid-row: 1; }
    .blg-zeilen-schlagwort .blg-zeile-kopf { display: none; }
}

/* ---------- Bild mit Infopunkten (Editor, modules/hotspots, public/assets/js/hotspots-admin.js) ---------- */
/* Das Bild nutzt die Klassen der Website (hsp-…, mod_hotspots.css); hier nur der Rahmen des Editors */
.hsa-koerper { --spalte-links: clamp(250px, 16vw, 320px); }
.hsa-bezeichnung { flex: none; margin: 12px 12px 0 12px; }
.hsa-palette-kopf { flex: none; display: flex; align-items: center; gap: 6px; padding: 16px 14px 6px 14px; }
.hsa-palette-titel { margin: 0; font-size: 1rem; }
.hsa-liste-platz { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 10px 14px 10px; }
.hsa-verwendung { flex: none; max-height: 30%; overflow: auto; padding: 8px 12px 12px 12px; border-top: 1px solid var(--farbe-rand); }
.hsa-liste-leer { margin: 0; padding: 4px 4px; font-size: 0.88rem; }
.hsa-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.hsa-liste > li { min-width: 0; }
.hsa-eintrag {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 6px; text-align: left; border: 0;
    border-radius: var(--radius-klein); background: transparent; color: var(--farbe-text); cursor: pointer; font: inherit;
}
.hsa-eintrag:hover { background: var(--farbe-primaer-hell); }
.hsa-eintrag.ist-aktiv { background: var(--farbe-primaer-hell); font-weight: 600; box-shadow: inset 3px 0 0 var(--farbe-primaer); }
.hsa-nr {
    flex: none; box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--farbe-primaer); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.hsa-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mitte: Leiste und Bild; das Bild kann höher sein als der Platz, die Mitte scrollt */
.hsa-mitte { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 0 var(--seitenrand) var(--seitenrand); overflow: auto; }
.hsa-ansicht { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.hsa-leiste { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 40px; }
.hsa-hinweis { font-size: 0.88rem; }
.hsa-flaeche { align-self: flex-start; max-width: 100%; margin: 0; background: #e9edef; border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: 10px; }
.hsa-flaeche .hsp-buehne { touch-action: none; user-select: none; -webkit-user-select: none; }
.hsa-flaeche .hsp-bild { -webkit-user-drag: none; }
.hsa-flaeche.ist-setzen .hsp-buehne { cursor: crosshair; }
.hsa-flaeche .hsp-punkt { cursor: grab; }
.hsa-flaeche.ist-ziehen .hsp-punkt { cursor: grabbing; }
.hsa-flaeche .hsp-punkt::after { display: none; }
.hsa-flaeche .hsp-stelle.ist-gewaehlt .hsp-punkt { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--farbe-primaer); transform: scale(1.15); }
.hsa-flaeche .hsp-info { pointer-events: none; }
.hsa-leer {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px; padding: 24px;
    border: 2px dashed var(--farbe-rand); border-radius: var(--radius); text-align: center; color: var(--farbe-text-leise);
}
.hsa-leer-icon { width: 40px; height: 40px; }
.hsa-leer-text { margin: 0; max-width: 32ch; }

/* Rechts: Eigenschaften */
.hsa-rechts { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
.hsa-rechts-karte { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; padding: 14px; }
.hsa-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hsa-titel { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.hsa-gruppe { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.hsa-gruppe-titel { margin: 0; font-size: 0.9rem; color: var(--farbe-text-leise); text-transform: none; }
.hsa-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hsa-zahl-zeile { display: flex; align-items: center; gap: 6px; }
.hsa-zahl-zeile .hsa-zahl { width: 100px; min-width: 0; }
.hsa-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.hsa-bild-zeile { display: flex; align-items: center; gap: 12px; }
.hsa-bild-klein { flex: none; display: block; width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-klein); background: #e8ecee; }
.hsa-bild-name { display: grid; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.hsa-schalter { display: flex; align-items: center; gap: 6px; }
.hsa-schalter-zeile { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.hsa-schalter-zeile input[type="checkbox"] { width: auto; margin: 0; }
.feld .hsa-farbe { width: 64px; height: 36px; padding: 2px; }

/* ---------- Tabellen (Template-Einstellungen, PLAN-Archiv 3.78): Beispiele der Tabellenstile mit dem echten Stylesheet (assets/css/tabellen.css) ---------- */
.tbl-hinweis { margin: 0 0 12px 0; font-size: 0.88rem; }
.tbl-beispiele { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tbl-beispiel { margin: 0; padding: 12px; background: #fff; border: 1px solid var(--farbe-rand); border-radius: var(--radius); font-size: 0.82rem; }
.tbl-beispiel table.cm-tabelle { margin: 0 0 8px 0; }
.tbl-beispiel figcaption { display: grid; gap: 2px; font-size: 0.8rem; }
/* ---------- Neuigkeiten: Vorschau der modernen Darstellung (PLAN-Archiv 3.79) ---------- */
.nwa-vorschau-rahmen { display: block; width: 100%; height: 560px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein); background: #fff; }
.nwa-vorschau-hinweis { margin: 0 0 10px; }
.nwa-wahl { display: inline-flex; padding: 3px; gap: 2px; background: var(--farbe-flaeche-leise); border-radius: 999px; }
.nwa-wahl label { position: relative; cursor: pointer; }
.nwa-wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nwa-wahl span { display: block; padding: 5px 14px; font-size: 0.88rem; font-weight: 600; color: var(--farbe-text-leise); border-radius: 999px; transition: background var(--uebergang), color var(--uebergang); }
.nwa-wahl input:checked + span { color: var(--farbe-text); background: var(--farbe-flaeche); box-shadow: var(--schatten-karte); }
.nwa-wahl input:focus-visible + span { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
/* Textbox mit dem echten Inhalt im Bild (slideshow.js füllt sie aus Überschrift und Text; Farben und Abstand aus den Template-Einstellungen,
   die Größen skalieren mit der Breite des Bildrahmens – die Box der Website ist etwa 1300 px breit, dieser Rahmen nur ein Bruchteil) */
.ss-rahmen { container-type: inline-size; }
.ss-box-flaeche { position: absolute; inset: 0; display: none; padding: 3cqw; box-sizing: border-box; pointer-events: none; }
.ss-element.hat-textbox .ss-box-flaeche { display: grid; }
.ss-box-flaeche.ss-p1, .ss-box-flaeche.ss-p2, .ss-box-flaeche.ss-p3 { align-items: start; }
.ss-box-flaeche.ss-p4, .ss-box-flaeche.ss-p5, .ss-box-flaeche.ss-p6 { align-items: center; }
.ss-box-flaeche.ss-p7, .ss-box-flaeche.ss-p8, .ss-box-flaeche.ss-p9 { align-items: end; }
.ss-box-flaeche.ss-p1, .ss-box-flaeche.ss-p4, .ss-box-flaeche.ss-p7 { justify-items: start; }
.ss-box-flaeche.ss-p2, .ss-box-flaeche.ss-p5, .ss-box-flaeche.ss-p8 { justify-items: center; }
.ss-box-flaeche.ss-p3, .ss-box-flaeche.ss-p6, .ss-box-flaeche.ss-p9 { justify-items: end; }
.ss-box {
    display: block; box-sizing: border-box; max-width: 62%; max-height: 100%; overflow: hidden; text-align: left;
    padding: max(5px, calc(var(--ss-box-abstand, 1.7) * 0.9cqw));
    color: var(--ss-box-text, #d5d5d5); background: var(--ss-box-bg, rgba(54, 54, 52, 0.8));
    font-size: max(9px, calc(1.9cqw * var(--ss-box-tx, 1))); font-weight: var(--ss-box-tx-gewicht, 400); line-height: 1.35; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.ss-box[hidden], .ss-box-ueberschrift[hidden], .ss-box-text[hidden], .ss-box-mehr[hidden] { display: none; }
.ss-box-ueberschrift { display: block; margin: 0 0 0.35em; color: var(--ss-box-text, #fff); font-size: max(12px, calc(3.2cqw * var(--ss-box-ue, 1))); font-weight: var(--ss-box-ue-gewicht, 400); line-height: 1.2; overflow-wrap: anywhere; }
.ss-box-text { display: block; overflow-wrap: anywhere; }
.ss-box-text :where(p, ul, ol, h1, h2, h3, h4, h5, h6, div) { margin: 0 0 0.45em; padding: 0; font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; }
.ss-box-text :where(ul, ol) { padding-left: 1.2em; }
.ss-box-text :where(strong, b) { font-weight: 700; }
.ss-box-text :where(a) { color: var(--ss-box-link, currentColor); }
.ss-box-text img { max-width: 100%; height: auto; }
.ss-box-text > :last-child { margin-bottom: 0; }
.ss-box-mehr { display: inline-block; margin-top: 0.5em; color: var(--ss-box-link, #fff); text-decoration: underline; font-weight: 600; }
/* Die Wahl der Lage zeigt jetzt die Box selbst; die Markierung „Text“ bleibt nur ohne Inhalt */
.ss-rahmen.hat-box-vorschau .ss-pos input:checked + .ss-pos-feld .ss-pos-marke { display: none; }
.ss-rahmen.hat-box-vorschau .ss-pos input:checked + .ss-pos-feld { border-color: rgba(255, 255, 255, 0.55); }
/* Dummy: Schrift der Slideshow-Textbox (Größe in px der Website, hier auf etwa 85 % verkleinert; Stärke 0 = Vorgabe) */
.dummy:not([data-o-slideshow_headline_size="0"]) .dm-box-titel { font-size: calc(var(--d-slideshow-headline-size, 21px) * 0.85); line-height: 1.2; }
.dummy:not([data-o-slideshow_text_size="0"]) .dm-box p, .dummy:not([data-o-slideshow_text_size="0"]) .dm-box-link { font-size: calc(var(--d-slideshow-text-size, 13px) * 0.85); }
.dummy[data-o-slideshow_headline_weight="300"] .dm-box-titel { font-weight: 300; }
.dummy[data-o-slideshow_text_weight="300"] .dm-box p, .dummy[data-o-slideshow_text_weight="300"] .dm-box-link { font-weight: 300; }
.dummy[data-o-slideshow_headline_weight="400"] .dm-box-titel { font-weight: 400; }
.dummy[data-o-slideshow_text_weight="400"] .dm-box p, .dummy[data-o-slideshow_text_weight="400"] .dm-box-link { font-weight: 400; }
.dummy[data-o-slideshow_headline_weight="500"] .dm-box-titel { font-weight: 500; }
.dummy[data-o-slideshow_text_weight="500"] .dm-box p, .dummy[data-o-slideshow_text_weight="500"] .dm-box-link { font-weight: 500; }
.dummy[data-o-slideshow_headline_weight="600"] .dm-box-titel { font-weight: 600; }
.dummy[data-o-slideshow_text_weight="600"] .dm-box p, .dummy[data-o-slideshow_text_weight="600"] .dm-box-link { font-weight: 600; }
.dummy[data-o-slideshow_headline_weight="700"] .dm-box-titel { font-weight: 700; }
.dummy[data-o-slideshow_text_weight="700"] .dm-box p, .dummy[data-o-slideshow_text_weight="700"] .dm-box-link { font-weight: 700; }
.dummy[data-o-slideshow_headline_weight="800"] .dm-box-titel { font-weight: 800; }
.dummy[data-o-slideshow_text_weight="800"] .dm-box p, .dummy[data-o-slideshow_text_weight="800"] .dm-box-link { font-weight: 800; }

/* Übergänge (Wellen, Schrägen …) im Abschnittsdialog und in der Werkzeugspalte des Onpage-Editors (PLAN-Archiv 3.84) */
.dialog-uebergaenge { margin-top: 18px; }
.uebergaenge { border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); }
.uebergaenge-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.uebergaenge-kopf::-webkit-details-marker { display: none; }
.uebergaenge-stand { font-size: 0.85rem; }
.uebergaenge-inhalt { display: grid; gap: 16px; padding: 4px 14px 14px; }
.uebergaenge-hinweis { margin: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--farbe-flaeche-leise); }
.uebergang-reihe { display: grid; gap: 8px; min-width: 0; }
.uebergang-kacheln { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.uebergang-kachel { display: grid; gap: 4px; padding: 6px; font: inherit; font-size: 0.78rem; text-align: center; cursor: pointer; color: var(--farbe-text-leise); background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius); }
.uebergang-kachel:hover, .uebergang-kachel:focus-visible { border-color: var(--farbe-primaer); color: var(--farbe-primaer); }
.uebergang-kachel.ist-aktiv { border-color: var(--farbe-primaer); box-shadow: 0 0 0 1px var(--farbe-primaer) inset; color: var(--farbe-primaer); background: var(--farbe-flaeche-leise); }
.uebergang-vorschau { display: block; width: 100%; height: 34px; border-radius: 3px; background: var(--farbe-flaeche-leise); fill: currentColor; color: var(--farbe-primaer); }
.uebergang-kachel.ist-aktiv .uebergang-vorschau { background: var(--farbe-flaeche); }
.uebergang-reihe[data-ue-kante="unten"] svg.uebergang-vorschau { transform: scaleY(-1); }
.uebergang-keine { position: relative; }
.uebergang-keine::after { content: ""; position: absolute; inset: 50% 18% auto; border-top: 2px solid currentColor; transform: rotate(-12deg); opacity: 0.5; }
.uebergang-name { line-height: 1.2; overflow-wrap: anywhere; }
.uebergang-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.uebergang-hoehe { display: inline-flex; align-items: center; gap: 8px; }
.uebergang-hoehe select { width: auto; }

/* ---------- Stichwortverzeichnis (Editor, modules/glossar, public/assets/js/glossar-admin.js) ---------- */
.gl-felder { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.gl-felder-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gl-felder [hidden] { display: none; }
.gl-admin { display: grid; gap: 14px; min-width: 0; }
.gl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.gl-suche { position: relative; flex: 1 1 240px; max-width: 380px; }
.gl-suche-icon { position: absolute; left: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; color: var(--farbe-text-leise); pointer-events: none; }
.gl-suche-icon .icon { width: 18px; height: 18px; }
.gl-suche-feld { width: 100%; padding-left: 38px; }
.gl-summe { font-size: 0.9rem; }
.gl-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.gl-mehrere { display: grid; gap: 8px; padding: 14px 16px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); }
.gl-mehrere[hidden] { display: none; }
.gl-mehrere-hinweis { margin: 0; font-size: 0.9rem; }
.gl-kopfzeile, .gl-zeile { display: grid; gap: 12px; grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
.gl-kopfzeile { display: none; font-size: 0.82rem; font-weight: 600; color: var(--farbe-text-leise); padding: 0 8px; }
.gl-kopfzeile[hidden] { display: none; }
.gl-liste { display: grid; gap: 10px; }
.gl-zeile {
    padding: 10px 8px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross);
}
.gl-zeile[hidden] { display: none; }
.gl-buchstabe {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-weight: 700; font-size: 0.95rem;
    background: var(--farbe-flaeche-leise); color: var(--farbe-primaer-dunkel);
}
.gl-begriff-spalte, .gl-text-spalte { display: grid; gap: 6px; min-width: 0; grid-column: 2; }
.gl-begriff { font-weight: 600; }
.gl-text { display: block; width: 100%; min-height: 42px; resize: vertical; overflow: hidden; }
.gl-original { padding: 6px 10px; font-size: 0.88rem; color: var(--farbe-text-leise); background: var(--farbe-flaeche-leise); border-radius: var(--radius-klein); white-space: pre-wrap; }
.gl-original[hidden] { display: none; }
.gl-weg { grid-column: 2; justify-self: end; width: 36px; height: 36px; margin-top: -4px; }
.gl-leer { margin: 0; padding: 20px; text-align: center; color: var(--farbe-text-leise); }
.gl-leer[hidden] { display: none; }
.gl-format code { padding: 1px 5px; background: var(--farbe-flaeche-leise); border-radius: 4px; }
@media (min-width: 800px) {
    .gl-kopfzeile { display: grid; grid-template-columns: 32px minmax(160px, 30%) minmax(0, 1fr) 36px; }
    .gl-zeile { grid-template-columns: 32px minmax(160px, 30%) minmax(0, 1fr) 36px; }
    .gl-begriff-spalte, .gl-text-spalte { grid-column: auto; }
    .gl-weg { grid-column: auto; margin-top: 0; justify-self: auto; }
    .gl-kopfzeile > span:nth-child(2) { grid-column: 2; }
}

/* ---------- Linkliste (Editor, modules/linkliste, public/assets/js/linkliste-admin.js) ---------- */
.ll-admin { display: grid; gap: 14px; min-width: 0; }
.ll-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ll-summe { font-size: 0.9rem; }
.ll-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.ll-pruefstand { margin: 0; padding: 8px 12px; font-size: 0.92rem; background: var(--farbe-flaeche-leise); border-radius: var(--radius-klein); }
.ll-pruefstand[hidden] { display: none; }
.ll-mehrere { display: grid; gap: 8px; padding: 14px 16px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); }
.ll-mehrere[hidden] { display: none; }
.ll-mehrere-hinweis { margin: 0; font-size: 0.9rem; }
.ll-mehrere-ziel { display: flex; align-items: center; gap: 10px; }
.ll-gruppen { display: grid; gap: 16px; }
.ll-gruppe { display: grid; gap: 12px; padding: 14px 16px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); }
.ll-gruppe-kopf { display: flex; align-items: flex-start; gap: 10px; }
.ll-gruppe-name { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; }
.ll-gruppenname { font-weight: 700; }
.ll-gruppe-aktionen { display: flex; align-items: center; gap: 2px; flex: none; }
.ll-gruppe-aktionen .knopf-icon { width: 38px; height: 38px; }
.ll-links { display: grid; gap: 10px; }
.ll-leer { margin: 0; padding: 6px 2px; font-size: 0.9rem; }
.ll-link-neu { justify-self: start; }
.ll-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 10px 12px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.ll-link-felder { display: grid; gap: 8px 10px; grid-template-columns: repeat(12, minmax(0, 1fr)); min-width: 0; }
.ll-feld { display: grid; gap: 6px; min-width: 0; grid-column: span 12; }
.ll-feld-url, .ll-feld-logo { display: flex; align-items: center; gap: 6px; }
.ll-url { flex: 1 1 auto; min-width: 0; font-size: 0.92rem; }
.ll-url-intern { color: var(--farbe-primaer-dunkel); }
.ll-logo { flex: none; display: grid; place-items: center; width: 46px; height: 34px; overflow: hidden; background: #fff; border: 1px solid var(--farbe-rand); border-radius: 6px; }
.ll-logo[hidden] { display: none; }
.ll-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ll-logo-weg { width: 32px; height: 32px; }
.ll-logo-weg[hidden] { display: none; }
.ll-feld-gruppe select { width: 100%; }
.ll-link-aktionen { display: flex; align-items: flex-start; gap: 0; }
.ll-link-aktionen .knopf-icon { width: 36px; height: 36px; }
.ll-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 10px; font-size: 0.88rem; border-radius: var(--radius-klein); }
.ll-status[hidden] { display: none; }
.ll-status-ok { background: var(--farbe-erfolg-hell); color: var(--farbe-text); }
.ll-status-weiter, .ll-status-unklar { background: var(--farbe-warnung-hell); color: var(--farbe-text); }
.ll-status-fehler, .ll-status-offline { background: var(--farbe-gefahr-hell); color: var(--farbe-gefahr); }
.ll-status-uebersprungen { background: var(--farbe-flaeche); color: var(--farbe-text-leise); }
.ll-seitenwahl { width: min(520px, calc(100vw - 24px)); }
.ll-seitenwahl-liste { display: grid; max-height: 60vh; overflow-y: auto; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.ll-seite-eintrag { padding: 9px 12px; text-align: left; font: inherit; color: var(--farbe-text); background: transparent; border: 0; border-bottom: 1px solid var(--farbe-rand); cursor: pointer; }
.ll-seite-eintrag:last-child { border-bottom: 0; }
.ll-seite-eintrag:hover { background: var(--farbe-flaeche-leise); }
@media (min-width: 900px) {
    .ll-feld-name { grid-column: span 4; }
    .ll-feld-url { grid-column: span 8; }
    .ll-feld-beschreibung { grid-column: span 6; }
    .ll-feld-logo { grid-column: span 3; }
    .ll-feld-gruppe { grid-column: span 3; }
}

/* ---------- Druckvorlagen-Editor (Addon „Druckvorlagen“, PLAN.md E96): druck-kern.js / druck-felder.js / druck-editor.js ---------- */
.dk-mitte { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.dk-mitte > .hinweis { margin: 0 var(--seitenrand) 12px; flex: none; }
.dk-unsichtbar { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.dk-pdf-formular { display: none; }

/* Werkzeugleiste über der Fläche */
.dk-leiste { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px var(--seitenrand); background: var(--farbe-flaeche); border-top: 1px solid var(--farbe-rand); border-bottom: 1px solid var(--farbe-rand); }
.dk-leistengruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dk-leistengruppe + .dk-leistengruppe { padding-left: 14px; border-left: 1px solid var(--farbe-rand); }
.dk-iconknopf { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-klein, 6px); background: transparent; cursor: pointer; color: inherit; }
.dk-iconknopf:hover:not(:disabled) { background: var(--farbe-primaer-hell); }
.dk-iconknopf.ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
.dk-iconknopf:disabled { opacity: 0.38; cursor: default; }
.dk-zoom { min-width: 64px; justify-content: center; }

/* Bühne mit Seite und Linealen */
.dk-buehne { flex: 1 1 auto; min-height: 0; overflow: auto; background: #e6e9ee; padding: 12px; position: relative; display: flex; }
.dk-buehne[data-zoom="fit"] { overflow: hidden; }
/* Schmale Mitte: Elemente nur als Symbole (der Name steht im Tooltip), damit die Leiste einzeilig bleibt */
@container (max-width: 1000px) {
    .dk-anlegen .knopf span { display: none; }
    .dk-anlegen .knopf { padding-inline: 10px; }
}
.dk-flaeche { display: grid; grid-template-columns: 18px var(--dk-breite, 300px); grid-template-rows: 18px var(--dk-hoehe, 300px); width: max-content; margin: auto; flex: none; }
.dk-ecke { background: #f6f7f9; }
.dk-lineal { display: block; background: #f6f7f9; cursor: crosshair; touch-action: none; }
.dk-lineal-h { grid-column: 2; grid-row: 1; }
.dk-lineal-v { grid-column: 1; grid-row: 2; }
.dk-seite { grid-column: 2; grid-row: 2; position: relative; background: #fff; box-shadow: 0 2px 14px rgba(20, 30, 50, 0.22); touch-action: none; user-select: none; }
.dk-ebene-flaeche { position: absolute; inset: 0; overflow: hidden; z-index: 0; isolation: isolate; }
.dk-hilfen, .dk-ueber { position: absolute; inset: 0; pointer-events: none; }
.dk-hilfen { z-index: 1; }
.dk-ueber { z-index: 2; }
.dk-rastercanvas { position: absolute; left: 0; top: 0; pointer-events: none; }
.dk-beschnitt { position: absolute; inset: 0; box-sizing: border-box; border-style: solid; border-color: rgba(220, 38, 38, 0.13); pointer-events: none; }
.dk-trim { position: absolute; box-sizing: border-box; border: 1px dashed rgba(0, 0, 0, 0.42); pointer-events: none; }
.dk-sicher { position: absolute; box-sizing: border-box; border: 1px dashed rgba(22, 163, 74, 0.5); pointer-events: none; }
.dk-hilfslinie { position: absolute; background: #06b6d4; pointer-events: auto; z-index: 3; }
.dk-hilfslinie::before { content: ""; position: absolute; }
.dk-hilfslinie-x { top: 0; bottom: 0; width: 1px; cursor: ew-resize; }
.dk-hilfslinie-x::before { top: 0; bottom: 0; left: -4px; right: -4px; }
.dk-hilfslinie-y { left: 0; right: 0; height: 1px; cursor: ns-resize; }
.dk-hilfslinie-y::before { left: 0; right: 0; top: -4px; bottom: -4px; }
.dk-schnapp { position: absolute; background: #d946ef; pointer-events: none; z-index: 4; }
.dk-schnapp-x { top: 0; bottom: 0; width: 1px; }
.dk-schnapp-y { left: 0; right: 0; height: 1px; }

/* Elemente */
.dk-el { position: absolute; box-sizing: border-box; cursor: move; user-select: none; touch-action: none; }
.dk-el.ist-versteckt { display: none; }
.dk-el.ist-gesperrt { cursor: default; }
.dk-el:hover:not(.ist-gewaehlt)::after { content: ""; position: absolute; inset: 0; outline: 1px solid rgba(37, 99, 235, 0.55); pointer-events: none; }
.dk-el.dk-ueberlauf { box-shadow: 0 2px 0 0 #dc2626; }
.dk-text { overflow-wrap: break-word; word-break: normal; min-height: 1em; }
.dk-text p { margin: 0 0 var(--dk-absatz, 0); }
.dk-text ul, .dk-text ol { margin: 0 0 var(--dk-absatz, 0); padding-left: var(--dk-einzug, 1.2em); }
.dk-text li { margin: 0; }
.dk-text b, .dk-text strong { font-weight: 700; }
.dk-text.ohne-fett b, .dk-text.ohne-fett strong { font-weight: 400; }
.dk-text.ohne-kursiv i, .dk-text.ohne-kursiv em { font-style: normal; }
.dk-platz { background: rgba(37, 99, 235, 0.14); border-radius: 3px; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25); }
.dk-el.ist-bearbeitung { cursor: text; user-select: text; }
.dk-el.ist-bearbeitung .dk-text { outline: 2px solid var(--farbe-akzent, #2563eb); outline-offset: 1px; background: rgba(255, 255, 255, 0.7); user-select: text; }
.dk-el-image img, .dk-el-qr img { display: block; width: 100%; height: 100%; pointer-events: none; }
.dk-el-image.dk-leer { background: repeating-linear-gradient(45deg, #f3f5f8, #f3f5f8 8px, #eaedf2 8px, #eaedf2 16px); border: 1px dashed #9aa5b1; display: flex; align-items: center; justify-content: center; color: #6b7785; font: 600 12px/1.3 sans-serif; }
.dk-el-image.dk-leer::before { content: "Bild wählen (Doppelklick)"; }
.dk-el-grid canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.dk-el-line { pointer-events: auto; }
.dk-el-line::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }

/* Auswahl und Griffe */
.dk-auswahl { position: absolute; box-sizing: border-box; border: 1.5px solid var(--farbe-akzent, #2563eb); pointer-events: none; z-index: 5; }
.dk-auswahl-mehrere { border-style: dashed; }
.dk-auswahl.ist-gesperrt { border-color: #9aa5b1; border-style: dotted; }
.dk-griff { position: absolute; width: 10px; height: 10px; box-sizing: border-box; background: #fff; border: 1.5px solid var(--farbe-akzent, #2563eb); border-radius: 2px; transform: translate(-50%, -50%); pointer-events: auto; touch-action: none; }
.dk-griff-nw, .dk-griff-se { cursor: nwse-resize; }
.dk-griff-ne, .dk-griff-sw { cursor: nesw-resize; }
.dk-griff-n, .dk-griff-s { cursor: ns-resize; }
.dk-griff-e, .dk-griff-w { cursor: ew-resize; }
.dk-griff-drehen { left: 50%; top: -24px; border-radius: 50%; cursor: grab; width: 12px; height: 12px; }
.dk-griff-drehen::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 12px; background: var(--farbe-akzent, #2563eb); }
.dk-marquee { position: absolute; border: 1px dashed var(--farbe-akzent, #2563eb); background: rgba(37, 99, 235, 0.08); pointer-events: none; z-index: 6; }

/* Linke Spalte: Seiten und Ebenen */
.dk-palette { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dk-palette-teil { display: flex; flex-direction: column; min-height: 0; }
.dk-palette-teil:first-child { flex: 0 1 auto; max-height: 52%; border-bottom: 1px solid var(--farbe-rand); }
.dk-palette-ebenen { flex: 1 1 0; }
.dk-palette-inhalt { overflow-x: hidden; overflow-y: auto; padding: 0 12px 12px; min-height: 0; }
.dk-ebenenliste, .dk-ebene { min-width: 0; }
.dk-seitenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dk-seite-eintrag { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein, 6px); background: #fff; cursor: pointer; text-align: center; font: inherit; }
.dk-seite-eintrag.ist-aktiv { border-color: var(--farbe-primaer); box-shadow: 0 0 0 2px var(--farbe-primaer-hell); }
.dk-mini { display: grid; place-items: center; min-height: 96px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.dk-mini-seite { position: relative; background: #fff; box-shadow: 0 1px 4px rgba(20, 30, 50, 0.25); overflow: hidden; flex: none; }
.dk-mini-seite .dk-el { cursor: default; pointer-events: none; }
.dk-seite-name { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-seiten-knoepfe { margin-top: 8px; }
.dk-ebenenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dk-ebene { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-klein, 6px); cursor: pointer; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.dk-ebene:hover { background: var(--farbe-primaer-hell); }
.dk-ebene.ist-aktiv { background: var(--farbe-primaer-hell); box-shadow: inset 0 0 0 1px var(--farbe-primaer); }
.dk-ebene.ist-versteckt .dk-ebene-name { opacity: 0.5; text-decoration: line-through; }
.dk-ebene.wird-gezogen { opacity: 0.45; }
.dk-ebene.ziel-oben { border-top-color: var(--farbe-akzent, #2563eb); }
.dk-ebene.ziel-unten { border-bottom-color: var(--farbe-akzent, #2563eb); }
.dk-ebene-icon { flex: none; opacity: 0.7; }
.dk-ebene-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.dk-ebene-knopf { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 4px; cursor: pointer; opacity: 0.35; color: inherit; }
.dk-ebene:hover .dk-ebene-knopf, .dk-ebene-knopf.ist-an { opacity: 0.95; }
.dk-ebene-knopf.ist-an { color: var(--farbe-akzent, #2563eb); }
.dk-ebenen-leer { padding: 4px 0; }

/* Rechte Spalte: Eigenschaften */
.dk-rechts { height: 100%; overflow-x: hidden; overflow-y: auto; padding: 12px 16px 96px; display: grid; gap: 10px; align-content: start; }
.dk-kopfband { display: flex; align-items: center; gap: 8px; padding: 4px 0 2px; font-size: 1.05rem; color: var(--farbe-kopfleiste); }
.dk-gruppe { border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); background: #fff; }
.dk-gruppe-kopf { padding: 10px 14px; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.dk-gruppe-kopf::-webkit-details-marker { display: none; }
.dk-gruppe-kopf::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.55; margin-right: 4px; transition: transform 0.2s; }
.dk-gruppe[open] > .dk-gruppe-kopf::after { transform: rotate(-135deg); }
.dk-gruppe-inhalt { display: grid; gap: 12px; padding: 4px 14px 14px; min-width: 0; }
.dk-gruppe-inhalt > *, .dk-raster-2 > * { min-width: 0; }
.dk-platz-feld { display: flex; align-items: center; gap: 8px; }
.dk-platz-feld select { flex: 1 1 auto; min-width: 0; }
.dk-raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.dk-feld-klein input { padding-right: 34px; }
.dk-mit-einheit { position: relative; }
.dk-einheit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; color: var(--farbe-text-leise); pointer-events: none; }
.dk-auto { display: block; padding: 9px 0; color: var(--farbe-text-leise); font-size: 0.9rem; }
.dk-farbzeile { display: flex; align-items: center; gap: 8px; }
.dk-rechts .dk-farbzeile input.dk-farbe { width: 46px; min-width: 46px; height: 38px; padding: 2px; flex: none; border-radius: 6px; cursor: pointer; }
.dk-rechts .dk-farbzeile input.dk-farbtext { flex: 1 1 auto; width: auto; min-width: 0; font-family: ui-monospace, monospace; }
.dk-segment { display: flex; border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein, 6px); overflow: hidden; background: #fff; }
.dk-segment-knopf { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px 6px; border: 0; border-right: 1px solid var(--farbe-rand); background: transparent; font: inherit; font-size: 0.85rem; cursor: pointer; color: inherit; }
.dk-segment-knopf:last-child { border-right: 0; }
.dk-segment-knopf.ist-aktiv { background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); font-weight: 700; }
.dk-knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dk-textfarbe { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.dk-textfarbe:hover { background: var(--farbe-primaer-hell); }
.dk-textfarbe input { position: absolute; inset: auto 4px 3px 4px; width: auto; height: 6px; padding: 0; border: 0; opacity: 1; cursor: pointer; }
.dk-hilfe-neben { margin-left: 6px; }
.dk-bildwahl { display: flex; align-items: center; gap: 12px; }
.dk-bildwahl-vorschau, .dk-bildwahl-leer { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--farbe-rand); background: #f3f5f8; display: inline-flex; align-items: center; justify-content: center; }
.dk-dpi { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #eef0f3; font-size: 0.85rem; }
.dk-dpi.ist-ok { background: #dcfce7; color: #166534; }
.dk-dpi.ist-warnung { background: #fef3c7; color: #92400e; }
.dk-dpi.ist-fehler { background: #fee2e2; color: #991b1b; }
.dk-pruef-kopf { display: flex; align-items: center; gap: 8px; }
.dk-pruef-ok { margin: 0; color: #166534; display: flex; align-items: center; gap: 6px; }
.dk-pruef-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dk-fund { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; }
.dk-fund-fehler { background: #fef2f2; border-color: #fecaca; }
.dk-fund-hinweis { background: #f0f9ff; border-color: #bae6fd; }
.dk-fund .icon { flex: none; margin-top: 2px; }
.dk-fund-text { flex: 1 1 auto; min-width: 0; text-align: left; background: transparent; border: 0; padding: 0; font: inherit; font-size: 0.88rem; cursor: pointer; color: inherit; display: grid; gap: 2px; }
.dk-fund-text small { opacity: 0.65; }

/* Neu-Dialog (Katalog und leere Formate), Vorschau, Ablegen */
.dialog-druck-neu { width: min(1040px, calc(100vw - 24px)); }
.dialog-druck-vorschau { width: min(1000px, calc(100vw - 24px)); }
.dialog-druck-ablegen { width: min(560px, calc(100vw - 24px)); }
.dk-pdf-rahmen { width: 100%; height: min(72vh, 820px); border: 1px solid var(--farbe-rand); border-radius: 8px; background: #f3f5f8; }
.dk-neu-tabs { margin-bottom: 4px; }
.dk-neu-hinweis { margin: 12px 0 0; }
.dk-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.dk-katalog-karte { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); background: #fff; text-align: left; font: inherit; cursor: pointer; color: inherit; }
.dk-katalog-karte:hover, .dk-katalog-karte:focus-visible { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px var(--farbe-primaer-hell); }
.dk-katalog-karte .dk-mini { min-height: 130px; }
.dk-katalog-karte small { opacity: 0.7; }
.dk-gruppenwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dk-gruppe-karte { display: grid; gap: 4px; justify-items: start; padding: 12px; border: 1px solid var(--farbe-rand); border-radius: var(--radius-gross); background: #fff; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.dk-gruppe-karte.ist-aktiv { border-color: var(--farbe-primaer); background: var(--farbe-primaer-hell); }
.dk-gruppe-karte small { opacity: 0.7; }
.dk-neu-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 16px; align-items: end; }
@media (max-width: 1099px) {
    .dk-buehne { padding: 12px; }
}
.dk-mini-seite .dk-el-image.dk-leer::before { content: ""; }
.dk-neu-felder { margin-bottom: 16px; }
/* Druckvorlagen-Editor: die drei Spalten bleiben fest unter der Kopfleiste, die Seite selbst scrollt nie (nur die Spalten in sich) */
html:has(.dk-mitte), body.vollflaeche:has(.dk-mitte) { overflow: hidden; }
.modul-arbeit:has(.dk-mitte) { position: fixed; top: var(--kopfleiste-hoehe); right: 0; bottom: 0; left: 0; height: auto; z-index: 1; background: var(--farbe-hintergrund, #f8fafa); }
/* Reiter im Neu-Dialog der Druckvorlagen: Schaltflächen im Stil der Systemreiter (wie .unterreiter-punkt als Link) */
.dk-neu-tabs button.unterreiter-punkt { font: inherit; font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.dk-neu-tabs button.unterreiter-punkt.ist-aktiv { background: var(--farbe-primaer); }

/* ---------- Buchungs-Addon (PLAN.md E97) ---------- */
.bk-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bk-schritte li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.bk-schritte p { margin: 2px 0 0; }
.bk-schritte a { color: inherit; text-decoration: none; }
.bk-schritte a:hover { color: var(--farbe-akzent); }
.bk-schritt-haken { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.bk-schritt-haken .icon { width: 16px; height: 16px; }
.bk-schritte .ist-erledigt .bk-schritt-haken { background: var(--farbe-erfolg); border-color: var(--farbe-erfolg); color: #fff; }
.bk-schritte li:not(.ist-erledigt) .bk-schritt-haken .icon { opacity: 0; }
.bk-arten { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bk-fussnote { margin: 12px 0 0; font-size: 0.875rem; }
.bk-unterueberschrift { margin: 20px 0 12px; font-size: 1rem; }
.bk-unter { margin-top: 16px; }
.bk-brutto { display: block; padding: 9px 0; font-weight: 700; font-size: 1.05rem; }

/* Leistungen: Kopf der gewählten Kategorie */
.bk-kategorie-kopf { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 20px; }
.bk-kategorie-kopf .feld { flex: 1 1 260px; margin: 0; }
.bk-kategorie-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.bk-kategorie-aktionen form { margin: 0; display: flex; gap: 4px; }

/* Zeitplan */
.bk-zeiten th, .bk-zeiten td { text-align: left; white-space: normal; vertical-align: top; }
.bk-zeiten tr.bk-geschlossen .bk-zeit { opacity: 0.45; }
.bk-zeiten .bk-zeit { width: 100%; min-width: 74px; max-width: 110px; text-align: center; }
.bk-ausnahme { margin-top: 20px; padding-top: 4px; border-top: 1px solid var(--farbe-rand); }
.bk-sonderzeiten { margin-bottom: 16px; }

/* Buchungsliste */
.bk-filter { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 16px; }
.bk-filter .bk-stand { margin: 0; }
.bk-filter .feld { margin: 0; }
.bk-filter .bk-suche { flex: 1 1 220px; max-width: 360px; }
.bk-buchungen td { vertical-align: top; }
.bk-zweitzeile { display: block; font-size: 0.8125rem; }

/* Buchung: Leistungen als Zeilen */
.bk-leistung-waehlen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bk-leistung-waehlen select { flex: 1 1 260px; min-width: 0; }
.bk-posten { display: grid; gap: 8px; }
.bk-posten-kopf, .bk-posten-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 90px 100px 40px; gap: 8px; align-items: center; }
.bk-posten-kopf { font-size: 0.8125rem; color: var(--farbe-text-leise); padding: 0 2px; }
.bk-posten-zeile input { min-width: 0; width: 100%; }
.bk-summe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--farbe-rand); }
.bk-plzort { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
.bk-loeschen { margin: 4px 0 24px; }
@media (max-width: 760px) {
    .bk-posten-kopf { display: none; }
    .bk-posten-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; border: 1px solid var(--farbe-rand); border-radius: 12px; }
    .bk-posten-zeile input[data-bk-feld="name"] { grid-column: 1 / -1; }
    .bk-posten-zeile button { justify-self: end; }
}

/* Kalender */
.bk-wochenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; }
.bk-wochenkopf strong { min-width: 190px; text-align: center; }
.bk-kalender-karte { padding: 0; }
.bk-kalender { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.875rem; min-width: 760px; }
.bk-kalender th, .bk-kalender td { border: 1px solid var(--farbe-rand); padding: 2px 4px; vertical-align: top; text-align: left; }
.bk-kalender thead th { padding: 10px 8px; text-align: center; font-weight: 600; background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, 0.03)); }
.bk-kalender thead th.ist-heute { background: color-mix(in srgb, var(--farbe-akzent) 14%, transparent); box-shadow: inset 0 -3px 0 var(--farbe-akzent); }
.bk-kalender .bk-datum, .bk-kalender .bk-zu { display: block; font-size: 0.75rem; font-weight: 400; color: var(--farbe-text-leise); }
.bk-kalender th.bk-uhr { width: 64px; text-align: right; font-weight: 400; color: var(--farbe-text-leise); background: transparent; padding: 4px 8px; }
.bk-kalender td { height: 38px; }
.bk-kalender td.ist-zu { background: color-mix(in srgb, var(--farbe-text-leise) 8%, transparent); }
.bk-frei { display: grid; place-items: center; height: 100%; min-height: 30px; border-radius: 8px; color: transparent; text-decoration: none; }
.bk-frei:hover, .bk-frei:focus-visible { background: color-mix(in srgb, var(--farbe-akzent) 12%, transparent); color: var(--farbe-akzent); }
.bk-termin { display: block; margin: 2px 0; padding: 4px 8px; border-radius: 8px; background: color-mix(in srgb, var(--farbe-akzent) 18%, transparent); border-left: 4px solid var(--farbe-akzent); color: inherit; text-decoration: none; line-height: 1.3; overflow: hidden; }
.bk-termin:hover { background: color-mix(in srgb, var(--farbe-akzent) 28%, transparent); }
.bk-termin-leistung { display: block; font-size: 0.75rem; color: var(--farbe-text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-termin.bk-stand-4 { background: color-mix(in srgb, var(--farbe-erfolg) 18%, transparent); border-left-color: var(--farbe-erfolg); }
.bk-termin.bk-stand-5 { background: color-mix(in srgb, var(--farbe-gefahr) 14%, transparent); border-left-color: var(--farbe-gefahr); }

/* Buchungs-Addon: Kundendaten und Kundenakte */
.bk-kundendaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.bk-kundendaten > div { min-width: 0; }
.bk-kundendaten dt { font-size: 0.8125rem; color: var(--farbe-text-leise); margin-bottom: 2px; }
.bk-kundendaten dd { margin: 0; overflow-wrap: anywhere; }
.bk-kundendaten a { color: inherit; }
.bk-kundendaten-breit { grid-column: 1 / -1; }
.bk-verwalten { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; padding: 14px 0; border-top: 1px solid var(--farbe-rand); }
.bk-verwalten:first-of-type { border-top: 0; padding-top: 0; }
.bk-verwalten .feld { flex: 1 1 320px; margin: 0; }
@media (max-width: 760px) { .bk-kundendaten { grid-template-columns: minmax(0, 1fr); } }
.bk-termin.bk-stand-1, .bk-termin.bk-stand-2 { background: transparent; border: 1px dashed var(--farbe-akzent); border-left: 4px dashed var(--farbe-akzent); }

/* Buchung: freie Zeiten von Hand im Kalender */
.bk-zelle-aktionen { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; height: 100%; }
.bk-zelle-aktionen form { margin: 0; display: flex; }
.bk-zelle-aktionen .bk-frei { min-height: 26px; height: 26px; width: 26px; flex: none; }
.bk-umschalter { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--farbe-rand-stark); color: transparent; cursor: pointer; background: #fff; }
.bk-umschalter:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.bk-umschalter:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.bk-umschalter[aria-pressed="true"] { background: var(--farbe-erfolg); border-color: var(--farbe-erfolg); color: #fff; }
.bk-kalender td.ist-freigegeben { background: color-mix(in srgb, var(--farbe-erfolg) 14%, transparent); }
.bk-tag-aktionen { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.bk-tag-aktionen form { margin: 0; }
.bk-mini { all: unset; box-sizing: border-box; font-size: 0.6875rem; font-weight: 600; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--farbe-rand-stark); cursor: pointer; background: #fff; color: var(--farbe-text-leise); }
.bk-mini:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.bk-mini:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }

/* ---------- Anmeldungen-Addon (E98) ---------- */
.sg-zeit { margin: 0 0 16px; }
.sg-liste td { vertical-align: top; }
.sg-marke { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); white-space: nowrap; }
.sg-marke-wenig { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.sg-marke-voll { background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); border-color: var(--farbe-gefahr); color: var(--farbe-text); }
.sg-voll { color: var(--farbe-gefahr); font-weight: 600; }
.sg-stand { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-warnung-hell); border: 1px solid var(--farbe-warnung); }
.sg-stand-2 { background: color-mix(in srgb, var(--farbe-akzent) 12%, white); border-color: var(--farbe-akzent); }
.sg-stand-3 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); }
.sg-personen { font-weight: 600; }
.sg-anmerkung { max-width: 28ch; overflow-wrap: anywhere; white-space: pre-line; }
.sg-fuss { margin: 12px 0 0; }
.sg-liste .knopf-reihe { justify-content: flex-end; flex-wrap: nowrap; }

/* ---------- Schnellsuche (E99): Knopf der Kopfleiste, Dialog (Strg+K) und die Seite „Suche“ ---------- */
.kopfleiste-suche {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 10px;
    color: color-mix(in srgb, var(--farbe-kopfleiste-text) 90%, transparent); font-weight: 600; text-decoration: none; border-radius: var(--radius);
}
.kopfleiste-suche:hover { color: var(--farbe-kopfleiste-text); background: color-mix(in srgb, var(--farbe-kopfleiste-text) 10%, transparent); }
.kopfleiste-suche .icon { width: 22px; height: 22px; }
.kopfleiste-suche-text, .kopfleiste-suche-taste { display: none; }
.kopfleiste-suche-taste {
    padding: 2px 7px; font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--farbe-kopfleiste-text) 75%, transparent); border: 1px solid color-mix(in srgb, var(--farbe-kopfleiste-text) 30%, transparent); border-radius: var(--radius-klein);
}
@media (min-width: 1700px) {
    .kopfleiste-suche { padding: 0 12px; background: color-mix(in srgb, var(--farbe-kopfleiste-text) 8%, transparent); }
    .kopfleiste-suche-text, .kopfleiste-suche-taste { display: inline; }
}

.suche-dialog { width: min(680px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 24px)); margin-top: min(12vh, 110px); overflow: hidden; }
.suche-dialog[open] { display: flex; flex-direction: column; }
.suche-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--farbe-rand); }
.suche-kopf > .icon { flex: none; width: 22px; height: 22px; color: var(--farbe-text-leise); }
.suche-dialog .suche-eingabe { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0; font-size: 1.1rem; color: var(--farbe-text); background: transparent; border: 0; box-shadow: none; outline: none; }
.suche-eingabe::-webkit-search-cancel-button, .suche-formular input[type="search"]::-webkit-search-cancel-button { display: none; }
.suche-schliessen { flex: none; padding: 0; background: transparent; border: 0; cursor: pointer; }
.suche-dialog kbd, .suche-seite-kbd, .suche-tipp kbd {
    padding: 2px 7px; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--farbe-text-leise);
    background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-klein);
}
.suche-ergebnisse { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 8px; }
.suche-gruppe + .suche-gruppe { margin-top: 6px; }
.suche-gruppen-titel { padding: 10px 12px 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--farbe-text-leise); }
.suche-treffer, .suche-liste .suche-treffer {
    display: flex; align-items: center; gap: 12px; padding: 9px 12px; color: var(--farbe-text); text-decoration: none; border-radius: var(--radius);
}
.suche-treffer.ist-aktiv, .suche-treffer:hover { background: var(--farbe-primaer-hell); }
.suche-symbol { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--farbe-primaer); background: var(--farbe-flaeche-leise); border-radius: var(--radius); }
.suche-symbol .icon { width: 18px; height: 18px; }
.suche-text { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.suche-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche-kurz { font-size: 0.88rem; color: var(--farbe-text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suche-treffer mark, .suche-liste mark { padding: 0 1px; color: inherit; background: color-mix(in srgb, var(--farbe-akzent) 35%, transparent); border-radius: 3px; }
.suche-weitere { padding: 4px 12px 2px; font-size: 0.86rem; color: var(--farbe-text-leise); }
.suche-hinweis { display: grid; justify-items: start; gap: 8px; padding: 22px 16px; color: var(--farbe-text-leise); }
.suche-hinweis p { margin: 0; }
.suche-hinweis-link { font-weight: 600; }
.suche-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; font-size: 0.86rem; color: var(--farbe-text-leise); border-top: 1px solid var(--farbe-rand); }
.suche-fuss a { font-weight: 600; }
.suche-fuss a[hidden] { display: none; }
.suche-tasten { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 599px) { .suche-tasten { display: none; } .suche-dialog { margin-top: 12px; } }

/* Seite „Suche“ im Bereich Hilfe */
.suche-formular { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 14px; background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius-gross); }
.suche-formular:focus-within { border-color: var(--farbe-primaer); box-shadow: 0 0 0 3px var(--farbe-primaer-hell); }
.suche-formular > .icon { flex: none; width: 22px; height: 22px; color: var(--farbe-text-leise); }
.hauptinhalt .suche-formular input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 4px; font-size: 1.1rem; background: transparent; border: 0; box-shadow: none; outline: none; }
.suche-tipp { margin: 10px 0 0; }
.suche-anzahl { margin: 20px 0 8px; }
.suche-gruppen { display: grid; gap: 16px; margin-top: 8px; }
.suche-liste { margin: 0; padding: 0; list-style: none; }
.suche-liste .suche-kurz { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.suche-leer { margin-top: 16px; }
.hilfe-artikel { max-width: 860px; }
.hilfe-artikel h1:first-child { margin-top: 0; }

/* ---------- Häufige Fragen (E100): Akkordeon, Filter und Fragefeld ---------- */
.faq-werkzeuge { display: grid; gap: 14px; }
.faq-suche { padding-left: 14px; }
.faq-kategorien { margin: 0; }
.faq-anzahl { display: inline-block; min-width: 1.5em; margin-left: 4px; padding: 0 6px; font-size: 0.78rem; font-weight: 700; line-height: 1.5; text-align: center; color: var(--farbe-text-leise); background: var(--farbe-flaeche-leise); border-radius: 999px; }
.unterreiter-punkt.ist-aktiv .faq-anzahl { color: var(--farbe-primaer-dunkel); background: color-mix(in srgb, var(--farbe-flaeche) 85%, transparent); }
.faq-gruppen { display: grid; gap: 20px; margin-top: 20px; }
.faq-gruppe[hidden], .faq-frage[hidden] { display: none; }
.faq-gruppe .karte-titel { display: flex; align-items: center; gap: 10px; }
.faq-gruppe .karte-titel .icon { width: 22px; height: 22px; color: var(--farbe-primaer); }
.faq-liste { display: grid; margin-top: 4px; }
.faq-frage { border-top: 1px solid var(--farbe-rand); scroll-margin-top: calc(var(--kopfleiste-hoehe) + 16px); }
.faq-frage:first-child { border-top: 0; }
.faq-frage-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--radius); }
.faq-frage-kopf::-webkit-details-marker { display: none; }
.faq-frage-kopf:hover { color: var(--farbe-primaer); }
.faq-frage-kopf:focus-visible { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.faq-frage-kopf .icon { flex: none; color: var(--farbe-text-leise); transition: transform var(--uebergang); }
.faq-frage[open] > .faq-frage-kopf .icon { transform: rotate(180deg); }
.faq-antwort { padding: 0 4px 16px; max-width: 78ch; color: var(--farbe-text); }
.faq-antwort > :first-child { margin-top: 0; }
.faq-antwort p, .faq-antwort ul, .faq-antwort ol { margin: 0 0 10px; }
.faq-antwort ul, .faq-antwort ol { padding-left: 1.4em; }
.faq-antwort li { margin-bottom: 4px; }
.faq-weg { margin-top: 12px; }
.faq-frage.ist-markiert { animation: faq-markiert 2.4s ease-out; }
@keyframes faq-markiert { 0%, 60% { background: color-mix(in srgb, var(--farbe-akzent) 22%, transparent); } 100% { background: transparent; } }
.faq-leer { margin-top: 20px; }
.faq-fragen-block .karte-titel { display: flex; align-items: center; gap: 10px; }
.faq-fragen-block .karte-titel .icon { width: 22px; height: 22px; color: var(--farbe-primaer); }
.faq-fragen-block { margin-top: 20px; scroll-margin-top: calc(var(--kopfleiste-hoehe) + 16px); }
.faq-formular { display: grid; gap: 14px; max-width: 760px; }
@media (prefers-reduced-motion: reduce) { .faq-frage.ist-markiert { animation: none; background: color-mix(in srgb, var(--farbe-akzent) 22%, transparent); } }

/* ---------- Meldungen: Live-Vorschau des Seiten-Overlays (nach mod_overlay.css/display_popup.php des Frontends) ---------- */
.ml-overlay-bereich { display: grid; gap: var(--abstand); align-items: start; }
@media (min-width: 1100px) { .ml-overlay-bereich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ml-overlay-bereich > .karte { margin: 0; min-width: 0; }
.ml-vorschau-karte { position: sticky; top: calc(var(--kopfleiste-hoehe) + 16px); }
.ml-geraete { display: flex; gap: 6px; }
.ml-geraete .ist-aktiv { background: var(--farbe-primaer-hell); border-color: var(--farbe-primaer); color: var(--farbe-primaer-dunkel); }
/* Die Bühne rechnet in „echten“ Pixeln der Website: --e ist die Länge eines Website-Pixels (Bühnenbreite / Referenzbreite des Geräts) */
.ml-buehne {
    --ml-ref: 1000; --e: calc(100cqw / var(--ml-ref)); --ml-bg: #ffffff; --ml-fg: #333333;
    position: relative; container-type: inline-size; overflow: hidden; margin: 12px auto 0; aspect-ratio: 1000 / 640;
    background: #f4f4f2; border: 1px solid var(--farbe-rand-stark); border-radius: var(--radius);
}
.ml-buehne.ist-handy { --ml-ref: 390; max-width: 230px; aspect-ratio: 390 / 760; }
.ml-seite { position: absolute; inset: 0; display: grid; align-content: start; gap: calc(var(--e) * 18); padding: 0 calc(var(--e) * 40); }
.ml-buehne.ist-handy .ml-seite { padding: 0 calc(var(--e) * 16); }
.ml-seite > span { display: block; }
.ml-seite-kopf { display: flex !important; align-items: center; gap: calc(var(--e) * 28); height: calc(var(--e) * 70); margin: 0 calc(var(--e) * -40); padding: 0 calc(var(--e) * 40); background: #ffffff; border-bottom: 1px solid #dcdcd8; }
.ml-buehne.ist-handy .ml-seite-kopf { margin: 0 calc(var(--e) * -16); padding: 0 calc(var(--e) * 16); }
.ml-seite-logo { width: calc(var(--e) * 110); height: calc(var(--e) * 30); margin-right: auto; background: #c9c9c4; border-radius: calc(var(--e) * 4); }
.ml-seite-menue { width: calc(var(--e) * 60); height: calc(var(--e) * 12); background: #d6d6d2; border-radius: calc(var(--e) * 6); }
.ml-buehne.ist-handy .ml-seite-menue { display: none; }
.ml-seite-bild { height: calc(var(--e) * 200); background: linear-gradient(135deg, #d9dedb, #c6d0cc); border-radius: calc(var(--e) * 6); }
.ml-buehne.ist-handy .ml-seite-bild { height: calc(var(--e) * 190); }
.ml-seite-zeile { height: calc(var(--e) * 12); background: #dededa; border-radius: calc(var(--e) * 6); }
.ml-seite-zeile.ml-lang { width: 86%; }
.ml-seite-zeile.ml-kurz { width: 54%; }
/* Schleier und Fenster wie mod_overlay.css: schwarz zu 70 %, Fenster höchstens 800 px breit, 100 px vom oberen Rand, 30 px Innenabstand */
.ml-schleier { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); text-align: center; overflow: hidden; }
.ml-popup {
    position: relative; box-sizing: border-box; display: block; width: min(calc(var(--e) * 800), 100cqw); max-width: 100%;
    margin: calc(var(--e) * 100) auto 0; padding: calc(var(--e) * 30); text-align: center;
    background: var(--ml-bg); color: var(--ml-fg); font-size: calc(var(--e) * 16); line-height: 1.4;
}
.ml-buehne.ist-handy .ml-popup { margin-top: 0; }
.ml-popup :is(p, h1, h2, h3, h4, h5, h6, li, span, div) { color: var(--ml-fg); }
.ml-popup .ml-text > :first-child { margin-top: 0; }
.ml-popup p, .ml-popup ul, .ml-popup ol { margin: 0 0 1em; }
.ml-popup h1, .ml-popup h2, .ml-popup h3, .ml-popup h4, .ml-popup h5 { margin: 0 0 0.6em; line-height: 1.2; }
.ml-popup h1 { font-size: 2em; } .ml-popup h2 { font-size: 1.6em; } .ml-popup h3 { font-size: 1.3em; } .ml-popup h4 { font-size: 1.1em; } .ml-popup h5 { font-size: 1em; }
.ml-popup ul, .ml-popup ol { display: inline-block; text-align: left; }
.ml-popup img { max-width: 100%; height: auto; }
.ml-popup a { color: inherit; text-decoration: underline; }
.ml-popup table { max-width: 100%; border-collapse: collapse; }
.ml-text:empty::before { content: "Hier erscheint Ihr Text"; opacity: 0.55; font-style: italic; }
.ml-schliessen { position: absolute; top: 0; right: 0; padding: calc(var(--e) * 17) calc(var(--e) * 7); font-size: calc(var(--e) * 40); font-weight: 700; line-height: 0; color: var(--ml-fg); }
.ml-knopfzeile { margin-top: 1em; }
.ml-knopf { display: inline-block; padding: 0.5em 1.5em; border: 1px solid var(--ml-fg); border-radius: calc(var(--e) * 4); color: var(--ml-fg); }
.ml-aus { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; color: var(--farbe-text); background: var(--farbe-warnung-hell, #fff4d6); border-radius: 999px; }
.ml-aus[hidden] { display: none; }
.ml-vorschau-fuss { margin: 10px 0 0; }
/* ---------- Forum-Addon (E101) ---------- */
.fo-uebersicht { list-style: none; margin: 0; padding: 0; }
.fo-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--farbe-rand); }
.fo-zeile:last-child { border-bottom: 0; }
.fo-zeile.fo-ebene-2 { padding-left: 24px; }
.fo-kategorien td { vertical-align: top; }
.fo-kategorien tr.fo-ebene-2 td:first-child { padding-left: 28px; }
.fo-inline { display: inline-flex; gap: 2px; margin: 0; }
.fo-zahl { display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; font-size: 0.75rem; font-weight: 700; line-height: 1.5; text-align: center; border-radius: 999px; background: var(--farbe-akzent); color: #fff; }
.fo-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fo-filter input[type="search"] { flex: 1 1 240px; min-width: 0; }
.fo-trefferzeile { margin: 0 0 8px; }
.fo-blaettern { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.fo-themen td, .fo-kategorien td { vertical-align: top; }
.fo-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fo-marke { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); white-space: nowrap; }
.fo-marken .fo-marke { margin-left: 0; }
.fo-marke-warn { border-color: var(--farbe-warnung, #c77700); color: var(--farbe-warnung, #c77700); }
.fo-marke-aus { opacity: 0.75; }
.fo-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fo-thema-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fo-thema-kopf .fo-aktionen { margin-top: 0; }
.fo-inline select, .fo-inline input[type="text"] { min-width: 0; }
.fo-beitrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; }
.fo-beitrag-titel { margin: 0 0 6px; font-size: 1.05rem; }
.fo-beitrag-text { line-height: 1.55; overflow-wrap: anywhere; }
.fo-beitrag-aus { opacity: 0.6; }
.fo-beitrag-beste { border-left: 4px solid var(--farbe-akzent); }
.fo-gruende { margin: 12px 0 0; padding-left: 20px; color: var(--farbe-text-leise); }
.fo-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.fo-angaben dt { color: var(--farbe-text-leise); }
.fo-angaben dd { margin: 0; overflow-wrap: anywhere; }
.fo-sperre { margin-top: 16px; }
.fo-umfrage { list-style: none; margin: 0 0 8px; padding: 0; }
.fo-umfrage li { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(80px, 2fr) auto; align-items: center; gap: 12px; padding: 6px 0; }
.fo-balken { display: block; height: 10px; border-radius: 999px; background: var(--farbe-flaeche-leise); overflow: hidden; }
.fo-balken-fuell { display: block; height: 100%; border-radius: 999px; background: var(--farbe-akzent); }
.fo-balken-fuell.fo-p0 { width: 0%; }
.fo-balken-fuell.fo-p5 { width: 5%; }
.fo-balken-fuell.fo-p10 { width: 10%; }
.fo-balken-fuell.fo-p15 { width: 15%; }
.fo-balken-fuell.fo-p20 { width: 20%; }
.fo-balken-fuell.fo-p25 { width: 25%; }
.fo-balken-fuell.fo-p30 { width: 30%; }
.fo-balken-fuell.fo-p35 { width: 35%; }
.fo-balken-fuell.fo-p40 { width: 40%; }
.fo-balken-fuell.fo-p45 { width: 45%; }
.fo-balken-fuell.fo-p50 { width: 50%; }
.fo-balken-fuell.fo-p55 { width: 55%; }
.fo-balken-fuell.fo-p60 { width: 60%; }
.fo-balken-fuell.fo-p65 { width: 65%; }
.fo-balken-fuell.fo-p70 { width: 70%; }
.fo-balken-fuell.fo-p75 { width: 75%; }
.fo-balken-fuell.fo-p80 { width: 80%; }
.fo-balken-fuell.fo-p85 { width: 85%; }
.fo-balken-fuell.fo-p90 { width: 90%; }
.fo-balken-fuell.fo-p95 { width: 95%; }
.fo-balken-fuell.fo-p100 { width: 100%; }

/* ---------- Online-Termin-Addon (PLAN.md E102) ---------- */
.ap-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ap-filter .feld { margin: 0; flex: 1 1 180px; }
.ap-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.ap-liste td { vertical-align: top; }
.ap-liste .knopf-reihe { justify-content: flex-end; flex-wrap: nowrap; }
.ap-fuss { margin: 12px 0 0; }
.ap-seiten { display: flex; gap: 8px; margin-top: 8px; }
.ap-stand { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.ap-stand-1 { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.ap-stand-2 { background: color-mix(in srgb, var(--farbe-akzent) 12%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.ap-stand-3, .ap-stand-4 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.ap-stand-5 { background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); border-color: var(--farbe-gefahr); color: var(--farbe-text); }
.ap-stand-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.ap-stand-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ap-stand-formular .feld { margin: 0; }
.ap-spalten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ap-spalten > .karte { margin: 0; }
.ap-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.ap-angaben dt { color: var(--farbe-text-leise); }
.ap-angaben dd { margin: 0; overflow-wrap: anywhere; }
.ap-text { white-space: pre-line; }
.ap-themenliste { margin: 0; padding-left: 18px; }
.ap-themenwahl { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 16px; }
.ap-themengruppe { margin: 0; padding: 12px 16px; border: 1px solid var(--farbe-rand); border-radius: 12px; display: grid; gap: 6px; align-content: start; }
.ap-themengruppe legend { padding: 0 6px; font-weight: 600; }
.ap-zeiten th, .ap-zeiten td { text-align: left; white-space: normal; vertical-align: top; }
.ap-zeiten tr.ap-geschlossen .ap-zeit { opacity: 0.45; }
.ap-zeiten .ap-zeit { width: 100%; min-width: 74px; max-width: 110px; text-align: center; }
.ap-abstand { max-width: 110px; }
.ap-fussnote { margin: 12px 0 0; font-size: 0.875rem; }
.ap-sonderzeiten { margin-bottom: 16px; }
.ap-sonder-hinweis { grid-column: 1 / -1; margin: 0; }
.ap-themen-kopf { margin: 0 0 12px; }
.ap-kat { margin-bottom: 16px; }
.ap-kat-kopf, .ap-thema { display: flex; align-items: flex-start; gap: 12px; }
.ap-kat-kopf { margin-bottom: 12px; }
.ap-zeile-feld { flex: 1 1 auto; min-width: 0; }
.ap-zeile-feld input[type="text"] { width: 100%; }
.ap-zeile-knoepfe { display: flex; gap: 4px; flex: 0 0 auto; }
.ap-kat-kopf .ap-zeile-knoepfe { padding-top: 26px; }
.ap-themen { display: grid; gap: 8px; margin-left: 20px; padding-left: 16px; border-left: 2px solid var(--farbe-rand); }
.ap-kat-fuss { margin: 12px 0 0 36px; }
.ap-neu { margin: 0 0 16px; }
@media (max-width: 600px) {
    .ap-themen { margin-left: 4px; padding-left: 10px; }
    .ap-kat-fuss { margin-left: 14px; }
    .ap-angaben { grid-template-columns: 1fr; gap: 2px; }
    .ap-angaben dd { margin-bottom: 8px; }
}

/* ---------- Jobbörse (Addon, PLAN.md E103) ---------- */
.jb-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.jb-filter .feld { margin: 0; flex: 1 1 180px; }
.jb-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.jb-liste td { vertical-align: top; }
.jb-liste .knopf-reihe { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.jb-aktionen form { margin: 0; }
.jb-zeitraum { font-size: 0.8125rem; }
.jb-stern { color: var(--farbe-warnung); display: inline-flex; vertical-align: middle; }
.jb-fuss { margin: 12px 0 0; }
.jb-seiten { display: flex; gap: 8px; margin-top: 8px; }
.jb-stand, .jb-app-stand { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.jb-stand-1, .jb-app-stand-5 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.jb-stand-2 { background: var(--farbe-flaeche-leise); }
.jb-app-stand-1 { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.jb-app-stand-2 { background: color-mix(in srgb, var(--farbe-akzent) 12%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.jb-app-stand-3 { background: color-mix(in srgb, var(--farbe-akzent) 22%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.jb-app-stand-4 { background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); border-color: var(--farbe-gefahr); color: var(--farbe-text); }
.jb-liste tr.jb-neu td { background: color-mix(in srgb, var(--farbe-warnung-hell) 55%, transparent); }
.jb-anhang { display: inline-flex; align-items: center; gap: 4px; }
.jb-stand-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.jb-stand-formular .feld { margin: 0; }
.jb-spalten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin: 16px 0; }
.jb-spalten > .karte { margin: 0; }
.jb-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.jb-angaben dt { color: var(--farbe-text-leise); }
.jb-angaben dd { margin: 0; overflow-wrap: anywhere; }
.jb-text { white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.jb-dateien { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; }
.jb-datei { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.jb-datenschutz { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; }
.jb-zeile { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.jb-zeile-feld { flex: 1 1 auto; min-width: 0; }
.jb-zeile-feld input[type="text"] { width: 100%; }
.jb-zeile-schema { flex: 0 0 220px; }
.jb-zeile-schema select { width: 100%; }
.jb-zeile-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.jb-anzahl { margin-right: 8px; white-space: nowrap; font-size: 0.8125rem; }
.jb-neu-knopf { margin: 12px 0 0; }
@media (max-width: 700px) {
    .jb-zeile { flex-wrap: wrap; }
    .jb-zeile-schema { flex: 1 1 100%; order: 3; }
    .jb-angaben { grid-template-columns: 1fr; gap: 2px; }
    .jb-angaben dd { margin-bottom: 8px; }
}

/* ---------- Tageskarte (Kundenlösung Café Pause, PLAN.md E104) ---------- */
.tk-formular .karte { margin-bottom: 16px; }
.tk-reiter-datum { font-size: 0.8125rem; font-weight: 400; opacity: 0.75; }
.tk-tagestext { margin-bottom: 16px; }
.tk-tagestext input[type="text"] { width: 100%; }
.tk-gerichte { display: grid; gap: 8px; }
.tk-gericht { display: grid; grid-template-columns: 28px minmax(0, 5fr) minmax(0, 5fr) minmax(96px, 1.4fr); gap: 8px 12px; align-items: start; }
.tk-kopf { color: var(--farbe-text-leise); font-size: 0.8125rem; font-weight: 600; align-items: end; }
.tk-nummer { display: flex; align-items: center; justify-content: center; height: 40px; color: var(--farbe-text-leise); font-variant-numeric: tabular-nums; }
.tk-feld { min-width: 0; }
.tk-feld input[type="text"] { width: 100%; }
.tk-preis-feld { display: flex; align-items: center; gap: 6px; }
.tk-preis-feld input[type="text"] { text-align: right; }
.tk-euro { color: var(--farbe-text-leise); }
.tk-schluss textarea { width: 100%; }
.tk-allergene { margin: 12px 0 0; font-size: 0.875rem; }
@media (max-width: 760px) {
    .tk-kopf { display: none; }
    .tk-gericht { grid-template-columns: 24px minmax(0, 1fr); padding: 10px 0; border-top: 1px solid var(--farbe-rand); }
    .tk-gericht .tk-nummer { grid-row: 1 / span 3; }
    .tk-gericht .tk-feld { grid-column: 2; }
    .tk-gericht .tk-preis { max-width: 9rem; }
}

/* ============================================================
   Swifurn (Kundenlösung, PLAN.md E104): Gestelle, Gestellmaterial, Holzarten, Preisraster
   ============================================================ */
.sw-liste td { vertical-align: middle; }
.sw-liste .knopf-reihe { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.sw-aktionen form { margin: 0; }
.sw-zeile { display: flex; align-items: center; gap: 12px; }
.sw-bild { flex: 0 0 auto; width: 72px; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: 8px; overflow: hidden; }
.sw-bild:empty { background: repeating-linear-gradient(45deg, var(--farbe-flaeche-leise), var(--farbe-flaeche-leise) 6px, var(--farbe-flaeche) 6px, var(--farbe-flaeche) 12px); }
.sw-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sw-ohne-preis { color: var(--farbe-gefahr); }

.sw-arten { display: grid; gap: 12px; }
.sw-art { border: 1px solid var(--farbe-rand); border-radius: 12px; padding: 12px 16px; background: var(--farbe-flaeche); }
.sw-art-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sw-art-felder { display: grid; gap: 16px; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; transition: opacity 0.2s; }
.sw-art.ist-aus .sw-art-felder { opacity: 0.45; }
.sw-art.feld-fehler { border-color: var(--farbe-gefahr); }
@media (max-width: 640px) { .sw-art-felder { grid-template-columns: minmax(0, 1fr); } }

.sw-preise th, .sw-preise td { padding: 4px 6px; white-space: nowrap; }
.sw-preise tbody th { text-align: left; font-weight: 600; }
.sw-preis { width: 6rem; max-width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.sw-preis-fehler { border-color: var(--farbe-gefahr); background: var(--farbe-gefahr-hell); }
.sw-kopieren { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.sw-kopieren .feld { margin: 0; min-width: 16rem; }

/* ---------- Hausprojekte (Kundenlösung Schneider Hausbau, PLAN.md E104) ---------- */
.shh-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.shh-filter .feld { margin: 0; flex: 1 1 170px; }
.shh-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.shh-liste td { vertical-align: top; }
.shh-bildzelle { width: 104px; }
.shh-vorschau { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--farbe-flaeche-leise); }
.shh-ohne-bild { display: flex; align-items: center; justify-content: center; color: var(--farbe-text-leise); border: 1px dashed var(--farbe-rand-stark); }
.shh-teaser { display: inline-block; max-width: 56ch; font-size: 0.8125rem; }
.shh-datum { font-size: 0.8125rem; }
.shh-liste .knopf-reihe { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.shh-aktionen form { margin: 0; }
.shh-fuss { margin: 12px 0 0; }
.shh-seiten { display: flex; gap: 8px; margin-top: 8px; }
.shh-stand { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.shh-stand-1 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.shh-bilder { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.shh-bild { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--farbe-rand); border-radius: 10px; background: var(--farbe-flaeche); }
.shh-bild.ist-haupt { border-color: var(--farbe-akzent); box-shadow: 0 0 0 1px var(--farbe-akzent); }
.shh-bild-rahmen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--farbe-flaeche-leise); }
.shh-bild-vorschau { display: block; width: 100%; height: 100%; object-fit: cover; }
.shh-bild-haupt-marke { display: none; position: absolute; left: 6px; top: 6px; align-items: center; gap: 4px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: var(--farbe-akzent); color: #fff; }
.shh-bild.ist-haupt .shh-bild-haupt-marke { display: inline-flex; }
.shh-bild-text input[type="text"] { width: 100%; }
.shh-bild-knoepfe { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.shh-haupt-wahl { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; cursor: pointer; }
.shh-bild-reihe { display: inline-flex; gap: 2px; }
.shh-neu-knopf { margin: 12px 0 0; }
.shh-zeile { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.shh-zeile-feld { flex: 1 1 auto; min-width: 0; }
.shh-zeile-feld input[type="text"] { width: 100%; }
.shh-zeile-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.shh-anzahl { margin-right: 8px; white-space: nowrap; font-size: 0.8125rem; }
@media (max-width: 700px) {
    .shh-bildzelle { width: 72px; }
    .shh-vorschau { width: 64px; height: 48px; }
    .shh-zeile { flex-wrap: wrap; }
}
.sw-pruefung { border-color: var(--farbe-warnung); }
.sw-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sw-hinweise li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sw-hinweise .icon { color: var(--farbe-warnung); flex: 0 0 auto; align-self: center; }

/* ============================================================
   Dreher Garagenpark (Kundenlösung, PLAN.md E105): Blöcke des Geländeplans, Verfügbarkeit und Angaben
   ============================================================ */
.dd-formular .karte { margin-bottom: 16px; }
.dd-reiter-zahl { font-size: 0.8125rem; font-weight: 400; opacity: 0.75; }
.dd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--farbe-rand); background: var(--farbe-flaeche); color: var(--farbe-text); text-decoration: none; font-size: 0.875rem; }
.dd-chip strong { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 6px; border-radius: 999px; font-size: 0.8125rem; color: #fff; }
.dd-chip.dd-frei strong { background: var(--farbe-erfolg); }
.dd-chip.dd-belegt strong { background: var(--farbe-gefahr); }
.dd-chip:hover { border-color: var(--farbe-rand-stark); }
.dd-block-kopf { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.dd-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; }
.dd-wahl { position: relative; display: inline-flex; cursor: pointer; }
.dd-wahl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dd-wahl span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--farbe-rand); border-radius: 999px; background: var(--farbe-flaeche); color: var(--farbe-text-leise); font-size: 0.875rem; }
.dd-wahl svg { width: 1rem; height: 1rem; }
.dd-wahl input:focus-visible + span { outline: 2px solid var(--farbe-primaer); outline-offset: 2px; }
.dd-wahl.dd-frei input:checked + span { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-erfolg); font-weight: 600; }
.dd-wahl.dd-belegt input:checked + span { background: var(--farbe-gefahr-hell); border-color: var(--farbe-gefahr); color: var(--farbe-gefahr); font-weight: 600; }
.dd-wahl input:disabled + span { opacity: 0.6; cursor: default; }
.dd-fehlertext { margin: 0 0 8px; }
.dd-felder { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.dd-feld input[type="text"] { width: 100%; }
.dd-feld-items, .dd-feld-price, .dd-feld-usecase { grid-column: span 2; }
@media (max-width: 560px) {
    .dd-feld-items, .dd-feld-price, .dd-feld-usecase { grid-column: auto; }
    .dd-status { width: 100%; }
}

/* Dreher Garagenpark – Anfragen, Wartelisten, Aufbewahrung (PLAN.md E105) */
.dd-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.dd-filter .feld { margin: 0; flex: 1 1 170px; }
.dd-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.dd-liste td { vertical-align: top; }
.dd-liste tr.dd-neu td { background: color-mix(in srgb, var(--farbe-warnung-hell) 55%, transparent); }
.dd-fuss { margin: 12px 0 0; }
.dd-seiten { display: flex; gap: 8px; margin-top: 8px; }
.dd-zeile { margin: 12px 0 0; }
.dd-stand, .dd-art { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.dd-stand-1 { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.dd-stand-2 { background: color-mix(in srgb, var(--farbe-akzent) 14%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.dd-stand-3 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.dd-art-warteliste { background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); border-color: var(--farbe-gefahr); color: var(--farbe-text); }
.dd-art-anfrage { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.dd-stand-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.dd-stand-formular .feld { margin: 0; }
.dd-tage { display: inline-flex; align-items: center; gap: 8px; }
.dd-tage input[type="text"] { width: 5rem; text-align: right; }
.dd-spalten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin: 16px 0; }
.dd-spalten > .karte { margin: 0; }
.dd-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.dd-angaben dt { color: var(--farbe-text-leise); }
.dd-angaben dd { margin: 0; overflow-wrap: anywhere; }
.dd-text { white-space: pre-line; margin: 0; overflow-wrap: anywhere; }
.dd-datenschutz { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; }
.dd-umschalter { margin: 0 0 12px; }
.dd-chip-frei { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--farbe-erfolg-hell); border: 1px solid var(--farbe-erfolg); font-size: 0.875rem; font-weight: 600; }
.dd-warteliste { margin-bottom: 16px; }
.dd-reihenfolge { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.dd-reihenfolge li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--farbe-rand); }
.dd-reihenfolge li:first-child { border-top: 0; }
.dd-reihenfolge li.dd-erledigt { opacity: 0.6; }
.dd-platz { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--farbe-primaer); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.dd-wartender { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.dd-notiz { font-size: 0.875rem; }
@media (max-width: 560px) {
    .dd-reihenfolge li { grid-template-columns: 2.25rem minmax(0, 1fr); }
    .dd-reihenfolge li .dd-stand { grid-column: 2; justify-self: start; }
    .dd-angaben { grid-template-columns: 1fr; gap: 2px 0; }
    .dd-angaben dd { margin-bottom: 8px; }
}

/* ===== Rio-Sys Demo (Kundenlösung, PLAN.md E106) ===== */
.rio-admin { display: grid; gap: 20px; }
.rio-felder { display: grid; gap: 16px; }
.rio-felder-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rio-aussehen { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 20px; align-items: start; }
.rio-demo-link { margin: 14px 0 0; }
.rio-demo-link a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
    .rio-aussehen { grid-template-columns: 1fr; }
}

/* ---- Schlauch-Konfigurator (Kundenlösung qnnect, PLAN-Archiv 3.96) ---- */
.sk-reiter-zahl { font-size: 0.8125rem; font-weight: 400; opacity: 0.75; }
.sk-gut { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--farbe-erfolg, #1c7c3c); }
.sk-hinweisliste { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.9375rem; }
.sk-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 12px 16px; align-items: end; margin-bottom: 16px; }
.sk-filter .feld { margin: 0; }
.sk-filter-knoepfe { align-self: end; }
.sk-tabelle td { vertical-align: middle; }
.sk-tabelle input[type="text"], .sk-tabelle select { padding: 6px 8px; min-height: 0; }
.sk-tabelle .sk-zahl { width: 4.75rem; text-align: right; }
.sk-tabelle .sk-preis { width: 6.5rem; text-align: right; }
.sk-tabelle select { max-width: 11rem; }
.sk-fehler { border-color: var(--farbe-gefahr) !important; }
.sk-fehlerzeile td { background: var(--farbe-flaeche-leise); }
.sk-aktionen { justify-content: flex-end; flex-wrap: nowrap; gap: 4px; }
.sk-seiten { justify-content: center; align-items: center; margin-top: 16px; }
.sk-neu-felder, .sk-nachschlagen-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px 16px; margin-bottom: 16px; }
.sk-neu-felder .feld, .sk-nachschlagen-felder .feld { margin: 0; }
.sk-anpassen { max-width: 28rem; }
.sk-preisanzeige { margin: 0 0 16px; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.sk-daten { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.sk-daten dt { color: var(--farbe-text-leise); }
.sk-daten dd { margin: 0; }
.sk-bilder { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.sk-gruppe { margin-bottom: 16px; }
.sk-werte input[type="text"] { padding: 6px 8px; min-height: 0; }
.sk-werte .sk-zahl { width: 6rem; text-align: right; }
@media (max-width: 640px) {
    .sk-daten { grid-template-columns: 1fr; }
}

/* ---------- Trinity (Kundenlösung Trinity to be, PLAN.md E104): Buchungen, Wochenplan, Links, Einstellungen ---------- */
.tr-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.tr-filter .feld { margin: 0; flex: 1 1 180px; }
.tr-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.tr-liste td { vertical-align: top; }
.tr-liste .knopf-reihe { justify-content: flex-end; flex-wrap: nowrap; }
.tr-liste tr.tr-neu td { background: color-mix(in srgb, var(--farbe-warnung-hell) 55%, transparent); }
.tr-fuss { margin: 12px 0 0; }
.tr-seiten { display: flex; gap: 8px; margin-top: 8px; }
.tr-stand { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); color: var(--farbe-text); }
.tr-stand-1 { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); }
.tr-stand-2 { background: color-mix(in srgb, var(--farbe-akzent) 12%, white); border-color: var(--farbe-akzent); }
.tr-stand-3, .tr-stand-4 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); }
.tr-stand-5, .tr-stand-6 { background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); border-color: var(--farbe-gefahr); }
.tr-stand-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.tr-stand-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tr-stand-formular .feld { margin: 0; }
.tr-spalten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 16px; }
.tr-spalten > .karte { margin: 0; }
.tr-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.tr-angaben dt { color: var(--farbe-text-leise); }
.tr-angaben dd { margin: 0; overflow-wrap: anywhere; }
.tr-text { white-space: pre-line; }
.tr-kurz { max-width: 110px; }
.tr-link { display: grid; gap: 8px; margin-top: 16px; }
.tr-link-feld { width: 100%; font-family: var(--schrift-mono, monospace); }

/* Wochenplan */
.tr-plan-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.tr-plan-wechsel { display: flex; align-items: center; gap: 8px; }
.tr-plan-titel { min-width: 11rem; text-align: center; }
.tr-plan-info { margin: 0; }
.tr-plan-rahmen { overflow-x: auto; }
.tr-plan { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tr-plan th, .tr-plan td { padding: 0; border-bottom: 1px solid var(--farbe-rand); }
.tr-plan thead th { padding: 4px 2px 8px; font-weight: 600; text-align: center; position: sticky; top: 0; background: var(--farbe-flaeche); z-index: 1; }
.tr-plan thead th:first-child, .tr-plan .tr-uhr { width: 4.5rem; }
.tr-uhr { text-align: right; padding-right: 10px; color: var(--farbe-text-leise); font-weight: 400; font-size: 0.8125rem; font-variant-numeric: tabular-nums; vertical-align: top; padding-top: 6px; }
.tr-tag { display: grid; gap: 0; width: 100%; padding: 6px 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; line-height: 1.25; }
.tr-tag:hover, .tr-tag:focus-visible { background: var(--farbe-flaeche-leise); border-color: var(--farbe-rand); }
.tr-tag-name { font-weight: 600; }
.tr-tag-datum { font-size: 0.8125rem; font-weight: 400; color: var(--farbe-text-leise); }
.tr-heute .tr-tag-name { color: var(--farbe-akzent); }
.tr-zelle-feld { position: relative; padding: 2px !important; vertical-align: top; }
.tr-zelle-feld.ist-belegt { background: repeating-linear-gradient(135deg, transparent, transparent 6px, color-mix(in srgb, var(--farbe-akzent) 10%, transparent) 6px, color-mix(in srgb, var(--farbe-akzent) 10%, transparent) 12px); }
.tr-zelle { display: block; width: 100%; height: 30px; padding: 0; border: 1px solid var(--farbe-rand); border-radius: 8px; background: var(--farbe-flaeche); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.tr-zelle:hover:not(:disabled) { border-color: var(--farbe-erfolg); background: var(--farbe-erfolg-hell); }
.tr-zelle.ist-aktiv { background: var(--farbe-erfolg); border-color: var(--farbe-erfolg); }
.tr-zelle:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.tr-zelle:disabled { cursor: default; opacity: 0.4; background: var(--farbe-flaeche-leise); }
.tr-zelle.ist-aktiv:disabled { background: var(--farbe-erfolg); opacity: 0.35; }
.tr-chip { display: grid; gap: 0; margin: 2px 0 0; padding: 3px 6px; border-radius: 8px; border-left: 4px solid var(--farbe-warnung); background: var(--farbe-warnung-hell); color: var(--farbe-text); font-size: 0.75rem; line-height: 1.3; text-decoration: none; overflow: hidden; }
.tr-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-chip-2 { border-left-color: var(--farbe-akzent); background: color-mix(in srgb, var(--farbe-akzent) 12%, white); }
.tr-chip-3, .tr-chip-4 { border-left-color: var(--farbe-erfolg); background: var(--farbe-erfolg-hell); }
.tr-chip-5, .tr-chip-6 { border-left-color: var(--farbe-gefahr); background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); }
.tr-plan-hinweis { margin: 12px 0 0; font-size: 0.875rem; }
@media (max-width: 700px) {
    .tr-angaben { grid-template-columns: 1fr; gap: 2px; }
    .tr-angaben dd { margin-bottom: 8px; }
    .tr-plan-titel { min-width: 0; }
}
.rio-zugangsdaten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 14px 0 0; }
.rio-zugangsdaten dt { color: var(--farbe-text-leise); font-weight: 600; }
.rio-zugangsdaten dd { margin: 0; overflow-wrap: anywhere; }
.rio-zugang code { font-size: 1.05em; padding: 3px 8px; border-radius: 6px; background: var(--farbe-flaeche-leise); user-select: all; }
@media (max-width: 640px) {
    .rio-zugangsdaten { grid-template-columns: 1fr; gap: 2px 0; }
    .rio-zugangsdaten dd { margin-bottom: 10px; }
}

/* ==== Leibfritz Reisen (Kundenlösung, E106) ==== */
.lf-zahlen { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 4px 0 0; }
.lf-zahl { background: var(--farbe-flaeche-2, #f4f5f7); border-radius: 10px; padding: 14px 16px; }
.lf-zahl dt { font-size: 0.82rem; color: var(--farbe-text-leise, #5b6270); margin: 0 0 4px; }
.lf-zahl dd { margin: 0; font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.lf-zahl-neu dd { color: var(--farbe-akzent, #2a6df4); }
.lf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lf-liste li { display: flex; gap: 10px; align-items: flex-start; }
.lf-liste li .symbol { flex: none; margin-top: 2px; }
.lf-hinweis { margin: 0 0 10px; color: var(--farbe-text-leise, #5b6270); }
@media (max-width: 760px) {
    .lf-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==== Stomawelt App (Kundenlösung, E106) ==== */
.stw-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.stw-filter .feld { margin: 0; flex: 1 1 220px; }
.stw-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.stw-liste td { vertical-align: top; }
.stw-vorschau { max-width: 420px; }
.stw-text { overflow-wrap: anywhere; }
.stw-mini { display: block; max-width: 120px; max-height: 90px; border-radius: 6px; object-fit: cover; }
.stw-grund { display: inline-block; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--farbe-warnung, #c77700) 14%, white); color: var(--farbe-text); font-size: 0.82rem; }
.stw-plakette { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--farbe-flaeche-leise); font-size: 0.78rem; color: var(--farbe-text-leise); vertical-align: middle; }
.stw-aktionen { justify-content: flex-end; flex-wrap: wrap; }
.stw-fuss { margin: 12px 0 0; }
.stw-seiten { display: flex; gap: 8px; margin-top: 10px; }
.stw-gespraech { display: grid; gap: 10px; }
.stw-beitrag { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--farbe-flaeche-leise); }
.stw-beitrag.stw-aktuell { background: color-mix(in srgb, var(--farbe-akzent) 10%, white); outline: 2px solid var(--farbe-akzent); }
.stw-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: white; color: var(--farbe-text-leise); }
.stw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.stw-beitrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.stw-bild img { display: block; max-width: min(100%, 420px); max-height: 360px; border-radius: 8px; }
.stw-adresse { display: grid; gap: 12px; max-width: 560px; }
@media (max-width: 700px) {
    .stw-vorschau { max-width: none; }
    .stw-aktionen { justify-content: flex-start; }
    /* Auf dem Handy stehen die Zeilen als Karten untereinander statt in schmalen Spalten */
    .stw-liste, .stw-liste tbody, .stw-liste tr, .stw-liste td { display: block; width: 100%; }
    .stw-liste thead { display: none; }
    .stw-liste tr { padding: 12px 0; border-bottom: 1px solid var(--farbe-linie, #e3e6ea); }
    .stw-liste td { padding: 3px 0; border: 0; text-align: left; }
    .stw-liste td[data-bez]::before { content: attr(data-bez) ": "; color: var(--farbe-text-leise); font-size: 0.85rem; }
    .stw-liste td.spk-rechts { text-align: left; padding-top: 8px; }
}

/* ============================================================
   Kreisel Kurse (Kundenlösung, PLAN.md E106): Kurse, Termine, Bilder, Listen, Anmeldungen
   ============================================================ */
.kk-inline { display: inline-block; margin: 0 0 0 12px; }
.kk-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.kk-filter .feld { margin: 0; flex: 1 1 180px; }
.kk-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.kk-liste td { vertical-align: top; }
.kk-liste tr.kk-neu td { background: color-mix(in srgb, var(--farbe-warnung-hell) 55%, transparent); }
.kk-aktionen { justify-content: flex-end; flex-wrap: wrap; }
.kk-aktionen form { margin: 0; }
.kk-fuss { margin: 12px 0 0; }
.kk-seiten { display: flex; gap: 8px; margin-top: 8px; }
.kk-marke { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.kk-marke-warnung { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.kk-marke-info { background: color-mix(in srgb, var(--farbe-akzent) 14%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.kk-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.kk-schalter { margin-top: 12px; }
.kk-neu-knopf { margin: 12px 0 0; }
.kk-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.kk-angaben dt { color: var(--farbe-text-leise); }
.kk-angaben dd { margin: 0; overflow-wrap: anywhere; }
/* Orte, Arten, Alter */
.kk-zeile { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.kk-zeile-feld { flex: 1 1 auto; min-width: 0; }
.kk-zeile-feld input[type="text"], .kk-zeile-feld input[type="number"] { width: 100%; }
.kk-zeile-farbe input[type="color"] { width: 3rem; height: 2.5rem; padding: 2px; border: 1px solid var(--farbe-rand); border-radius: 8px; background: var(--farbe-flaeche); }
.kk-zeile-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.kk-anzahl { margin-right: 8px; white-space: nowrap; font-size: 0.8125rem; }
/* Felder des Anmeldeformulars */
.kk-feld { display: grid; grid-template-columns: 14rem minmax(0, 1fr) minmax(0, 1.2fr) auto auto; align-items: start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--farbe-rand); }
.kk-feld:first-child { border-top: 0; }
.kk-feld select, .kk-feld input[type="text"], .kk-feld textarea { width: 100%; }
.kk-feld-pflicht { padding-top: 8px; white-space: nowrap; }
.kk-feld-werte[hidden] { display: none; }
/* Termine */
.kk-termin { border: 1px solid var(--farbe-rand); border-radius: 10px; padding: 12px; margin-bottom: 12px; background: var(--farbe-flaeche); }
.kk-termin[hidden] { display: none; }
.kk-termin-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kk-termin-felder { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.kk-tage { margin-top: 12px; }
.kk-tage-hinweis { margin: 4px 0 8px; }
.kk-tage-liste { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.kk-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--farbe-rand); border-radius: 999px; background: var(--farbe-flaeche-leise); font-size: 0.875rem; cursor: pointer; }
.kk-tag:has(input:not(:checked)) { opacity: 0.55; text-decoration: line-through; }
/* Bilder */
.kk-bilder { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.kk-bild { display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 1px solid var(--farbe-rand); border-radius: 10px; background: var(--farbe-flaeche); }
.kk-bild-rahmen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--farbe-flaeche-leise); }
.kk-bild-vorschau { display: block; width: 100%; height: 100%; object-fit: cover; }
.kk-bild-knoepfe { display: flex; justify-content: space-between; gap: 2px; }
@media (max-width: 900px) {
    .kk-feld { grid-template-columns: 1fr; }
    .kk-feld-pflicht { padding-top: 0; }
    .kk-zeile { flex-wrap: wrap; }
}
.jb-absage-vermerk { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 600; }
.jb-absage-vermerk .text-leise { font-weight: 400; }
.jb-absage-text { width: 100%; min-height: 18em; line-height: 1.5; }

/* ==== Haasis Bleche (Kundenlösung, PLAN.md E107): Anfragen, Material & Stärken, Profilarten ==== */
.hb-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.hb-filter .feld { margin: 0; flex: 1 1 200px; }
.hb-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.hb-liste td, .hb-positionen td { vertical-align: top; }
.hb-liste tr.hb-neu td { background: color-mix(in srgb, var(--farbe-warnung-hell) 55%, transparent); }
.hb-positionen tr.hb-zusatz td { padding-top: 0; border-top: 0; }
.hb-fuss { margin: 12px 0 0; }
.hb-seiten { display: flex; gap: 8px; margin-top: 8px; }
.hb-stand { display: inline-block; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.hb-stand-1 { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.hb-stand-2 { background: color-mix(in srgb, var(--farbe-akzent) 14%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.hb-stand-3 { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.hb-stand-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.hb-stand-formular .feld { margin: 0; }
.hb-tage { display: inline-flex; align-items: center; gap: 8px; }
.hb-tage input[type="text"] { width: 5rem; text-align: right; }
.hb-spalten { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin: 16px 0; }
.hb-spalten > .karte { margin: 0; }
.hb-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.hb-angaben dt { color: var(--farbe-text-leise); }
.hb-angaben dd { margin: 0; overflow-wrap: anywhere; }
.hb-datenschutz { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; }
.hb-zwischentitel { margin: 24px 0 12px; font-size: 1.125rem; }
.hb-material .hb-felder { display: grid; gap: 12px 16px; grid-template-columns: minmax(0, 1fr) 9rem; align-items: start; margin-bottom: 12px; }
.hb-material .hb-felder .feld { margin: 0; }
.hb-kurz { width: 6rem; text-align: right; }
.hb-gruppe { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.hb-gruppe legend { padding: 0; margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--farbe-rand-stark); border-radius: 999px; background: var(--farbe-flaeche); cursor: pointer; }
.hb-chip-aus { opacity: 0.6; }
.hb-ral { display: flex; align-items: center; gap: 6px; }
.hb-hat-fehler { border-color: var(--farbe-gefahr); }
.hb-fehlerfeld { border-color: var(--farbe-gefahr); }
.hb-staerken td, .hb-profile td { vertical-align: middle; }
.hb-profile input[type="text"] { width: 100%; max-width: 28rem; }
.hb-neue-zeile td { background: var(--farbe-flaeche-leise); }
@media (max-width: 640px) {
    .hb-material .hb-felder { grid-template-columns: minmax(0, 1fr); }
    .hb-angaben { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .hb-angaben dd { margin-bottom: 8px; }
}

/* ---------- MaxCine-Quiz (Kundenlösung, PLAN.md E107) ---------- */
.mxq-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.mxq-filter .feld { margin: 0; flex: 1 1 180px; }
.mxq-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.mxq-liste td { vertical-align: top; }
.mxq-liste .knopf-reihe { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.mxq-aktionen form { margin: 0; }
.mxq-bild { display: inline-flex; margin-left: 6px; color: var(--farbe-text-leise); vertical-align: middle; }
.mxq-fehlt { color: var(--farbe-gefahr); font-weight: 600; }
.mxq-fuss { margin: 12px 0 0; }
.mxq-seiten { display: flex; gap: 8px; margin-top: 8px; }
.mxq-stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mxq-stufe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--farbe-rand); }
.mxq-stufe:first-child { border-top: 0; }
.mxq-zeile { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.mxq-zeile-feld { flex: 1 1 auto; min-width: 0; }
.mxq-zeile-feld input[type="text"] { width: 100%; }
.mxq-zeile-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.mxq-anzahl { margin-right: 8px; white-space: nowrap; font-size: 0.8125rem; }
.mxq-neu-knopf { margin: 12px 0 0; }
.mxq-antworten { display: grid; gap: 10px; }
.mxq-antwort { display: flex; align-items: flex-start; gap: 12px; }
.mxq-richtig { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 40px; padding: 0 8px; border: 1px solid var(--farbe-rand); border-radius: 8px; cursor: pointer; font-size: 0.875rem; }
.mxq-richtig:has(input:checked) { border-color: var(--farbe-erfolg); background: color-mix(in srgb, var(--farbe-erfolg) 12%, transparent); font-weight: 600; }
.mxq-antwort-feld { flex: 1 1 auto; min-width: 0; }
.mxq-antwort-feld input[type="text"] { width: 100%; }
@media (max-width: 700px) {
    .mxq-antwort { flex-direction: column; gap: 6px; }
    .mxq-richtig { min-height: 36px; }
}

/* ============================================================
   App (Kundenlösung Metzgerei Bühler, PLAN.md E108): Seiten, Elemente, Aussehen
   ============================================================ */
.bapp-liste-tabelle td { vertical-align: middle; }
.bapp-aktionen { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.bapp-aktionen form { margin: 0; }
.bapp-zeile { display: flex; align-items: center; gap: 12px; }
.bapp-symbol { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); border-radius: 10px; overflow: hidden; }
.bapp-symbol img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bapp-symbol:empty { background: repeating-linear-gradient(45deg, var(--farbe-flaeche-leise), var(--farbe-flaeche-leise) 6px, var(--farbe-flaeche) 6px, var(--farbe-flaeche) 12px); }

.bapp-liste { display: grid; gap: 12px; }
.bapp-el { border: 1px solid var(--farbe-rand); border-radius: 12px; background: var(--farbe-flaeche); overflow: hidden; }
.bapp-el.feld-fehler { border-color: var(--farbe-gefahr); }
.bapp-el-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; background: var(--farbe-flaeche-leise); border-bottom: 1px solid var(--farbe-rand); }
.bapp-el-typ { display: inline-flex; align-items: center; gap: 8px; }
.bapp-el-aktionen { gap: 4px; align-items: center; flex-wrap: wrap; }
.bapp-el-aus { margin: 0 8px 0 0; font-size: 0.9rem; }
.bapp-el-koerper { padding: 14px 16px; display: grid; gap: 12px; }
.bapp-el-felder { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.bapp-el.ist-ausgeblendet .bapp-el-koerper { opacity: 0.5; }
.bapp-el.ist-ausgeblendet .bapp-el-kopf { background: var(--farbe-warnung-hell); }
.bapp-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--farbe-rand); }
.bapp-neu-titel { font-weight: 600; margin-right: 4px; }
.bapp-farben { display: grid; gap: 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
    .bapp-el-felder, .bapp-farben { grid-template-columns: minmax(0, 1fr); }
    .bapp-el-kopf { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   Workshops (Kundenlösung der Wissenswerkstatt, PLAN.md E108): Liste, Formular, Auswahllisten, Anmeldungen
   ========================================================================== */
.wsw-reiter { margin-bottom: 12px; }
.wsw-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.wsw-filter .feld { margin: 0; flex: 1 1 180px; }
.wsw-filter-knoepfe { display: flex; gap: 8px; align-items: center; }
.wsw-liste td { vertical-align: top; }
.wsw-liste tr.wsw-neu td { background: color-mix(in srgb, var(--farbe-warnung-hell) 55%, transparent); }
.wsw-aktionen { justify-content: flex-end; flex-wrap: wrap; }
.wsw-aktionen form { margin: 0; }
.wsw-fuss { margin: 12px 0 0; }
.wsw-seiten { display: flex; gap: 8px; margin-top: 8px; }
.wsw-marke { display: inline-block; margin-left: 6px; padding: 2px 10px; font-size: 0.8125rem; font-weight: 600; border-radius: 999px; white-space: nowrap; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); }
.wsw-marke-aus { background: var(--farbe-warnung-hell); border-color: var(--farbe-warnung); color: var(--farbe-text); }
.wsw-marke-info { background: color-mix(in srgb, var(--farbe-akzent) 14%, white); border-color: var(--farbe-akzent); color: var(--farbe-text); }
.wsw-auswahl { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.wsw-termine { display: grid; gap: 10px; }
.wsw-termine[hidden] { display: none; }
.wsw-termin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.wsw-termin-nr { min-width: 3.5rem; font-weight: 600; }
.wsw-bis { color: var(--farbe-text-leise); }
.wsw-bild { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.wsw-bild-rahmen { width: 160px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand); }
.wsw-bild-vorschau { display: block; width: 100%; height: 100%; object-fit: cover; }
.wsw-bild-vorschau[hidden] { display: none; }
.wsw-bild-knoepfe, .wsw-datei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wsw-datei input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.wsw-zeile { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.wsw-zeile[hidden] { display: none; }
.wsw-zeile-feld { flex: 1 1 auto; min-width: 0; }
.wsw-zeile-feld input[type="text"] { width: 100%; }
.wsw-zeile-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.wsw-anzahl { margin-right: 8px; white-space: nowrap; font-size: 0.8125rem; }
.wsw-neu-knopf { margin: 12px 0 0; }
.wsw-angaben { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; }
.wsw-angaben dt { color: var(--farbe-text-leise); }
.wsw-angaben dd { margin: 0; overflow-wrap: anywhere; }
.wsw-umbruch { white-space: pre-line; }
@media (max-width: 700px) {
    .wsw-angaben { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .wsw-angaben dd { margin-bottom: 10px; }
    .wsw-liste thead { display: none; }
    .wsw-liste, .wsw-liste tbody, .wsw-liste tr, .wsw-liste td { display: block; width: 100%; }
    .wsw-liste tr { padding: 10px 0; border-bottom: 1px solid var(--farbe-rand); }
    .wsw-liste td { padding: 2px 0; border: 0; }
    .wsw-zeile { flex-wrap: wrap; }
    .wsw-aktionen { justify-content: flex-start; }
}

/* ---------- Römerstraße – Orte und Galerie (Kundenlösung, PLAN.md E108) ---------- */
.rsr-text { margin: 4px 0 0; max-width: 60rem; }
.rsr-liste { list-style: none; margin: 0; padding: 0; }
.rsr-listenzeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--farbe-rand); }
.rsr-listenzeile:last-child { border-bottom: 0; }
.rsr-listenname { font-weight: 600; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.rsr-listenzeile .text-leise { flex: 0 1 auto; }
.rsr-neu { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--farbe-rand); }
.rsr-neu-reihe { display: flex; gap: 12px; margin-top: 6px; align-items: stretch; }
.rsr-neu-reihe input { flex: 1 1 auto; min-width: 0; }
.rsr-neu-knopf { margin: 12px 0 0; }
.rsr-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.rsr-filter input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.rsr-seiten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.rsr-zeile { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; padding: 6px 0; }
.rsr-zeile[hidden] { display: none; }
.rsr-zeile-feld { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rsr-zeile-feld input[type="text"], .rsr-zeile-feld select { width: 100%; }
.rsr-zeile > select { flex: 0 0 9rem; }
.rsr-zeile-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.rsr-zeile-bild { flex: 0 0 12rem; }
.rsr-anzahl { margin-right: 8px; white-space: nowrap; font-size: 0.8125rem; }
.rsr-farbe { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; margin-top: 4px; background: var(--rsr-farbe, #97bf0d); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
.rsr-stamm .rsr-zeile-name { flex: 2 1 14rem; }
.rsr-stamm .rsr-zeile-wahl, .rsr-stamm .rsr-zeile-breite, .rsr-stamm .rsr-zeile-laenge { flex: 1 1 9rem; }
.rsr-stamm .rsr-zeile-bild { flex: 1 1 12rem; }
.rsr-bild { align-items: center; }
.rsr-bild-vorschau { flex: 0 0 120px; display: flex; flex-direction: column; gap: 4px; }
.rsr-bild-vorschau img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; background: var(--farbe-rand); }
.rsr-bild-vorschau img[hidden] { display: none; }
.rsr-bild-vorschau .zelle-pfad { font-size: 0.75rem; overflow-wrap: anywhere; }
.rsr-kategorien { display: grid; gap: 6px; }
.rsr-neuer-abschnitt { margin-top: 16px; }
@media (max-width: 700px) {
    .rsr-zeile, .rsr-listenzeile, .rsr-neu-reihe { flex-wrap: wrap; }
    .rsr-zeile-bild, .rsr-zeile > select { flex: 1 1 100%; }
    .rsr-bild-vorschau { flex: 1 1 100%; }
}

/* Tooltip für alle Elemente mit title (tooltip.js, 23.10.2026): schwarzer Hinweis wie an den Karten-Knöpfen des Shops. Liegt als Popover in
   der obersten Ebene, damit er auch über offenen Dialogen steht; Lage und Pfeil setzt das Skript (CSSOM, kein Inline-Style im Markup). */
.cm-tooltip {
    position: fixed; inset: auto; margin: 0; border: 0; padding: 5px 10px; overflow: visible;
    width: max-content; max-width: min(22rem, calc(100vw - 12px)); height: auto;
    border-radius: 4px; background: #1f1f1f; color: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
    font: 500 12.5px/1.4 inherit; font-family: inherit; white-space: pre-line; text-align: left;
    pointer-events: none; z-index: 100000; animation: cm-tooltip-ein 0.15s ease-out;
}
.cm-tooltip[hidden] { display: none; }
.cm-tooltip::before {
    content: ""; position: absolute; left: var(--pfeil, 50%); bottom: -5px; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1f1f1f; border-bottom-width: 0;
}
.cm-tooltip.ist-unten::before { bottom: auto; top: -5px; border-top-width: 0; border-top-color: transparent; border-bottom: 5px solid #1f1f1f; }
@keyframes cm-tooltip-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cm-tooltip { animation: none; } }

/* ---- Fußzeilenmenü: Auswahl der Seiten (modules/footermenu) ---- */
.fm .fm-inhalt { display: grid; gap: 1rem; padding: 0 1.25rem 1.25rem; }
.fm .fm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fm .fm-zeile { display: flex; align-items: center; gap: .85rem; padding: .55rem .75rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius, 10px); background: var(--farbe-flaeche); }
.fm .fm-nr { flex: none; min-width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, .06)); font-size: .8rem; font-weight: 600; }
.fm .fm-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .7rem; }
.fm .fm-tag { font-size: .78rem; color: var(--farbe-text-leise, #6b7280); padding: .1rem .55rem; border-radius: 999px; background: var(--farbe-hintergrund-leise, rgba(0, 0, 0, .06)); }
.fm .fm-aktionen { flex: none; display: inline-flex; gap: .15rem; }
.fm .fm-knopf { padding: .35rem .5rem; }
.fm .fm-knopf[disabled] { opacity: .35; }
.fm .fm-neu-zeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.fm .fm-neu-zeile select { flex: 1 1 18rem; min-width: 0; }

/* ---- Kampagnen-Manager (Addon, E120) ---- */
.spk-felder-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .spk-felder-3 { grid-template-columns: minmax(0, 1fr); } }
.cp-marke { display: inline-block; padding: 1px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-rand-stark); color: var(--farbe-text-leise); white-space: nowrap; }
.cp-marke-an { background: var(--farbe-erfolg-hell); border-color: var(--farbe-erfolg); color: var(--farbe-text); }
.cp-marke-aus { background: color-mix(in srgb, var(--farbe-gefahr) 11%, white); border-color: var(--farbe-gefahr); color: var(--farbe-text); }
.cp-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cp-filter input[type="search"] { min-width: 14rem; }
.cp-verschieben { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.cp-verschieben select, .cp-verschieben input[type="text"] { min-width: 0; max-width: 16rem; }
.cp-stufe { border: 1px solid var(--farbe-rand); border-radius: var(--radius, 12px); padding: 16px; margin-bottom: 16px; background: var(--farbe-flaeche); }
.cp-stufe-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cp-stufe-nr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--farbe-primaer-hell); color: var(--farbe-primaer-dunkel); font-weight: 700; }
.cp-stufe-knoepfe { margin-left: auto; display: inline-flex; gap: 4px; }
.cp-regeln { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--farbe-rand); }
.cp-regeln-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cp-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-regel select { min-width: 0; max-width: 20rem; }
.cp-regel .cp-tage { width: 5.5rem; }
.cp-regel-wenn { color: var(--farbe-text-leise); }
.cp-tage-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-person { border: 1px solid var(--farbe-rand); border-radius: var(--radius, 12px); padding: 16px; margin-bottom: 16px; }
.cp-person-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cp-person-kopf [data-cp-person-weg] { margin-left: auto; }
.cp-daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0; }
.cp-daten dt { color: var(--farbe-text-leise); }
.cp-daten dd { margin: 0; }
.cp-ergebnis { margin: 0 0 16px; padding-left: 20px; }

/* ---- MOPS (Addon, E121) ---- */
.mp-farbe { display: flex; align-items: center; gap: 8px; }
.mp-farbe input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--farbe-rand-stark); border-radius: 8px; background: var(--farbe-flaeche); cursor: pointer; flex: none; }
.mp-farbe input[type="text"] { min-width: 0; flex: 1 1 auto; max-width: 10rem; }