/* ── GNOME Adwaita – LibreDesk Web Portal ─────────────────────────────── */
/* Inter aus der EINEN Quelle (assets/brand/font): Caddy liefert sie auf jedem
   Host unter /_ld/font/ aus (Schnipsel `ld_font`). Eine variable Datei für alle
   Schnitte. Ohne Caddy davor (lokaler Start) greift die Ersatzschrift aus der
   Reihenfolge unten. Regel: docs/LIBREDESK_MASTER.md → „Schrift". */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
             src:url('/_ld/font/InterVariable.woff2') format('woff2'); }

/* ── Alte Namen → Adwaita-Tokens ─────────────────────────────────────────
   Die Werte stehen in assets/brand/ld-adwaita.css (libadwaita 1.10, Namen
   --ld-*), geladen vor dieser Datei. Die alten Namen bleiben als Verweise,
   weil rund 60 Vorlagen sie benutzen. Neue Regeln nehmen die --ld-*-Namen
   direkt (DESIGN.md). Hell/Dunkel schaltet die Token-Datei selbst. */
:root {
    --window-bg:         var(--ld-window-bg-color);
    --window-fg:         var(--ld-window-fg-color);
    --fg:                var(--ld-window-fg-color);   /* wurde benutzt, war nie definiert */
    --headerbar-bg:      var(--ld-headerbar-bg-color);
    --headerbar-border:  var(--ld-headerbar-shade-color);
    /* ⚠️ Die Karte ist dunkel nur 8 % Weiß, also durchsichtig. Viele Vorlagen
       nehmen --card-bg aber als deckenden Grund (klebende Köpfe, Menüs,
       Dialoge). Der alte Name bekommt deshalb dieselbe Farbe deckend:
       8 % Weiß auf der Fensterfläche. */
    --card-bg:           var(--ld-card-bg-color);
    --popover-bg:        var(--ld-popover-bg-color);
    --popover-border:    var(--ld-border-color);
    --view-bg:           var(--ld-view-bg-color);
    --accent-bg:         var(--ld-accent-bg-color);
    --accent-fg:         var(--ld-accent-fg-color);
    --accent-color:      var(--ld-accent-color);
    --destructive-bg:    var(--ld-destructive-bg-color);
    --destructive-fg:    var(--ld-destructive-fg-color);
    --success-color:     var(--ld-success-color);
    --warning-color:     var(--ld-warning-color);
    --error-color:       var(--ld-error-color);
    --dim-fg:            color-mix(in srgb, var(--ld-window-fg-color) var(--ld-dim-opacity), transparent);
    --border:            var(--ld-border-color);
    --row-border:        var(--ld-card-shade-color);
    --headerbar-h:       var(--ld-headerbar-height);

    /* Anteil der Akzentfarbe für zarte Flächen (gewählte Einträge, Marken):
       20 % hell, 30 % dunkel, wie primaryContainer in DESIGN.md. */
    --ld-accent-subtle-mix: 20%;
}
[data-bs-theme="dark"] {
    --card-bg: color-mix(in srgb, #fff 8%, var(--ld-window-bg-color));
    --ld-accent-subtle-mix: 30%;
}

/* Links in der Akzentfarbe (früher über Bootstraps --bs-link-color). */
a { color: var(--ld-accent-color); }
a:hover { color: color-mix(in srgb, var(--ld-accent-color) 80%, currentColor); }

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

/* Grundstile, die bis Projekt 12 Bootstraps „Reboot“ lieferte (22.10.2026).
   Bewusst knapp: nur, was die Seiten wirklich voraussetzen. */
body { margin: 0; line-height: var(--ld-line-height, 1.5); -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 700; line-height: 1.2; }
h1 { font-size: calc(var(--ld-font-size) * 1.81); }
h2 { font-size: calc(var(--ld-font-size) * 1.36); }
h3 { font-size: calc(var(--ld-font-size) * 1.18); }
h4, h5, h6 { font-size: var(--ld-font-size); }
p, ul, ol, dl, pre, blockquote, table, figure { margin-top: 0; margin-bottom: 1rem; }
ul, ol { padding-left: 2rem; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
dt { font-weight: 700; } dd { margin: 0 0 .5rem; }
b, strong { font-weight: 700; }
small { font-size: .875em; }
hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--ld-border-color); opacity: 1; }
img, svg { vertical-align: middle; }
code, kbd, samp, pre { font-family: var(--ld-monospace-font-family); font-size: .875em; }
code { color: var(--ld-accent-color); word-wrap: break-word; }
a > code, pre code { color: inherit; }
pre { display: block; overflow: auto; }
kbd { padding: .1em .35em; border-radius: 4px; background: color-mix(in srgb, currentColor 12%, transparent); }
table { border-collapse: collapse; caption-side: bottom; }
th { text-align: inherit; }
label { display: inline-block; }
button, input, select, optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button:not(:disabled), [type="button"]:not(:disabled), [type="submit"]:not(:disabled), [role="button"] { cursor: pointer; }
textarea { resize: vertical; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { float: left; width: 100%; padding: 0; margin-bottom: .5rem; font-size: 1.2em; }
legend + * { clear: left; }
[hidden] { display: none !important; }
summary { cursor: pointer; }

/* Grundschrift 11 pt wie GNOME (Entscheidung HKS, 21.10.2026). Die Wurzel
   wächst im selben Verhältnis wie der Text (10 → 11 pt, also 16 → 17,6 px),
   damit alle rem-Abstände und -Größen ihre Abstufung behalten. 110 % statt
   fester Pixel, damit eine größere Schrift im Browser weiter wirkt. */
html { font-size: 110%; }

body {
    background-color: var(--ld-window-bg-color);
    color: var(--ld-window-fg-color);
    font-family: var(--ld-font-family);
    font-size: var(--ld-font-size);
    min-height: 100vh;
    overflow-y: scroll; /* Always reserve scrollbar space — prevents CLS when switching tabs */
    -webkit-font-smoothing: antialiased;   /* schärfer/gleichmäßiger auf LCD */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Schriftklassen (.title-1 … .caption), GNOME-Symbole (.ld-icon) und die
   allgemeinen Bausteine stehen in assets/brand/ld-adwaita-components.css.
   Hier nur, was es allein im Portal gibt. */
.dimmed      { color: var(--dim-fg); }

/* ── Kopfleiste ──────────────────────────────────────────────────────────
   Grundform (.ld-headerbar, -start, -end, -title) in den Bausteinen. Hier die
   Teile des Portals: Bereichsknöpfe, Benutzerknopf, Admin-Modus. */
.ld-headerbar-apps {
    display: flex;
    align-items: center;
    gap: var(--ld-space-1);
}
.ld-headerbar-title { pointer-events: none; }

/* Flache Symbolknöpfe der Kopfleiste (34 × 34, Radius 9) */
.btn-headerbar {
    background: transparent;
    border: none;
    color: inherit;
    border-radius: var(--ld-radius-button);
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--ld-duration) var(--ld-ease);
    text-decoration: none;
}
.btn-headerbar:hover  { background-color: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); color: inherit; }
.btn-headerbar:active { background-color: color-mix(in srgb, currentColor var(--ld-active-mix), transparent); }
.btn-headerbar.active { background-color: color-mix(in srgb, currentColor var(--ld-button-mix), transparent); }
.btn-headerbar:focus-visible,
.btn-user:focus-visible,
.btn-admin-mode:focus-visible {
    outline: var(--ld-focus-ring-width) solid color-mix(in srgb, var(--ld-accent-color) 50%, transparent);
    outline-offset: var(--ld-focus-ring-offset);
}

