/* =========================================================================
   FamilyBase Theme — v3 "Private Wealth"
   Ruhig, gedeckt, seriös. Light-only. Inspired by Stripe Dashboard, Linear, Notion.

   Diese Datei wird NACH app.css geladen und übersteuert deren Tokens.
   Alle alten --fb-* Variablen werden am Ende neu gemappt, damit topics.css,
   family.css, portfolio.css ohne Änderung den neuen Look erhalten.

   Migrations-Strategie:
   1. <link href="/assets/css/theme.css"> NACH app.css in core/layout/header.php.
   2. Gradients & Lila-Akzente werden per Selektor überschrieben (siehe unten).
   3. Schritt-für-Schritt: alte Module-CSS-Dateien entrümpeln (Emojis, bunte
      Chips, Topic-Farben, translate/scale Hover).
   ========================================================================= */

:root {
    /* ---------- Slate Scale (9 steps) ---------- */
    --fb-slate-50:  #f8fafc;
    --fb-slate-100: #f1f5f9;
    --fb-slate-200: #e2e8f0;
    --fb-slate-300: #cbd5e1;
    --fb-slate-400: #94a3b8;
    --fb-slate-500: #64748b;
    --fb-slate-600: #475569;
    --fb-slate-700: #334155;
    --fb-slate-800: #1e293b;
    --fb-slate-900: #0f172a;

    /* ---------- Accent ---------- */
    --fb-accent:        #1e3a8a;   /* deep navy, used for links & focus only */
    --fb-accent-hover:  #1e40af;

    /* ---------- Semantic (dezent) ---------- */
    --fb-success:     #047857;
    --fb-success-bg:  #ecfdf5;
    --fb-success-bd:  #a7f3d0;
    --fb-warning:     #b45309;
    --fb-warning-bg:  #fffbeb;
    --fb-warning-bd:  #fde68a;
    --fb-danger:      #b91c1c;
    --fb-danger-bg:   #fef2f2;
    --fb-danger-bd:   #fecaca;

    /* ---------- Surface ---------- */
    --fb-bg:         #f8fafc;   /* Body-Hintergrund */
    --fb-surface:    #ffffff;   /* Cards, Inputs */
    --fb-border:     #e2e8f0;   /* Default-Border */
    --fb-border-strong: #cbd5e1;

    /* ---------- Text ---------- */
    --fb-text:        #0f172a;   /* primary text */
    --fb-text-muted:  #475569;
    --fb-text-subtle: #64748b;
    --fb-text-faint:  #94a3b8;

    /* ---------- Typography ---------- */
    --fb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fb-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fb-fs-11: 11px;
    --fb-fs-12: 12px;
    --fb-fs-13: 13px;
    --fb-fs-14: 14px;
    --fb-fs-15: 15px;
    --fb-fs-17: 17px;
    --fb-fs-20: 20px;
    --fb-fs-24: 24px;
    --fb-fs-32: 32px;

    --fb-fw-regular:  400;
    --fb-fw-medium:   500;
    --fb-fw-semibold: 600;

    --fb-lh-tight: 1.3;
    --fb-lh-body:  1.5;
    --fb-lh-relaxed: 1.65;

    /* ---------- Spacing (4pt grid) ---------- */
    --fb-space-1:  4px;
    --fb-space-2:  8px;
    --fb-space-3:  12px;
    --fb-space-4:  16px;
    --fb-space-5:  20px;
    --fb-space-6:  24px;
    --fb-space-8:  32px;
    --fb-space-10: 40px;
    --fb-space-12: 48px;
    --fb-space-16: 64px;

    /* ---------- Radius ---------- */
    --fb-radius-sm: 4px;
    --fb-radius-md: 8px;

    /* ---------- Shadow (sehr dezent, kein blau) ---------- */
    --fb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --fb-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --fb-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.04);

    /* ---------- Focus Ring ---------- */
    --fb-ring: 0 0 0 3px rgba(15, 23, 42, 0.08);
    --fb-ring-danger: 0 0 0 3px rgba(185, 28, 28, 0.10);

    /* ---------- Motion ---------- */
    --fb-dur-fast: 120ms;
    --fb-dur-base: 160ms;
    --fb-ease:     cubic-bezier(0.2, 0, 0.15, 1);

    /* ---------- Layout ---------- */
    --fb-container: 1200px;
    --fb-header-h:  56px;

    /* =========================================================
       LEGACY-TOKEN-ALIASE — mapping old --fb-* to new scale.
       Erlaubt, dass topics.css/family.css/portfolio.css ohne
       Änderung den neuen Look bekommen.
       ========================================================= */
    --fb-primary:        var(--fb-slate-900);
    --fb-primary-dark:   var(--fb-slate-800);
    --fb-primary-light:  var(--fb-slate-100);
    --fb-primary-50:     var(--fb-slate-50);
    --fb-purple:         var(--fb-slate-700);   /* kill lila */
    --fb-success-dark:   var(--fb-success);
    --fb-danger-light:   var(--fb-danger-bg);
    --fb-gray-50:  var(--fb-slate-50);
    --fb-gray-100: var(--fb-slate-100);
    --fb-gray-200: var(--fb-slate-200);
    --fb-gray-300: var(--fb-slate-300);
    --fb-gray-400: var(--fb-slate-400);
    --fb-gray-500: var(--fb-slate-500);
    --fb-gray-600: var(--fb-slate-600);
    --fb-gray-700: var(--fb-slate-700);
    --fb-gray-800: var(--fb-slate-800);
    --fb-gray-900: var(--fb-slate-900);
    --fb-white: #ffffff;
    --fb-radius:     var(--fb-radius-md);
    --fb-radius-lg:  var(--fb-radius-md);     /* 8px statt 14px */
    --fb-shadow:     var(--fb-shadow-sm);
    --fb-shadow-xl:  var(--fb-shadow-lg);
    --fb-font:       var(--fb-font-sans);
    --fb-mono:       var(--fb-font-mono);
    --fb-transition: var(--fb-dur-base) var(--fb-ease);
}

