/* static/css/style.css
 * Modernisiertes Design-System (Stripe/Vercel-inspiriert)
 * Primary: #0066ff (modernes Blau) | Accent: #f59e0b | Dark Sections: #0a0e27
 * Dark-Mode-System (data-theme="dark") bleibt vollständig erhalten.
 */

:root {
    /* --- Professional Color Palette (neu) --- */
    --primary-color: #0066ff;
    --primary-dark: #0047b3;
    --primary-light: #3d8bff;
    --primary-tint: rgba(0, 102, 255, 0.08);
    --accent-color: #f59e0b;
    --accent-hover: #d97706;
    --accent-tint: rgba(245, 158, 11, 0.10);
    --dark-section: #0a0e27;
    --dark-section-2: #111634;

    /* Bootstrap Colors preserved with custom primary */
    --bs-primary: #0066ff;
    --bs-secondary: #6c757d;
    --bs-light: #f8f9fa;
    --bs-dark: #0a0e27;
    --bs-warning: #f59e0b;

    /* Theme Colors (Default / Light) */
    --bg-body: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-secondary: #fafbfc;
    --bg-sidebar: #ffffff;

    --text-body: #0a0a0a;
    --text-muted: #666666;
    --text-inverse: #ffffff;

    --border-color: #eaeaea;
    --shadow-color: rgba(0, 0, 0, 0.06);

    /* Shadow-as-Border + Multi-Layer (Vercel/Stripe) */
    --shadow-border: 0 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-border-light: 0 0 0 1px rgba(0, 0, 0, 0.05);
    --shadow-card: rgba(50, 50, 93, 0.12) 0px 10px 30px -10px, rgba(0, 0, 0, 0.05) 0px 6px 12px -6px;
    --shadow-card-hover: rgba(50, 50, 93, 0.20) 0px 18px 40px -10px, rgba(0, 0, 0, 0.10) 0px 10px 20px -8px;
    --shadow-soft: 0 1px 2px 0 rgba(0,0,0,0.04), 0 1px 3px 0 rgba(0,0,0,0.06);

    --bs-body-color: var(--text-body);
    --bs-body-bg: var(--bg-body);

    --bs-body-font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --bs-font-sans-serif: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    --bs-link-hover-decoration: underline;

    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-card: 8px;
    --radius-lg: 12px;
}

[data-theme="dark"] {
    --bg-body: #141b26;
    --bg-surface: #243140;
    --bg-surface-secondary: #2f3f50;
    --bg-sidebar: #243140;

    --text-body: #e0e0e0;
    --text-muted: #a0a0a0;
    --text-inverse: #121212;

    --border-color: #4a5566;
    --shadow-color: rgba(0, 0, 0, 0.5);

    --shadow-border: 0 0 0 1px rgba(255, 255, 255, 0.08);
    --shadow-border-light: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-card: rgba(0, 0, 0, 0.4) 0px 10px 30px -10px, rgba(0, 0, 0, 0.3) 0px 6px 12px -6px;
    --shadow-card-hover: rgba(0, 0, 0, 0.55) 0px 18px 40px -10px, rgba(0, 0, 0, 0.4) 0px 10px 20px -8px;

    --primary-tint: rgba(0, 102, 255, 0.16);
    --accent-tint: rgba(245, 158, 11, 0.16);

    /* Bootstrap Overrides for Dark Mode */
    --bs-body-color: var(--text-body);
    --bs-body-bg: var(--bg-body);
    --bs-light: #2c2c2c;
    --bs-dark: #f8f9fa;

    /* Fix Dropdown Menus in Dark Mode */
    .dropdown-menu {
        background-color: var(--bg-surface);
        border-color: var(--border-color);
    }

    .dropdown-item {
        color: var(--text-body);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--bg-surface-secondary);
        color: var(--text-body);
    }

    .dropdown-divider {
        border-top-color: var(--border-color);
    }

    /* Fix Form Elements (Input, Select) */
    .form-control,
    .form-select {
        background-color: var(--bg-surface-secondary);
        border-color: var(--border-color);
        color: var(--text-body);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--bg-surface-secondary);
        border-color: var(--bs-primary);
        color: var(--text-body);
    }

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

    /* siehe Kommentar bei [data-theme="dark"] .input-group-text */
    .input-group-text {
        background-color: var(--bg-surface-secondary);
        border-color: var(--border-color);
        color: var(--text-body);
    }

    /* Hinweiskaesten -- siehe Kommentar im [data-theme="dark"]-Block */
    .alert-info {
        background-color: #1c3357;
        border-color: #2f5c99;
        color: #eaf3ff;
    }

    .alert-secondary {
        background-color: #2f3f50;
        border-color: #48586b;
        color: #f0f3f7;
    }

    .alert-warning {
        background-color: #4a3c12;
        border-color: #8a7320;
        color: #fff4cc;
    }

    .alert strong,
    .alert b,
    .alert em {
        color: inherit;
    }

    .form-text {
        color: #b9c4d0;
    }

    /* siehe Kommentarblock zu den Tooltips weiter unten */
    .text-muted {
        color: #a9b6c4 !important;
    }

    .bi-info-circle.text-muted {
        color: #8ab4f8 !important;
    }

    /* siehe Kommentarblock zu den Popovers */
    .popover {
        background-color: #1b2430;
        border-color: #3d4b5c;
    }

    .popover-header {
        background-color: #243140;
        border-bottom-color: #3d4b5c;
        color: #f2f5f8;
    }

    .popover-body {
        color: #e4e9ef;
    }

    .fa-info-circle {
        color: #8ab4f8;
    }

    .form-select option {
        background-color: var(--bg-surface);
        color: var(--text-body);
    }

    .bg-light {
        background-color: var(--bg-surface-secondary) !important;
    }

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

    .form-text {
        color: var(--text-muted) !important;
    }
}