/* Benutzerknopf: Avatar und Name */
.btn-user {
    background: transparent;
    border: none;
    color: inherit;
    border-radius: var(--ld-radius-button);
    padding: 3px 8px 3px 3px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: var(--ld-space-2);
    font-size: var(--ld-font-size);
    transition: background-color var(--ld-duration) var(--ld-ease);
    cursor: pointer;
    white-space: nowrap;
}
.btn-user:hover, .btn-user[aria-expanded="true"] {
    background-color: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent);
    color: inherit;
}
.btn-user .user-pfeil { opacity: var(--ld-dim-opacity); width: 12px; height: 12px; }

/* Benachrichtigungen: Popover an der Glocke (ld-menu aus den Bausteinen) */
.ld-notif-panel { width: min(360px, calc(100vw - 16px)); max-width: none; padding: 0; overflow: hidden; }
.ld-notif-panel:popover-open { display: flex; }
.ld-notif-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--ld-space-2); padding: var(--ld-space-2) var(--ld-space-2) var(--ld-space-2) var(--ld-space-3); border-bottom: 1px solid var(--ld-border-color); }
#notif-list { max-height: 360px; overflow-y: auto; }
.ld-notif-leer { padding: var(--ld-space-3); opacity: var(--ld-dim-opacity); font-size: calc(var(--ld-font-size) * .82); }
.ld-notif-alle { border-top: 1px solid var(--ld-border-color); border-radius: 0; justify-content: center; text-decoration: none; }

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.user-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ld-accent-bg-color);
    color: var(--ld-accent-fg-color);
    font-size: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-name { font-size: var(--ld-font-size); }

/* Admin-Modus in der Kopfleiste: der eine Akzentknopf der Leiste */
.btn-admin-mode {
    background-color: var(--ld-accent-bg-color);
    border: none;
    color: var(--ld-accent-fg-color);
    border-radius: var(--ld-radius-button);
    font-size: calc(var(--ld-font-size) * .9);
    font-weight: 700;
    padding: 0 12px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ld-space-2);
    transition: background-color var(--ld-duration) var(--ld-ease);
    text-decoration: none;
    white-space: nowrap;
}
.btn-admin-mode:hover {
    background-color: color-mix(in srgb, var(--ld-accent-bg-color), var(--ld-accent-fg-color) 10%);
    color: var(--ld-accent-fg-color);
}

/* Bereiche-Menü: erscheint nur bei schmalem Fenster und nimmt dann die
   Symbolknöpfe der Bereiche auf (main.js baut die Einträge aus ihnen). */
.ld-headerbar-appmenu { display: none; }
.ld-appmenu-item[aria-current="page"] { font-weight: 700; }

/* ⚠️ Bei 624 px lief die Kopfleiste über den Rand (waagerechter Bildlauf,
   Benutzername abgeschnitten, Vergleich 21.10.2026). Sie gibt deshalb
   stufenweise nach, wie eine GNOME-Kopfleiste, die schmaler wird:
     ≤ 960 px  Name neben dem Avatar fällt weg (steht im Menü als Adresse)
     ≤ 800 px  „Admin-Modus" nur noch als Symbol
     ≤ 640 px  Bereiche wandern ins Bereiche-Menü */
@media (max-width: 960px) {
    .ld-headerbar .user-name { display: none; }
}
@media (max-width: 800px) {
    .btn-admin-mode { width: 34px; padding: 0; justify-content: center; }
    .btn-admin-mode-text { display: none; }
}
@media (max-width: 640px) {
    .ld-headerbar-apps { display: none; }
    .ld-headerbar-appmenu { display: block; }
    .ld-headerbar-title { display: none; }
}

/* ── Adwaita Buttons ─────────────────────────────────────────────────────
   Radius 9, Höhe 34, Schrift 700. Hover und Druck als Farbanteil, nie mit
   filter: brightness() (DESIGN.md → Knöpfe). */
