/**
 * fils.engine -- Adminoberflaeche.
 * Markenfarben von fils.studio: Mint, Lavender, Anthrazit, Off-White.
 * Ruhige Flaechen, grosse Radien, weiche Verlaeufe -- bewusst kein
 * klassischer "Backend"-Look.
 */
:root {
    --brand-mint: #76E7D2;
    --brand-lavender: #A77DF5;
    --brand-anthracite: #1B1D2D;
    --brand-offwhite: #FAFBFD;

    --admin-bg: var(--brand-offwhite);
    /* Helle Oberflaeche insgesamt: die Seitenleiste war frueher dunkel
       (Anthrazit) -- jetzt hell wie der Rest, nur per Rahmenlinie vom
       Hauptbereich abgesetzt, damit fils.engine insgesamt heller wirkt
       statt "klassisches dunkles Admin-Backend". */
    --admin-sidebar-bg: #FFFFFF;
    /* Akzent liegt zwischen Mint und Lavender -- kraeftig genug fuer Text
       auf Weiss, passt aber zu beiden Markenfarben. */
    --admin-primary: #6C5CE7;
    --admin-primary-soft: rgba(108, 92, 231, 0.1);
    --admin-danger: #E5484D;
    --admin-border: #E8EAF0;
    --admin-text: var(--brand-anthracite);
    --admin-text-muted: #6B7089;

    --admin-radius: 0.9rem;
    --admin-radius-sm: 0.55rem;
    --admin-shadow: 0 1px 2px rgba(27, 29, 45, 0.04), 0 8px 24px rgba(27, 29, 45, 0.06);
}

* {
    box-sizing: border-box;
}

/*
 * Ungestylte Links (kein eigenes class-Attribut, also keiner der Buttons/
 * Nav-Elemente/Badges) faellen sonst auf die Browser-Standardfarbe Blau
 * zurueck -- schlecht lesbar, besonders auf dunklem Grund (Power Engine).
 * ":not([class])" trifft bewusst NUR diese unformatierten Links, damit
 * bereits gestylte Elemente (.btn, .pe-btn, .pe-nav__item, ...) unangetastet
 * bleiben -- ihre eigene, spezifischere Regel gilt weiterhin.
 */
a:not([class]) { color: var(--brand-lavender); }
a:not([class]):hover { color: var(--admin-primary); }

/* Sicherheitsnetz gegen horizontales Scrollen der gesamten Seite (siehe
   gleiche Regel in shared-chrome.css fuer die oeffentliche Seite) -- ein
   einzelnes zu breites Element im Admin-Bereich soll nie die ganze Seite
   verschiebbar machen.

   "overflow-x: clip" statt "hidden" -- siehe ausfuehrlicher Kommentar zur
   selben Regel in shared-chrome.css: "hidden" wuerde auf html/body per
   CSS-Spec automatisch auch "overflow-y: auto" erzwingen und damit
   "position: fixed"-Elemente (z.B. .admin-bottom-nav) auf dem Handy vom
   echten Bildschirmrand loesen. "clip" ist davon ausgenommen. */
html, body.admin {
    max-width: 100%;
    overflow-x: clip;
}

body.admin {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    background: var(--admin-bg);
    color: var(--admin-text);
    -webkit-font-smoothing: antialiased;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--admin-sidebar-bg);
    color: var(--admin-text);
    border-right: 1px solid var(--admin-border);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
}

/* Wortmarke: "fils" fett, "engine" duenn -- entspricht dem Branding. */
.admin-sidebar__brand {
    padding: 0 1.25rem 1.5rem;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.admin-sidebar__brand b {
    font-weight: 700;
}

.admin-sidebar__brand span {
    font-weight: 300;
    opacity: 0.9;
}

.admin-sidebar__brand small {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--admin-text-muted);
    margin-top: 0.3rem;
    font-weight: 500;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.admin-nav__link {
    color: var(--admin-text-muted);
    text-decoration: none;
    padding: 0.7rem 1.25rem;
    font-size: 0.9rem;
}

.admin-nav__link {
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}

.admin-nav__link:hover {
    background: var(--admin-primary-soft);
    color: var(--admin-text);
}

/* Vorher ein voll deckender Farbverlauf-Block mit weisser Schrift -- fuer
   einen dauerhaft sichtbaren Navigationspunkt zu "drueckend"/schwer. Jetzt
   ein durchscheinender Verlaufs-Schimmer (glossy) mit einem duennen
   Farbverlaufs-Streifen am linken Rand als Positions-Anzeige -- leichter,
   moderner, dabei immer noch klar erkennbar als aktiv. */
.admin-nav__link.is-active {
    background: linear-gradient(135deg, rgba(167, 125, 245, 0.14), rgba(118, 231, 210, 0.14));
    color: var(--admin-primary);
    font-weight: 600;
    margin: 0 0.6rem;
    border-radius: var(--admin-radius-sm);
    padding-left: 0.65rem;
}

.admin-nav__link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3rem;
    bottom: 0.3rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand-mint), var(--brand-lavender));
}

.admin-sidebar__user {
    padding: 1rem 1.25rem 0;
    border-top: 1px solid var(--admin-border);
    font-size: 0.85rem;
}

.admin-sidebar__user a {
    color: var(--admin-text-muted);
}

.admin-main {
    flex-grow: 1;
    padding: 2rem 2.5rem;
    max-width: 1100px;
}

.admin-main h1 {
    margin-top: 0;
}

