/* ============================================================
 * basti. - Stylesheet
 *
 * Inhalt
 *   1  Tokens (Schriften, Radien, Palette hell/dunkel, Bootstrap-Bindings,
 *      Legacy-Aliase)
 *   2  Basis (body, Typografie, Links, .section)
 *   3  Kosmische Ebenen (.cosmic-bg, Vignette, .header-fx)
 *   4  Header / Navigation
 *   5  Buttons + Umschalter
 *   6  Karten (.card-soft, .icon-badge)
 *   7  Akzent-Bauteile (.eyebrow, .hero-divider, .text-cosmic)
 *   8  Formulare
 *   9  Tabellen + Pagination
 *  10  Seitenkopf-Partials (.page-header, .section-head, .empty-state)
 *  11  Admin-Subnav
 *  12  Auth-Seiten
 *  13  Dashboard / Downloads
 *  14  Admin
 *  15  Startseite
 *  16  Footer
 *  17  Reveal + prefers-reduced-motion
 *
 * Farbwelt: Graphit / weisses Blatt, Tuerkis als Marke (Flaeche) mit Petrol
 * als schrifttauglichem Zwilling, Creme als Rahmenfarbe, Gold als dekorativer
 * Zweitakzent. Farbsystem "Tuerkis primaer" fuer Sebastian Brendel / sbint,
 * hergeleitet in Cowork/Outputs/2026-07_basti-farbschema-2-tuerkis.html.
 * ============================================================ */


/* ============================================================
   1  TOKENS
   Zwei Ebenen: --sb-* ist die Quelle der Wahrheit, --bs-* bindet
   Bootstrap daran, die Aliase am Ende halten den Altbestand am Leben.
   ============================================================ */

:root {
    /* ---- Schriften (lokal, siehe assets/vendor/fonts/fonts.css) ---- */
    --sb-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sb-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ---- Marken-Leuchtfarbe ----
       In BEIDEN Themes identisch. Nur fuer Schein, Verlaeufe, Schatten und
       den Sternenhimmel - NIEMALS als Textfarbe: auf Creme sind das 1,75:1. */
    --sb-brand: #26d3b8;
    --sb-brand-rgb: 38, 211, 184;

    /* ---- Radien ---- */
    --sb-r-btn: .6rem;
    --sb-r-badge: .75rem;
    --sb-r-subnav: .85rem;
    --sb-r-card: 1rem;
    --sb-r-prose: 1.15rem;
    --sb-r-pill: 999px;

    /* ---- Palette: DUNKEL ist der Default ----
       <html> traegt immer ein data-bs-theme (gesetzt vom FOUC-Skript in
       header.php). Die Dunkel-Werte stehen hier trotzdem direkt in :root,
       damit die Seite auch ohne Attribut vollstaendig gefaerbt ist.
       Das helle Theme ueberschreibt sie weiter unten.

       Graphit statt des frueheren warmen Schwarz: neutrale Grundflaechen
       lassen das Tuerkis als einzige Marken-Farbe stehen. Alle Textpaare
       auf >= 4,5:1 geprueft, Raender auf >= 3:1. */
    --sb-bg: #0c1017;
    --sb-bg-2: #111722;
    --sb-surface: #151b26;
    --sb-surface-2: #1b2230;

    --sb-text: #e9edf4;
    --sb-muted: #a0aab8;
    --sb-heading: #e9edf4;

    --sb-primary: #26d3b8;
    --sb-primary-d: #12b39b;
    --sb-primary-rgb: 38, 211, 184;
    --sb-on-primary: #04211d;

    --sb-gold: #e0bd7e;
    --sb-gold-rgb: 224, 189, 126;

    --sb-border: #262e3c;
    --sb-border-strong: #65738a;
    --sb-header-bg: rgba(12, 16, 23, .82);

    --sb-link: #5fdcc3;
    --sb-link-hover: #8ce9d6;

    --sb-good: #5cc97e;     --sb-good-rgb: 92, 201, 126;
    --sb-warning: #e6c68d;  --sb-warning-rgb: 230, 198, 141;
    --sb-danger: #ff9c7f;   --sb-danger-rgb: 255, 156, 127;

    --sb-ring-track: #1b2230;
    --sb-glow: rgba(38, 211, 184, .26);
    --sb-ornament: rgba(233, 237, 244, .55);
    --sb-hover-bg: rgba(233, 237, 244, .06);
    --sb-placeholder: #8b95a8;

    /* ---- Bootstrap-Bindings ---- */
    --bs-body-bg: var(--sb-bg);
    --bs-body-color: var(--sb-text);
    --bs-primary: var(--sb-primary);
    --bs-primary-rgb: var(--sb-primary-rgb);
    --bs-border-color: var(--sb-border);
    --bs-link-color: var(--sb-link);
    --bs-link-hover-color: var(--sb-link-hover);
    --bs-emphasis-color: var(--sb-text);
    --bs-body-font-family: var(--sb-font-body);
}