/* =========================================================================
   RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--fb-font-sans);
    font-size: var(--fb-fs-14);
    font-weight: var(--fb-fw-regular);
    line-height: var(--fb-lh-body);
    color: var(--fb-text);
    background: var(--fb-bg);
    margin: 0;
    min-height: 100vh;
    font-feature-settings: 'cv11', 'ss01';   /* Inter niceties */
}

::selection { background: var(--fb-slate-200); color: var(--fb-slate-900); }

/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--fb-slate-900);
    font-weight: var(--fb-fw-semibold);
    line-height: var(--fb-lh-tight);
    letter-spacing: -0.01em;
    margin: 0 0 var(--fb-space-4);
}
h1 { font-size: var(--fb-fs-24); letter-spacing: -0.02em; }
h2 { font-size: var(--fb-fs-17); color: var(--fb-slate-800); }
h3 { font-size: var(--fb-fs-15); color: var(--fb-slate-800); }
h4 { font-size: var(--fb-fs-14); color: var(--fb-slate-700); font-weight: var(--fb-fw-medium); }
h5, h6 { font-size: var(--fb-fs-13); color: var(--fb-slate-700); font-weight: var(--fb-fw-medium); }

p { margin: 0 0 var(--fb-space-4); color: var(--fb-text); }
small, .fb-meta { font-size: var(--fb-fs-12); color: var(--fb-text-subtle); }
.fb-muted { color: var(--fb-text-muted); }
.fb-subtle { color: var(--fb-text-subtle); }
.fb-faint { color: var(--fb-text-faint); }

a {
    color: var(--fb-accent);
    text-decoration: none;
    transition: color var(--fb-dur-fast) var(--fb-ease);
}
a:hover { color: var(--fb-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

strong, b { font-weight: var(--fb-fw-semibold); color: var(--fb-slate-900); }
code, kbd, samp { font-family: var(--fb-font-mono); font-size: 0.92em; }
code {
    background: var(--fb-slate-100);
    color: var(--fb-slate-800);
    padding: 1px 5px;
    border-radius: var(--fb-radius-sm);
}

/* Numbers in tables & financial contexts */
.fb-num, .fb-table td.fb-num, .fb-table td[data-num] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* =========================================================================
   LAYOUT — Header, Container, Main
   ========================================================================= */
.fb-header {
    display: flex;
    align-items: center;
    gap: var(--fb-space-6);
    height: var(--fb-header-h);
    padding: 0 var(--fb-space-6);
    background: var(--fb-surface);
    border-bottom: 1px solid var(--fb-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: none;             /* no shadow — kill the old blur */
    backdrop-filter: none;
}

.fb-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.fb-header__brand:hover { opacity: 0.8; text-decoration: none; }
.fb-header__brand img { display: block; height: 34px; width: auto; max-height: 40px; }

.fb-header__brand a {
    font-size: var(--fb-fs-15);
    font-weight: var(--fb-fw-semibold);
    color: var(--fb-slate-900);
    letter-spacing: -0.01em;
}
/* Kill gradient text on brand */
.fb-header__brand strong {
    background: none !important;
    -webkit-text-fill-color: var(--fb-slate-900) !important;
    color: var(--fb-slate-900);
}

.fb-header__nav { display: flex; gap: var(--fb-space-1); flex: 1; }

.fb-header__user {
    display: flex;
    align-items: center;
    gap: var(--fb-space-3);
    font-size: var(--fb-fs-13);
    color: var(--fb-text-muted);
}
.fb-header__user-name { color: var(--fb-text-muted); font-weight: var(--fb-fw-medium); }

.fb-main { padding: var(--fb-space-8) 0 var(--fb-space-12); }

.fb-container {
    max-width: var(--fb-container);
    margin: 0 auto;
    padding: 0 var(--fb-space-6);
}

.fb-breadcrumb {
    font-size: var(--fb-fs-12);
    color: var(--fb-text-faint);
    margin-bottom: var(--fb-space-3);
}
.fb-breadcrumb a { color: var(--fb-text-faint); }
.fb-breadcrumb a:hover { color: var(--fb-slate-700); text-decoration: none; }
.fb-breadcrumb__sep { margin: 0 var(--fb-space-2); color: var(--fb-slate-300); }

/* Page-header: Titel + Actions nebeneinander */
.fb-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fb-space-4);
    margin-bottom: var(--fb-space-6);
}
.fb-page-header h1 { margin: 0; }
.fb-page-header__actions { display: flex; gap: var(--fb-space-2); flex-wrap: wrap; }

/* Editorial-Variante: mit Gold-Akzent, Border-Bottom, fuer Detail-Seiten */
.fb-page-header--editorial {
    align-items: flex-end;
    border-bottom: 1px solid var(--fb-slate-200);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

/* Title-Stack: Eyebrow + H1 + Hairline + Subtitle */
.fb-page-heading { min-width: 0; }
.fb-page-heading .fb-section-title { font-size: 28px; margin-top: 8px; }
.fb-page-heading > hr.fb-hairline-gold { margin: 8px 0 0; }
.fb-page-heading__subtitle {
    font-family: "Inter", sans-serif;
    color: var(--fb-slate-500);
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Back-Link: kleiner Pfeil ueber Editorial-Header */
.fb-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    color: var(--fb-slate-500);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.15s ease;
}
.fb-back-link:hover { color: var(--fb-ink); text-decoration: none; }

/* =========================================================================
   NAVIGATION — text-only, underlined-active
   ========================================================================= */
.fb-nav-link {
    display: inline-flex;
    align-items: center;
    height: var(--fb-header-h);
    padding: 0 var(--fb-space-3);
    font-size: var(--fb-fs-13);
    font-weight: var(--fb-fw-medium);
    color: var(--fb-text-muted);
    text-decoration: none;
    border-radius: 0;
    background: transparent;
    transition: color var(--fb-dur-fast) var(--fb-ease);
    position: relative;
}
.fb-nav-link:hover {
    color: var(--fb-slate-900);
    background: transparent;
    text-decoration: none;
}
.fb-nav-link--active {
    color: var(--fb-slate-900);
    font-weight: var(--fb-fw-semibold);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--fb-slate-900);
}
.fb-nav-link--active::after { content: none; }   /* kill old underline pseudo */

/* =========================================================================
   CARDS
   ========================================================================= */
.fb-card {
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-md);
    padding: var(--fb-space-5);
    margin-bottom: var(--fb-space-5);
    box-shadow: none;
    transition: box-shadow var(--fb-dur-base) var(--fb-ease),
                border-color var(--fb-dur-base) var(--fb-ease);
}
.fb-card:hover { box-shadow: var(--fb-shadow-sm); }

