/* ============================================================
   willmixen2026-child — GLOBAL CSS
   ------------------------------------------------------------
   Wird auf JEDER Seite geladen (Home, Archive, Recipe, Page, ...).
   Hier nur SEHR minimale, site-weite Schutzregeln.
   Layout-spezifischer Code gehoert in recipe-template.css /
   home-archive.css.

   v0.8.7 (2026-05-10)
   ============================================================ */

/* ============================================================
   Mobile Horizontal-Overflow-Schutz (site-weit)
   ------------------------------------------------------------
   Slickstream's <slick-heartbeat> position:fixed Element ragt
   auf Mobile (~390px) ueber den Viewport hinaus → erzeugt
   horizontalen Scroll. Plus: Astra Hero-Blobs, Footer-Cols
   und manche Plugin-Container koennen ebenfalls overflowen.

   `clip` ist sicherer als `hidden` — kein neuer Scroll-Container,
   kein Sticky-Break. Fallback `hidden` fuer aeltere Browser.
   ============================================================ */
/* v0.9.8: Color-Scheme bleibt explizit light — verhindert Chrome's Auto-Dark-Mode Render-Layer */
:root {
  color-scheme: light;
}

html {
  overflow-x: hidden;          /* Fallback fuer alte Browser */
  overflow-x: clip;            /* Modern: Chrome 90+, Safari 16+ */
  color-scheme: light;
}
body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100vw;
}

/* ============================================================
   v0.9.14 — Site-wide float-Fix fuer #primary
   ------------------------------------------------------------
   Astras Default fuer #primary ist `float: left` (vorgesehen fuer
   2-Spalten-Layout mit Sidebar). Auf no-Sidebar-Pages laesst das
   den Parent #page kollabieren — der <footer> rendert dann
   parallel zum Content statt darunter. Die 5138px hohe dunkle
   .footer-adv-overlay schimmert in den Content-Bereich.

   v0.9.12 hatte den Fix nur auf wm-home/archive/recipe-Pages
   gezogen. Static WP-Pages (Thermomix-Hub etc.) bleiben sonst
   broken. Hier site-weit, scoped via `.ast-no-sidebar`.
   ============================================================ */
body.ast-no-sidebar #primary {
  float: none !important;
}
body.ast-no-sidebar .site-footer,
body.ast-no-sidebar #colophon {
  clear: both !important;
}

/* ============================================================
   v0.9.33 — Hide Astra Above Footer Widget Area
   ------------------------------------------------------------
   Footer Widget Areas 1-4 zeigen Platzhalter-Text wenn keine
   Widgets zugewiesen sind. Deshalb .footer-adv komplett
   verstecken. Der Copyright-Footer (#colophon) bleibt
   sichtbar mit Astra-Default (#3a3a3a + 70px padding).

   Historie: v0.9.5-7 hatte den GESAMTEN Footer versteckt
   (falsch). v0.9.11 alles wiederhergestellt. Jetzt gezielt
   nur .footer-adv (Widget-Bereich oben), nicht #colophon.
   ============================================================ */
.footer-adv {
  display: none !important;
}

/* ============================================================
   v0.9.20 — Footer-Container Padding wiederherstellen
   ------------------------------------------------------------
   Live-Diagnose: bodyScrollWidth war 2565 bei viewport 2545 →
   20px Overflow. Verursacher: `.footer-adv .ast-container { padding:0 }`
   aus unseren Page-Layout-Overrides — aber Astras Footer-Grid
   nutzt `.ast-row { margin: 0 -20px }` und braucht das Padding
   auf der container-Ebene zur Kompensation. Ohne Padding ueberhing
   die Footer-Row 20px nach rechts, was den gesamten Body breiter
   als Viewport gemacht hat. Mobile Chrome clippt das nicht
   zuverlaessig und Content-Paragraphen ueberlaufen rechts.
   ============================================================ */
#colophon .ast-container,
.ast-small-footer .ast-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ============================================================
   v0.9.19 — Mobile Overflow-Schutz site-weit
   ------------------------------------------------------------
   Defensive Regeln: jedes Element im Content respektiert die
   Viewport-Breite. Faengt bekannte Boesewichte ab — lange URLs,
   Wide Tables, Iframes, eingebettete Videos, WPRM-Komponenten.
   ============================================================ */
