/* ==========================================================================
   Agentur-CMS · Oberfläche
   --------------------------------------------------------------------------
   Eine einzige Stildatei für das gesamte CMS. Ruhig, hell, viel Weißraum.
   Es ist ein Arbeitswerkzeug für Menschen ohne Technikwissen, kein Prospekt.

   Aufbau der Datei:
     01  Variablen (hell)
     02  Variablen (dunkel)
     03  Grundlagen und Rücksetzung
     04  Zugänglichkeit
     05  Kopfzeile
     06  Gerüst: Hülle, Seitenleiste, Inhalt
     07  Menü
     08  Seitenkopf
     09  Meldungen und Schnellhinweise
     10  Knöpfe
     11  Abzeichen
     12  Karten
     13  Tabellen
     14  Leere Zustände
     15  Kacheln und Zahlen
     16  Formular: Felder, Beschriftungen, Eingaben
     17  Kippschalter
     18  Auswahl und Farbpalette
     19  Formatierter Text (Richtext)
     20  Wiederholer
     21  Baukasten
     22  Medienfeld und Medienraster
     23  Medienwähler (Dialog)
     24  Editor mit Vorschau
     25  Anmeldung
     26  Hilfe-Seite
     27  Sortieren per Ziehen
     28  Kleinkram
     29  Größere Bildschirme
     30  Druck

   Die Markenfarbe --marke setzt PHP im Kopf der Seite. Alle Ableitungen
   entstehen daraus über color-mix, damit sich das Portal je Kunde einfärbt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Variablen (helles Farbschema)
   -------------------------------------------------------------------------- */