.back-link {
    color: var(--admin-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.panel {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 1.5rem;
    margin: 1.25rem 0;
    box-shadow: var(--admin-shadow);
}

.badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.4rem;
}

.badge-primary {
    background: var(--admin-primary);
    color: #fff;
}

.badge-success {
    background: #1a9c6b;
    color: #fff;
}

.badge-warning {
    background: #b8860b;
    color: #fff;
}

.badge-info {
    background: #a77df5;
    color: #fff;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}

.stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--admin-primary);
}

.stat-card__label {
    font-size: 0.8rem;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}

/* "Aktives Theme"-Kachel: Text links, daneben eine live skalierte
   Miniatur-Vorschau der echten Website (derselbe verzoegerte iframe-Trick
   wie bei Hero-Studios "Automatisch"-Bildschirminhalt) -- so sieht man auf
   einen Blick, wie das aktive Design tatsaechlich aussieht, statt nur
   Name/Beschreibung zu lesen. Immer aktuell, kein manuell gepflegter
   Screenshot noetig. */
.dashboard-theme-panel {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1.5rem;
    align-items: center;
}

.dashboard-theme-panel__text .btn {
    margin-top: 0.75rem;
}

.dashboard-theme-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid var(--admin-border);
    box-shadow: 0 10px 24px rgba(27, 29, 45, 0.06);
}

.dashboard-theme-preview__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1440px;
    height: 900px;
    border: 0;
    pointer-events: none;
    transform-origin: top left;
}

@media (max-width: 900px) {
    .dashboard-theme-panel {
        grid-template-columns: 1fr;
    }
}

/* Dashboard-Diagramme (Task: Kennzahlen/Diagramme im Dashboard). Bewusst
   als reines, serverseitig berechnetes SVG statt einer JS-Chart-Bibliothek
   -- das Projekt hat kein Composer/npm fuer Runtime-Assets, und die paar
   Balken/Kurven/Ringe lassen sich in PHP genauso einfach direkt ausrechnen.
   Das "Glas"-Aussehen (weiche Verlaufsflaeche dahinter, halbdurchsichtige
   Karten obendrauf) ist bewusst OHNE backdrop-filter/blur umgesetzt -- ein
   echter Weichzeichner hat an anderer Stelle in diesem Projekt (Vertrauens-
   leiste) schon einmal dazu gefuehrt, dass Inhalte in manchen Browser-/
   Grafiktreiber-Kombinationen komplett unsichtbar wurden. Reine rgba-
   Transparenz erreicht optisch fast denselben Effekt, ganz ohne dieses
   Risiko. */
.dashboard-glass {
    background: linear-gradient(160deg, rgba(118, 231, 210, 0.16), rgba(167, 125, 245, 0.14));
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-top: 1rem;
}

.panel--glass,
.stat-card--glass {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Kennzahl-Karten sind auf dem Dashboard oft <a>-Elemente (Sprung zur
   passenden Uebersicht, z.B. "Seiten" -> /admin/pages) -- Link-Grundstile
   zuruecksetzen und einen dezenten Hover als Klick-Hinweis ergaenzen. */
.stat-card--link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.stat-card--link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(27, 29, 45, 0.08);
    border-color: var(--admin-primary);
}

.dashboard-feature-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 900px) {
    .dashboard-feature-row { grid-template-columns: 1fr; }
}

.dashboard-feature-row .panel { margin: 0; }

.dashboard-ring-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-ring {
    margin: 0.5rem 0;
}

.dashboard-chart {
    width: 100%;
    height: auto;
    display: block;
}

.dashboard-legend {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.85rem;
    font-size: 0.82rem;
    color: var(--admin-text-muted);
    flex-wrap: wrap;
}

.dashboard-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: inherit;
    text-decoration: none;
    border-radius: 0.4rem;
    padding: 0.15rem 0.4rem;
    margin: -0.15rem -0.4rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.dashboard-legend__item:hover {
    background: var(--admin-primary-soft);
    color: var(--admin-text);
}

.dashboard-legend__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

.dashboard-legend__dot--published {
    background: linear-gradient(120deg, var(--brand-mint), var(--brand-lavender));
}

.dashboard-legend__dot--draft {
    background: rgba(27, 29, 45, 0.18);
}

.text-muted {
    color: var(--admin-text-muted);
}

.widget-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.widget-catalog__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    /* Grid-Items schrumpfen sonst nicht unter die Breite ihres laengsten
       unteilbaren Textlaufs (z.B. "Tagen/Stunden/Minuten/Sekunden" ohne
       Leerzeichen) -- das sprengt sonst die ganze Spalte samt Seite in die
       Breite. min-width:0 erlaubt dem Grid-Item, normal zu schrumpfen. */
    min-width: 0;
}

.widget-catalog__item p,
.widget-catalog__item .widget-catalog__name,
.widget-catalog__item .widget-catalog__category {
    overflow-wrap: break-word;
    word-break: break-word;
}

.widget-catalog__icon {
    font-size: 1.5rem;
}

.widget-catalog__name {
    font-weight: 600;
}

.widget-catalog__category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--admin-text-muted);
    text-transform: uppercase;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--admin-border);
}

.admin-table th {
    background: #fafafa;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--admin-text-muted);
}