/* --- Base Typography --- */
body {
    font-family: var(--bs-body-font-family);
    color: var(--text-body);
    line-height: 1.6;
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bs-body-font-family);
    font-weight: 600;
    color: inherit;
    letter-spacing: -0.02em;
}

h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.025em; }

.display-3,
.display-4,
.display-5 {
    letter-spacing: -0.03em;
}

/* --- Navbar --- */
.navbar-brand {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-body) !important;
    transition: var(--transition-smooth);
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

.nav-link.active,
.dropdown-item.active {
    font-weight: 600;
}

.navbar .dropdown-menu {
    border: none;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 0.4rem;
    min-width: 14rem;
}

.navbar .dropdown-item {
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    font-size: 0.92rem;
    transition: var(--transition-smooth);
}

.navbar .dropdown-item:hover {
    background-color: var(--primary-tint);
    color: var(--primary-color);
}

.navbar .dropdown-item.active {
    color: var(--primary-color);
    background-color: var(--primary-tint);
    font-weight: 600;
}

/* --- Buttons (modern, 8px radius, lift on hover) --- */
.btn {
    padding: 0.55rem 1.2rem;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: var(--radius-card);
    transition: var(--transition-smooth);
    letter-spacing: -0.01em;
}

.btn-lg {
    padding: 0.7rem 1.6rem;
    font-size: 1rem;
    border-radius: var(--radius-card);
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

/* Die Schrift auf dem Knopf richtet sich nach der Akzentfarbe, nicht
   umgekehrt. Solange der Akzent das feste Blau war, ging Weiss immer auf.
   Mit den Farbwelten ist er hell (Signalgruen 1,8:1, Petrol 1,9:1,
   Bernstein 2,9:1) -- `--welt-auf-akzent` bringt dieselben Knoepfe auf
   4,9:1 bis 10,7:1. Der Rueckfall bleibt Weiss: ohne Farbwelt (Website,
   Partnerrahmen mit dunklem Akzent) aendert sich damit nichts. */
.btn-primary {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--welt-auf-akzent, #fff);
    box-shadow: 0 1px 2px rgba(0, 102, 255, 0.25);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 102, 255, 0.30);
}

/* Der Schein unter dem Knopf war fest blau (rgba(0,102,255)) -- unter
   einem bernsteinfarbenen Knopf ein sichtbar falscher Farbstich. Wo eine
   Farbwelt gilt, wird er neutral; auf der Website bleibt das Blau, weil
   der Akzent dort blau IST. */
[data-farbwelt] .btn-primary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

[data-farbwelt] .btn-primary:hover,
[data-farbwelt] .scroll-top-btn:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}

.btn-warning {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: #1a1a1a;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.30);
}

.btn-warning:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}

.btn-outline-primary {
    color: var(--primary-color);
    border: 1px solid rgba(0, 102, 255, 0.35);
    background: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.btn-outline-light {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.btn-outline-secondary:hover {
    background-color: var(--bs-secondary);
    color: white;
}

.btn:active {
    transform: translateY(0);
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    color: #fff;
    padding: 6.5rem 1rem 5.5rem;
    margin-bottom: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 102, 255, 0.30) 0%, transparent 60%),
                linear-gradient(160deg, #0a0e27 0%, #0c1338 45%, #0a0e27 100%);
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 20%, rgba(0, 102, 255, 0.18) 0%, transparent 45%),
                radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.10) 0%, transparent 45%);
    pointer-events: none;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.08;
    color: #fff;
}

