/* 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);
    }

    /* Der Knopf im Dateifeld (22.09.2026, Anhaenge im Kontaktformular).
       Bootstrap faerbt ihn mit eigenen hellen Grautoenen, die Schrift kam
       aber aus der Farbwelt: "Dateien auswaehlen" stand hell auf hellgrau. */
    .form-control::file-selector-button {
        background-color: var(--bg-surface);
        border-color: var(--border-color);
        color: var(--text-body);
    }

    .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
        background-color: var(--bg-body);
    }

    /* 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 ---

   VERSTECKT WIRD NUR, WENN AUCH WIEDER EINGEBLENDET WIRD (21.09.2026).

   Frueher stand hier `opacity: 0` ohne Bedingung. Wer den Block wieder
   sichtbar machte, war eine Kopie desselben Skripts in jeder einzelnen
   Seite -- fehlte sie, blieb der Inhalt fuer immer unsichtbar. Genau das
   ist auf den neuen Seiten passiert.

   `js-reveal` setzt das Geruest selbst, unmittelbar bevor es die Bloecke
   beobachtet. Laeuft das Skript nicht, fehlt die Klasse, und die Regel
   hier greift nicht: der Inhalt ist einfach da. Lieber ohne Animation
   als unsichtbar. */
.js-reveal .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);
}

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

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt hier keine.
   Der Inhalt bleibt selbstverstaendlich. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.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;
}
/* --- Merkmal-Chips (21.09.2026) --------------------------------------

   Kleine Schildchen fuer Aufzaehlungen, die als Menge wirken sollen:
   was an einem Bauteil erfasst wird, was sich einstellen laesst.

   WARUM NICHT `.audience-tag`: die Regel dort greift nur INNERHALB einer
   `.audience-card`. Ausserhalb blieben die Schildchen unformatierter
   Text -- genau der Eindruck "nur Text", den diese Chips vermeiden
   sollen. Statt die alte Regel aufzubohren (und damit jede Zielgruppen-
   karte zu beruehren) steht hier eine eigene. */
.merkmal-chip {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--primary-tint);
    border: 1px solid transparent;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    line-height: 1.2;
}

.merkmal-chip.chip-amber {
    color: var(--accent-hover);
    background: var(--accent-tint);
}

/* "Bereits Kunde? Anmelden" auf dunklem Grund (22.09.2026).
   Kopfbild und Aufruf-Flaeche sind in JEDER Farbwelt dunkel. Ein Link in
   der Grundfarbe (Blau) waere darauf kaum zu lesen -- und genau dieser
   kleine Verweis ist der einzige Weg der Bestandskunden zur Anmeldung,
   seit die grossen Knoepfe zum Kennenlernen fuehren. */
.hero-modern .hinweis-anmelden,
.cta-glass-section .hinweis-anmelden {
    color: rgba(255, 255, 255, 0.75);
}
.hero-modern .hinweis-anmelden a,
.cta-glass-section .hinweis-anmelden a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Eigene Symbole (22.09.2026) ---
   Fuer das, was Bootstrap Icons nicht kennt: Laser, 3D-Datei, Waage, Cookie.
   Vorher standen dort erfundene Namen wie `bi-laser-head` oder
   `bi-file-earmark-3d`. Die Schrift hat dafuer kein Zeichen, das Kaestchen
   blieb leer -- und niemand merkte es, weil ein leeres <i> keinen Fehler
   wirft. Die Form kommt als Maske aus static/symbole/*.svg und wird mit der
   Schriftfarbe gefuellt. So verhalten sie sich wie die `bi`-Symbole: Groesse
   aus font-size, Farbe aus color, in jeder Farbwelt.
   Benutzung: <i class="bi eigen-laser"></i>. Ein neues Symbol braucht die
   SVG-Datei UND eine Zeile hier; `test_symbole.py` prueft beides. */
[class^="eigen-"]::before,
[class*=" eigen-"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.eigen-laser::before    { -webkit-mask-image: url("../symbole/laser.svg");    mask-image: url("../symbole/laser.svg"); }
.eigen-datei-3d::before { -webkit-mask-image: url("../symbole/datei-3d.svg"); mask-image: url("../symbole/datei-3d.svg"); }
.eigen-waage::before    { -webkit-mask-image: url("../symbole/waage.svg");    mask-image: url("../symbole/waage.svg"); }
.eigen-cookie::before   { -webkit-mask-image: url("../symbole/cookie.svg");   mask-image: url("../symbole/cookie.svg"); }

/* --- Menueknopf am Handy (22.09.2026) ---
   Bootstraps `navbar-toggler-icon` malt die drei Striche als Bild mit fest
   eingestellter dunkler Farbe. Auf den dunklen Farbwelten war der Knopf
   dadurch kaum zu sehen -- und auf dem Handy ist er der einzige Weg ins
   Menue. `bi-list` nimmt die Schriftfarbe der Farbwelt an. */
.navbar-toggler {
    color: var(--text-body);
    font-size: 1.75rem;
    line-height: 1;
}

/* --- Lange Woerter auf schmalen Bildschirmen (22.09.2026) ---
   Deutsche Zusammensetzungen wie "Hochgeschwindigkeitsfraesen" sind breiter
   als ein halbes Handydisplay. Die Kaesten schneiden ueberstehenden Text ab
   (`overflow: hidden`), und so stand da "Punktschwe" und "Beruehrungslo".
   Gemessen am 22.09.2026 im Browser: 50 Stellen auf 12 Seiten bei 360 bis
   768 px Breite, dazu die Titel "Allgemeine Geschaeftsbedingungen" und
   "Datenschutzerklaerung".
   `hyphens: auto` trennt nach deutscher Regel (die Seite traegt lang="de").
   `hyphenate-limit-chars` haelt das auf lange Woerter beschraenkt, damit
   Ueberschriften nicht bei jedem Zeilenende getrennt werden. Wo der Browser
   kein Trennwoerterbuch hat, bricht `overflow-wrap` das Wort wenigstens um,
   statt es abzuschneiden. Am PC greift nichts davon. */
@media (max-width: 991.98px) {
    h1, h2, h3, h4, h5 {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 16 6 6;
        overflow-wrap: break-word;
    }
    .stat-card .stat-value,
    .stat-card .stat-label {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
        overflow-wrap: break-word;
    }
}
@media (max-width: 575.98px) {
    /* Zwei Kaesten nebeneinander lassen je gut 110 px fuer den Text; mit
       1.5rem passte dort nicht einmal "Deutschland". */
    .stat-card {
        padding: 1.5rem 1rem;
    }
    .stat-card .stat-value {
        font-size: 1.2rem;
    }
}