/* Hier standen waehrend des Umbaus Aliase auf die alten Namen (--fg,
   --accent, --nav-border, --hover-bg, --ornament, --text-muted), damit der
   Altbestand weiterlief. Sie sind entfernt, nachdem die letzte Verwendung
   verschwunden war. Falls doch noch irgendwo eine auftaucht: sie hiess
   --accent und meinte das TUERKIS, nicht das Gold. */

/* ---------- HELL: weisses Blatt, Creme als Rahmen, Petrol als Schrift ----------
   Tuerkis #26d3b8 erreicht auf Weiss nur 1,89:1 und ist als Textfarbe
   unbrauchbar. Deshalb traegt Petrol #0c7264 Schrift, Links und Buttons;
   --sb-brand bleibt fuer Flaechen, Schein und Verlaeufe erhalten.
   Creme #ece7db ist der Anker: Raender, Trennlinien, Tabellenlinien --
   ausdruecklich NICHT die grosse Flaeche. Alle Werte auf >= 4,5:1 geprueft. */
[data-bs-theme="light"] {
    --sb-bg: #ffffff;
    --sb-bg-2: #f3efe6;
    --sb-surface: #ffffff;
    --sb-surface-2: #faf8f3;

    --sb-text: #191713;
    --sb-muted: #5c574d;
    --sb-heading: #191713;

    --sb-primary: #0c7264;          /* 5,82:1 auf Weiss */
    --sb-primary-d: #095a4f;
    --sb-primary-rgb: 12, 114, 100;
    --sb-on-primary: #ffffff;

    --sb-gold: #8c6626;             /* 5,86:1 auf Weiss */
    --sb-gold-rgb: 140, 102, 38;

    --sb-border: #ece7db;           /* Creme-Anker */
    --sb-border-strong: #8a8372;
    --sb-header-bg: rgba(255, 255, 255, .85);

    --sb-link: #0c7264;
    --sb-link-hover: #095a4f;

    --sb-good: #1d7a44;     --sb-good-rgb: 29, 122, 68;
    --sb-warning: #8c6626;  --sb-warning-rgb: 140, 102, 38;
    --sb-danger: #b53d20;   --sb-danger-rgb: 181, 61, 32;

    --sb-ring-track: #ece7db;
    --sb-glow: rgba(12, 114, 100, .12);
    --sb-ornament: rgba(25, 23, 19, .28);
    --sb-hover-bg: rgba(25, 23, 19, .05);
    --sb-placeholder: #726c60;      /* 4,91:1 auf dem Feld-Creme */
}

/* ============================================================
   2  BASIS
   ============================================================ */

html {
    transition: background-color .35s ease, color .35s ease;
}

body {
    font-family: var(--sb-font-body);
    background-color: var(--sb-bg);
    color: var(--sb-text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--sb-font-display);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.12;
    color: var(--sb-heading);
    text-wrap: balance;
}

h4, h5, h6 {
    font-weight: 600;
    color: var(--sb-heading);
}

.lead {
    color: var(--sb-muted);
    font-weight: 400;
}

/* Bootstrap setzt hier selbst !important - deshalb hier auch. */
.text-muted, .text-secondary { color: var(--sb-muted) !important; }

a { text-decoration: none; }

hr { border-color: var(--sb-border); opacity: 1; }

code, kbd, samp {
    font-size: .88em;
    color: var(--sb-gold);
}