.hero-section .lead {
    font-size: 1.25rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
}

.hero-section .hero-eyebrow {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

/* --- Section Title --- */
.section-title {
    margin-bottom: 2.5rem;
    font-size: 2.25rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-align: center;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.85rem;
}

/* --- Cards: Shadow-as-Border + Multi-Layer --- */
.card {
    border: none;
    border-radius: var(--radius-card);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.card-title {
    color: var(--primary-color);
}

/* Marketing card (Kernkompetenzen etc.) */
.card-img-top {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

/* --- SaaS-Audience Cards (Für Einkäufer / Für Fertiger) --- */
.audience-card {
    border: none;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
    padding: 2.5rem;
    height: 100%;
}

.audience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.audience-card .audience-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.audience-card .audience-icon.icon-blue {
    background: var(--primary-tint);
    color: var(--primary-color);
}

.audience-card .audience-icon.icon-amber {
    background: var(--accent-tint);
    color: var(--accent-hover);
}

.audience-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.audience-card .audience-price {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.audience-card ul li {
    padding: 0.5rem 0;
    color: var(--text-body);
    font-size: 0.98rem;
}

.audience-card ul li i {
    color: var(--primary-color);
    margin-right: 0.6rem;
}

/* --- How-It-Works Steps --- */
.step-card {
    border: none;
    border-radius: var(--radius-card);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-border);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: var(--transition-smooth);
}

.step-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.step-card .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.step-card .step-icon {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

/* --- Pricing Cards --- */
.pricing-card {
    border: none;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
    overflow: hidden;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.pricing-card.featured {
    box-shadow: 0 0 0 2px var(--accent-color), var(--shadow-card);
}

.pricing-card .pricing-header {
    padding: 2rem 2rem 1.25rem;
}

.pricing-card .pricing-body {
    padding: 0 2rem 2rem;
}

.pricing-card .pricing-plan-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.01em;
}

.pricing-card .pricing-price {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: -0.04em;
    color: var(--text-body);
    line-height: 1;
}

.pricing-card .pricing-price small {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-muted);
}

.pricing-card.featured .pricing-price small {
    color: var(--accent-hover);
}

.pricing-card .pricing-badge {
    display: inline-block;
    background: var(--accent-color);
    color: #1a1a1a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.pricing-card ul.pricing-features li {
    padding: 0.55rem 0;
    font-size: 0.95rem;
    border-top: 1px solid var(--border-color);
}

.pricing-card ul.pricing-features li:first-child {
    border-top: none;
}

.pricing-card ul.pricing-features li i {
    margin-right: 0.6rem;
}

/* --- Login / Auth Card --- */
.auth-card {
    border: none;
    border-radius: var(--radius-lg);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

.auth-card .auth-heading {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--text-body);
}

/* --- Footer --- */
.footer {
    background-color: var(--dark-section);
    color: rgba(255, 255, 255, 0.7);
    padding-top: 4rem;
    padding-bottom: 2.5rem;
    border-top: 1px solid var(--accent-color);
}

.footer h5 {
    color: #fff;
    margin-bottom: 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.footer p,
.footer li {
    color: rgba(255, 255, 255, 0.6);
}

.footer a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: var(--transition-smooth);
    font-size: 0.9rem;
}

.footer a:hover {
    color: var(--accent-color);
}

.footer .footer-brand {
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.footer .footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2.5rem 0 1.5rem;
}

.footer .social-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
    transition: var(--transition-smooth);
}

.footer .social-icon:hover {
    background: var(--accent-color);
    color: #1a1a1a;
    transform: translateY(-2px);
}

/* --- CTA Section (dark) --- */
.cta-section {
    background: linear-gradient(135deg, var(--dark-section) 0%, var(--dark-section-2) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(0, 102, 255, 0.18) 0%, transparent 50%),
                radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

.cta-section h2 {
    color: #fff;
    font-weight: 400;
    letter-spacing: -0.03em;
}

/* --- List Group --- */
.list-group-item {
    border-left: 0;
    border-right: 0;
}

.list-group-item i {
    color: var(--accent-color);
    margin-right: 0.75rem;
}

/* --- Prose Content --- */
.prose table th,
.prose table td {
    padding: 0.5em 0.75em;
    border: 1px solid #dee2e6;
}

.prose table th {
    font-weight: 600;
    background-color: #f8f9fa;
}

.prose {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* --- Utility helpers used in templates --- */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-primary-tint {
    background-color: var(--primary-tint) !important;
}

.bg-accent-tint {
    background-color: var(--accent-tint) !important;
}

.bg-surface {
    background-color: var(--bg-surface) !important;
}

.bg-surface-secondary {
    background-color: var(--bg-surface-secondary) !important;
}

.shadow-card {
    box-shadow: var(--shadow-card) !important;
}

.shadow-border {
    box-shadow: var(--shadow-border) !important;
}

/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
    .hero-section {
        padding: 4rem 1rem 3.5rem;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section .lead {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .pricing-card .pricing-price {
        font-size: 2.4rem;
    }

    .audience-card,
    .step-card {
        padding: 1.75rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .hero-section h1 {
        font-size: 2rem;
    }
}

/* ============================================================
 * MODERN PATTERNS (Stripe/Vercel/Linear-inspiriert)
 * ============================================================ */

/* --- Gradient Text --- */
.gradient-text {
    background: linear-gradient(120deg, #0066ff 0%, #3d8bff 40%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-theme="dark"] .gradient-text {
    background: linear-gradient(120deg, #3d8bff 0%, #66a3ff 40%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Glassmorphism Card --- */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

[data-theme="dark"] .glass-card {
    background: rgba(30, 30, 30, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

/* --- Animated Orbs --- */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.orb-1 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.55) 0%, transparent 70%);
    top: -120px;
    left: -80px;
    animation: float 20s ease-in-out infinite;
}

.orb-2 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, transparent 70%);
    bottom: -100px;
    right: -60px;
    animation: float 24s ease-in-out infinite reverse;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(61, 139, 255, 0.40) 0%, transparent 70%);
    top: 40%;
    right: 20%;
    animation: float 18s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -40px) scale(1.05); }
    50% { transform: translate(-20px, 30px) scale(0.95); }
    75% { transform: translate(40px, 20px) scale(1.02); }
}

/* --- Bento Grid --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 1.25rem;
}

.bento-grid .bento-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
}

.bento-grid .bento-item:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-card-hover);
}

.bento-grid .bento-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-grid .bento-item.wide {
    grid-column: span 2;
}

.bento-grid .bento-item.tall {
    grid-row: span 2;
}

.bento-grid .bento-item .bento-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-grid .bento-item:hover .bento-img {
    transform: scale(1.06);
}

.bento-grid .bento-item .bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10, 14, 39, 0.85) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
}

.bento-grid .bento-item .bento-overlay h3 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.bento-grid .bento-item .bento-overlay p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.bento-grid .bento-item .bento-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.25) 0%, transparent 60%);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.bento-grid .bento-item:hover .bento-glow {
    opacity: 1;
}

@media (max-width: 991px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .bento-grid .bento-item.large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 576px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 180px;
    }
    .bento-grid .bento-item.large,
    .bento-grid .bento-item.wide,
    .bento-grid .bento-item.tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* --- Scroll Reveal Animation --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- Gradient Border Card --- */
.gradient-border-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: 2rem;
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
}

.gradient-border-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gradient-border-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.gradient-border-card:hover::before {
    opacity: 1;
}

/* --- Modern Stat Cards --- */
.stat-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
    overflow: hidden;
    text-align: center;
}

.stat-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.stat-card:hover::after {
    opacity: 1;
}

.stat-card .stat-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-tint), var(--accent-tint));
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-body);
    margin-bottom: 0.25rem;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* --- Testimonial Cards --- */