/* Interaktive Cards (Link-Cards, Listen-Items) */
.fb-card--interactive { cursor: pointer; }
.fb-card--interactive:hover {
    border-color: var(--fb-border-strong);
    box-shadow: var(--fb-shadow-sm);
}

.fb-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fb-space-3);
    margin: 0 0 var(--fb-space-3);
    padding: 0 0 var(--fb-space-3);
    border-bottom: 1px solid var(--fb-border);
}
.fb-card__header h2,
.fb-card__header h3 { margin: 0; }
.fb-card__title  { font-size: var(--fb-fs-15); font-weight: var(--fb-fw-semibold); color: var(--fb-slate-900); }
.fb-card__meta   { font-size: var(--fb-fs-12); color: var(--fb-text-subtle); }
.fb-card ul { padding-left: var(--fb-space-5); margin: var(--fb-space-3) 0; }
.fb-card li { margin-bottom: var(--fb-space-2); color: var(--fb-text-muted); }

/* =========================================================================
   BUTTONS — one size, three styles
   ========================================================================= */
.fb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fb-space-2);
    height: 32px;
    padding: 0 var(--fb-space-3);
    font-family: inherit;
    font-size: var(--fb-fs-13);
    font-weight: var(--fb-fw-medium);
    line-height: 1;
    letter-spacing: 0;
    border: 1px solid transparent;
    border-radius: var(--fb-radius-sm);
    cursor: pointer;
    text-decoration: none;
    user-select: none;
    transition: background var(--fb-dur-fast) var(--fb-ease),
                border-color var(--fb-dur-fast) var(--fb-ease),
                color var(--fb-dur-fast) var(--fb-ease);
    white-space: nowrap;
}
.fb-btn:focus-visible { outline: none; box-shadow: var(--fb-ring); }
.fb-btn[disabled], .fb-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.fb-btn--primary {
    background: var(--fb-slate-900) !important;   /* kill gradient */
    color: #ffffff !important;
    border-color: var(--fb-slate-900) !important;
    box-shadow: none !important;
    transform: none !important;
}
.fb-btn--primary:hover {
    background: var(--fb-slate-800) !important;
    border-color: var(--fb-slate-800) !important;
    transform: none !important;
    box-shadow: none !important;
    text-decoration: none;
    color: #ffffff !important;
}

/* =========================================================================
   FORM ACTIONS — one predictable place, iOS-style
   Primary actions live at the top of every full form. Secondary actions stay
   calm on the left; destructive actions stay separated.
   ========================================================================= */
form:has(> .fb-form-actions) {
    display: flex;
    flex-direction: column;
}

form:has(> .fb-form-actions) > .fb-form-actions {
    order: -10;
    position: sticky;
    top: calc(var(--fb-header-h) + var(--fb-space-2));
    z-index: 40;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: var(--fb-space-2) !important;
    min-height: 46px;
    margin: 0 0 var(--fb-space-5) 0 !important;
    padding: var(--fb-space-2) 0 var(--fb-space-3) 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--fb-border);
    background: color-mix(in srgb, var(--fb-surface) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

form:has(> .fb-form-actions) > .fb-form-actions > .fb-btn--primary,
form:has(> .fb-form-actions) > .fb-form-actions > .fb-btn--navy {
    order: 20;
    margin-left: auto !important;
}

form:has(> .fb-form-actions) > .fb-form-actions > .fb-btn--danger {
    order: 0;
    margin-left: 0 !important;
    margin-right: auto !important;
}

form:has(> .fb-form-actions) > .fb-form-actions > .fb-btn--subtle,
form:has(> .fb-form-actions) > .fb-form-actions > a {
    order: 10;
}

form:has(> .fb-form-actions) > .fb-form-actions > .fb-btn:only-child {
    margin-left: auto !important;
}

.fb-btn--subtle {
    background: var(--fb-surface);
    color: var(--fb-slate-700);
    border-color: var(--fb-border);
}
.fb-btn--subtle:hover {
    background: var(--fb-slate-50);
    border-color: var(--fb-border-strong);
    color: var(--fb-slate-900);
    text-decoration: none;
}

.fb-btn--ghost {
    background: transparent;
    color: var(--fb-slate-700);
    border-color: transparent;
}
.fb-btn--ghost:hover {
    background: var(--fb-slate-100);
    color: var(--fb-slate-900);
    text-decoration: none;
}

.fb-btn--danger {
    background: var(--fb-surface);
    color: var(--fb-danger);
    border-color: var(--fb-danger-bd);
}
.fb-btn--danger:hover {
    background: var(--fb-danger-bg);
    border-color: var(--fb-danger);
    color: var(--fb-danger);
    text-decoration: none;
}
.fb-btn--danger:focus-visible { box-shadow: var(--fb-ring-danger); }

/* Old --small / --full still supported but --small is discouraged going forward */
.fb-btn--small { height: 28px; padding: 0 var(--fb-space-2); font-size: var(--fb-fs-12); }
.fb-btn--full  { width: 100%; }

.fb-btn .fb-btn__icon {
    width: 14px; height: 14px;
    flex-shrink: 0;
    display: inline-block;
}

/* Dashboard action bar */
.fb-dashboard-actions {
    display: flex;
    gap: var(--fb-space-2);
    margin-bottom: var(--fb-space-5);
    flex-wrap: wrap;
}

/* =========================================================================
   FORMS
   ========================================================================= */
.fb-form-group { margin-bottom: var(--fb-space-4); }

.fb-form-group label,
.fb-label {
    display: block;
    font-size: var(--fb-fs-12);
    font-weight: var(--fb-fw-medium);
    color: var(--fb-text-muted);
    letter-spacing: 0;
    text-transform: none !important;   /* kill old uppercase label */
    margin-bottom: var(--fb-space-1);
}

.fb-form-group input,
.fb-form-group textarea,
.fb-form-group select,
.fb-input, .fb-textarea, .fb-select {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    font-family: inherit;
    font-size: var(--fb-fs-13);
    color: var(--fb-slate-900);
    background: var(--fb-surface);
    border: 1px solid var(--fb-border-strong);
    border-radius: var(--fb-radius-sm);
    transition: border-color var(--fb-dur-fast) var(--fb-ease),
                box-shadow var(--fb-dur-fast) var(--fb-ease);
    appearance: none;
}
.fb-form-group textarea, .fb-textarea {
    height: auto;
    min-height: 96px;
    padding: 8px 10px;
    line-height: var(--fb-lh-body);
    resize: vertical;
}
.fb-form-group select, .fb-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Native Checkboxes + Radios behalten — die generische input-Regel oben deaktiviert
   sonst das System-Rendering (keine sichtbaren Haken mehr!).
   !important noetig, weil viele Inline-Styles im HTML (width:16px etc.) sonst gewinnen. */
.fb-form-group input[type="checkbox"],
.fb-form-group input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: initial !important;
    height: auto !important;
}
/* Explizite Groesse nur wenn keine inline-Groesse definiert ist */
.fb-form-group input[type="checkbox"]:not([style*="width"]),
.fb-form-group input[type="radio"]:not([style*="width"]) {
    width: auto !important;
}

