/* ============================================================
   Flux-Referenz 23.09.2026 (Nutzer-Wunsch: "immer mit dem Framework
   arbeiten", siehe Memory lemon-booking-flux-design-referenz-23092026) —
   Sidebar + Suche. Werte 1:1 aus dem echten Flux-Quellcode ausgelesen
   (src/components/dashboard/sidebar.tsx + globals.css), angewendet auf
   ALPINOOS EIGENE, ECHTE Filament-CSS-Klassen (fi-sidebar-*/fi-global-
   search — aus Filaments Vendor-Blade-Templates ausgelesen, nicht
   geraten). Flux' eigene .tsx-Klassen/DOM sind hier bewusst NICHT
   gemeint/kopiert — die DOM-Struktur ist komplett anders (React/shadcn
   vs. Filament/Livewire), nur die reinen Design-WERTE sind übertragbar.

   V2 (23.09.2026, nach erstem Screenshot-Vergleich zu zaghaft): präzisere
   Werte statt grober Schätzung — Icon-Größe 18px (Flux: h-[18px] w-[18px],
   Filament-Standard war 24px), Radius 1.125rem (Flux' "rounded-xl" im
   eigenen Theme = --radius(0.875rem) + 4px, nicht --radius selbst),
   Gruppen-Label 10px/Gewicht 600/Tracking 0.1em/Deckkraft NUR 25% (Flux
   ist dort sehr zurückhaltend, vorher zu gut lesbar/kräftig gesetzt).

   Bewusst als eigene, statische CSS-Datei (nicht in theme.css/Vite):
   der Server hat kein node/npm zum Kompilieren, und diese Regeln
   brauchen ohnehin kein Tailwind (kein @apply, keine neuen Utility-
   Klassen) — reines CSS, per <link> im AppPanelProvider eingebunden
   (siehe PanelsRenderHook::HEAD_END), ohne jeden Build-Schritt wirksam.
   NUR im App-Panel geladen, das gemeinsame polish.css/Admin-Panel
   bleiben unverändert (dort nicht angefragt).
   ============================================================ */

@keyframes flux-slide-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Sidebar-Kopf: echtes Frosted-Glass statt der bisherigen leichten
   Unschärfe (siehe polish.css .fi-topbar) — Flux' "flux-frosted". */
.fi-sidebar-header {
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    background-color: rgb(255 255 255 / 0.85) !important;
}
:is(.dark .fi-sidebar-header) {
    background-color: rgb(24 24 27 / 0.85) !important;
}

/* Gruppen-Label: Flux nutzt text-[10px] font-semibold uppercase
   tracking-widest text-sidebar-foreground/25 — SEHR zurückhaltend,
   fast unsichtbar, keine "normal lesbare graue Überschrift". */
.fi-sidebar-group-label {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    opacity: 0.32 !important;
}

/* Icons: Flux h-[18px] w-[18px], Filaments Standard ist h-6 w-6 (24px)
   — spürbar kleiner/zurückhaltender, weniger "klobig". */
.fi-sidebar-item-icon {
    height: 1.125rem !important;
    width: 1.125rem !important;
}

/* Menüpunkte: Flux "rounded-xl" im eigenen Theme = 1.125rem (--radius
   0.875rem + 4px), nicht --radius selbst — plus etwas mehr horizontales
   Innenpolster (Flux px-3, Filament-Standard px-2). */
.fi-sidebar-item-button {
    border-radius: 1.125rem !important;
    padding-inline: 0.75rem !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Aktiver Menüpunkt: farbiger Streifen links (Flux' echte
   ".flux-active-indicator"-Regel aus globals.css, hier per Nutzer
   nochmal exakt bestätigt: left:0, top/bottom 4px, width 3px) + sehr
   helle Flächentönung (Flux: bg-sidebar-accent, ein kaum wahrnehmbarer
   Lavendel-Hauch) statt kräftiger Farbe. Icon/Text in der Aktiv-Farbe
   (Flux: text-sidebar-primary), inaktiv nur 60%/40% Deckkraft. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    position: relative;
    background: rgb(var(--primary-500, 59 130 246) / 0.07) !important;
    color: rgb(var(--primary-600, 37 99 235)) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: rgb(var(--primary-500, 59 130 246));
}
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: rgb(var(--primary-600, 37 99 235)) !important;
}
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button {
    opacity: 0.75;
}
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    opacity: 1;
}