.testimonial-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: 2rem;
    box-shadow: var(--shadow-border);
    transition: var(--transition-smooth);
    height: 100%;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.testimonial-card .quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.2;
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}

.testimonial-card .testimonial-stars {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.testimonial-card .testimonial-text {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--text-body);
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-card .testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-card .testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.testimonial-card .testimonial-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-body);
    margin-bottom: 0.1rem;
}

.testimonial-card .testimonial-company {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* --- Step Connector (Progress Line) --- */
.steps-wrapper {
    position: relative;
}

.step-connector {
    position: absolute;
    top: 50px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    opacity: 0.3;
    z-index: 0;
}

.step-connector::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    transition: width 1.5s ease;
}

.step-connector.active::after {
    width: 100%;
}

@media (max-width: 767px) {
    .step-connector { display: none; }
}

/* --- Grid Pattern Overlay --- */
.grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 80%);
}

/* --- Shimmer Effect --- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-hover {
    position: relative;
    overflow: hidden;
}

.shimmer-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.15) 50%, transparent 70%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.shimmer-hover:hover::after {
    opacity: 1;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* --- Pill Badge / Eyebrow (Modern) --- */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    background: var(--primary-tint);
    border: 1px solid rgba(0, 102, 255, 0.15);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.pill-badge .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* --- Scroll-to-Top Button --- */
