/* =========================================================
   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
   Kompaktes Header-Logo ohne Claim; vollständiges Logo mit Claim separat als brand-full.webp.
   ========================================================= */

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

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

  --site-header-logo-width-mobile: 235px;
  --site-header-logo-width-mobile-compact: 195px;
}


/* =========================================================
   BABY-WELTEN.DE – STARTSEITEN-ICONS
   Externe SVG-Icons für klare, konsistente Darstellung.
   Die nummerierten Phasen bleiben bewusst als Ziffern erhalten.
   ========================================================= */

.site-home-topic__icon img {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.site-home-download__icon img {
  display: block;
  width: 2.625rem;
  height: 2.625rem;
  object-fit: contain;
}

.site-home-about__fact-icon {
  display: block;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

/* Nummern in „Orientierung nach Lebensphase“ */
.site-home-icon-glyph {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--site-primary);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
}


/* =========================================================
   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-include .site-article-card__category {
  background-color: var(--site-primary);
  color: #ffffff;
}

.site-article-include a.site-article-card__category:hover,
.site-article-include a.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-include .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;
}



/* =========================================================
   BABY-WELTEN.DE – INFO-TOOLTIP IM WOCHENIMPULS

   Die Breite wird hier bewusst lokal festgelegt. So kann ein
   globales max-width/width auf span-Elementen den Tooltip nicht
   mehr auf die Breite des runden i-Buttons zusammendrücken.
   ========================================================= */

.site-home-impulse__info .site-home-impulse__tooltip {
  right: -0.35rem !important;
  left: auto !important;
  display: block !important;
  box-sizing: border-box;
  width: 20rem !important;
  min-width: 0 !important;
  max-width: calc(100vw - 2rem) !important;
  height: auto !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

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

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

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

@media (max-width: 620px) {
  /* Auf schmalen Displays keine überbreiten CTA-Zeilen. */
  .site-home-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-home-hero__actions .site-home-button {
    width: 100%;
    white-space: normal;
  }

  /* Zwei Spalten sind für die Textmenge im Impuls zu schmal. */
  .site-home-impulse {
    grid-template-columns: 1fr !important;
  }

  .site-home-impulse__titlebox {
    border-radius: 0.78rem 0.78rem 0 0 !important;
  }

  .site-home-impulse__item {
    border-top: 1px solid var(--home-line);
    border-left: 0 !important;
  }

  .site-home-impulse__item--exercise {
    display: block;
  }

  .site-home-impulse__item--exercise .site-home-button {
    width: 100%;
    margin-top: 0.8rem;
    white-space: normal;
  }

  /* Tooltip kompakter, aber weiterhin horizontal und gut lesbar. */
  .site-home-impulse__info .site-home-impulse__tooltip {
    width: 17rem !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
}