/* Sidebar-Ein-/Ausklapp-Button: Flux zeigt ihn als frei schwebenden
   Kreis am rechten Sidebar-Rand (rounded-full, border, shadow-sm,
   24px), Filament sitzt er fix in der Kopfzeile — DOM-Position bewusst
   nicht angetastet (Vendor-Blade-Fork wäre nötig, riskanter als der
   optische Nutzen hier rechtfertigt), aber gleiche Kreis-Optik. */
.fi-sidebar-header .fi-icon-btn {
    border-radius: 9999px !important;
    border: 1px solid rgb(var(--gray-200, 229 231 235)) !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05) !important;
}
:is(.dark .fi-sidebar-header .fi-icon-btn) {
    border-color: rgb(var(--gray-700, 55 65 81)) !important;
}

/* Gruppen-Aufklapp-Pfeil + Sidebar-Ein-/Ausklapp-Button: weichere,
   längere Dreh-Animation statt Filaments Standard-"Sprung". */
.fi-sidebar-group-collapse-button svg,
.fi-sidebar-header .fi-icon-btn svg {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Suche (Cmd+K): runde "Pill"-Eingabe statt eckigem Feld, sanftes
   Einblenden der Ergebnisliste statt hartem Erscheinen — wie Flux'
   Command-Palette. */
.fi-global-search input {
    border-radius: 9999px !important;
}
.fi-global-search-results-ctn {
    animation: flux-slide-in-up 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Benachrichtigungen/Postfach ("Mail") — Nutzer-Vorbild
   https://flux.dashboardpack.com/mail. Die Seite ist STRUKTURELL schon
   an Flux angelehnt (siehe Benachrichtigungen.php/benachrichtigungen.
   blade.php-Kommentare: Sidebar mit Ordnern+Kanälen, Listen-Karten,
   Detail-Panel) — hier NUR Feintuning der Werte aus dem echten
   src/app/(dashboard)/mail/page.tsx (EmailRow/MailSidebar/MailToolbar),
   analog zur Sidebar oben. polish.css selbst NICHT geändert (kein
   Build möglich) — Überschreibungen hier, gewinnen weil diese Datei
   NACH dem Vite-Bundle geladen wird.
   ============================================================ */

/* Korrektur (Nutzer hat das echte gerenderte DOM von /mail geschickt):
   dort GAR KEIN Aktiv-Streifen in der Ordner-Sidebar, nur eine reine
   Flächenfarbe (bg-accent) — anders als die Hauptnavigation. Erster
   Versuch hatte fälschlich den Streifen übernommen, hier entfernt. */
.lb-notif-sidebar-item,
.lb-notif-kanal-item {
    border-radius: 0.5rem !important;
}
.lb-notif-sidebar-item.is-active,
.lb-notif-kanal-item.is-active {
    background: rgb(var(--gray-100, 243 244 246)) !important;
}
:is(.dark .lb-notif-sidebar-item.is-active),
:is(.dark .lb-notif-kanal-item.is-active) {
    background: rgb(var(--gray-800, 31 41 55)) !important;
}

/* Korrektur: im echten DOM sitzen Sidebar UND Listen-Bereich als EINE
   gemeinsame Karte nebeneinander (ein Rahmen/Schatten, mit einer
   Trennlinie dazwischen) — bisher zwei GETRENNTE Karten mit Lücke
   dazwischen. */
.lb-notif-shell {
    gap: 0 !important;
    border-radius: 0.75rem;
    border: 1px solid rgb(var(--gray-200, 229 231 235));
    background: rgb(var(--white, 255 255 255));
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    overflow: hidden;
}
:is(.dark .lb-notif-shell) {
    background: rgb(var(--gray-900, 17 24 39));
    border-color: rgb(var(--gray-700, 55 65 81));
}
.lb-notif-sidebar {
    border-radius: 0 !important;
    border: none !important;
    border-inline-end: 1px solid rgb(var(--gray-200, 229 231 235)) !important;
    background: transparent !important;
}
:is(.dark .lb-notif-sidebar) {
    border-inline-end-color: rgb(var(--gray-700, 55 65 81)) !important;
}
.lb-notif-main {
    padding: 1rem 1.25rem;
}
/* Die Listen-Box selbst hatte bisher einen EIGENEN Rahmen (Blade nutzt
   "fi-section ... border ..." + lb-notif-list zusammen) — jetzt, wo sie
   in der gemeinsamen Karte oben steckt, sonst eine "Box-in-der-Box"-
   Optik statt EINER durchgehenden Fläche wie im echten Flux-DOM. */
.lb-notif-list {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Mail-Detailansicht (ersetzt jetzt die Liste komplett, siehe
   benachrichtigungen.blade.php-Kommentar "Redesign 23.09.2026") — Werte
   1:1 aus Flux' EmailView (mail/page.tsx). */
.lb-mail-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.lb-mail-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgb(var(--gray-200, 229 231 235));
    padding: 0.75rem 1rem;
}
:is(.dark .lb-mail-detail-header) { border-bottom-color: rgb(var(--gray-700, 55 65 81)); }
.lb-mail-detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    color: rgb(var(--gray-500, 107 114 128));
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}
.lb-mail-detail-back:hover { background: rgb(var(--gray-100, 243 244 246)); }
:is(.dark .lb-mail-detail-back:hover) { background: rgb(var(--gray-800, 31 41 55)); }
.lb-mail-detail-subject {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgb(var(--gray-950, 3 7 18));
}
:is(.dark .lb-mail-detail-subject) { color: rgb(var(--gray-50, 249 250 251)); }

/* Nachtrag 24.09.2026 (Nutzer-Fund "labels sind noch schirch" — Buchungsnr.
   + KI-beantwortet-Badges neben Betreff/Titel): waren bisher rohe, unan-
   gepasste <x-filament::badge>-Komponenten (rounded-md + ring-1 ring-inset,
   siehe vendor/filament/support/.../badge.blade.php) — wirkten kantig/
   altbacken neben dem neuen, weichen Flux-Header. Ersetzt durch Flux'
   eigenes weiches Pill-Muster (siehe command-palette.tsx/sidebar.tsx:
   "rounded-full ... px-1.5 text-[10px] font-semibold", Ton-in-Ton-
   Hintergrund statt Ring-Rand). Gilt für BEIDE Stellen, an denen dieselbe
   Badge-Kombination vorkommt: Mail-Detailkopf (.lb-mail-detail-header)
   UND Listenzeile (.lb-notif-title). */
.lb-mail-detail-header .fi-badge,
.lb-notif-title .fi-badge {
    border-radius: 9999px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.1875rem 0.5625rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}
.lb-mail-detail-header .fi-badge .fi-badge-icon,
.lb-notif-title .fi-badge .fi-badge-icon {
    height: 0.75rem !important;
    width: 0.75rem !important;
}
.lb-mail-detail-header .fi-badge.fi-color-gray,
.lb-notif-title .fi-badge.fi-color-gray {
    background: rgb(var(--gray-100, 243 244 246)) !important;
    color: rgb(var(--gray-600, 75 85 99)) !important;
}
:is(.dark .lb-mail-detail-header .fi-badge.fi-color-gray),
:is(.dark .lb-notif-title .fi-badge.fi-color-gray) {
    background: rgb(var(--gray-700, 55 65 81)) !important;
    color: rgb(var(--gray-300, 209 213 219)) !important;
}
.lb-mail-detail-header .fi-badge.fi-color-info,
.lb-notif-title .fi-badge.fi-color-info {
    background: rgb(14 165 233 / 0.12) !important;
    color: rgb(2 132 199) !important;
}
:is(.dark .lb-mail-detail-header .fi-badge.fi-color-info),
:is(.dark .lb-notif-title .fi-badge.fi-color-info) {
    background: rgb(56 189 248 / 0.15) !important;
    color: rgb(125 211 252) !important;
}
.lb-mail-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}
.lb-mail-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.lb-mail-message-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgb(var(--gray-100, 243 244 246));
    color: rgb(var(--gray-600, 75 85 99));
}
.lb-mail-message.is-ausgehend .lb-mail-message-avatar {
    background: rgb(var(--primary-500, 59 130 246) / 0.12);
    color: rgb(var(--primary-600, 37 99 235));
}
:is(.dark .lb-mail-message-avatar) { background: rgb(var(--gray-800, 31 41 55)); color: rgb(var(--gray-300, 209 213 219)); }
.lb-mail-message-content { flex: 1; min-width: 0; }
.lb-mail-message-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.lb-mail-message-from {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--gray-950, 3 7 18));
}
:is(.dark .lb-mail-message-from) { color: rgb(var(--gray-50, 249 250 251)); }
.lb-mail-message-time {
    font-size: 0.75rem;
    color: rgb(var(--gray-400, 156 163 175));
    margin-inline-start: auto;
    white-space: nowrap;
}
.lb-mail-message-to {
    font-size: 0.75rem;
    color: rgb(var(--gray-400, 156 163 175));
    margin: 0.125rem 0 0;
}
.lb-mail-message-text {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(var(--gray-700, 55 65 81));
    white-space: pre-line;
}
:is(.dark .lb-mail-message-text) { color: rgb(var(--gray-300, 209 213 219)); }