.scroll-top-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 102, 255, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1040;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45);
}

/* --- Modern Hero (neu) --- */
.hero-modern {
    position: relative;
    color: #fff;
    padding: 4rem 1rem 6rem;
    background: linear-gradient(160deg, #0a0e27 0%, #0c1338 50%, #0a0e27 100%);
    overflow: hidden;
}

.hero-modern h1 {
    font-size: 3.75rem;
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #fff;
}

.hero-modern .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.75rem;
    backdrop-filter: blur(10px);
}

.hero-modern .hero-eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-color);
    box-shadow: 0 0 8px var(--accent-color);
    animation: pulse-dot 2s ease-in-out infinite;
}

.hero-modern .lead {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
}

@media (max-width: 768px) {
    .hero-modern { padding: 2.5rem 1rem 3.5rem; }
    .hero-modern h1 { font-size: 2.5rem; }
    .hero-modern .lead { font-size: 1.1rem; }
}

@media (max-width: 576px) {
    .hero-modern h1 { font-size: 2.1rem; }
}

/* --- Split-Screen Auth Layout --- */
.auth-split {
    min-height: calc(100vh - 72px);
    display: flex;
}

.auth-split .auth-aside {
    display: none;
    flex: 1;
    background: linear-gradient(160deg, #0a0e27 0%, #0c1338 50%, #0a0e27 100%);
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 3.5rem 3rem;
    flex-direction: column;
    justify-content: center;
}

.auth-split .auth-aside .orb {
    z-index: 0;
}

.auth-split .auth-aside .auth-aside-content {
    position: relative;
    z-index: 1;
    max-width: 420px;
}

.auth-split .auth-aside h2 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 1.25rem;
    line-height: 1.15;
}

.auth-split .auth-aside p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.auth-split .auth-aside .auth-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.auth-split .auth-aside .auth-feature i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.auth-split .auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background: var(--bg-body);
}

.auth-split .auth-form-wrapper {
    width: 100%;
    max-width: 440px;
}

.auth-split .auth-form-wrapper .form-control-lg {
    border-radius: 10px;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--border-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-split .auth-form-wrapper .form-control-lg:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.12);
    outline: none;
}

@media (min-width: 992px) {
    .auth-split .auth-aside {
        display: flex;
    }
}

@media (max-width: 991px) {
    .auth-split {
        min-height: auto;
    }
    .auth-split .auth-main {
        min-height: calc(100vh - 72px);
    }
}

/* --- FAQ Accordion --- */
.faq-accordion .faq-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--bg-surface);
    transition: var(--transition-smooth);
}

.faq-accordion .faq-item:hover {
    box-shadow: var(--shadow-card);
}

.faq-accordion .faq-header {
    padding: 1.1rem 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-body);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    transition: var(--transition-smooth);
}

.faq-accordion .faq-header:hover {
    color: var(--primary-color);
}

.faq-accordion .faq-header .faq-icon {
    transition: transform 0.3s ease;
    color: var(--primary-color);
}

.faq-accordion .faq-item.open .faq-header .faq-icon {
    transform: rotate(180deg);
}

.faq-accordion .faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion .faq-item.open .faq-body {
    max-height: 300px;
}