.btn {
    border-radius: var(--ld-radius-button);
    font-weight: 700;
    font-size: var(--ld-font-size);
    padding: 5px 17px;
    min-height: var(--ld-button-min-height);
    border: 1px solid transparent;
    line-height: 1.4;
    transition: background-color var(--ld-duration) var(--ld-ease), color var(--ld-duration) var(--ld-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn:focus-visible {
    outline: var(--ld-focus-ring-width) solid color-mix(in srgb, var(--ld-accent-color) 50%, transparent);
    outline-offset: 1px;
    box-shadow: none;
}

/* Pill modifier (like AdwButton .pill) */
.pill { border-radius: var(--ld-radius-pill) !important; }

/* Normal: Grund 10 % Schriftfarbe. Bootstraps graue und umrandete Knöpfe
   sehen bis zur Ablösung genauso aus, Adwaita kennt keine Umrandung. */
/* Umrandet-farbig wird zu „normal mit farbiger Schrift", wie die flachen
   Varianten von suggested/destructive in libadwaita. */

/* Empfohlen (suggested-action): Akzentfläche, ein Knopf je Ansicht */

/* Zerstörend (destructive-action): Rot, ein Knopf je Ansicht */

/* Admin-Ausnahme (Entscheidung HKS, 21.10.2026): In der App-Verwaltung
   bleibt „Installieren" grün und „Sicherung" gelb, mit dunkler Schrift auf
   Gelb. Nur dort, nicht auf anderen Seiten. */

/* ── App Grid Cards ──────────────────────────────────────────────────────
   Karte wie AdwCard: hell ein weicher Schatten statt Linie, dunkel nur die
   hellere Fläche. Beim Überfahren ein Farbanteil, kein Schatten und kein
   Akzentrahmen (Kein-Schwebe-Regel). */
.ld-card {
    background-color: var(--ld-card-bg-color);
    border: none;
    border-radius: var(--ld-radius-card);
    box-shadow: var(--ld-card-shadow);
    transition: background-color var(--ld-duration) var(--ld-ease);
    overflow: hidden;
}
.ld-card:hover { background-color: color-mix(in srgb, currentColor var(--ld-hover-mix), var(--ld-card-bg-color)); }
.ld-card:active { background-color: color-mix(in srgb, currentColor var(--ld-active-mix), var(--ld-card-bg-color)); }
.ld-card--disabled { opacity: var(--ld-dim-opacity); cursor: not-allowed; }
.ld-card--disabled:hover { background-color: var(--ld-card-bg-color); }

/* App icon — GNOME-style rounded square */
.app-logo {
    height: 72px;
    width: 72px;
    object-fit: contain;
    border-radius: 16px;
}

/* Phase 2: status-dot replaced by status-icon — removed .status-dot, .status-dot--pulse, @keyframes pulse-green */
/* Phase 2: Bootstrap Icon status indicator */
.status-icon {
    font-size: 0.75rem;
}

/* ── AdwStatusPage equivalent ────────────────────────────────────────────── */
.ld-status-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    gap: var(--ld-space-3);
}
.ld-status-page .status-icon {
    font-size: 5rem;
    color: var(--dim-fg);
    line-height: 1;
    margin-bottom: 8px;
}
.ld-status-page .status-title {
    font-size: calc(var(--ld-font-size) * 1.81);   /* Titel 1 */
    font-weight: 800;
    color: var(--ld-window-fg-color);
    margin: 0;
}
.ld-status-page .status-description {
    font-size: var(--ld-font-size);
    color: var(--dim-fg);
    max-width: 340px;
    margin: 0;
    line-height: var(--ld-line-height);
}

/* ── Log output (terminal) ───────────────────────────────────────────────── */
.ld-log {
    background-color: #1a1d23;
    color: #c9d1d9;
    border: 1px solid var(--ld-border-color);
    border-radius: var(--ld-radius-small);
    font-family: var(--ld-monospace-font-family);
    font-size: .8rem;
    min-height: 200px;
    max-height: 420px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    padding: 12px;
    margin: 0;
    /* Immer dunkler Hintergrund, unabhängig vom Portal-Theme */
}

/* ── Progress Bar ────────────────────────────────────────────────────────── */
.progress-bar { background-color: var(--ld-accent-bg-color); border-radius: var(--ld-radius-pill); }

/* ── Modal (AdwDialog) ───────────────────────────────────────────────────── */
.ld-modal {
    background-color: var(--ld-dialog-bg-color);
    color: var(--ld-dialog-fg-color);
    border: none;
    border-radius: var(--ld-radius-popover);
    box-shadow: var(--ld-dialog-shadow);
    overflow: hidden;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ld-border-color); border-radius: var(--ld-radius-pill); }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, currentColor 40%, transparent); }

/* ── Portal section header ───────────────────────────────────────────────── */
.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ld-space-3);
}
.portal-header h2 { font-weight: 800; font-size: calc(var(--ld-font-size) * 1.81); }  /* Titel 1 */

/* ── Adwaita PreferencesGroup (gerahmte Liste) ──────────────────────────── */
.ld-preferences-group {
    background-color: var(--ld-card-bg-color);
    border: none;
    border-radius: var(--ld-radius-card);
    box-shadow: var(--ld-card-shadow);
    overflow: hidden;
    /* Flex-Kind von .admin-content (column): nicht stauchen lassen, sonst
       schneidet overflow:hidden bei Platzmangel die letzte Zeile ab
       (z.B. "Catch-all:" in der Domains-Karte). admin-content scrollt selbst. */
    flex-shrink: 0;
}

/* Gruppenkopf: fette Überschrift in normaler Schreibweise, keine Versalien
   und keine Sperrung (DESIGN.md). In GNOME steht er ÜBER dem Rahmen; das
   braucht eine andere Vorlagenstruktur und kommt mit den Seitenprojekten.
   Bis dahin liegt er als erste, ruhige Zeile im Rahmen. */
.ld-preferences-header {
    padding: 12px 12px 6px;
    color: var(--ld-card-fg-color);
    font-size: var(--ld-font-size);
    font-weight: 700;
}

/* Aufklappbare Gruppe (<details class="ld-preferences-group">, z. B. /groups):
   der Kopf ist die <summary>, der Pfeil dreht sich beim Öffnen. */
details.ld-preferences-group > summary { list-style: none; cursor: pointer; flex-wrap: nowrap; }
details.ld-preferences-group > summary::-webkit-details-marker { display: none; }
details.ld-preferences-group > summary .ld-abschnitt-pfeil { font-size: .75rem; flex-shrink: 0; transition: transform .2s; }
details.ld-preferences-group[open] > summary .ld-abschnitt-pfeil { transform: rotate(90deg); }
details.ld-preferences-group:not([open]) > summary { padding-bottom: 12px; }
details.ld-preferences-group > summary .ld-abschnitt-text { display: block; font-weight: 400; }

.ld-preferences-row {
    display: flex;
    align-items: center;
    min-height: var(--ld-row-min-height);
    padding: 6px 12px;
    border-bottom: 1px solid var(--row-border);
    gap: var(--ld-space-3);
}
.ld-preferences-row:last-child { border-bottom: none; }
.ld-preferences-row:hover { background-color: color-mix(in srgb, currentColor 3%, transparent); }

/* ── System dashboard ────────────────────────────────────────────────────── */
.sys-icon { font-size: 1.2rem; flex-shrink: 0; width: 20px; text-align: center; }
.sys-bar  { height: 6px; }

/* ── Admin Sidebar Layout ────────────────────────────────────────────────── */
.admin-layout {
    display: flex;
    height: calc(100vh - var(--headerbar-h));
    overflow: hidden;
}

.admin-sidebar {
    width: 220px;
    background: var(--ld-sidebar-bg-color);
    color: var(--ld-sidebar-fg-color);
    border-right: 1px solid var(--ld-sidebar-border-color);
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 8px 0 16px;
}

.admin-sidebar-title {
    padding: 4px 16px 8px;
    font-size: calc(var(--ld-font-size) * .82);
    color: var(--dim-fg);
    font-weight: 700;
}

