/* ============================================================
   OptionsApp 2.0: Design-System fuer das Benutzerportal
   ------------------------------------------------------------
   Portierung der Corporate Identity v1.0 aus der OA-2.0-Landing-
   page (OptionsAppLandingPage/src/app/globals.css + premium.css)
   auf das server-gerenderte Django-Portal.

   Aufbau:
     1. Tokens
     2. Bootstrap-5-Bruecke (--bs-* Overrides)
     3. Basis / Typografie
     4. Layout-Bausteine (Hero, Section, Container)
     5. Komponenten (Karten, Buttons, Tabellen, Formulare,
        Badges, Alerts, Modals, Tabs, Listen)
     6. Header / Footer
     7. Utilities

   Formsprache "Werkbank" (Variante B, von Sebastian abgenommen):
   die Website ist die Buehne, das Portal ist das Werkzeug. Keine
   Verlaeufe, keine Glut, kein Raster, keine Leuchtschatten. Eckige
   Kontrollen (8px) statt Pillen, Struktur durch 1px-Linien statt
   Schatten. Bernstein ist die Kennfarbe des Portals, Blau bleibt
   allein den Aktionen vorbehalten.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    /* Flaechen - neutral, ohne Blaustich */
    --oa-background: #f7f9fc;
    --oa-surface: #ffffff;
    --oa-surface-hover: #f8fafc;
    --oa-surface-sunken: #f1f5f9;   /* vertieft: Tabellenkoepfe, Wells */

    /* Text */
    --oa-text-primary: #0f1c2e;
    --oa-text-secondary: #475569;
    /* #94a3b8 kam auf dem Canvas nur auf 2.43:1 und lag damit weit
       unter AA. #64748b erreicht 4.51:1 bei gleicher Rolle. */
    --oa-text-muted: #64748b;
    --oa-text-muted-weich: #94a3b8;   /* nur fuer Nicht-Text: Linien, Ikonen */

    /* Brand (Logo, Headlines, Marken-Elemente, nie fuer CTAs) */
    --oa-brand: #1e55d6;
    --oa-brand-dark: #0c2a4a;
    --oa-brand-light: #2fb3f2;
    --oa-brand-soft: #eaf1ff;

    /* Action (nur Interaktion: Buttons, Links) */
    --oa-action: #2563eb;
    --oa-action-hover: #1d4ed8;
    --oa-action-focus: #93c5fd;

    /* Semantik */
    --oa-positive: #059669;
    --oa-positive-light: #d1fae5;
    --oa-negative: #dc2626;
    --oa-negative-light: #fee2e2;
    --oa-warning: #b45309;
    --oa-warning-light: #fdf0d5;

    /* Kanten - neutral: die blaugetoenten Linien der Website waeren
       hier Dekoration */
    --oa-border: #e2e8f0;
    --oa-border-light: #eef2f7;
    --oa-border-strong: #cbd5e1;

    /* Bernstein - die Kennfarbe des Portals (aus dem Benutzerportal-
       Abzeichen). Nur fuer Identitaet: Abzeichen, Aktiv-Markierung,
       Portal-Chip. Nie fuer Aktionen. */
    --oa-amber: #b45309;
    --oa-amber-hell: #fdf2df;
    --oa-amber-marker: #f59e0b;

    /* Schatten */
    /* Schattenleiter nach den Prinzipien der grossen Systeme
       (Vercel Geist, Linear, GitHub Primer):
         - die 1px-Kante steckt IM Schatten, nicht als Border:
           kein Layoutsprung, und die Kante haelt auf jedem Grund
         - die Deckkraft bleibt konstant, nur der Blur waechst
         - ab etwa 8px Blur negativer Spread, sonst entsteht oben
           ein Hof statt eines Schattens */
    /* Werkbank: die Kante traegt die Struktur, der Schatten ist nur
       noch ein Hauch unter schwebenden Ebenen (Modal, Dropdown). */
    --oa-shadow-card: none;
    --oa-shadow-elevated: 0 8px 24px rgb(15 28 46 / 0.10), 0 2px 6px rgb(15 28 46 / 0.06);
    --oa-shadow-header: none;

    /* Signature-Gradient: das eine wiederkehrende Motiv */
    --oa-grad: linear-gradient(50deg, #1e55d6 0%, #2fb3f2 100%);
    --oa-grad-soft: linear-gradient(50deg, rgb(30 85 214 / 0.16) 0%, rgb(47 179 242 / 0.16) 100%);

    /* Dunkler Anker (Rail) */
    --oa-ink: #0b1626;
    --oa-cyan: #38cfff;

    /* Radien - Werkbank: Kontrollen 8px, Karten 10px. Keine Pillen. */
    --oa-radius-sm: 0.375rem;
    --oa-radius: 0.5rem;
    --oa-radius-lg: 0.625rem;
    --oa-radius-xl: 0.625rem;
    --oa-radius-2xl: 0.75rem;

    --oa-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- 2. Bootstrap-5-Bruecke ----------
   Bootstrap 5.3 liest seine Farben aus --bs-*. Wir setzen sie um,
   damit auch Komponenten, die wir nicht einzeln anfassen, im
   OA-2.0-Look erscheinen. */
:root {
    --bs-body-bg: var(--oa-background);
    --bs-body-color: var(--oa-text-primary);
    --bs-body-font-family: var(--oa-font-sans);
    --bs-emphasis-color: var(--oa-text-primary);
    --bs-secondary-color: var(--oa-text-secondary);
    --bs-secondary-color-rgb: 71, 85, 105;
    --bs-tertiary-color: var(--oa-text-muted);

    --bs-primary: var(--oa-action);
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: var(--oa-action);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--oa-action-hover);
    --bs-link-hover-color-rgb: 29, 78, 216;

    --bs-border-color: var(--oa-border);
    --bs-border-radius: var(--oa-radius);
    --bs-border-radius-sm: var(--oa-radius-sm);
    --bs-border-radius-lg: var(--oa-radius-lg);
    --bs-border-radius-xl: var(--oa-radius-xl);

    --bs-success: var(--oa-positive);
    --bs-danger: var(--oa-negative);
}

