/* ================================================================
           CSS Custom Properties
           ================================================================ */
        :root {
            --cms-bg: #1a1a20;
            --cms-bg-alt: #22222a;
            --cms-surface: #2a2a34;
            --cms-text: #c0c0c8;
            --cms-text-muted: #78788a;
            --cms-heading: #e0e0e8;
            --cms-link: #6aacda;
            --cms-link-hover: #e08050;
            --cms-border: #3a3a44;
            --cms-accent: #6aacda;
            --cms-danger: #d05040;
            --cms-success: #50a060;
            --cms-btn-bg: #6aacda;
            --cms-btn-text: #fff;
        }
        body.light-theme {
            --cms-bg: #f5f5f8;
            --cms-bg-alt: #ffffff;
            --cms-surface: #ffffff;
            --cms-text: #24242c;
            --cms-text-muted: #5a5a66;
            --cms-heading: #14141a;
            --cms-link: #1f5a96;
            --cms-link-hover: #b84820;
            --cms-border: #c8c8d0;
            --cms-accent: #2a70b8;
            --cms-danger: #a82a1e;
            --cms-success: #1f6a30;
            --cms-btn-bg: #2a70b8;
            --cms-btn-text: #fff;
        }

        /* ================================================================
           Base Reset & Typography (from cms_styles.css)
           ================================================================ */
        * { box-sizing: border-box; }
        html, body, div, form, table { margin: 0; padding: 0; }
        /* Anker-Sprünge sollen unter dem (ggf. gepinnten) Topmenu landen,
           nicht dahinter. 2.5em deckt die Topmenu-Hoehe ab. */
        html { scroll-padding-top: 2.5em; }
        body {
            font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
            font-size: 1em;
            background-color: var(--cms-bg);
            color: var(--cms-text);
            min-height: 100vh;
            padding-bottom: 3em;
        }
        img { display: block; }
        a { text-decoration: none; color: var(--cms-link); }
        a:hover { color: var(--cms-link-hover); }
        /* Trenner (hr): EIN Regelsatz fuer alle Themes. Standard ist eine Linie in
           Textfarbe; ein Theme setzt nur noch die --cms-hr-*-Variablen (in seinem
           eigenen "body... hr"-Block), nicht mehr die Eigenschaften selbst.
           Bild-Trenner brauchen zwingend --cms-hr-height:auto + --cms-hr-ratio
           (Bildmasse): mit fester Pixelhoehe presst background-size:contain das
           Bild auf diese Hoehe, es wird schmal statt contentbreit.
           Siehe .claude/skills/cms-theme/SKILL.md Abschnitt 6. */
        hr {
            clear: both;
            border: 0;
            width: 100%;
            max-width: var(--cms-hr-max-width, 100%);
            height: var(--cms-hr-height, 2px);
            aspect-ratio: var(--cms-hr-ratio, auto);
            margin: var(--cms-hr-margin, 2.5em auto 1em auto);
            background-color: transparent;
            background-image: var(--cms-hr-image, linear-gradient(var(--cms-text), var(--cms-text)));
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            opacity: var(--cms-hr-opacity, 1);
            filter: var(--cms-hr-filter, none);
            box-shadow: var(--cms-hr-shadow, none);
        }
        strong { color: white; }
        body.light-theme strong { color: var(--cms-heading); }

        /* ================================================================
           Logo Space (from cms_styles.css)
           ================================================================ */
        .logospace {
            --logo-bg-color: black;
            width: 100%;
            background-color: var(--logo-bg-color);
        }
        .logobg {
            background-image: none;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 0 0.5em;
            height: 10em;
            display: flex;
            align-items: center;
            position: relative;
        }
        .logobg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right,
                var(--logo-bg-color) 0%,
                transparent 20%,
                transparent 80%,
                var(--logo-bg-color) 100%
            );
            pointer-events: none;
        }
        .logotext {
            position: relative;
            z-index: 1;
            max-width: 1024px;
            width: 100%;
            margin: 0 auto;
            font-size: 2.5em;
            color: var(--cms-heading);
            font-weight: bold;
        }
        .logotext a { color: var(--cms-heading); }
        .logotext a:hover { color: #fff; }

        /* ================================================================
           Top Menu (from cms_styles.css)
           ================================================================ */
        .topmenuspace {
            background-color: var(--cms-bg);
            width: 100%;
            border-bottom: 1px solid var(--cms-border);
            position: relative;
            z-index: 49;
        }
        .topmenuspace.topmenuspace-pinned {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        .topmenuspace-placeholder { display: none; }
        .topmenuspace-placeholder.is-active { display: block; }
        .mainmenu {
            max-width: 1024px;
            margin: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
        }
        .mainmenu-items {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            align-self: stretch;
            /* Wrapped Zeilen nicht auf die volle Container-Hoehe strecken,
               sondern oben anlegen - so behaelt jede Zeile ihre Item-Hoehe. */
            align-content: flex-start;
        }
        .mainmenu-items a {
            color: #fff;
            display: flex;
            align-items: center;
            padding: 0 1em;
            text-transform: uppercase;
            font-size: 1em;
            border-right: 1px solid var(--cms-border);
            transition: background 0.3s ease;
            position: relative;
            /* Stabile Buttonhoehe, unabhaengig davon wie viele Zeilen das
               Menue beim Wrappen einnimmt. rem statt em, damit die Hoehe
               nicht mit der Theme-spezifischen Element-Font-Size schrumpft. */
            min-height: 2.2rem;
            box-sizing: border-box;
        }
        .mainmenu-items a:hover {
            background-color: var(--cms-accent);
            color: #fff;
        }
        .mainmenu-items a.active {
            background-color: var(--cms-accent);
            color: #fff;
        }
        .mainmenu-items a.mainmenu-home {
            border-right: 1px solid var(--cms-border);
            padding: 0 0.7em;
        }
        .mainmenu-items a.mainmenu-home i {
            font-size: 1em;
            line-height: 1;
        }
        .mainmenu-auth {
            padding: 0.3em 0.5em;
        }
        .mainmenu-auth button {
            background: none;
            border: 1px solid var(--cms-text-muted);
            color: var(--cms-accent);
            cursor: pointer;
            padding: 0.3em 0.5em;
            border-radius: 3px;
            font-size: 0.85em;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 1.9em;
        }
        .mainmenu-auth button:hover { color: var(--cms-link); border-color: var(--cms-accent); }
        #btn-logout { color: var(--cms-danger); border-color: var(--cms-danger); }
        #btn-logout:hover { color: #fff; background-color: var(--cms-danger); }

        /* ================================================================
           Middle Box = Sidebar + Content (from cms_styles.css)
           ================================================================ */
        .middleboxspace {
            width: 100%;
            background-color: var(--cms-bg-alt);
            min-height: 60vh;
        }
        .middlebox {
            max-width: 1024px;
            margin: auto;
            display: flex;
            padding: 0 0.5em;
        }

        /* Sidebar Menu */
        .menu {
            width: 200px;
            min-width: 200px;
            margin-top: 1.4em;
            padding-right: 1em;
            position: sticky;
            align-self: flex-start;
        }
        .menu ul {
            margin: 0 0 7px 0;
            padding: 0;
            list-style: none;
            border: 1px solid var(--cms-text-muted);
            border-radius: 5px;
            overflow: hidden;
            background-color: rgba(255,255,255,0.2);
        }
        .menu ul ul {
            border: 0;
            margin: 0;
            background-color: transparent;
            border-radius: 0;
        }
        .menu a {
            display: block;
            font-weight: bold;
            font-size: 0.9em;
            color: var(--cms-text);
            text-decoration: none;
            padding: 5px 0 5px 7px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            position: relative;
        }
        .menu a:hover { color: var(--cms-link-hover); }
        .menu a.active-sub {
            color: white;
            background-color: var(--cms-accent);
        }
        .menu a.active-parent {
            color: var(--cms-link);
        }

        /* Sub-Levels: weniger prominent als Top-Level.
           Sidebar wird flach in EIN <ul> gerendert (siehe navigation.js
           renderSubMenuTree), Tiefe ueber .submenu-d{N}-Klasse + padding-left. */
        /* Alle Sub-Ebenen (d1..beliebige Tiefe) normal gewichtet, nur Top
           (d0) bleibt prominent. Attribut-Selektor statt fester Liste, damit
           tiefe Ebenen nicht auf den Top-Stil zurueckfallen. */
        .menu a[class*="submenu-d"]:not(.submenu-d0) { font-weight: normal; }

        /* Theme-Overrides fuer Seitenmenue:
           Alle Themes (greenwood/medieval/space/steampunk/urban) rendern vor .menu a
           ein Pseudoelement-Symbol (Stern/Pfeil) beim Hover bzw. aktiver Seite.
           Das wird hier zentral deaktiviert, damit der Aktiv-Zustand nur noch durch
           die Hintergrundfarbe markiert wird (wie vom User gewuenscht). */
        body .menu a::before { content: none !important; }

        /* Public-Marker: kleines Dreieck oben rechts, nur fuer eingeloggte User sichtbar.
           Zeigt an welche Seiten oeffentlich sind (fuer Gaeste erreichbar).
           Eigenes <span>-Element statt Pseudoelement, damit themen-eigene ::before/::after
           (z.B. Unterstrich-Balken oder aktiv-Stern) nicht kollidieren. */
        .public-marker { display: none; }
        body.is-auth .public-marker {
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 7px 7px 0;
            border-color: transparent var(--cms-link) transparent transparent;
            pointer-events: none;
            z-index: 2;
        }
        /* Privat-Marker: gleiches Dreieck wie public-marker, nur unten rechts
           und immer in rot (cms-danger), damit Privat-Status ueber alle
           Themes hinweg sofort erkennbar ist. */
        .private-marker { display: none; }
        body.is-auth .private-marker {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7px 7px 0 0;
            border-color: transparent var(--cms-danger) transparent transparent;
            pointer-events: none;
            z-index: 2;
        }
        /* Partiell-Privat-Marker: gleiches Dreieck wie private-marker (unten
           rechts), aber in Orange statt Rot. Zeigt an, dass die Seite oeffentlich
           ist, aber einzelne [privat]-Bloecke enthaelt. */
        .partiell-privat-marker { display: none; }
        body.is-auth .partiell-privat-marker {
            display: block;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 7px 7px 0 0;
            border-color: transparent #e8880c transparent transparent;
            pointer-events: none;
            z-index: 2;
        }

        /* Content Box */
        .contentbox {
            flex: 1;
            padding: 1.4em 0;
            min-width: 0;
        }
        .content {
            line-height: 150%;
            color: var(--cms-text);
        }
        .content:after { content: "."; visibility: hidden; display: block; height: 1px; clear: both; }
        .content a:hover { text-decoration: underline; color: var(--cms-link-hover); }
        /* Seitenueberschrift oben buendig mit dem Seitenmenue: enge Zeilenhoehe statt
           der geerbten Fliesstext-Zeilenhoehe (Themes bis 1.8), dazu text-box-trim auf
           die Versalhoehe (schriftunabhaengig; ohne Support bleibt die enge Zeilenhoehe). */
        .content h1 { color: var(--cms-heading); font-size: 1.6em; line-height: 1.2; margin: 0 0 0.12em 0; text-box: trim-start cap alphabetic; }
        .content h2 { color: var(--cms-link); font-size: 1.3em; margin: 1em 0 0.4em 0; }
        .content h3 { color: var(--cms-link); font-size: 1.1em; }
        .content li { margin-bottom: 0.4em; }
        .content li > ul { margin-top: 0.4em; }

        /* ================================================================
           Footer (from cms_styles.css)
           ================================================================ */
        .footer {
            max-width: 1024px;
            margin: 2em auto 0;
            padding: 1em 0.5em;
            color: var(--cms-text-muted);
            font-size: 0.85em;
            border-top: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1em;
            flex-wrap: wrap;
        }
        .footer-links {
            display: flex;
            gap: 1em;
            align-items: center;
        }
        .footer-links a { color: var(--cms-text-muted); font-size: 0.9em; }
        .footer-links a:hover { color: var(--cms-link); }
        .footer-search {
            position: relative;
        }
        .footer-search input {
            background-color: rgba(255,255,255,0.08);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            padding: 0.3em 0.6em;
            font-family: inherit;
            font-size: 0.85em;
            border-radius: 3px;
            width: 200px;
            transition: width 0.3s, border-color 0.3s;
        }
        .footer-search input:focus {
            outline: none;
            border-color: var(--cms-link);
            width: 280px;
            background-color: rgba(255,255,255,0.12);
        }
        .footer-search input::placeholder { color: var(--cms-text-muted); }

        /* ================================================================
           Bild-Positionsklassen (from oldCMS ContentParser)
           ================================================================ */
        .bild-links { float: left; margin: 0 1em 1em 0; max-width: 33%; border-radius: 5px; }
        .bild-rechts { float: right; margin: 0 0 1em 1em; max-width: 33%; border-radius: 5px; }
        .bild-zentriert { display: block; margin: 1em auto; max-width: 100%; border-radius: 5px; }
        /* Portrait-Bilder (z.B. Personenlisten): Bild floatet links, der
           zugehoerige Text beginnt rechts auf Bildhoehe und umfliesst es. */
        .bild-portrait { float: left; clear: both; margin: 0 1em 1em 0; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: center top; }
        /* Personenliste: CMS.navigation.groupPortraits wrappt jedes Portrait
           mit seinem Beschreibungstext (bis zum naechsten Portrait) in eine
           .portrait-row. Diese ist ein eigener Block-Formatting-Context
           (flow-root) und umschliesst damit ihren Float vollstaendig. Folge:
           der Text bleibt neben SEINEM Portrait (kurze Texte rutschen nicht
           mehr nach oben zum vorherigen Bild), langer Text umfliesst es, und
           das naechste Portrait beginnt garantiert darunter ohne Ueberschnei-
           dung. Funktioniert auch wenn mehrere Portraits per <br> in EINEM
           Absatz stehen (Editor-Standard). */
        .page-body .portrait-row { display: flow-root; clear: both; }
        .page-body .portrait-row:not(:last-child) { margin-bottom: 1em; }
        /* Fallback ohne JS: Portrait-Absatz selbst als flow-root. */
        .page-body p:has(> .bild-portrait) { display: flow-root; }

        /* Ueberschriften und gerahmte Bloecke sollen NEBEN
           einem gefloateten Bild enden statt darunter durchzulaufen - so
           wie .klapp, das ueber overflow:hidden schon einen eigenen Block-
           Formatting-Context bildet.
           Hintergrund: fast alle Themes geben .content h2 ein
           position:relative (fuer die dekorative ::after-Linie). Ein
           positioniertes Element wird aber UEBER dem Float gezeichnet und
           faengt dessen Klicks ab - das Bild liess sich auf Hoehe der
           Ueberschrift nicht mehr per Lightbox oeffnen. Nicht positionierte
           Bloecke (normale Absaetze) ueberlappen zwar optisch, bleiben aber
           klickbar, weil der Float ueber ihrem Hintergrund liegt.
           display:flow-root loest beides: die Box ueberlappt den Float gar
           nicht erst, und die ::after-Linie sitzt am Textanfang statt unter
           dem Bild. Gerahmte Bloecke ([hinweis], [privat]) bekommen es aus
           demselben Grund: sie liefen optisch hinter dem Bild durch.
           .klapp, .spalten und .cms-tab-wrap sind ueber overflow bzw.
           column-count ohnehin schon eigene BFCs. Absaetze/Listen bleiben
           bewusst aussen vor - die sollen das Bild weiter umfliessen. */
        .page-body h1, .page-body h2, .page-body h3,
        .page-body h4, .page-body h5, .page-body h6,
        .page-body .hinweis, .page-body .privat-block { display: flow-root; }
        .datei-video {
            display: block;
            max-width: 100%;
            max-height: 85vh;
            max-height: 85dvh;
            margin: 1em auto;
            background: #000;
            border-radius: 4px;
        }
        .datei-link { color: var(--cms-link); text-decoration: underline; display: inline-flex; align-items: center; gap: 0.3em; }

        /* ================================================================
           Content-Plugins (migriert von oldCMS)
           ================================================================ */
        .interner-link-error { color: var(--cms-danger); font-weight: bold; font-size: 0.9em; }

        .hinweis {
            background-color: rgba(106,172,218,0.1);
            border-left: 4px solid var(--cms-accent);
            padding: 0.8em 1em; margin: 1em 0;
            border-radius: 0 5px 5px 0;
        }
        .hinweis p:last-child { margin-bottom: 0; }

        /* [privat]-Block: wird nur an Owner/Admin einer partiell privaten
           Seite ausgeliefert - Markierung, damit klar ist was versteckt ist */
        .privat-block {
            background-color: rgba(217,98,72,0.08);
            border: 1px dashed var(--cms-text-muted);
            border-left: 4px solid var(--cms-danger);
            padding: 0.8em 1em; margin: 1em 0;
            border-radius: 0 5px 5px 0;
            position: relative;
        }
        /* Freigabe-Button oben rechts im Block (nur Owner/Admin) */
        .privat-block-unlock {
            position: absolute;
            top: 0.4em; right: 0.4em;
            background: transparent;
            border: none;
            padding: 0.2em 0.3em;
            color: var(--cms-text-muted);
            cursor: pointer;
            line-height: 1;
        }
        .privat-block-unlock:hover { color: var(--cms-link); }
        .privat-block-unlock .mjcon-lock-open { width: 1.2em; height: 1.2em; }
        .privat-block::before {
            content: "\1F512 Privater Block";
            display: block;
            font-size: 0.75em; color: var(--cms-text-muted);
            letter-spacing: 0.05em; text-transform: uppercase;
            margin-bottom: 0.4em;
        }
        .privat-block p:last-child { margin-bottom: 0; }

        /* Jodit-Button "Privater Block" nur zeigen, wenn "Partiell Privat"
           im Edit-Formular angehakt ist (Klasse wird in editor.js getoggelt) */
        .partiell-privat-off .jodit-toolbar-button_insertPrivat,
        .partiell-privat-off [data-ref="insertPrivat"],
        .partiell-privat-off [ref="insertPrivat"] { display: none !important; }

        .klapp { border: 1px solid var(--cms-text-muted); border-radius: 5px; margin: 1em 0; overflow: hidden; }
        .klapp-header {
            background-color: rgba(255,255,255,0.1);
            padding: 0.6em 1em; cursor: pointer;
            font-weight: bold; color: var(--cms-heading); user-select: none;
            display: flex; justify-content: space-between; align-items: center;
        }
        .klapp-header:hover { background-color: rgba(255,255,255,0.15); }
        .klapp-header::after { content: "\25B6"; font-size: 0.8em; display: inline-block; transition: transform 0.2s; margin-left: 1em; }
        .klapp.open .klapp-header::after { transform: rotate(90deg); }
        .klapp-body { padding: 0.8em 1em; }

        .spalten { column-count: 2; column-gap: 2em; margin: 1em 0; }
        .spalten p { break-inside: avoid; }

        .cms-tab-wrap { margin: 1em 0; overflow-x: auto; }
        .cms-tab { border-collapse: collapse; width: auto; }
        .cms-tab td, .cms-tab th {
            border: 1px solid var(--cms-border);
            padding: 0.4em 0.7em;
            text-align: left;
            vertical-align: top;
        }
        .cms-tab th {
            background-color: rgba(106,172,218,0.1);
            font-weight: bold;
            color: var(--cms-heading);
        }
        .cms-tab tr:nth-child(even) td { background-color: rgba(255,255,255,0.03); }

        /* Anker-Index (Bilder): Flex-Row mit Wrap, alle Items gleich hoch.
           Bild fuellt Hoehe, Breite skaliert proportional. Link-Icon oben
           rechts springt zur Seite + Bild-Anker, Caption unten zeigt den
           Bildtitel. Klick auf das Bild oeffnet die Lightbox. */
        .bild-index {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5em;
            margin: 1em 0;
        }
        .bild-index-item {
            position: relative;
            margin: 0;
            height: 120px;
            overflow: hidden;
            border: 1px solid var(--cms-border);
            background-color: rgba(0,0,0,0.15);
            border-radius: 3px;
        }
        .bild-index-img {
            display: block;
            height: 100%;
            width: auto;
            cursor: zoom-in;
        }
        .bild-index-link {
            position: absolute;
            top: 4px; right: 4px;
            width: 22px; height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0,0,0,0.6);
            color: #fff;
            border-radius: 3px;
            text-decoration: none;
            font-size: 0.9em;
            z-index: 2;
            transition: background-color 0.15s;
        }
        .bild-index-link:hover { background-color: var(--cms-link); color: #fff; }
        .bild-index-caption {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            background-color: rgba(255,255,255,0.92);
            color: #000;
            font-size: 0.65em;
            padding: 2px 5px;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 500;
        }

        .inhaltsverzeichnis ul { margin: 0 0 0.5em 0; padding: 0 0 0 1.5em; }
        .inhaltsverzeichnis li { margin: 0.3em 0; }

        .unterseiten-item { margin-bottom: 1em; padding-bottom: 0.8em; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .unterseiten-item:last-child { border-bottom: none; }
        .unterseiten-item h3 { margin: 0 0 0.3em 0; }
        .unterseiten-item h3 .mjcon-goto { font-size: 0.75em; opacity: 0.6; margin-left: 0.2em; vertical-align: middle; }
        .unterseiten-item h3 a:hover .mjcon-goto { opacity: 1; }
        .unterseiten-teaser { color: inherit; font-size: 0.9em; margin: 0; white-space: pre-line; }

        .unterseiten-h2-index { margin-top: 1em; }
        .unterseiten-h2-item { margin-bottom: 1em; padding-bottom: 0.7em; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .unterseiten-h2-item:last-child { border-bottom: none; }
        .unterseiten-h2-titel { margin: 0 0 0.4em 0; font-size: 1.05em; }
        .unterseiten-h2-item .unterseiten-teaser { margin: 0 0 0.5em 0; }
        .unterseiten-h2-item .anker-chips { margin-left: 0.2em; }

        /* ================================================================
           Anker-Index (H2 / Bold)
           ================================================================ */
        .anker-index {
            margin-bottom: 1.5em;
        }
        .anker-index > strong { display: block; margin-bottom: 0.5em; color: var(--cms-heading); font-weight: normal; font-size: 1em; }
        .anker-index ul { margin: 0; padding: 0 0 0 1.2em; }
        .anker-index li { margin: 0.2em 0; font-size: 0.9em; }
        .anker-index a { color: var(--cms-link); }
        .anker-index a:hover { color: var(--cms-link-hover); text-decoration: underline; }
        .anker-chips { display: flex; flex-wrap: wrap; gap: 5px; }
        .anker-chip {
            display: inline-block;
            padding: 2px 9px;
            background: rgba(255,255,255,0.08);
            border: 1px solid var(--cms-border);
            border-radius: 12px;
            font-size: 0.82em;
            color: var(--cms-link);
            white-space: nowrap;
        }
        .anker-chip:hover { background: rgba(106,172,218,0.15); color: var(--cms-link-hover); }

        /* Inline "back to top" arrow right next to each bold that has an
           anker-bold id. Dezent, klein, dezenter Hover. */
        .anker-back-top {
            display: inline-block;
            margin-left: 0.25em;
            font-size: 0.85em;
            color: var(--cms-text-muted);
            text-decoration: none;
            opacity: 0.55;
            vertical-align: baseline;
            transition: opacity 0.15s, color 0.15s;
        }
        .anker-back-top:hover {
            opacity: 1;
            color: var(--cms-link);
        }
        .anker-back-top i { vertical-align: -0.1em; }

        /* ================================================================
           Prev/Next Navigation
           ================================================================ */
        .prevnext-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2em;
            padding-top: 1em;
            border-top: 1px solid var(--cms-border);
        }
        .prevnext-link {
            color: var(--cms-link);
            font-size: 0.95em;
            padding: 0.4em 0;
        }
        .prevnext-link:hover { color: var(--cms-link-hover); }
        .prevnext-arrow { font-size: 1.2em; }
        .prevnext-prev { text-align: left; }
        .prevnext-next { text-align: right; }

        /* ================================================================
           Global Tools (Top Menu)
           ================================================================ */
        .mainmenu-tools {
            padding: 0.3em 0.3em 0.3em 0;
            display: flex;
            align-items: center;
        }
        .global-tool-btn {
            background: none;
            border: 1px solid var(--cms-text-muted);
            color: var(--cms-accent);
            cursor: pointer;
            padding: 0.3em 0.5em;
            border-radius: 3px;
            font-size: 0.85em;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 1.9em;
        }
        .global-tool-btn:hover { color: var(--cms-link); border-color: var(--cms-accent); }

        .btn-group {
            display: inline-flex;
            position: relative;
        }
        .btn-group .global-tool-btn { border-radius: 0; margin: 0; }
        .btn-group .global-tool-btn:first-child { border-radius: 3px 0 0 3px; }
        .btn-group .global-tool-btn:last-of-type { border-radius: 0 3px 3px 0; border-left: none; }
        .btn-group .global-tool-btn + .global-tool-btn { border-left: none; }

        /* ================================================================
           Global Search (Footer)
           ================================================================ */
        .footer-search {
            display: flex;
            align-items: center;
            gap: 0;
        }
        .footer-search input {
            border-radius: 3px 0 0 3px;
        }
        .search-btn {
            background: rgba(255,255,255,0.08);
            border: 1px solid var(--cms-border);
            border-left: none;
            color: var(--cms-accent);
            padding: 0.3em 0.6em;
            cursor: pointer;
            font-size: 0.85em;
            border-radius: 0 3px 3px 0;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .search-btn:hover { color: var(--cms-link); border-color: var(--cms-link); }

        /* Search Modal (Shell + Header + Overlay via JqModal) */
        .search-modal-results {
            overflow-y: auto;
            flex: 1;
        }
        .search-result-item {
            display: block;
            padding: 0.8em 1.2em;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            color: var(--cms-text);
        }
        .search-result-item:hover {
            background-color: rgba(106,172,218,0.15);
            text-decoration: none;
            color: #fff;
        }
        .search-result-title {
            font-weight: bold;
            color: var(--cms-link);
            font-size: 1em;
            margin-bottom: 0.2em;
        }
        .search-result-item:hover .search-result-title { color: #fff; }
        .search-bc {
            font-size: 0.75em;
            color: var(--cms-text-muted);
        }
        .search-teaser {
            font-size: 0.85em;
            color: var(--cms-accent);
            margin-top: 0.3em;
            line-height: 1.4;
        }
        .search-no-results, .search-loading {
            padding: 2em;
            color: var(--cms-text-muted);
            text-align: center;
            font-size: 0.95em;
        }

        /* Search Prompt Modal (Shell + Header + Overlay via JqModal) */
        .search-prompt-body {
            display: flex;
            gap: 0.5em;
        }
        .search-prompt-body input {
            flex: 1;
            background: var(--cms-bg);
            color: var(--cms-text);
            border: 1px solid var(--cms-border);
            border-radius: 4px;
            padding: 0.5em 0.7em;
            font-size: 1em;
            font-family: inherit;
        }
        .search-prompt-body input:focus {
            outline: none;
            border-color: var(--cms-accent);
        }
        .search-prompt-body input::placeholder { color: var(--cms-text-muted); }
        .search-prompt-submit {
            background: var(--cms-bg);
            color: var(--cms-text);
            border: 1px solid var(--cms-border);
            border-radius: 4px;
            padding: 0.5em 0.9em;
            cursor: pointer;
            font-size: 0.95em;
        }
        .search-prompt-submit:hover {
            color: var(--cms-link);
            border-color: var(--cms-accent);
        }
        .search-prompt-submit i { margin-right: 0.3em; }

        /* Icon Picker Modal (Shell + Header + Overlay via JqModal; topLayer
           legt es ueber Jodit-Fullscreen). Titel-Zaehler bleibt: */
        .icon-picker-count {
            color: var(--cms-text-muted);
            font-size: 0.85em;
            margin-left: 0.4em;
        }
        .icon-picker-controls {
            padding: 0.8em 1.2em;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .icon-picker-controls input {
            width: 100%;
            box-sizing: border-box;
            background: var(--cms-bg);
            color: var(--cms-text);
            border: 1px solid var(--cms-border);
            border-radius: 4px;
            padding: 0.5em 0.7em;
            font-size: 1em;
            font-family: inherit;
        }
        .icon-picker-controls input:focus {
            outline: none;
            border-color: var(--cms-accent);
        }
        .icon-picker-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 0.4em;
            padding: 0.8em 1em;
            overflow-y: auto;
            flex: 1;
        }
        .icon-picker-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 0.6em 0.3em;
            border: 1px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            text-align: center;
            color: var(--cms-text);
            background: var(--cms-bg);
            min-height: 64px;
        }
        .icon-picker-item:hover {
            background: rgba(106,172,218,0.18);
            border-color: var(--cms-accent);
            color: #fff;
        }
        .icon-picker-item i {
            font-size: 1.6em;
            margin-bottom: 0.3em;
        }
        .icon-picker-item span {
            font-size: 0.7em;
            color: var(--cms-text-muted);
            word-break: break-all;
            line-height: 1.2;
        }
        .icon-picker-item:hover span { color: var(--cms-link); }
        .icon-picker-empty {
            padding: 1.2em;
            color: var(--cms-text-muted);
            font-style: italic;
            text-align: center;
            grid-column: 1 / -1;
        }

        /* Inline-Suche pro Seite (Plugin showSubSiteSearch) */
        .page-search {
            display: flex;
            align-items: center;
            margin: 0.5em 0 1em;
            max-width: 420px;
        }
        .page-search-input {
            flex: 1;
            background-color: rgba(255,255,255,0.08);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            padding: 0.4em 0.8em;
            border-radius: 3px 0 0 3px;
            font-size: 0.95em;
        }
        .page-search-input:focus {
            outline: none;
            border-color: var(--cms-link);
            background-color: rgba(255,255,255,0.12);
        }
        .page-search-input::placeholder { color: var(--cms-text-muted); }
        .page-search .page-search-btn {
            border-radius: 0 3px 3px 0;
        }

        /* ================================================================
           Contact Modal (Shell + Header + Overlay via JqModal)
           ================================================================ */
        .contact-body {
            padding: 0.4em;
            overflow-y: auto;
        }
        #contact-form input[type=text],
        #contact-form input[type=email],
        #contact-form textarea {
            display: block;
            width: 100%;
            box-sizing: border-box;
            background: var(--cms-bg);
            border: 1px solid var(--cms-border);
            border-radius: 4px;
            padding: 0.6em 0.8em;
            color: var(--cms-text);
            font-family: inherit;
            font-size: 0.95em;
            margin-bottom: 0.8em;
        }
        #contact-form textarea { resize: vertical; min-height: 120px; }
        #contact-form input:focus,
        #contact-form textarea:focus {
            outline: none;
            border-color: var(--cms-link);
        }
        /* Honeypot verstecken */
        #contact-website {
            position: absolute !important;
            left: -9999px !important;
            width: 1px !important;
            height: 1px !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
        .contact-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 0.2em;
        }
        #contact-status {
            margin-top: 0.8em;
            font-size: 0.9em;
            min-height: 1.2em;
            color: var(--cms-accent);
        }
        #contact-status.ok  { color: var(--cms-success); }
        #contact-status.err { color: var(--cms-danger); }

        /* ================================================================
           Plugin Multiselect (Edit Mode) - Custom Dropdown mit Checkbox-Icons
           ================================================================ */
        .edit-multiselect {
            position: relative;
            display: block;
            margin-bottom: 0.5em;
        }
        .edit-multiselect-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5em;
            width: 100%;
            background-color: var(--cms-bg);
            color: var(--cms-accent);
            border: 1px solid var(--cms-border);
            padding: 0.4em 0.6em;
            font-family: inherit;
            font-size: 1em;
            border-radius: 3px;
            cursor: pointer;
            text-align: left;
        }
        .edit-multiselect-trigger:hover,
        .edit-multiselect.open .edit-multiselect-trigger { border-color: var(--cms-link); color: var(--cms-link); }
        .edit-multiselect-summary {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .edit-multiselect-arrow {
            transition: transform 0.15s;
            flex-shrink: 0;
        }
        .edit-multiselect.open .edit-multiselect-arrow { transform: rotate(180deg); }
        .edit-multiselect-list {
            display: none;
            position: absolute;
            left: 0; right: 0; top: 100%;
            margin-top: 2px;
            background-color: var(--cms-bg-alt);
            border: 1px solid var(--cms-border);
            border-radius: 3px;
            max-height: 18em;
            overflow-y: auto;
            z-index: 50;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .edit-multiselect.open .edit-multiselect-list { display: block; }
        .edit-multiselect-item {
            display: flex;
            align-items: center;
            gap: 0.5em;
            padding: 0.4em 0.7em;
            cursor: pointer;
            color: var(--cms-text);
            user-select: none;
        }
        .edit-multiselect-item:hover { background-color: color-mix(in srgb, var(--cms-link) 14%, transparent); }
        .edit-multiselect-item[data-selected="true"] { background-color: color-mix(in srgb, var(--cms-link) 8%, transparent); }
        .edit-multiselect-item[data-selected="true"] { color: var(--cms-link); }
        .edit-multiselect-icon {
            flex-shrink: 0;
            color: var(--cms-link);
        }
        .edit-multiselect-item[data-selected="false"] .edit-multiselect-icon { color: var(--cms-text-muted); }

        .edit-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            margin-bottom: 0.8em;
            align-items: flex-start;
        }
        .edit-row-col .edit-input {
            margin-bottom: 0;
            box-sizing: border-box;
            height: 2.2em;
        }
        .edit-row-col-checkbox .edit-checkbox-box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2.2em;
            color: var(--cms-accent);
            cursor: pointer;
        }
        .edit-row-col-checkbox .edit-checkbox-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }
        .edit-row-col-checkbox .edit-checkbox-box {
            min-width: 2.2em;
        }
        .edit-row-col-checkbox .edit-checkbox-icon {
            width: 1.8em;
            height: 1.8em;
            min-width: 1.8em;
            min-height: 1.8em;
        }
        .edit-row-col-checkbox .edit-checkbox-box:hover .edit-checkbox-icon {
            color: var(--cms-link);
        }
        .edit-row-col-visibility {
            display: flex;
            flex-direction: column;
            gap: 0;
            justify-content: center;
            align-self: stretch;
        }
        /* Checkboxen untereinander, alles rechtsbuendig: Label rechts
           ausgerichtet, Checkbox-Spalte fluchtet am rechten Rand */
        .edit-visibility-row {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.4em;
            white-space: nowrap;
            line-height: 1.1;
        }
        .edit-visibility-row .edit-label {
            margin: 0;
            text-align: right;
            font-size: 0.85em;
        }
        .edit-row-col-visibility .edit-checkbox-box {
            height: 1.3em;
            min-width: 1.3em;
        }
        .edit-row-col-visibility .edit-checkbox-icon {
            width: 1.2em;
            height: 1.2em;
            min-width: 1.2em;
            min-height: 1.2em;
        }

        /* ================================================================
           Page Header (Title + Breadcrumb)
           ================================================================ */
        .breadcrumb {
            font-size: 0.8em;
            color: var(--cms-accent);
            margin-top: 0.2em;
        }
        .breadcrumb a { color: var(--cms-accent); }
        .breadcrumb a:hover { color: var(--cms-link); }
        .breadcrumb .bc-sep { margin: 0 0.3em; color: var(--cms-text-muted); }
        .breadcrumb .bc-current { color: var(--cms-text); }

        /* Admin Panel (right column) */
        .admin-panel {
            width: 36px;
            min-width: 36px;
            margin-top: 1.4em;
            padding-left: 0.5em;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            position: sticky;
            align-self: flex-start;
        }
        .admin-tb-btn {
            display: block;
            padding: 0.35rem;
            border: none;
            background: none;
            cursor: pointer;
            color: var(--cms-accent);
            font-size: 0.95rem;
            line-height: 1;
            border-radius: 3px;
        }
        .admin-tb-btn:hover { color: var(--cms-link); background-color: rgba(255,255,255,0.1); }

        .edit-tools-panel {
            margin-top: 2em;
            padding-top: 1.5em;
            border-top: 1px solid var(--cms-border);
        }
        .edit-tools-heading {
            color: var(--cms-accent);
            font-size: 1em;
            margin: 0 0 0.8em;
        }
        .edit-tools-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5em;
        }
        .edit-tools-btn {
            padding: 0.4em 0.8em;
            border: 1px solid var(--cms-border);
            background: rgba(255,255,255,0.04);
            color: var(--cms-accent);
            font-size: 0.85rem;
            border-radius: 4px;
            cursor: pointer;
        }
        .edit-tools-btn:hover { color: var(--cms-link); border-color: var(--cms-link); }
        .edit-tools-btn:disabled { opacity: 0.4; cursor: default; }
        .edit-tools-btn:disabled:hover { color: var(--cms-accent); border-color: var(--cms-border); }
        .edit-tools-btn i { margin-right: 0.3em; }

        /* ================================================================
           Login Modal
           ================================================================ */
        /* Shell + Overlay liefert JqModal; die Themes malen .login-box als
           hervorgehobenen Kasten (Hintergrund/Border/Shadow). Das Padding hier
           haelt Inhalt und Felder von der farbigen Kante weg - theme-uebergreifend,
           da kein Theme padding auf .login-box setzt. */
        .login-box {
            color: var(--cms-text);
            padding: 1.25em;
        }
        .login-box h2 { color: var(--cms-heading); margin: 0 0 1em 0; font-size: 1.2em; }
        .login-box label { display: block; font-size: 0.9em; margin-bottom: 0.3em; color: var(--cms-accent); }
        .login-box input[type="text"],
        .login-box input[type="password"] {
            width: 100%;
            background-color: var(--cms-bg);
            color: var(--cms-accent);
            border: 1px solid var(--cms-border);
            padding: 0.4em;
            margin-bottom: 0.8em;
            font-family: inherit;
            font-size: 1em;
            border-radius: 3px;
        }
        .login-box input:focus { outline: none; border-color: var(--cms-link); color: var(--cms-link); }
        #login-error { color: var(--cms-danger); font-size: 0.85em; margin-bottom: 0.5em; }
        .login-buttons { display: flex; justify-content: flex-end; gap: 0.5em; margin-top: 0.5em; }
        .login-buttons button {
            font-family: inherit; font-size: 0.9em; padding: 0.4em 1em;
            border-radius: 3px; cursor: pointer; border: 1px solid var(--cms-border);
            display: inline-flex; align-items: center; gap: 0.3em;
        }
        #btn-cancel-login { background: transparent; color: var(--cms-accent); }
        #btn-cancel-login:hover { color: #fff; }
        #btn-submit-login { background: var(--cms-btn-bg); color: var(--cms-btn-text); border-color: var(--cms-btn-bg); }
        #btn-submit-login:hover { background: var(--cms-link); color: #fff; }

        /* ================================================================
           Edit Mode Form Styles
           ================================================================ */
        .edit-input {
            width: 100%;
            background-color: var(--cms-bg);
            color: var(--cms-accent);
            border: 1px solid var(--cms-border);
            padding: 0.4em;
            margin-bottom: 0.5em;
            font-family: inherit;
            font-size: 1em;
            border-radius: 3px;
        }
        .edit-input:focus { outline: none; border-color: var(--cms-link); color: var(--cms-link); }
        .edit-input-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }
        .edit-label { display: block; font-size: 0.9em; color: var(--cms-accent); margin-bottom: 0.2em; font-weight: bold; }
        .edit-label-hint { font-weight: normal; font-size: 0.85em; color: var(--cms-text-muted); margin-left: 0.3em; }
        .edit-btn {
            font-family: inherit; font-size: 0.85em; padding: 0.4em 1em;
            border-radius: 3px; cursor: pointer; border: 1px solid var(--cms-btn-bg);
            background: var(--cms-btn-bg); color: var(--cms-btn-text);
            display: inline-flex; align-items: center; gap: 0.3em;
        }
        .edit-btn:hover { background: var(--cms-link); color: #fff; }
        .edit-btn-cancel { background: transparent; color: var(--cms-accent); }
        .edit-btn-cancel:hover { background: var(--cms-btn-bg); color: var(--cms-btn-text); }
        .edit-btn-danger { background: var(--cms-danger); border-color: var(--cms-danger); }
        .edit-btn-danger:hover { background: #ff4422; }

        /* ================================================================
           Tree (Sitemap / Move Dialog)
           ================================================================ */
        .tree-box {
            border: 1px solid var(--cms-text-muted);
            border-radius: 5px;
            padding: 0.8em;
            background-color: rgba(255,255,255,0.05);
        }
        .tree-list {
            margin: 0 0 0 1em;
            padding: 0 0 0 0.8em;
            list-style: none;
            border-left: 1px solid var(--cms-border);
        }
        .tree-list li { margin: 0.3em 0; }
        .tree-link {
            color: var(--cms-link);
            cursor: pointer;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .tree-link:hover {
            background-color: var(--cms-accent);
            color: #fff;
            text-decoration: none;
        }
        .tree-blocked {
            color: #666;
            text-decoration: line-through;
            padding: 2px 5px;
            display: inline-block;
        }

        /* ================================================================
           Media Panel (Edit Mode)
           ================================================================ */
        .media-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            margin-bottom: 1em;
        }
        .media-item {
            border: 1px solid var(--cms-text-muted);
            border-radius: 5px;
            padding: 0.5em;
            text-align: center;
            background-color: rgba(255,255,255,0.05);
            position: relative;
            width: 180px;
        }
        .media-item img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            object-position: center;
            display: block;
            margin: 0 auto 0.5em;
            border-radius: 3px;
            cursor: pointer;
        }
        .media-item img[draggable="true"] { cursor: grab; }
        .media-item.media-dragging { opacity: 0.45; }
        .media-item.media-drag-over {
            outline: 2px dashed var(--cms-accent);
            outline-offset: 2px;
        }
        .media-item-name {
            font-size: 0.8em;
            color: var(--cms-accent);
            margin-bottom: 0.3em;
        }
        .media-tag {
            font-size: 0.75em;
            background-color: rgba(255,255,255,0.1);
            color: var(--cms-link);
            padding: 2px 5px;
            border-radius: 3px;
            cursor: pointer;
            user-select: all;
            display: inline-block;
        }
        .btn-delete-media {
            background: none;
            border: none;
            color: var(--cms-danger);
            cursor: pointer;
            font-size: 0.9em;
            padding: 2px 5px;
        }
        .btn-delete-media:hover { color: #ff4422; }
        .upload-box {
            border: 2px dashed var(--cms-border);
            border-radius: 5px;
            padding: 1em;
            margin: 1em 0;
            background-color: rgba(255,255,255,0.03);
            transition: border-color 0.2s, background-color 0.2s;
            position: relative;
            /* Fieldset-Reset */
            min-inline-size: auto;
        }
        .upload-box > legend {
            margin-left: 0.8em;
            padding: 0 0.5em;
            color: var(--cms-accent);
            font-size: 0.9em;
            font-weight: bold;
        }
        .upload-box.drop-active {
            border-color: var(--cms-link);
            background-color: rgba(106,172,218,0.08);
        }
        .upload-spinner-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6em;
            background-color: rgba(0,0,0,0.55);
            color: var(--cms-heading);
            font-size: 0.95em;
            z-index: 20;
            border-radius: 5px;
        }
        body.light-theme .upload-spinner-overlay {
            background-color: rgba(255,255,255,0.75);
            color: var(--cms-heading);
        }
        .upload-spinner-overlay .spinner {
            width: 1.2em;
            height: 1.2em;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: upload-spin 0.8s linear infinite;
        }
        @keyframes upload-spin {
            to { transform: rotate(360deg); }
        }
        .upload-fields {
            display: flex;
            flex-wrap: wrap;
            gap: 1em;
            align-items: flex-start;
            margin-top: 0.4em;
        }
        .upload-fields > div {
            display: flex;
            flex-direction: column;
        }
        .upload-fields > div > .edit-label {
            height: 1.4em;
            line-height: 1.4em;
        }
        .upload-fields > div > .edit-input,
        .upload-fields > div > .edit-btn {
            height: 2.2em;
        }
        .upload-file-input {
            padding: 0.3em;
            font-size: 0.85em;
            color: var(--cms-accent);
        }
        .pos-icons {
            display: flex;
            gap: 0.3em;
            align-items: center;
        }
        .pos-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.2em;
            height: 2.2em;
            border: 2px solid var(--cms-border);
            border-radius: 4px;
            cursor: pointer;
            color: var(--cms-text-muted);
            font-size: 1em;
            transition: color 0.2s, border-color 0.2s;
        }
        .pos-icon:hover {
            color: var(--cms-accent);
            border-color: var(--cms-accent);
        }
        .pos-icon.pos-active {
            color: var(--cms-link);
            border-color: var(--cms-link);
        }
        .media-actions {
            display: flex;
            gap: 0.3em;
            justify-content: center;
        }
        .media-actions .media-tag {
            font-size: 0.8em;
            width: auto;
            height: auto;
            color: var(--cms-link);
            background: rgba(106,172,218,0.1);
        }
        .media-actions .btn-delete-media:hover {
            color: #fff;
            background-color: var(--cms-danger);
            border-color: var(--cms-danger);
        }
        .media-actions .btn-save-media:hover {
            color: #fff;
            background-color: var(--cms-success);
            border-color: var(--cms-success);
        }
        .file-list {
            list-style: none;
            padding: 0;
            margin: 0 0 1em 0;
        }
        .file-list li {
            padding: 0.3em 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            display: flex;
            align-items: center;
            gap: 0.5em;
            flex-wrap: wrap;
        }

        /* ================================================================
           Lightbox
           ================================================================ */
        #cmsLightbox {
            display: none;
            position: fixed; z-index: 120;
            left: 0; top: 0; width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.8);
            cursor: pointer;
        }
        #cmsLightbox > div {
            display: flex; justify-content: center; align-items: center;
            width: 100%; height: 100%;
        }
        #cmsLightbox img { display: block; max-width: 80%; max-height: 80%; }

        /* ================================================================
           Burger Button (hidden on desktop)
           ================================================================ */
        .burger-btn {
            display: none;
            background: none;
            border: 1px solid var(--cms-text-muted);
            color: var(--cms-accent);
            cursor: pointer;
            padding: 0.3em 0.5em;
            border-radius: 3px;
            font-size: 0.85em;
            line-height: 1;
            align-items: center;
            justify-content: center;
            height: 1.9em;
            margin-left: 0.3em;
        }
        .burger-btn:hover { color: var(--cms-link); border-color: var(--cms-accent); }

        /* ================================================================
           Mobile Navigation Sidebar
           ================================================================ */
        .mobile-nav-overlay {
            display: none;
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            z-index: 199;
        }
        .mobile-nav-overlay.open { display: block; }

        .mobile-nav {
            position: fixed;
            top: 0; left: 0; bottom: 0;
            width: 280px;
            max-width: 85vw;
            background: var(--cms-bg-alt);
            z-index: 200;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .mobile-nav.open { transform: translateX(0); }

        .mobile-nav-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8em 1em;
            background: var(--cms-accent);
            color: #fff;
            font-weight: bold;
            font-size: 1em;
        }
        .mobile-nav-close {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 1.2em;
            padding: 0;
            line-height: 1;
        }
        .mobile-nav-close:hover { color: var(--cms-link-hover); }

        .mobile-nav-tree {
            flex: 1;
            overflow-y: auto;
            padding: 0.5em 0;
        }
        .mobile-nav-tree ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .mobile-nav-tree li { border-bottom: 1px solid rgba(255,255,255,0.05); }
        .mobile-nav-tree a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: var(--cms-text);
            padding: 0.6em 1em;
            font-size: 0.95em;
            text-decoration: none;
        }
        .mobile-nav-tree a:hover { background: rgba(106,172,218,0.15); color: #fff; }
        .mobile-nav-tree a.mn-active {
            background: var(--cms-accent);
            color: #fff;
            font-weight: bold;
        }
        .mobile-nav-tree a.mn-on-path { color: var(--cms-link); }
        .mobile-nav-tree .mn-toggle {
            cursor: pointer;
            padding: 0 0.4em;
            font-size: 0.8em;
            color: var(--cms-accent);
        }
        .mobile-nav-tree .mn-toggle:hover { color: var(--cms-link); }
        .mobile-nav-tree ul ul {
            border-left: 2px solid rgba(106,172,218,0.3);
            margin-left: 1em;
        }

        /* ================================================================
           Responsive
           ================================================================ */
        @media screen and (max-width: 700px) {
            .mainmenu-items { display: none; }
            .burger-btn { display: inline-flex; margin-right: auto; }
            .menu { display: none !important; }
            .admin-panel { display: none !important; }
            .middlebox { flex-direction: column; }
            .contentbox { padding: 1em 0.5em; }
            .logospace { display: none; }
            .spalten { column-count: 1; }
            /* Modal-Breiten auf dem Handy regelt die JqModal-Shell (siehe
               @media-Block bei .jqmodal). */
        }
        @media print {
            /* Navigation und Rahmen komplett ausblenden - !important, weil
               Sidebar/Mobile-Nav ihr display per Inline-Style bzw. jQuery
               gesetzt bekommen. */
            .logospace, .topmenuspace, .footer, .admin-panel, #cmsLightbox,
            .menu, .mobile-nav, .mobile-nav-overlay, #unauthorized-banner,
            .burger-btn { display: none !important; }
            .middlebox { display: block; }
            .contentbox { padding: 0; }

            /* Der Druck ist bewusst THEME-UNABHAENGIG: weisses Papier,
               schwarze Schrift, keine Flaechen. Site-Themes setzen Farben und
               Hintergruende ueber Selektoren wie "body:not(.light-theme)
               .middleboxspace" und schlagen damit jede einfache Klassenregel -
               deshalb hier durchgehend !important. */
            html, body,
            .middleboxspace, .middlebox, .contentbox, .content {
                background: #fff !important;
                background-image: none !important;
                box-shadow: none !important;
            }
            .content *:not([class*="mjcon-"]),
            .content *::before,
            .content *::after {
                background: none !important;
                box-shadow: none !important;
                text-shadow: none !important;
            }
            .content, .content * { color: #000 !important; }
            /* mjcon-Icons sind KEINE Schrift, sondern eine SVG-Maske auf
               "background-color: currentColor" (weblib/mjcon/mjcon.css). Ein
               pauschales "background: none" wuerde jedes Symbol im Druck
               loeschen - sie sind oben ausgenommen und werden hier
               eingeschwaerzt. */
            .content [class*="mjcon-"] {
                background-color: #000 !important;
                background-image: none !important;
            }
            /* Themes legen ihre Texturen als position:fixed-Layer auf
               body::before/::after - die wuerden sonst auf jeder Druckseite
               erneut gezeichnet. */
            body::before, body::after { content: none !important; display: none !important; }
        }

        /* ================================================================
           CMS Slider (Swiper)
           ================================================================ */
        .cms-slider {
            max-width: 1024px;
            margin: 0 auto 1.5em;
            border-radius: 5px;
            overflow: hidden;
        }
        .cms-slider .swiper-slide {
            width: auto;
            max-width: 80%;
        }
        .cms-slider .swiper-slide img {
            max-height: 300px;
            width: auto;
            margin: 0 auto;
            border-radius: 5px;
            display: block;
        }
        .cms-slider .swiper-button-next,
        .cms-slider .swiper-button-prev {
            color: rgba(255, 255, 255, 0.85) !important;
            background: rgba(0, 0, 0, 0.5);
            width: 64px;
            height: 64px;
            border-radius: 50%;
        }
        .cms-slider .swiper-button-next .swiper-navigation-icon,
        .cms-slider .swiper-button-prev .swiper-navigation-icon {
            display: none;
        }
        .cms-slider .swiper-button-next::after,
        .cms-slider .swiper-button-prev::after {
            content: '';
            width: 32px;
            height: 32px;
            background-color: currentColor;
            -webkit-mask: no-repeat center / contain;
                    mask: no-repeat center / contain;
        }
        .cms-slider .swiper-button-prev::after {
            -webkit-mask-image: url("../weblib/mjcon/svg/arrow-left.svg");
                    mask-image: url("../weblib/mjcon/svg/arrow-left.svg");
        }
        .cms-slider .swiper-button-next::after {
            -webkit-mask-image: url("../weblib/mjcon/svg/arrow-right.svg");
                    mask-image: url("../weblib/mjcon/svg/arrow-right.svg");
        }
        .cms-slider .swiper-button-next:hover,
        .cms-slider .swiper-button-prev:hover {
            background: rgba(0, 0, 0, 0.75);
            color: #fff !important;
        }
        .cms-slider .swiper-pagination-bullet-active {
            background: var(--cms-accent) !important;
        }
        .cms-slider .swiper-button-disabled {
            opacity: 0.2 !important;
            cursor: default;
        }
        .btn-slider-toggle.pos-active {
            color: var(--cms-link);
            border-color: var(--cms-link);
        }

        /* ================================================================
           Media Overview
           ================================================================ */
        .mo-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1em;
            flex-wrap: wrap;
            gap: 0.5em;
        }
        .mo-filters {
            display: flex;
            gap: 0.5em;
            flex-wrap: wrap;
        }
        .mo-filters select {
            background: var(--cms-bg);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            padding: 0.3em 0.5em;
            border-radius: 3px;
            font-family: inherit;
            font-size: 0.85em;
        }
        .mo-stats {
            color: var(--cms-text-muted);
            font-size: 0.85em;
        }
        .mo-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9em;
        }
        .mo-table th {
            text-align: left;
            color: var(--cms-accent);
            font-size: 0.8em;
            text-transform: uppercase;
            padding: 0.5em 0.6em;
            border-bottom: 2px solid var(--cms-surface);
        }
        .mo-table td {
            padding: 0.5em 0.6em;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            vertical-align: middle;
        }
        .mo-table tr:hover td {
            background: rgba(255,255,255,0.03);
        }
        .mo-td-thumb {
            width: 50px;
            text-align: center;
        }
        .mo-thumb {
            max-width: 45px;
            max-height: 35px;
            border-radius: 3px;
            display: inline-block;
        }
        .mo-ext {
            color: var(--cms-text-muted);
            font-size: 0.85em;
            margin-left: 0.3em;
        }
        .mo-td-pages {
            font-size: 0.85em;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .mo-td-pages .mo-page-link {
            color: var(--cms-link, #48dbfb);
            text-decoration: none;
            border-bottom: 1px dotted currentColor;
        }
        .mo-td-pages .mo-page-link:hover {
            color: var(--cms-link-hover, #e08050);
            text-decoration: none;
            border-bottom-style: solid;
        }
        .mo-badge {
            display: inline-block;
            padding: 1px 7px;
            border-radius: 10px;
            font-size: 0.75em;
            font-weight: bold;
        }
        .mo-badge-used { background: rgba(80,160,96,0.15); color: var(--cms-success); }
        .mo-badge-unused { background: rgba(208,80,64,0.15); color: var(--cms-danger); }
        .mo-badge-orphan { background: rgba(106,172,218,0.12); color: var(--cms-link); }
        .mo-delete {
            background: none;
            border: none;
            color: var(--cms-danger);
            cursor: pointer;
            font-size: 0.95em;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .mo-delete:hover {
            color: #fff;
            background: var(--cms-danger);
        }
        .mo-cancel-row {
            display: flex;
            justify-content: flex-end;
            margin: 0.5em 0;
        }
        .mo-cancel {
            background: var(--cms-surface);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            padding: 0.4em 0.9em;
            border-radius: 3px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9em;
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
        }
        .mo-cancel:hover {
            border-color: var(--cms-link);
            color: var(--cms-link);
        }
        .mo-msg {
            margin: 0.5em 0;
            font-size: 0.9em;
        }
        .mo-pagebar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.4em;
            margin: 1em 0;
            flex-wrap: wrap;
            font-size: 0.9em;
        }
        .mo-pagebar button {
            background: var(--cms-bg);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            padding: 0.35em 0.7em;
            border-radius: 3px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9em;
            line-height: 1;
            min-width: 2.2em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .mo-pagebar button:hover:not([disabled]) {
            border-color: var(--cms-link);
            color: var(--cms-link);
        }
        .mo-pagebar button[disabled] {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .mo-pagebar .mo-pb-nav i {
            font-size: 1em;
        }
        .mo-pagebar .mo-pb-pages {
            display: flex;
            gap: 0.2em;
        }
        .mo-pagebar .mo-pb-current {
            background: var(--cms-link);
            color: var(--cms-bg);
            border-color: var(--cms-link);
            opacity: 1;
        }
        .mo-pagebar .mo-pb-range {
            color: var(--cms-text-muted);
            padding: 0 0.6em;
            white-space: nowrap;
        }
        .mo-pagebar .mo-pb-perpage {
            display: inline-flex;
            align-items: center;
            gap: 0.4em;
            color: var(--cms-text-muted);
            white-space: nowrap;
        }
        .mo-pagebar .mo-pb-perpage-sel {
            background: var(--cms-bg);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            padding: 0.3em 0.4em;
            border-radius: 3px;
            font-family: inherit;
            font-size: 0.9em;
            cursor: pointer;
        }

        /* ================================================================
           Export/Import Modal
           ================================================================ */
        /* Export/Import: Shell + Header + Overlay via JqModal. */
        .eim-body {
            padding: 0.4em;
        }
        .eim-section h3 {
            color: var(--cms-heading);
            font-size: 0.95em;
            margin: 0 0 0.4em 0;
        }
        .eim-section h3 i { margin-right: 0.3em; }
        .eim-section p {
            color: var(--cms-text-muted);
            font-size: 0.85em;
            margin: 0 0 0.8em 0;
            line-height: 1.4;
        }
        .eim-section input[type="file"] {
            display: block;
            margin-bottom: 0.6em;
            color: var(--cms-accent);
            font-size: 0.9em;
        }
        .eim-divider {
            border: none;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin: 1.2em 0;
        }

        /* ================================================================
           Unauthorized Banner
           ================================================================ */
        #unauthorized-banner {
            background: rgba(106,172,218,0.1);
            border-bottom: 2px solid var(--cms-link);
            color: var(--cms-link);
            text-align: center;
            padding: 0.5em 1em;
            font-size: 0.9em;
            display: none;
        }
        #unauthorized-banner.show { display: block; }

        /* ================================================================
           Login Modal Additions (Register + Verify Banner)
           ================================================================ */
        .login-box input[type="email"] {
            width: 100%;
            background-color: var(--cms-bg);
            color: var(--cms-accent);
            border: 1px solid var(--cms-border);
            padding: 0.4em;
            margin-bottom: 0.8em;
            font-family: inherit;
            font-size: 1em;
            border-radius: 3px;
        }
        .login-box input[type="email"]:focus { outline: none; border-color: var(--cms-link); color: var(--cms-link); }
        .login-switch {
            margin-top: 1em;
            font-size: 0.85em;
            text-align: center;
            color: var(--cms-text-muted);
        }
        .login-switch a { color: var(--cms-accent); text-decoration: none; }
        .login-switch a:hover { color: var(--cms-link); }
        #register-error { color: var(--cms-danger); font-size: 0.85em; margin-bottom: 0.5em; }
        #register-success { color: var(--cms-success); font-size: 0.85em; margin-bottom: 0.5em; background: rgba(80,160,96,0.1); padding: 0.5em; border-radius: 3px; }
        #verify-banner {
            padding: 0.6em 0.8em;
            border-radius: 3px;
            margin-bottom: 1em;
            font-size: 0.85em;
        }
        #verify-banner.vb-success { background: rgba(80,160,96,0.12); color: var(--cms-success); border: 1px solid rgba(80,160,96,0.3); }
        #verify-banner.vb-error { background: rgba(208,80,64,0.12); color: var(--cms-danger); border: 1px solid rgba(208,80,64,0.3); }

        /* ================================================================
           Profile Modal
           ================================================================ */
        /* Shell + Header + Overlay liefert JqModal. */
        .profile-body { padding: 0.4em; }
        .profile-logout-btn {
            width: 100%;
            padding: 0.6em;
            background: rgba(208,80,64,0.15);
            border: 1px solid var(--cms-danger);
            color: var(--cms-danger);
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.95em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4em;
        }
        .profile-logout-btn:hover { background: rgba(208,80,64,0.3); color: #fff; }
        .profile-admin-tools {
            margin-top: 0.8em;
            display: flex;
            flex-direction: column;
            gap: 0.4em;
        }
        .profile-admin-btn {
            width: 100%;
            padding: 0.55em;
            background: transparent;
            border: 1px solid var(--cms-border);
            color: var(--cms-accent);
            border-radius: 4px;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4em;
        }
        .profile-admin-btn:hover {
            background: var(--cms-btn-bg);
            color: var(--cms-btn-text);
            border-color: var(--cms-btn-bg);
        }
        .profile-divider {
            border: none;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin: 1em 0;
        }
        .profile-field { margin-bottom: 0.6em; }
        .profile-label {
            display: block;
            color: var(--cms-accent);
            font-size: 0.8em;
            margin-bottom: 0.2em;
        }
        .profile-static {
            color: var(--cms-text);
            font-size: 0.95em;
            padding: 0.3em 0;
        }
        .profile-pending {
            color: var(--cms-link);
            font-size: 0.8em;
            margin-top: 0.2em;
            font-style: italic;
        }
        .profile-newsletter-label {
            display: flex;
            align-items: center;
            gap: 0.5em;
            color: var(--cms-text);
            font-size: 0.9em;
            cursor: pointer;
        }
        .profile-newsletter-label input { cursor: pointer; }
        .profile-buttons { display: flex; gap: 0.5em; margin-top: 1em; }

        /* ================================================================
           Profile Tabs + API-Tokens
           ================================================================ */
        .profile-tabs {
            display: flex;
            gap: 0.4em;
            margin: 1em 0 0.6em;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .profile-tab-btn {
            background: transparent;
            border: none;
            border-bottom: 2px solid transparent;
            color: var(--cms-text);
            padding: 0.5em 0.9em;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.95em;
        }
        .profile-tab-btn:hover { color: var(--cms-accent); }
        .profile-tab-btn.active {
            color: var(--cms-accent);
            border-bottom-color: var(--cms-accent);
        }
        /* API-Doku ist kein echter Tab, sondern ein Download-Link, der wie ein Tab aussieht. */
        a.profile-tab-link {
            text-decoration: none;
            margin-left: auto;
        }
        a.profile-tab-link i { font-size: 0.9em; margin-right: 0.3em; }
        .api-tokens-intro {
            font-size: 0.9em;
            line-height: 1.5;
            color: var(--cms-text);
            margin-bottom: 1em;
        }
        .api-tokens-intro code {
            background: rgba(255,255,255,0.07);
            padding: 0.05em 0.3em;
            border-radius: 3px;
        }
        .api-tokens-create {
            border: 1px solid var(--cms-border);
            border-radius: 4px;
            padding: 0.5em 0.8em;
            margin-bottom: 1em;
        }
        .api-tokens-create summary {
            cursor: pointer;
            font-weight: bold;
            color: var(--cms-accent);
        }
        .api-tokens-create-body { padding-top: 0.8em; }
        .api-token-radio {
            display: block;
            cursor: pointer;
            padding: 0.2em 0;
        }
        .api-token-created {
            background: rgba(166,126,78,0.12);
            border: 1px solid var(--cms-accent);
            border-radius: 4px;
            padding: 0.8em;
            margin-bottom: 1em;
        }
        .api-token-warning {
            color: #f4c97a;
            font-size: 0.88em;
            margin: 0.4em 0 0.6em;
        }
        .api-token-secret-wrap {
            display: flex;
            gap: 0.4em;
            align-items: center;
            margin-bottom: 0.6em;
        }
        .api-token-secret {
            flex: 1;
            font-family: monospace;
            background: rgba(0,0,0,0.4);
            padding: 0.5em 0.6em;
            border-radius: 3px;
            word-break: break-all;
            font-size: 0.9em;
        }
        .api-token-curl summary {
            cursor: pointer;
            font-size: 0.85em;
            color: var(--cms-text);
            margin: 0.4em 0;
        }
        .api-token-curl-code {
            background: rgba(0,0,0,0.4);
            padding: 0.6em;
            font-size: 0.82em;
            white-space: pre-wrap;
            word-break: break-all;
            border-radius: 3px;
            margin: 0.4em 0 0.8em;
        }
        .api-tokens-list-heading {
            margin: 1em 0 0.6em;
            font-size: 1em;
            color: var(--cms-accent);
        }
        .api-tokens-list { display: flex; flex-direction: column; gap: 0.6em; }
        .api-tokens-empty {
            font-style: italic;
            color: #888;
            padding: 0.6em;
        }
        .api-token-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.6em;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 4px;
            padding: 0.6em 0.8em;
        }
        .api-token-row-meta { flex: 1; }
        .api-token-name { font-weight: bold; color: var(--cms-accent); }
        .api-token-badge {
            display: inline-block;
            margin-left: 0.4em;
            padding: 0.05em 0.4em;
            font-size: 0.75em;
            border-radius: 3px;
            background: rgba(255,255,255,0.1);
        }
        .api-token-badge.read { background: rgba(80,140,200,0.25); }
        .api-token-prefix {
            font-family: monospace;
            font-size: 0.82em;
            color: #888;
        }
        .api-token-meta-line {
            font-size: 0.82em;
            color: #aaa;
            margin-top: 0.2em;
        }
        .api-token-revoke-btn {
            background: rgba(208,80,64,0.2);
            border: 1px solid rgba(208,80,64,0.5);
            color: #f0c4b8;
            padding: 0.35em 0.7em;
            border-radius: 3px;
            cursor: pointer;
            font-size: 0.85em;
            font-family: inherit;
        }
        .api-token-revoke-btn:hover {
            background: rgba(208,80,64,0.4);
            color: #fff;
        }

        /* ================================================================
           Users Modal
           ================================================================ */
        /* Users: Shell + Header + Overlay via JqModal. Der "Neu"-Button sitzt
           jetzt oben im Body (.usr-toolbar). */
        .usr-toolbar {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 0.8em;
        }
        .usr-body {
            padding: 0.4em;
            overflow-y: auto;
        }
        .usr-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9em;
        }
        .usr-table th {
            text-align: left;
            color: var(--cms-accent);
            font-weight: normal;
            font-size: 0.85em;
            padding: 0.4em 0.6em;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .usr-table td {
            padding: 0.5em 0.6em;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            color: var(--cms-text);
        }
        .usr-table tr:hover td { background: rgba(255,255,255,0.03); }
        .usr-role {
            font-size: 0.8em;
            padding: 0.15em 0.5em;
            border-radius: 3px;
        }
        .usr-role-admin { background: rgba(208,80,64,0.2); color: #e88; }
        .usr-role-editor { background: rgba(106,172,218,0.2); color: var(--cms-text); }
        .usr-role-viewer { background: rgba(255,255,255,0.08); color: var(--cms-text-muted); }
        .usr-role-unauthorized { background: rgba(208,80,64,0.15); color: var(--cms-danger); }
        .usr-actions { white-space: nowrap; }
        .usr-action-btn {
            background: none;
            border: none;
            color: var(--cms-accent);
            cursor: pointer;
            font-size: 0.9em;
            padding: 0.2em 0.4em;
            border-radius: 3px;
        }
        .usr-action-btn:hover { color: var(--cms-link); background: rgba(255,255,255,0.08); }
        .usr-form-inner {
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            padding: 1em;
            margin-bottom: 1em;
            background: rgba(255,255,255,0.02);
        }
        .usr-form-inner h3 {
            color: var(--cms-heading);
            font-size: 0.95em;
            margin: 0 0 0.8em 0;
            font-weight: normal;
        }
        .usr-field { margin-bottom: 0.6em; }
        .usr-label {
            display: block;
            color: var(--cms-accent);
            font-size: 0.8em;
            margin-bottom: 0.2em;
        }
        .usr-form-buttons { display: flex; gap: 0.5em; margin-top: 0.8em; }

        /* ================================================================
           Versions Modal
           ================================================================ */
        /* Versions: Shell + Header + Overlay via JqModal. */
        .ver-body {
            padding: 0.4em;
            overflow-y: auto;
        }
        .ver-entries {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .ver-entry {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6em 0.8em;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            cursor: pointer;
            border-radius: 4px;
        }
        .ver-entry:hover { background: rgba(255,255,255,0.05); }
        .ver-entry.ver-active { background: rgba(106,172,218,0.15); }
        .ver-title { color: var(--cms-text); font-size: 0.95em; }
        .ver-meta { color: var(--cms-text-muted); font-size: 0.8em; white-space: nowrap; margin-left: 1em; }
        .ver-diff-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1em;
            flex-wrap: wrap;
            gap: 0.5em;
        }
        .ver-diff-header h3 {
            color: var(--cms-heading);
            font-size: 0.95em;
            margin: 0;
            font-weight: normal;
        }
        .ver-diff-actions { display: flex; gap: 0.5em; }
        .ver-view-section { margin-bottom: 1em; }
        .ver-view-label {
            color: var(--cms-accent);
            font-size: 0.85em;
            margin-bottom: 0.3em;
            font-weight: bold;
        }
        .ver-view-value {
            padding: 0.3em 0.6em;
            border-left: 3px solid var(--cms-accent);
            background: rgba(255,255,255,0.03);
            word-break: break-word;
        }
        .ver-view-content {
            padding: 0.5em 0.8em;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 0.3em;
            background: rgba(255,255,255,0.02);
        }

        /* ================================================================
           JqModal - generische Modal-Basis fuer das gesamte CMS.
           Frueher charsheet-spezifisch (charsheet.css), jetzt global, damit
           alle Modals (statische Dialoge, Modul-Overlays, Charakterboegen)
           dieselbe Shell + Open/Close-Logik nutzen.
           Alle Farben ueber --cms-* Theme-Variablen.
           ================================================================ */
        .jqmodal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.6);
            z-index: 9998;
        }
        /* Versteckter Vorrat: haelt deklarative Modal-Inhalte, bis JqModal sie
           beim Oeffnen in die Shell verschiebt (und beim Schliessen detacht). */
        .jqm-store { display: none; }
        .jqmodal {
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: var(--cms-bg);
            border: 2px solid var(--cms-accent);
            border-radius: 0.5em;
            z-index: 9999;
            min-width: 300px;
            max-width: 90vw;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* Groessen-Varianten (opts.size). width fix, per max-width responsiv gedeckelt. */
        .jqmodal.jqmodal-compact,
        .jqmodal.jqmodal-sm {
            min-width: 220px;
            width: 420px;
            max-width: 90vw;
            max-height: 80vh;
        }
        .jqmodal.jqmodal-md   { width: 640px;  max-width: 90vw; }
        .jqmodal.jqmodal-lg   { width: 900px;  max-width: 95vw; }
        .jqmodal.jqmodal-xl   { width: 1100px; max-width: 95vw; }
        .jqmodal.jqmodal-full { width: 95vw;   max-width: 95vw; max-height: 92vh; }
        /* Top-Layer: ueber Jodit-Fullscreen (z-index ~100000). */
        .jqmodal-overlay.jqmodal-overlay-top { z-index: 100100; }
        .jqmodal.jqmodal-top { z-index: 100101; }
        @media (max-width: 700px) {
            .jqmodal,
            .jqmodal.jqmodal-compact,
            .jqmodal.jqmodal-sm,
            .jqmodal.jqmodal-md,
            .jqmodal.jqmodal-lg,
            .jqmodal.jqmodal-xl {
                width: 90vw;
                min-width: 0;
                max-width: 90vw;
            }
        }
        .jqmodal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5em 0.8em;
            background-color: var(--cms-surface);
            color: var(--cms-heading);
            font-weight: bold;
            border-bottom: 2px solid var(--cms-accent);
        }
        .jqmodal-title {
            display: flex;
            align-items: center;
            gap: 0.3em;
        }
        .jqmodal-close { cursor: pointer; }
        .jqmodal-close:hover { color: var(--cms-danger); }
        .jqmodal-body {
            padding: 0.8em;
            color: var(--cms-text);
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }
        .jqmodal-body b,
        .jqmodal-body strong {
            color: var(--cms-heading);
        }
        .jqmodal-body input, .jqmodal-body textarea, .jqmodal-body select {
            background: var(--cms-bg);
            border: 1px solid var(--cms-border);
            color: var(--cms-text);
            border-radius: 0.3em;
            padding: 0.4em;
        }
        .jqmodal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.5em;
            padding: 0.5em 0.8em;
            border-top: 1px solid var(--cms-border);
        }
        .jqmodal-btn-save, .jqmodal-btn-cancel {
            border: 1px solid var(--cms-border);
            padding: 0.4em 1em;
            border-radius: 0.3em;
            cursor: pointer;
            color: var(--cms-text);
            background: var(--cms-bg);
        }
        .jqmodal-btn-save:hover {
            background: var(--cms-accent);
            color: var(--cms-btn-text);
            border-color: var(--cms-accent);
        }
        .jqmodal-btn-cancel:hover { background: var(--cms-bg-alt); }

        /* Passwort-Policy Live-Checkliste (Anlegen/Aendern) */
        .pw-policy-hint {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 10px;
            margin-top: 4px;
            font-size: 0.78em;
            line-height: 1.4;
        }
        .pw-req { white-space: nowrap; }
        .pw-req-ok { color: #2e9e4f; }
        .pw-req-no { color: var(--cms-text-muted); }