@media (max-width: 760px) {
  .entry-content,
  .article,
  .hub-article {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .entry-content img,
  .entry-content video,
  .entry-content iframe,
  .entry-content embed,
  .entry-content object,
  .article img,
  .article video,
  .article iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .entry-content table,
  .article table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .entry-content pre,
  .article pre {
    max-width: 100%;
    overflow-x: auto;
  }
  /* WPRM-Container nie breiter als Viewport */
  .wprm-recipe-container,
  [class*="wprm-recipe"]:not([class*="wprm-recipe-rating"]) {
    max-width: 100% !important;
  }
}

/* ============================================================
   v0.9.16 — Heart-Button auf Recipe-Cards ausblenden
   ------------------------------------------------------------
   User-Entscheidung 2026-05-10: nur das Herzchen auf den
   Recipe-Card-Bildern raus. Hero-Save-Button und WPRM/Slickstream
   Save-UI bleiben sichtbar — Save-Funktion bleibt also erhalten,
   nur das visuelle Card-Heart geht raus.
   ============================================================ */
.rcard__save {
  display: none !important;
}

/* ============================================================
   v0.9.3 — Font-Faces site-weit
   ------------------------------------------------------------
   Damit der Header (rendert auf jeder Page) seine Schrift hat,
   selbst auf Page-Types die weder home-archive.css noch
   recipe-template.css laden.
   ============================================================ */
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('../fonts/PerfectlyNineties-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Perfectly Nineties'; src: url('../fonts/PerfectlyNineties-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }

/* ============================================================
   v0.9.37 — UX/SEO Audit Fixes (Mai 2026)
   Quellen: Browser-Headless-Audit, 10 Punkte
   ============================================================ */

/* Fix C: Leere H1-Tags verstecken — Astra gibt auf Seiten ohne Titel
   manchmal ein leeres <h1></h1> aus. CSS-Guard als Fallback. */
h1:empty { display: none; }

/* Fix D: Consent-Dialog Mobile — max-width + Button-Stapelung.
   Deckt die 5 häufigsten Consent-Plugins ab. Falls keiner trifft:
   Klasse via DevTools identifizieren und hier ergänzen. */
@media (max-width: 767px) {
  [class*="rcb-"],
  .rcb-dialog,
  .cmplz-cookiebanner,
  #cookieyes-consent-popup,
  .cky-consent-container,
  #cookie-notice,
  .cookie-notice-container {
    max-width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
  }
  [class*="rcb-"] .rcb-footer,
  [class*="rcb-"] .rcb-buttons,
  .cmplz-cookiebanner .cmplz-footer,
  .cky-btn-revisit-wrapper {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* v0.9.38 — <picture>-Wrapper (Imagify WebP/AVIF) Layout-neutral machen.
   Imagify wickelt <img> in <picture><source>...</picture>. <picture> ist
   standardmässig display:inline — das bricht alle Container die width/height
   auf img setzen (hero__image, rcard__img, rrow__img, feat-stack, strip-row).
   display:contents macht <picture> für das Layout unsichtbar: <img> verhält
   sich als wäre es direkt im Eltern-Container. Alle CSS-Selektoren auf img
   greifen weiterhin (CSS matcht DOM, nicht den Layout-Tree). */
picture {
  display: contents;
}

/* ============================================================
   Sidebar Display-Ad Wrapper (v0.9.59)
   ------------------------------------------------------------
   Nur fuer .wm-sidebar-display-ad — den exakten Wrapper um
   will-mixen_desktop_incontent (ID 93349) in single.php Slot 4.
   KEIN overflow:hidden — Pubguru-Richtlinien verbieten Abschneiden.
   max-width:100% begrenzt den Wrapper, klemmt aber nichts ab.
   ============================================================ */
.wm-sidebar-display-ad {
  max-width: 100%;
}

/* v0.9.63: Sidebar-Display-Ad auf Mobile ausblenden.
   Auf Desktop bleibt die Sidebar mit Ad sichtbar (Revenue),
   auf <1024px wird sie unter den Content gestapelt (siehe recipe-template.css:1495).
   Ohne diese Regel rendert die Ad auf Mobile zu breit + verdeckt Content. */
@media (max-width: 1024px) {
  .wm-sidebar-display-ad {
    display: none;
  }
}

/* v0.9.63: A11y — Touch-Targets mindestens 44x44px (WCAG AAA, Apple HIG)
   Gilt fuer Icon-Buttons in Recipe-Cards, Sidebar, Header.
   Padding statt min-width damit das visuelle Layout nicht bricht.
   v0.9.65: a[class*="strip-row"] entfernt — Strip-Rows spannen immer die volle
   Kartenbreite und sind bereits > 44px gross. display:inline-flex + justify-content:center
   ueberschrieb das display:grid aus home-archive.css und verschob die Rang-Nummern. */
.rcard__save,
.wmc-header__social-link,
.wmc-header__search-toggle,
.bigsearch__btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   FOOTER (v0.9.66)
   ============================================================ */
.wmc-footer {
  background: #1C1917;
  color: #D6D3D1;
  font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin-top: 80px;
}
.wmc-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 2rem 32px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  grid-template-rows: auto auto;
  gap: 32px 48px;
  align-items: start;
}

/* Branding */
.wmc-footer__brand { grid-column: 1; grid-row: 1; }
.wmc-footer__brand .custom-logo { filter: brightness(0) invert(1); max-height: 48px; width: auto; opacity: 0.9; }
.wmc-footer__site-name { font-size: 1.4rem; font-weight: 700; color: #fff; }
.wmc-footer__tagline { font-size: 0.82rem; color: #A8A29E; margin: 10px 0 0; line-height: 1.5; }

/* Navigation */
.wmc-footer__nav { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.wmc-footer__nav a {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #A8A29E;
  text-decoration: none;
  transition: color 0.18s;
}
.wmc-footer__nav a:hover { color: #fff; }

/* Social */
.wmc-footer__social { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 14px; }
.wmc-footer__social-link {
  color: #A8A29E;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.18s;
}
.wmc-footer__social-link:hover { color: #fff; }

/* Bottom-Bar */
.wmc-footer__bottom {
  grid-column: 1 / -1;
  grid-row: 2;
  border-top: 1px solid #292524;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.wmc-footer__copy { font-size: 0.75rem; color: #78716C; }
.wmc-footer__legal { display: flex; gap: 20px; }
.wmc-footer__legal a { font-size: 0.75rem; color: #78716C; text-decoration: none; transition: color 0.18s; }
.wmc-footer__legal a:hover { color: #A8A29E; }

@media (max-width: 768px) {
  .wmc-footer__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 40px 1.25rem 28px;
    gap: 28px;
  }
  .wmc-footer__brand,
  .wmc-footer__nav,
  .wmc-footer__social { grid-column: 1; grid-row: auto; }
  .wmc-footer__social { flex-direction: row; flex-wrap: wrap; gap: 18px; }
  .wmc-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Fix E: Slickstream Floating Buttons erst nach Scroll sichtbar (Mobile).
   JS in functions.php wp_footer-Hook setzt .wmc-visible nach 200px Scroll. */
@media (max-width: 767px) {
  slick-heartbeat,
  .slickstream-search-button,
  [class*="slick-floating"],
  slick-widget {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  slick-heartbeat.wmc-visible,
  .slickstream-search-button.wmc-visible,
  [class*="slick-floating"].wmc-visible,
  slick-widget.wmc-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   v0.9.126 — Pinterest-Pin-Button + groessere Share-Buttons
   ============================================================ */

/* Pinterest-Pin-Button: Ghost-Style, Pinterest-rotes Icon */
.btn--pin svg { color: #e60023; fill: #e60023; }
.btn--pin:hover { border-color: #e60023; color: #e60023; }
.btn--pin:hover svg { color: #e60023; fill: #e60023; }

/* Novashare Inline-Share-Buttons: in JEDEM Beitrag groesser + besser sichtbar.
   Standard war 30x30 mit 9px-Icon (zu klein/versteckt, siehe Tobias 21.06.). */
.ns-buttons.ns-inline .ns-button,
.ns-buttons.ns-inline.small .ns-button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
}
.ns-buttons.ns-inline .ns-button .ns-button-icon,
.ns-buttons.ns-inline .ns-button .ns-button-icon svg,
.ns-buttons.ns-inline.small .ns-button .ns-button-icon svg {
    width: 20px !important;
    height: 20px !important;
}
.ns-buttons.ns-inline {
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
/* Share-Count groesser/lesbarer */
.ns-total-share-count .ns-total-share-count-amount { font-size: 1.3rem !important; line-height: 1.1; }
.ns-total-share-count .ns-total-share-count-text  { font-size: .72rem !important; letter-spacing: .06em; }