/* Listen-Karten: Flux' EmailRow nutzt eine deutlich zurückhaltendere
   Ungelesen-Tönung (bg-primary/[0.03]) und kleinere Metadaten-Schrift
   (text-[10px]) als bisher gesetzt. */
.lb-notif-card.is-ungelesen {
    background: rgb(var(--primary-500, 59 130 246) / 0.03) !important;
}
:is(.dark .lb-notif-card.is-ungelesen) {
    background: rgb(var(--primary-500, 59 130 246) / 0.06) !important;
}
.lb-notif-meta {
    font-size: 0.6875rem !important;
}

/* Suchfeld im Toolbar: runde Pille wie die globale Suche, statt
   eckigem Standard-Input. */
.lb-notif-toolbar .fi-input-wrp {
    border-radius: 9999px !important;
}

/* ============================================================
   Mein Abo ("Billing") — Nutzer-Vorbild
   https://flux.dashboardpack.com/billing (echtes DOM vom Nutzer
   geschickt). Bewusst KEIN reiner 1:1-Nachbau — Flux zeigt genau EINEN
   aktiven Plan, Alpinoo lässt Mandanten zwischen mehreren Paketen
   wählen (echte, nötige Funktion) — nur Kartenoptik/Typografie/
   Tabellen-Stil übernommen, siehe mein-abo.blade.php-Kommentar.
   ============================================================ */