.fb-form-group input:hover,
.fb-form-group textarea:hover,
.fb-form-group select:hover { border-color: var(--fb-slate-400); }

.fb-form-group input:focus,
.fb-form-group textarea:focus,
.fb-form-group select:focus,
.fb-input:focus, .fb-textarea:focus, .fb-select:focus {
    outline: none;
    border-color: var(--fb-slate-900);
    box-shadow: var(--fb-ring);
}

.fb-form-group input::placeholder,
.fb-textarea::placeholder { color: var(--fb-text-faint); }

.fb-form-hint { display: block; margin-top: var(--fb-space-1); font-size: var(--fb-fs-12); color: var(--fb-text-subtle); }
.fb-form-error { display: block; margin-top: var(--fb-space-1); font-size: var(--fb-fs-12); color: var(--fb-danger); }

.fb-form-group input[aria-invalid="true"],
.fb-form-group textarea[aria-invalid="true"],
.fb-form-group select[aria-invalid="true"] {
    border-color: var(--fb-danger);
}
.fb-form-group input[aria-invalid="true"]:focus { box-shadow: var(--fb-ring-danger); }

.fb-checkbox, .fb-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--fb-space-2);
    font-size: var(--fb-fs-13);
    color: var(--fb-slate-800);
    cursor: pointer;
}
.fb-checkbox input, .fb-radio input { width: 14px; height: 14px; margin: 0; accent-color: var(--fb-slate-900); }

/* =========================================================================
   TABLES
   ========================================================================= */
.fb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fb-fs-13);
    color: var(--fb-slate-800);
}
.fb-table thead th {
    text-align: left;
    font-size: var(--fb-fs-12);
    font-weight: var(--fb-fw-medium);
    color: var(--fb-text-subtle);
    letter-spacing: 0.02em;
    padding: var(--fb-space-2) var(--fb-space-3);
    border-bottom: 1px solid var(--fb-border);
    background: transparent;
    white-space: nowrap;
}
.fb-table tbody td {
    padding: var(--fb-space-3);
    border-bottom: 1px solid var(--fb-border);
    vertical-align: middle;
}
.fb-table tbody tr:last-child td { border-bottom: none; }
.fb-table tbody tr:nth-child(even) td { background: var(--fb-slate-50); }
.fb-table tbody tr:hover td { background: var(--fb-slate-100); }
.fb-table td.fb-num, .fb-table th.fb-num { text-align: right; font-variant-numeric: tabular-nums; }

/* =========================================================================
   CHIPS / TAGS
   ========================================================================= */
.fb-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--fb-space-1);
    height: 22px;
    padding: 0 var(--fb-space-2);
    font-size: var(--fb-fs-12);
    font-weight: var(--fb-fw-medium);
    line-height: 1;
    color: var(--fb-slate-700);
    background: var(--fb-slate-100);
    border: 1px solid transparent;
    border-radius: var(--fb-radius-sm);
    white-space: nowrap;
}
.fb-chip--outline {
    background: var(--fb-surface);
    border-color: var(--fb-border);
    color: var(--fb-text-muted);
}
.fb-chip--success { background: var(--fb-success-bg); color: var(--fb-success); }
.fb-chip--warning { background: var(--fb-warning-bg); color: var(--fb-warning); }
.fb-chip--danger  { background: var(--fb-danger-bg);  color: var(--fb-danger);  }
.fb-chip--navy    { background: var(--fb-navy, #1e2761); color: #fff; }
.fb-chip--gold    { background: var(--fb-gold, #a98644); color: #fff; }
.fb-chip--muted   { background: var(--fb-slate-200); color: var(--fb-slate-500); }

.fb-chip__icon {
    width: 12px; height: 12px;
    display: inline-block;
    flex-shrink: 0;
}
.fb-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px; height: 14px;
    margin-left: var(--fb-space-1);
    border-radius: 2px;
    color: var(--fb-text-subtle);
    cursor: pointer;
    background: transparent;
    border: none;
}
.fb-chip__remove:hover { background: var(--fb-slate-200); color: var(--fb-slate-900); }

/* =========================================================================
   ALERTS
   ========================================================================= */
.fb-alert {
    padding: var(--fb-space-3) var(--fb-space-4);
    border-radius: var(--fb-radius-md);
    font-size: var(--fb-fs-13);
    font-weight: var(--fb-fw-regular);
    margin-bottom: var(--fb-space-4);
    border: 1px solid transparent;
}
.fb-alert--error   { background: var(--fb-danger-bg);  color: var(--fb-danger);  border-color: var(--fb-danger-bd);  }
.fb-alert--success { background: var(--fb-success-bg); color: var(--fb-success); border-color: var(--fb-success-bd); }
.fb-alert--warning { background: var(--fb-warning-bg); color: var(--fb-warning); border-color: var(--fb-warning-bd); }
.fb-alert--info    { background: var(--fb-slate-50);   color: var(--fb-slate-800); border-color: var(--fb-border); }

/* =========================================================================
   AUTH PAGES — no pastel gradient
   ========================================================================= */
.fb-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--fb-space-6);
    background: var(--fb-slate-50) !important;   /* flat, not gradient */
}

.fb-auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--fb-surface);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-md);
    padding: var(--fb-space-8);
    box-shadow: var(--fb-shadow-md);
}