:root {
    /* Markenfarbe. Wird vom PHP-Kopf überschrieben, hier nur als Rückfall. */
    --marke: #2f4d9e; /* ADence-Blau; im Portal setzt lib/ansicht.php die Kundenfarbe */

    /* Ableitungen der Markenfarbe */
    --marke-dunkel: color-mix(in srgb, var(--marke) 84%, #000);
    --marke-tiefer: color-mix(in srgb, var(--marke) 72%, #000);
    --marke-text: color-mix(in srgb, var(--marke) 88%, #000);
    --marke-rand: color-mix(in srgb, var(--marke) 38%, transparent);
    --marke-rand-fein: color-mix(in srgb, var(--marke) 20%, transparent);
    --marke-flaeche: color-mix(in srgb, var(--marke) 8%, #fff);
    --marke-flaeche-stark: color-mix(in srgb, var(--marke) 14%, #fff);
    --marke-schleier: color-mix(in srgb, var(--marke) 12%, transparent);
    --marke-auf: #fff;

    /* Flächen */
    --grund: #f6f7f9;
    --flaeche: #fff;
    --flaeche-2: #f2f4f7;
    --flaeche-3: #e8ebf0;
    --flaeche-schleier: rgb(15 23 42 / 45%);

    /* Ränder */
    --rand: #e2e6ec;
    --rand-fein: #edf0f4;
    --rand-stark: #cbd2dc;

    /* Schrift */
    --text: #12161f;
    --text-leise: #59616e;
    --text-still: #6b7280;
    --text-auf-farbe: #fff;

    /* Zustandsfarben, jeweils Linie, Fläche und Text */
    --erfolg: #157f4b;
    --erfolg-flaeche: #e9f7ef;
    --erfolg-rand: #b8e3ca;
    --warnung: #96650a;
    --warnung-flaeche: #fdf5e4;
    --warnung-rand: #ecd9a8;
    --fehler: #b42318;
    --fehler-flaeche: #fdeceb;
    --fehler-rand: #f3c4c0;
    --info: #1d4ed8;
    --info-flaeche: #eaf0fe;
    --info-rand: #c3d4fb;
    --neutral-flaeche: #eef1f5;
    --neutral-rand: #dbe0e8;

    /* Abstände */
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 2.5rem;
    --abstand-8: 3.5rem;

    /* Radien */
    --radius-1: 6px;
    --radius-2: 10px;
    --radius-3: 14px;
    --radius-4: 20px;
    --radius-voll: 999px;

    /* Schatten */
    --schatten-1: 0 1px 2px rgb(15 23 42 / 5%);
    --schatten-2: 0 1px 3px rgb(15 23 42 / 7%), 0 6px 16px -8px rgb(15 23 42 / 12%);
    --schatten-3: 0 12px 32px -12px rgb(15 23 42 / 22%), 0 2px 6px rgb(15 23 42 / 6%);
    --schatten-4: 0 24px 60px -18px rgb(15 23 42 / 32%);

    /* Schriftgrößen */
    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --gr-xs: 0.6875rem;
    --gr-sm: 0.75rem;
    --gr-klein: 0.8125rem;
    --gr-normal: 0.875rem;
    --gr-md: 0.9375rem;
    --gr-lg: 1.0625rem;
    --gr-xl: 1.25rem;
    --gr-2xl: 1.5rem;
    --gr-3xl: 1.875rem;

    /* Maße des Gerüsts */
    --kopf-hoehe: 56px;
    --leiste-breite: 240px;
    --editor-kopf-hoehe: 68px;
    --ziel-hoehe: 42px;

    /* Bewegung */
    --tempo: 140ms;
    --tempo-lang: 240ms;
    --kurve: cubic-bezier(0.2, 0, 0.2, 1);

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   02  Variablen (dunkles Farbschema)
   Es werden ausschließlich Variablen getauscht, damit der Dunkelmodus
   wirklich überall greift und keine Farbe irgendwo hart steht.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --marke-dunkel: color-mix(in srgb, var(--marke) 82%, #fff);
        --marke-tiefer: color-mix(in srgb, var(--marke) 70%, #fff);
        --marke-text: color-mix(in srgb, var(--marke) 62%, #fff);
        --marke-rand: color-mix(in srgb, var(--marke) 52%, transparent);
        --marke-rand-fein: color-mix(in srgb, var(--marke) 30%, transparent);
        --marke-flaeche: color-mix(in srgb, var(--marke) 16%, #12161c);
        --marke-flaeche-stark: color-mix(in srgb, var(--marke) 26%, #12161c);
        --marke-schleier: color-mix(in srgb, var(--marke) 24%, transparent);

        --grund: #0d1116;
        --flaeche: #151a21;
        --flaeche-2: #1c222b;
        --flaeche-3: #252c37;
        --flaeche-schleier: rgb(3 6 10 / 68%);

        --rand: #29313d;
        --rand-fein: #212833;
        --rand-stark: #3b4453;

        --text: #e9edf4;
        --text-leise: #a9b3c1;
        --text-still: #939eae;

        --erfolg: #4ade9a;
        --erfolg-flaeche: #10251b;
        --erfolg-rand: #22553d;
        --warnung: #f0c26b;
        --warnung-flaeche: #2a2113;
        --warnung-rand: #5c4a22;
        --fehler: #ff9a90;
        --fehler-flaeche: #2d1614;
        --fehler-rand: #63302b;
        --info: #93b4ff;
        --info-flaeche: #131c30;
        --info-rand: #2b3f6b;
        --neutral-flaeche: #1f2530;
        --neutral-rand: #2f3745;

        --schatten-1: 0 1px 2px rgb(0 0 0 / 40%);
        --schatten-2: 0 1px 3px rgb(0 0 0 / 45%), 0 6px 16px -8px rgb(0 0 0 / 55%);
        --schatten-3: 0 12px 32px -12px rgb(0 0 0 / 65%), 0 2px 6px rgb(0 0 0 / 40%);
        --schatten-4: 0 24px 60px -18px rgb(0 0 0 / 75%);

        color-scheme: dark;
    }
}

/* --------------------------------------------------------------------------
   03  Grundlagen und Rücksetzung
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: var(--gr-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--abstand-2);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.011em;
    color: var(--text);
}

h1 {
    font-size: var(--gr-xl);
}

h2 {
    font-size: var(--gr-lg);
}

h3 {
    font-size: var(--gr-md);
}

p {
    margin: 0 0 var(--abstand-3);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--marke-text);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
}

hr {
    height: 1px;
    margin: var(--abstand-5) 0;
    border: 0;
    background: var(--rand);
}

small {
    font-size: var(--gr-klein);
    color: var(--text-leise);
}

code,
kbd,
pre {
    font-family: var(--schrift-mono);
    font-size: 0.9em;
}

code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-1);
    background: var(--flaeche-2);
    word-break: break-word;
}

ul,
ol {
    margin: 0 0 var(--abstand-3);
    padding-left: 1.35em;
}

dialog {
    color: var(--text);
}

/* --------------------------------------------------------------------------
   04  Zugänglichkeit
   -------------------------------------------------------------------------- */

/* Nur für Screenreader: unsichtbar, aber vorlesbar. Der einzige Ort in
   dieser Datei, an dem !important nötig und erlaubt ist. */
.nur-fuer-screenreader {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Ein deutlich sichtbarer Fokusring, überall gleich. */
:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: 2px;
}

/* Tastaturfokus in Flächen, in denen ein Ring zu eng säße. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: 2px;
    border-radius: var(--radius-1);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: 1px;
}

::selection {
    background: var(--marke-schleier);
    color: var(--text);
}

/* Wer keine Bewegung mag, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms;
        animation-iteration-count: 1;
        transition-duration: 0.001ms;
        scroll-behavior: auto;
    }
}

/* --------------------------------------------------------------------------
   05  Kopfzeile
   -------------------------------------------------------------------------- */

.kopfzeile {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-3);
    align-items: center;
    min-height: var(--kopf-hoehe);
    padding: var(--abstand-2) var(--abstand-4);
    background: color-mix(in srgb, var(--flaeche) 88%, transparent);
    border-bottom: 1px solid var(--rand);
    backdrop-filter: saturate(180%) blur(12px);
}

.marke {
    display: inline-flex;
    gap: var(--abstand-2);
    align-items: center;
    min-width: 0;
    padding: var(--abstand-1) var(--abstand-2);
    margin-left: calc(var(--abstand-2) * -1);
    border-radius: var(--radius-2);
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.marke:hover {
    background: var(--flaeche-2);
    text-decoration: none;
}

.marke-punkt {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-voll);
    background: var(--marke);
    box-shadow: 0 0 0 3px var(--marke-rand-fein);
}

.marke-text {
    overflow: hidden;
    max-width: 42vw;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.website-wahl {
    display: none;
    min-width: 0;
}

.website-wahl select {
    max-width: 220px;
    height: 34px;
    padding: 0 2rem 0 var(--abstand-3);
    font-size: var(--gr-klein);
    background-color: var(--flaeche-2);
}

.kopf-rechts {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
    margin-left: auto;
}

.konto {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.konto-name {
    max-width: 30vw;
    overflow: hidden;
    color: var(--text);
    font-size: var(--gr-klein);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.konto-abmelden {
    color: var(--text-still);
    font-size: var(--gr-sm);
}

.konto-abmelden:hover {
    color: var(--fehler);
}

/* --------------------------------------------------------------------------
   06  Gerüst: Hülle, Seitenleiste, Inhalt
   -------------------------------------------------------------------------- */

/* Das Geruest nutzt die ganze Breite: links das Menue, rechts alles andere.
   Lesetexte begrenzen sich selbst (62ch), Formulare und Tabellen duerfen wachsen. */
.huelle {
    width: 100%;
    margin: 0;
    padding: 0 var(--abstand-4) var(--abstand-8);
}

.seitenleiste {
    padding: var(--abstand-3) 0 0;
}

.inhalt {
    min-width: 0;
    /* Formulare bleiben lesbar. Übersichten, Listen und der Editor heben die
       Grenze mit huelle--breit auf und nutzen die ganze Breite. */
    max-width: 1200px;
    padding: var(--abstand-4) 0 0;
}

.huelle--breit .inhalt {
    max-width: none;
}

/* Seiten ohne Menü (Anmeldung, Vorschau-Link, Fehlerseiten). */
.leer-huelle {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.bereich-leer {
    background: var(--flaeche);
}

/* --------------------------------------------------------------------------
   07  Menü
   -------------------------------------------------------------------------- */

.menue-schalter {
    display: inline-flex;
    gap: var(--abstand-2);
    align-items: center;
    width: 100%;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text);
    font: inherit;
    font-size: var(--gr-normal);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.menue-schalter::before {
    content: "";
    width: 16px;
    height: 10px;
    border-top: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    box-shadow: inset 0 0 0 1px transparent;
}

.menue-schalter:hover {
    border-color: var(--rand-stark);
    background: var(--flaeche-2);
}

.menue-schalter[aria-expanded="true"] {
    border-color: var(--marke-rand);
    background: var(--marke-flaeche);
    color: var(--marke-text);
}

/* Mobil eingeklappt, per Schalter aufklappbar. */
.menue {
    display: none;
    padding: var(--abstand-3) 0 var(--abstand-2);
}

.menue.offen {
    display: block;
}

.nav-gruppe {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: var(--abstand-4);
}

.nav-gruppe:last-child {
    padding-bottom: 0;
}

.nav-titel {
    padding: 0 var(--abstand-3) var(--abstand-2);
    color: var(--text-still);
    font-size: var(--gr-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-link {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-2) var(--abstand-3);
    border-radius: var(--radius-2);
    color: var(--text-leise);
    font-size: var(--gr-normal);
    font-weight: 500;
    transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.nav-link > span:not(.nav-symbol):not(.nav-abzeichen) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nav-link:hover {
    background: var(--flaeche-2);
    color: var(--text);
    text-decoration: none;
}

.nav-link.aktiv {
    background: var(--marke-flaeche);
    color: var(--marke-text);
    font-weight: 600;
}

.nav-link.aktiv .nav-symbol {
    color: var(--marke);
    border-color: var(--marke-rand-fein);
    background: var(--marke-flaeche-stark);
}

.nav-symbol {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background: var(--flaeche-2);
    color: var(--text-still);
    font-size: var(--gr-sm);
    line-height: 1;
}

.nav-abzeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: var(--radius-voll);
    background: var(--marke);
    color: var(--marke-auf);
    font-size: var(--gr-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nav-abzeichen--still {
    background: var(--flaeche-3);
    color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   08  Seitenkopf
   -------------------------------------------------------------------------- */

.seitenkopf {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-3);
    padding-bottom: var(--abstand-5);
}

.seitenkopf-text {
    min-width: 0;
}

.seitenkopf-text h1 {
    margin: 0;
    font-size: var(--gr-2xl);
    letter-spacing: -0.02em;
}

.seitenkopf-text p {
    max-width: 62ch;
    margin: var(--abstand-1) 0 0;
    color: var(--text-leise);
    font-size: var(--gr-normal);
}

.seitenkopf-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
}

/* --------------------------------------------------------------------------
   09  Meldungen und Schnellhinweise
   -------------------------------------------------------------------------- */

.meldung {
    display: flex;
    gap: var(--abstand-3);
    align-items: flex-start;
    padding: var(--abstand-3) var(--abstand-4);
    margin-bottom: var(--abstand-4);
    border: 1px solid var(--neutral-rand);
    border-radius: var(--radius-2);
    background: var(--neutral-flaeche);
    color: var(--text);
    font-size: var(--gr-normal);
}

.meldung-symbol {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: var(--radius-voll);
    background: color-mix(in srgb, currentcolor 16%, transparent);
    color: var(--text-still);
    font-size: var(--gr-sm);
    font-weight: 700;
    line-height: 1;
}

.meldung-text {
    min-width: 0;
    color: var(--text);
}

.meldung-text p:last-child {
    margin-bottom: 0;
}

.meldung-text a {
    color: inherit;
    text-decoration: underline;
}

.meldung--erfolg {
    border-color: var(--erfolg-rand);
    background: var(--erfolg-flaeche);
}

.meldung--erfolg .meldung-symbol {
    color: var(--erfolg);
}

.meldung--warnung {
    border-color: var(--warnung-rand);
    background: var(--warnung-flaeche);
}

.meldung--warnung .meldung-symbol {
    color: var(--warnung);
}

.meldung--fehler {
    border-color: var(--fehler-rand);
    background: var(--fehler-flaeche);
}

.meldung--fehler .meldung-symbol {
    color: var(--fehler);
}

.meldung--info {
    border-color: var(--info-rand);
    background: var(--info-flaeche);
}

.meldung--info .meldung-symbol {
    color: var(--info);
}

/* Kurze Rückmeldungen aus dem Skript, oben rechts. */
.schnellhinweis-huelle {
    position: fixed;
    top: calc(var(--kopf-hoehe) + var(--abstand-2));
    right: var(--abstand-3);
    left: var(--abstand-3);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    align-items: flex-end;
    pointer-events: none;
}

.schnellhinweis {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
    max-width: 380px;
    padding: var(--abstand-3) var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    box-shadow: var(--schatten-3);
    color: var(--text);
    font-size: var(--gr-normal);
    pointer-events: auto;
    animation: hinweis-auf var(--tempo-lang) var(--kurve);
}

.schnellhinweis--erfolg {
    border-color: var(--erfolg-rand);
    background: var(--erfolg-flaeche);
}

.schnellhinweis--fehler {
    border-color: var(--fehler-rand);
    background: var(--fehler-flaeche);
}

.schnellhinweis--warnung {
    border-color: var(--warnung-rand);
    background: var(--warnung-flaeche);
}

.schnellhinweis--info {
    border-color: var(--info-rand);
    background: var(--info-flaeche);
}

.schnellhinweis.geht {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--tempo-lang) var(--kurve), transform var(--tempo-lang) var(--kurve);
}

@keyframes hinweis-auf {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   10  Knöpfe
   -------------------------------------------------------------------------- */

.knopf {
    display: inline-flex;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: center;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-2) var(--abstand-4);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text);
    font-family: inherit;
    font-size: var(--gr-normal);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--schatten-1);
    transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
        color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.knopf:hover {
    border-color: var(--text-still);
    background: var(--flaeche-2);
    text-decoration: none;
}

.knopf:active {
    background: var(--flaeche-3);
    box-shadow: none;
}

.knopf--haupt {
    border-color: transparent;
    background: var(--marke);
    color: var(--marke-auf);
}

.knopf--haupt:hover {
    border-color: transparent;
    background: var(--marke-dunkel);
    color: var(--marke-auf);
}

.knopf--haupt:active {
    background: var(--marke-tiefer);
}

.knopf--geist {
    border-color: var(--rand);
    background: transparent;
    color: var(--text-leise);
    box-shadow: none;
}

.knopf--geist:hover {
    border-color: var(--rand-stark);
    background: var(--flaeche-2);
    color: var(--text);
}

.knopf--gefahr {
    border-color: var(--fehler-rand);
    background: var(--fehler-flaeche);
    color: var(--fehler);
}

.knopf--gefahr:hover {
    border-color: var(--fehler);
    background: color-mix(in srgb, var(--fehler) 12%, var(--flaeche));
    color: var(--fehler);
}

.knopf--klein {
    min-height: 34px;
    padding: var(--abstand-1) var(--abstand-3);
    font-size: var(--gr-klein);
}

.knopf--voll {
    width: 100%;
}

.knopf[disabled],
.knopf[aria-disabled="true"],
button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.knopf[disabled]:hover,
.knopf[aria-disabled="true"]:hover {
    border-color: var(--rand-stark);
    background: var(--flaeche);
}

.knopf--haupt[disabled]:hover {
    background: var(--marke);
}

/* Ein Formular, das wie ein Knopf aussehen soll. */
.aktion-form {
    display: inline-flex;
    margin: 0;
}

/* --------------------------------------------------------------------------
   11  Abzeichen
   -------------------------------------------------------------------------- */

.abzeichen {
    display: inline-flex;
    gap: var(--abstand-1);
    align-items: center;
    padding: 2px var(--abstand-2);
    border: 1px solid var(--neutral-rand);
    border-radius: var(--radius-voll);
    background: var(--neutral-flaeche);
    color: var(--text-leise);
    font-size: var(--gr-sm);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.abzeichen--gruen {
    border-color: var(--erfolg-rand);
    background: var(--erfolg-flaeche);
    color: var(--erfolg);
}

.abzeichen--gelb {
    border-color: var(--warnung-rand);
    background: var(--warnung-flaeche);
    color: var(--warnung);
}

.abzeichen--rot {
    border-color: var(--fehler-rand);
    background: var(--fehler-flaeche);
    color: var(--fehler);
}

.abzeichen--blau {
    border-color: var(--info-rand);
    background: var(--info-flaeche);
    color: var(--info);
}

.abzeichen--grau {
    border-color: var(--neutral-rand);
    background: var(--neutral-flaeche);
    color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   12  Karten
   -------------------------------------------------------------------------- */

.karte {
    margin-bottom: var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.karte:last-child {
    margin-bottom: 0;
}

.karte-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-4);
    border-bottom: 1px solid var(--rand-fein);
}

.karte-kopf h2,
.karte-kopf h3 {
    margin: 0;
    font-size: var(--gr-md);
}

.karte-kopf p {
    margin: var(--abstand-1) 0 0;
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

.karte-inhalt {
    padding: var(--abstand-4);
}

.karte-inhalt > :last-child {
    margin-bottom: 0;
}

.karte-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-3) var(--abstand-4);
    border-top: 1px solid var(--rand-fein);
    border-radius: 0 0 var(--radius-3) var(--radius-3);
    background: var(--flaeche-2);
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

/* Eine Tabelle direkt in einer Karte darf seitlich scrollen. */
.karte:has(> .tabelle) {
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   13  Tabellen
   Auf schmalen Bildschirmen bricht jede Zeile in eine Karte um. Damit die
   Spaltennamen erhalten bleiben, bekommt jede Zelle data-label="…".
   -------------------------------------------------------------------------- */

.tabelle-umschlag {
    overflow-x: auto;
    margin-bottom: var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    -webkit-overflow-scrolling: touch;
}

.tabelle-umschlag .tabelle {
    margin-bottom: 0;
    border: 0;
}

.tabelle {
    width: 100%;
    margin-bottom: var(--abstand-5);
    border-collapse: collapse;
    font-size: var(--gr-normal);
}

.tabelle th,
.tabelle td {
    padding: var(--abstand-3) var(--abstand-4);
    text-align: left;
    vertical-align: middle;
}

.tabelle thead th {
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche-2);
    color: var(--text-still);
    font-size: var(--gr-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabelle tbody tr {
    border-bottom: 1px solid var(--rand-fein);
}

.tabelle tbody tr:last-child {
    border-bottom: 0;
}

.tabelle tbody tr:hover {
    background: var(--flaeche-2);
}

.tabelle td .knopf {
    vertical-align: middle;
}

.tabelle .rechts,
.tabelle th.rechts,
.tabelle td.rechts {
    text-align: right;
}

.tabelle-leer {
    padding: var(--abstand-6) var(--abstand-4);
    color: var(--text-leise);
    font-size: var(--gr-normal);
    text-align: center;
}

/* Auf Mobilgeräten wird jede Zeile zur Karte. */
@media (max-width: 719px) {
    .tabelle,
    .tabelle tbody,
    .tabelle tr,
    .tabelle td {
        display: block;
        width: auto;
    }

    .tabelle thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tabelle tbody tr {
        padding: var(--abstand-2) 0;
        margin-bottom: var(--abstand-3);
        border: 1px solid var(--rand);
        border-radius: var(--radius-2);
        background: var(--flaeche);
    }

    .tabelle tbody tr:last-child {
        margin-bottom: 0;
        border-bottom: 1px solid var(--rand);
    }

    .tabelle {
        width: 100%;
        max-width: 100%;
    }

    .tabelle td {
        display: flex;
        flex-wrap: wrap;
        gap: var(--abstand-1) var(--abstand-3);
        align-items: baseline;
        justify-content: space-between;
        padding: var(--abstand-2) var(--abstand-3);
        text-align: right;
    }

    /* Lange Adressen und Namen dürfen umbrechen, nichts darf hinausragen. */
    .tabelle td > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .tabelle-huelle {
        overflow-x: visible;
    }

    .tabelle td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-still);
        font-size: var(--gr-sm);
        font-weight: 600;
        text-align: left;
    }

    .tabelle-umschlag {
        border: 0;
        background: none;
    }
}

/* --------------------------------------------------------------------------
   14  Leere Zustände
   -------------------------------------------------------------------------- */

.leer-zustand {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    align-items: center;
    padding: var(--abstand-7) var(--abstand-4);
    border: 1px dashed var(--rand-stark);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    text-align: center;
}

.leer-titel {
    margin: 0;
    color: var(--text);
    font-size: var(--gr-lg);
    font-weight: 600;
}

.leer-text {
    max-width: 46ch;
    margin: 0;
    color: var(--text-leise);
    font-size: var(--gr-normal);
}

.leer-aktion {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    justify-content: center;
    margin-top: var(--abstand-2);
}

/* --------------------------------------------------------------------------
   15  Kacheln und Zahlen
   -------------------------------------------------------------------------- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--abstand-4);
    margin-bottom: var(--abstand-5);
}

.kachel {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    align-items: flex-start;
    padding: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    color: var(--text);
    box-shadow: var(--schatten-1);
    transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve),
        transform var(--tempo) var(--kurve);
}

a.kachel:hover,
.kachel:hover {
    border-color: var(--marke-rand);
    box-shadow: var(--schatten-2);
    text-decoration: none;
    transform: translateY(-1px);
}

.kachel-symbol {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--marke-rand-fein);
    border-radius: var(--radius-2);
    background: var(--marke-flaeche);
    color: var(--marke-text);
    font-size: var(--gr-lg);
    line-height: 1;
}

.kachel-text {
    min-width: 0;
    flex: 1 1 55%;
}

.kachel-name {
    display: block;
    color: var(--text);
    font-size: var(--gr-md);
    font-weight: 600;
}

.kachel-beschreibung {
    display: block;
    margin-top: 2px;
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

.kachel-zahl {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-left: auto;
    padding: 2px var(--abstand-2);
    border-radius: var(--radius-voll);
    background: var(--flaeche-2);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.statistiken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--abstand-3);
    margin-bottom: var(--abstand-5);
}

.statistik {
    padding: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.statistik-wert {
    display: block;
    color: var(--text);
    font-size: var(--gr-3xl);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.statistik-label {
    display: block;
    margin-top: var(--abstand-1);
    color: var(--text-still);
    font-size: var(--gr-klein);
}

/* --------------------------------------------------------------------------
   16  Formular: Felder, Beschriftungen, Eingaben
   -------------------------------------------------------------------------- */

.feld {
    margin-bottom: var(--abstand-5);
}

.feld:last-child {
    margin-bottom: 0;
}

.feld-label {
    display: block;
    margin-bottom: var(--abstand-2);
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
}

/* Beschriftung mit Ausrichtungsknoepfen daneben (Texte). */
.feld-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-2);
    margin-bottom: var(--abstand-2);
}

.feld-kopf .feld-label {
    margin-bottom: 0;
}

.feld-werkzeuge {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-2);
}

.feld-hervor {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-1);
    background: var(--flaeche-2, transparent);
}

.hervor-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-leise);
    cursor: pointer;
}

.hervor-knopf:hover {
    background: var(--flaeche-3);
    color: var(--text);
}

.hervor-farbe-huelle {
    display: inline-flex;
    align-items: center;
}

/* Nur mit Hervorhebung im Text - sonst hielte man den Waehler fuer die Textfarbe. */
.hervor-farbe-huelle[hidden] {
    display: none;
}

/* Farbe dieses Texts: ein Spiegel des Farbfelds, direkt neben dem Text. */
.feld-textfarbe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
    padding: 2px 6px 2px 8px;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--flaeche-2);
}

.feld-textfarbe__label {
    font-size: var(--gr-klein);
    color: var(--text-leise);
}

.feld-textfarbe .farbe-optional {
    gap: 4px;
}

.feld-textfarbe .farbe-optional input[type="color"] {
    width: 30px;
    height: 22px;
    padding: 1px;
}

.feld-textfarbe .farbe-optional .knopf {
    padding: 2px 6px;
    font-size: var(--gr-klein);
}

/* Hervorgehobener Text in der Schreibflaeche. */
.rt-flaeche .cms-hervor {
    color: var(--marke-text);
    font-weight: inherit;
    background: var(--marke-flaeche-stark);
    border-radius: 3px;
    padding: 0 2px;
}

.feld-ausrichtung {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--linie);
    border-radius: var(--radius-1);
    background: var(--flaeche-2, transparent);
}

.ausrichtung-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-leise);
    cursor: pointer;
}

.ausrichtung-knopf:hover {
    background: var(--flaeche-3);
    color: var(--text);
}

.ausrichtung-knopf.aktiv {
    border-color: var(--marke-rand-fein);
    background: var(--marke-flaeche-stark);
    color: var(--marke-text);
}

/* Die Vorgabe von der Website (nicht selbst gesetzt): gestrichelt, wie bei Farben. */
.ausrichtung-knopf.vorgabe {
    border-color: var(--rand-stark);
    border-style: dashed;
    color: var(--text);
}

/* Der Farbwaehler der Hervorhebung: kompakt in der Werkzeugleiste. */
.feld-hervor .farbe-optional {
    gap: 4px;
}

.feld-hervor .farbe-optional input[type="color"] {
    width: 30px;
    height: 22px;
    padding: 1px;
}

.feld-hervor .farbe-optional .knopf {
    padding: 2px 6px;
    font-size: var(--gr-klein);
}

.feld-hervor .farbe-optional .feld-einheit {
    font-size: var(--gr-klein);
}

.feld-unterlabel {
    display: block;
    margin-bottom: var(--abstand-1);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 500;
}

.feld-hinweis {
    margin: var(--abstand-2) 0 0;
    color: var(--text-still);
    font-size: var(--gr-klein);
    line-height: 1.5;
}

.feld-fehler {
    display: flex;
    gap: var(--abstand-2);
    align-items: flex-start;
    margin: var(--abstand-2) 0 0;
    color: var(--fehler);
    font-size: var(--gr-klein);
    font-weight: 500;
}

.feld-fehler::before {
    content: "\2715";
    flex: 0 0 auto;
    font-size: var(--gr-xs);
    line-height: 1.6;
}

/* Ein Feld mit Fehler bekommt einen roten Rahmen. */
.feld--fehlerhaft input,
.feld--fehlerhaft select,
.feld--fehlerhaft textarea {
    border-color: var(--fehler);
}

.pflicht {
    color: var(--fehler);
    font-weight: 700;
    cursor: help;
}

/* Eingaben. Bewusst global, damit auch neue Seiten ohne Extraklasse passen. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
select,
textarea {
    display: block;
    width: 100%;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text);
    font-family: inherit;
    font-size: var(--gr-md);
    line-height: 1.5;
    transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
    appearance: none;
}

textarea {
    min-height: 96px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-still);
    opacity: 0.8;
}

input:hover:not([disabled]),
select:hover:not([disabled]),
textarea:hover:not([disabled]) {
    border-color: var(--text-still);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--marke);
    box-shadow: 0 0 0 3px var(--marke-rand-fein);
    outline: none;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly] {
    background: var(--flaeche-2);
    color: var(--text-leise);
    cursor: not-allowed;
}

/* Auswahlfelder bekommen einen eigenen Pfeil. */
select {
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-still) 50%),
        linear-gradient(135deg, var(--text-still) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

select[multiple] {
    padding-right: var(--abstand-3);
    background-image: none;
}

input[type="color"] {
    width: 56px;
    height: var(--ziel-hoehe);
    padding: 4px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    cursor: pointer;
}

input[type="file"] {
    font-size: var(--gr-klein);
}

/* Zahl mit Einheit: Eingabe und Einheit in einer Zeile. */
.feld-zeile {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
}

.feld-zeile input,
.feld-zeile select {
    min-width: 0;
}

.farbe-optional {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
}

.farbe-optional input[type="color"] {
    width: 48px;
    height: 36px;
    padding: 2px;
}

/* Textfeld mit Auswahl (Symbol einer Karte): Dropdown, darunter bei Bedarf das Feld
   fuer ein eigenes Zeichen. */
.textwahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
}

.textwahl__liste {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: var(--gr-md);
}

.textwahl__eigen {
    flex: 0 0 8rem;
    max-width: 8rem;
    text-align: center;
    font-size: var(--gr-md);
}

.farbe-optional input[type="color"].farbe-leer {
    opacity: 0.35;
}

/* Die Vorgabe von der Website: volle Farbe, gestrichelter Rand zeigt "nicht selbst gesetzt". */
.farbe-optional input[type="color"].farbe-vorgabe {
    opacity: 1;
    outline: 2px dashed var(--rand-stark);
    outline-offset: 2px;
}

.feld-einheit {
    flex: 0 0 auto;
    padding: 0 var(--abstand-2);
    color: var(--text-still);
    font-size: var(--gr-normal);
    white-space: nowrap;
}

/* Farbzeile in schmalen Spalten. Ohne diese Regeln schrumpfen alle vier Teile der Zeile
   (Farbwaehler, Hex-Feld, "Ausgangsfarbe", Hinweis): Der Farbwaehler wurde zu einem Strich,
   in dem sich keine Farbe mehr auswaehlen liess, und der Hinweis lief seitlich aus der
   Spalte heraus und lag unter der Nachbarspalte. */
.farbe-optional {
    flex-wrap: wrap;
}

/* Der Farbwaehler behaelt seine Breite. flex-basis bleibt "auto", damit die kleineren
   Varianten (.feld-textfarbe, .feld-hervor) ihre eigene Breite weiter setzen koennen. */
.farbe-optional input[type="color"] {
    flex: 0 0 auto;
}

.farbe-optional .farbe-hex {
    flex: 1 1 7rem;
    min-width: 5.5rem;
}

.farbe-optional .knopf {
    flex: 0 0 auto;
}

/* Der Hinweis ("Vorgabe #0b385c" / "keine eigene Farbe") bekommt eine eigene Zeile,
   statt aus der Spalte zu laufen. */
.farbe-optional .feld-einheit {
    flex: 1 1 100%;
    min-width: 0;
    padding: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* "Aussehen dieses Knopfs" steht auch im schmalen Editor-Panel der Werkbank. Die beiden
   Spalten-Regeln des Feldgitters haengen an der FENSTERbreite (min-width: 560px) und
   greifen dort deshalb falsch - das Panel ist viel schmaler als das Fenster. Hier zaehlt
   der tatsaechlich vorhandene Platz: Passen keine zwei Spalten, wird es automatisch eine. */
.link-aussehen .feld-gitter,
.link-aussehen .feld-gitter--zwei {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Mehrere Felder nebeneinander. Mobil untereinander. */
.feld-gitter {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--abstand-3);
}

.feld-gitter > div {
    min-width: 0;
}

/* Zusammengehörende Felder in einer Umrandung. */
.feld-gruppe {
    padding: var(--abstand-4);
    margin: 0 0 var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
}

.feld-gruppe > legend {
    padding: 0 var(--abstand-2);
    margin-left: calc(var(--abstand-2) * -1);
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
}

.feld-gruppe > .feld-hinweis {
    margin-top: 0;
    margin-bottom: var(--abstand-4);
}

/* Aufklappbarer Bereich, etwa für die Angaben für Suchmaschinen. */
.feld-aufklapp {
    margin-bottom: var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
}

.feld-aufklapp > summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: baseline;
    padding: var(--abstand-3) var(--abstand-4);
    border-radius: var(--radius-3);
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.feld-aufklapp > summary::-webkit-details-marker {
    display: none;
}

.feld-aufklapp > summary::before {
    content: "\203A";
    display: inline-block;
    color: var(--text-still);
    font-size: var(--gr-lg);
    line-height: 1;
    transition: transform var(--tempo) var(--kurve);
}

.feld-aufklapp[open] > summary::before {
    transform: rotate(90deg);
}

.feld-aufklapp > summary:hover {
    background: var(--flaeche-2);
}

.feld-aufklapp-hinweis {
    color: var(--text-still);
    font-size: var(--gr-klein);
    font-weight: 400;
}

.feld-aufklapp-inhalt {
    padding: var(--abstand-4);
    border-top: 1px solid var(--rand-fein);
}

.feld-aufklapp-inhalt > :last-child {
    margin-bottom: 0;
}

/* Ja/Nein-Felder brauchen keine eigene Beschriftung darüber. */
.feld--janein {
    margin-bottom: var(--abstand-4);
}

/* --------------------------------------------------------------------------
   17  Kippschalter
   Die Checkbox ist versteckt, sichtbar sind Spur und Knopf.
   -------------------------------------------------------------------------- */

.schalter {
    display: inline-flex;
    gap: var(--abstand-3);
    align-items: center;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-1) 0;
    cursor: pointer;
    user-select: none;
}

.schalter input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.schalter-spur {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-voll);
    background: var(--flaeche-3);
    transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}

