/* ============================================
   ProWert — LUXURY DARK MODE
   "Gold auf glänzendem schwarzen Lack"
   ============================================ */

/* Metallic Gold Palette */
[data-theme="dark"] {
    --bg-primary: #050505;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #0f0f0f;
    --bg-card: #0c0c0c;
    --bg-card-hover: #111111;
    --bg-overlay: rgba(5, 5, 5, 0.92);
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-tertiary: #635f55;
    --text-inverse: #050505;
    --border-light: rgba(200, 158, 41, 0.08);
    --border-medium: rgba(200, 158, 41, 0.15);
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
    --shadow-gold: 0 4px 30px rgba(200, 158, 41, 0.2);

    /* Metallic Gold */
    --gold-gradient: linear-gradient(135deg, #B8953E 0%, #D4B15A 25%, #E8D07A 50%, #D4B15A 75%, #B8953E 100%);
    --gold-shine: linear-gradient(135deg, #A6903A 0%, #D4B15A 20%, #F0DC80 45%, #FFF0A0 50%, #F0DC80 55%, #D4B15A 80%, #A6903A 100%);
    --gold-text: linear-gradient(135deg, #D4B15A 0%, #E8D07A 40%, #FFF0A0 50%, #E8D07A 60%, #D4B15A 100%);
    --gold-glow: rgba(200, 158, 41, 0.08);
    --gold-border: rgba(200, 158, 41, 0.2);

    /* Gloss / Lacquer */
    --lacquer: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.02) 100%);
    --lacquer-card: linear-gradient(165deg, rgba(255,255,255,0.05) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.02) 100%);
    --lacquer-highlight: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 50%);
}

/* ==========================================
   Glossy Body & Sections
   ========================================== */

[data-theme="dark"] body {
    background: #050505;
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(200, 158, 41, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(200, 158, 41, 0.02) 0%, transparent 50%);
}

[data-theme="dark"] .section-alt,
[data-theme="dark"] .why-section,
[data-theme="dark"] .usp-section,
[data-theme="dark"] .about-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .logos-section {
    background: #0a0a0a;
    background-image: var(--lacquer);
}

/* ==========================================
   Shining Gold Text Effect
   ========================================== */