/* ---------- 3. Basis / Typografie ---------- */
body {
    background-color: var(--oa-background);
    color: var(--oa-text-primary);
    font-family: var(--oa-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--oa-text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Die Portal-Seiten benutzen durchgehend display-5 als Seitentitel.
   Auf der Landingpage ist die H1 einer Unterseite 2.6rem/1.12 Navy-
   Bold, das ist hier der Massstab, nicht Bootstraps Display-Groesse. */
.display-4, .display-5, .display-6 {
    color: var(--oa-text-primary);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.display-5 {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
}

/* Alt-Markup schreibt Titeln text-body-secondary zu (grau). Im neuen
   Design sind Ueberschriften Navy, sonst wirkt die Seite ausgebleicht. */
h1.text-body-secondary, h2.text-body-secondary, h3.text-body-secondary,
.display-4.text-body-secondary, .display-5.text-body-secondary,
.display-6.text-body-secondary {
    color: var(--oa-text-primary) !important;
}

p, li, dd, .text-body-secondary {
    color: var(--oa-text-secondary);
    line-height: 1.625;   /* leading-relaxed */
}

.text-body-secondary {
    color: var(--oa-text-secondary) !important;
}

a {
    color: var(--oa-action);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--oa-action-hover);
    text-decoration: underline;
}

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

:focus-visible {
    outline: 2px solid var(--oa-brand);
    outline-offset: 2px;
}

/* Werkbank kennt keine Sektions-Eyebrows mehr: der Sektionskopf ist
   Titel plus Standzeile. Die Klasse bleibt als leiser Rueckfall fuer
   Alt-Markup definiert. */
.oa-eyebrow {
    display: block;
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oa-text-muted);
}

/* ---------- 4. Layout ----------
   Das Portal hat keinen Marketing-Hero: die Kopfleiste der App-Shell
   (oa2-portal.css) traegt den Seitentitel. Hier stehen nur die
   Bausteine, aus denen der Seiteninhalt aufgebaut wird.

   Sektionsaufbau der Werkbank:

       h2       -> Sektionstitel (klein, halbfett)
       p        -> Standzeile (optional, gedaempft)
       ---------- Abstand ----------
       Karte(n) / Raster

   Kein Eyebrow mehr - Beschriftungs-Versalien gibt es nur noch als
   Feldbeschriftung IN einer Karte (Kopfkarte, Kennzahlen). Karten
   tragen einen h3-Titel. */

.oa-section + .oa-section,
.oa-section + .oa-wash,
.oa-wash + .oa-section {
    margin-top: 2.5rem;      /* Sektion: klar groesser als Gruppe */
}

/* Derselbe Rhythmus auf Seitenebene. Die Regel darueber greift nur,
   wenn Sektionen direkte Nachbarn sind - ein Band, eine Huelle mit
   Lesebreite oder eine Formular-Huelle dazwischen, und der Abstand
   fiel auf null: "Archiv" hing 4px unter dem dunklen Band. */
.oa-page > .oa-section,
.oa-page > .oa-wash,
.oa-page > .oa-band,
.oa-page > .oa-measure,
.oa-page > .oa-measure--form {
    margin-top: 2.5rem;
}

/* Erster Block unter der Kopfleiste: etwas weniger. Auch die
   Kopfkarte (.oa-band) ist jetzt eine Karte in der Spalte, kein
   randloses Band mehr - sie dockt nicht mehr buendig an. */
.oa-page > :is(.oa-section, .oa-wash, .oa-measure, .oa-band):first-child { margin-top: 2rem; }
.oa-page > .oa-measure--form:first-child { margin-top: 2.5rem; }

/* Kopf-zu-Inhalt: knapp - der Kopf ist ein Etikett, kein Auftritt. */
.oa-section__head {
    margin-bottom: 0.875rem;
}

/* Eine Groesse fuer jeden Sektionskopf im Portal, auf jeder Seite.
   Bis zum 21.09.2026 stand hier 0.9375rem, und Approvals hatte sich
   mit 1.125rem eine Ausnahme genommen, weil der Titel dort wie eine
   Bildunterschrift wirkte; Sebastian sah dann Erste Schritte "viel
   kleiner geschrieben" daneben. Jetzt dieselbe Stufe wie der Titel
   der Kopfleiste, ohne Ausnahme. */
.oa-section__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--oa-text-primary);
}

