/* =========================================================
   Lokale user.css für geld-welten.de
   Wird vom Plugin NACH common.css geladen.
   Hier nur Domainfarben, Logoabmessungen und echte Ausnahmen pflegen.
   ========================================================= */

/* =========================================================
   GELD-WELTEN.DE – DOMAIN-FARBEN
   Markenidee: Klarheit, Orientierung, Gelassenheit.
   Dunkles Petrol/Navy + ruhiges Teal + warmes Gold.
   ========================================================= */

:root {
  /* Markenfarben */
  --site-primary: #123b52;
  --site-primary-dark: #0a2b3d;
  --site-accent: #a15c00;

  --site-secondary: #0f6b63;
  --site-secondary-dark: #075149;
  --site-secondary-soft: #eaf4f2;

  --site-brown: #7a4d16;
  --site-red: #8a1c1c;

  /* Komponentenfarben */
  --site-media-bar: var(--site-primary);
  --site-video-cta: var(--site-accent);
  --site-video-accent: var(--site-accent);
  --site-reading-progress: var(--site-secondary);

  /* Header */
  --site-header-bg: #ffffff;
  --site-header-text: #000000;
  --site-header-link: var(--site-primary);
  --site-header-link-hover: var(--site-accent);
  --site-header-icon: var(--site-primary);

  --site-header-border:
    color-mix(
      in srgb,
      var(--site-primary) 15%,
      transparent
    );

  /* Mobiles Menü */
  --site-mobile-menu-bg: #ffffff;
  --site-mobile-menu-text: #000000;
  --site-mobile-menu-link: var(--site-primary);
  --site-mobile-menu-link-hover: var(--site-accent);

  /* Footer */
  --site-footer-bg: var(--site-primary-dark);
  --site-footer-text: #ffffff;
  --site-footer-muted: #dce9ec;
  --site-footer-link: #ffffff;
  --site-footer-link-hover: #f4c95d;
  --site-footer-border: rgba(255, 255, 255, 0.18);

  /* Allgemeine Flächen */
  --site-bg: #ffffff;
  --site-soft: #f7f5ef;
  --site-soft-primary: #eef4f6;
  --site-soft-accent: #fff4dc;
  --site-card-bg: #ffffff;

  /* Allgemeiner Text */
  --site-text: #000000;
  --site-muted: #555f63;

  /* Amazon-Button */
  --site-amazon-cta: var(--site-accent);
  --site-amazon-cta-text: #ffffff;

  /* Audio-Player */
  --site-audio-accent: var(--site-primary);

  /* Produktangebote */
  --site-product-accent: var(--site-primary);
  --site-product-cta: var(--site-accent);
  --site-product-cta-text: #ffffff;

  /* Umfragen */
  --site-poll-accent: var(--site-primary);
  --site-poll-cta: var(--site-accent);
  --site-poll-success: var(--site-secondary-dark);
  --site-poll-error: var(--site-red);
  --site-poll-surface: var(--site-soft);
}


/* =========================================================
   GELD-WELTEN.DE – DOMAIN-LOGO
   Horizontale Wortmarke mit Signet und Claim.
   ========================================================= */

:root {
  --site-header-logo-width: 250px;
  --site-header-logo-width-compact: 205px;

  --site-header-nav-offset: 325px;
  --site-header-nav-offset-compact: 275px;

  --site-header-logo-width-mobile: 205px;
  --site-header-logo-width-mobile-compact: 170px;
}


/* =========================================================
   GELD-WELTEN.DE – STARTSEITEN-ICONS OHNE ZUSATZDATEIEN

   Für Themen und Tools werden bewusst reduzierte Text-/Zahl-Icons
   verwendet. Das vermeidet Finanzklischees und hält die Startseite
   unabhängig von weiteren SVG-Dateien.
   ========================================================= */

.site-home-topic__icon--text {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid
    color-mix(
      in srgb,
      var(--site-primary) 22%,
      transparent
    );
  border-radius: 50%;
  background: var(--site-soft-primary);
  color: var(--site-primary);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.site-home-download__icon--text {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.7rem;
  background: var(--site-soft-primary);
  color: var(--site-primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
}

.site-home-download--green .site-home-download__icon--text {
  background: var(--site-secondary-soft);
  color: var(--site-secondary-dark);
}

.site-home-download--orange .site-home-download__icon--text {
  background: var(--site-soft-accent);
  color: var(--site-accent);
}

.site-home-about__fact-icon.site-home-topic__icon--text {
  display: inline-grid;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.62rem;
}


/* =========================================================
   GELD-WELTEN.DE – BARRIEREFREIER FARBKONTRAST

   Kontrastwerte der zentralen Kombinationen auf Weiß:
   Primary #123b52       > 11:1
   Accent  #a15c00       >  5:1
   Secondary #0f6b63     >  6:1
   Muted #555f63         >  6:1

   Goldtöne mit geringerem Kontrast werden nur dekorativ oder
   großflächig eingesetzt; kleine Texte nutzen die dunkleren Werte.
   ========================================================= */

/* Kategorie-Badges in Artikelkarten */
.site-article-card__category {
  background-color: var(--site-secondary-dark);
  color: #ffffff;
}

.site-article-card__category:hover,
.site-article-card__category:focus-visible {
  background-color: var(--site-primary-dark);
  color: #ffffff;
}


/* Sekundärer grüner Button */
.site-home-button--wine {
  background-color: var(--site-secondary-dark);
  color: #ffffff;
}

.site-home-button--wine:hover,
.site-home-button--wine:focus-visible {
  background-color: var(--site-primary-dark);
  color: #ffffff;
}


/* Goldener CTA: Weiß auf #a15c00 erfüllt WCAG AA für Normaltext */
.site-home-button--gold {
  background-color: var(--site-accent);
  color: #ffffff;
}

.site-home-button--gold:hover,
.site-home-button--gold:focus-visible {
  background-color: #7c4800;
  color: #ffffff;
}


/* Kleine Texte in farbigen Download-Karten */
.site-home-download--green .site-home-download__kicker,
.site-home-download--green .site-home-download__link {
  color: var(--site-secondary-dark);
}

.site-home-download--orange .site-home-download__kicker,
.site-home-download--orange .site-home-download__link {
  color: var(--site-accent);
}


/* Newsletter auf dunkler Fläche */
.site-home-newsletter__eyebrow {
  color: #f4c95d;
}

.site-home-newsletter__note {
  color: #dce9ec;
}

.site-home-newsletter__note a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.site-home-newsletter__note a:hover {
  color: #f4c95d;
}


/* Links nicht ausschließlich über Farbe kenntlich machen */
.site-home-section__more,
.site-home-textlink,
.site-home-download__link {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.site-home-section__more:hover,
.site-home-section__more:focus-visible,
.site-home-textlink:hover,
.site-home-textlink:focus-visible {
  text-decoration: underline;
}


/* Deutlich sichtbarer Zwei-Farben-Fokus auf hellen UND dunklen Flächen */
.site-home-portal :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px #ffffff;
}


/* =========================================================
   RESPONSIVE ANPASSUNGEN
   ========================================================= */

@media (max-width: 767.98px) {
  .site-home-topic__icon--text {
    width: 2.75rem;
    height: 2.75rem;
  }

  .site-home-download__icon--text {
    width: 2.6rem;
    height: 2.6rem;
  }
}