.schalter-knopf {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-voll);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
    transition: transform var(--tempo) var(--kurve);
}

.schalter input:checked + .schalter-spur {
    border-color: transparent;
    background: var(--marke);
}

.schalter input:checked + .schalter-spur .schalter-knopf {
    background: #fff;
    transform: translateX(16px);
}

.schalter input:focus-visible + .schalter-spur {
    outline: 2px solid var(--marke);
    outline-offset: 2px;
}

.schalter input[disabled] + .schalter-spur {
    opacity: 0.5;
}

.schalter-text {
    color: var(--text);
    font-size: var(--gr-normal);
}

/* --------------------------------------------------------------------------
   18  Auswahl und Farbpalette
   -------------------------------------------------------------------------- */

.auswahl-liste {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
}

.auswahl-eintrag {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text);
    font-size: var(--gr-normal);
    cursor: pointer;
    transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}

.auswahl-eintrag:hover {
    border-color: var(--rand-stark);
    background: var(--flaeche-2);
}

.auswahl-eintrag input[type="checkbox"],
.auswahl-eintrag input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--marke);
    cursor: pointer;
}

.auswahl-eintrag:has(input:checked) {
    border-color: var(--marke-rand);
    background: var(--marke-flaeche);
}

.farb-palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
}

.farb-punkt {
    position: relative;
    display: inline-flex;
    width: 32px;
    height: 32px;
    border: 2px solid var(--rand);
    border-radius: var(--radius-voll);
    background: var(--punkt, var(--flaeche-3));
    cursor: pointer;
    transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}

.farb-punkt:hover {
    transform: scale(1.08);
}

.farb-punkt input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.farb-punkt:has(input:checked) {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--text);
}

.farb-punkt:has(input:focus-visible) {
    outline: 2px solid var(--marke);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   19  Formatierter Text (Richtext)
   -------------------------------------------------------------------------- */

/*
 * Kein overflow: hidden – sonst wäre die Werkzeugleiste in einem eigenen
 * Scrollbereich gefangen und ihr "sticky" würde nicht mehr greifen.
 */
.richtext {
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-2);
    background: var(--flaeche);
}

.richtext:focus-within {
    border-color: var(--marke);
    box-shadow: 0 0 0 3px var(--marke-rand-fein);
}

.rt-leiste {
    position: sticky;
    top: var(--kopf-hoehe);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding: var(--abstand-1);
    border-bottom: 1px solid var(--rand);
    border-radius: var(--radius-2) var(--radius-2) 0 0;
    background: var(--flaeche-2);
}

.rt-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--abstand-2);
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background: transparent;
    color: var(--text-leise);
    font-family: inherit;
    font-size: var(--gr-normal);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.rt-knopf:hover {
    background: var(--flaeche-3);
    color: var(--text);
}

.rt-knopf.aktiv {
    border-color: var(--marke-rand-fein);
    background: var(--marke-flaeche-stark);
    color: var(--marke-text);
}

.rt-trenner {
    width: 1px;
    height: 20px;
    margin: 0 var(--abstand-1);
    background: var(--rand-stark);
}

.rt-flaeche {
    min-height: 160px;
    padding: var(--abstand-4);
    color: var(--text);
    font-size: var(--gr-md);
    line-height: 1.65;
    overflow-wrap: break-word;
    outline: none;
}

.rt-flaeche > :first-child {
    margin-top: 0;
}

.rt-hinweis {
    display: block;
    padding: var(--abstand-1) var(--abstand-3);
    border-top: 1px solid var(--linie);
    color: var(--text-still);
    font-size: var(--gr-klein);
    line-height: 1.5;
}

.rt-flaeche > :last-child {
    margin-bottom: 0;
}

.rt-flaeche p {
    margin: 0 0 0.9em;
}

.rt-flaeche h2 {
    margin: 1.3em 0 0.4em;
    font-size: var(--gr-xl);
    letter-spacing: -0.015em;
}

.rt-flaeche h3 {
    margin: 1.2em 0 0.35em;
    font-size: var(--gr-lg);
}

.rt-flaeche h4 {
    margin: 1.1em 0 0.3em;
    font-size: var(--gr-md);
}

.rt-flaeche ul,
.rt-flaeche ol {
    margin: 0 0 0.9em;
    padding-left: 1.4em;
}

.rt-flaeche li {
    margin-bottom: 0.25em;
}

.rt-flaeche blockquote {
    margin: 1em 0;
    padding: var(--abstand-1) 0 var(--abstand-1) var(--abstand-4);
    border-left: 3px solid var(--marke-rand);
    color: var(--text-leise);
    font-style: italic;
}

.rt-flaeche a {
    color: var(--marke-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rt-flaeche strong,
.rt-flaeche b {
    font-weight: 650;
}

.rt-flaeche table {
    width: 100%;
    margin-bottom: 0.9em;
    border-collapse: collapse;
    font-size: var(--gr-normal);
}

.rt-flaeche th,
.rt-flaeche td {
    padding: var(--abstand-2);
    border: 1px solid var(--rand);
    text-align: left;
}

.rt-quelle {
    display: none;
}

/* --------------------------------------------------------------------------
   20  Wiederholer
   -------------------------------------------------------------------------- */

.wiederholer {
    margin-bottom: var(--abstand-5);
}

.wiederholer-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--abstand-2);
}

.wiederholer-kopf .feld-label {
    margin-bottom: 0;
}

.wiederholer-zeilen {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-3);
    margin-bottom: var(--abstand-3);
}

.wiederholer-zeilen:empty {
    margin-bottom: 0;
}

.wiederholer-zeile {
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.wiederholer-zeile-kopf {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
    padding: var(--abstand-2) var(--abstand-3);
    border-bottom: 1px solid var(--rand-fein);
    border-radius: var(--radius-3) var(--radius-3) 0 0;
    background: var(--flaeche-2);
}

.wiederholer-zeile-inhalt {
    padding: var(--abstand-4);
}

.wiederholer-zeile-inhalt > :last-child {
    margin-bottom: 0;
}

.wiederholer-titel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Der Griff zum Verschieben. */
.griff {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background: var(--flaeche-2);
    color: var(--text-still);
    /* Das Griffzeichen braucht eine Schrift, die es kennt. */
    font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", var(--schrift);
    font-size: var(--gr-normal);
    line-height: 1;
    cursor: grab;
    touch-action: none;
}

.griff:hover {
    border-color: var(--rand);
    background: var(--flaeche);
    color: var(--text);
}

.griff:active {
    cursor: grabbing;
}

/* Zeile entfernen. */
.zeile-weg {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background: transparent;
    color: var(--text-still);
    font-size: var(--gr-klein);
    line-height: 1;
    cursor: pointer;
    transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.zeile-weg:hover {
    border-color: var(--fehler-rand);
    background: var(--fehler-flaeche);
    color: var(--fehler);
}

/* --------------------------------------------------------------------------
   21  Baukasten
   -------------------------------------------------------------------------- */

.baukasten {
    margin-bottom: var(--abstand-5);
}

.baukasten-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--abstand-3);
}