.oa-section__sub {
    margin: 0.25rem 0 0;
    max-width: 68ch;
    font-size: 0.8125rem;
    color: var(--oa-text-muted);
    line-height: 1.55;
}

/* Kopfzeile mit Aktion rechts (z. B. "Abonnement aendern") */
.oa-section__head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* ---------- 5. Komponenten ---------- */

/* Karte: weiss, 1px-Kante, kein Schatten. Die Linie ist die Form. */
.oa-card {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    padding: 1.25rem;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .oa-card { padding: 1.5rem; }
}

.oa-card--tight { padding: 1.125rem; }

.oa-card--hover { transition: border-color 0.15s ease; }

.oa-card--hover:hover { border-color: var(--oa-text-muted-weich); }

.oa-card__title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oa-text-primary);
    letter-spacing: -0.005em;
}

/* Akzent-Karte: Bernstein-Kante links statt Leuchtlinie */
.oa-card--accent {
    border-left: 3px solid var(--oa-amber-marker);
}

/* Bootstrap-.card auf denselben Stand heben */
.card {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    box-shadow: none;
}

.card-header {
    background-color: var(--oa-surface);
    border-bottom: 1px solid var(--oa-border);
    color: var(--oa-text-primary);
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-radius: var(--oa-radius-xl) var(--oa-radius-xl) 0 0;
}