.admin-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    background: none;
    color: var(--window-fg);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 400;
    border-radius: 0;
    transition: background .1s;
    text-decoration: none;
}

.admin-nav-btn:hover { background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); }

/* Navigation wie die GNOME-Seitenleiste (Projekt 9, 22.10.2026): gerundete
   Zeilen mit Rand, neutrale Auswahl statt Akzentfläche mit weißer Schrift. */
.admin-nav-btn {
    width: calc(100% - 2 * var(--ld-space-2)); margin: 0 var(--ld-space-2);
    min-height: 34px; padding: 0 var(--ld-space-3);
    border-radius: var(--ld-radius-small); color: inherit; font-size: inherit;
}
.admin-nav-btn.active {
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    font-weight: 700;
}

.admin-nav-sep {
    height: 1px;
    background: var(--border);
    margin: 8px 12px;
}

.admin-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-statusstrip {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 6px 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-statusstrip-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .78rem;
    color: var(--dim-fg);
    white-space: nowrap;
}

.admin-statusstrip-item i { font-size: .85rem; }

.admin-statusstrip-val {
    color: var(--window-fg);
    font-weight: 700;
}

.admin-view { display: none; padding: 24px 28px; }
.admin-view.active { display: block; }

@media (max-width: 700px) {
    .admin-layout { flex-direction: column; height: auto; overflow: visible; }
    .admin-sidebar { width: 100%; height: auto; flex-direction: row; flex-wrap: wrap;
                     border-right: none; border-bottom: 1px solid var(--border);
                     padding: 4px 8px; overflow-x: auto; }
    .admin-nav-btn { width: auto; padding: 6px 12px; font-size: .85rem; }
    .admin-sidebar-title, .admin-nav-sep { display: none; }
    .admin-content { overflow-y: visible; }
    .admin-statusstrip { position: static; }
}

/* DNS view reload spin */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .6s linear infinite; display: inline-block; }

/* ── Toast ─────────────────────────────────────────────────────────────────
   Neutral, unten mittig: .ld-toast in den Bausteinen, showToast() in main.js
   leitet auf ldToast() um. */

/* ── ldContextMenu (Rechtsklick-Menü, dark-mode-fähig) ────────────────── */
.ld-ctx-menu {
    position: fixed;
    z-index: 3000;
    min-width: 190px;
    background: var(--ld-popover-bg-color);
    color: var(--ld-popover-fg-color);
    border: none;
    border-radius: var(--ld-radius-popover);
    box-shadow: var(--ld-popover-shadow);
    padding: .3rem;
    font-size: .85rem;
    animation: ld-ctx-in .12s ease-out both;
}
@keyframes ld-ctx-in { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:none; } }
.ld-ctx-item {
    display: flex; align-items: center; gap: .6rem;
    width: 100%;
    padding: .45rem .6rem;
    border: none; background: none;
    color: inherit;
    border-radius: var(--ld-radius-small);
    cursor: pointer;
    text-align: left;
    font: inherit;
    white-space: nowrap;
}
.ld-ctx-item:hover:not(:disabled) { background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); }
.ld-ctx-item:disabled { opacity: .45; cursor: default; }
.ld-ctx-item i { width: 1rem; text-align: center; color: var(--dim-fg); font-size: .95rem; flex: none; }
.ld-ctx-item--danger,
.ld-ctx-item--danger i { color: var(--error-color, var(--destructive-bg)); }
.ld-ctx-sep { height: 1px; background: var(--border); margin: .3rem .25rem; }

/* ── App-Grid (Admin Apps View) ───────────────────────────────────── */
.app-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
@media (min-width: 576px) {
    .app-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .app-grid { grid-template-columns: repeat(3, 1fr); }
}
.app-section-label {
    font-size: var(--ld-font-size);
    font-weight: 700;
    color: var(--ld-window-fg-color);
    margin: 20px 0 8px 2px;
}
/* Sammelliste „Verfügbare Updates" */
.updates-banner {
    background: var(--card-bg);
    border: 1px solid var(--warning-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.updates-banner-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
}
.updates-banner-head #updates-count {
    background: var(--warning-color);
    color: #fff;
    font-size: .7rem;
}
.btn-link-quiet {
    background: none; border: none; color: var(--dim-fg);
    cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.btn-link-quiet:hover { color: var(--fg); background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); }
.updates-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}
.updates-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 2px;
    border-top: 1px solid var(--border);
    font-size: .85rem;
}
.updates-row-name { font-weight: 600; }
.updates-row-ver { color: var(--dim-fg); font-size: .8rem; }
.updates-row-changelog {
    margin-left: auto;
    font-size: .78rem;
    color: var(--accent-color);
    text-decoration: none;
    white-space: nowrap;
}
.updates-row-changelog:hover { text-decoration: underline; }
/* Der Knopf steht immer rechts, auch ohne Changelog-Link davor (HK, 26.10.2026,
   Screenshot: bei den Bridges klebte „Update" an der Version). Steht der Link
   davor, schiebt ER beide nach rechts und der Knopf folgt ihm direkt. */
.updates-row-knopf { margin-left: auto; flex-shrink: 0; }
.updates-row-changelog + .updates-row-knopf { margin-left: 0; }

/* 🔴 Auf dem Handy lief die Zeile aus dem Kasten heraus: `.updates-row` war ein
   starres Flex ohne Umbruch, der App-Name brach auf drei Zeilen um und drückte
   den Update-Knopf über den rechten Rand hinaus (HK, 13.09.2026, Screenshot).
   ⭐ Zwei Ursachen zusammen: es fehlte `flex-wrap`, und ein Flex-Kind bekommt
   ohne `min-width: 0` als Mindestbreite seinen INHALT — der Kasten kann dann
   gar nicht schmaler werden, egal was der Bildschirm sagt.
   Unter 640 px bekommt die Zeile deshalb zwei Ebenen:
     Zeile 1  [Logo] [Name ...........................]
     Zeile 2  [Version] [Changelog]          [Update]  */
.updates-row-name { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .updates-row {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 10px 2px;
    }
    /* Der Name nimmt den Rest der ERSTEN Zeile (Breite minus Logo plus Lücke)
       und erzwingt damit den Umbruch hinter sich. Bekäme stattdessen die
       Version `flex-basis: 100%`, schöbe sie Changelog und Knopf in eine
       dritte Ebene — viel Leerraum für nichts. */
    .updates-row-name { flex: 1 1 calc(100% - 34px); }
    .updates-row-ver  { flex: 0 1 auto; }
    .updates-row-changelog { margin-left: 0; }
    .updates-row-changelog + .updates-row-knopf { margin-left: auto; }
}