.baukasten-kopf .feld-label,
.baukasten-kopf .feld-hinweis {
    margin: 0;
}

.baukasten-liste {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-3);
    margin-bottom: var(--abstand-4);
}

.baustein {
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.baustein-kopf {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
    padding: var(--abstand-2) var(--abstand-3);
    border-bottom: 1px solid var(--rand-fein);
    border-radius: var(--radius-3) var(--radius-3) 0 0;
    background: var(--flaeche-2);
}

.baustein-symbol {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-1);
    background: var(--marke-flaeche-stark);
    color: var(--marke-text);
    font-size: var(--gr-klein);
    line-height: 1;
}

.baustein-name {
    flex: 0 0 auto;
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
}

.baustein-vorschau {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--text-still);
    font-size: var(--gr-klein);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.baustein-klappen {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-1);
    background: transparent;
    color: var(--text-still);
    font-size: var(--gr-normal);
    line-height: 1;
    cursor: pointer;
    transition: transform var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}

.baustein-klappen:hover {
    border-color: var(--rand);
    background: var(--flaeche);
    color: var(--text);
}

.baustein-inhalt {
    padding: var(--abstand-4);
}

.baustein-inhalt > :last-child {
    margin-bottom: 0;
}

/* Zugeklappter Baustein: Inhalt weg, Pfeil gedreht. */
.baustein.zu .baustein-inhalt {
    display: none;
}

.baustein.zu .baustein-kopf {
    border-bottom-color: transparent;
    border-radius: var(--radius-3);
}

.baustein.zu .baustein-klappen {
    transform: rotate(-90deg);
}

/* Karten-Abschnitt: hier eine neue Karte anlegen. */
.baustein-karten-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-2) var(--abstand-3);
    padding: var(--abstand-3);
    border: 1px dashed var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
}

.baustein-karten-zeile .feld-hinweis {
    flex: 1 1 260px;
    margin: 0;
}

.baukasten-neu {
    padding: var(--abstand-4);
    border: 1px dashed var(--rand-stark);
    border-radius: var(--radius-3);
    background: var(--flaeche-2);
}

/* Die Auswahl wandert unter den Baustein, in dem gerade gearbeitet wird. */
.baukasten-neu--dazwischen {
    margin-block: var(--abstand-3);
    border-color: var(--marke);
}

.baukasten-neu-ende {
    margin-top: var(--abstand-3);
}

.baukasten-neu-titel {
    display: block;
    margin-bottom: var(--abstand-3);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.baukasten-auswahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--abstand-2);
}

.baustein-waehlen {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
    min-height: var(--ziel-hoehe);
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text);
    font-family: inherit;
    font-size: var(--gr-klein);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve),
        transform var(--tempo) var(--kurve);
}

.baustein-waehlen:hover {
    border-color: var(--marke-rand);
    background: var(--marke-flaeche);
    color: var(--marke-text);
    transform: translateY(-1px);
}

.baustein-waehlen .baustein-symbol {
    background: var(--flaeche-2);
    color: var(--text-leise);
}

.baustein-waehlen:hover .baustein-symbol {
    background: var(--marke-flaeche-stark);
    color: var(--marke-text);
}

/* --------------------------------------------------------------------------
   22  Medienfeld und Medienraster
   -------------------------------------------------------------------------- */

.medien-feld {
    padding: var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche-2);
    transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}

/* Solange eine Datei über dem Feld schwebt. */
.medien-feld.zieht-drueber {
    border-color: var(--marke);
    border-style: dashed;
    background: var(--marke-flaeche);
}

.medien-feld-liste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
}

.medien-feld-liste:not(:empty) {
    margin-bottom: var(--abstand-3);
}

.medien-feld-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
}

.medien-alt {
    width: 100%;
    min-height: 30px;
    margin-top: 2px;
    padding: 4px 8px;
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--hintergrund);
    font-size: var(--gr-klein);
}

.medien-alt--fehlt {
    border-color: var(--warnung);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--warnung) 25%, transparent);
}

.medien-kachel:has(.medien-alt) {
    width: 100%;
    max-width: 320px;
}

.medien-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
    width: 132px;
    padding: var(--abstand-2);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.medien-kachel img {
    display: block;
    width: 100%;
    height: 84px;
    border-radius: var(--radius-1);
    background: var(--flaeche-3);
    object-fit: cover;
}

.medien-kachel--fehlt {
    align-items: center;
    justify-content: center;
    min-height: 118px;
    border-color: var(--fehler-rand);
    border-style: dashed;
    background: var(--fehler-flaeche);
    color: var(--fehler);
    font-size: var(--gr-klein);
    text-align: center;
}

.medien-kachel-name {
    display: block;
    overflow: hidden;
    color: var(--text-leise);
    font-size: var(--gr-sm);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.medien-dateisymbol,
.waehler-dateisymbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 84px;
    border-radius: var(--radius-1);
    background: var(--flaeche-3);
    color: var(--text-still);
    font-size: var(--gr-klein);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.medien-warnung,
.waehler-warnung {
    position: absolute;
    top: var(--abstand-2);
    left: var(--abstand-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-voll);
    background: var(--warnung);
    color: #fff;
    font-size: var(--gr-sm);
    font-weight: 700;
    line-height: 1;
    cursor: help;
}

@media (prefers-color-scheme: dark) {
    .medien-warnung,
    .waehler-warnung {
        color: #241c0c;
    }
}

.medien-weg {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius-voll);
    background: var(--flaeche);
    color: var(--text-leise);
    font-size: var(--gr-sm);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--schatten-1);
    transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.medien-weg:hover {
    border-color: var(--fehler);
    background: var(--fehler);
    color: #fff;
}

/* Die Bibliothek als Raster. */
.medien-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--abstand-4);
    margin-bottom: var(--abstand-5);
}

.medien-raster .medien-kachel {
    width: auto;
}

.medien-raster .medien-kachel img,
.medien-raster .medien-dateisymbol {
    height: 130px;
}

/* --------------------------------------------------------------------------
   23  Medienwähler (Dialog)
   Das Skript baut den Dialog beim ersten Öffnen und füllt ihn per fetch.
   -------------------------------------------------------------------------- */

.waehler {
    width: min(920px, 100vw - 1.5rem);
    max-width: none;
    max-height: min(88vh, 860px);
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    color: var(--text);
    box-shadow: var(--schatten-4);
    overflow: hidden;
}

.waehler::backdrop {
    background: var(--flaeche-schleier);
    backdrop-filter: blur(2px);
}

.waehler[open] {
    display: flex;
    flex-direction: column;
}

.waehler-kopf {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-3) var(--abstand-4);
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche);
}

.waehler-kopf h2 {
    margin: 0;
    font-size: var(--gr-md);
}

.waehler-kopf .knopf {
    flex: 0 0 auto;
}

/* Suchfeld und Ordnerauswahl. */
.waehler-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    padding: var(--abstand-3) var(--abstand-4);
    border-bottom: 1px solid var(--rand-fein);
    background: var(--flaeche-2);
}

.waehler-filter input[type="search"] {
    flex: 1 1 220px;
    min-width: 0;
}

.waehler-filter select {
    flex: 0 1 200px;
}

/* Der scrollende Teil mit den Bildern. */
.waehler-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--abstand-3);
    flex: 1 1 auto;
    padding: var(--abstand-4);
    overflow-y: auto;
}

.waehler-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
    padding: var(--abstand-2);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve),
        transform var(--tempo) var(--kurve);
}

.waehler-kachel img {
    display: block;
    width: 100%;
    height: 108px;
    border-radius: var(--radius-1);
    background: var(--flaeche-3);
    object-fit: cover;
}

.waehler-kachel:hover {
    border-color: var(--marke-rand);
    box-shadow: var(--schatten-2);
    transform: translateY(-1px);
}

.waehler-kachel.gewaehlt {
    border-color: var(--marke);
    box-shadow: 0 0 0 2px var(--marke-rand);
}

/* Häkchen an einer gewählten Kachel. */
.waehler-kachel.gewaehlt::after {
    content: "\2713";
    position: absolute;
    top: var(--abstand-2);
    right: var(--abstand-2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-voll);
    background: var(--marke);
    color: var(--marke-auf);
    font-size: var(--gr-sm);
    font-weight: 700;
    line-height: 1;
}

.waehler-name {
    display: block;
    overflow: hidden;
    color: var(--text-leise);
    font-size: var(--gr-sm);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.waehler-dateisymbol {
    height: 108px;
}

.waehler-leer {
    flex: 1 1 auto;
    padding: var(--abstand-8) var(--abstand-4);
    margin: 0;
    color: var(--text-leise);
    font-size: var(--gr-normal);
    text-align: center;
}

.waehler-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-3) var(--abstand-4);
    border-top: 1px solid var(--rand);
    background: var(--flaeche-2);
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

/* Bei einfacher Auswahl blendet das Skript den Fuß aus. */
.waehler-fuss[hidden] {
    display: none;
}

/* Der Inhalt zwischen Kopf und Fuß, den das Skript austauscht. */
.waehler-koerper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 200px;
    overflow-y: auto;
}

.waehler-laedt {
    padding: var(--abstand-7) var(--abstand-4);
    color: var(--text-still);
    font-size: var(--gr-normal);
    text-align: center;
}

/* --------------------------------------------------------------------------
   24  Editor mit Vorschau
   -------------------------------------------------------------------------- */

.editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-5);
    align-items: start;
}

.editor-formular {
    min-width: 0;
}

.editor-vorschau {
    min-width: 0;
}

/* Die schmale Kopfzeile des Editors: Pfad und Titel links, Status in der
   Mitte, Speichern und Veröffentlichen rechts. Bleibt beim Rollen oben. */
.editor-kopf {
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--abstand-2) var(--abstand-4);
    align-items: center;
    min-height: var(--editor-kopf-hoehe);
    margin: 0 0 var(--abstand-4);
    padding: var(--abstand-2) 0 var(--abstand-3);
    border-bottom: 1px solid var(--rand);
    background: color-mix(in srgb, var(--hintergrund) 94%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
}

.editor-kopf-text {
    min-width: 0;
}

.editor-kopf-text .brotkrumen {
    margin: 0 0 2px;
    font-size: var(--gr-klein);
}

.editor-kopf-text h1 {
    margin: 0;
    overflow: hidden;
    font-size: var(--gr-xl);
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.editor-kopf-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    grid-column: 1 / -1;
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

.editor-kopf-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: flex-end;
}

@media (min-width: 900px) {
    /* Auf grossen Schirmen bleibt die Zeile beim Rollen oben, auf dem Handy
       wuerde sie zu viel Platz einnehmen. */
    .editor-kopf {
        position: sticky;
        top: var(--kopf-hoehe);
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .editor-kopf-status {
        grid-column: auto;
    }
}

/* Statusleiste unter dem Formular: Speichern, Veröffentlichen, Hinweise. */
.statusleiste {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-3) var(--abstand-4);
    margin-top: var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    box-shadow: var(--schatten-3);
    backdrop-filter: saturate(180%) blur(10px);
}

.statusleiste-links,
.statusleiste-rechts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
}

.statusleiste-links {
    min-width: 0;
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

.statusleiste-hinweis {
    display: none;
    gap: var(--abstand-2);
    align-items: center;
    color: var(--warnung);
    font-size: var(--gr-klein);
    font-weight: 600;
}

.statusleiste-hinweis.sichtbar {
    display: inline-flex;
}

.statusleiste-hinweis::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-voll);
    background: var(--warnung);
}

/* Die Vorschau selbst. */
.vorschau {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.vorschau-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-2) var(--abstand-3);
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche-2);
}

.vorschau-titel {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
    min-width: 0;
    overflow: hidden;
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vorschau-geraete {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
}

.vorschau-geraet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 var(--abstand-2);
    border: 0;
    border-radius: var(--radius-1);
    background: transparent;
    color: var(--text-still);
    font-family: inherit;
    font-size: var(--gr-klein);
    line-height: 1;
    cursor: pointer;
    transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}

.vorschau-geraet:hover {
    background: var(--flaeche-2);
    color: var(--text);
}

.vorschau-geraet.aktiv {
    background: var(--marke-flaeche-stark);
    color: var(--marke-text);
    font-weight: 600;
}

.vorschau-buehne {
    position: relative;
    display: flex;
    justify-content: center;
    padding: var(--abstand-3);
    background: repeating-conic-gradient(var(--flaeche-2) 0% 25%, var(--flaeche-3) 0% 50%) 50% / 18px 18px;
    overflow: auto;
}

.vorschau-rahmen {
    display: block;
    width: 100%;
    max-width: 100%;
    height: min(78vh, 900px);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: #fff;
    box-shadow: var(--schatten-2);
}

/* Huelle um den verkleinerten Rahmen: so gross wie das Sichtbare, der Rest wird abgeschnitten. */
.vorschau-huelle {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--radius-2);
}

.vorschau-leer {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: var(--abstand-6) var(--abstand-4);
    color: var(--text-leise);
    font-size: var(--gr-normal);
    text-align: center;
}

/* Ladeschleier über der Bühne. */
.vorschau-laedt {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-2);
    background: color-mix(in srgb, var(--flaeche) 72%, transparent);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 600;
    backdrop-filter: blur(1px);
}

.vorschau-laedt.sichtbar,
.vorschau.laedt .vorschau-laedt {
    display: flex;
}

.vorschau-laedt::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid var(--rand-stark);
    border-top-color: var(--marke);
    border-radius: var(--radius-voll);
    animation: kreisel 700ms linear infinite;
}

@keyframes kreisel {
    to {
        transform: rotate(360deg);
    }
}

/* --------------------------------------------------------------------------
   25  Anmeldung
   -------------------------------------------------------------------------- */

.anmeldung {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--flaeche);
}

.anmelde-karte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding: var(--abstand-7) var(--abstand-4);
    margin: 0 auto;
}