/* Bootstraps .shadow wird im Alt-Markup als Karten-Ersatz benutzt.
   Wir geben ihm die Karten-Optik, damit ungeaenderte Stellen passen. */
.shadow {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-xl);
    box-shadow: var(--oa-shadow-card) !important;
}

/* Buttons: eckig (8px), flach, ohne Leuchten und ohne Springen.

   inline-flex, nicht inline-block: ein <button> zentriert seinen
   Inhalt selbst, ein <a> nicht. In der Download-Tabelle stand der
   Text der Anker dadurch 6.5px zu hoch - direkt neben korrekt
   zentrierten <button>s derselben Klasse. */
.btn {
    --bs-btn-border-radius: var(--oa-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--oa-radius);
    font-size: 0.8438rem;
    font-weight: 600;
    gap: 0.4375rem;
    min-height: 2.375rem;
    padding: 0.375rem 1rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.oa-btn-ikone {
    width: 0.9375rem;
    height: 0.9375rem;
    flex: 0 0 auto;
}

.btn:focus-visible {
    outline: 2px solid var(--oa-action-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.oa-btn,
.btn-primary,
.btn-success {
    background: var(--oa-brand);
    /* transparent statt none: sonst sind Primaer- und Sekundaerknopf
       unterschiedlich hoch. */
    border: 1px solid transparent;
    color: #fff;
    box-shadow: none;
}

.oa-btn:hover,
.btn-primary:hover,
.btn-success:hover,
.oa-btn:focus,
.btn-primary:focus,
.btn-success:focus {
    background: #1848b8;
    color: #fff;
    text-decoration: none;
}

.btn-primary:active,
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--oa-brand);
    border: 1px solid transparent;
    color: #fff;
}

/* Sekundaer: weiss mit kraeftiger Kante */
.oa-btn-secondary,
.btn-secondary,
.btn-light {
    background-color: var(--oa-surface);
    color: var(--oa-text-primary);
    border: 1px solid var(--oa-border-strong);
    box-shadow: none;
}

.oa-btn-secondary:hover,
.btn-secondary:hover,
.btn-light:hover {
    background-color: var(--oa-surface);
    color: var(--oa-text-primary);
    border-color: var(--oa-text-muted);
    text-decoration: none;
}

/* Outline */
.oa-btn-outline,
.btn-outline-primary,
.btn-outline-secondary {
    background-color: transparent;
    color: var(--oa-brand);
    border: 1px solid rgb(30 85 214 / 0.45);
}

.oa-btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background-color: var(--oa-brand-soft);
    color: var(--oa-brand);
    border-color: rgb(30 85 214 / 0.45);
    text-decoration: none;
}

/* Destruktive Aktion: bewusst flach statt Gradient, damit sie sich
   klar von der primaeren Aktion unterscheidet. */
.btn-danger {
    background: var(--oa-negative);
    border: 1px solid transparent;
    color: #fff;
    box-shadow: none;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #b91c1c;
    color: #fff;
}

.btn-outline-danger {
    background-color: transparent;
    color: var(--oa-negative);
    border: 1px solid rgb(220 38 38 / 0.45);
}

.btn-outline-danger:hover {
    background-color: var(--oa-negative-light);
    color: var(--oa-negative);
    border-color: rgb(220 38 38 / 0.45);
}

.btn-link {
    color: var(--oa-action);
    box-shadow: none;
    text-decoration: none;
}

.btn-link:hover {
    color: var(--oa-action-hover);
    text-decoration: underline;
}