/* Changelog-Ampel in der Sammelliste und Fortschritt von „Alle aktualisieren" */
.ampel-punkt {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
}
.ampel-knopf {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 1px solid var(--border); border-radius: 999px;
    padding: 2px 8px; color: var(--dim-fg); font-size: .75rem; cursor: pointer;
}
.ampel-knopf:disabled { cursor: default; border-color: transparent; }
.ampel-knopf:not(:disabled):hover { background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); }
.ampel-details {
    padding: 4px 2px 10px 34px;
    font-size: .8rem;
}
.ampel-funde { list-style: none; margin: 0 0 6px; padding: 0; max-height: 240px; overflow-y: auto; }
.ampel-funde li {
    display: flex; align-items: baseline; gap: 8px; padding: 2px 0;
}
.ampel-funde .ampel-punkt { width: 8px; height: 8px; transform: translateY(-1px); }
.ampel-fund-ver { white-space: nowrap; font-family: ui-monospace, 'Adwaita Mono', monospace; font-size: .75rem; }
.ampel-fund-ver a { color: var(--accent-color); text-decoration: none; }
.ampel-fund-ver a:hover { text-decoration: underline; }
.ampel-fund-text { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.ampel-gelesen { display: flex; align-items: center; gap: 8px; margin-top: 4px; cursor: pointer; }
.updates-banner-head #updates-alle-btn {
    background: var(--accent-color); color: #fff; border: none; font-size: .8rem;
    white-space: nowrap;
}
.updates-banner-head #updates-alle-btn:disabled { opacity: .45; }
.sammel-liste { display: flex; flex-direction: column; }
.sammel-zeile {
    display: flex; align-items: center; gap: 8px; padding: 5px 0;
    border-top: 1px solid var(--border); font-size: .85rem; flex-wrap: wrap;
}
.sammel-name { font-weight: 600; }
.sammel-zeile[data-zustand="ok"] .sammel-icon { color: var(--success-color); }
.sammel-zeile[data-zustand="fehler"] .sammel-icon,
.sammel-zeile[data-zustand="fehler"] .sammel-text { color: var(--error-color); }
.sammel-zeile[data-zustand="offen"] .sammel-icon { color: var(--warning-color); }
.sammel-zeile[data-zustand="aus"] { color: var(--dim-fg); }
.sammel-dreht { display: inline-block; animation: sammel-dreh 1s linear infinite; }
@keyframes sammel-dreh { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
    .ampel-details { padding-left: 2px; }
    .updates-banner-head { flex-wrap: wrap; }
}

.app-card {
    background: var(--ld-card-bg-color);
    border: none;
    border-radius: var(--ld-radius-card);
    box-shadow: var(--ld-card-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.app-card.available {
    border: 1.5px dashed var(--border);
    box-shadow: none;
    background: transparent;
    opacity: 0.72;
}
.app-card-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
}
.app-card .app-card-logo-row {
    min-width: 0;
    overflow: hidden;
}
.app-card .app-card-logo-row .min-w-0 {
    min-width: 0;
    overflow: hidden;
}
.app-card .caption.dimmed {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* == Apps tab switcher (Phase 4, D-12/D-13/D-14) ========================= */
.apps-tab-btn {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--dim-fg);
    padding: 0.25rem 1rem 0.5rem;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.apps-tab-btn.active {
    color: var(--window-fg);
    border-bottom-color: var(--accent-bg);
    font-weight: 700;
}

/* == Notification badge (Phase 4, D-18) =================================== */
.notif-badge {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--accent-fg);
    font-size: .6rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
}

/* ── Abschnittsnavigation für Einstellungsseiten ───────────────────────────
   🔴 Diese Regeln standen bis zum 06.09.2026 NUR im <style>-Block von
   templates/einstellungen/index.html. Die Admin-Ansicht „App-Einstellungen"
   benutzt dieselben Klassennamen, lädt aber jenes Template nie — die Knöpfe
   flossen dort als Inline-Elemente nebeneinander und brachen um. Deshalb
   gehören sie ins gemeinsame Stylesheet: Wer eine Klasse an zwei Stellen
   verwendet, muss sie an einer dritten definieren, die beide laden. */
.es-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr);
             gap: 24px; align-items: start }
.es-nav { display: flex; flex-direction: column; gap: 2px; position: sticky;
          top: calc(var(--ld-headerbar-height, 47px) + 12px) }   /* unter der Kopfleiste */
.es-nav-knopf { display: flex; align-items: center; gap: 9px; text-align: left;
                border: 0; background: transparent; color: inherit; font: inherit;
                padding: 8px 12px; border-radius: 9px; cursor: pointer;
                white-space: nowrap; width: 100% }
.es-nav-knopf:hover { background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent) }
.es-nav-knopf.aktiv { background: color-mix(in srgb, currentColor var(--ld-button-mix), transparent); font-weight: 700 }
.es-nav-knopf i { opacity: .7; width: 1.1em; text-align: center }
/* Schmale Geräte: Leiste nach oben, waagerecht rollend. Stand bis 23.10.2026 nur
   in einstellungen/index.html, /geraete blieb auf dem Handy zweispaltig. */
@media (max-width: 760px) {
    .es-layout { grid-template-columns: minmax(0, 1fr); gap: 14px }
    .es-nav { flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px }
    .es-nav-knopf { width: auto }
}

/* Unterpunkte der Einstellungs-Navigation: eingerückt, kleiner, ruhiger —
   sie sollen als Teil ihres Abschnitts lesbar sein, nicht mit ihm konkurrieren. */
.es-nav-knopf.es-unter-knopf { padding-left: 34px; font-size: .92em; opacity: .85 }
.es-nav-knopf.es-unter-knopf.aktiv { opacity: 1 }
/* Schmal steht die Leiste waagerecht: Unterpunkte dort ohne Einzug. */
@media (max-width: 760px) { .es-nav-knopf.es-unter-knopf { padding-left: 12px } }

/* „Über LibreDesk“ (base.html, #ld-ueber): Kopf wie AdwAboutDialog — Zeichen,
   Name und Version mittig, darunter zwei Listen. */