.btn {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
    background: #fff;
    color: var(--admin-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.btn:hover {
    border-color: var(--admin-primary);
    color: var(--admin-primary);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-lavender), var(--admin-primary));
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover {
    filter: brightness(1.07);
    color: #fff;
    border-color: transparent;
}

.btn-danger {
    color: var(--admin-danger);
    border-color: var(--admin-danger);
}

.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.inline-form {
    display: inline-block;
    margin: 0 0.35rem 0.5rem 0;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.form-field input[type=text],
.form-field input[type=email],
.form-field input[type=password],
.form-field input[type=number],
.form-field input[type=date],
/* datetime-local/time fehlten hier -- ohne Treffer in dieser Liste blieben
   sie voellig unformatiert (Browser-Standard, Monospace-Optik) und passten
   sichtbar nicht zu den uebrigen Feldern, z.B. "Veröffentlicht am" im Blog. */
.form-field input[type=datetime-local],
.form-field input[type=time],
.form-field input[type=month],
.form-field input[type=tel],
.form-field input[type=url],
.form-field input[type=search],
.form-field input[type=color],
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    font-size: 0.9rem;
    font-family: inherit;
}

.drag-handle {
    cursor: grab;
    color: var(--admin-text-muted);
    padding: 0 0.5rem;
    user-select: none;
}

.drag-handle:active {
    cursor: grabbing;
}

.is-dragging {
    opacity: 0.4;
}

.draggable-row {
    cursor: default;
}

.widget-instance-card {
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.widget-instance-card__header {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-bottom: 1px solid var(--admin-border);
}

.widget-instance-card__body {
    padding: 1rem;
}

.widget-zones {
    display: block;
}

.widget-zones--split {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.widget-zone h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--admin-text-muted);
    margin: 0 0 0.75rem;
}

.widget-instance-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0 1rem 0.75rem;
    font-size: 0.85rem;
}

.widget-drop-zone {
    min-height: 60px;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, outline 0.15s ease;
}

.widget-drop-zone--active {
    outline: 2px dashed var(--admin-primary);
    outline-offset: 4px;
    background: rgba(37, 99, 235, 0.05);
}

.widget-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
}