.btn-sm {
    min-height: 2.125rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-lg {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
}

/* Tabellen: luftig, ohne Zebra-Grau, mit zarter blauer Kante */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--oa-text-secondary);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--oa-text-secondary);
    --bs-table-hover-bg: var(--oa-brand-soft);
    --bs-table-hover-color: var(--oa-text-primary);
    --bs-table-border-color: var(--oa-border);
    margin-bottom: 0;
    vertical-align: middle;
}

.table > thead th {
    background-color: transparent;
    border-bottom: 1px solid var(--oa-border);
    color: var(--oa-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 0.75rem;
    white-space: nowrap;
}

.table > thead th p {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.table > tbody td {
    border-bottom: 1px solid var(--oa-border-light);
    color: var(--oa-text-secondary);
    padding: 0.875rem 0.75rem;
}

.table > tbody td p {
    margin: 0;
    color: inherit;
}

.table > tbody tr:last-child td {
    border-bottom: none;
}

/* Der Alt-Markup-Trenner zwischen thead und tbody wuerde als dicke
   dunkle Linie erscheinen. */
.table-group-divider {
    border-top: 1px solid var(--oa-border) !important;
}

.oa-table-wrap {
    overflow-x: auto;
}

/* Formulare */
.form-label {
    color: var(--oa-text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: var(--oa-surface);
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius);
    color: var(--oa-text-primary);
    padding: 0.625rem 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    background-color: var(--oa-surface);
    border-color: var(--oa-action);
    box-shadow: 0 0 0 3px rgb(147 197 253 / 0.45);
    outline: none;
}

.form-control::placeholder { color: var(--oa-text-muted); }

.form-text, .helptext {
    color: var(--oa-text-muted);
    font-size: 0.8125rem;
}

.form-check-input {
    border-color: var(--oa-border-strong);
}

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

.form-check-input:focus {
    border-color: var(--oa-action);
    box-shadow: 0 0 0 3px rgb(147 197 253 / 0.45);
}

.form-check-label { color: var(--oa-text-secondary); }

/* Badges - flache Chips mit kleinem Radius */
.badge {
    border-radius: 4px;
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.oa-badge-brand,
.badge.text-bg-primary {
    background-color: var(--oa-brand-soft) !important;
    color: var(--oa-brand) !important;
}

.oa-badge-muted,
.badge.text-bg-secondary {
    background-color: var(--oa-border-light) !important;
    color: var(--oa-text-secondary) !important;
}

.oa-badge-positive,
.badge.text-bg-success {
    background-color: var(--oa-positive-light) !important;
    color: var(--oa-positive) !important;
}

.oa-badge-negative,
.badge.text-bg-danger {
    background-color: var(--oa-negative-light) !important;
    color: var(--oa-negative) !important;
}

.oa-badge-warning,
.badge.text-bg-warning {
    background-color: var(--oa-warning-light) !important;
    color: var(--oa-warning) !important;
}

/* Alerts: flach, farbig getoent, ohne Bootstrap-Pastellrahmen */
.alert {
    border: 1px solid transparent;
    border-radius: var(--oa-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: 0.9375rem;
}

.alert-success, .alert.success {
    background-color: var(--oa-positive-light);
    border-color: rgb(5 150 105 / 0.2);
    color: #065f46;
}

.alert-danger, .alert-error, .alert.error {
    background-color: var(--oa-negative-light);
    border-color: rgb(220 38 38 / 0.2);
    color: #991b1b;
}

.alert-warning, .alert.warning {
    background-color: var(--oa-warning-light);
    border-color: rgb(180 83 9 / 0.2);
    color: #8a6d1f;
}

.alert-info, .alert.info {
    background-color: var(--oa-brand-soft);
    border-color: rgb(37 99 235 / 0.18);
    color: #1e3a8a;
}

/* Django-Messages werden als <ul class="messages"> ausgegeben */
ul.messages {
    list-style: none;
    max-width: 1280px;
    margin: 1rem auto 0;
    padding-inline: 1rem;
}

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--oa-border);
    gap: 0.25rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--oa-text-secondary);
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.625rem 1rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--oa-border-strong);
    color: var(--oa-text-primary);
    isolation: auto;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border-bottom-color: var(--oa-action);
    color: var(--oa-action);
}