#ld-ueber { width: min(380px, calc(100vw - 32px)); }
.ld-ueber { display: flex; flex-direction: column; gap: var(--ld-space-4, 18px); }
.ld-ueber-kopf { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ld-ueber-kopf .brand-icon.is-light { display: block; }
[data-bs-theme="dark"] .ld-ueber-kopf .brand-icon.is-light { display: none; }
[data-bs-theme="dark"] .ld-ueber-kopf .brand-icon.is-dark { display: block; }
.ld-ueber-kopf h3 { margin: 6px 0 0; }
/* Angabezeilen: Titel bleibt ganz, ein langer Domainname bricht rechts um. */
.ld-ueber .ld-row:not(.activatable) > .ld-row-text { flex: 0 0 auto; }
.ld-ueber .ld-row:not(.activatable) > .ld-row-suffix { flex: 1 1 auto; min-width: 0; justify-content: flex-end;
                                                       text-align: end; overflow-wrap: anywhere; }
.ld-ueber-version { padding: 2px 12px; border-radius: var(--ld-radius-pill);
                    color: var(--ld-accent-color); font-weight: 600;
                    background: color-mix(in srgb, var(--ld-accent-color) 12%, transparent); }

/* ── Akzentfarbe wählen (Einstellungen › Darstellung) ────────────────────
   Neun runde Felder wie in GNOME Einstellungen › Darstellung. Die Farbe
   kommt über den Wert des Auswahlknopfs, nicht über style="…" (das sperrt
   die CSP im Testportal). Gewählt: Ring im Fenstergrund und in der Farbe. */
.ld-akzent-zeile { flex-wrap: wrap; }
.ld-akzent-zeile > :first-child { flex: 1 1 200px; }
.ld-akzent-wahl { display: flex; flex-wrap: wrap; gap: 9px; padding: var(--ld-space-2) var(--ld-space-1); }
@media (max-width: 400px) { .ld-akzent-wahl { gap: 6px; } }   /* neun Felder in einer Reihe auch auf dem Telefon */
.ld-akzent-farbe {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--ld-akzent);
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow var(--ld-duration) var(--ld-ease);
}
.ld-akzent-farbe:checked {
    /* --card-bg statt --ld-card-bg-color: dunkel ist die Karte durchsichtig,
       der Abstandsring wäre dann unsichtbar */
    box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--ld-akzent);
}
.ld-akzent-farbe:focus-visible {
    outline: var(--ld-focus-ring-width) solid color-mix(in srgb, var(--ld-akzent) 60%, transparent);
    outline-offset: 6px;
}
.ld-akzent-farbe[value="blue"]   { --ld-akzent: var(--ld-accent-blue); }
.ld-akzent-farbe[value="teal"]   { --ld-akzent: var(--ld-accent-teal); }
.ld-akzent-farbe[value="green"]  { --ld-akzent: var(--ld-accent-green); }
.ld-akzent-farbe[value="yellow"] { --ld-akzent: var(--ld-accent-yellow); }
.ld-akzent-farbe[value="orange"] { --ld-akzent: var(--ld-accent-orange); }
.ld-akzent-farbe[value="red"]    { --ld-akzent: var(--ld-accent-red); }
.ld-akzent-farbe[value="pink"]   { --ld-akzent: var(--ld-accent-pink); }
.ld-akzent-farbe[value="purple"] { --ld-akzent: var(--ld-accent-purple); }
.ld-akzent-farbe[value="slate"]  { --ld-akzent: var(--ld-accent-slate); }

/* ── Signatur-Editor ───────────────────────────────────────────────────────
   Werkzeugleiste über einem contenteditable. Bewusst schlicht: Die Signatur
   soll aussehen wie in der Mail, nicht wie in einem Textverarbeitungsfenster. */
.sg-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
             padding: 6px; border: 1px solid var(--ld-border-color);
             border-bottom: 0; border-radius: 8px 8px 0 0;
             background: color-mix(in srgb, var(--ld-window-fg-color) 5%, var(--ld-window-bg-color)) }
.sg-leiste button { border: 0; background: transparent; color: inherit;
                    border-radius: 6px; padding: 4px 9px; cursor: pointer;
                    line-height: 1.2; min-width: 30px }
.sg-leiste button:hover { background: color-mix(in srgb, var(--ld-window-fg-color) var(--ld-button-mix), var(--ld-window-bg-color)) }
.sg-leiste select { border: 1px solid var(--ld-border-color); background: transparent;
                    color: inherit; border-radius: 6px; padding: 3px 6px; font-size: .9em }
.sg-trenner { width: 1px; height: 20px; background: var(--ld-border-color); margin: 0 3px }
.sg-farbe { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
            padding: 4px 7px; border-radius: 6px }
.sg-farbe:hover { background: color-mix(in srgb, var(--ld-window-fg-color) var(--ld-button-mix), var(--ld-window-bg-color)) }
.sg-farbe input[type=color] { width: 22px; height: 22px; border: 0; padding: 0;
                              background: transparent; cursor: pointer }
.sg-linkzeile { display: flex; gap: 6px; align-items: center; padding: 6px;
                border: 1px solid var(--ld-border-color); border-bottom: 0;
                background: color-mix(in srgb, var(--ld-window-fg-color) 5%, var(--ld-window-bg-color)) }
.sg-rich { min-height: 210px; border-radius: 0 0 8px 8px; overflow: auto;
           padding: 10px 12px; background: var(--ld-window-bg-color) }
.sg-rich:focus { outline: 0; box-shadow: none }
/* Platzhalter als unteilbare Marke — sonst zerreisst jede Formatierung, die
   ueber ein {{...}} laeuft, den Namen in zwei Haelften. */
.sg-ph { background: rgba(19,76,149,.12); border-radius: 5px; padding: 0 4px;
         white-space: nowrap; font-family: inherit }

/* ── Eigene Layoutklassen statt Bootstrap-Hilfsklassen (Projekt 12, Weg B) ─────
   Wenige, benannte Bausteine statt d-flex/mb-2/gap-2 … Abstände kommen aus den
   Behältern (Zeilen, Gruppen), nicht aus Rändern an jedem Element. */