.section { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* Zahlen, die in Spalten untereinander stehen, sollen fluchten. */
.tabular, td.num, .num { font-variant-numeric: tabular-nums; }

:focus-visible {
    outline: 2px solid var(--sb-primary);
    outline-offset: 2px;
}

/* Sprachumschaltung: nur die aktive Sprache zeigen (Startseite). */
html[lang="de"] [lang="en"],
html[lang="en"] [lang="de"] { display: none; }

/* Alerts an die Palette binden */
.alert { border-radius: var(--sb-r-subnav); border-width: 1px; }
.alert-success { --bs-alert-color: var(--sb-good); --bs-alert-bg: rgba(var(--sb-good-rgb), .12); --bs-alert-border-color: rgba(var(--sb-good-rgb), .35); }
.alert-warning { --bs-alert-color: var(--sb-warning); --bs-alert-bg: rgba(var(--sb-warning-rgb), .12); --bs-alert-border-color: rgba(var(--sb-warning-rgb), .35); }
.alert-danger  { --bs-alert-color: var(--sb-danger);  --bs-alert-bg: rgba(var(--sb-danger-rgb), .12);  --bs-alert-border-color: rgba(var(--sb-danger-rgb), .35); }
.alert-info    { --bs-alert-color: var(--sb-primary); --bs-alert-bg: rgba(var(--sb-primary-rgb), .12); --bs-alert-border-color: rgba(var(--sb-primary-rgb), .35); }


/* ============================================================
   3  KOSMISCHE EBENEN
   Aurora und Vignette liegen fix hinter allem und sind im hellen
   Theme abgeschaltet - dort traegt das Papier die Flaeche.
   ============================================================ */

.cosmic-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.cosmic-bg .cb-aurora {
    position: absolute;
    inset: -10%;
    display: block;
    background:
        radial-gradient(1200px 700px at 82% -8%, rgba(38, 211, 184, .16), transparent 58%),
        radial-gradient(1000px 620px at 8% 8%, rgba(18, 179, 155, .11), transparent 55%),
        radial-gradient(1100px 700px at 12% 102%, rgba(224, 189, 126, .09), transparent 55%),
        radial-gradient(900px 600px at 100% 80%, rgba(38, 211, 184, .08), transparent 60%);
    filter: saturate(1.05);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: radial-gradient(130% 100% at 50% 0%, transparent 60%, rgba(0, 0, 0, .45) 100%);
}

[data-bs-theme="light"] .cosmic-bg,
[data-bs-theme="light"] body::after { display: none; }

/* Sternenhimmel-Canvas, nach unten weich ausmaskiert. */
.header-fx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: min(100vh, 820px);
    z-index: -1;
    pointer-events: none;
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.no-js .header-fx { display: none; }


/* ============================================================
   4  HEADER / NAVIGATION
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--sb-header-bg);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid var(--sb-border);
    transition: box-shadow .2s ease, background-color .35s ease, border-color .35s ease;
}

.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .28); }
[data-bs-theme="light"] .site-header.is-scrolled { box-shadow: 0 2px 14px rgba(12, 114, 100, .10); }

.site-header .navbar { padding-block: .55rem; }

.navbar-brand.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: .04em;
    color: var(--sb-text) !important;
    text-decoration: none;
    transition: opacity .2s ease;
}

.navbar-brand.brand-mark:hover,
.navbar-brand.brand-mark:focus { opacity: .72; }

.brand-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

/* Verschraenktes SB-Monogramm (seit 12.08.2026, loest das Orbit-Lockup ab):
   ab md das volle Lockup mit EBASTIAN/RENDEL, darunter nur das Zeichen -
   sonst frisst die Marke die halbe Handy-Breite.
   Die Verhaeltnisse sind andere als beim Orbit: Lockup 3,37:1 statt 5:1,
   Zeichen 1,30:1 statt 1,83:1. Bei 46 px ist das Lockup also ~155 px breit
   (vorher ~230) und das Zeichen ~60 px. Die 46 px bleiben, weil die kleine
   Zeile EBASTIAN/RENDEL darunter sonst zum Fleck wird - sie misst nur
   99 von 408 Einheiten Gesamthoehe, bei 46 px also gut 11 px Versalhoehe. */
.brand-logo--full { height: 46px; }
.brand-logo--mark { height: 40px; }

.navbar .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--sb-muted);
    padding: .4rem .6rem;
    border-radius: .5rem;
    transition: color .16s ease, background-color .16s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--sb-text); }

.navbar .nav-link.active {
    color: var(--sb-text);
    font-weight: 600;
}

.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: -.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--sb-primary);
}

/* Aufgeklappte Mobilnavigation: Unterstrich waere dort verloren. */
@media (max-width: 991.98px) {
    .navbar .nav-link.active::after { display: none; }
    .navbar-collapse .nav-link.active {
        border-left: 3px solid var(--sb-primary);
        padding-left: .5rem;
    }
    .navbar-collapse { padding-block: .5rem; }
}

.navbar-toggler {
    border-color: var(--sb-border);
    color: var(--sb-text);
    padding: .3rem .55rem;
}

.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(var(--sb-primary-rgb), .25); }