.anmelde-marke {
    display: flex;
    gap: var(--abstand-2);
    align-items: center;
    margin-bottom: var(--abstand-7);
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
}

/* Zwei Eingänge: Kunden-Login und Admin-Login, als Reiter über der Überschrift. */
.anmelde-wahl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin-bottom: var(--abstand-6);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
}

.anmelde-wahl__reiter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 var(--abstand-3);
    border-radius: calc(var(--radius-2) - 3px);
    color: var(--text-leise);
    font-size: var(--gr-normal);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.anmelde-wahl__reiter:hover {
    color: var(--text);
    text-decoration: none;
}

.anmelde-wahl__reiter.ist-aktiv {
    background: var(--flaeche);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.anmelde-wahl__reiter:focus-visible {
    outline: 2px solid var(--marke);
    outline-offset: 1px;
}

.anmelde-karte h1 {
    margin-bottom: var(--abstand-2);
    font-size: var(--gr-2xl);
    letter-spacing: -0.025em;
}

.anmelde-text {
    margin-bottom: var(--abstand-6);
    color: var(--text-leise);
    font-size: var(--gr-md);
}

.anmelde-form {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4);
}

.anmelde-form .feld {
    margin-bottom: 0;
}

.anmelde-form .knopf {
    min-height: 46px;
    margin-top: var(--abstand-2);
}

.anmelde-fuss {
    margin: var(--abstand-6) 0 0;
    color: var(--text-still);
    font-size: var(--gr-klein);
}

/* Die Schauseite rechts. Auf Mobilgeräten weg. */
.anmelde-bild {
    display: none;
    position: relative;
    overflow: hidden;
    padding: var(--abstand-8) var(--abstand-7);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--marke) 55%, transparent) 0%, transparent 60%),
        linear-gradient(150deg, var(--marke) 0%, color-mix(in srgb, var(--marke) 62%, #0b1020) 100%);
    color: #fff;
}

.anmelde-bild-inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: 420px;
}

.anmelde-augenbraue {
    display: inline-block;
    padding: 4px var(--abstand-3);
    margin-bottom: var(--abstand-4);
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: var(--radius-voll);
    background: rgb(255 255 255 / 14%);
    color: #fff;
    font-size: var(--gr-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    align-self: flex-start;
}

.anmelde-bild h2 {
    margin-bottom: var(--abstand-4);
    color: #fff;
    font-size: clamp(1.9rem, 2.6vw, 2.6rem);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.anmelde-bild h2 span {
    color: rgb(255 255 255 / 72%);
}

.anmelde-bild p {
    max-width: 34ch;
    color: rgb(255 255 255 / 82%);
    font-size: var(--gr-md);
}

/* Die kleine Beispielkarte auf der Schauseite. */
.anmelde-karte-mini {
    padding: var(--abstand-4);
    margin-top: var(--abstand-6);
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: var(--radius-3);
    background: rgb(255 255 255 / 12%);
    box-shadow: 0 20px 40px -24px rgb(0 0 0 / 55%);
    backdrop-filter: blur(6px);
}

.mini-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--abstand-3);
}

.mini-label {
    color: rgb(255 255 255 / 72%);
    font-size: var(--gr-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mini-punkt {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-voll);
    background: #fff;
    box-shadow: 0 0 0 4px rgb(255 255 255 / 22%);
}

.mini-inhalt {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
}

.mini-inhalt strong {
    display: block;
    color: #fff;
    font-size: var(--gr-normal);
}

.mini-inhalt span {
    display: block;
    color: rgb(255 255 255 / 70%);
    font-size: var(--gr-sm);
}

.mini-bild {
    flex: 0 0 auto;
    width: 56px;
    height: 44px;
    border-radius: var(--radius-1);
    background: linear-gradient(135deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 16%));
}

.mini-fuss {
    padding-top: var(--abstand-3);
    margin-top: var(--abstand-3);
    border-top: 1px solid rgb(255 255 255 / 18%);
    color: rgb(255 255 255 / 76%);
    font-size: var(--gr-sm);
}

/* --------------------------------------------------------------------------
   26  Hilfe-Seite
   -------------------------------------------------------------------------- */

.schritte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-4);
    margin-bottom: var(--abstand-6);
}

.schritt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--abstand-1) var(--abstand-4);
    padding: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.schritt-nummer {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-voll);
    background: var(--marke);
    color: var(--marke-auf);
    font-size: var(--gr-normal);
    font-weight: 700;
    line-height: 1;
}

.schritt-titel {
    color: var(--text);
    font-size: var(--gr-md);
    font-weight: 600;
}

.schritt-text {
    margin: 0;
    color: var(--text-leise);
    font-size: var(--gr-normal);
}

.faq {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    margin-bottom: var(--abstand-6);
}

.faq-eintrag {
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
}

.faq-frage {
    display: flex;
    gap: var(--abstand-3);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--abstand-3) var(--abstand-4);
    border-radius: var(--radius-2);
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq-frage::-webkit-details-marker {
    display: none;
}

.faq-frage::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--text-still);
    font-size: var(--gr-lg);
    line-height: 1;
}

.faq-eintrag[open] .faq-frage::after {
    content: "\2013";
}

.faq-frage:hover {
    background: var(--flaeche-2);
}

.faq-antwort {
    padding: 0 var(--abstand-4) var(--abstand-4);
    color: var(--text-leise);
    font-size: var(--gr-normal);
}

.faq-antwort > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   27  Sortieren per Ziehen
   -------------------------------------------------------------------------- */

.sortierbar {
    position: relative;
}

/* Die Zeile, die gerade gezogen wird. */
.zieht {
    opacity: 0.55;
    outline: 2px dashed var(--marke);
    outline-offset: 2px;
}

/* Die Stelle, an der die Zeile landen würde. */
.ziel {
    position: relative;
}

.ziel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: var(--radius-voll);
    background: var(--marke);
}

.sortierbar tr.ziel::before {
    top: 0;
}

/* --------------------------------------------------------------------------
   28  Kleinkram
   -------------------------------------------------------------------------- */

/* Bewusst ein Block: der Kasten enthält fließenden Text mit Links. */
.hinweis-box {
    display: block;
    padding: var(--abstand-4);
    margin-bottom: var(--abstand-5);
    border: 1px solid var(--info-rand);
    border-left-width: 3px;
    border-radius: var(--radius-2);
    background: var(--info-flaeche);
    color: var(--text);
    font-size: var(--gr-normal);
    line-height: 1.6;
}

.hinweis-box a {
    color: var(--marke-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hinweis-box > :last-child {
    margin-bottom: 0;
}

.hinweis-box h3 {
    margin-bottom: var(--abstand-1);
    font-size: var(--gr-normal);
}

/* Ein unauffälliger Hinweis über ungespeicherte Änderungen. */
[data-ungespeichert] {
    display: none;
}

[data-ungespeichert].sichtbar {
    display: inline-flex;
}

/* --------------------------------------------------------------------------
   29  Größere Bildschirme
   -------------------------------------------------------------------------- */

/* Ab 560px passen zwei Felder nebeneinander. */
@media (min-width: 560px) {
    .feld-gitter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seitenkopf {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .schritte {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 760px) {
    .feld-gitter--drei {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .huelle {
        padding-left: var(--abstand-6);
        padding-right: var(--abstand-6);
    }

    .kopfzeile {
        padding-left: var(--abstand-6);
        padding-right: var(--abstand-6);
    }

    .huelle {
        padding-left: var(--abstand-6);
        padding-right: var(--abstand-6);
    }
}

/* Übersicht der Agentur: ab 1400px Websites links, Protokoll rechts. */
.uebersicht-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-4);
    align-items: start;
}

.uebersicht-spalten > .karte {
    margin-bottom: 0;
}

@media (min-width: 1400px) {
    .uebersicht-spalten {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/* Ab 900px steht die Seitenleiste fest links. */
@media (min-width: 900px) {
    .huelle {
        display: grid;
        grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
        gap: var(--abstand-7);
        align-items: start;
    }

    .seitenleiste {
        position: sticky;
        top: var(--kopf-hoehe);
        max-height: calc(100vh - var(--kopf-hoehe));
        padding: var(--abstand-5) 0 var(--abstand-5);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .menue-schalter {
        display: none;
    }

    .menue {
        display: block;
        padding: 0;
    }

    .inhalt {
        padding-top: var(--abstand-6);
    }

    .website-wahl {
        display: block;
    }

    .marke-text {
        max-width: 260px;
    }

    /* Anmeldung: links das Formular, rechts die Schauseite. */
    .anmeldung {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }

    .anmelde-karte {
        max-width: 460px;
        padding: var(--abstand-8) var(--abstand-7);
        margin: 0 auto;
    }

    .anmelde-bild {
        display: block;
    }

    .schritte {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Ab 1200px liegt die Vorschau neben dem Formular und fuellt die Hoehe des
   Fensters aus. Das Formular rollt, die Vorschau bleibt stehen. */
@media (min-width: 1200px) {
    .editor--geteilt {
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
        gap: var(--abstand-6);
    }

    .editor--geteilt .editor-vorschau {
        position: sticky;
        top: calc(var(--kopf-hoehe) + var(--editor-kopf-hoehe) + var(--abstand-3));
        height: calc(100vh - var(--kopf-hoehe) - var(--editor-kopf-hoehe) - var(--abstand-3) - var(--abstand-4));
        height: calc(100dvh - var(--kopf-hoehe) - var(--editor-kopf-hoehe) - var(--abstand-3) - var(--abstand-4));
    }

    .editor--geteilt .vorschau {
        height: 100%;
    }

    .editor--geteilt .vorschau-buehne {
        flex: 1;
        min-height: 0;
    }

    .editor--geteilt .vorschau-rahmen {
        height: 100%;
    }
}

/* Auf sehr breiten Schirmen bekommt die Vorschau noch etwas mehr Platz. */
@media (min-width: 1700px) {
    .editor--geteilt {
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    }
}

/* Auf Touchgeräten und schmalen Bildschirmen größere Berührungsziele. */
@media (max-width: 899px), (pointer: coarse) {
    .knopf,
    .baustein-waehlen,
    .auswahl-eintrag,
    .menue-schalter {
        min-height: 44px;
    }

    .knopf--klein {
        min-height: 40px;
    }

    .griff,
    .zeile-weg,
    .baustein-klappen,
    .rt-knopf,
    .vorschau-geraet,
    .medien-weg {
        min-width: 40px;
        min-height: 40px;
    }

    .medien-weg {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    .rt-leiste {
        position: static;
    }

    .seitenkopf-aktionen .knopf {
        flex: 1 1 auto;
    }
}

/* Sehr schmale Geräte: weniger Rand, damit mehr Inhalt passt. */
@media (max-width: 400px) {
    .huelle,
    .kopfzeile {
        padding-left: var(--abstand-3);
        padding-right: var(--abstand-3);
    }

    .karte-inhalt,
    .baustein-inhalt,
    .wiederholer-zeile-inhalt,
    .feld-gruppe,
    .feld-aufklapp-inhalt {
        padding: var(--abstand-3);
    }

    .medien-kachel {
        width: calc(50% - var(--abstand-2));
    }
}

/* --------------------------------------------------------------------------
   30  Druck
   -------------------------------------------------------------------------- */

@media print {
    .kopfzeile,
    .seitenleiste,
    .seitenkopf-aktionen,
    .statusleiste,
    .schnellhinweis-huelle,
    .rt-leiste,
    .medien-feld-knoepfe {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .huelle {
        display: block;
        max-width: none;
        padding: 0;
    }

    .karte,
    .baustein,
    .wiederholer-zeile {
        border-color: #ccc;
        box-shadow: none;
        break-inside: avoid;
    }
}

/* --------------------------------------------------------------------------
   31  Bausteine der einzelnen Seiten
   Alles, was Portal- und Verwaltungsseiten zusätzlich benutzen.
   -------------------------------------------------------------------------- */

/* Überschrift über einem Abschnitt einer Seite. */
.abschnitt-titel {
    margin: var(--abstand-6) 0 var(--abstand-4);
    color: var(--text);
    font-size: var(--gr-lg);
    letter-spacing: -0.01em;
}

.abschnitt-titel:first-child {
    margin-top: 0;
}

/* Pfadzeile über dem Editor. */
.brotkrumen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    margin-bottom: var(--abstand-4);
    color: var(--text-still);
    font-size: var(--gr-klein);
}

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

.brotkrumen a:hover {
    color: var(--marke-text);
}

.brotkrumen > span[aria-hidden] {
    color: var(--rand-stark);
}

/* Unauffälliger Text, etwa „keine“ oder „noch nie“ in Tabellen. */
.still {
    color: var(--text-still);
}

/* Vom Skript des Feld-Editors gesetzt: Feld gehört nicht zum gewählten Typ. */
.versteckt {
    display: none;
}

/* Reihen aus Knöpfen. */
.aktionsreihe,
.knopf-reihe,
.filter-knoepfe,
.editor-fussaktionen,
.zeilen-aktionen,
.medien-eintrag-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
}

.zeilen-aktionen {
    justify-content: flex-end;
}

/*
 * In Tabellen bleiben die Knöpfe einer Zeile nebeneinander; wird es eng,
 * scrollt die Tabelle in ihrer Hülle. Auf Mobilgeräten (Tabelle als Karte)
 * dürfen sie umbrechen.
 */
@media (min-width: 720px) {
    .tabelle .zeilen-aktionen {
        flex-wrap: nowrap;
    }
}

.editor-fussaktionen {
    padding-top: var(--abstand-2);
}

/* --------------------------------------------------------------------------
   31.1  Karten in Varianten
   -------------------------------------------------------------------------- */

.karte--still {
    background: var(--flaeche-2);
    box-shadow: none;
}

.karte--warnung {
    border-color: var(--warnung-rand);
}

.karte--warnung > .karte-kopf {
    border-bottom-color: var(--warnung-rand);
    background: var(--warnung-flaeche);
    border-radius: var(--radius-3) var(--radius-3) 0 0;
}

.karte--warnung > .karte-kopf h2 {
    color: var(--warnung);
}

/* Erklärender Text im Kopf oder Inhalt einer Karte. */
/* Der erklärende Satz steht unter der Überschrift, nicht daneben. */
.karte-kopf > .karte-text {
    flex: 1 1 100%;
}

.karte-text,
.karte-hinweis {
    max-width: 72ch;
    margin: var(--abstand-1) 0 0;
    color: var(--text-leise);
    font-size: var(--gr-klein);
    line-height: 1.55;
}

.karte-inhalt > .karte-hinweis {
    margin: 0;
    font-size: var(--gr-normal);
}

/*
 * Manche Seiten setzen ihre Felder ohne .karte-inhalt direkt in die Karte.
 * Damit sie trotzdem Luft zum Rand haben, bekommen sie hier Seitenabstand.
 */
.karte > .feld,
.karte > .feld-gitter,
.karte > .feld-gruppe,
.karte > .feld-aufklapp,
.karte > .werkzeug-klapp,
.karte > .geheimnis-klapp,
.karte > .wiederholer,
.karte > .baukasten,
.karte > .auswahl-liste,
.karte > .rollen-erklaerung,
.karte > .pruef-liste,
.karte > .knopf-reihe,
.karte > .aktionsreihe,
.karte > .bericht,
.karte > .hinweis-kasten,
.karte > .hinweis-box,
.karte > .unter-abschnitt,
.karte > .tabelle-huelle,
.karte > .medien-raster,
.karte > .liste,
.karte > .verlauf,
.karte > .vorlagen-liste,
.karte > .leer-zustand,
.karte > .schritte,
.karte > .code-block,
.karte > p,
.karte > h3,
.karte > form,
.karte > details {
    margin-right: var(--abstand-4);
    margin-left: var(--abstand-4);
}

.karte > .karte-kopf + *:not(.karte-inhalt):not(.karte-fuss) {
    margin-top: var(--abstand-4);
}

.karte > :first-child:not(.karte-kopf):not(.karte-inhalt) {
    margin-top: var(--abstand-4);
}

.karte > :last-child:not(.karte-kopf):not(.karte-inhalt):not(.karte-fuss) {
    margin-bottom: var(--abstand-4);
}

/* Ein Abschnitt innerhalb einer Karte. */
.unter-abschnitt {
    padding-top: var(--abstand-4);
    border-top: 1px solid var(--rand-fein);
}

.unter-abschnitt h3 {
    margin-bottom: var(--abstand-3);
    font-size: var(--gr-normal);
}

/* --------------------------------------------------------------------------
   31.2  Zwei Spalten und einfache Listen
   -------------------------------------------------------------------------- */

.spalten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--abstand-4);
    margin-bottom: var(--abstand-5);
    align-items: start;
}

@media (min-width: 1024px) {
    .spalten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--abstand-5);
    }
}

.liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
}

.liste-eintrag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1) var(--abstand-3);
    align-items: baseline;
    justify-content: space-between;
    padding: var(--abstand-3) 0;
    border-bottom: 1px solid var(--rand-fein);
}

.liste-eintrag:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.liste-eintrag:first-child {
    padding-top: 0;
}

.liste-link {
    min-width: 0;
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
}

.liste-link:hover {
    color: var(--marke-text);
}

.liste-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    color: var(--text-still);
    font-size: var(--gr-klein);
}

