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

/* =========================================================
   BABY-WELTEN.DE – DOMAIN-FARBEN
   ========================================================= */

:root {
  /* Markenfarben */
  --site-primary: #0b6170;
  --site-primary-dark: #084a55;
  --site-accent: #c64b3e;
  --site-accent-dark: #a9362e;

  --site-secondary: #4f8e83;
  --site-secondary-dark: #2f7267;
  --site-secondary-soft: #eaf5f2;

  --site-brown: #765a49;
  --site-red: #a9362e;

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

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

  --site-header-border:
    color-mix(
      in srgb,
      var(--site-primary) 16%,
      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-dark);

  /* Footer */
  --site-footer-bg: #123f46;
  --site-footer-text: #ffffff;
  --site-footer-muted: #e5f0ee;
  --site-footer-link: #ffffff;
  --site-footer-link-hover: #ffd7cf;
  --site-footer-border: rgba(255, 255, 255, 0.18);

  /* Allgemeine Flächen */
  --site-bg: #ffffff;
  --site-soft: #fbf8f2;
  --site-soft-primary: #f2f8f7;
  --site-soft-accent: #fff3ef;
  --site-card-bg: #ffffff;

  /* Allgemeiner Text */
  --site-text: #000000;
  --site-muted: #5f5750;

  /* Amazon-Button */
  --site-amazon-cta: var(--site-accent-dark);
  --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-dark);
  --site-product-cta-text: #ffffff;

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


/* =========================================================
   BABY-WELTEN.DE – DOMAIN-LOGO
   Horizontales Logo mit Bildmarke und Claim.
   ========================================================= */

:root {
  --site-header-logo-width: 270px;
  --site-header-logo-width-compact: 225px;

  --site-header-nav-offset: 340px;
  --site-header-nav-offset-compact: 290px;

  --site-header-logo-width-mobile: 220px;
  --site-header-logo-width-mobile-compact: 182px;
}


/* =========================================================
   BABY-WELTEN.DE – STARTSEITEN-GLYPHEN

   Keine zusätzlichen SVG-Dateien nötig. Die Zeichen sind rein
   dekorativ und im HTML mit aria-hidden="true" versehen.
   ========================================================= */

.site-home-icon-glyph {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--site-primary);
}

.site-home-download__icon .site-home-icon-glyph {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2rem;
}

.site-home-about__fact-icon--glyph {
  display: inline-grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--site-primary);
}


/* =========================================================
   BABY-WELTEN.DE – NEWSLETTER

   Der Newsletter führt bewusst auf die bestehende Anmeldeseite,
   weil dort zusätzlich der optionale Geburtstermin erfasst wird.
   ========================================================= */

.site-home-newsletter {
  background:
    linear-gradient(
      120deg,
      var(--site-primary-dark) 0%,
      var(--site-primary) 58%,
      var(--site-secondary-dark) 100%
    );
  color: #ffffff;
}

.site-home-newsletter__eyebrow,
.site-home-newsletter__subline,
.site-home-newsletter__benefits,
.site-home-newsletter__note {
  color: #ffffff;
}

.site-home-newsletter__note {
  opacity: 0.94;
}

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

.site-home-newsletter__signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  border: 2px solid transparent;
  border-radius: 0.45rem;
  background: var(--site-accent-dark);
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.site-home-newsletter__signup:hover,
.site-home-newsletter__signup:focus-visible {
  background: #ffffff;
  color: var(--site-primary-dark);
  border-color: #ffffff;
  text-decoration: none;
}

.site-home-newsletter__signup:active {
  transform: translateY(1px);
}


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

   Helles Türkis/Grün bleibt als dekorative Markenfarbe erhalten.
   Für kleine Texte sowie weiße Schrift auf Farbflächen werden die
   dunkleren Varianten verwendet.

   Kontrast auf Weiß:
   Primary #0b6170       ca. 7,1 : 1
   Secondary dark        ca. 5,6 : 1
   Accent dark #a9362e   ca. 6,5 : 1
   ========================================================= */

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

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


/* CTA im Wochenimpuls */
.site-home-button--wine {
  background-color: var(--site-accent-dark);
  color: #ffffff;
}

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


/* Kleine Texte in Karten brauchen die dunkleren Markenfarben */
.site-home-download--blue .site-home-download__kicker,
.site-home-download--blue .site-home-download__link {
  color: var(--site-primary);
}

.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-dark);
}


/* Tastaturfokus deutlich sichtbar */
.site-article-card__category:focus-visible,
.site-home-button--wine:focus-visible,
.site-home-newsletter__signup:focus-visible,
.site-home-topic:focus-visible,
.site-home-download:focus-visible,
.site-home-section__more:focus-visible,
.site-home-textlink:focus-visible,
.site-home-button:focus-visible {
  outline: 3px solid var(--site-accent-dark);
  outline-offset: 3px;
}

.site-home-newsletter__signup:focus-visible {
  outline-color: #ffffff;
}


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

@media (max-width: 767.98px) {
  .site-home-icon-glyph {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 2rem;
  }

  .site-home-newsletter__signup {
    min-height: 50px;
  }
}