/* Gemeinsame DVAG-Farbwelt fuer oeffentliche Themen- und Kundenseiten. */

:root {
  --dvag-blue-dark: #2c5f7c;
  --dvag-blue-mid: #4a8ba8;
  --dvag-blue-light: #b8d4e3;
  --dvag-teal: #3e8b8b;
  --dvag-green-dark: #4a8b5c;
  --dvag-green-light: #a8c957;
  --dvag-yellow: #f5d547;
  --dvag-gold: #c9a04a;
  --dvag-text: #2a3b47;
  --dvag-text-muted: #6b7b85;
  --dvag-white: #ffffff;
  --dvag-soft: #f7f8f9;
  --dvag-blue-accessible: #2c5f7c;
  --dvag-blue-deep: #1e4358;
  --dvag-green-accessible: #356c45;
  --dvag-green-deep: #294f35;
  --dvag-teal-accessible: #2f6c6c;
  --dvag-teal-deep: #245454;
  --dvag-gold-accessible: #745a1b;
  --dvag-gold-deep: #574313;
  --dvag-yellow-accessible: #6b5900;
  --dvag-yellow-deep: #504200;
  --dvag-lime-accessible: #536a14;
  --dvag-lime-deep: #3e500f;
  --dvag-blue-mid-accessible: #376f89;
}

body[data-page="thema"] {
  --paper: var(--dvag-soft);
  --card: var(--dvag-white);
  --ink: var(--dvag-text);
  --muted: var(--dvag-text-muted);
  --line: rgba(44, 95, 124, 0.15);
  --petrol: var(--dvag-blue-dark);
  --petrol-dark: var(--dvag-blue-deep);
  --gold: var(--dvag-gold);
  --theme-panel: var(--dvag-blue-dark);
  --theme-shape: rgba(184, 212, 227, 0.24);
  --theme-glow: rgba(184, 212, 227, 0.24);
  --shadow: 0 24px 70px rgba(42, 59, 71, 0.11);
  background:
    radial-gradient(circle at 7% 0%, var(--theme-glow), transparent 29rem),
    radial-gradient(circle at 96% 30%, var(--theme-glow), transparent 34rem),
    var(--paper);
}

body[data-theme="investment"] {
  --accent: var(--dvag-gold-accessible);
  --accent-soft: rgba(201, 160, 74, 0.18);
  --accent-deep: var(--dvag-gold-deep);
  --accent-bright: var(--dvag-gold);
  --hero-wash: rgba(201, 160, 74, 0.16);
  --theme-panel: var(--dvag-gold);
  --theme-shape: rgba(201, 160, 74, 0.20);
  --theme-glow: rgba(201, 160, 74, 0.18);
}

body[data-theme="foerderungen"] {
  --accent: var(--dvag-yellow-accessible);
  --accent-soft: rgba(245, 213, 71, 0.19);
  --accent-deep: var(--dvag-yellow-deep);
  --accent-bright: var(--dvag-yellow);
  --hero-wash: rgba(245, 213, 71, 0.13);
  --theme-panel: var(--dvag-yellow);
  --theme-shape: rgba(245, 213, 71, 0.24);
  --theme-glow: rgba(245, 213, 71, 0.20);
}

body[data-theme="baufi"] {
  --accent: var(--dvag-blue-accessible);
  --accent-soft: rgba(184, 212, 227, 0.28);
  --accent-deep: var(--dvag-blue-deep);
  --accent-bright: var(--dvag-gold);
  --hero-wash: rgba(184, 212, 227, 0.20);
  --baufi-blue: var(--dvag-blue-dark);
  --baufi-blue-deep: var(--dvag-blue-deep);
  --baufi-gold: var(--dvag-gold);
  --theme-panel: var(--dvag-blue-dark);
  --theme-shape: rgba(184, 212, 227, 0.24);
  --theme-glow: rgba(184, 212, 227, 0.24);
}

body[data-theme="absicherung"] {
  --accent: var(--dvag-teal-accessible);
  --accent-soft: rgba(62, 139, 139, 0.16);
  --accent-deep: var(--dvag-teal-deep);
  --accent-bright: var(--dvag-teal);
  --hero-wash: rgba(62, 139, 139, 0.11);
  --theme-panel: var(--dvag-teal);
  --theme-shape: rgba(62, 139, 139, 0.24);
  --theme-glow: rgba(62, 139, 139, 0.18);
}

body[data-theme="selbstaendige"] {
  --accent: var(--dvag-green-accessible);
  --accent-soft: rgba(74, 139, 92, 0.17);
  --accent-deep: var(--dvag-green-deep);
  --accent-bright: var(--dvag-green-dark);
  --hero-wash: rgba(74, 139, 92, 0.13);
  --theme-panel: var(--dvag-green-dark);
  --theme-shape: rgba(74, 139, 92, 0.22);
  --theme-glow: rgba(74, 139, 92, 0.18);
}

body[data-theme="banking"] {
  --accent: var(--dvag-blue-accessible);
  --accent-soft: rgba(184, 212, 227, 0.28);
  --accent-deep: var(--dvag-blue-deep);
  --accent-bright: var(--dvag-blue-light);
  --hero-wash: rgba(184, 212, 227, 0.22);
  --theme-panel: var(--dvag-blue-mid);
  --theme-shape: rgba(184, 212, 227, 0.32);
  --theme-glow: rgba(184, 212, 227, 0.26);
}

body[data-theme="energie"] {
  --accent: var(--dvag-lime-accessible);
  --accent-soft: rgba(168, 201, 87, 0.20);
  --accent-deep: var(--dvag-lime-deep);
  --accent-bright: var(--dvag-green-light);
  --hero-wash: rgba(168, 201, 87, 0.15);
  --theme-panel: var(--dvag-green-light);
  --theme-shape: rgba(168, 201, 87, 0.26);
  --theme-glow: rgba(168, 201, 87, 0.22);
}