.dropdown-menu {
    --bs-dropdown-bg: var(--sb-surface);
    --bs-dropdown-color: var(--sb-text);
    --bs-dropdown-border-color: var(--sb-border);
    --bs-dropdown-link-color: var(--sb-text);
    --bs-dropdown-link-hover-color: var(--sb-text);
    --bs-dropdown-link-hover-bg: var(--sb-hover-bg);
    --bs-dropdown-link-active-bg: rgba(var(--sb-primary-rgb), .16);
    --bs-dropdown-link-active-color: var(--sb-text);
    --bs-dropdown-divider-bg: var(--sb-border);
    --bs-dropdown-header-color: var(--sb-muted);
    min-width: 14rem;
    border-radius: var(--sb-r-subnav);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
}

.dropdown-item { display: flex; align-items: center; gap: .55rem; }
.dropdown-item .bi { color: var(--sb-muted); }
.dropdown-item:hover .bi { color: var(--sb-primary); }

.account-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .6rem .25rem .45rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-r-pill);
    color: var(--sb-text);
    background: transparent;
    font-size: .9rem;
    transition: border-color .16s ease;
}

.account-toggle:hover,
.account-toggle:focus { border-color: var(--sb-border-strong); color: var(--sb-text); }
.account-toggle .account-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kontomenue: Kopfzeile mit Name und Rolle, darunter beschriftete Abschnitte. */
.account-menu { min-width: 16rem; }

.account-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem .55rem;
}

.account-head-icon { font-size: 1.6rem; color: var(--sb-primary); line-height: 1; }
.account-head-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.account-head-text strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account-head-role {
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sb-muted);
}

.dropdown-header {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding-bottom: .2rem;
}

/* Die beiden Schaltflaechen ausgeloggt: gleiche Hoehe, kein Umbruch. */
.nav-cta {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}


/* ============================================================
   5  BUTTONS + UMSCHALTER
   ============================================================ */

.btn {
    border-radius: var(--sb-r-btn);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--sb-primary);
    --bs-btn-border-color: var(--sb-primary);
    --bs-btn-color: var(--sb-on-primary);
    --bs-btn-hover-bg: var(--sb-primary-d);
    --bs-btn-hover-border-color: var(--sb-primary-d);
    --bs-btn-hover-color: var(--sb-on-primary);
    --bs-btn-active-bg: var(--sb-primary-d);
    --bs-btn-active-border-color: var(--sb-primary-d);
    --bs-btn-active-color: var(--sb-on-primary);
    --bs-btn-disabled-bg: var(--sb-primary);
    --bs-btn-disabled-border-color: var(--sb-primary);
    --bs-btn-disabled-color: var(--sb-on-primary);
    box-shadow: 0 6px 22px -8px rgba(38, 211, 184, .55);
}

[data-bs-theme="light"] .btn-primary { box-shadow: 0 6px 18px -10px rgba(12, 114, 100, .55); }

/* Umriss-Variante fuer die zweite Schaltflaeche in der Kopfleiste.
   Bootstraps Standard faerbt beim Hover mit Weiss auf der Primaerfarbe - im
   dunklen Theme waeren das 1,9:1 auf dem Tuerkis. Deshalb --sb-on-primary. */
.btn-outline-primary {
    --bs-btn-color: var(--sb-primary);
    --bs-btn-border-color: var(--sb-primary);
    --bs-btn-hover-bg: var(--sb-primary);
    --bs-btn-hover-border-color: var(--sb-primary);
    --bs-btn-hover-color: var(--sb-on-primary);
    --bs-btn-active-bg: var(--sb-primary-d);
    --bs-btn-active-border-color: var(--sb-primary-d);
    --bs-btn-active-color: var(--sb-on-primary);
}

.btn-outline-light,
.btn-outline-secondary {
    --bs-btn-color: var(--sb-text);
    --bs-btn-border-color: var(--sb-border-strong);
    --bs-btn-hover-bg: var(--sb-hover-bg);
    --bs-btn-hover-color: var(--sb-text);
    --bs-btn-hover-border-color: var(--sb-primary);
    --bs-btn-active-bg: var(--sb-hover-bg);
    --bs-btn-active-color: var(--sb-text);
    --bs-btn-active-border-color: var(--sb-primary);
}

/* Bestandsklasse: Outline-Tuerkis, gefuellt beim Hover.
   Bleibt erhalten, damit vorhandene Templates weiterlaufen. */
.btn-accent {
    background: transparent;
    border: 1px solid var(--sb-primary);
    color: var(--sb-primary);
    font-weight: 600;
    border-radius: var(--sb-r-btn);
}