.fb-auth-logo { text-align: center; margin-bottom: var(--fb-space-6); }
.fb-auth-logo h1 {
    font-size: var(--fb-fs-24);
    margin-bottom: var(--fb-space-1);
    background: none !important;
    -webkit-text-fill-color: var(--fb-slate-900) !important;
    color: var(--fb-slate-900) !important;
}
.fb-auth-logo p { color: var(--fb-text-subtle); font-size: var(--fb-fs-13); }

.fb-auth-footer {
    text-align: center;
    margin-top: var(--fb-space-5);
    font-size: var(--fb-fs-13);
    color: var(--fb-text-subtle);
}

/* =========================================================================
   ERROR PAGES
   ========================================================================= */
.fb-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: var(--fb-space-6);
}
.fb-error-card h1 { font-size: var(--fb-fs-32); color: var(--fb-slate-300); font-weight: var(--fb-fw-semibold); }
.fb-error-card p  { margin-bottom: var(--fb-space-5); color: var(--fb-text-subtle); font-size: var(--fb-fs-14); }

/* =========================================================================
   UTILITY CLASSES (small, opinionated)
   ========================================================================= */
.fb-stack   { display: flex; flex-direction: column; gap: var(--fb-space-3); }
.fb-stack-4 { display: flex; flex-direction: column; gap: var(--fb-space-4); }
.fb-stack-6 { display: flex; flex-direction: column; gap: var(--fb-space-6); }
.fb-row     { display: flex; align-items: center; gap: var(--fb-space-3); }
.fb-row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--fb-space-3); }
.fb-spacer  { flex: 1; }
.fb-hr      { border: none; border-top: 1px solid var(--fb-border); margin: var(--fb-space-5) 0; }

.fb-text-right  { text-align: right; }
.fb-text-center { text-align: center; }
.fb-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Generic Tab-Scroll — gilt auf allen Breiten, nicht nur Mobile */
.fb-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.fb-tabs::-webkit-scrollbar { height: 3px; }

@media (max-width: 768px) {
    .fb-header {
        flex-wrap: wrap;
        height: auto;
        padding: var(--fb-space-3) var(--fb-space-4);
        gap: var(--fb-space-2);
    }
    .fb-header__nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fb-nav-link { height: 40px; }
    .fb-container { padding: 0 var(--fb-space-4); }
    .fb-page-header { flex-direction: column; align-items: flex-start; }

    /* Grid-Fallbacks — Inline-Styles mit repeat(N, 1fr) werden hier ueberschrieben */
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tabellen scrollbar auf Mobile */
    .fb-card > table,
    .fb-card-body > table { display: block; overflow-x: auto; white-space: nowrap; }
    .fb-auth-card  { padding: var(--fb-space-6); }
    form:has(> .fb-form-actions) > .fb-form-actions {
        top: 0;
        margin-left: calc(var(--fb-space-4) * -1) !important;
        margin-right: calc(var(--fb-space-4) * -1) !important;
        padding-left: var(--fb-space-4) !important;
        padding-right: var(--fb-space-4) !important;
    }
}

/* Smaller Mobile: Single-Column fuer alle Grids, KPI-Cards 1-spaltig */
@media (max-width: 480px) {
    [style*="grid-template-columns:repeat("],
    [style*="grid-template-columns: repeat("] {
        grid-template-columns: 1fr !important;
    }
    .fb-tax-subject-grid,
    .fb-tax-category-grid,
    .fb-dashboard-grid-editorial { grid-template-columns: 1fr !important; }
    .fb-dialog { max-height: 90vh; overflow-y: auto; }
    .fb-page-header--editorial h1.fb-section-title { font-size: 22px !important; }
    .fb-page-header__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .fb-page-header__actions .fb-btn { width: 100%; text-align: center; }
}

/* =========================================================================
   GRADIENT / LILA-KILL — defensive overrides für Alt-CSS
   ========================================================================= */
.fb-auth-logo h1,
.fb-header__brand strong {
    background-image: none !important;
    background-color: transparent !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--fb-slate-900) !important;
}

/* =========================================================================
   EDITORIAL LAYER — Hochglanz-Aesthetik (Private Wealth / Morningstar / Addepar)
   Source Serif 4 fuer Headlines & Zahlen, Gold-Akzent
   ========================================================================= */

:root {
    /* Editorial-Akzente */
    --fb-gold:      #a98644;  /* warm gold, dezent */
    --fb-gold-soft: #d4b877;
    --fb-ink:       #111827;  /* fast-schwarz fuer Headlines */
    --fb-parchment: #faf7f2;  /* warmes off-white fuer Hero-Sections */

    /* Font-Stacks */
    --fb-font-serif: "Source Serif 4", "Source Serif Pro", "Charter", "Georgia", serif;
}

.fb-serif {
    font-family: var(--fb-font-serif) !important;
    font-feature-settings: "liga", "kern", "onum";
}

.fb-display {
    font-family: var(--fb-font-serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--fb-ink);
    font-variant-numeric: tabular-nums lining-nums;
}

.fb-editorial-hero {
    position: relative;
    background:
        radial-gradient(ellipse 1200px 600px at 70% 10%, rgba(169, 134, 68, 0.08), transparent 60%),
        linear-gradient(180deg, var(--fb-parchment) 0%, #fdfcf9 100%);
    border: 1px solid var(--fb-slate-200);
    border-radius: 8px;
    padding: 40px 48px;
    overflow: hidden;
}

.fb-editorial-hero::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 48px;
    right: 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--fb-gold) 0%, transparent 40%);
    opacity: 0.4;
    display: none;
}

.fb-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fb-slate-500);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fb-eyebrow::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--fb-gold);
    display: inline-block;
}

.fb-kpi-serif {
    font-family: var(--fb-font-serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--fb-ink);
    font-variant-numeric: tabular-nums lining-nums;
    line-height: 1;
}

.fb-section-title {
    font-family: var(--fb-font-serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--fb-ink);
    margin: 0 0 4px;
    line-height: 1.2;
}