[data-theme="dark"] .text-gold,
[data-theme="dark"] .section-title .text-gold,
[data-theme="dark"] .hero-title span {
    background: var(--gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .section-label {
    background: var(--gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   Header — Glossy Black Bar
   ========================================== */

[data-theme="dark"] .header {
    background: rgba(5, 5, 5, 0.88);
    border-bottom: 1px solid rgba(200, 158, 41, 0.1);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .logo-icon {
    background: var(--gold-shine);
    box-shadow: 0 0 15px rgba(200, 158, 41, 0.3);
}

[data-theme="dark"] .nav-partner {
    background: var(--gold-shine);
    box-shadow: 0 0 12px rgba(200, 158, 41, 0.2);
    color: #050505;
    font-weight: 600;
}

[data-theme="dark"] .nav-partner:hover {
    box-shadow: 0 0 25px rgba(200, 158, 41, 0.4);
}

[data-theme="dark"] .theme-toggle {
    border-color: rgba(200, 158, 41, 0.2);
    background: rgba(200, 158, 41, 0.06);
}

[data-theme="dark"] .nav-dropdown-menu {
    background: #0c0c0c;
    border: 1px solid rgba(200, 158, 41, 0.12);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), 0 0 1px rgba(200, 158, 41, 0.15);
}

/* ==========================================
   Hero — Dramatic Gold Glow
   ========================================== */

[data-theme="dark"] .hero {
    background: #050505;
}

[data-theme="dark"] .hero::before {
    background:
        radial-gradient(ellipse at 25% 50%, rgba(200, 158, 41, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 30%, rgba(200, 158, 41, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 80%, rgba(200, 158, 41, 0.03) 0%, transparent 50%);
}

[data-theme="dark"] .hero-label {
    border-left-color: var(--gold);
    text-shadow: 0 0 20px rgba(200, 158, 41, 0.3);
}

[data-theme="dark"] .hero-title {
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .btn-gold {
    background: var(--gold-shine);
    color: #050505;
    font-weight: 600;
    box-shadow: 0 2px 15px rgba(200, 158, 41, 0.25);
}

[data-theme="dark"] .btn-gold:hover {
    box-shadow: 0 4px 30px rgba(200, 158, 41, 0.4), 0 0 60px rgba(200, 158, 41, 0.15);
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-outline {
    border-color: rgba(200, 158, 41, 0.25);
    color: var(--gold);
}

[data-theme="dark"] .btn-outline:hover {
    border-color: var(--gold);
    background: rgba(200, 158, 41, 0.06);
    box-shadow: 0 0 20px rgba(200, 158, 41, 0.1);
}

/* ==========================================
   Trust Bar — Subtle Glow
   ========================================== */

[data-theme="dark"] .trust-bar {
    background: #080808;
    border-bottom: 1px solid rgba(200, 158, 41, 0.08);
    background-image: var(--lacquer);
}

[data-theme="dark"] .trust-icon {
    background: var(--gold-shine);
    color: #050505;
    border: none;
    box-shadow: 0 0 12px rgba(200, 158, 41, 0.2);
}

[data-theme="dark"] .trust-separator {
    background: rgba(200, 158, 41, 0.12);
}

/* ==========================================
   Cards — Glossy Lacquer Effect
   ========================================== */

[data-theme="dark"] .product-card,
[data-theme="dark"] .why-item,
[data-theme="dark"] .usp-card,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .team-card,
[data-theme="dark"] .partner-benefit {
    background: #0c0c0c;
    background-image: var(--lacquer-card);
    border: 1px solid rgba(200, 158, 41, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .why-item:hover,
[data-theme="dark"] .usp-card:hover,
[data-theme="dark"] .testimonial-card:hover,
[data-theme="dark"] .team-card:hover {
    border-color: rgba(200, 158, 41, 0.2);
    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(200, 158, 41, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .product-card::before {
    background: var(--gold-shine);
}

[data-theme="dark"] .product-card.highlight {
    border-color: rgba(200, 158, 41, 0.2);
    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 158, 41, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .product-badge {
    background: rgba(200, 158, 41, 0.1);
    border: 1px solid rgba(200, 158, 41, 0.2);
    color: var(--gold-light);
}

/* ==========================================
   Gold Icons — Metallic Shine
   ========================================== */

[data-theme="dark"] .why-icon,
[data-theme="dark"] .usp-icon,
[data-theme="dark"] .how-step-number {
    background: var(--gold-shine);
    color: #050505;
    box-shadow: 0 2px 15px rgba(200, 158, 41, 0.25);
}

[data-theme="dark"] .testimonial-avatar {
    background: var(--gold-shine);
    color: #050505;
    box-shadow: 0 0 12px rgba(200, 158, 41, 0.2);
}

/* ==========================================
   Lines & Connectors
   ========================================== */

[data-theme="dark"] .how-steps::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(200, 158, 41, 0.15),
        rgba(200, 158, 41, 0.25),
        rgba(200, 158, 41, 0.15),
        transparent
    );
}

[data-theme="dark"] .gold-line,
[data-theme="dark"] .gold-line-center {
    background: var(--gold-shine);
    box-shadow: 0 0 8px rgba(200, 158, 41, 0.3);
}

/* ==========================================
   Team — GF Card Glow
   ========================================== */

[data-theme="dark"] .team-card.team-gf {
    border-color: rgba(200, 158, 41, 0.25);
    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(200, 158, 41, 0.08);
}

[data-theme="dark"] .team-photo {
    border-color: rgba(200, 158, 41, 0.25);
    background: #111;
}

[data-theme="dark"] .team-card.team-gf .team-photo {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(200, 158, 41, 0.2);
}

/* ==========================================
   FAQ — Elegant Toggles
   ========================================== */

[data-theme="dark"] .faq-item {
    border-color: rgba(200, 158, 41, 0.06);
}

[data-theme="dark"] .faq-toggle {
    border-color: rgba(200, 158, 41, 0.2);
}

[data-theme="dark"] .faq-item.active .faq-toggle {
    background: var(--gold-shine);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(200, 158, 41, 0.3);
}

/* ==========================================
   Forms — Dark Luxury Input
   ========================================== */

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
    background: #080808;
    border-color: rgba(200, 158, 41, 0.1);
}

[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 158, 41, 0.1), 0 0 15px rgba(200, 158, 41, 0.08);
}

/* ==========================================
   Footer — Deep Black
   ========================================== */

[data-theme="dark"] .footer {
    background: #030303;
    background-image: var(--lacquer);
    border-top: 1px solid rgba(200, 158, 41, 0.08);
}

/* ==========================================
   Shimmer Animation on Gold Elements
   ========================================== */

@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

[data-theme="dark"] .btn-gold,
[data-theme="dark"] .nav-partner {
    background-size: 200% 100%;
    animation: goldShimmer 4s ease-in-out infinite;
}

[data-theme="dark"] .logo-icon {
    background-size: 200% 100%;
    animation: goldShimmer 5s ease-in-out infinite;
}

/* Subtle shimmer on gold text */
[data-theme="dark"] .hero-title span {
    background-size: 200% 100%;
    animation: goldShimmer 6s ease-in-out infinite;
}

/* ==========================================
   Partner Section — Premium Glow
   ========================================== */

[data-theme="dark"] .partner-section::before {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(200, 158, 41, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 30% 30%, rgba(200, 158, 41, 0.03) 0%, transparent 40%);
}

/* ==========================================
   Logos — Refined
   ========================================== */

[data-theme="dark"] .logo-partner {
    color: #4a4a4a;
}

[data-theme="dark"] .logo-partner:hover {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(200, 158, 41, 0.3);
}

/* ==========================================
   Scrollbar — Luxury
   ========================================== */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #050505;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(200, 158, 41, 0.15);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 158, 41, 0.3);
}


/* ==========================================
   GF-Wunsch 2026-05-31: Alle goldenen Texte/Zahlen im schoenen Gold-Gradient.
   Ausgenommen (flach): Strich-Rubrik-Labels (.zero-intro-label, .zero-vorteile-label,
   .vr-rubrik-label, .vr-col-head), Buttons/Badges/Inputs (eigener Hintergrund).
   ========================================== */
[data-theme="dark"] .zr-field-value,
[data-theme="dark"] .zr-field-value .unit,
[data-theme="dark"] .gr-readonly-field .zr-field-value,
[data-theme="dark"] .zr-highlight,
[data-theme="dark"] .zr-result-main .label,
[data-theme="dark"] .zr-section-label,
[data-theme="dark"] .zr-head-text .eyebrow,
[data-theme="dark"] .zr-steuer .gold,
[data-theme="dark"] .zr-subtitle sup,
[data-theme="dark"] .zr-disclaimer sup,
[data-theme="dark"] #endvermoegen sup,
[data-theme="dark"] #zuwachs_eur sup,
[data-theme="dark"] #ohneStart sup,
[data-theme="dark"] .zcs-value strong,
[data-theme="dark"] .zcs-label,
[data-theme="dark"] .zp-num,
[data-theme="dark"] .zb strong,
[data-theme="dark"] .zv-gold,
[data-theme="dark"] .zero-headline .zbig,
[data-theme="dark"] .vr-slider-val,
[data-theme="dark"] .vr-metal-hint.gold,
[data-theme="dark"] .gr-detail-table td:first-child,
[data-theme="dark"] .gr-detail-table th,
[data-theme="dark"] .gr-detail-wrap h4,
[data-theme="dark"] .kategorie-kachel-count,
[data-theme="dark"] .lager-overview-cta,
[data-theme="dark"] .lager-overview-title,
[data-theme="dark"] .preis-product-price .price-info,
[data-theme="dark"] .preis-timestamp,
[data-theme="dark"] .price-timestamp-inline,
[data-theme="dark"] .product-popup-tax,
[data-theme="dark"] .sparplan-card .sparplan-desc,
[data-theme="dark"] .rubrik-item-metal,
[data-theme="dark"] .rubrik-subtitle,
[data-theme="dark"] .sparplan-price-item .metal-name,
[data-theme="dark"] .info-product,
[data-theme="dark"] .growth-big,
[data-theme="dark"] .gr-cell-gold .gr-cell-row,
[data-theme="dark"] .rc-feats li span,
[data-theme="dark"] .rc-link,
[data-theme="dark"] #goldrente .gr-percent,
[data-theme="dark"] #goldrente .gr-question,
[data-theme="dark"] #goldrente .gr-star,
[data-theme="dark"] #goldrente .section-title span,
[data-theme="dark"] #ratio-strategie .section-title span,
[data-theme="dark"] .gr-card-head .section-title span,
[data-theme="dark"] .sparplan-price-item .gram-label {
    background: var(--gold-text) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Metallfarben in .zcs-value strong wiederherstellen (variogold): Der Gold-Gradient oben
   vererbt -webkit-text-fill-color:transparent an die Metall-Spans. Diese setzen nur color,
   wuerden also golden erscheinen. Eigenes text-fill-color durchbricht die Vererbung. */
[data-theme="dark"] .zcs-value strong .metal-silber    { -webkit-text-fill-color: #c8c8c8 !important; }
[data-theme="dark"] .zcs-value strong .metal-platin    { -webkit-text-fill-color: #a8b5bc !important; }
[data-theme="dark"] .zcs-value strong .metal-palladium { -webkit-text-fill-color: #d8d3c0 !important; }


/* GF-Wunsch 2026-05-31: Rechner einheitlich — "Ihre Eingaben" + Nettorendite-Hinweis mittig zentriert */
[data-theme="dark"] .zr-section-label,
[data-theme="dark"] .zr-subtitle {
    text-align: center;
}