.btn-accent:hover,
.btn-accent:focus-visible {
    background: var(--sb-primary);
    border-color: var(--sb-primary);
    color: var(--sb-on-primary);
}

.btn-danger {
    --bs-btn-bg: var(--sb-danger);
    --bs-btn-border-color: var(--sb-danger);
    --bs-btn-hover-bg: var(--sb-danger);
    --bs-btn-hover-border-color: var(--sb-danger);
}

.theme-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--sb-text);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.theme-toggle:hover { background-color: var(--sb-hover-bg); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle i { font-size: 1rem; line-height: 1; }

/* Erscheinungsbild als Zeile im Kontomenue */
.dropdown-item.theme-item { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }

/* Icon-Wechsel je nach Theme */
[data-bs-theme="light"] .icon-light { display: none; }
[data-bs-theme="light"] .icon-dark  { display: inline-block; }
[data-bs-theme="dark"]  .icon-light { display: inline-block; }
[data-bs-theme="dark"]  .icon-dark  { display: none; }

.lang-toggle {
    border: 0;
    background: transparent;
    color: var(--sb-text);
    font-family: var(--sb-font-body);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
    padding: .32rem .55rem;
    border-radius: var(--sb-r-pill);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.lang-toggle:hover { background-color: var(--sb-hover-bg); }
.lang-toggle:active { transform: scale(.94); }


/* ============================================================
   6  KARTEN
   ============================================================ */

.card-soft {
    position: relative;
    background: linear-gradient(180deg, rgba(27, 34, 48, .72) 0%, rgba(17, 23, 34, .66) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-r-card);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Verlaufs-Hairline: ein 1px-Rahmen aus einem Farbverlauf, per Maske
   aus der Flaeche ausgestanzt. */
.card-soft::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(38, 211, 184, .45), transparent 40%, rgba(224, 189, 126, .25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: .7;
    pointer-events: none;
}

/* Inhalt muss ueber der Hairline liegen. */
.card-soft > * { position: relative; }

a.card-soft { color: inherit; }
a.card-soft:hover { color: inherit; }

a.card-soft:hover,
.card-soft.hoverable:hover {
    transform: translateY(-4px);
    border-color: rgba(38, 211, 184, .6);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .85), 0 0 32px -10px rgba(38, 211, 184, .30);
}

/* Hell: Karte und Seitengrund sind beide weiss. Die Karte haengt deshalb an
   Creme-Rahmen plus zartem Schatten -- ohne den loest sie sich im Grund auf. */
[data-bs-theme="light"] .card-soft {
    background: var(--sb-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 2px rgba(25, 23, 19, .04), 0 8px 20px rgba(25, 23, 19, .05);
}

[data-bs-theme="light"] .card-soft::before { opacity: .28; }

[data-bs-theme="light"] a.card-soft:hover,
[data-bs-theme="light"] .card-soft.hoverable:hover {
    border-color: rgba(12, 114, 100, .5);
    box-shadow: 0 10px 24px -12px rgba(12, 114, 100, .30), 0 2px 6px rgba(25, 23, 19, .10);
}

.prose-card {
    padding: clamp(1.25rem, 3vw, 2.4rem);
    border-radius: var(--sb-r-prose);
}

.prose-card h2 { font-size: 1.4rem; margin-top: 2rem; }
.prose-card h2:first-child { margin-top: 0; }
.prose-card p { line-height: 1.85; }

.icon-badge {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sb-r-badge);
    background: rgba(var(--sb-primary-rgb), .14);
    border: 1px solid rgba(var(--sb-primary-rgb), .30);
    color: var(--sb-gold);
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 0 0 1px rgba(var(--sb-primary-rgb), .25), 0 8px 24px -10px rgba(38, 211, 184, .5);
}

.icon-badge-sm { width: 38px; height: 38px; border-radius: .65rem; font-size: 1rem; box-shadow: 0 0 0 1px rgba(var(--sb-primary-rgb), .2); }
.icon-badge-lg { width: 64px; height: 64px; border-radius: var(--sb-r-card); font-size: 1.7rem; }

[data-bs-theme="light"] .icon-badge { box-shadow: none; }


/* ============================================================
   7  AKZENT-BAUTEILE
   ============================================================ */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sb-gold);
    font-family: var(--sb-font-body);
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-gold);
    box-shadow: 0 0 10px 1px rgba(var(--sb-gold-rgb), .7);
}

[data-bs-theme="light"] .eyebrow::before { box-shadow: none; }