.widget-palette__item {
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
    cursor: grab;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.widget-palette__item:active {
    cursor: grabbing;
}

.widget-palette__icon {
    font-size: 1.75rem;
}

.widget-palette__preview {
    width: 100%;
    height: 60px;
    object-fit: cover;
    border-radius: 0.3rem;
}

.widget-palette__name {
    font-size: 0.75rem;
    font-weight: 600;
}

.btn-link {
    background: none;
    border: none;
    color: var(--admin-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0;
}

.faq-admin-row {
    border-top: 1px dashed var(--admin-border);
    padding-top: 0.75rem;
}

.admin-login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Sehr weicher Markenverlauf im Hintergrund -- dezent, kein Farbknall. */
    background:
        radial-gradient(60rem 40rem at 15% 0%, rgba(118, 231, 210, 0.22), transparent 60%),
        radial-gradient(50rem 36rem at 85% 100%, rgba(167, 125, 245, 0.20), transparent 60%),
        var(--admin-bg);
}

.admin-login {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 1.25rem;
    padding: 2.25rem;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(27, 29, 45, 0.10);
}

.admin-login__brand {
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

.admin-login__brand b { font-weight: 700; }
.admin-login__brand span { font-weight: 300; color: var(--admin-primary); }

.admin-login__site {
    color: var(--admin-text-muted);
    font-size: 0.85rem;
    margin: 0.4rem 0 1.75rem;
}

.admin-login__error {
    color: var(--admin-danger);
    font-size: 0.85rem;
}

.admin-login__notice {
    color: var(--admin-primary);
    font-size: 0.85rem;
    background: rgba(118, 231, 210, 0.12);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.admin-login__forgot {
    text-align: center;
    font-size: 0.8rem;
    margin: 1rem 0 0;
}

.admin-login__forgot a {
    color: var(--admin-text-muted);
    text-decoration: none;
}

.admin-login__forgot a:hover { text-decoration: underline; }

.admin-login__vendor {
    text-align: center;
    font-size: 0.72rem;
    color: var(--admin-text-muted);
    margin: 1.5rem 0 0;
}

.admin-login__vendor a {
    color: var(--admin-primary);
    text-decoration: none;
    font-weight: 600;
}

/* --- App-artige Handy-Navigation: feste Leiste unten (4 wichtigste
   Bereiche + "Mehr") statt der Seitenleiste, die auf schmalen Bildschirmen
   nur zu einem unpraktischen Horizontal-Scroll-Streifen wurde. Grundzustand
   hier bewusst "unsichtbar" -- sichtbar wird sie erst unter 768px (siehe
   Media Query unten), auf dem Desktop bleibt exakt die bisherige
   Seitenleiste, nichts hier wirkt sich dort aus. --- */
.admin-bottom-nav {
    display: none;
}

.admin-more-sheet {
    display: none;
}

@media (max-width: 768px) {
    .admin-shell {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }

    .admin-sidebar__brand {
        padding: 0;
        margin-right: 1rem;
    }

    /* Alte horizontale Nav-Leiste und die Nutzer-Box in der Seitenleiste
       verschwinden hier -- beides steckt jetzt in der Bottom-Nav bzw. im
       "Mehr"-Sheet (siehe layout.php), damit oben nur Marke + Vorschau-Link
       stehen bleibt: ein schlanker, app-artiger Kopfbereich. */
    .admin-nav,
    .admin-sidebar__user {
        display: none;
    }

    .admin-main {
        padding: 1.25rem 1.25rem 6rem;
    }

    /* --- Tabellen (Benutzer, Rechnungen, Blog, Formulare, Website-Check-
       Leads, offene Modul-Bestellungen -- alle ".admin-table"): eine
       klassische mehrspaltige Tabelle passt auf 375px Breite nicht, ohne
       entweder abgeschnitten zu werden oder die ganze Seite waagerecht
       scrollbar zu machen ("Benutzer und Leistungen ... viel zu breit").
       Jede Zeile wird stattdessen zur eigenen Karte, jede Zelle zu einer
       Label-Wert-Zeile darin -- das Label kommt aus dem "data-label"-
       Attribut (siehe die jeweiligen index.php), das denselben Text wie
       die zugehoerige <th> traegt. Die letzte Spalte (Aktionen-Knoepfe)
       hat bewusst KEIN data-label -- dort gibt es ohnehin keine
       <th>-Beschriftung, die Knoepfe brauchen kein Label, nur genug Platz
       zum Umbrechen. */
    .admin-table thead {
        display: none;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table {
        border: none;
        background: none;
        box-shadow: none;
    }

    .admin-table tr {
        background: #fff;
        border: 1px solid var(--admin-border);
        border-radius: var(--admin-radius);
        box-shadow: var(--admin-shadow);
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    .admin-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
        border-bottom: 1px solid var(--admin-border);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .admin-table td:last-child {
        border-bottom: none;
    }

    .admin-table td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--admin-text-muted);
        text-align: left;
    }

    /* Aktionsspalte (kein data-label): Knoepfe linksbuendig, dürfen
       umbrechen statt die Karte in die Breite zu drücken. */
    .admin-table td:not([data-label]) {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .admin-table .inline-form {
        margin: 0;
    }

    /* Feste Tab-Leiste unten, wie bei einer nativen App. env(safe-area-inset-bottom)
       respektiert die Home-Indicator-Aussparung auf iPhones mit Notch. */
    .admin-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: #fff;
        border-top: 1px solid var(--admin-border);
        box-shadow: 0 -4px 20px rgba(27, 29, 45, 0.08);
        padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    }

    .admin-bottom-nav__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.35rem 0.2rem;
        color: var(--admin-text-muted);
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 600;
        border: 0;
        background: none;
        font-family: inherit;
        border-radius: var(--admin-radius-sm);
    }

    .admin-bottom-nav__icon {
        font-size: 1.25rem;
        line-height: 1;
    }

    .admin-bottom-nav__item.is-active {
        color: var(--admin-primary);
    }

    .admin-bottom-nav__item.is-active .admin-bottom-nav__icon {
        background: linear-gradient(135deg, var(--brand-lavender), var(--brand-mint));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    /* "Mehr"-Sheet: Hintergrund abdunkeln + Panel von unten hochfahren
       (wie ein natives Bottom-Sheet). display:flex kommt erst per JS
       (hidden-Attribut entfernen), is-open steuert nur die Animation, damit
       das Panel beim Oeffnen sichtbar von unten hineingleitet statt einfach
       zu erscheinen. */
    .admin-more-sheet:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
    }

    .admin-more-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(27, 29, 45, 0.45);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .admin-more-sheet.is-open .admin-more-sheet__backdrop {
        opacity: 1;
    }

    .admin-more-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 75vh;
        overflow-y: auto;
        background: #fff;
        border-radius: 1.25rem 1.25rem 0 0;
        padding: 0.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -10px 40px rgba(27, 29, 45, 0.18);
        transform: translateY(100%);
        transition: transform 0.22s ease;
    }

    .admin-more-sheet.is-open .admin-more-sheet__panel {
        transform: translateY(0);
    }

    .admin-more-sheet__handle {
        width: 2.5rem;
        height: 0.28rem;
        border-radius: 999px;
        background: var(--admin-border);
        margin: 0.75rem auto 1rem;
    }

    .admin-more-sheet__link {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.75rem 0.5rem;
        color: var(--admin-text);
        text-decoration: none;
        font-size: 0.95rem;
        border-radius: var(--admin-radius-sm);
    }

    .admin-more-sheet__link.is-active {
        color: var(--admin-primary);
        font-weight: 600;
        background: var(--admin-primary-soft);
    }

    .admin-more-sheet__user {
        margin-top: 0.5rem;
        padding: 1rem 0.5rem 0;
        border-top: 1px solid var(--admin-border);
        font-size: 0.85rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .admin-more-sheet__user a {
        color: var(--admin-text-muted);
    }
}

.color-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.color-input {
    height: 2.5rem;
    width: 100%;
    padding: 0.2rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
}

.color-presets {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.color-preset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    font-size: 0.85rem;
}

.color-preset:hover {
    border-color: var(--admin-primary);
}

.color-preset__swatches {
    display: flex;
}

.color-preset__swatches span {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: -0.3rem;
}

.color-preset__swatches span:first-child {
    margin-left: 0;
}

.footer-template-choice {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.footer-template-choice label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.repeater-row {
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
}

.repeater-row input,
.repeater-row textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-family: inherit;
    margin-bottom: 0.4rem;
}

.repeater-row input:last-child,
.repeater-row textarea:last-child {
    margin-bottom: 0;
}

/* --- Formular-Baukasten: Feldzeile (Ziehgriff, Beschriftung, Typ, Pflicht)
   -- ohne diese Regeln sah die Zeile "alt"/unstimmig aus (Bugreport):
   das <select> steckt hier bewusst NICHT in .form-field (die Zeile ist ein
   eigenes CSS-Grid, kein gestapeltes Formularfeld), bekam dadurch aber auch
   keinen der Input-Stile ab und blieb im nackten Browser-Standard-Look
   haengen. Zusaetzlich das eigentliche Layout-Problem: CSS-Grid-Zellen
   schrumpfen ohne "min-width: 0" NIE unter die Inhaltsbreite ihres Inhalts
   -- die langen Options-Texte im Dropdown ("Radio-Buttons (eine Auswahl)")
   zwangen die Select-Spalte auf ihre volle Inhaltsbreite und quetschten
   dabei das Beschriftungsfeld daneben praktisch unsichtbar zusammen. --- */
.form-field-row {
    display: grid;
    grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    min-width: 0;
}

.form-field-row input[type="text"] {
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.form-field-type-select {
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: #fff;
    color: var(--admin-text);
}

.form-field-row .drag-handle {
    font-size: 1.1rem;
}

.form-field-row label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--admin-text-muted);
}

.form-field-row input[type="checkbox"] {
    width: auto;
    accent-color: var(--admin-primary);
}

.link-field__row {
    display: flex;
    gap: 0.5rem;
}

.link-field__row .link-field__input {
    flex: 1;
}

.link-field__picker {
    max-width: 160px;
    padding: 0.55rem 0.5rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    font-size: 0.85rem;
}

.widget-catalog__item--disabled {
    opacity: 0.55;
    background: #fafafa;
}

.widget-palette__item {
    position: relative;
}

.widget-palette__add {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: var(--admin-primary);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.widget-palette__add:hover {
    filter: brightness(1.1);
}

.image-field__row {
    display: flex;
    gap: 0.5rem;
}

.image-field__row .image-field__input {
    flex: 1;
}

.image-field__upload-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.image-field__preview {
    display: block;
    max-width: 160px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 0.4rem;
    margin-top: 0.5rem;
    border: 1px solid var(--admin-border);
}

.image-field__preview-video {
    display: block;
    max-width: 240px;
    max-height: 140px;
    border-radius: 0.4rem;
    margin-top: 0.5rem;
    border: 1px solid var(--admin-border);
}

.admin-nav__preview {
    display: block;
    margin: 0 1.25rem 1rem;
    padding: 0.55rem 0.9rem;
    background: var(--admin-primary);
    color: #fff;
    text-decoration: none;
    text-align: center;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-nav__preview:hover {
    filter: brightness(1.1);
}

.design-jumpnav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.design-jumpnav a {
    color: var(--admin-primary);
    text-decoration: none;
    font-weight: 600;
}

.design-jumpnav a:hover {
    text-decoration: underline;
}

.theme-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.theme-card {
    display: block;
    border: 2px solid var(--admin-border);
    border-radius: 0.6rem;
    padding: 1rem;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-card:hover {
    border-color: var(--admin-primary);
}

.theme-card--active {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.theme-card input[type=radio] {
    margin-right: 0.4rem;
}

.theme-card__name {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.theme-card__name .badge {
    background: rgba(0, 0, 0, 0.07);
    color: var(--admin-text-muted);
}

.theme-card--active .theme-card__name .badge {
    background: var(--admin-primary);
    color: #fff;
}

.theme-card__desc {
    display: block;
    font-size: 0.8rem;
    color: var(--admin-text-muted);
    line-height: 1.45;
}

.widget-price {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.06);
    color: var(--admin-text);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.widget-catalog__select {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0.4rem;
}

.widget-catalog__select input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--admin-primary);
    cursor: pointer;
}

/* Warenkorb-Leiste fuer Modul-Bestellungen (siehe widgets/index.php) --
   bleibt beim Scrollen sichtbar, solange mindestens ein Modul ausgewaehlt
   ist, damit man sie nicht erst wieder hochscrollen muss. */
.widget-order-bar {
    position: sticky;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    padding: 0.85rem 1.1rem;
    background: var(--admin-primary);
    color: #fff;
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.widget-order-bar__summary {
    font-size: 0.9rem;
    font-weight: 600;
}

.widget-order-bar__message {
    flex: 1 1 220px;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.widget-order-bar .btn-primary {
    background: #fff;
    color: var(--admin-primary);
}

.wl-admin-toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 500;
    background: linear-gradient(90deg, #76e7d2, #a77df5);
    color: #1b1d2d;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.85rem 1.25rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(27, 29, 45, 0.2);
    animation: wl-toast-in 0.25s ease;
}

.wl-admin-toast--hide {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

@keyframes wl-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.impersonation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #78350f;
    color: #fff;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
}

.impersonation-bar .btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.badge-muted {
    background: rgba(128, 128, 128, 0.2);
    color: var(--admin-text-muted);
}

/* Gruppierte Seitennavigation. */
.admin-nav__group-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #A0A5BD;
    padding: 1rem 1.25rem 0.35rem;
}

.admin-nav__group-label:first-child {
    padding-top: 0.25rem;
}

.admin-nav__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.admin-nav__icon {
    width: 1.1rem;
    text-align: center;
    opacity: 0.8;
    font-size: 0.95rem;
}

/* Zahl neben einem Navigationspunkt (z.B. Anzahl Seiten/Formulare) --
   macht auf einen Blick sichtbar, wie viel in einem Bereich steckt. */
.admin-nav__count {
    margin-left: auto;
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(27, 29, 45, 0.06);
    color: var(--admin-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

.admin-nav__link.is-active .admin-nav__count {
    background: rgba(108, 92, 231, 0.16);
    color: var(--admin-primary);
}

/* Reiter innerhalb einer Seite. */
.admin-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--admin-border);
    margin: 1.25rem 0 0;
    flex-wrap: wrap;
}

.admin-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    cursor: pointer;
}

.admin-tab:hover {
    color: var(--admin-text);
}

.admin-tab.is-active {
    color: var(--admin-primary);
    border-bottom-color: var(--admin-primary);
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.is-active {
    display: block;
}

/* Seiten-Uebersicht als Karten statt Tabelle. */
.page-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.page-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 0.6rem;
    padding: 0.85rem;
}

.page-card__thumb {
    width: 96px;
    height: 68px;
    border-radius: 0.4rem;
    background: rgba(128, 128, 128, 0.12);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.page-card__thumb-placeholder {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--admin-text-muted);
    opacity: 0.5;
}

.page-card__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.page-card__title {
    margin: 0;
    font-size: 1.05rem;
}

.page-card__url {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--admin-text-muted);
    text-decoration: none;
    margin: 0.15rem 0 0.4rem;
}

.page-card__url:hover {
    text-decoration: underline;
}

.page-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.page-card__badges .badge {
    margin-left: 0;
}

.page-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
}

.page-card__actions .inline-form {
    margin: 0;
}

.page-card__actions .btn {
    width: 100%;
    text-align: center;
}

@media (max-width: 720px) {
    .page-card {
        grid-template-columns: 1fr;
    }

    .page-card__thumb {
        width: 100%;
        height: 110px;
    }

    .page-card__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* SEO-Vorschau (Google-Snippet). */
.seo-preview {
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    padding: 1rem;
    background: #fff;
    margin-top: 1rem;
    max-width: 600px;
}

.seo-preview__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--admin-text-muted);
    margin-bottom: 0.6rem;
}

.seo-preview__url {
    font-size: 0.78rem;
    color: #0b7c1f;
}

.seo-preview__title {
    color: #1a0dab;
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0.1rem 0;
}

.seo-preview__desc {
    font-size: 0.85rem;
    color: #4d5156;
    line-height: 1.45;
}

/* Geraete-Vorschau. */
.preview-toolbar {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.preview-frame-wrap {
    background: rgba(128, 128, 128, 0.12);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.preview-frame {
    width: 100%;
    height: 620px;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    background: #fff;
    transition: width 0.2s ease;
}

/* Entfernen-Knopf an jeder Wiederhol-Zeile. */
.repeater-row--removable {
    position: relative;
    padding-right: 2.4rem;
}

.repeater-row__delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--admin-border);
    background: #fff;
    color: var(--admin-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.repeater-row__delete:hover {
    background: var(--admin-danger);
    border-color: var(--admin-danger);
    color: #fff;
}

/*
 * Platz der entfernten Zeile: zeigt an, DASS etwas entfernt wurde, und
 * bietet ein Rueckgaengig an (siehe wlAddRepeaterDeleteButtons()). Ohne
 * diese Rueckmeldung wirkte das Entfernen wie ein Fehler -- die Zeile war
 * einfach weg, ohne Hinweis, dass erst "Speichern" es endgueltig macht.
 */
/*
 * Sicherheitsabfrage als echtes HTML statt confirm() -- siehe
 * assets/admin/confirm-dialog.js (unterdrueckte Browser-Dialoge legten
 * sonst saemtliche Loeschfunktionen lahm).
 */
.wl-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 17, 26, 0.45);
}

.wl-confirm {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.25);
    padding: 1.25rem;
}