/* Erklärende Aufzählungen (Rollen, geprüfte Punkte). */
.rollen-erklaerung,
.pruef-liste {
    padding: 0;
    margin: var(--abstand-3) 0 0;
    color: var(--text-leise);
    font-size: var(--gr-klein);
    line-height: 1.6;
    list-style: none;
}

.rollen-erklaerung li,
.pruef-liste li {
    position: relative;
    padding-left: var(--abstand-4);
    margin-bottom: var(--abstand-1);
}

.rollen-erklaerung li::before,
.pruef-liste li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-voll);
    background: var(--rand-stark);
}

.pruef-liste li::before {
    background: var(--warnung);
}

.rollen-erklaerung strong {
    color: var(--text);
}

/* Beschreibungsliste für technische Angaben. */
.daten-liste {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: var(--abstand-3) var(--abstand-5);
    align-items: start;
    margin: 0 0 var(--abstand-3);
    font-size: var(--gr-klein);
}

/* Direkt in einer Karte bekommt die Liste denselben Innenabstand wie ein Formular. */
.karte > .daten-liste {
    padding: var(--abstand-4) var(--abstand-4) var(--abstand-2);
}

.daten-liste dt {
    padding-top: 2px;
    color: var(--text-still);
    font-weight: 600;
}

.daten-liste dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   31.3  Filter- und Formularleisten
   -------------------------------------------------------------------------- */

.filterleiste,
.filter-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: flex-end;
    padding: var(--abstand-3);
    margin-bottom: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
}

.filterleiste input[type="search"],
.filter-leiste input[type="search"] {
    flex: 1 1 220px;
    min-width: 0;
}

.filterleiste select,
.filter-leiste select {
    flex: 0 1 200px;
}

.filter-leiste .feld {
    flex: 1 1 200px;
    min-width: 0;
    margin-bottom: 0;
}

.filter-leiste .feld-label {
    font-size: var(--gr-klein);
}

.filter-knoepfe {
    flex: 0 0 auto;
}

/* Formulare, die eine ganze Seite füllen. */
.website-formular,
.editor-form,
.upload-form {
    display: block;
}

.upload-form > :last-child {
    margin-bottom: 0;
}

/* Abschluss eines Formulars mit den Knöpfen. */
.formular-fuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    padding-top: var(--abstand-4);
    margin-top: var(--abstand-4);
    border-top: 1px solid var(--rand-fein);
}

.formular-fuss--klebrig {
    position: sticky;
    bottom: 0;
    z-index: 25;
    padding: var(--abstand-3) var(--abstand-4);
    margin-top: var(--abstand-5);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    box-shadow: var(--schatten-3);
    backdrop-filter: saturate(180%) blur(10px);
}

/* Ein Formular, dessen Felder in einer Zeile stehen. */
.zeilen-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    margin: 0;
}

.zeilen-form select,
.zeilen-form input {
    flex: 0 1 220px;
    min-width: 0;
}

/* Ein Feld, in dem nur ein Knopf steht. */
.feld--knopf {
    display: flex;
    align-items: flex-end;
}

.feld--knopf .knopf {
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   31.4  Tabellen der Listenseiten
   -------------------------------------------------------------------------- */

.tabelle-huelle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.karte > .tabelle-huelle {
    margin-right: 0;
    margin-left: 0;
}

.karte > .tabelle-huelle .tabelle {
    margin-bottom: 0;
}

.tabelle-titel {
    display: block;
    color: var(--text);
    font-weight: 600;
}

.tabelle-titel:hover {
    color: var(--marke-text);
}

.tabelle-unterzeile {
    display: block;
    margin-top: 2px;
    color: var(--text-still);
    font-size: var(--gr-sm);
}

.tabelle-warnung {
    color: var(--fehler);
}

.spalte-griff {
    width: 44px;
    padding-right: 0;
}

.spalte-bild {
    width: 64px;
}

.spalte-aktionen {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.listen-bild {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-1);
    background: var(--flaeche-3);
    object-fit: cover;
}

/* Die Knopfreihe je Zeile bleibt auch mobil handlich. */
@media (max-width: 719px) {
    .spalte-aktionen,
    .spalte-griff,
    .spalte-bild {
        width: auto;
        text-align: left;
        white-space: normal;
    }

    .zeilen-aktionen {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   31.5  Editor, Vorschau, Zahlen
   -------------------------------------------------------------------------- */

/* Die Statusleiste steht oben im Formular und bleibt beim Scrollen stehen. */
.statusleiste {
    position: sticky;
    top: var(--kopf-hoehe);
    bottom: auto;
    margin: 0 0 var(--abstand-4);
}

.vorschau-unterzeile {
    color: var(--text-still);
    font-size: var(--gr-sm);
    font-weight: 400;
}

.vorschau--leer {
    background: var(--flaeche-2);
}

.vorschau-leer-fuss {
    margin: 0;
    color: var(--text-still);
    font-size: var(--gr-klein);
}

.statistik-zahl {
    display: block;
    color: var(--text);
    font-size: var(--gr-3xl);
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.statistik-text {
    display: block;
    margin-top: var(--abstand-1);
    color: var(--text);
    font-size: var(--gr-normal);
    font-weight: 600;
}

.statistik-zusatz {
    display: block;
    margin-top: 2px;
    color: var(--text-still);
    font-size: var(--gr-klein);
    line-height: 1.45;
}

.statistik--rot {
    border-color: var(--fehler-rand);
    background: var(--fehler-flaeche);
}

.statistik--rot .statistik-zahl {
    color: var(--fehler);
}

/* Stille Kachel, etwa der Verweis auf die Bibliothek. */
.kachel--still {
    background: var(--flaeche-2);
    box-shadow: none;
}

.kachel--still .kachel-symbol {
    border-color: var(--rand);
    background: var(--flaeche-3);
    color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   31.6  Verlauf, Berichte, technische Ausgaben
   -------------------------------------------------------------------------- */

.verlauf {
    padding: 0;
    margin: 0;
    list-style: none;
}

.verlauf-eintrag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1) var(--abstand-3);
    align-items: baseline;
    padding: var(--abstand-2) 0;
    border-bottom: 1px solid var(--rand-fein);
}

.verlauf-eintrag:last-child {
    border-bottom: 0;
}

.verlauf-zeit {
    flex: 0 0 auto;
    min-width: 108px;
    color: var(--text-still);
    font-size: var(--gr-sm);
    font-variant-numeric: tabular-nums;
}

.verlauf-text {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--text-leise);
    font-size: var(--gr-klein);
    line-height: 1.5;
}

.verlauf-text strong {
    color: var(--text);
}

.bericht {
    padding: var(--abstand-4);
    margin-bottom: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
}

.bericht h3 {
    margin-bottom: var(--abstand-3);
    font-size: var(--gr-normal);
}

.bericht-titel {
    margin: var(--abstand-4) 0 var(--abstand-1);
    color: var(--text-still);
    font-size: var(--gr-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bericht-zeile {
    margin: 0 0 var(--abstand-2);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    line-height: 1.6;
}

.bericht-zeile strong {
    color: var(--text);
}

.bericht-fehler {
    padding: var(--abstand-3);
    margin: 0 0 var(--abstand-3);
    border: 1px solid var(--fehler-rand);
    border-radius: var(--radius-1);
    background: var(--fehler-flaeche);
    color: var(--fehler);
    font-family: var(--schrift-mono);
    font-size: var(--gr-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.code-block {
    max-height: 320px;
    padding: var(--abstand-3);
    margin: 0 0 var(--abstand-3);
    overflow: auto;
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
    color: var(--text-leise);
    font-family: var(--schrift-mono);
    font-size: var(--gr-sm);
    line-height: 1.55;
    tab-size: 2;
}

.code-block code {
    padding: 0;
    background: none;
    font-size: inherit;
    white-space: pre;
}

/* Ein Kasten mit Anleitung, mit eigener Überschrift. */
.hinweis-kasten {
    padding: var(--abstand-4);
    margin-bottom: var(--abstand-4);
    border: 1px solid var(--info-rand);
    border-radius: var(--radius-2);
    background: var(--info-flaeche);
    color: var(--text);
    font-size: var(--gr-klein);
    line-height: 1.6;
}

.hinweis-kasten h3 {
    margin-bottom: var(--abstand-2);
    font-size: var(--gr-normal);
}

.hinweis-kasten > :last-child {
    margin-bottom: 0;
}

.hinweis-kasten .code-block {
    background: color-mix(in srgb, var(--flaeche) 70%, transparent);
}

/* Zeichenketten zum Abschreiben: Passwörter, Adressen, Secrets. */
.geheimnis,
.kopierbar {
    display: inline-block;
    max-width: 100%;
    padding: 2px var(--abstand-2);
    border: 1px solid var(--rand-stark);
    border-radius: var(--radius-1);
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schrift-mono);
    font-size: var(--gr-klein);
    line-height: 1.6;
    overflow-wrap: anywhere;
    user-select: all;
}

.geheimnis {
    letter-spacing: 0.04em;
}

.geheimnis-klapp,
.werkzeug-klapp {
    margin-bottom: var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
}

.geheimnis-klapp > summary,
.werkzeug-klapp > summary {
    padding: var(--abstand-2) var(--abstand-3);
    border-radius: var(--radius-2);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 600;
    cursor: pointer;
}

.geheimnis-klapp > summary:hover,
.werkzeug-klapp > summary:hover {
    background: var(--flaeche-2);
    color: var(--text);
}

.geheimnis-klapp > :not(summary),
.werkzeug-klapp > :not(summary) {
    margin-right: var(--abstand-3);
    margin-left: var(--abstand-3);
}

.geheimnis-klapp > :last-child,
.werkzeug-klapp > :last-child {
    margin-bottom: var(--abstand-3);
}

/* --------------------------------------------------------------------------
   31.7  Symbolauswahl und Vorlagen
   -------------------------------------------------------------------------- */

.icon-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1);
    margin-top: var(--abstand-2);
}

.icon-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius-1);
    background: var(--flaeche);
    color: var(--text-leise);
    font-family: inherit;
    font-size: var(--gr-md);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}

.icon-knopf:hover {
    border-color: var(--marke-rand);
    background: var(--marke-flaeche);
    color: var(--marke-text);
}

.vorlagen-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--abstand-3);
    margin-bottom: var(--abstand-4);
}

.vorlage-kachel {
    display: flex;
    gap: var(--abstand-3);
    align-items: flex-start;
    padding: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    color: var(--text);
    box-shadow: var(--schatten-1);
    transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve),
        transform var(--tempo) var(--kurve);
}

.vorlage-kachel:hover {
    border-color: var(--marke-rand);
    box-shadow: var(--schatten-2);
    text-decoration: none;
    transform: translateY(-1px);
}

.vorlage-kachel strong {
    display: block;
    font-size: var(--gr-normal);
}

.vorlage-kachel span:not(.vorlage-symbol) {
    display: block;
    color: var(--text-leise);
    font-size: var(--gr-klein);
    line-height: 1.5;
}

.vorlage-symbol {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--marke-rand-fein);
    border-radius: var(--radius-2);
    background: var(--marke-flaeche);
    color: var(--marke-text);
    font-size: var(--gr-md);
    line-height: 1;
}

/* Ein Wiederholer eine Ebene tiefer wirkt ruhiger. */
.wiederholer--unter {
    padding: var(--abstand-3);
    border: 1px dashed var(--rand-stark);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
}

.wiederholer--unter .wiederholer-zeile {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   31.8  Medienbibliothek: ein Eintrag je Datei
   -------------------------------------------------------------------------- */

.medien-eintrag {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-1);
}