.faq-accordion .faq-body-inner {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* --- Pricing Card Improvements --- */
.pricing-card {
    position: relative;
}

.pricing-card.featured {
    box-shadow: 0 0 0 2px var(--accent-color), 0 8px 32px rgba(245, 158, 11, 0.18), var(--shadow-card);
}

.pricing-card.featured::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pricing-card .pricing-badge {
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.pricing-card .pricing-features li {
    transition: var(--transition-smooth);
}

.pricing-card .pricing-features li:hover {
    color: var(--primary-color);
    padding-left: 0.25rem;
}

/* --- Audience Card Improvements (ohne Preis) --- */
.audience-card .audience-tag {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--primary-tint);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.audience-card .audience-tag.tag-amber {
    color: var(--accent-hover);
    background: var(--accent-tint);
}

/* --- Navbar Height (72px) --- */
.ism-navbar {
    height: 72px !important;
}

/* --- Social Icon Glow --- */
.ism-footer .social-icon:hover {
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

/* --- Footer Gradient Accent Line --- */
.ism-footer {
    position: relative;
}

.ism-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 50%, var(--primary-color) 100%);
}

/* --- Dropdown Animation --- */
.ism-navbar .dropdown-menu {
    animation: dropdownFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Dark Mode Overrides für neue Patterns --- */
[data-theme="dark"] .stat-card {
    background: var(--bg-surface);
}

[data-theme="dark"] .testimonial-card {
    background: var(--bg-surface);
}

[data-theme="dark"] .gradient-border-card {
    background: var(--bg-surface);
}

[data-theme="dark"] .faq-accordion .faq-item {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .bento-grid .bento-item {
    box-shadow: var(--shadow-border);
}

[data-theme="dark"] .pill-badge {
    background: rgba(0, 102, 255, 0.15);
    border-color: rgba(0, 102, 255, 0.25);
}

/* --- CTA Glassmorphism Section --- */
.cta-glass-section {
    position: relative;
    background: linear-gradient(160deg, #0a0e27 0%, #0c1338 50%, #0a0e27 100%);
    color: #fff;
    padding: 5rem 1rem;
    overflow: hidden;
}

.cta-glass-section .glass-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2.5rem;
    position: relative;
    z-index: 1;
}

.cta-glass-section h2 {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.cta-glass-section p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .cta-glass-section { padding: 3.5rem 1rem; }
    .cta-glass-section h2 { font-size: 1.85rem; }
    .cta-glass-section .glass-card { padding: 2rem 1.5rem; }
}

/* --- Dark Mode: Hero & CTA Anpassungen --- */
[data-theme="dark"] .hero-modern {
    background: linear-gradient(160deg, #0d0d0d 0%, #111634 50%, #0d0d0d 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .cta-glass-section {
    background: linear-gradient(160deg, #0d0d0d 0%, #111634 50%, #0d0d0d 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Dark Mode: bg-white Fix für Bootstrap-Kompatibilität --- */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-body) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--bg-surface-secondary) !important;
}

/* --- Dark Mode: Bootstrap-Komponenten für Warenkorb & Co. --- */

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-body);
}

[data-theme="dark"] .card-header {
    background-color: var(--bg-surface-secondary) !important;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .card-body {
    color: var(--text-body);
}

/* List Group (Warenkorb-Positionen) */
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .list-group-item-action {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-body) !important;
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--bg-surface-secondary) !important;
    color: var(--text-body) !important;
}

/* Alerts */
/* Hinweiskaesten im Dark Mode.
 *
 * Zwei Fehler waren hier zu beheben:
 *   1. .alert-secondary hatte gar keine Regel -- Bootstrap gibt ihm einen
 *      hellen Grund (#e2e3e5), waehrend die Schrift vom dunklen Thema hell
 *      geerbt wurde. Hell auf hell, praktisch unlesbar.
 *   2. .alert-info stand auf #aad4ff bei nur 12 % Hintergrunddeckung. Fuer
 *      kurze Meldungen reicht das, fuer die langen Erklaertexte im
 *      Einstellungsbereich nicht.
 *
 * Jetzt durchgaengig kraeftigerer Hintergrund und hellere Schrift. */
[data-theme="dark"] .alert-info {
    background-color: #1c3357;
    border-color: #2f5c99;
    color: #eaf3ff;
}

[data-theme="dark"] .alert-secondary {
    background-color: #2f3f50;
    border-color: #48586b;
    color: #f0f3f7;
}

[data-theme="dark"] .alert-warning {
    background-color: #4a3c12;
    border-color: #8a7320;
    color: #fff4cc;
}

[data-theme="dark"] .alert-success {
    background-color: #16351f;
    border-color: #2c6b3d;
    color: #e2f7e8;
}

[data-theme="dark"] .alert-danger {
    background-color: #4a1c22;
    border-color: #8f333d;
    color: #ffe4e7;
}

/* Hervorhebungen und Verweise innerhalb der Kaesten sollen die Farbe des
 * Kastens behalten und nicht auf globale Textfarben zurueckfallen. */
[data-theme="dark"] .alert strong,
[data-theme="dark"] .alert b,
[data-theme="dark"] .alert em {
    color: inherit;
}

[data-theme="dark"] .alert code {
    background-color: rgba(0, 0, 0, 0.30);
    color: inherit;
}

/* Kleingedruckte Hilfetexte unter den Eingabefeldern */
[data-theme="dark"] .form-text {
    color: #b9c4d0;
}


/* --- Tooltips (die ⓘ-Symbole neben den Feldbezeichnungen) --------------
 *
 * Hier lag der eigentliche Lesbarkeitsfehler, nicht bei den Erklaerkaesten.
 * Bootstrap liefert Tooltips mit:
 *     .tooltip.show   { opacity: 0.9 }      -> halbtransparent
 *     .tooltip-inner  { background: #000 }  -> schwarzer Grund
 *                     { font-size: 0.875rem, max-width: 200px }
 * Auf dunklem Untergrund ergibt das einen flauen, sehr kleinen Kasten --
 * genau wie gemeldet. Eine eigene Regel gab es dafuer bisher nicht.
 *
 * Gilt fuer beide Themen: die Tooltips waren auch im hellen Modus zu klein.
 */
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    background-color: #1b2430;
    color: #f2f5f8;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 380px;
    padding: 0.6rem 0.85rem;
    text-align: left;
    border: 1px solid #3d4b5c;
    border-radius: 0.4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.tooltip .tooltip-arrow::before {
    border-top-color: #1b2430;
    border-bottom-color: #1b2430;
    border-left-color: #1b2430;
    border-right-color: #1b2430;
}

/* Die Info-Symbole selbst. .text-muted macht sie auf dunklem Grund fast
 * unsichtbar, obwohl sie bedienbare Elemente sind. */
[data-theme="dark"] .text-muted {
    color: #a9b6c4 !important;
}

.bi-info-circle {
    cursor: help;
    opacity: 0.85;
}

.bi-info-circle:hover {
    opacity: 1;
}

[data-theme="dark"] .bi-info-circle.text-muted {
    color: #8ab4f8 !important;
}


/* --- Popovers (Kalkulations-Aufschluesselung in der Preisstaffel) ------
 *
 * Das ⓘ-Symbol neben jedem Staffelpreis oeffnet ein Popover mit der
 * Ueberschrift "Kalkulation". Auch dafuer gab es bisher keine eigene Regel:
 *     .popover-header { background-color: #f0f0f0 }   -> heller Grund
 * Die Schriftfarbe wurde dagegen vom dunklen Thema hell geerbt --
 * weisse Schrift auf weissem Grund, die Ueberschrift war unsichtbar.
 *
 * Popovers haengen am <body>, nicht am ausloesenden Element. Regeln unter
 * [data-theme="dark"] greifen trotzdem, weil das Attribut am <html> steht.
 */
.popover {
    max-width: 380px;
    border-color: #3d4b5c;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.popover-header {
    font-size: 1rem;
    font-weight: 600;
}

.popover-body {
    font-size: 0.95rem;
    line-height: 1.6;
}

[data-theme="dark"] .popover {
    background-color: #1b2430;
    border-color: #3d4b5c;
}

[data-theme="dark"] .popover-header {
    background-color: #243140;
    border-bottom-color: #3d4b5c;
    color: #f2f5f8;
}

[data-theme="dark"] .popover-body {
    color: #e4e9ef;
}

[data-theme="dark"] .popover .popover-arrow::after {
    border-top-color: #1b2430;
    border-bottom-color: #243140;
    border-left-color: #1b2430;
    border-right-color: #1b2430;
}

[data-theme="dark"] .popover-body table,
[data-theme="dark"] .popover-body td,
[data-theme="dark"] .popover-body th {
    color: inherit;
    border-color: #3d4b5c;
}

/* Das ausloesende Symbol war ebenfalls .text-muted */
[data-theme="dark"] a.text-muted .fa-info-circle,
[data-theme="dark"] .fa-info-circle {
    color: #8ab4f8;
}


/* --- Lesbarkeit der Hinweiskaesten ------------------------------------
 *
 * Die Erklaerkaesten im Einstellungsbereich standen auf .small (0,875 em)
 * bzw. font-size 0,85em. Bei dichten Texten mit Formeln, Beispielrechnungen
 * und Aufzaehlungen ist das zu klein -- gemessen war der Kontrast mit
 * 7,7:1 bereits gut, die Schwierigkeit lag an Groesse und Zeilenabstand.
 *
 * Gilt fuer beide Themen, nicht nur fuer den Dark Mode.
 */
.alert.small,
.alert[style*="font-size"] {
    font-size: 1rem !important;
    line-height: 1.7;
}

.alert.small p:last-child,
.alert p:last-child {
    margin-bottom: 0;
}

.alert strong {
    font-weight: 600;
}

/* Etwas Luft zwischen den Zeilen einer Aufzaehlung im Kasten */
.alert br + strong,
.alert br {
    line-height: 2;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.35);
    color: #8fdba9;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.35);
    color: #f1aeb5;
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-body);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-surface-secondary);
    color: var(--text-body);
    border-color: var(--text-muted);
}