.wl-confirm__text {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

.wl-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/*
 * Vergleichstabelle: eine Zeile = Leistungsname + ein Feld JE SPALTE, jedes
 * mit dem Spaltennamen darueber (siehe widgets/comparison-table/admin.php).
 */
.comparison-row {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    background: #fff;
}

.comparison-row__title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.comparison-row__cells {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.comparison-row__cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.comparison-row__cell-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--admin-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.comparison-row__cell input {
    text-align: center;
}

.comparison-row__hint {
    font-size: 0.8rem;
    margin: 0;
}

.repeater-row-undo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--admin-border);
    border-radius: 0.4rem;
    background: #fafafa;
    color: var(--admin-text-muted);
    font-size: 0.85rem;
}

/* Wortmarke im Admin (siehe App\Core\Brand). */
.brand {
    text-transform: lowercase;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.brand__bold { font-weight: 700; }
.brand__thin { font-weight: 300; opacity: 0.92; }

.admin-login__brand .brand__thin { color: var(--admin-primary); opacity: 1; }

/* --- Spalten-Modul im Seiteneditor ------------------------------------- */
/* Die Spalten werden im Admin genauso nebeneinander gezeigt wie spaeter auf
   der Seite -- so ist ohne Vorschau klar, was wohin gehoert. */
.column-editor {
    display: grid;
    grid-template-columns: repeat(var(--column-count, 2), minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.75rem;
    margin: 0 0.75rem 0.75rem;
    border: 1px dashed var(--admin-border, rgba(128, 128, 128, 0.35));
    border-radius: 0.6rem;
    background: rgba(128, 128, 128, 0.04);
}

.column-editor__column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.column-editor__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    opacity: 0.5;
}

.column-editor .widget-instance-card { margin: 0; }

.widget-zone-select {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    margin-right: auto;
}

.widget-zone-select select {
    width: auto;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .column-editor { grid-template-columns: minmax(0, 1fr); }
}

.status-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: -0.5rem 0 1.25rem;
}