.ld-reihe   { display: flex; align-items: center; gap: var(--ld-space-2); flex-wrap: wrap; }
.ld-reihe.ende     { justify-content: flex-end; }
.ld-reihe.verteilt { justify-content: space-between; }
.ld-spalte  { display: flex; flex-direction: column; gap: var(--ld-space-2); }
.ld-wachsen { flex: 1 1 auto; min-width: 0; }
.ld-volle-breite { width: 100%; }
.ld-mittig  { text-align: center; }
.ld-block   { display: block; }
.ld-text-fehler  { color: var(--ld-error-color); }
.ld-text-erfolg  { color: var(--ld-success-color); }
.ld-text-warnung { color: var(--ld-warning-color); }
.ld-clamp > .ld-preferences-group + .ld-preferences-group,
.ld-clamp > * + .ld-preferences-group { margin-top: var(--ld-space-5); }
.ld-preferences-row p { margin: 0; }
.ld-preferences-row > .ld-wachsen > * + * { margin-top: 2px; }
.ld-reihe > .ld-entry { flex: 1 1 12rem; width: auto; }
.ld-preferences-row > .ld-button { flex-shrink: 0; }
.ld-preferences-row.senkrecht { flex-direction: column; align-items: flex-start; gap: var(--ld-space-1); padding-block: var(--ld-space-2); }
a.ld-button { text-decoration: none; }
.ld-clamp > * + .ld-reihe { margin-top: var(--ld-space-3); }
.ld-clamp > * + p, .ld-clamp > p + * { margin-top: var(--ld-space-3); }
a.ld-preferences-row { text-decoration: none; color: inherit; }
.ld-preferences-group > p { margin: 0; padding: var(--ld-space-2) var(--ld-space-3) 0; }

/* ── Formulare, Raster, Tabellen ohne Bootstrap (Projekt 12, Weg B) ────────
   Beschriftung über dem Feld, Felder im Raster, Häkchen-Zeilen, Pillen. */
.ld-feld    { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ld-label   { font-size: calc(var(--ld-font-size) * .82); font-weight: 700; color: var(--dim-fg); margin: 0; }
.ld-hilfe   { font-size: calc(var(--ld-font-size) * .82); color: var(--dim-fg); margin: 0; }
.ld-raster  { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--ld-space-3); }
.ld-raster > .ganz { grid-column: 1 / -1; }
.ld-entry.ld-volle-breite, .ld-feld > .ld-entry { width: 100%; }
.ld-pille   { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--ld-radius-pill);
              font-size: .78em; font-weight: 700; padding: .2em .65em; line-height: 1.4; white-space: nowrap;
              background: color-mix(in srgb, currentColor 10%, transparent); }
.ld-pille.akzent  { background: color-mix(in srgb, var(--ld-accent-bg-color) 18%, transparent); color: var(--ld-accent-color); }
.ld-pille.erfolg  { background: color-mix(in srgb, var(--ld-success-bg-color) 18%, transparent); color: var(--ld-success-color); }
.ld-pille.warnung { background: color-mix(in srgb, var(--ld-warning-bg-color) 22%, transparent); color: var(--ld-warning-color); }
.ld-pille.fehler  { background: color-mix(in srgb, var(--ld-error-bg-color) 15%, transparent); color: var(--ld-error-color); }
.ld-tabelle-rahmen { overflow-x: auto; }
.ld-tabelle { width: 100%; border-collapse: collapse; }
.ld-tabelle th, .ld-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--ld-border-color); text-align: left; vertical-align: middle; }
.ld-tabelle th { font-weight: 700; color: var(--dim-fg); }
.ld-tabelle.gitter th, .ld-tabelle.gitter td { border: 1px solid var(--ld-border-color); }
.ld-fett    { font-weight: 700; }
.ld-versteckt { display: none !important; }
.ld-hinweis { border-radius: var(--ld-radius-card); padding: var(--ld-space-2) var(--ld-space-3);
              background: color-mix(in srgb, currentColor 8%, transparent); }
.ld-hinweis.akzent  { background: color-mix(in srgb, var(--ld-accent-bg-color) 15%, transparent); }
.ld-hinweis.erfolg  { background: color-mix(in srgb, var(--ld-success-bg-color) 18%, transparent); }
.ld-hinweis.warnung { background: color-mix(in srgb, var(--ld-warning-bg-color) 22%, transparent); }
.ld-hinweis.fehler  { background: color-mix(in srgb, var(--ld-error-bg-color) 15%, transparent); }
.ld-abstand-oben { margin-top: var(--ld-space-5); }
.ld-abstand-unten { margin-bottom: var(--ld-space-5); }
.ld-rechts { text-align: right; }
.ld-check-zeile { display: flex; align-items: flex-start; gap: var(--ld-space-2); cursor: pointer; margin: 0; }
.ld-check-zeile > .ld-check, .ld-check-zeile > .ld-switch { margin-top: 1px; }
.ld-check-zeile > label { cursor: pointer; margin: 0; }
.ld-check[type="radio"] { border-radius: 50%; }
.ld-check[type="radio"]:checked::after { -webkit-mask: none; mask: none; inset: 6px; border-radius: 50%; }
/* Vorschlagsliste unter einem Suchfeld (Ortssuche) */
.ld-vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 4px); padding: 4px;
    background: var(--ld-popover-bg-color, var(--ld-card-bg-color)); border-radius: var(--ld-radius-popover, 12px);
    box-shadow: var(--ld-popover-shadow, 0 2px 8px rgb(0 0 0 / 20%)); }
.ld-vorschlag { display: flex; align-items: center; gap: var(--ld-space-2); width: 100%; border: none; background: none;
    color: inherit; font: inherit; text-align: left; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.ld-vorschlag:hover, .ld-vorschlag:focus-visible { background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); outline: none; }
/* Entfernbare Marke (Gruppe am Benutzer), wie ein GNOME-Tag */
.ld-chip { font-size: .82rem; font-weight: 500; padding: 2px 4px 2px 10px; }
.ld-chip > .ld-icon { opacity: .6; }
.ld-chip-weg { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: none;
    border-radius: 50%; background: none; color: inherit; opacity: .7; cursor: pointer; padding: 0; }
.ld-chip-weg:hover { opacity: 1; background: color-mix(in srgb, currentColor var(--ld-hover-mix), transparent); }
.ld-chip-weg > .ld-icon { width: 12px; height: 12px; }
.ld-listeneintrag { padding: var(--ld-space-3); }
.ld-listeneintrag + .ld-listeneintrag, .ld-preferences-group + .ld-listeneintrag { margin-top: var(--ld-space-2); }
.ld-zeile-erfolg > td { background: color-mix(in srgb, var(--ld-success-bg-color) 15%, transparent); }
.portal-header h2.ld-reihe { gap: var(--ld-space-2); }
.ld-raster > div > .ld-label, .ld-raster > .ld-label { display: block; margin-bottom: 4px; }
.ld-raster > div > .ld-entry { width: 100%; }
label.ld-label.ld-reihe { display: flex; margin-bottom: 4px; }
.ld-icon.gross  { width: 64px; height: 64px; }
.ld-icon.mittel { width: 32px; height: 32px; }
/* Öffentliche Seiten für Gäste (Buchung, Abstimmung): Karte mittig auf Fensterfläche */
body.ld-gast { margin: 0; min-height: 100vh; background: var(--ld-window-bg-color); color: var(--ld-window-fg-color); padding: var(--ld-space-3); }
.ld-gast-karte { margin: var(--ld-space-6) auto; background: var(--ld-card-bg-color); color: var(--ld-card-fg-color);
    border-radius: var(--ld-radius-popover); box-shadow: var(--ld-card-shadow); }