.hero-divider {
    position: relative;
    height: 1px;
    border: 0;
    margin: 0;
    width: 100%;
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--sb-border) 30%, var(--sb-border) 70%, transparent);
}

.hero-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--sb-gold);
    box-shadow: 0 0 14px 2px rgba(var(--sb-gold-rgb), .6);
}

[data-bs-theme="light"] .hero-divider::after { box-shadow: none; }

.text-cosmic {
    background: linear-gradient(100deg, #a8f0e2 0%, var(--sb-brand) 38%, var(--sb-gold) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-bs-theme="light"] .text-cosmic {
    background: linear-gradient(100deg, var(--sb-heading) 0%, var(--sb-primary) 45%, var(--sb-gold) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.glow-text { text-shadow: 0 0 32px rgba(38, 211, 184, .40); }
[data-bs-theme="light"] .glow-text { text-shadow: none; }

.text-accent { color: var(--sb-primary); }

/* Gold als Linkfarbe ist bewusst Opt-in: im hellen Theme wirkt sie
   sonst braeunlich. Standard bleibt Tuerkis/Petrol. */
.link-gold { color: var(--sb-gold); }
.link-gold:hover { color: var(--sb-gold); opacity: .8; }

.badge { border-radius: var(--sb-r-pill); font-weight: 600; letter-spacing: .03em; }
.badge-gold { background: rgba(var(--sb-gold-rgb), .14); border: 1px solid rgba(var(--sb-gold-rgb), .35); color: var(--sb-gold); }
.badge-good { background: rgba(var(--sb-good-rgb), .13); border: 1px solid rgba(var(--sb-good-rgb), .35); color: var(--sb-good); }
.badge-warn { background: rgba(var(--sb-warning-rgb), .13); border: 1px solid rgba(var(--sb-warning-rgb), .35); color: var(--sb-warning); }
.badge-danger { background: rgba(var(--sb-danger-rgb), .13); border: 1px solid rgba(var(--sb-danger-rgb), .35); color: var(--sb-danger); }

.min-w-0 { min-width: 0; }


/* ============================================================
   8  FORMULARE
   ============================================================ */

/* background-COLOR, nie die Kurzform: sie loescht auch background-image.
   Daran haengt bei Bootstrap der Aufklapp-Pfeil der Auswahlliste und das rote
   Warnzeichen bei .is-invalid. Diese Datei laedt nach Bootstrap und gewinnt. */
.form-control,
.form-select {
    background-color: var(--sb-bg-2);
    border-color: var(--sb-border-strong);
    color: var(--sb-text);
    border-radius: var(--sb-r-btn);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select { background-color: var(--sb-surface); }

.form-control:focus,
.form-select:focus {
    background-color: var(--sb-bg-2);
    color: var(--sb-text);
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--sb-primary-rgb), .2);
}

[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus { background-color: var(--sb-surface); }

.form-control::placeholder { color: var(--sb-placeholder); }

.form-label { font-weight: 500; }
.form-label i, .form-label .bi { color: var(--sb-primary); }
.form-text { color: var(--sb-muted); }

.input-group-text {
    background: var(--sb-surface-2);
    border-color: var(--sb-border-strong);
    color: var(--sb-muted);
}

.form-check-input:checked {
    background-color: var(--sb-primary);
    border-color: var(--sb-primary);
}

.form-check-input:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--sb-primary-rgb), .2);
}

/* Validierungsrahmen muessen den Fokusrahmen schlagen, sonst faerbt
   der Tuerkis-Fokus das rote Feld wieder ein. */
.form-control.is-invalid, .form-select.is-invalid,
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--bs-form-invalid-border-color); }
.form-control.is-valid, .form-select.is-valid,
.form-control.is-valid:focus, .form-select.is-valid:focus { border-color: var(--bs-form-valid-border-color); }
.invalid-feedback { color: var(--bs-form-invalid-color); }