.status-bar .badge { margin-left: 0; }

/* Nutzungslimits (App\Core\PlanLimits::renderUsageBar): Balken statt reinem
   Text -- Markenverlauf Mint->Lavender wie Dashboard-Ring/-Diagramm, damit
   die Anzeige zum restlichen fils.engine-Farbkonzept passt statt wie ein
   Fremdkoerper zu wirken. */
.usage-bar {
    margin: 0 0 1.25rem;
    max-width: 360px;
}

.usage-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
}

.usage-bar__label {
    font-weight: 600;
    color: var(--admin-text);
}

.usage-bar__value {
    color: var(--admin-text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.usage-bar__track {
    height: 0.55rem;
    border-radius: 999px;
    background: var(--admin-border);
    overflow: hidden;
}

.usage-bar__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-mint), var(--brand-lavender));
    transition: width 0.3s ease;
}

.usage-bar--full .usage-bar__fill {
    background: var(--admin-danger);
}

.usage-bar__request {
    margin-top: 0.5rem;
}

/* --- Leistungen (App\Core\Services) ------------------------------------- */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.service-card {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 1.4rem;
}

.service-card--has-image {
    background-size: cover;
    background-position: center;
    color: #fff;
    border: none;
}

.service-card--has-image .service-card__plan,
.service-card--has-image label,
.service-card--has-image .text-muted {
    color: rgba(255, 255, 255, 0.85);
}