/* Listen */
.list-group {
    border-radius: var(--oa-radius-xl);
}

.list-group-item {
    background-color: var(--oa-surface);
    border-color: var(--oa-border-light);
    color: var(--oa-text-secondary);
    padding: 1rem 1.25rem;
}

/* Modal */
.modal-content {
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-2xl);
    box-shadow: var(--oa-shadow-elevated);
    overflow: hidden;
}

.modal-header {
    background: var(--oa-surface);
    border-bottom: 1px solid var(--oa-border);
    color: var(--oa-text-primary);
    padding: 1rem 1.5rem;
}

.modal-header .modal-title {
    color: var(--oa-text-primary);
    font-size: 1rem;
    font-weight: 600;
}

/* Die Modal-Koepfe waren dunkel und trugen ein weisses X. Auf dem
   hellen Kopf braucht es wieder das dunkle. */
.modal-header .btn-close-white { filter: none; }

.modal-body { padding: 1.5rem; }

.modal-footer {
    border-top: 1px solid var(--oa-border);
    padding: 1rem 1.5rem;
}

/* Dropdown */
.dropdown-menu {
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    box-shadow: var(--oa-shadow-elevated);
    padding: 0.375rem;
    margin-top: 0.5rem;
    min-width: 13rem;
}

.dropdown-item {
    border-radius: var(--oa-radius-sm);
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--oa-brand-soft);
    color: var(--oa-text-primary);
    text-decoration: none;
}

.dropdown-divider {
    border-top-color: var(--oa-border);
    margin: 0.375rem 0;
}

/* ---------- 6. Header / Footer ---------- */

/* Header: hell, ruhig, sticky mit Blur, wie der Landingpage-Header */
.oa-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    width: 100%;
    background-color: rgb(255 255 255 / 0.9);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--oa-border);
    box-shadow: var(--oa-shadow-header);
}

.oa-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1280px;
    margin-inline: auto;
    padding: 0.875rem 1rem;
}

@media (min-width: 640px) {
    .oa-header__inner { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
    .oa-header__inner { padding-inline: 2rem; }
}

.oa-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.oa-header__logo {
    height: 32px;
    width: auto;
}

/* "Benutzerportal" als ruhiges Label neben dem Logo, durch eine
   zarte Linie abgesetzt, nicht als zweite Headline. */
.oa-header__label {
    display: none;
    margin: 0;
    padding-left: 1rem;
    border-left: 1px solid var(--oa-border);
    color: var(--oa-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .oa-header__label { display: block; }
}

.oa-header__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.oa-header__user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--oa-border);
    border-radius: 9999px;
    background-color: var(--oa-surface);
    color: var(--oa-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.4375rem 0.875rem 0.4375rem 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.oa-header__user:hover,
.oa-header__user:focus {
    border-color: rgb(37 99 235 / 0.35);
    box-shadow: var(--oa-shadow-card);
    color: var(--oa-text-primary);
    text-decoration: none;
}

.oa-header__user::after {
    /* Bootstraps Caret sitzt sonst direkt am Text */
    margin-left: 0.125rem;
}

/* Avatar-Initiale im Signature-Gradient */
.oa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: var(--oa-grad);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

/* Gradient-Pille: der eine starke CTA im Header */
.oa-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: none;
    border-radius: 9999px;
    background: var(--oa-grad);
    box-shadow: var(--oa-shadow-cta);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.oa-cta:hover,
.oa-cta:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--oa-shadow-cta-hover);
    text-decoration: none;
}

/* Footer: dunkler Navy-Anker mit Signature-Hairline und Glow */
.oa-footer {
    position: relative;
    overflow: hidden;
    margin-top: auto;
    background-color: var(--oa-ink);
    color: rgb(255 255 255 / 0.6);
}