[data-theme="dark"] .btn-warning {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #121212;
}

[data-theme="dark"] .btn-warning:hover {
    background-color: #d39e00;
    border-color: #c69500;
    color: #121212;
}

/* Form Controls (Radios, Checkboxes) */
[data-theme="dark"] .form-check-input {
    background-color: var(--bg-surface-secondary);
    border-color: var(--text-muted);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-body);
}

[data-theme="dark"] .form-control {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-color);
    color: var(--text-body);
}

/* Einheitenfelder in Eingabegruppen (%, kg, EUR, mm, min).
 *
 * Bootstrap gibt .input-group-text im Standard einen hellen Hintergrund
 * (#e9ecef) mit dunkler Schrift. Im Dark Mode blieb dieser helle Block
 * stehen, waehrend die Schriftfarbe vom dunklen Thema geerbt wurde --
 * helle Zeichen auf hellem Grund, praktisch unlesbar. Betroffen war der
 * gesamte Einstellungsbereich. */
[data-theme="dark"] .input-group-text {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-color);
    color: var(--text-body);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-surface);
    color: var(--text-muted);
}

/* HR & Borders */
[data-theme="dark"] hr {
    border-top-color: var(--border-color);
    opacity: 0.7;
}

[data-theme="dark"] .border-top {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--border-color) !important;
}