.service-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.service-card__title {
    margin: 0;
    font-size: 1.15rem;
}

.service-card__plan {
    margin: 0 0 1rem;
    font-weight: 600;
    opacity: 0.75;
}

.service-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.service-status--aktiv {
    background: rgba(118, 231, 210, 0.18);
    color: #0f8a72;
}

.service-card--has-image .service-status--aktiv {
    background: rgba(118, 231, 210, 0.25);
    color: #fff;
}

.service-status--gekuendigt {
    background: rgba(229, 72, 77, 0.14);
    color: var(--admin-danger);
}

.service-card--has-image .service-status--gekuendigt {
    background: rgba(229, 72, 77, 0.3);
    color: #fff;
}

.service-status--buchen {
    background: var(--admin-border);
    color: var(--admin-text-muted);
}

.service-card--has-image .service-status--buchen {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.service-card__form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--admin-border);
    margin-bottom: 1rem;
}

.service-card--has-image .service-card__form {
    border-top-color: rgba(255, 255, 255, 0.3);
}

.service-card__request {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--admin-border);
    margin-bottom: 1rem;
}

.service-card__request input[type="text"] {
    width: 100%;
    margin-bottom: 0.5rem;
}

.service-card__invoices-title {
    font-size: 0.95rem;
    margin: 1rem 0 0.5rem;
}

.service-card__invoice-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.service-card__invoice-form input,
.service-card__invoice-form select {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    font-size: 0.9rem;
    font-family: inherit;
}

.service-card__invoice-form input[name="label"] {
    flex: 1 1 160px;
}

.bundle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.bundle-card {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    padding: 1.1rem;
    background: linear-gradient(160deg, var(--admin-primary-soft), transparent);
}

.bundle-card__size {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.bundle-card__list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.85rem;
    color: var(--admin-text-muted);
}

.bundle-card__list li {
    padding: 0.2rem 0;
}

.bundle-card__list strong {
    color: var(--admin-text);
}

.bundle-card__request input[type="text"] {
    width: 100%;
    margin-bottom: 0.5rem;
}

/* --- Medienbibliothek --------------------------------------------------- */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

.media-grid__item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    background: #fafafa;
}

.media-grid__item img,
.media-grid__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-grid__delete {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    margin: 0;
}

.media-grid__delete .btn {
    padding: 0.15rem 0.5rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.9);
}

/* --- Medien-Auswahl-Dialog (an jedem Bild-Feld) ------------------------- */
.media-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(27, 29, 45, 0.55);
    padding: 2rem;
}

.media-picker-overlay.is-open {
    display: flex;
}

.media-picker {
    background: #fff;
    border-radius: var(--admin-radius);
    padding: 1.25rem;
    max-width: 720px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--admin-shadow);
}

.media-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.media-picker__head h3 { margin: 0 auto 0 0; }

.media-picker__filter {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    font-size: 0.85rem;
    background: #fff;
}

.media-picker__close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--admin-text-muted);
}

.media-picker__empty {
    color: var(--admin-text-muted);
    font-size: 0.9rem;
}

.media-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
}

.media-picker__grid button {
    border: 2px solid transparent;
    border-radius: 0.5rem;
    overflow: hidden;
    aspect-ratio: 1;
    padding: 0;
    background: #fafafa;
    cursor: pointer;
}

.media-picker__grid button:hover {
    border-color: var(--admin-primary);
}

.media-picker__grid img,
.media-picker__grid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.icon-picker-panel {
    position: absolute;
    z-index: 60;
    display: none;
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    box-shadow: 0 12px 30px rgba(27, 29, 45, 0.15);
    padding: 0.4rem;
    max-width: 320px;
}

.icon-picker-panel.is-open { display: block; }

.icon-picker-panel__group {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0.15rem;
}

.icon-picker-panel__divider {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted, #8a8fa3);
    padding: 0.5rem 0.2rem 0.3rem;
    border-top: 1px solid var(--admin-border);
    margin-top: 0.3rem;
}

.icon-picker-panel__item {
    border: none;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.35rem;
    border-radius: 0.35rem;
    cursor: pointer;
}

.icon-picker-panel__item:hover { background: var(--admin-bg); }