.fb-hairline {
    border: 0;
    border-top: 1px solid var(--fb-slate-200);
    margin: 0;
}

.fb-hairline-gold {
    border: 0;
    border-top: 1px solid var(--fb-gold);
    opacity: 0.35;
    margin: 0;
    width: 48px;
}

/* Headlines via Selektor — H1/H2 im Editorial-Look ohne extra Klasse */
body .fb-editorial-hero h1,
body .fb-editorial-hero h2 {
    font-family: var(--fb-font-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--fb-ink);
}

/* Dashboard-specific */
.fb-dashboard-grid-editorial {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.fb-col-span-4  { grid-column: span 4; }
.fb-col-span-5  { grid-column: span 5; }
.fb-col-span-6  { grid-column: span 6; }
.fb-col-span-7  { grid-column: span 7; }
.fb-col-span-8  { grid-column: span 8; }
.fb-col-span-12 { grid-column: span 12; }

@media (max-width: 900px) {
    .fb-col-span-4, .fb-col-span-5, .fb-col-span-6, .fb-col-span-7, .fb-col-span-8 { grid-column: span 12; }
}

/* Zahlen-Anzeige im Tabellen-Kontext */
.fb-num-serif {
    font-family: var(--fb-font-serif);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Chart-Container */
.fb-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 220px;
}

.fb-chart-wrap canvas {
    max-height: 320px;
}

/* Delta-Indikator */
.fb-delta-pos {
    color: #047857;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.fb-delta-neg {
    color: #b91c1c;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   HERITAGE LAYER — Schuller Investment Navy + Bild-Backgrounds
   ========================================================================= */

:root {
    --fb-navy:       #1e2761;  /* aus Schuller Investment Logo */
    --fb-navy-deep:  #151b45;
    --fb-navy-soft:  #3d4a8c;
}

/* Hero mit Panorama-Bild */
.fb-hero-heritage {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 380px;
    background:
        linear-gradient(to bottom, rgba(30,39,97,0.2) 0%, rgba(21,27,69,0.85) 60%, rgba(15,20,50,0.95) 100%),
        url('/assets/img/heritage/thurnau-panorama.jpg');
    background-size: cover;
    background-position: center 30%;
    color: white;
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fb-hero-heritage .fb-eyebrow {
    color: rgba(255,255,255,0.7);
}

.fb-hero-heritage .fb-eyebrow::before {
    background: var(--fb-gold);
}

.fb-hero-heritage .fb-kpi-serif {
    color: white !important;
}

.fb-hero-heritage a {
    color: var(--fb-gold-soft);
    border-bottom-color: var(--fb-gold);
}

/* Pill-Badges im Hero-Bild (Vorsorge / Aufgaben / Faellig).
 * Solider Hintergrund statt 14%-Weiss-Transparenz fuer bessere Lesbarkeit
 * ueber variablen Bild-Helligkeiten. Gold-Variante fuer "urgent".
 */
.fb-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(10, 14, 40, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.fb-hero-chip:hover {
    background: rgba(10, 14, 40, 0.75);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-1px);
}
.fb-hero-chip__label {
    opacity: 0.85;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.fb-hero-chip__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    letter-spacing: 0.01em;
}
.fb-hero-chip--urgent {
    background: linear-gradient(135deg, rgba(169,134,68,0.85), rgba(140,104,54,0.85));
    border-color: rgba(255,235,180,0.6);
}
.fb-hero-chip--urgent:hover {
    background: linear-gradient(135deg, rgba(185,148,82,0.92), rgba(155,116,68,0.92));
    border-color: rgba(255,235,180,0.85);
}
.fb-hero-chip--static {
    /* Nicht anklickbar (z.B. „Nichts dringendes"-Fall) */
    background: rgba(10, 14, 40, 0.45);
    border-color: rgba(255, 255, 255, 0.3);
    cursor: default;
}

/* Heritage-Card mit Bild */
.fb-heritage-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 220px;
    color: white;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.fb-heritage-card--schloss {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%),
        url('/assets/img/heritage/thurnau-hof.jpg');
    background-size: cover;
    background-position: center;
}

.fb-heritage-card h3 {
    font-family: var(--fb-font-serif);
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 4px;
    color: white;
    letter-spacing: -0.01em;
}

.fb-heritage-card p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}

/* Full-Bleed Section-Header mit Logo-Brand */
.fb-brand-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
    background: white;
    border: 1px solid var(--fb-slate-200);
    border-radius: 8px;
}

.fb-brand-strip__logo {
    height: 42px;
    width: auto;
}

.fb-brand-strip__divider {
    width: 1px;
    height: 32px;
    background: var(--fb-slate-300);
}

/* Navy-Button-Variante */
.fb-btn--navy {
    background: var(--fb-navy) !important;
    color: white !important;
    border-color: var(--fb-navy) !important;
}

.fb-btn--navy:hover {
    background: var(--fb-navy-deep) !important;
    border-color: var(--fb-navy-deep) !important;
}

/* Allocation-Bar (grosse visuelle Verteilung statt Donut nur) */
.fb-alloc-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--fb-slate-100);
}

.fb-alloc-bar__segment {
    height: 100%;
    transition: opacity 0.2s;
}

.fb-alloc-bar__segment:hover {
    opacity: 0.85;
}

/* Progress-Bar (fuer Checklisten, Aufgaben, etc.) */
.fb-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--fb-slate-100);
    overflow: hidden;
    position: relative;
}

.fb-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--fb-navy, #1e2761), var(--fb-gold, #a98644));
    border-radius: 999px;
    transition: width 0.5s ease;
}