.lb-abo-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgb(var(--gray-950, 3 7 18));
}
:is(.dark .lb-abo-title) { color: rgb(var(--gray-50, 249 250 251)); }
.lb-abo-subtitle {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: rgb(var(--gray-500, 107 114 128));
}

.lb-abo-card { padding: 1.5rem; }
.lb-abo-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.lb-abo-card-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgb(var(--gray-950, 3 7 18));
}
:is(.dark .lb-abo-card-title) { color: rgb(var(--gray-50, 249 250 251)); }
.lb-abo-card-subtitle {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: rgb(var(--gray-500, 107 114 128));
}
.lb-abo-kuendigen-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--danger-600, 220 38 38));
}
.lb-abo-kuendigen-link:hover { text-decoration: underline; }

/* Paket-Karten: Preis groß+fett wie Flux' "$29/month". */
.lb-abo-favorit-pille {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(var(--primary-600, 37 99 235));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.lb-abo-paket-name { font-size: 1.125rem; font-weight: 700; }
.lb-abo-paket-desc {
    margin-top: 0.125rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: rgb(var(--gray-500, 107 114 128));
}
.lb-abo-preis-block { margin-bottom: 1rem; }
.lb-abo-preis-gross { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
.lb-abo-preis-text { font-size: 1.5rem; font-weight: 700; }
.lb-abo-preis-einheit { font-size: 0.875rem; color: rgb(var(--gray-500, 107 114 128)); }
.lb-abo-preis-hinweis { font-size: 0.75rem; color: rgb(var(--gray-400, 156 163 175)); margin-top: 0.25rem; }

.lb-abo-zahlungsart-karte {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgb(var(--gray-200, 229 231 235));
    border-radius: 0.625rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.lb-abo-zahlungsart-karte:has(input:checked) {
    border-color: rgb(var(--primary-500, 59 130 246));
    background: rgb(var(--primary-500, 59 130 246) / 0.05);
}
:is(.dark .lb-abo-zahlungsart-karte) { border-color: rgb(var(--gray-700, 55 65 81)); }

/* Nutzer-Wunsch 29.09.2026: "Payment Method"-Karte, 1:1 nach Flux' Billing-
   Seite (hinterlegte Karte in eigener Box, darunter volle Breite-Button). */
.lb-abo-zahlart-box {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid rgb(var(--gray-200, 229 231 235));
    border-radius: 0.75rem;
}
:is(.dark .lb-abo-zahlart-box) { border-color: rgb(var(--gray-700, 55 65 81)); }
.lb-abo-zahlart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    background: rgb(var(--gray-100, 243 244 246));
    color: rgb(var(--gray-600, 75 85 99));
}
:is(.dark .lb-abo-zahlart-icon) { background: rgb(var(--gray-800, 31 41 55)); color: rgb(var(--gray-300, 209 213 219)); }
.lb-abo-zahlart-titel { font-size: 0.875rem; font-weight: 600; }
.lb-abo-zahlart-unter { font-size: 0.75rem; color: rgb(var(--gray-500, 107 114 128)); margin-top: 0.125rem; }
/* Flux Button variant="outline" className="mt-4 w-full": h-9, border,
   bg-background, shadow-xs, hover:bg-accent. */
.lb-abo-zahlart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.25rem;
    margin-top: 1rem;
    padding: 0 1rem;
    border: 1px solid rgb(var(--gray-200, 229 231 235));
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.12s ease;
}

/* Flux-Billing-Grid: grid-cols-1 gap-6 xl:grid-cols-3, Current Plan xl:col-span-2. */
.lb-abo-oben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1280px) { .lb-abo-oben { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.lb-abo-plan-preis { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1.5rem; }
.lb-abo-plan-liste { display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 1.5rem; font-size: 0.875rem; }
.lb-abo-plan-liste li { display: flex; align-items: center; gap: 0.5rem; }
.lb-abo-check { color: rgb(var(--success-600, 22 163 74)); flex-shrink: 0; }
.lb-abo-anker { scroll-margin-top: 5rem; }
.lb-abo-zahlart-button:hover { background: rgb(var(--gray-100, 243 244 246)); }
:is(.dark .lb-abo-zahlart-button) { border-color: rgb(var(--gray-700, 55 65 81)); background: rgb(var(--gray-800, 31 41 55)); }
:is(.dark .lb-abo-zahlart-button:hover) { background: rgb(var(--gray-700, 55 65 81)); }

/* Rechnungen-Tabelle: 1:1 Flux' Billing-History-Tabellenwerte. */
.lb-abo-tabelle { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.lb-abo-tabelle thead tr { border-bottom: 1px solid rgb(var(--gray-200, 229 231 235)); }
:is(.dark .lb-abo-tabelle thead tr) { border-bottom-color: rgb(var(--gray-700, 55 65 81)); }
.lb-abo-tabelle th {
    padding-bottom: 0.75rem;
    text-align: start;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--gray-500, 107 114 128));
}
.lb-abo-tabelle tbody tr {
    border-bottom: 1px solid rgb(var(--gray-100, 243 244 246) / 0.7);
    transition: background-color 0.12s ease;
}
:is(.dark .lb-abo-tabelle tbody tr) { border-bottom-color: rgb(var(--gray-800, 31 41 55) / 0.7); }
.lb-abo-tabelle tbody tr:last-child { border-bottom: none; }
.lb-abo-tabelle tbody tr:hover { background: rgb(var(--gray-100, 243 244 246) / 0.4); }
:is(.dark .lb-abo-tabelle tbody tr:hover) { background: rgb(var(--gray-800, 31 41 55) / 0.4); }
.lb-abo-tabelle td { padding: 0.75rem 0; }
.lb-abo-tabelle-aktion { font-size: 0.75rem; font-weight: 500; }
.lb-abo-tabelle-aktion.is-primär { color: rgb(var(--primary-600, 37 99 235)); }
.lb-abo-tabelle-aktion.is-gefahr { color: rgb(var(--danger-600, 220 38 38)); }
.lb-abo-tabelle-aktion:hover { text-decoration: underline; }
.lb-abo-tabelle-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    color: rgb(var(--gray-500, 107 114 128));
    transition: background-color 0.12s ease;
}
.lb-abo-tabelle-download:hover { background: rgb(var(--gray-100, 243 244 246)); color: rgb(var(--gray-700, 55 65 81)); }
:is(.dark .lb-abo-tabelle-download:hover) { background: rgb(var(--gray-800, 31 41 55)); color: rgb(var(--gray-200, 228 228 231)); }