@media (max-width: 720px) { .ld-gast-karte { margin: var(--ld-space-3) auto; } }
/* Felder in Einstellungszeilen füllen die Zeile (wie AdwEntryRow), Abstand zwischen Gruppen */
.ld-preferences-row > .ld-entry { flex: 1 1 auto; min-width: 0; }
.ld-preferences-row > label + .ld-reihe { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.ld-preferences-group ~ .ld-preferences-group { margin-top: var(--ld-space-4); }
.portal-header { margin-bottom: var(--ld-space-4); }
.ld-reihe + .ld-preferences-group { margin-top: var(--ld-space-3); }
/* 12er-Raster mit festen Anteilen (statt Bootstrap row/col-N): style="--sp:7",
   ab 992 px optional anderer Anteil mit --sp-lg. Unter 576 px alles volle Breite. */
.ld-raster.zwoelf { grid-template-columns: repeat(12, minmax(0, 1fr)); --sp: initial; --sp-lg: initial; }
.ld-raster.zwoelf > * { grid-column: span var(--sp, 12); min-width: 0; }
@media (min-width: 992px) { .ld-raster.zwoelf > * { grid-column: span var(--sp-lg, var(--sp, 12)); } }
@media (max-width: 575px) { .ld-raster.zwoelf > * { grid-column: 1 / -1; } }
.ld-preferences-group.innen { padding: var(--ld-space-3); }
.ld-preferences-group.innen > p { padding: 0; margin-top: 4px; }
.heading > .ld-icon:first-child, .ld-preferences-header > .ld-icon:first-child { margin-right: 6px; }
.ld-preferences-group + .ld-raster, .ld-raster + .ld-preferences-group, .ld-raster + .ld-raster { margin-top: var(--ld-space-3); }
.ld-raster > div > .ld-preferences-group + .ld-preferences-group { margin-top: var(--ld-space-3); }
/* Feld unter seiner Beschriftung volle Breite (wie früher .form-control) */
label + .ld-entry, label + textarea.ld-entry, label + select.ld-entry { display: block; width: 100%; }
h1 > .ld-icon:first-child, h2 > .ld-icon:first-child { margin-right: 8px; }
.ld-preferences-row > .ld-wachsen > .ld-reihe { margin-top: 6px; }
.ld-kuerzen { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ld-nowrap { white-space: nowrap; }
.ld-linie-unten { border-bottom: 1px solid var(--ld-border-color); padding-block: 4px; }
.ld-umbruch { word-break: break-all; }
.ld-vorschlaege:empty { display: none; }
.ld-bezug { position: relative; }
.ld-clamp.breit { max-width: 1320px; }
.ld-preferences-group.innen > * + * { margin-top: var(--ld-space-2); }
/* Neuer Abschnitt (früher h… mit mt-4/mt-5) */
.ld-abschnitt { margin-top: var(--ld-space-6) !important; }
.ld-preferences-group + .ld-tabelle-rahmen, .ld-preferences-group + table { margin-top: var(--ld-space-4); }
.ld-linie-unten:last-child { border-bottom: none; }
/* Formular um Körper und Fuß eines Dialogs: darf das Layout nicht brechen */
.ld-dialog > form { display: contents; }
/* ── Kachelraster der Startseite (statt row/row-cols/col) ─────────────── */
.ld-kacheln { display: grid; gap: var(--ld-space-3); grid-template-columns: 1fr; }
.ld-kacheln > .ganz { grid-column: 1 / -1; }
.ld-kacheln > * > .ld-card { height: 100%; }
@media (min-width: 576px)  { .ld-kacheln.heute { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ld-kacheln.heute { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 768px)  { .ld-kacheln.apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .ld-kacheln.apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ld-kacheln.apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ld-kachel-inhalt { padding: var(--ld-space-3); }
.ld-kachel-inhalt.spalte { display: flex; flex-direction: column; height: 100%; }
.ld-kachel-inhalt.app { display: flex; flex-direction: column; align-items: center; text-align: center;
    height: 100%; padding: var(--ld-space-5) var(--ld-space-3) var(--ld-space-3); }
/* Ganze Kachel als Verweis (statt Bootstrap stretched-link) */
.ld-kachel-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ld-ecke { position: absolute; }
.ld-ecke.oben-rechts  { top: var(--ld-space-3); right: var(--ld-space-3); }
.ld-ecke.oben-links   { top: var(--ld-space-3); left: var(--ld-space-3); }
.ld-ecke.unten-rechts { bottom: var(--ld-space-2); right: var(--ld-space-2); }
.ld-rechtsbuendig { margin-left: auto; }
.ld-kachel-titel { color: var(--ld-window-fg-color); font-weight: 700; font-size: var(--ld-font-size); margin: 0 0 4px; }
.ld-kachel-text  { color: var(--dim-fg); font-size: calc(var(--ld-font-size) * .9); margin: 0; }
input[type="range"] { accent-color: var(--ld-accent-bg-color); }
.ld-ohne-linie, .ld-ohne-linie:hover { text-decoration: none; }
.ld-kachel-inhalt > :first-child:not(:only-child) { margin-bottom: var(--ld-space-2); }
.ld-zeile-aktiv > td { background: color-mix(in srgb, var(--ld-accent-bg-color) 12%, transparent); }
/* Seitenblatt (statt Bootstrap offcanvas-end): Dialog rechts, volle Höhe */
.ld-dialog.ld-seitenblatt { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(640px, 100vw);
    border-radius: var(--ld-radius-popover) 0 0 var(--ld-radius-popover); }
.ld-menu-item.disabled { opacity: var(--ld-disabled-opacity); pointer-events: none; }
/* Hauptbereich (statt Bootstrap container-xl py-4) */
.ld-haupt { width: 100%; max-width: 1320px; margin-inline: auto; padding: 1.5rem .75rem; }
@media (min-width: 1200px) and (max-width: 1399px) { .ld-haupt { max-width: 1140px; } }
.ld-haupt-voll { padding: 0; }
.ld-haupt-fluessig { width: 100%; padding: 1rem; }
.ld-notif-zeile { align-items: flex-start; flex-wrap: nowrap; padding: 8px 16px; }