.medien-eintrag--warnung {
    border-color: var(--warnung-rand);
}

.medien-eintrag-bild {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    max-width: 100%;
    overflow: hidden;
    background: var(--flaeche-3);
}

.medien-eintrag-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medien-eintrag-bild .medien-dateisymbol {
    height: 100%;
    border-radius: 0;
    font-size: var(--gr-md);
}

.medien-eintrag-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    padding: var(--abstand-3);
}

.medien-eintrag-name {
    color: var(--text);
    font-size: var(--gr-klein);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.medien-eintrag-meta {
    color: var(--text-still);
    font-size: var(--gr-sm);
}

.medien-eintrag-alt {
    color: var(--text-leise);
    font-size: var(--gr-sm);
    font-style: italic;
}

.medien-eintrag-warnung {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 1px var(--abstand-2);
    border-radius: var(--radius-voll);
    background: var(--warnung-flaeche);
    color: var(--warnung);
    font-size: var(--gr-sm);
    font-weight: 600;
}

.medien-eintrag-mehr {
    border-top: 1px solid var(--rand-fein);
}

.medien-eintrag-mehr > summary {
    padding: var(--abstand-2) var(--abstand-3);
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 600;
    cursor: pointer;
}

.medien-eintrag-mehr > summary:hover {
    background: var(--flaeche-2);
    color: var(--text);
}

.medien-eintrag-formular {
    padding: var(--abstand-3);
    border-top: 1px solid var(--rand-fein);
    background: var(--flaeche-2);
}

.medien-eintrag-formular .feld {
    margin-bottom: var(--abstand-3);
}

.medien-eintrag-formular .feld-hinweis {
    font-size: var(--gr-sm);
}

.medien-verwendung {
    padding: var(--abstand-3);
    margin: var(--abstand-3) 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius-1);
    background: var(--flaeche);
    color: var(--text-leise);
    font-size: var(--gr-sm);
}

.medien-verwendung strong {
    display: block;
    margin-bottom: var(--abstand-1);
    color: var(--text);
}

.medien-verwendung ul {
    padding-left: 1.1em;
    margin: 0;
}

.medien-eintrag-aktionen {
    padding-top: var(--abstand-2);
    border-top: 1px solid var(--rand-fein);
}

/* --------------------------------------------------------------------------
   31.9  Kleinigkeiten, die aus dem PHP kommen
   -------------------------------------------------------------------------- */

/*
 * aktionsKnopf() setzt Stile wie "geist klein" zusammen; daraus wird
 * class="knopf knopf--geist klein". Damit solche Knöpfe trotzdem klein sind:
 */
.knopf.klein {
    min-height: 34px;
    padding: var(--abstand-1) var(--abstand-3);
    font-size: var(--gr-klein);
}

@media (max-width: 899px), (pointer: coarse) {
    .knopf.klein {
        min-height: 40px;
    }
}

/* Zwei Spalten im Feldgitter, ausdrücklich. */
@media (min-width: 560px) {
    .feld-gitter--zwei {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   32  Feinschliff je Feldtyp und je Bereich
   -------------------------------------------------------------------------- */

/* Die beiden Bereiche des CMS teilen sich denselben ruhigen Untergrund. */
.bereich-portal,
.bereich-admin {
    background: var(--grund);
}

/* Kurze Eingaben brauchen keine volle Breite. */
.feld--zahl input,
.feld--datum input,
.feld--datumzeit input {
    max-width: 260px;
}

.feld--slug input {
    font-family: var(--schrift-mono);
    font-size: var(--gr-normal);
    letter-spacing: 0.01em;
}

.feld--text input,
.feld--textarea textarea {
    max-width: 100%;
}

.feld--auswahl select,
.feld--mehrfachauswahl .auswahl-liste {
    max-width: 420px;
}

.feld--farbe {
    max-width: 420px;
}

/* Medienfelder und formatierter Text stehen für sich. */
.feld--bild,
.feld--galerie,
.feld--datei,
.feld--richtext {
    margin-bottom: var(--abstand-6);
}

.feld--link .feld-label {
    margin-bottom: var(--abstand-2);
}

/* Aufklappbare Einzelheiten in Tabellenzellen. */
.einzelheiten {
    max-width: 520px;
}

.einzelheiten > summary {
    color: var(--text-leise);
    font-size: var(--gr-klein);
    font-weight: 600;
    cursor: pointer;
}

.einzelheiten > summary:hover {
    color: var(--text);
}

.einzelheiten > :not(summary) {
    margin-top: var(--abstand-3);
}

.einzelheiten[open] {
    display: block;
    padding: var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
}

/* --------------------------------------------------------------------------
   40  Website bearbeiten (Werkbank) und Einbett-Modus des Editors
   -------------------------------------------------------------------------- */

/* Die Werkbank füllt das Fenster unterhalb der Kopfzeile ganz aus. */
.werkbank .huelle--werkbank {
    display: block;
    padding: 0;
}

.werkbank .inhalt {
    max-width: none;
    padding: 0;
}

.werkbank-raster {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - var(--kopf-hoehe));
    height: calc(100dvh - var(--kopf-hoehe));
    background: var(--hintergrund);
}

/* Seitenbaum links. */
.werkbank-seiten {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-right: 1px solid var(--rand);
    background: var(--flaeche);
    overflow-y: auto;
}

.werkbank-seiten-kopf {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
    padding: var(--abstand-4) var(--abstand-4) var(--abstand-3);
    border-bottom: 1px solid var(--rand);
}

.werkbank-seiten-kopf strong {
    font-size: var(--gr-klein);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-still);
}

.werkbank-zurueck {
    color: var(--text-leise);
    font-size: var(--gr-klein);
    text-decoration: none;
}

.werkbank-zurueck:hover {
    color: var(--text);
}

.seitenbaum,
.seitenbaum ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.seitenbaum {
    padding: var(--abstand-2) var(--abstand-2);
}

.seitenbaum ul {
    margin: 2px 0 var(--abstand-2) var(--abstand-3);
    padding-left: var(--abstand-3);
    border-left: 1px solid var(--rand);
}

.seitenbaum-link {
    display: block;
    padding: 7px var(--abstand-3);
    border-radius: var(--radius-2);
    color: var(--text);
    font-weight: 600;
    font-size: var(--gr-normal);
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.seitenbaum-zeile {
    display: flex;
    gap: var(--abstand-1);
    align-items: center;
}

.seitenbaum-zeile .seitenbaum-link {
    flex: 1;
    min-width: 0;
}

.seitenbaum-neu {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text-leise);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--tempo-kurz, 120ms) var(--kurve);
}

.seitenbaum-zeile:hover .seitenbaum-neu,
.seitenbaum-neu:focus-visible {
    opacity: 1;
}

.seitenbaum-neu:hover {
    border-color: var(--marke);
    color: var(--marke);
}

.seitenbaum-link--kind {
    font-weight: 500;
    font-size: var(--gr-klein);
    color: var(--text-leise);
}

.seitenbaum-link:hover {
    background: var(--flaeche-2);
    color: var(--text);
}

.seitenbaum-link.aktiv {
    background: color-mix(in srgb, var(--marke) 14%, transparent);
    color: var(--marke);
}

.werkbank-leer,
.werkbank-hinweis {
    margin: 0;
    padding: var(--abstand-3) var(--abstand-4);
    color: var(--text-still);
    font-size: var(--gr-klein);
}

.werkbank-hinweis {
    margin-top: auto;
    border-top: 1px solid var(--rand);
}

/* Die Website in der Mitte. */
.werkbank-buehne {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.werkbank-leiste {
    display: flex;
    flex-shrink: 0;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 var(--abstand-4);
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche);
}

.werkbank-adresse {
    min-width: 0;
    overflow: hidden;
    color: var(--text-leise);
    font-family: var(--schrift-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--gr-klein);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.werkbank-entwurf {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--radius-voll);
    background: color-mix(in srgb, var(--warnung) 18%, transparent);
    color: var(--warnung);
    font-size: var(--gr-klein);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.werkbank-entwurf[hidden] {
    display: none;
}

.werkbank-leiste-rechts {
    display: flex;
    gap: var(--abstand-2);
    flex-shrink: 0;
}

.werkbank-buehne {
    position: relative;
}

.werkbank-waehler {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--abstand-4);
    background: color-mix(in srgb, var(--hintergrund) 55%, transparent);
    backdrop-filter: blur(2px);
}

.werkbank-waehler-kasten {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    width: min(760px, 100%);
    max-height: 100%;
    padding: var(--abstand-4);
    border: 1px solid var(--rand);
    border-radius: var(--radius-3);
    background: var(--flaeche);
    box-shadow: var(--schatten-3);
}

/* Die Liste rollt, wenn sie hoeher ist als das Bild - der Kasten bleibt drin. */
.werkbank-waehler-liste {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    padding-right: 2px;
}

.werkbank-waehler-gruppe {
    margin: var(--abstand-2) 0 0;
    font-size: var(--gr-s, .8rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-leise);
}

.werkbank-waehler-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--abstand-2);
}

/* Die Frage vor dem Schliessen der Einstellungen: schmaler Kasten, Knoepfe nebeneinander. */
.werkbank-frage-kasten {
    width: min(520px, 100%);
    gap: var(--abstand-3);
}

.werkbank-frage-text {
    margin: 0;
    color: var(--text-leise);
    line-height: 1.5;
}

.werkbank-frage-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
}

.werkbank-waehler-kasten h3 {
    margin: 0 0 var(--abstand-2);
    font-size: var(--gr-l, 1.05rem);
}

.werkbank-waehler-knopf {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
    padding: var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--hintergrund);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.werkbank-waehler-knopf:hover {
    border-color: var(--marke);
    background: color-mix(in srgb, var(--marke) 8%, transparent);
}

.werkbank-waehler-knopf strong {
    display: block;
}

.werkbank-waehler-knopf small {
    color: var(--text-leise);
}

.werkbank-waehler-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
    font-size: 16px;
}

.werkbank-hinweis-blase {
    position: absolute;
    left: 50%;
    top: 56px;
    z-index: 5;
    transform: translateX(-50%);
    padding: 8px 14px;
    border-radius: var(--radius-voll);
    background: var(--erfolg);
    color: #fff;
    font-size: var(--gr-klein);
    font-weight: 600;
    box-shadow: var(--schatten-3);
    animation: hinweis-auf var(--tempo-lang) var(--kurve);
}

.werkbank-hinweis-blase--fehler {
    background: var(--fehler);
}

/* Die Huelle nimmt den Platz ein; der Rahmen darin darf groesser sein und
   wird dann verkleinert dargestellt (offenes Formular). */
.werkbank-rahmen-huelle {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.werkbank-rahmen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    transform-origin: top left;
    z-index: 1;
}

/* Der zweite Rahmen: Dort wird geladen, waehrend der erste stehen bleibt.
   DURCHSICHTIG statt versteckt oder verdeckt. Der Grund ist nicht Geschmack, sondern
   gemessen (2026-10-07): Einen Rahmen, den der Browser nicht zeichnet, rechnet er auch
   nicht weiter - requestAnimationFrame laeuft dort nicht. Genau damit rollt sich die
   Vorschau aber an ihre Stelle. Mit "visibility: hidden" UND mit blossem Ueberdecken kam
   sie nie dort an: Beim Tausch stand sie auf 0 und sprang erst danach an ihren Platz.
   Durchsichtig und obenauf wird sie gezeichnet, rollt sich zurecht - und der Tausch ist
   dann nur noch ein Wechsel der Deckkraft. */
.werkbank-rahmen--wartet {
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* Das Bearbeitungsfeld rechts. Zu, bis etwas angeklickt wird. */
.werkbank-panel {
    display: none;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-left: 1px solid var(--rand);
    background: var(--hintergrund);
}

.werkbank-panel-leer {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--abstand-6);
    text-align: center;
}

.werkbank-panel-kopf {
    display: flex;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 var(--abstand-4);
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche);
}

.werkbank-panel-kopf strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.werkbank-editor {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: 0;
    background: var(--hintergrund);
}

/* Das Bearbeitungsfeld gibt es nur, solange etwas offen ist. Sonst nimmt die
   Website den ganzen Platz rechts vom Seitenbaum ein. */
.werkbank-panel:not(.offen) {
    display: none;
}

@media (min-width: 1100px) {
    .werkbank-raster--offen {
        grid-template-columns: 240px minmax(0, 1fr) minmax(440px, 38%);
    }

    .werkbank-panel.offen {
        display: flex;
    }
}

/* Auf schmalen Schirmen legt sich das Bearbeitungsfeld über die Website. */
@media (max-width: 1099px) {
    .werkbank-raster,
    .werkbank-raster--offen {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .werkbank-panel.offen {
        position: fixed;
        inset: var(--kopf-hoehe) 0 0 0;
        z-index: 40;
        display: flex;
    }
}

@media (max-width: 719px) {
    .werkbank-raster {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .werkbank-seiten {
        max-height: 40vh;
        border-right: 0;
        border-bottom: 1px solid var(--rand);
    }
}

/* Editor im Einbett-Modus: nur das Formular, ohne Rahmen drumherum. */
.einbett .huelle--einbett {
    display: block;
    padding: 0 var(--abstand-4) var(--abstand-6);
}

.einbett .inhalt {
    max-width: none;
    padding-top: var(--abstand-2);
}

.einbett .editor-kopf {
    position: sticky;
    top: 0;
    min-height: 0;
    padding-top: var(--abstand-2);
    grid-template-columns: minmax(0, 1fr) auto;
}

.einbett .editor-kopf-status {
    grid-column: 1 / -1;
}

.einbett .editor-kopf-text .brotkrumen {
    display: none;
}

.einbett .editor-kopf-text h1 {
    font-size: var(--gr-xl);
}

.einbett .editor {
    grid-template-columns: minmax(0, 1fr);
}

/* hidden gewinnt gegen die eigenen display-Regeln. */
.werkbank-panel-leer[hidden],
.werkbank-panel-kopf[hidden],
.werkbank-editor[hidden] {
    display: none;
}

/* Das angesprungene Feld kurz hervorheben. */
.feld--hervor {
    animation: feld-hervor 1.6s var(--kurve);
}

@keyframes feld-hervor {
    0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marke) 45%, transparent); border-radius: var(--radius-2); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Websites im Menü: Name und darunter die Domain. */
.nav-link--website {
    flex-wrap: wrap;
}

.nav-link--website .nav-unterzeile {
    flex-basis: 100%;
    margin-top: -6px;
    padding-left: calc(24px + var(--abstand-3));
    color: var(--text-still);
    font-size: var(--gr-klein);
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Nur der angeklickte Teil im eingebetteten Editor; der Knopf holt den Rest zurueck. */
.nur-teil-alles {
    margin-top: 12px;
}

.editor-formular .karte[hidden],
.editor-formular .feld-gruppe[hidden],
.karte--still[hidden],
.editor-formular .feld[hidden],
.editor-formular .wiederholer[hidden],
.editor-formular [data-zeile][hidden] {
    display: none !important;
}

/* Beim Sprung zu einem Feld nicht unter dem klebenden Kopf landen. */
.einbett .editor-formular .feld,
.einbett .editor-formular [data-zeile] {
    scroll-margin-top: 170px;
}

/* Aussehen eines Knopfs unter dem Link-Feld. */
.link-aussehen {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--flaeche-2);
}

.link-aussehen > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .92rem;
}