body[data-theme="kinder"] {
  --accent: var(--dvag-blue-accessible);
  --accent-soft: rgba(184, 212, 227, 0.24);
  --accent-deep: var(--dvag-blue-deep);
  --accent-bright: var(--dvag-blue-light);
  --hero-wash: rgba(184, 212, 227, 0.20);
  --theme-panel: var(--dvag-blue-light);
  --theme-shape: rgba(184, 212, 227, 0.30);
  --theme-glow: rgba(184, 212, 227, 0.28);
}

body[data-theme="karriere"] {
  --accent: var(--dvag-blue-mid-accessible);
  --accent-soft: rgba(74, 139, 168, 0.19);
  --accent-deep: var(--dvag-blue-dark);
  --accent-bright: var(--dvag-blue-mid);
  --hero-wash: rgba(74, 139, 168, 0.15);
  --theme-panel: var(--dvag-blue-mid);
  --theme-shape: rgba(74, 139, 168, 0.24);
  --theme-glow: rgba(74, 139, 168, 0.20);
}

body[data-page="thema"] .preview-bar {
  background: var(--dvag-blue-dark);
}

body[data-page="thema"] .preview-bar select {
  background: #234c64;
}

body[data-page="thema"] .topic-brand-mark {
  border-color: rgba(201, 160, 74, 0.65);
  background: var(--dvag-blue-dark);
}

body[data-page="thema"] .topic-hero {
  border-color: rgba(44, 95, 124, 0.17);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 249, 0.90)), var(--card);
}

body[data-page="thema"]:not([data-theme="banking"]) .topic-hero {
  border-top: 10px solid var(--theme-panel);
}

body[data-page="thema"] .topic-hero::before {
  top: 0;
  right: 0;
  bottom: 0;
  width: 44%;
  height: auto;
  border-radius: 0;
  background: var(--theme-panel);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

body[data-page="thema"][data-theme="banking"] .topic-hero::before {
  right: -170px;
  bottom: -210px;
  top: auto;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: var(--accent-soft);
  clip-path: none;
}

body[data-page="thema"] .topic-hero::after {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

body[data-page="thema"] .topic-trust li::before {
  color: var(--accent);
}

body[data-page="thema"] .topic-hero-card {
  border-top: 6px solid var(--theme-panel);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 55px rgba(42, 59, 71, 0.16);
}

body[data-page="thema"][data-theme="banking"] .topic-hero-card {
  border-top-width: 1px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--hero-wash) 76%, #ffffff), rgba(255, 255, 255, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

body[data-page="thema"] .referral-note,
body[data-page="thema"] .public-note,
body[data-page="thema"] .topic-hero-card,
body[data-page="thema"] .button-secondary {
  background-color: var(--dvag-white);
}

body[data-page="baufi"] {
  --paper: var(--dvag-soft);
  --paper-strong: #eaf0f3;
  --surface: var(--dvag-white);
  --ink: var(--dvag-text);
  --muted: var(--dvag-text-muted);
  --line: rgba(44, 95, 124, 0.15);
  --gold: var(--dvag-gold);
  --gold-soft: #e4cd86;
  --champagne: var(--dvag-gold);
  --sage: var(--dvag-green-dark);
  --marine: var(--dvag-blue-dark);
  --success: var(--dvag-green-dark);
  --tw-blue: var(--dvag-blue-dark);
  --tw-blue-deep: var(--dvag-blue-deep);
  --tw-blue-night: #173747;
  --tw-gold: var(--dvag-gold);
  --tw-gold-light: #e6cf82;
  --tw-cream: var(--dvag-soft);
  background: var(--dvag-soft);
  color: var(--dvag-text);
}

body[data-page="baufi"] .site-header,
body[data-page="baufi"] .section-nav {
  border-color: rgba(44, 95, 124, 0.14);
  background: rgba(255, 255, 255, 0.96);
}

body[data-page="baufi"] .hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(201, 160, 74, 0.24), transparent 28%),
    linear-gradient(135deg, #173747, var(--dvag-blue-dark) 72%, var(--dvag-blue-mid));
}

body[data-page="baufi"] .hero::after {
  right: -45px;
  bottom: -190px;
  width: 440px;
  height: 390px;
  border-radius: 0;
  background: rgba(184, 212, 227, 0.08);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
  transform: rotate(-9deg);
}

body[data-page="baufi"] #compass.section.soft {
  background: #f0f4f5;
}

body[data-page="baufi"] .section-head .eyebrow,
body[data-page="baufi"] .situation-card-copy small {
  color: #775d17;
}

body[data-page="baufi"] .compass-app,
body[data-page="baufi"] .quick-check,
body[data-page="baufi"] .funding-check,
body[data-page="baufi"] .situation-card {
  border-color: rgba(44, 95, 124, 0.20);
  box-shadow: 0 24px 65px rgba(42, 59, 71, 0.12);
}

body[data-page="baufi"] .baufi-video-section {
  background: linear-gradient(180deg, rgba(184, 212, 227, 0.16), rgba(247, 248, 249, 0.28));
}

body[data-page="baufi"] .funding-teaser {
  background: linear-gradient(145deg, var(--dvag-green-dark), var(--dvag-green-deep));
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="thema"] *,
  body[data-page="baufi"] * {
    scroll-behavior: auto !important;
  }
}

@media (max-width: 760px) {
  body[data-page="thema"]:not([data-theme="banking"]) .topic-hero::before {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 39%;
    clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
  }
}