/* Honeypot - fuer Menschen unsichtbar, fuer Bots ausfuellbar. */
.hp-field {
    position: absolute;
    left: -5000px;
    top: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ============================================================
   9  TABELLEN + PAGINATION
   ============================================================ */

.table {
    --bs-table-color: var(--sb-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--sb-border);
    --bs-table-hover-color: var(--sb-text);
    --bs-table-hover-bg: var(--sb-hover-bg);
}

.table > :not(caption) > * > * { background-color: transparent; }

.table thead th {
    color: var(--sb-muted);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.table tbody tr:hover > td { background-color: var(--sb-hover-bg); }

/* Inaktive Zeilen dezent absetzen (basti-Tabellenstandard). */
tr.row-inaktiv > td { opacity: .55; }

/* Sortierbare Spaltenkoepfe. Vorbereitet - die Sortierlogik selbst
   ist ein eigenes Ticket, siehe Backlog im Plan. */
.th-sort a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.th-sort a:hover { color: var(--sb-text); }
.th-sort .bi { opacity: .55; font-size: .8em; }

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--sb-muted);
    --bs-pagination-border-color: var(--sb-border);
    --bs-pagination-hover-bg: var(--sb-hover-bg);
    --bs-pagination-hover-color: var(--sb-text);
    --bs-pagination-hover-border-color: var(--sb-border-strong);
    --bs-pagination-focus-bg: var(--sb-hover-bg);
    --bs-pagination-focus-color: var(--sb-text);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--sb-primary-rgb), .2);
    --bs-pagination-active-bg: var(--sb-primary);
    --bs-pagination-active-border-color: var(--sb-primary);
    --bs-pagination-active-color: var(--sb-on-primary);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--sb-placeholder);
    --bs-pagination-disabled-border-color: var(--sb-border);
}


/* ============================================================
   10  SEITENKOPF-PARTIALS
   ============================================================ */

.page-header { margin-bottom: 1.75rem; }

.page-header-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: flex-end;
}

.page-header h1 {
    font-size: 1.9rem;
    margin: .45rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

.page-header .lead { margin: .5rem 0 0; font-size: .95rem; }

.page-header-center { text-align: center; }
.page-header-center .page-header-row { justify-content: center; }
.page-header-center h1 { justify-content: center; }
.page-header-center .eyebrow { justify-content: center; }

.sb-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: var(--sb-r-pill);
    border: 1px solid var(--sb-border);
    background: var(--sb-surface);
    font-size: .82rem;
    color: var(--sb-muted);
}

.section-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.section-head h2,
.section-head h3 { font-size: 1.15rem; margin: 0; }

.section-head .count {
    margin-left: auto;
    font-size: .75rem;
    color: var(--sb-muted);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-r-pill);
    padding: .1rem .6rem;
    font-variant-numeric: tabular-nums;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    text-align: center;
    padding: clamp(1.75rem, 5vw, 3rem) 1rem;
    border: 1px dashed var(--sb-border-strong);
    border-radius: var(--sb-r-card);
    color: var(--sb-muted);
}

.empty-state b { color: var(--sb-text); font-weight: 600; }


/* ============================================================
   11  ADMIN-SUBNAV
   ============================================================ */

.admin-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    padding: .4rem .5rem;
    margin-bottom: 1.5rem;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-r-subnav);
}

.admin-subnav a {
    color: var(--sb-muted);
    font-size: .85rem;
    padding: .3rem .7rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: color .16s ease, background-color .16s ease;
}

.admin-subnav a:hover { color: var(--sb-text); background: var(--sb-hover-bg); }

.admin-subnav a.active {
    color: var(--sb-text);
    font-weight: 600;
    background: var(--sb-hover-bg);
}


/* ============================================================
   12  AUTH-SEITEN
   ============================================================ */

main.member-wrap {
    max-width: 920px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

body.is-auth main.member-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 12rem);
}

.auth-card {
    max-width: 460px;
    width: 100%;
    margin-inline: auto;
    padding: 1.5rem;
}

.auth-links {
    text-align: center;
    margin-top: 1.25rem;
    font-size: .95rem;
}


/* ============================================================
   13  DASHBOARD / DOWNLOADS
   ============================================================ */

.sub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem;
}

.sub-card .sub-host {
    font-family: var(--sb-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--sb-heading);
    margin: .75rem 0 .15rem;
}

.sub-card .sub-url {
    font-size: .78rem;
    color: var(--sb-muted);
    word-break: break-all;
    margin-bottom: 1rem;
}


/* ============================================================
   14  ADMIN
   ============================================================ */

.admin-tile {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: 1.15rem 1.25rem;
    height: 100%;
}

.admin-tile .icon-badge { margin-bottom: .6rem; }

.admin-tile .tile-num {
    font-family: var(--sb-font-display);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--sb-heading);
    font-variant-numeric: tabular-nums;
}

.admin-tile .tile-label { font-size: .84rem; color: var(--sb-muted); }

.inbox-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .8rem 1rem;
    border-radius: var(--sb-r-subnav);
    border: 1px solid rgba(var(--sb-warning-rgb), .35);
    background: rgba(var(--sb-warning-rgb), .09);
    margin-bottom: 1.25rem;
}