/* Text Colors */
[data-theme="dark"] .text-success {
    color: #8fdba9 !important;
}

[data-theme="dark"] .text-primary {
    color: #5b9cff !important;
}

[data-theme="dark"] .text-warning {
    color: #ffc107 !important;
}

/* Links */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: #5b9cff;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #82b8ff;
}

/* Delivery Option Cards */
[data-theme="dark"] .delivery-option-card {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .delivery-option-card:hover {
    background-color: var(--bg-surface);
    border-color: var(--primary-color);
}

/* Modal */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-body);
}

[data-theme="dark"] .modal-header {
    background-color: var(--bg-surface-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

/* Offcanvas (Falls Warenkorb als Offcanvas geöffnet wird) */
[data-theme="dark"] .offcanvas {
    background-color: var(--bg-surface);
    color: var(--text-body);
}

[data-theme="dark"] .offcanvas-header,
[data-theme="dark"] .offcanvas-footer {
    background-color: var(--bg-surface-secondary);
    border-color: var(--border-color);
}

/* Table (falls vorhanden) */
[data-theme="dark"] .table {
    color: var(--text-body);
    border-color: var(--border-color);
}

[data-theme="dark"] .table>:not(caption)>*>* {
    background-color: transparent;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: var(--bg-surface-secondary);
}

/* Badges */
[data-theme="dark"] .badge {
    color: var(--text-body);
}

/* Bootstrap Accordion (FAQ etc.) */
[data-theme="dark"] .accordion-item {
    background-color: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--bg-surface);
    color: var(--text-body);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--bg-surface-secondary);
    color: var(--text-body);
    box-shadow: inset 0 -1px 0 var(--border-color);
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) opacity(0.6);
}

[data-theme="dark"] .accordion-collapse {
    background-color: var(--bg-surface);
}

/* --- Gallery Cards (Kalkulationstool-Seite) --- */
.gallery-card {
    cursor: default;
}
.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover) !important;
}
.gallery-card:hover i {
    opacity: 0.9 !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}

/* === Volltextsuche Dropdown === */
#search-results {
    border: 1px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    background: #fff !important;
}

#search-results .list-group-item {
    background: #fff !important;
    border-color: #e9ecef !important;
    color: #212529 !important;
}

#search-results .list-group-item.list-group-item-secondary {
    background: #f0f3f7 !important;
    color: #495057 !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

#search-results .list-group-item-action:hover {
    background: #e7f1ff !important;
    color: #0d6efd !important;
}

/* Dark Mode */
[data-theme="dark"] #search-results {
    border: 1px solid var(--border-color) !important;
    background: #1a2332 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6) !important;
}

[data-theme="dark"] #search-results .list-group-item {
    background: #1a2332 !important;
    border-color: #3a4a5c !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] #search-results .list-group-item.list-group-item-secondary {
    background: #2a3a4e !important;
    color: #b0c4de !important;
    border-bottom: 2px solid var(--border-color) !important;
}

[data-theme="dark"] #search-results .list-group-item-action:hover {
    background: #2a4a6a !important;
    color: #7ab8ff !important;
}

/* Such-Input selbst */
#search-input {
    background: #fff !important;
    border: 1px solid #ced4da !important;
    color: #212529 !important;
}

[data-theme="dark"] #search-input {
    background: #1a2332 !important;
    border: 1px solid var(--border-color) !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] #search-input::placeholder {
    color: #7a8a9a !important;
}

[data-theme="dark"] #search-input:focus {
    background: #1a2332 !important;
    border-color: #0d6efd !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}