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

/* =========================================================
   BAUEN-UND-HEIMWERKEN.DE – DOMAIN-FARBEN
   Nur diesen Block pro Website anpassen
   Domain: bauen-und-heimwerken.de
   ========================================================= */

:root {
  /* Markenfarben */
  --site-primary: #343a3d;
  --site-primary-dark: #252a2c;
  --site-accent: #9b6510;

  --site-secondary: #52705a;
  --site-secondary-dark: #3e5745;
  --site-secondary-soft: #edf2ed;

  --site-brown: #8a6548;
  --site-red: #a23b35;

  /* Helleres Messing nur für größere/dekorative Elemente */
  --site-brass-light: #c08a28;

  /* Komponentenfarben */
  --site-media-bar: #343a3d;
  --site-video-cta: var(--site-accent);
  --site-video-accent: var(--site-accent);
  --site-reading-progress: var(--site-accent);

  /* Header */
  --site-header-bg: #ffffff;
  --site-header-text: #000000;
  --site-header-link: #343a3d;
  --site-header-link-hover: #7a4f0c;
  --site-header-icon: #343a3d;

  --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: #343a3d;
  --site-mobile-menu-link-hover: #7a4f0c;

  /* Footer */
  --site-footer-bg: #252a2c;
  --site-footer-text: #ffffff;
  --site-footer-muted: #d8dcda;
  --site-footer-link: #ffffff;
  --site-footer-link-hover: #f0d39a;
  --site-footer-border: rgba(255, 255, 255, 0.18);

  /* Allgemeine Flächen */
  --site-bg: #ffffff;
  --site-soft: #f5f3ee;
  --site-soft-primary: #f1f0eb;
  --site-soft-accent: #faf5e9;
  --site-card-bg: #ffffff;

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

  /* 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);
}


/* =========================================================
   BAUEN-UND-HEIMWERKEN.DE – DOMAIN-LOGO
   Breites horizontales Logo mit Claim.
   ========================================================= */

:root {
  --site-header-logo-width: 370px;
  --site-header-logo-width-compact: 310px;

  --site-header-nav-offset: 425px;
  --site-header-nav-offset-compact: 360px;

  --site-header-logo-width-mobile: 250px;
  --site-header-logo-width-mobile-compact: 215px;
}


/* =========================================================
   BAUEN-UND-HEIMWERKEN.DE – EXTERNE STARTSEITEN-ICONS

   JCE/Joomla entfernt in diesem Modul Inline-SVG-Inhalte.
   Deshalb werden die Icons als externe SVG-Bilder eingebunden.
   ========================================================= */

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

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

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


/* =========================================================
   BAUEN-UND-HEIMWERKEN.DE – BARRIEREFREIER FARBKONTRAST

   Das helle Messing #c08a28 bleibt als dekorative Markenfarbe
   erhalten. Für kleine Texte und weiße Schrift wird das dunklere
   Messing #9b6510 verwendet.

   Für Weiß auf Grün und kleine grüne Texte wird bevorzugt
   --site-secondary-dark (#3e5745) eingesetzt.
   ========================================================= */

/* 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;
}


/* Aktionsbutton im Projekt-Tipp */
.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;
}


/* Grüne Download-Karte:
   kleine grüne Texte benötigen höheren Kontrast */
.site-home-download--green .site-home-download__kicker,
.site-home-download--green .site-home-download__link {
  color: var(--site-secondary-dark);
}


/* Messingfarbene Download-Karte:
   kleine Texte verwenden das dunklere CTA-Messing */
.site-home-download--orange .site-home-download__kicker,
.site-home-download--orange .site-home-download__link {
  color: var(--site-accent);
}


/* Tastaturfokus auf wichtigen farbigen Elementen klar sichtbar */
.site-article-card__category:focus-visible,
.site-home-button--wine:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--site-accent) 45%,
      transparent
    );
  outline-offset: 2px;
}


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

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