.link-aussehen .feld-hinweis {
    margin: 6px 0 10px;
}

/* Entwuerfe im Seitenbaum: kursiv und leiser. */
.seitenbaum-link--entwurf {
    font-style: italic;
    opacity: .75;
}

.seitenbaum-link--gruppe {
    font-weight: 600;
}

/* Geraete-Vorschau: Rahmen mittig auf grauem Grund. */
.werkbank-rahmen-huelle--geraet {
    background: var(--flaeche-3);
}

.werkbank-rahmen-huelle--geraet .werkbank-rahmen {
    box-shadow: 0 0 0 1px var(--rand-stark), 0 12px 40px rgb(15 23 42 / 18%);
}

.werkbank-geraete {
    display: inline-flex;
    gap: 2px;
    margin-right: 6px;
}

.werkbank-geraete .knopf.aktiv {
    background: var(--flaeche-3);
    border-color: var(--rand-stark);
}

/* Einzeilige Textfelder als mitwachsende Textarea (Enter = Zeilenumbruch). */
textarea.eingabe-zeile {
    resize: none;
    overflow: hidden;
    min-height: 0;
    line-height: 1.4;
    white-space: pre-wrap;
}

textarea[data-autowachsen] {
    overflow: hidden;
    resize: none;
}

/* Feldgruppen im Formular: Inhalt bleibt oben ohne Kopf, danach Kaesten je Zweck. */
.feld-gruppe {
    margin: 22px 0 0;
    padding: 14px 16px 6px;
    border: 1px solid var(--rand);
    border-left: 4px solid var(--marke);
    border-radius: 12px;
    background: var(--flaeche-2);
}

.feld-gruppe--knoepfe { border-left-color: #2563eb; }
.feld-gruppe--schrift { border-left-color: #7c3aed; }
.feld-gruppe--farben { border-left-color: #db2777; }
.feld-gruppe--lage { border-left-color: #0f766e; }

.feld-gruppe-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--gr-normal);
    font-weight: 700;
}

.feld-gruppe-symbol {
    font-size: 1.05em;
}

.feld-gruppe-hinweis {
    margin: 2px 0 12px;
    color: var(--text-still);
    font-size: var(--gr-klein, .85rem);
}

/* Im Schrift-Kasten: je Text (Ueberschrift, Text, kleine Zeile ...) ein Zwischentitel,
   darunter alles zu diesem Text beieinander. */
.feld-untergruppe {
    margin-top: 10px;
    padding: 10px 0 2px;
    border-top: 1px dashed var(--rand);
}

.feld-untergruppe:first-of-type {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.feld-untergruppe-titel {
    margin: 0 0 6px;
    font-size: var(--gr-klein, .85rem);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-still);
}

/* Wiederholer (Knoepfe, Menuepunkte, Links): als eigener Kasten mit klarem Plus-Knopf. */
.wiederholer {
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px dashed var(--rand-stark);
    border-radius: 10px;
    background: var(--flaeche);
}

.wiederholer-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wiederholer-zaehler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--flaeche-3);
    color: var(--text-still);
    font-size: .78rem;
    font-weight: 700;
}

.wiederholer-neu {
    margin-top: 8px;
    border: 2px dashed var(--marke);
    background: var(--marke-schleier, rgba(37, 99, 235, .08));
    color: var(--marke);
    font-weight: 700;
}

.wiederholer-neu:hover {
    background: var(--marke);
    color: #fff;
}

/* Sidebar: Links aus Menue und Fusszeile. */
.werkbank-linkliste {
    margin: 18px 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--rand);
}

.werkbank-linkliste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    color: var(--text-still);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.werkbank-linkliste-eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
}

.werkbank-linkliste-eintraege li {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.werkbank-linkliste-leer {
    margin: 2px 0 0;
    color: var(--text-still);
    font-size: .85rem;
}

.werkbank-linkliste-fehlt {
    padding: 4px 2px;
    color: var(--text-still);
    font-size: .9rem;
    font-style: italic;
}

.werkbank-linkliste-neu {
    padding: 2px 8px;
    font-size: .78rem;
}

/* Admin: Einrichtung einer Website Schritt fuer Schritt. */
.einrichtung {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.einrichtung-schritt {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--rand);
    border-radius: 10px;
    background: var(--flaeche-2);
}

.einrichtung-schritt--fertig {
    border-color: #16a34a;
    background: rgba(22, 163, 74, .07);
}

.einrichtung-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--flaeche-3);
    color: var(--text-still);
    font-weight: 700;
    font-size: .85rem;
}

.einrichtung-schritt--fertig .einrichtung-nummer {
    background: #16a34a;
    color: #fff;
}

.einrichtung-inhalt p {
    margin: 4px 0 0;
    color: var(--text-still);
}

/* Import: Liste der gefundenen Seiten. */
.schalter--zeile {
    width: 100%;
}

.schalter--zeile .schalter-text {
    word-break: break-all;
}

/* SEO: Begriffswolke. */
.begriff-wolke {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.begriff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--flaeche-2);
    color: inherit;
    text-decoration: none;
    font-size: .9rem;
}

.begriff--klein {
    padding: 2px 8px;
    font-size: .8rem;
    margin: 0 4px 4px 0;
}

.begriff--aktiv,
.begriff:hover {
    border-color: var(--marke);
    background: var(--marke);
    color: #fff;
}

.begriff-zahl {
    font-size: .78rem;
    opacity: .7;
}

/* Werkbank: Speichern und Veröffentlichen unten in der Seitenliste. */
.werkbank-sichern {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--rand);
}

.werkbank-sichern .knopf {
    flex: 1 1 auto;
    justify-content: center;
}

/* Das Menü (die Kopfzeile) steht in der Werkbank ganz oben – ohne Trennlinie. */
.werkbank-linkliste--oben {
    margin-top: 12px;
    padding-top: 0;
    border-top: 0;
}

/* Zwischenüberschrift über der Seitenliste. */
.werkbank-abschnittkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--rand);
    color: var(--text-still);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Stift und Plus stehen nebeneinander im Kopf von Menü und Fußzeile. */
.werkbank-kopf-knoepfe {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
}

/* In den Abschnittsköpfen bleibt das Plus sichtbar: Es ist der Weg, hier etwas
   hinzuzufügen. An den einzelnen Seitenzeilen erscheint es weiter erst beim
   Zeigen, sonst stünden in der Leiste Dutzende Knöpfe. */
.werkbank-abschnittkopf .seitenbaum-neu,
.werkbank-linkliste-kopf .seitenbaum-neu {
    opacity: .75;
}

.werkbank-abschnittkopf:hover .seitenbaum-neu,
.werkbank-linkliste-kopf:hover .seitenbaum-neu,
.werkbank-abschnittkopf .seitenbaum-neu:hover,
.werkbank-linkliste-kopf .seitenbaum-neu:hover {
    opacity: 1;
}

/* Schlichte Liste ohne Aufzählungszeichen, z. B. wartende Übertragungen. */
.liste-schlicht {
    list-style: none;
    margin: 0;
    padding: 0 var(--abstand-4) var(--abstand-4);
}

.liste-schlicht li {
    padding: var(--abstand-2) 0;
    border-top: 1px solid var(--rand);
}

.liste-schlicht li:first-child {
    border-top: 0;
}

.liste-schlicht .feld-hinweis {
    display: block;
    margin: 2px 0 0;
}

/* Mehrere Knöpfe nebeneinander in einer Werkzeug-Zeile. */
.werkzeug-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Lange Adressen (z. B. der Wartungsaufruf) dürfen umbrechen. */
.umbruch {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Nummerierte Anleitung, z. B. die Einrichtung per Installer. */
.schritt-liste {
    margin: 0;
    padding: 0 var(--abstand-4) var(--abstand-3) calc(var(--abstand-4) + 20px);
    color: var(--text-leise);
}

.schritt-liste li {
    margin-bottom: var(--abstand-2);
}

.schritt-liste strong {
    color: var(--text);
}

/* Codes zum Abschreiben (Wiederherstellung, TOTP-Schlüssel). */
.code-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
}

.code-liste code {
    padding: 6px 10px;
    border-radius: 7px;
    background: var(--flaeche-still, #f1f5f9);
    font-size: 1rem;
    letter-spacing: .08em;
}

.feld-schmal {
    max-width: 180px;
}

/* Zwei Felder nebeneinander (z. B. Server und Port). */
.feld-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
}

.feld-reihe > .feld {
    flex: 1 1 220px;
    min-width: 0;
}

/* Quelltext-Editor für Dateien der Website. */
.quelltext {
    width: 100%;
    box-sizing: border-box;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
}

.zeile--aktiv {
    background: var(--flaeche-still, #f1f5f9);
}

/* Karten, die man zuklappen kann (z. B. seltener gebrauchte Einrichtungswege). */
.karte--klappbar > summary {
    padding: var(--abstand-4);
    cursor: pointer;
    list-style: none;
}

.karte--klappbar > summary::-webkit-details-marker {
    display: none;
}

.karte--klappbar > summary::before {
    content: "▸ ";
    color: var(--text-still);
}

.karte--klappbar[open] > summary::before {
    content: "▾ ";
}

.karte--klappbar > summary .feld-hinweis {
    display: block;
    margin-top: 4px;
}

.karte--klappbar .klapp-inhalt > .karte {
    border: 0;
    box-shadow: none;
    margin: 0;
}


/* ---------------------------------------------------------------- Werkzeuge

   Eine Zeile mit Erklärung links und Knopf rechts: „Papierkorb leeren“,
   „Jetzt sichern“, „Connector hochladen“. Ohne eigene Regeln klebten die
   Knöpfe am Kartenrand. */
.werkzeug-liste {
    display: flex;
    flex-direction: column;
    padding: var(--abstand-4);
}

.werkzeug {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-3);
    align-items: center;
    justify-content: space-between;
    padding: var(--abstand-3) 0;
    border-top: 1px solid var(--rand-fein);
}

.werkzeug:first-child {
    padding-top: 0;
    border-top: 0;
}

.werkzeug:last-child {
    padding-bottom: 0;
}

.werkzeug > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.werkzeug strong {
    display: block;
}

.werkzeug .feld-hinweis {
    margin: 2px 0 0;
}

.werkzeug > form,
.werkzeug > a,
.werkzeug > button,
.werkzeug-knoepfe {
    flex: 0 0 auto;
    margin: 0;
}

/* Blättern in langen Listen (Protokoll, Übertragungen). */
.blaettern {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    justify-content: center;
    padding: var(--abstand-4);
    border-top: 1px solid var(--rand-fein);
}

.blaettern-stand {
    color: var(--text-leise);
    font-size: var(--gr-klein);
}

/* Eine schmale Spalte in Tabellen, etwa für Auswahlkästchen. */
.spalte-schmal {
    width: 1%;
    white-space: nowrap;
}


/* ------------------------------------------------- Tabellen mit vielen Spalten

   Die Websites-Liste hat acht Spalten und in der letzten mehrere Knöpfe. Ohne
   Zutun wird die Tabelle breiter als die Karte, und die wichtigsten Knöpfe
   liegen außerhalb — erreichbar nur durch seitliches Scrollen. Deshalb: Knöpfe
   dürfen umbrechen, und lange Inhalte sperren sich nicht mehr gegen den Umbruch. */
.tabelle .zeilen-aktionen {
    max-width: 320px;
    margin-left: auto;
}

.tabelle .zeilen-aktionen .knopf,
.tabelle .zeilen-aktionen .aktion-form {
    flex: 0 0 auto;
}

/* Auf schmalen Fenstern brauchen Zähl-Spalten keinen Platz zu belegen. */
@media (max-width: 1500px) {
    .tabelle .spalte-optional {
        display: none;
    }
}


/* Weitere Aktionen einer Tabellenzeile, zugeklappt. */
.zeilen-mehr {
    position: relative;
}

.zeilen-mehr > summary {
    padding: 5px var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    color: var(--text-leise);
    font-size: var(--gr-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    white-space: nowrap;
}

.zeilen-mehr > summary::-webkit-details-marker {
    display: none;
}

.zeilen-mehr > summary:hover {
    background: var(--flaeche-2);
    color: var(--text);
}

.zeilen-mehr-inhalt {
    position: absolute;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    min-width: 210px;
    margin-top: var(--abstand-1);
    padding: var(--abstand-3);
    border: 1px solid var(--rand);
    border-radius: var(--radius-2);
    background: var(--flaeche);
    box-shadow: var(--schatten-2, 0 10px 30px rgba(15, 23, 42, .12));
}

.zeilen-mehr-inhalt .knopf {
    width: 100%;
    justify-content: center;
}

/* Lange Domains sperren sich nicht gegen den Umbruch. */
.tabelle .domain-zelle {
    overflow-wrap: anywhere;
}


/* Im Verlauf steht die Website vorn — bei vielen Kunden ist das die wichtigste Angabe. */
.verlauf-website {
    display: inline-block;
    margin-right: var(--abstand-2);
    padding: 1px var(--abstand-2);
    border-radius: var(--radius-2);
    background: var(--flaeche-2);
    color: var(--text);
    font-size: var(--gr-sm);
    font-weight: 600;
    text-decoration: none;
}

.verlauf-website:hover {
    background: var(--rand-fein);
}

.verlauf-wer {
    display: block;
    color: var(--text-still);
    font-size: var(--gr-sm);
}

/* Hex-Feld neben dem Farbwaehler: tippen oder einfuegen (#rrggbb). */
.farbe-optional .farbe-hex {
    width: 6.2em;
    padding: .3rem .45rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85rem;
}