.oa-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 10%, #1e55d6 35%, #38cfff 50%, #1e55d6 65%, transparent 90%);
}

.oa-footer::after {
    content: "";
    position: absolute;
    top: -6rem;
    left: 50%;
    width: 70%;
    height: 14rem;
    transform: translateX(-50%);
    pointer-events: none;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.12;
    background: radial-gradient(ellipse at center, #2563eb 0%, transparent 70%);
}

.oa-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin-inline: auto;
    padding: 2.5rem 1rem 2rem;
}

@media (min-width: 640px) {
    .oa-footer__inner { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
    .oa-footer__inner { padding-inline: 2rem; }
}

.oa-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.oa-footer__logo {
    height: 28px;
    width: auto;
    /* Blaues Logo auf dunklem Grund invertieren -> weiss */
    filter: brightness(0) invert(1);
}

.oa-footer__company {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgb(255 255 255 / 0.55);
}

.oa-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.oa-footer a {
    color: rgb(255 255 255 / 0.6);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.oa-footer a:hover {
    color: #fff;
    text-decoration: none;
}

.oa-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.5);
}

.oa-footer__bottom p { margin: 0; color: inherit; }

/* ---------- 7. Utilities ---------- */
.oa-stack > * + * { margin-top: 1.5rem; }

.oa-text-muted { color: var(--oa-text-muted) !important; }
.oa-text-secondary { color: var(--oa-text-secondary) !important; }
.oa-text-primary { color: var(--oa-text-primary) !important; }

.oa-grad-text {
    background: var(--oa-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Kennzahl-Kachel (Cockpit: Status, Kontrakte, Sessions, Zahldatum) */
.oa-stat {
    border: 1px solid var(--oa-border);
    border-radius: var(--oa-radius-lg);
    background-color: var(--oa-surface);
    padding: 1rem 1.125rem;
}

.oa-stat__label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--oa-text-muted);
}

.oa-stat__value {
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--oa-text-primary);
    letter-spacing: -0.01em;
}

/* Rechtstexte (Datenschutz, Haftungsausschluss, AGB): kompaktere
   Prosa-Skala. Bootstraps h2/h3 waeren ueber ~20 Paragraphen-
   Ueberschriften hinweg zu laut. Nur Groessen und Abstaende, die
   Farben kommen aus der Basis-Typografie weiter oben. */
/* Die Rechtstexte enthalten ausgeschriebene URLs (Google, Facebook,
   Interactive Brokers). Ohne Umbruchregel schieben sie auf schmalen
   Viewports die ganze Seite auf - gemessen 570px Inhalt bei 375px
   Schirm. */
.oa-legal { overflow-wrap: anywhere; }

/* Kompakte Skala: 14px statt 16px, Durchschuss 1.5 statt 1.6. Ueber
   zwanzig Bildschirmseiten Rechtstext macht das einen spuerbaren
   Unterschied beim Scrollen. */
.oa-legal { font-size: 0.875rem; line-height: 1.5; }
.oa-legal p,
.oa-legal li { font-size: inherit; line-height: inherit; }
.oa-legal h2 { font-size: 1.0625rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.oa-legal h3 { font-size: 0.9375rem; margin-top: 1.5rem; margin-bottom: 0.375rem; }
.oa-legal h4 { font-size: 0.875rem; margin-top: 1.125rem; margin-bottom: 0.25rem; }
.oa-legal p { margin-bottom: 0.5rem; }
.oa-legal ul, .oa-legal ol { margin-bottom: 0.5rem; }
.oa-legal li { margin-bottom: 0.1875rem; }
.oa-legal > :first-child { margin-top: 0; }

/* Alt-Markup benutzt feste Pixelbreiten (width:800px, min-width:1350px),
   die auf kleinen Viewports horizontal scrollen. Im neuen Design wird
   die Breite ueber die Container gesteuert. */
.oa-w-reset {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}