.icon-picker-panel__item--picto {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-field__library-btn {
    margin-left: 0.4rem;
}

/* --- "Anpassen"-Sprung von der Website ----------------------------------- */
/* Kurzes Hervorheben der Modul-Karte, zu der von der Website aus gesprungen
   wurde (siehe pages/edit.php + inline-edit.js). */
.widget-instance-card--focused {
    animation: wl-focus-pulse 2.6s ease;
}

@keyframes wl-focus-pulse {
    0%, 15% { box-shadow: 0 0 0 3px var(--admin-primary); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* --- Widget-Palette nach Sparten gruppiert ------------------------------ */
.widget-palette__search {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0.75rem 0 0.25rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
}

.widget-palette__group-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted);
    margin: 1.25rem 0 0.6rem;
}

.widget-palette__group-title:first-of-type {
    margin-top: 0.5rem;
}

/* --- Medien-Direktupload ------------------------------------------------- */
.media-upload-form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.media-upload-form__pick,
.backup-restore-form__pick {
    cursor: pointer;
}

.backup-restore-form__filename {
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

.media-upload-form__filename {
    margin-left: 0.5rem;
    font-size: 0.85rem;
}

.media-upload-form__status {
    flex-basis: 100%;
    margin: 0.5rem 0 0;
}

/* Kombi-Pakete: ein Feld je enthaltener Leistung (siehe widgets/combo-packages). */
.combo-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.4rem;
}

.combo-features__input {
    font-size: 0.85rem;
}

/* Produktraster: Farbwaehler statt getippter Hex-Codes. */
.product-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.product-colors__slot {
    position: relative;
    display: inline-flex;
}

.product-colors__picker {
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.15rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    cursor: pointer;
}

.product-colors__picker[data-empty="1"] {
    opacity: 0.35;
}

.product-colors__clear {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--admin-border);
    background: #fff;
    color: var(--admin-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.product-colors__clear:hover {
    background: var(--admin-danger);
    border-color: var(--admin-danger);
    color: #fff;
}

/* --- Formatierungsleiste an Textfeldern im Admin (assets/admin/wysiwyg.js) --- */
.wl-wys {
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    overflow: hidden;
    background: #fff;
}

.wl-wys__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.4rem;
    background: #fafafa;
    border-bottom: 1px solid var(--admin-border);
}

.wl-wys__btn {
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    background: transparent;
    color: var(--admin-text);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.wl-wys__btn:hover {
    background: #fff;
    border-color: var(--admin-border);
}

.wl-wys__area {
    min-height: 2.6rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1.5;
    outline: none;
}

.wl-wys__area--single {
    min-height: auto;
    white-space: nowrap;
    overflow-x: auto;
}

.wl-wys__area:focus {
    box-shadow: inset 0 0 0 2px rgba(108, 92, 231, 0.25);
}

/* Originalfeld bleibt im Formular, ist aber nicht mehr sichtbar. */
.wl-wys__source {
    display: none !important;
}

/* Groesse + Farbe zusammen in einer Gruppe -- vorher standen sie verstreut. */
.wl-wys__group {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.35rem;
    margin-left: 0.25rem;
    border-left: 1px solid var(--admin-border);
}

.wl-wys__group-label {
    font-size: 0.7rem;
    color: var(--admin-text-muted);
}

.wl-wys__size {
    width: 3.6rem;
    height: 1.8rem;
    padding: 0 0.35rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.3rem;
    background: #fff;
    font-size: 0.8rem;
}

/*
 * Farbwahl als quadratischer Knopf in der gewaehlten Farbe. Ein
 * input[type=color] zeigt je nach Browser nur einen duennen Farbstreifen --
 * deshalb liegt das echte Feld unsichtbar ueber dem Quadrat.
 */
.wl-wys__swatch {
    position: relative;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.3rem;
    border: 1px solid var(--admin-border);
    background: var(--wl-swatch, #1b1d2d);
    cursor: pointer;
}

.wl-wys__swatch input[type=color] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/*
 * Alle uebrigen Farbfelder im Admin (z.B. "Eigene Button-Farbe",
 * Design-Farben) ebenfalls als sichtbares Quadrat statt als flacher
 * Strich -- Browser rendern input[type=color] sonst sehr unterschiedlich.
 */
.form-field input[type=color] {
    width: 2.6rem !important;
    height: 2.6rem;
    padding: 0.2rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.4rem;
    background: #fff;
    cursor: pointer;
}

.form-field input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.form-field input[type=color]::-webkit-color-swatch {
    border: 0;
    border-radius: 0.25rem;
}

.form-field input[type=color]::-moz-color-swatch {
    border: 0;
    border-radius: 0.25rem;
}

/*
 * Der Farbknopf der Leiste ist ein <label> INNERHALB eines .form-field --
 * dort gilt sonst ".form-field label { display: block }", wodurch das
 * Quadrat zu einem schmalen Streifen zusammenfiel. Ebenso muss das innere
 * color-Feld von der allgemeinen Quadrat-Regel ausgenommen werden, sonst
 * sprengt dessen feste Breite die Ueberlagerung.
 */
.wl-wys .wl-wys__swatch {
    display: inline-block !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.form-field .wl-wys__swatch input[type=color] {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* --- Showcase-Verwaltung ------------------------------------------------- */
.showcase-admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.showcase-admin-card {
    border: 1px solid var(--admin-border);
    border-radius: 0.6rem;
    background: #fff;
    overflow: hidden;
}

.showcase-admin-card--off {
    opacity: 0.6;
}

.showcase-admin-card.is-dragging {
    opacity: 0.5;
    outline: 2px dashed var(--admin-primary);
}

.showcase-admin-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: #fafafa;
    border-bottom: 1px solid var(--admin-border);
}

.showcase-admin-card__thumb {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.4rem;
    object-fit: cover;
    flex: 0 0 auto;
}

.showcase-admin-card__thumb--empty {
    background: linear-gradient(135deg, #a77df5, #76e7d2);
    display: block;
}

.showcase-admin-card__title {
    flex: 1 1 auto;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.showcase-admin-card__actions {
    display: flex;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.showcase-admin-card__form {
    padding: 0.9rem;
}