.fb-progress--sm { height: 6px; }
.fb-progress--success .fb-progress__bar { background: var(--fb-success, #047857); }
.fb-progress--warning .fb-progress__bar { background: var(--fb-warning, #b45309); }
.fb-progress--danger  .fb-progress__bar { background: var(--fb-danger,  #b91c1c); }

/* Stat-Tile mit Akzentstreifen oben */
.fb-stat-tile {
    position: relative;
    padding: 28px 26px;
    background: white;
    border: 1px solid var(--fb-slate-200);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.fb-stat-tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--fb-gold);
}

.fb-stat-tile:hover { border-color: var(--fb-gold-soft, #d4b877); transform: translateY(-1px); }

.fb-stat-tile__value {
    font-family: var(--fb-font-serif);
    font-weight: 500;
    font-size: 56px;
    letter-spacing: -0.02em;
    color: var(--fb-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    margin: 12px 0 6px;
}

.fb-stat-tile__label {
    font-size: 12px;
    color: var(--fb-slate-600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}

/* Responsive Heritage-Hero */
@media (max-width: 900px) {
    .fb-hero-heritage { padding: 24px; min-height: 300px; }
    .fb-hero-heritage .fb-kpi-serif { font-size: 44px !important; }
}

/* Stat-Tile mit subtiler Schloss-Background (dezent, nicht ueberladen) */
.fb-stat-tile--heritage {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.75) 100%),
        url('/assets/img/heritage/thurnau-bw.jpg');
    background-size: cover;
    background-position: center;
}

.fb-stat-tile--heritage::before {
    background: var(--fb-navy);
}

/* Dashboard-Header-Brand-Bar (oben) */
.fb-dashboard-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: white;
    border: 1px solid var(--fb-slate-200);
    border-radius: 8px;
    margin-bottom: 16px;
}

.fb-dashboard-brand__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fb-dashboard-brand__logo {
    height: 34px;
    width: auto;
}

.fb-dashboard-brand__divider {
    width: 1px;
    height: 28px;
    background: var(--fb-slate-300);
}

.fb-dashboard-brand__meta {
    font-family: var(--fb-font-serif);
    font-size: 13px;
    color: var(--fb-slate-700);
    font-style: italic;
}

.fb-dashboard-brand__right {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fb-slate-500);
    font-weight: 500;
}

/* =========================================================================
   OVERRIDES fuer Legacy-Komponenten (alte Modul-CSS)
   Macht bestehende Klassen Heritage-konform ohne alle Module neu anzufassen
   ========================================================================= */

/* Avatar-Initialen: einheitlich Slate statt Rainbow */
.fb-avatar, .fb-avatar--sm, .fb-avatar--md, .fb-avatar--lg, .fb-avatar--xl {
    background: var(--fb-slate-200) !important;
    color: var(--fb-slate-800) !important;
    font-family: var(--fb-font-serif) !important;
    font-weight: 500 !important;
}

/* Badge-Farben vereinheitlichen: dezent statt knallig */
.fb-badge {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    background: var(--fb-slate-100) !important;
    color: var(--fb-slate-700) !important;
    border: 1px solid var(--fb-slate-200) !important;
}

.fb-badge--green { background: #ecfdf5 !important; color: #047857 !important; border-color: #a7f3d0 !important; }
.fb-badge--orange, .fb-badge--lightgreen { background: var(--fb-parchment) !important; color: var(--fb-ink) !important; border-color: var(--fb-gold-soft) !important; }
.fb-badge--gray { background: var(--fb-slate-100) !important; color: var(--fb-slate-600) !important; border-color: var(--fb-slate-200) !important; }

/* Family-Header: altes Emoji-Icon + Gradient entschaerfen (falls noch referenziert) */
.fb-family-header {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
.fb-family-header__icon {
    display: none !important;
}

/* World/Topic-Cards: keine bunten border-left-Akzente mehr */
.fb-topic-card, .fb-world-card, .fb-quick-card {
    border-left: 1px solid var(--fb-slate-200) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.fb-topic-card:hover, .fb-world-card:hover, .fb-quick-card:hover {
    border-color: var(--fb-slate-300) !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}

/* Filter-Chip aktiv: slate-900 statt primary-50 */
.fb-filter-chip {
    background: white !important;
    border: 1px solid var(--fb-slate-300) !important;
    color: var(--fb-slate-700) !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}

/* Primary-Buttons: keine Gradient-Hover-Lift mehr */
.fb-btn--primary {
    background: var(--fb-ink) !important;
    color: white !important;
    border-color: var(--fb-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}
.fb-btn--primary:hover {
    background: var(--fb-slate-800) !important;
    border-color: var(--fb-slate-800) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Tabellen: borderless + zebra */
.fb-table {
    border-collapse: collapse !important;
    width: 100% !important;
}
.fb-table thead th {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--fb-slate-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--fb-slate-200) !important;
    text-align: left !important;
}
.fb-table tbody td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    border-bottom: 1px solid var(--fb-slate-100) !important;
}
.fb-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.fb-table tbody tr:hover {
    background: var(--fb-slate-50) !important;
}

/* Alerts entschaerfen */
.fb-alert--success {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    color: #047857 !important;
}
.fb-alert--error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #b91c1c !important;
}

/* =========================================================================
   TAX MODULE — Subject-Grid + Year-Tabs + Category-Grid + Dialog
   ========================================================================= */

/* Subject-Grid (Overview) */
.fb-tax-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.fb-tax-subject-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.fb-tax-subject-card:hover {
    border-color: var(--fb-gold-soft, #d4b877);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(28,39,69,0.06);
    text-decoration: none;
}

.fb-tax-subject-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.fb-tax-subject-card__title {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--fb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fb-tax-subject-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--fb-slate-600);
    margin-top: 4px;
}
.fb-tax-subject-card__stats strong {
    color: var(--fb-ink);
    font-size: 14px;
}

.fb-tax-subject-card__years {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

/* Year-Tabs (nutzt .fb-tabs aus portfolio.css, fuegt "+ Neues Jahr"-Button hinzu) */
.fb-tax-year-tabs .fb-num-serif {
    font-size: 15px;
    font-weight: 500;
}

.fb-tabs__item--new {
    border: 1px dashed var(--fb-slate-300);
    background: transparent;
    color: var(--fb-slate-500);
    cursor: pointer;
    font-family: "Inter", sans-serif;
    font-size: 0.82rem;
    margin-left: auto;
}
.fb-tabs__item--new:hover {
    border-color: var(--fb-gold-soft, #d4b877);
    color: var(--fb-ink);
    background: var(--fb-parchment, #faf6ee);
}

/* Year-Bar (KPIs + Actions) */
.fb-tax-year-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: var(--fb-slate-50);
    border: 1px solid var(--fb-slate-200);
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.fb-tax-year-bar__kpis {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--fb-slate-700);
    align-items: baseline;
    flex-wrap: wrap;
}
.fb-tax-year-bar__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Category-Grid */
.fb-tax-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}

.fb-tax-category-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--fb-slate-200);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.fb-tax-category-card:hover {
    border-color: var(--fb-gold-soft, #d4b877);
    background: var(--fb-slate-50);
    text-decoration: none;
}
.fb-tax-category-card--has-entries {
    background: var(--fb-slate-50);
}
.fb-tax-category-card__title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.fb-tax-category-card__label {
    font-weight: 500;
    font-size: 14px;
    color: var(--fb-ink);
}
.fb-tax-category-card__amount {
    font-size: 14px;
    font-weight: 500;
    color: var(--fb-ink);
    font-variant-numeric: tabular-nums;
}
.fb-tax-category-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--fb-slate-500);
    gap: 8px;
}
.fb-tax-category-card__review {
    color: var(--fb-gold, #a98644);
    font-weight: 500;
}

/* Dialog einheitlich (fb-dialog + fb-dialog--form) */
.fb-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: 520px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    background: var(--fb-surface, #fff);
}
.fb-dialog::backdrop {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
}
.fb-dialog--form form {
    padding: 24px 28px;
}
.fb-dialog--form h2 {
    font-family: var(--fb-font-serif);
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 500;
    color: var(--fb-ink);
}
.fb-dialog--form .fb-form-group {
    margin-top: 12px;
}
.fb-dialog--form .fb-form-actions {
    margin-top: 18px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Mobile: Tabs scrollen, Year-Bar wrappt */
@media (max-width: 720px) {
    .fb-tax-year-tabs { overflow-x: auto; }
    .fb-tabs__item--new { margin-left: 0; }
    .fb-tax-year-bar { flex-direction: column; align-items: flex-start; }
    .fb-tax-subject-grid { grid-template-columns: 1fr; }
    .fb-tax-category-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Navigation: Gruppen mit Dropdown-Untermenue (Mein Bereich / Ablage / Finanzen)
 * ========================================================================= */
.fb-nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    outline: none;
}
.fb-nav-group__label {
    cursor: default;
    user-select: none;
}
.fb-nav-group__label::after {
    content: '\25BE'; /* ▾ */
    margin-left: 0.32em;
    font-size: 0.78em;
    opacity: 0.65;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.fb-nav-group:hover .fb-nav-group__label::after,
.fb-nav-group:focus-within .fb-nav-group__label::after {
    transform: translateY(1px);
    opacity: 1;
}
.fb-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--fb-slate-100, #e5e7eb);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    padding: 6px 0;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 80;
}
.fb-nav-group:hover > .fb-nav-dropdown,
.fb-nav-group:focus-within > .fb-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.fb-nav-dropdown .fb-nav-link {
    display: block;
    padding: 9px 16px;
    border-radius: 0;
    white-space: nowrap;
    font-weight: 400;
}
.fb-nav-dropdown .fb-nav-link:hover {
    background: var(--fb-parchment, #faf7f0);
}
.fb-nav-dropdown .fb-nav-link--active {
    color: var(--fb-gold, #a98644);
    font-weight: 600;
}
.fb-nav-dropdown .fb-nav-link--active::after {
    display: none; /* Active-Underline im Dropdown unterdruecken */
}
/* Active-Parent im Top-Bar leicht hervorheben */
.fb-nav-group--active > .fb-nav-group__label {
    color: var(--fb-gold, #a98644);
}

/* Mobile-Fallback: Dropdown wird zu aufklappbarem Block */
@media (max-width: 820px) {
    .fb-nav-group { display: block; width: 100%; }
    .fb-nav-dropdown {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0 0 0 14px;
        margin: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        background: transparent;
    }
    .fb-nav-group__label::after { display: none; }
}

/* =========================================================================
 * Header-Spotlight-Suche
 * ========================================================================= */
.fb-header__search {
    position: relative;
    margin-left: auto;
    margin-right: 12px;
    flex-shrink: 0;
}
#fb-search-input {
    width: 220px;
    padding: 6px 12px;
    border: 1px solid var(--fb-slate-200, #e5e7eb);
    border-radius: 999px;
    background: var(--fb-parchment, #faf6ee);
    font-size: 13px;
    color: var(--fb-ink, #1c1d24);
    outline: none;
    transition: width 0.18s ease, border-color 0.15s, background 0.15s;
}
#fb-search-input:focus {
    width: 320px;
    border-color: var(--fb-gold, #a98644);
    background: #fff;
}
#fb-search-input::placeholder {
    color: var(--fb-slate-400, #94a3b8);
    font-size: 12.5px;
}

.fb-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 380px;
    max-width: 520px;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--fb-slate-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.15);
    z-index: 200;
    padding: 4px 0;
    font-size: 13px;
}
.fb-search-loading,
.fb-search-empty {
    padding: 16px 20px;
    color: var(--fb-slate-500, #64748b);
    text-align: center;
    font-size: 13px;
}
.fb-search-group {
    padding: 4px 0;
    border-bottom: 1px solid var(--fb-slate-100, #f1f5f9);
}
.fb-search-group:last-of-type {
    border-bottom: 0;
}
.fb-search-group__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--fb-slate-500, #64748b);
    padding: 8px 16px 4px;
}
.fb-search-result {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--fb-ink, #1c1d24);
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
}
.fb-search-result:hover,
.fb-search-result--active {
    background: var(--fb-parchment, #faf6ee);
    border-left-color: var(--fb-gold, #a98644);
}
.fb-search-result__icon {
    font-size: 16px;
    line-height: 1.2;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fb-search-result__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.fb-search-result__title {
    font-weight: 500;
    font-size: 13.5px;
    color: var(--fb-ink, #1c1d24);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fb-search-result__subtitle {
    font-size: 11.5px;
    color: var(--fb-slate-500, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}
.fb-search-result mark {
    background: rgba(169, 134, 68, 0.25);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}
.fb-search-meta {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--fb-slate-400, #94a3b8);
    border-top: 1px solid var(--fb-slate-100, #f1f5f9);
    text-align: center;
}

@media (max-width: 820px) {
    .fb-header__search { display: none; }
}