.inbox-row .inbox-txt { flex: 1 1 auto; font-size: .9rem; }

.inbox-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: .65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--sb-warning-rgb), .16);
    color: var(--sb-warning);
}

.kpi-card { padding: 1rem 1.15rem; height: 100%; }

.kpi-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sb-muted);
    font-weight: 600;
}

.kpi-value {
    font-family: var(--sb-font-display);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--sb-gold);
    font-variant-numeric: tabular-nums;
}

/* Balkendiagramm der Statistik (frueher inline in admin/stats.php) */
.stat-bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .35rem 0;
    font-size: .9rem;
}

.stat-bar .lbl { flex: 0 0 40%; max-width: 40%; color: var(--sb-muted); }

.stat-bar .val {
    flex: 0 0 auto;
    min-width: 2.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bar-track {
    flex: 1;
    height: 8px;
    border-radius: var(--sb-r-pill);
    background: var(--sb-ring-track);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sb-primary), var(--sb-primary-d));
}

.stat-card .num {
    font-family: var(--sb-font-display);
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--sb-gold);
    font-variant-numeric: tabular-nums;
}

/* Diese Zeile nutzte var(--text-muted) - eine Variable, die es im
   Projekt nie gab, sodass immer der Notwert #9aa griff. */
.stat-card .cap { color: var(--sb-muted); font-size: .88rem; }

/* Benutzer- und Rollenverwaltung (frueher inline in users.php/roles.php) */
tr.user-row:hover > td,
tr.role-row:hover > td { background: var(--sb-hover-bg); }

.user-actions .btn { line-height: 1; }

.edit-panel {
    background: var(--sb-hover-bg);
    border-top: 1px solid var(--sb-border);
}

.sub-create .input-group-text {
    background: transparent;
    border-color: var(--sb-border);
    color: var(--sb-primary);
    font-weight: 600;
}

.group-toggle .bi-chevron-down { transition: transform .2s ease; }
.group-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }


/* ============================================================
   15  STARTSEITE
   ============================================================ */

main.landing { padding: 0; }

.hero {
    position: relative;
    min-height: calc(100vh - 4.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.25rem;
    animation: fadeIn 1.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.quote-frame {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

/* Altbestand: der schlichte Strich. Die Startseite nutzt jetzt
   .hero-divider, die Klasse bleibt fuer den Fall der Faelle. */
.ornament {
    width: 60px;
    height: 2px;
    background-color: var(--sb-ornament);
    margin: 0 auto;
    border-radius: 1px;
    transition: background-color .35s ease;
}

.quote {
    font-family: var(--sb-font-display);
    font-size: clamp(1.6rem, 4.2vw, 2.5rem);
    font-weight: 500;
    line-height: 1.42;
    color: var(--sb-text);
    margin: 0;
    letter-spacing: .01em;
}

[data-bs-theme="dark"] .quote {
    font-style: italic;
    letter-spacing: .015em;
}

.attribution {
    display: block;
    font-family: var(--sb-font-display);
    font-style: italic;
    font-size: .95rem;
    color: var(--sb-muted);
    letter-spacing: .05em;
}

.attribution::before { content: "\2014\00a0"; }


/* ============================================================
   16  FOOTER
   ============================================================ */

.site-footer {
    background: var(--sb-bg-2);
    border-top: 1px solid var(--sb-border);
    color: var(--sb-muted);
    padding-block: 2rem;
    margin-top: 4rem;
}

.site-footer a { color: var(--sb-muted); }
.site-footer a:hover { color: var(--sb-text); }
.site-footer .sep { color: var(--sb-border-strong); }

body.is-landing .site-footer { margin-top: 0; }


/* ============================================================
   17  REVEAL + BEWEGUNGSREDUKTION
   ============================================================ */

/* Bewusst an .has-fx gebunden (gesetzt von effects.js): ohne das Skript
   ist .reveal einfach sichtbarer Inhalt statt unsichtbarer. */
.has-fx .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.has-fx .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .has-fx .reveal { opacity: 1; transform: none; transition: none; }
    .hero { animation: none; }
    html, .site-header, .card-soft, .btn, .theme-toggle, .lang-toggle { transition: none !important; }
    a.card-soft:hover, .card-soft.hoverable:hover { transform: none; }
    * { scroll-behavior: auto !important; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 480px) {
    .hero { padding: 3rem 1rem; }
    .ornament { width: 44px; }
    .quote { line-height: 1.4; }
    main.member-wrap { padding: 1.75rem 1rem 3rem; }
    .page-header h1 { font-size: 1.55rem; }
}