/*
 Theme Name:   GeneratePress Child – Metzgerei Heinrich
 Theme URI:    https://metzgerei-heinrich.bbwerbeagentur.de
 Description:  Child Theme für Metzgerei Heinrich
 Author:       BB Werbeagentur
 Author URI:   https://bbwerbeagentur.de
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child
*/
/* ============================================================
   CUSTOM FONTS (@font-face) – GANZ OBEN!
   Alle Fonts lokal geladen → DSGVO-konform & schnell!
   ============================================================ */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stones Crush';
  src: url('fonts/Stones-Crush.woff2') format('woff2'),
       url('fonts/Stones-Crush.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Beach Society';
  src: url('fonts/Beach-Society-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
  --color-orange:       #ec6707;
  --color-orange-dark:  #c9560a;
  --color-green:        #004c24;
  --color-green-dark:   #001410;
  --color-green-hover:  #003a1b;   /* Button-Hover: erkennbar dunkler, aber KEIN Schwarz wie --color-green-dark (das ist bewusst für Footer/Mobile-Header fast schwarz) */
  --color-white:        #ffffff;
  --color-light:        #f5f2ee;
  --color-text:         #004c24;
  --color-text-muted:   #3a7a52;
  --font-display:       'Stones Crush', serif;
  --font-accent:        'Beach Society', cursive;
  --font-body:          'Montserrat', sans-serif;
  --radius:             4px;
  --transition:         0.25s ease;
}
/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
/* Sanftes Scrollen zu Sprungmarken (#jobs, #ausbildung etc.) statt
   hartem Sprung */
html {
  scroll-behavior: smooth;
}
/* Damit das Sprungziel nicht hinter dem schwebenden Header verschwindet */
[id] {
  scroll-margin-top: 120px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Sicherstellen, dass das hidden-Attribut immer funktioniert - die
   obige Regel überschreibt sonst das native Browser-Verhalten dafür
   (z.B. beim Mini-Cart, der mit zwei img-Tags + hidden-Toggle
   arbeitet, je nachdem ob ein Produkt noch im Katalog ist) */
[hidden] {
  display: none !important;
}
a {
  color: var(--color-orange);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-orange-dark);
}
/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
h1 { 
  font-size: clamp(4.5rem, 7vw, 7rem); 
  font-family: var(--font-display); 
  font-weight: 100; 
  line-height: 0.85;
  text-align: center !important;
  margin-bottom: 0;
  width: 100%;
  word-spacing: -0.1em;
}
h2 { font-size: clamp(1rem, 2vw, 1.2rem); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
h3 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
/* Span innerhalb H1 */
h1 span {
  font-family: var(--font-display) !important;
  font-weight: 100;
  color: var(--color-orange);
  display: block;
  font-size: 1em;
  line-height: 0.95;
  margin-top: 0;
  text-align: center !important;
}
/* ============================================================
   UNTERSCHRIFT / HANDSCHRIFT (Beach Society Font)
   ============================================================ */
/* VARIANTE 4: +30% größer (AKTIV) */
.unterschrift {
  font-family: 'Beach Society';
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: normal;
  font-style: italic;
  color: var(--color-green);
  text-align: center;
  margin: 30px 0;
  line-height: 1.2;
}
/* H1 Farbvarianten */
.h1-white h1,
h1.h1-white { color: var(--color-white) !important; }
.h1-green h1,
h1.h1-green { color: var(--color-green) !important; }
.h1-orange h1,
h1.h1-orange { color: var(--color-orange) !important; }
/* Eyebrow + Subline – einheitlich */
.eyebrow,
.subline,
.willkommen-section .eyebrow,
.tierwohl-inner .subline {
  font-size: 1.5rem !important;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-orange);
  margin-top: 24px;
  margin-bottom: 48px;
  display: block;
  text-align: center;
  line-height: 1.25;
}
@media (max-width: 768px) {
  .eyebrow,
  .subline,
  .willkommen-section .eyebrow,
  .tierwohl-inner .subline {
    font-size: 1.15rem !important;
    line-height: 1.3;
  }
  /* Die generelle Section-Basis (130px/100px) war bisher nur für
     Desktop gedacht/skaliert – auf Mobile deutlich zu viel Luft.
     :not(.no-h1), damit die eigene 8px/8px-Regel für reine
     Text-Sections (z.B. der Spacer) nicht überschrieben wird. */
  .mh-sektion:not(.no-h1) {
    padding: 70px 20px 60px !important;
  }
}
/* Eyebrow/Subline Farbvarianten */
.eyebrow-orange, .subline-orange { color: var(--color-orange) !important; }
.eyebrow-green,  .subline-green  { color: var(--color-green)  !important; }
.eyebrow-white,  .subline-white  { color: var(--color-white)  !important; }
.hero-content h1 span {
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--color-orange);
  display: block;
  font-size: 1.1em;
}
.display-font {
  font-family: var(--font-display);
}
.accent-font {
  font-family: var(--font-display);
}
/* Span im Hero explizit überschreiben */
.hero-content h1 span,
h1 span {
  font-family: var(--font-display) !important;
  font-weight: 100;
  color: var(--color-orange);
  display: block;
  font-size: 1.1em;
}
/* ============================================================
   HEADER / NAVIGATION – transparent, über Hero
   ============================================================ */
.site-header.mh-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}
/* Wenn Admin-Bar sichtbar ist, Header nach unten verschieben */
.admin-bar .site-header.mh-header {
  top: 32px;
}
/* ============================================================
   WOOCOMMERCE STORE NOTICE (Shop-Mitteilung)
   ============================================================
   WooCommerce zeigt die Shop-Mitteilung standardmäßig als position:
   fixed ganz oben an - überlagert dadurch unseren Header/die Navi,
   statt sie nach unten zu schieben. Fix: eigene Farbe (Orange statt
   Standard-Lila) + Header/Hero werden nach unten verschoben, sobald
   die Leiste aktiv ist (WooCommerce setzt dafür automatisch die
   Body-Klasse .woocommerce-demo-store).
   Geschätzte Höhe der Leiste: ~46px Desktop, ~64px Mobile (kann bei
   längerem Text variieren - falls die Leiste umbricht, hier die
   Werte nachjustieren). */
.woocommerce-store-notice,
p.demo_store {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body);
  font-weight: 700;
}
.woocommerce-store-notice a,
p.demo_store a {
  color: var(--color-white) !important;
  text-decoration: underline;
}
body.woocommerce-demo-store .site-header.mh-header {
  top: 46px;
}
body.woocommerce-demo-store.admin-bar .site-header.mh-header {
  top: 78px; /* 32px Admin-Bar + 46px Store-Notice */
}
/* Hero-Section ist selbst position:relative (kein fixed) und folgt
   dem Header im normalen Textfluss - trotzdem zusätzlicher Puffer
   oben, damit die Notice nicht ins Hero-Bild hineinragt */
body.woocommerce-demo-store .hero-section {
  margin-top: 46px;
}
@media (max-width: 768px) {
  body.woocommerce-demo-store .site-header.mh-header {
    top: 64px;
  }
  body.woocommerce-demo-store .hero-section {
    margin-top: 64px;
  }
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 30px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  min-height: 120px;
}
/* Logo mittig */
.site-logo {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  padding-top: 10px;
}
.site-logo img {
  width: 250px;
  height: auto;
}
/* Fallback ohne Custom Logo */
.site-title-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-white);
}
.site-name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
}
.site-name strong {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-orange);
  display: block;
}
.site-claim {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-top: 4px;
}
/* Nav links – orange Links */
.nav-left {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}
.nav-left .nav-left-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-start;
}
.nav-left .nav-left-menu li a {
  position: relative;
  color: var(--color-orange);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  transition: opacity var(--transition);
  text-decoration: none;
}
.nav-left .nav-left-menu li a:hover,
.nav-left .nav-left-menu li.current-menu-item > a {
  color: var(--color-orange);
}
.nav-left .nav-left-menu li a:hover::after,
.nav-left .nav-left-menu li.current-menu-item > a::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  background: var(--color-orange);
}
/* Nav rechts – grüne Links */
.nav-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.nav-right .nav-right-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.nav-right .nav-right-menu li a {
  position: relative;
  color: var(--color-green);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  transition: opacity var(--transition);
  text-decoration: none;
}
.nav-right .nav-right-menu li a:hover,
.nav-right .nav-right-menu li.current-menu-item > a {
  color: var(--color-green);
}
.nav-right .nav-right-menu li a:hover::after,
.nav-right .nav-right-menu li.current-menu-item > a::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  background: var(--color-green);
}
/* Mobile Burger */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.mobile-menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
/* Mobile Menü */
.mobile-menu {
  background: rgba(0,0,0,0.92);
  padding: 20px 30px;
}
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu ul li a {
  display: block;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid;
  border-bottom-color: var(--color-green);
  text-decoration: none;
}
.mobile-menu .mobile-nav-left li a {
  color: var(--color-orange);
}
.mobile-menu .mobile-nav-right li a {
  color: var(--color-green);
}
.mobile-menu[hidden] {
  display: none;
}
/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  /* justify-content: center; ← RAUS! */
  align-items: center;
  overflow: hidden;
  padding-top: 350px;           /* ← 350px total! */
}
.hero-section .hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* Parallax: leicht übergroß (via JS-Transform skaliert), damit beim
   Verschieben keine Ränder sichtbar werden. .hero-section braucht
   dafür overflow:hidden (ist bereits Standard). */
.hero-bg--parallax,
.sektion-bg--parallax {
  will-change: transform;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 50%);
  z-index: 1;
}
/* Opt-out: ACF-Feld "Dunkles Overlay deaktivieren" im Hero-Layout */
.hero-section.no-overlay::after {
  display: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;            /* ← Schmäler! */
  margin: 0 auto;
  padding: 0 20px 80px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-content h1 {
  color: var(--color-white);
  font-size: clamp(4rem, 9vw, 8rem);
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  max-width: none;
  text-align: center !important;
}
.hero-content h1 span {
  font-family: var(--font-accent);
  color: var(--color-orange);
  display: block;
  font-size: 1.1em;
}
/* ============================================================
   ICON-NAVIGATION (Angebote / Shop / Aktuelles) – überlappende Kacheln
   ============================================================ */
.icon-nav-section {
  background: transparent;
  position: relative;
  z-index: 5;
  padding: 0 20px;
}
.icon-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
/* Kachelgröße ist jetzt fix (200px, s.u.), daher lässt sich der
   Überlapp-Versatz als fester Pixel-Wert berechnen (halbe Höhe =
   100px) – zuverlässiger als Prozent/vw, weil die Größe nicht mehr
   fluid mitskaliert. margin-top zieht in die vorherige Section
   (Hero), margin-bottom schließt aktiv die Lücke zur nächsten
   Section (verhindert den weißen Streifen dazwischen).
   ZURÜCKGESETZT: 80px hatte den weißen Streifen zurückgebracht,
   den wir früher schon mühsam behoben hatten - lieber die
   Kollisions-Frage (2- vs. 3-zeilige Headline) separat lösen,
   ohne diesen bereits gelösten Punkt wieder aufzureißen. */
.icon-nav-section.has-overlap {
  margin-top: -100px;
  margin-bottom: -100px;
}
.icon-nav-item {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-decoration: none;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  transition: transform var(--transition), box-shadow var(--transition), color var(--transition);
  text-align: center;
  box-sizing: border-box;
}
.icon-nav-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.22);
}
.icon-nav-item__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.icon-nav-item__bild {
  width: 45%;
  max-width: 110px;
  height: auto;
  object-fit: contain;
}
.icon-nav-item__label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Drei Farbvarianten pro Kachel */
.icon-nav-item--weiss {
  background: var(--color-white);
  color: var(--color-green);
}
.icon-nav-item--weiss:hover {
  color: var(--color-green);
}
.icon-nav-item--gruen {
  background: var(--color-green);
  color: var(--color-white);
}
.icon-nav-item--gruen:hover {
  color: var(--color-orange);
}
.icon-nav-item--orange {
  background: var(--color-orange);
  color: var(--color-white);
}
/* Globales a:hover setzt sonst dunkelorange – hier bewusst auf Grün
   überschrieben, da Weiß-auf-Dunkelorange auf dem orangen Button
   kaum lesbar wäre */
.icon-nav-item--orange:hover {
  color: var(--color-green);
}
@media (max-width: 768px) {
  .icon-nav-inner {
    gap: 12px;
  }
  .icon-nav-item {
    width: 100px;
    height: 100px;
    padding: 14px;
    gap: 8px;
    border-radius: 12px;
  }
  .icon-nav-item__inner {
    gap: 8px;
  }
  .icon-nav-item__label {
    font-size: 0.65rem;
  }
  /* Feste 100px Kachelgröße auf Mobile → Überlapp-Versatz halbe
     Höhe = 50px, jetzt wieder verlässlich berechenbar */
  .icon-nav-section.has-overlap {
    margin-top: -50px;
    margin-bottom: -50px;
  }
  /* Der manuell eingefügte 5vh-Abstandshalter (für Desktop gedacht)
     wird auf Mobile durch die geringere Überlappung proportional zu
     groß – hier gezielt via Attribut-Selektor verkleinert, da die
     Section keine eigene Klasse hat, nur die Inline-Style min-height */
  section[style*="min-height:5vh"] {
    min-height: 0 !important;
  }
}
/* ============================================================
   WILLKOMMEN SECTION
   ============================================================ */
.willkommen-section {
  background: var(--color-green);
  padding: 80px 20px;
  text-align: center;
}
.willkommen-section .section-inner {
  max-width: 800px;
  margin: 0 auto;
}
.willkommen-section h1 {
  color: var(--color-orange);
}
.willkommen-section p {
  color: rgba(255,255,255,0.9);
  font-size: 1rem;
  line-height: 1.8;
}
/* ============================================================
   TIERWOHL SECTION
   ============================================================ */
.tierwohl-section {
  background: var(--color-light);
  padding: 80px 20px;
}
.tierwohl-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.tierwohl-inner h2 {
  color: var(--color-green);
}
.tierwohl-text {
  text-align: center;
}
.tierwohl-inner .subline {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-orange);
  margin-bottom: 16px;
}
.tierwohl-inner p {
  color: var(--color-text-muted);
  line-height: 1.8;
}
.tierwohl-inner .tierwohl-image img {
  border-radius: var(--radius);
  width: 100%;
  max-width: 900px;
  object-fit: cover;
  aspect-ratio: 16/7;
}
/* ============================================================
   STANDORTE SECTION
   ============================================================ */
.standorte-section {
  background: var(--color-white);
  padding: 80px 20px;
}
.standorte-section h2 {
  color: var(--color-green);
  text-align: center;
  margin-bottom: 48px;
}
.standorte-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
.standort-card {
  border: none;
  border-radius: 0;
  overflow: hidden;
}
.standort-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.standort-card-body {
  padding: 20px;
}
.standort-card h3 {
  font-size: 1rem;
  color: var(--color-green);
  margin-bottom: 4px;
}
.standort-card p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
/* ============================================================
   KONSERVEN SECTION (orange Hintergrund)
   ============================================================ */
.konserven-section {
  background: var(--color-orange);
  padding: 80px 20px;
}
.konserven-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.konserven-inner h2 {
  color: var(--color-white);
}
.konserven-inner p {
  color: rgba(255,255,255,0.9);
  line-height: 1.8;
}
/* ── Globale Konserven-Sektion: responsives Overlap fürs Dosen-Bild ──
   .sektion-bild--overlap hat global ein fixes margin-bottom:-80px
   (nicht responsiv – gleicher Bug wie beim Fixpixel-Overlap-Feld).
   Hier gezielt nur für diese eine Sektion responsiv überschrieben,
   der Rest des generischen Overlap-Systems bleibt unangetastet.
   Prozent-Wert statt vw: bezieht sich auf die Bildbreite/Container-
   breite, nicht auf die Viewport-Breite – dadurch bleibt der Versatz
   proportional zur tatsächlichen Bildgröße auf jedem Gerät konsistent. */
.konserven-overlap-section {
  overflow: visible !important;
  padding-bottom: 100px;
}
.konserven-overlap-section .sektion-bild--overlap {
  margin-top: -15%;
  margin-bottom: 0;
}
.konserven-overlap-section .sektion-bild--overlap img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Mehr Platz unten in der oberen (orangenen) Sektion, damit die
   Dosen genug Raum zum Überlappen haben, ohne den Text zu bedrängen */
.konserven-intro-section {
  padding-bottom: 220px;
}
@media (max-width: 600px) {
  .konserven-intro-section {
    padding-top: 50px;
    padding-bottom: 140px;
  }
  .konserven-overlap-section {
    padding-bottom: 60px;
  }
}
/* ============================================================
   QUOTE / FULLWIDTH SECTION
   ============================================================ */
.quote-section {
  background: var(--color-green);
  padding: 80px 20px;
  text-align: center;
}
.quote-section h2 {
  color: var(--color-white);
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(1.6rem, 4vw, 3rem);
}
.quote-section h2 span {
  color: var(--color-orange);
}
/* ============================================================
   SONNENALB SECTION (mit Bild-Hintergrund)
   ============================================================ */
.sonnenalb-section {
  position: relative;
  padding: 100px 20px;
  overflow: hidden;
}
.sonnenalb-section .sonnenalb-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.sonnenalb-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}
.sonnenalb-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}
.sonnenalb-inner h2 {
  color: var(--color-white);
  text-align: center;
  margin-bottom: 60px;
}
.sonnenalb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.sonnenalb-item h3 {
  color: var(--color-orange);
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.sonnenalb-item p {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  line-height: 1.8;
}
/* ============================================================
   PRAEZISE SECTION (Hero-ähnlich, dunkles Bild)
   ============================================================ */
.praezise-section {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.praezise-section .praezise-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.praezise-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1;
}
.praezise-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.praezise-content h2 {
  color: var(--color-white);
  font-size: clamp(2rem, 5vw, 4rem);
}
/* ============================================================
   SOCIAL / CTA SECTION
   ============================================================ */
.social-section {
  background: var(--color-light);
  padding: 80px 20px;
  text-align: center;
}
.social-section h2 {
  color: var(--color-green);
  margin-bottom: 32px;
}
.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}
.social-icons a {
  width: 48px;
  height: 48px;
  background: var(--color-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 1.2rem;
  transition: background var(--transition);
}
.social-icons a:hover {
  background: var(--color-orange);
  color: var(--color-white);
}
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-green);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 40px;
  text-align: center;
}
/* Nur erste Spalte (Logo) sichtbar, rest ausblenden */
.footer-col:nth-child(2),
.footer-col:nth-child(3) {
  display: none;
}
.footer-col:first-child {
  margin: 0 auto;
  text-align: center;
}
/* Logo im Footer: 250px wie Header Desktop, 50px auf Mobile */
.footer-col img,
.footer-col a img {
  width: 250px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
.footer-col p {
  text-align: center;
  margin: 46px auto 0 !important;
  font-size: 0.875rem;
  line-height: 1.8;
}
.footer-col-text {
  /* Klasse entfernt, da .footer-col p ausreichend ist */
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
}
.footer-bottom a {
  color: rgba(255,255,255,0.5);
}
.footer-bottom a:hover {
  color: var(--color-orange);
}
/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  border: none;
  text-decoration: none;
}
/* Abstand zum vorherigen Inhalt (Copy/Spalten) - passend zum neuen
   Subhead-zu-Copy-Abstand (48px), statt browser-default Absatz-
   Abstand */
.sektion-content > .btn {
  margin-top: 48px;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-orange);
  color: var(--color-green);
}
.btn-secondary {
  background: var(--color-green);
  color: var(--color-white);
}
.btn-secondary:hover {
  background: var(--color-green);
  color: var(--color-orange);
}
.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}
.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-green);
}
/* ============================================================
   SLIDER / CAROUSEL (Standorte)
   ============================================================ */
.slider-controls {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
}
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.slider-btn:hover {
  background: var(--color-orange);
}
/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: var(--radius) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--color-orange-dark) !important;
  color: var(--color-white) !important;
}
.woocommerce .price {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
}
/* ============================================================
   FLEXIBLE CONTENT – SEKTIONEN
   ============================================================ */
/* Hintergründe – explizit damit Z-Index greift */
.bg-weiss       { background-color: var(--color-white) !important; }
.bg-gruen       { background-color: var(--color-green) !important; }
.bg-orange      { background-color: var(--color-orange) !important; }
.bg-transparent { background-color: transparent !important; }
/* Weicher Übergang nach unten */
.mh-sektion.bg-weiss.fade-bottom {
  background: linear-gradient(
    to bottom,
    white 0%,
    white 60%,
    transparent 100%
  ) !important;
}
.mh-sektion {
  position: relative;
  padding: 130px 20px 100px;
  overflow: hidden;
}
/* Overlap – Sektion zieht nach oben */
.has-overlap {
  position: relative;
}
/* Hinter vorheriger Section (z.B. Kuhbild) */
.overlap-unten {
  z-index: 1;
}
/* Vor vorheriger Section (z.B. Konserven-Dosen) */
.overlap-oben {
  z-index: 3;
}
/* Alle normalen Sektionen */
.mh-sektion {
  position: relative;
  z-index: 2;
  padding: 130px 20px 100px;
  isolation: isolate;
}
/* Ohne Headline (H1) fehlt die große Textmasse, gegen die die 80px
   Standard-Auffüllung kalibriert sind → oben reduzieren. Gilt für
   JEDE Section ohne H1, unabhängig von Position/Hero/no-hero-page –
   z.B. bei mehreren aufeinanderfolgenden reinen Text-Sections wie auf
   den Stellenbeschreibungs-Seiten. */
.mh-sektion.no-h1 {
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Weißer Fade-Verlauf (.bg-weiss::after, 120px hoch) würde bei so
   kleinem Padding über den Text ragen → hier deaktivieren */
.mh-sektion.no-h1.bg-weiss::after,
.mh-sektion.no-h1.bg-weiss::before {
  display: none !important;
}
/* Hinter vorheriger Section (z.B. Kuhbild) */
.overlap-unten {
  z-index: 1 !important;
  isolation: auto;
}
/* Vor vorheriger Section (z.B. Konserven-Dosen) */
.overlap-oben {
  z-index: 3 !important;
}
/* Hintergrundbild */
.has-bg-bild .sektion-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.has-bg-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.00);
  z-index: 1;
}
.has-bg-bild .sektion-inner {
  position: relative;
  z-index: 2;
}
/* Sektion Inner */
.sektion-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
/* Mit Bild links oder rechts → nebeneinander */
.has-bild-links .sektion-inner,
.has-bild-rechts .sektion-inner {
  flex-direction: row;
  align-items: center;
}
.sektion-content {
  flex: 1;
  text-align: center;
  max-width: 860px;
  width: 100%;
}
.has-bild-links .sektion-content,
.has-bild-rechts .sektion-content {
  text-align: left;
}
/* H1 hat global ein hartes text-align:center !important – hier
   gezielt für Sections mit Bild links/rechts überschrieben, damit
   Headline/Subline zum linksbündigen Fließtext passen */
.has-bild-links h1,
.has-bild-rechts h1,
.has-bild-links .eyebrow,
.has-bild-rechts .eyebrow {
  text-align: left !important;
}
/* Sektion Bild */
.sektion-bild img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.sektion-bild--links,
.sektion-bild--rechts {
  flex: 1;
  max-width: 50%;
}
.sektion-bild--vollbreite {
  width: 75%;
}
.sektion-bild--overlap {
  margin-bottom: -80px;
  position: relative;
  z-index: 10;
}
/* Fließtext Farben */
.sektion-text.text-white,
.sektion-text.text-white p  { color: var(--color-white); }
.sektion-text.text-green,
.sektion-text.text-green p  { color: var(--color-green); }
.sektion-text.text-orange,
.sektion-text.text-orange p { color: var(--color-orange); }
.sektion-text.text-dark,
.sektion-text.text-dark p   { color: var(--color-text); }
.sektion-text {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
/* Zwischenüberschriften (H3) im Fließtext deutlich kleiner als die
   Subline (.eyebrow, 1.5rem) halten – sonst wirkt die Hierarchie verkehrt */
.sektion-text h3 {
  font-size: 1rem;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
/* Bulletpoints im Fließtext mittig statt linksbündig */
.sektion-text ul,
.sektion-text ol {
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
  text-align: center;
}
.sektion-text li {
  text-align: center;
}
/* Mobile: Fließtext doch zentriert (zentrierter Text mit Zeilenumbruch
   wirkt auf schmalen Spalten schnell unruhig/zerrissen) – Headlines,
   Subline und Buttons bleiben bewusst zentriert (ruhiger als Anker) */
@media (max-width: 768px) {
  .sektion-text,
  .sektion-text p,
  .sektion-text ul,
  .sektion-text ol,
  .sektion-text li {
    text-align: center;
  }
  /* list-style-position:inside (für zentrierte Listen gedacht) hat
     keinen hängenden Einzug – bei linksbündigem Text bräuchte ein
     umbrechendes Listenelement sonst wieder ganz links neu an,
     statt unter dem Text der ersten Zeile weiterzulaufen */
  .sektion-text ul,
  .sektion-text ol {
    list-style-position: outside;
    padding-left: 20px;
  }
}
/* 2-Spalten – nutzen jetzt .eyebrow und .sektion-text (identisch zu 1-spaltig) */
.sektion-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
  text-align: left;
}
/* 2-spaltige Listen sind immer linksbündig angelegt (unabhängig vom
   Breakpoint) - gleiche Einrückungs-Technik wie mobil: outside statt
   inside, sonst kein hängender Einzug bei umbrechenden Listenpunkten */
.sektion-spalten .sektion-text ul,
.sektion-spalten .sektion-text ol {
  list-style-position: outside;
  padding-left: 20px;
}
.sektion-spalte .eyebrow {
  text-align: center;
  margin-bottom: 24px;
}
.sektion-spalte .sektion-text {
  font-size: 1rem;
  line-height: 1.7;
}
/* Weicher Übergang nach unten wenn nächste Section ein Bild hat */
.mh-sektion.bg-weiss + .mh-sektion.has-bg-bild,
.mh-sektion.bg-weiss + .mh-sektion.bg-bild {
  margin-top: 0;
}
.mh-sektion.bg-weiss {
  position: relative;
}
/* Nur anwenden, wenn direkt danach eine Bild-Section folgt (wie beim
   margin-top:0 oben) – vorher pauschal auf JEDE weiße Section
   angewendet, das war der eigentliche Fehler hinter der langen Liste
   an Einzel-Ausnahmen weiter unten in dieser Datei. */
.mh-sektion.bg-weiss:has(+ .mh-sektion.has-bg-bild)::after,
.mh-sektion.bg-weiss:has(+ .mh-sektion.bg-bild)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, white);
  z-index: 2;
  pointer-events: none;
}
.parallax-bg {
  transform: scale(1.15);
  transition: transform 0.1s linear;
}
/* Konserven Illustration */
.konserven-illustration {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 200px;
  opacity: 0.9;
}
/* ============================================================
   GALERIE (Bild-Raster)
   ============================================================ */
.galerie-section {
  padding: 60px 20px;
}
.galerie-title {
  max-width: 1400px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}
.galerie-item {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.galerie-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.galerie-item:hover .galerie-img {
  transform: scale(1.05);
}
.galerie-section::after {
  display: none !important;
}
/* Responsive Flexible Content */
@media (max-width: 768px) {
  .has-bild-links .sektion-inner,
  .has-bild-rechts .sektion-inner {
    flex-direction: column;
  }
  .sektion-bild--links,
  .sektion-bild--rechts {
    max-width: 100%;
    width: 100%;
  }
  .sektion-spalten {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .has-overlap {
    margin-top: -40px;
  }
  /* Mobile Galerie: 2er Grid */
  .galerie-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .galerie-section {
    padding: 40px 20px;
  }
  /* Mobile Hero: 100vw für Querformat-Bilder */
  .hero-section {
    min-height: 100vw;          /* ← Skaliert nach Breite! */
    padding-top: 60px;          /* ← Kleiner für Mobile! */
  }
  /* Mobile Section-Bilder: auch 100vw */
  .mh-sektion.bg-bild {
    min-height: 100vw !important;  /* ← !important überschreibt Inline-Styles! */
  }
}
.text-center { text-align: center; }
.text-white  { color: var(--color-white) !important; }
.text-orange { color: var(--color-orange) !important; }
.text-green  { color: var(--color-green) !important; }
.bg-green    { background: var(--color-green); }
.bg-orange   { background: var(--color-orange); }
.bg-light    { background: var(--color-light); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .tierwohl-inner,
  .konserven-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .nav-left,
  .nav-right {
    display: none;
  }
  /* Mobile Header: Weißer HG gewünscht  */
  .site-header.mh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: var(--color-white);
  }
  .header-inner {
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    display: flex;
    gap: 8px;
    min-height: auto;
  }
  /* Mobile Logo: Icon 50px + Text */
  .mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 20px 0;
    text-decoration: none;
    color: inherit;
  }
  .mobile-logo-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .mobile-logo-text {
    color: var(--color-green);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }
  .mobile-logo-text strong {
    color: var(--color-orange);
  }
  /* Hamburger Icon: Transparent überall */
  .mobile-menu-toggle {
    display: flex;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px 8px;
    cursor: pointer;
    gap: 5px;
    flex-direction: column;
    z-index: 200;
  }
  .mobile-menu-toggle:hover,
  .mobile-menu-toggle:active,
  .mobile-menu-toggle:focus {
    background: transparent;
    outline: none;
  }
  .mobile-menu-toggle span {
    width: 24px;
    height: 3px;
    background: var(--color-orange);
    border-radius: 2px;
    display: block;
  }
  /* Desktop Logo ausblenden auf Mobile */
  .site-logo {
    display: none;
  }
  /* Mobile Menu: Weiß (wie mobiler Sticky Header) */
  .mobile-menu {
    background: var(--color-white);
    padding: 20px 30px;
  }
  .hero-section {
    min-height: 350px !important;
    padding-top: 20px !important;
    margin-top: 90px;
    justify-content: center;
  }
  /* Standard: Headline mittig in der Hero-Section (alle Seiten
     außer Startseite) */
  .hero-content {
    padding: 15px 20px 15px !important;
  }
  /* Startseite: Headline bewusst nach oben verschoben, wegen der
     Kollision mit den überlappenden Icon-Nav-Kacheln direkt darunter
     ("Monster-Buttons"-Problematik) - NUR bei der ERSTEN Hero-Section
     auf der Seite (.first-section, positionsabhängig statt
     seitenabhängig - funktioniert dadurch auf jeder Seite gleich,
     falls mal mehrere Hero-Sections hintereinander vorkommen) */
  .hero-section.first-section {
    justify-content: flex-start;
  }
  .hero-section.first-section .hero-content {
    padding: 15px 20px 30px !important;
  }
  .standorte-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .mobile-logo-icon {
    width: 50px;
    height: 50px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
/* Desktop: Mobile Logo verstecken */
@media (min-width: 769px) {
  .mobile-logo {
    display: none;
  }
}
/* ACF Flexible Content Labels im Frontend ausblenden */
.acf-fl-label { display: none !important; }
/* ============================================================
   ACF ADMIN: Flexible Content – bessere Section-Trennung
   ============================================================ */
/* Bessere visuelle Trennung zwischen Sections im Admin */
.acf-flexible-content .layout .acf-fc-layout-actions-wrap {
  background: #d0d0d0 !important;
  border-bottom: 3px solid #888 !important;
  padding: 12px 10px !important;
  border-radius: 3px 3px 0 0;
}
.acf-flexible-content .layout {
  margin-bottom: 15px !important;
  border: 1px solid #bbb !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  background: #fff !important;
}
/* Noch dunklere Labels beim Hover */
.acf-flexible-content .layout:hover .acf-fc-layout-actions-wrap {
  background: #c0c0c0 !important;
}
/* Weiter unten im Content: Padding für bessere Lesbarkeit */
.acf-flexible-content .layout .acf-fields {
  padding: 15px !important;
}
/* Weiche Übergänge */
.acf-flexible-content .layout {
  transition: all 0.2s ease !important;
}
/* Weicher Übergang oben für Bildsectionen – Klasse fade-top im Backend vergeben */
.has-bg-bild.fade-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient( to bottom, white 0%, transparent 100% );
  z-index: 2;
  pointer-events: none;
}
/* ============================================================
   SHOP KATEGORIEN – ACF Flexible Content Layout
   ============================================================ */
.shop-kategorien-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-top: 30px;
  width: 100%;
  align-items: start;
}
.shop-kat-box {
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
}
.shop-kat-link {
  display: block !important;
  text-decoration: none !important;
  color: inherit;
}
/* Kategoriename – Stones Crush, über dem Bild, wie unsere übrigen
   Section-Überschriften (gleiche Größe wie Footer-Headline/
   "Verwandte Produkte" - NICHT die XXL-Hero-H1) */
.shop-kat-name {
  display: block !important;
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  word-spacing: -0.1em;
  color: var(--color-green);
  text-align: center;
  text-transform: uppercase;
  margin: 24px 0 0 0;
}
/* Kategorieabhängige Farbe (analog zu Buttons/Titel anderswo im
   Theme): Wurstkonserven grün, Fertiggerichte orange */
.shop-kat-box--fertiggerichte .shop-kat-name {
  color: var(--color-orange);
}
.shop-kat-box--wurstkonserven .shop-kat-name {
  color: var(--color-green);
}
/* Bild: quadratisch, freigestellt auf Weiß, kein Crop/Overlay mehr */
.shop-kat-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-white);
}
.shop-kat-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}
.shop-kat-box:hover .shop-kat-image img {
  transform: scale(1.04);
}
.shop-kat-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-kat-image--placeholder svg {
  width: 60%;
  height: 60%;
  opacity: 0.3;
}
.shop-kategorien-section.bg-weiss::after,
.shop-kategorien-section.bg-weiss::before {
  display: none !important;
}
/* Oberer Abstand reduziert (statt Standard 130px) - die Kachel-
   Headlines selbst bringen schon große Stones-Crush-Textmasse direkt
   am oberen Rand mit, die volle Standard-Auffüllung wäre bei einer
   direkt vorangehenden Section doppelt gemoppelt. Kein no-h1 (8px),
   das wäre hier zu radikal - moderater Mittelwert. */
.shop-kategorien-section {
  padding-top: 0px;
}
.shop-kategorien-h1 {
  margin: 0 0 30px 0;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .shop-kategorien-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* ============================================================
   KARRIERE – Kacheln (Für Ausgelernte / Für Auszubildende)
   ============================================================ */
/* Weißen Verlauf (von .bg-weiss::after) für Karriere-Sektionen deaktivieren */
.karriere-section.bg-weiss::after,
.karriere-section.bg-weiss::before {
  display: none !important;
}
.karriere-header {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
/* Breite & Abstand analog .aktuelles-inner (Blog-Übersicht) */
.karriere-kacheln {
  max-width: 860px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.karriere-kachel {
  border-radius: 0;
  box-shadow: none;
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
/* Typo analog .aktuelles-card__titel */
.karriere-kachel__titel {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: clamp(4rem, 3vw, 2.8rem);
  line-height: 0.95;
  margin: 0 0 8px;
  text-transform: uppercase;
  word-spacing: -0.1em;
}
/* Typo analog .aktuelles-card__subline */
.karriere-kachel__zusatz {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  opacity: 0.9;
}
/* Fette Kurzzeile (z.B. "Verkaufstalent gesucht.") */
.karriere-kachel__text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 16px;
}
/* Fließtext analog .aktuelles-card__teaser */
.karriere-kachel__beschreibung {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 620px;
}
.karriere-kachel__btn {
  margin-top: auto;
}
/* ── Für Ausgelernte: orange Kachel, grüner Button ────────────── */
.karriere-kachel--ausgelernt {
  background: var(--color-orange);
}
.karriere-kachel--ausgelernt .karriere-kachel__titel {
  color: var(--color-green);
}
.karriere-kachel--ausgelernt .karriere-kachel__zusatz,
.karriere-kachel--ausgelernt .karriere-kachel__text,
.karriere-kachel--ausgelernt .karriere-kachel__beschreibung {
  color: var(--color-white);
}
/* Button-Farbe wird bereits via .btn-secondary (grün) aus page.php gesetzt */
/* ── Für Auszubildende: grüne Kachel, oranger Titel, weißer Text, oranger Button ── */
.karriere-kachel--azubi {
  background: var(--color-green);
}
.karriere-kachel--azubi .karriere-kachel__titel {
  color: var(--color-orange);
}
.karriere-kachel--azubi .karriere-kachel__zusatz,
.karriere-kachel--azubi .karriere-kachel__text,
.karriere-kachel--azubi .karriere-kachel__beschreibung {
  color: var(--color-white);
}
/* Button-Farbe wird bereits via .btn-primary (orange) aus page.php gesetzt */
@media (max-width: 768px) {
  .karriere-kacheln {
    gap: 20px;
  }
  .karriere-kachel {
    padding: 24px 20px;
  }
  .karriere-kachel__titel {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }
}
/* ============================================================
   BUTTON HOVER FIX – .btn-secondary (max. Spezifität, wie WC-Fix)
   ============================================================ */
html body .btn.btn-secondary:hover,
html body a.btn-secondary:hover,
html body .karriere-kachel .btn-secondary:hover {
  background: var(--color-green-hover) !important;
  background-color: var(--color-green-hover) !important;
  color: var(--color-white) !important;
  border-color: transparent !important;
}
/* ============================================================
   BEWERBUNGSFORMULAR TOGGLE
   ============================================================ */
/* Padding gezielt NUR für diese Section reduziert (statt die
   allgemeine .mh-sektion-Basis zu ändern, die würde sonst alle
   Standard-Sections site-weit betreffen) */
.bewerbung-toggle-section {
  padding: 60px 20px 80px !important;
}
.bewerbung-toggle-section .sektion-content {
  max-width: 860px;
  margin: 0 auto;
}
.bewerbung-toggle-section.bg-weiss::after,
.bewerbung-toggle-section.bg-weiss::before {
  display: none !important;
}
.bewerbung-toggle-content {
  margin-top: 40px;
  text-align: left;
  background: var(--color-green);
  padding: 40px;
  animation: mh-bewerbung-fade-in 0.25s ease;
}
.bew-headline {
  font-family: var(--font-display);
  font-weight: 100;
  color: var(--color-orange);
  font-size: clamp(2rem, 4vw, 3rem);
  text-transform: uppercase;
  line-height: 0.95;
  word-spacing: -0.1em;
  margin: 0 0 24px;
}
@keyframes mh-bewerbung-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Titel der Stelle – weißer Balken oben im Formular (befüllt via
   [hidden stellentitel default:post_title], per JS ins .bew-stellentitel-anzeige) */
.bew-stellentitel-anzeige {
  background: var(--color-white);
  color: var(--color-green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}
/* Zweispaltige Feldpaare (Vorname/Nachname, E-Mail/Staatsangehörigkeit) */
.bew-row {
  margin-bottom: 16px;
}
/* CF7 packt beide Felder in ein gemeinsames <p> statt sie als direkte
   Kinder von .bew-row auszugeben – das Grid muss daher auf dieses
   <p> zielen, nicht auf .bew-row selbst */
.bew-row p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 !important;
}
/* wpautop() könnte je nach Formular-Whitespace zusätzlich ein <br>
   einfügen – vorsorglich neutralisieren */
.bew-row br {
  display: none;
}
@media (max-width: 600px) {
  .bew-row p {
    grid-template-columns: 1fr;
  }
}
.bewerbung-toggle-content .wpcf7-form p {
  margin: 0 0 16px;
}
.bewerbung-toggle-content .wpcf7-form label {
  display: none; /* Platzhalter im Feld übernimmt die Beschriftung, wie in der Vorlage */
}
/* Ausnahme: Einwilligungs-Checkbox UND Captcha-Icons nutzen <label>
   als Träger für ihren eigentlichen Inhalt – die dürfen nicht mit
   verschwinden */
.bewerbung-toggle-content .wpcf7-form .wpcf7-acceptance label,
.bewerbung-toggle-content .wpcf7-form .wpcf7-radio label {
  display: flex;
}
.bewerbung-toggle-content .wpcf7-form input[type="text"],
.bewerbung-toggle-content .wpcf7-form input[type="email"],
.bewerbung-toggle-content .wpcf7-form input[type="tel"],
.bewerbung-toggle-content .wpcf7-form input[type="date"],
.bewerbung-toggle-content .wpcf7-form input[type="number"],
.bewerbung-toggle-content .wpcf7-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 0;
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-orange);
  box-sizing: border-box;
}
.bewerbung-toggle-content .wpcf7-form input::placeholder,
.bewerbung-toggle-content .wpcf7-form textarea::placeholder {
  color: var(--color-text-muted);
}
.bewerbung-toggle-content .wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
  margin-bottom: 16px;
}
/* Datepicker: Label auf grünem Hintergrund, Feld exakt so breit wie
   die rechte Spalte der bew-row-Felder darüber (Nachname/Staatsang.).
   Wie bei .bew-row landen Label + Feld in einem gemeinsamen <p> von
   CF7 – das Grid muss daher auf dieses <p> zielen, nicht auf den div. */
.bew-date-wrap {
  margin-bottom: 16px;
}
.bew-date-wrap p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 !important;
  position: relative;
}
/* Grid-Elemente schrumpfen sonst nicht unter ihre natürliche
   Inhaltsbreite (min-width: auto) – native Datumsfelder haben eine
   große eingebaute Mindestbreite, die das Grid sonst aufbricht */
.bew-date-wrap p > * {
  min-width: 0;
}
.bew-date-wrap br {
  display: none;
}
.bew-date-wrap .bew-date-label {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.bew-date-wrap input[type="date"] {
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -webkit-min-logical-width: 0px !important;
  padding-right: 44px;
}
/* iOS Safari entfernt mit appearance:none auch das native Kalender-
   Icon – hier optisch nachgebaut. Positioniert relativ zum Grid-
   Container (nicht zur Input-Wrapper-Span), weil die tatsächliche
   Breite des <input> auf iOS unzuverlässig ist und die Wrapper-Span
   dem nicht immer 1:1 folgt. Liegt nur dekorativ oben drauf
   (pointer-events:none), Antippen des Feldes öffnet weiterhin ganz
   normal den nativen Datumspicker. */
.bew-date-wrap p::after {
  content: "";
  background-color: var(--color-white);
  background-image: url('assets/icon_cal.png');
  background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: center;
  width: 39px;
  height: 39px;
  position: absolute;
  right: 4px;
  /* Fester Pixel-Wert statt top:50% – bleibt stabil, auch wenn CF7
     darunter eine Fehlermeldung einblendet und die <p> dadurch
     höher wird (was die prozentuale Mitte verschieben würde) */
  top: 26px;
  transform: translateY(-50%);
  pointer-events: none;
}
/* Natives Kalender-Icon zusätzlich explizit ausblenden, falls es
   trotz appearance:none noch durchschimmert */
.bew-date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
}
@media (max-width: 600px) {
  .bew-date-wrap p {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bew-date-wrap input[type="date"] {
    text-align: left;
  }
  /* Label + Feld stapeln sich jetzt in der gleichen <p> (2 Zeilen
     statt 2 Spalten) – Icon war an der Mitte der GESAMTEN <p>
     ausgerichtet und landete dadurch zu hoch. Jetzt am unteren
     Rand verankert, wo das Feld (die untere Zeile) tatsächlich sitzt. */
  .bew-date-wrap p::after {
    top: auto;
    bottom: 6px;
    transform: none;
  }
}
/* Einwilligungs-Checkbox */
.bewerbung-toggle-content .wpcf7-form .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-white);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 20px;
}
.bewerbung-toggle-content .wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}
.bewerbung-toggle-content .wpcf7-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bewerbung-toggle-content .wpcf7-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-orange);
  margin-top: 2px;
}
/* Captcha-Box (weiß, mit Icon-Auswahl) */
.bew-captcha-box {
  background: var(--color-white);
  padding: 20px;
  margin-bottom: 24px;
}
.bew-captcha-box p {
  color: var(--color-text);
  font-size: 0.9rem;
  margin: 0 0 14px !important;
}
.bew-captcha-box .bew-captcha-icon {
  color: var(--color-green);
}
.bew-captcha-icons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
/* CF7 Radio-Ausgabe (use_label_element) zu klickbaren Bild-Kacheln umbauen */
.bew-captcha-box .wpcf7-form-control.wpcf7-radio {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.bew-captcha-box .wpcf7-list-item {
  margin: 0;
}
.bew-captcha-box .wpcf7-list-item label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px;
  border: 3px solid transparent;
  transition: border-color var(--transition);
}
.bew-captcha-box .wpcf7-list-item label:has(input:checked) {
  border-color: var(--color-orange);
}
.bew-captcha-box .wpcf7-list-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.bew-captcha-box .wpcf7-list-item-label {
  width: 100px;
  height: 100px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-size: 0; /* CF7-Textlabel ("Kuh"/"Wurst"/"Schwein") ausblenden, nur Bild zeigen */
}
/* Reihenfolge der Optionen im Shortcode: Kuh, Wurst, Schwein */
.bew-captcha-box .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label {
  background-image: url('assets/captcha_kuh.png');
}
.bew-captcha-box .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label {
  background-image: url('assets/captcha_wurst.png');
}
.bew-captcha-box .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label {
  background-image: url('assets/captcha_schwein.png');
}
@media (max-width: 500px) {
  .bew-captcha-box .wpcf7-form-control.wpcf7-radio {
    gap: 12px;
  }
  .bew-captcha-box .wpcf7-list-item label {
    padding: 4px;
    border-width: 2px;
  }
  .bew-captcha-box .wpcf7-list-item-label {
    width: 70px;
    height: 70px;
  }
}
/* iPhone 13 mini & Co. (schmalste gängige Breite) */
@media (max-width: 380px) {
  .bew-captcha-box .wpcf7-form-control.wpcf7-radio {
    gap: 8px;
  }
  .bew-captcha-box .wpcf7-list-item-label {
    width: 65px;
    height: 65px;
  }
}
/* Submit-Button */
.bewerbung-toggle-content .wpcf7-form input[type="submit"] {
  background: var(--color-orange);
  color: var(--color-white);
  border: none;
  padding: 16px 40px;
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition);
}
.bewerbung-toggle-content .wpcf7-form input[type="submit"]:hover {
  background: var(--color-orange-dark);
}
.bewerbung-toggle-content .wpcf7-response-output {
  border: none !important;
  background: transparent !important;
  margin-top: 24px !important;
  padding: 0 !important;
  font-family: var(--font-display);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-orange);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.3;
  word-spacing: -0.1em;
  white-space: pre-line;
}
.bewerbung-toggle-content .wpcf7-not-valid-tip {
  color: var(--color-orange);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 4px;
}
@media (max-width: 600px) {
  .bewerbung-toggle-content {
    padding: 24px 20px;
  }
  .bew-captcha-icons {
    gap: 16px;
  }
}
/* Globaler Footer-Container – Standard-Grün */
.site-footer,
.mh-footer {
  background: var(--color-green);
}
/* ── FOOTER TOP: Grüner Social-Bereich ───────────────────────── */
.mh-footer__top {
  background: var(--color-green);
  padding: 80px 20px 0;
  text-align: center;
}
.mh-footer__top-inner {
  max-width: 800px;
  margin: 0 auto;
}
.mh-footer__social-headline {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  font-weight: 100 !important;
  letter-spacing: normal !important;
  word-spacing: -0.1em !important;
  color: var(--color-orange) !important;
  line-height: 1 !important;
  margin: 0 0 32px 0 !important;
  text-align: center !important;
}
.mh-footer__social-text {
  color: var(--color-orange);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 40px;
}
.mh-footer__social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 60px;
}
.mh-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  transition: transform var(--transition), opacity var(--transition);
  text-decoration: none;
}
.mh-footer__social-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mh-footer__social-link:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}
/* ── WELLE ────────────────────────────────────────────────────── */
.mh-footer__wave {
  background: var(--color-green); /* ganzer Container grün */
  line-height: 0;
  overflow: hidden;
  position: relative;
  margin-bottom: -2px; /* schliesst den 1px Gap */
}
.mh-footer__wave-img {
  display: block;
  width: 100%;
  max-width: 3000px;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  vertical-align: bottom; /* verhindert Sub-Pixel-Gap unten */
}
/* ── FOOTER MIDDLE: Siegel + Logo überlappend ────────────────── */
.mh-footer__middle {
  background: var(--color-white);
  padding: 0 20px 40px;
  position: relative;
  /* PNG ist 270px hoch bei 1920px = 14.0625% Breite
     Untere weiße Hälfte = ~7vw → margin-top leicht weniger für sicheren Overlap */
  margin-top: calc(-6.5vw) !important;
}
@media (min-width: 1920px) {
  .mh-footer__middle {
    margin-top: -120px !important;
  }
}
.mh-footer__middle-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-top: 40px;
}
/* Siegel – ragt über Welle */
.mh-footer__siegel {
  position: relative;
  z-index: 2;
  margin-top: calc(-4vw + 25px);
}
@media (min-width: 1920px) {
  .mh-footer__siegel {
    margin-top: calc(-80px + 25px);
  }
}
.mh-footer__siegel-img {
  width: 180px;
  height: auto;
  display: block;
}
.mh-footer__siegel-placeholder {
  width: 180px;
  height: 180px;
  background: var(--color-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 0.8rem;
}
/* Logo – überlappend */
.mh-footer__logo {
  position: relative;
  z-index: 2;
  margin-top: calc(-4vw - 70px);
}
@media (min-width: 1920px) {
  .mh-footer__logo {
    margin-top: calc(-40px - 70px);
  }
}
.mh-footer__logo a img,
.mh-footer__logo img {
  width: 220px;
  height: auto;
  object-fit: contain;
  display: block;
}
/* ── FOOTER BOTTOM: Adresse + Legal ──────────────────────────── */
.mh-footer__bottom {
  background: var(--color-white);
  padding: 0 20px 32px;
}
.mh-footer__bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.mh-footer__adresse {
  font-size: 0.8rem;
  color: var(--color-text);
  text-align: right;
  margin: 0 0 20px 0;
  line-height: 1.8;
}
.mh-footer__adresse a {
  color: var(--color-text);
  text-decoration: none;
}
.mh-footer__adresse a:hover {
  color: var(--color-orange);
}
.mh-footer__hr {
  border: none;
  border-top: 2px solid var(--color-green);
  margin: 40px 0 28px 0;
}
.mh-footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mh-footer__copy {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-green);
}
.mh-footer__legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mh-footer__legal-nav a {
  font-size: 0.8rem;
  color: var(--color-green);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: color var(--transition);
}
.mh-footer__legal-nav a:hover {
  color: var(--color-orange);
}
/* ── MOBILE ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mh-footer__top {
    padding: 60px 20px 0;
  }
  .mh-footer__wave {
    display: none;
  }
  /* Ohne Welle: kein negatives margin */
  .mh-footer__middle {
    margin-top: 0;
    padding: 0px 20px 40px;
  }
  .mh-footer__siegel {
    margin-top: 0;
  }
  .mh-footer__logo {
    margin-top: 0;
  }
  .mh-footer__middle-inner {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .mh-footer__siegel-img {
    width: 110px;
  }
  .mh-footer__social-headline {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
  .mh-footer__adresse {
    text-align: center;
  }
  .mh-footer__legal {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .mh-footer__legal-nav {
    justify-content: center;
    gap: 12px;
    row-gap: 8px;
  }
  .mh-footer__legal-nav a {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }
}
/* ============================================================
   WOOCOMMERCE PRODUKTÜBERSICHT – Clearfix-Fix
   ============================================================
   Das eigentliche Grid-Layout (Spalten, Titel, Preis, Button etc.)
   wird komplett in /woocommerce/archive-product.php geregelt (siehe
   dortiges eingebettetes <style> – das ist die tatsächlich
   ausgeführte Datei für Kategorie-/Shopseiten, WICHTIGER als diese
   style.css hier). Nur dieser Clearfix-Fix bleibt hier, da er dort
   fehlt: WooCommerce/GeneratePress nutzen auf ul.products einen
   alten Float-Clearfix (::before/::after mit display:table). In
   einem Grid-Container wird das zu einem echten, unsichtbaren
   Grid-Item, das sich Slot 1 schnappt – dadurch landete das erste
   Produkt in Slot 2 statt 1. */
.mh-wc-produkte ul.products::before,
.mh-wc-produkte ul.products::after {
  display: none !important;
  content: none !important;
}
/* ============================================================
   WOOCOMMERCE BUTTON HOVER – kein Schwarz (GP/WC Override)
   ============================================================ */
body .woocommerce ul.products li.product .button:hover,
body .woocommerce ul.products li.product .button:focus,
body .woocommerce ul.products li.product .button:active,
body .woocommerce ul.products li.product a.button:hover,
body .woocommerce ul.products li.product a.button:focus,
body .woocommerce ul.products li.product a.button:active {
  color: #ffffff !important;
  background-color: var(--color-green-dark) !important;
  border-color: transparent !important;
  outline: none !important;
}
/* Fertiggerichte → dunkelorange beim Hover */
body.term-fertiggerichte .woocommerce ul.products li.product .button:hover,
body.term-fertiggerichte .woocommerce ul.products li.product .button:focus,
body.term-fertiggerichte .woocommerce ul.products li.product .button:active,
body.term-fertiggerichte .woocommerce ul.products li.product a.button:hover,
body.term-fertiggerichte .woocommerce ul.products li.product a.button:focus,
body.term-fertiggerichte .woocommerce ul.products li.product a.button:active {
  background-color: var(--color-orange-dark) !important;
  color: #ffffff !important;
}
/* ============================================================
   WOOCOMMERCE BUTTON HOVER – Maximale Spezifität
   ============================================================ */
html body.woocommerce-page .mh-wc-produkte ul.products li.product a.button:hover,
html body.woocommerce-page .mh-wc-produkte ul.products li.product a.button:focus,
html body.woocommerce-page .mh-wc-produkte ul.products li.product a.button:active,
html body .mh-wc-produkte ul.products li.product a.button:hover,
html body .mh-wc-produkte ul.products li.product a.button:focus,
html body .mh-wc-produkte ul.products li.product a.button:active {
  background: var(--color-green-dark) !important;
  background-color: var(--color-green-dark) !important;
  color: #ffffff !important;
  border-color: var(--color-green-dark) !important;
  text-decoration: none !important;
}
html body.term-fertiggerichte .mh-wc-produkte ul.products li.product a.button:hover,
html body.term-fertiggerichte .mh-wc-produkte ul.products li.product a.button:focus,
html body.term-fertiggerichte .mh-wc-produkte ul.products li.product a.button:active {
  background: var(--color-orange-dark) !important;
  background-color: var(--color-orange-dark) !important;
  border-color: var(--color-orange-dark) !important;
}
/* Mobile: kein negativer Margin (Welle ausgeblendet) */
@media (max-width: 768px) {
  .mh-footer__middle {
    margin-top: 0 !important;
  }
  .mh-footer__siegel {
    margin-top: -45px !important;
  }
  .mh-footer__logo {
    margin-top: 0 !important;
  }
  .mh-footer__bottom {
    margin-top: 0 !important;
  }
}
/* ── FOOTER LOGO: 70px nach oben ─────────────────────────────── */
.mh-footer__logo,
.mh-footer__logo a.custom-logo-link {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  margin-top: -50px !important;
}
@media (max-width: 768px) {
  .mh-footer__logo,
  .mh-footer__logo a.custom-logo-link {
    margin-top: 0 !important;
  }
}
/* ── FOOTER BOTTOM: 60px nach oben ───────────────────────────── */
.mh-footer__bottom {
  margin-top: -60px !important;
  position: relative !important;
  z-index: 3 !important;
}
@media (max-width: 768px) {
  .mh-footer__bottom {
    margin-top: 0 !important;
  }
}
/* ── SIEGEL über Footer-Bottom ───────────────────────────────── */
.mh-footer__siegel {
  z-index: 4 !important;
}
/* ============================================================
   STANDORTE SLIDER
   ============================================================ */
.standorte-section {
  padding: 130px 20px 100px;
}
.standorte-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.standorte-h1 {
  margin-bottom: 68px;
}
/* Slider: overflow hidden damit Karten außerhalb unsichtbar */
.standorte-slider {
  overflow: hidden;
  width: 100%;
}
.standorte-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}
/* Karte: 1/3 Breite Desktop, 1/2 Tablet, 100% Mobile */
/* Konturlinie der Karte entfernen */
.standort-card {
  flex: 0 0 calc(100% / 3);
  width: calc(100% / 3);
  padding: 0 15px;
  box-sizing: border-box;
  text-align: center;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
/* Foto */
.standort-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-light);
}
.standort-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.standort-card:hover .standort-card__img img {
  transform: scale(1.04);
}
.standort-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-light);
}
/* Body */
.standort-card__body {
  padding: 24px 10px 10px;
}
.standort-card__name {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-green) !important;
  margin: 0 0 8px 0 !important;
}
.standort-card__adresse {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 20px 0;
  line-height: 1.5;
}
/* Button */
.standort-card__btn {
  display: inline-block;
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 14px 24px !important;
  border-radius: var(--radius) !important;
  text-decoration: none !important;
  transition: background var(--transition) !important;
}
.standort-card__btn:hover {
  background: var(--color-orange-dark) !important;
  color: var(--color-white) !important;
}
/* Pfeil-Navigation */
.standorte-nav {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.standorte-nav__btn {
  width: 48px;
  height: 48px;
  background: var(--color-green);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}
.standorte-nav__btn:hover {
  background: var(--color-orange);
}
.standorte-nav__btn:disabled {
  background: #ccc;
  cursor: default;
}
/* Tablet */
@media (min-width: 640px) and (max-width: 1023px) {
  .standort-card {
    flex: 0 0 50%;
    width: 50%;
  }
}
/* Mobile */
@media (max-width: 639px) {
  .standort-card {
    flex: 0 0 100%;
    width: 100%;
  }
}
/* Standorte-Section: weißer Gradient-Fade deaktivieren */
.standorte-section.bg-weiss::after,
.standorte-section.bg-weiss::before {
  display: none !important;
}
/* ============================================================
   STANDORT EINZELSEITE – Info + Karte
   ============================================================ */
.standort-info-section {
  padding: 60px 20px !important;
}
.standort-info-section.bg-weiss::after {
  display: none !important;
}
.standort-info-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  text-align: center;
}
.standort-info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.standort-info-label {
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--color-orange) !important;
  margin: 0 !important;
}
.standort-info-text {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}
.standort-info-text a {
  color: var(--color-green);
  text-decoration: none;
}
.standort-info-text a:hover {
  color: var(--color-orange);
}
/* Karte */
.standort-karte-section {
  width: 100%;
}
.standort-map {
  width: 100%;
  height: 400px;
}
/* Custom Leaflet Marker */
.standort-marker__pin {
  width: 30px;
  height: 30px;
  background: var(--color-orange);
  border: 3px solid var(--color-white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
  .standort-info-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .standort-map {
    height: 300px;
  }
}
/* ============================================================
   AKTUELLES – Blog Übersicht
   ============================================================ */
/* Hero */
.aktuelles-hero {
  padding: 60px 20px 80px !important;
  text-align: center;
}
/* Liste */
.aktuelles-liste {
  background: var(--color-white);
  padding: 100px 20px 100px;
}
.aktuelles-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
/* Kachel */
.aktuelles-card {
  background: var(--color-green);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 340px;
  overflow: hidden;
}
/* Bild rechts bei reverse */
.aktuelles-card--reverse {
  direction: rtl;
}
.aktuelles-card--reverse .aktuelles-card__img,
.aktuelles-card--reverse .aktuelles-card__body {
  direction: ltr;
}
/* Bild */
.aktuelles-card__img {
  overflow: hidden;
  position: relative;
}
.aktuelles-card__img-el {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.aktuelles-card:hover .aktuelles-card__img-el {
  transform: scale(1.04) !important;
}
.aktuelles-card__img a {
  display: block;
  height: 100%;
}
.aktuelles-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-green-dark);
  min-height: 340px;
}
/* Body */
.aktuelles-card__body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
/* Datum */
.aktuelles-card__datum {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  display: block;
}
/* Titel */
.aktuelles-card__titel {
  font-family: var(--font-display) !important;
  font-size: clamp(4rem, 3vw, 2.8rem) !important;
  font-weight: 100 !important;
  line-height: 0.95 !important;
  margin: 0 !important;
}
.aktuelles-card__titel a {
  color: var(--color-orange) !important;
  text-decoration: none !important;
  transition: color var(--transition) !important;
}
.aktuelles-card__titel a:hover {
  color: var(--color-orange-dark) !important;
}
/* Subline */
.aktuelles-card__subline {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white);
  margin: 0;
  line-height: 1.4;
}
/* Teaser */
.aktuelles-card__teaser {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
/* Button */
.aktuelles-card__btn {
  display: inline-block !important;
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  border-radius: var(--radius) !important;
  transition: color var(--transition) !important;
  align-self: flex-start;
  margin-top: 4px;
}
.aktuelles-card__btn:hover {
  background: var(--color-orange) !important;
  color: var(--color-green) !important;
}
/* Pagination */
.aktuelles-pagination {
  text-align: center;
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.aktuelles-pagination a,
.aktuelles-pagination span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-green);
  text-decoration: none;
  padding: 8px 16px;
  border: 2px solid var(--color-green);
  transition: all var(--transition);
}
.aktuelles-pagination a:hover,
.aktuelles-pagination span.current {
  background: var(--color-green);
  color: var(--color-white);
}
.aktuelles-leer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1rem;
}
/* Mobile */
@media (max-width: 768px) {
  .aktuelles-card,
  .aktuelles-card--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .aktuelles-card__img {
    min-height: 240px;
  }
  .aktuelles-card__body {
    padding: 24px 20px;
  }
  .aktuelles-card__titel {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
  }
}
/* Umschalten auf immer-links: .aktuelles-card--reverse { direction: ltr; } */
/* ============================================================
   SINGLE POST – Beitrags-Header
   ============================================================ */
.beitrag-header,
body.no-hero-page .mh-sektion.beitrag-header {
  padding: 300px 20px 20px !important;
  text-align: center;
}
.admin-bar .beitrag-header,
body.admin-bar.no-hero-page .mh-sektion.beitrag-header {
  padding-top: 332px !important;
}
.beitrag-header.bg-weiss::after {
  display: none !important;
}
.beitrag-header__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* Titel – auf breiten Screens etwas kleiner damit Zeilenumbruch besser fällt */
.beitrag-header__titel {
  font-family: var(--font-display) !important;
  font-size: clamp(4rem, 7vw, 7rem) !important;
  font-weight: 100 !important;
  color: var(--color-orange) !important;
  line-height: 0.85 !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
}
@media (min-width: 1415px) {
  .beitrag-header__titel {
    font-size: 6rem !important;
  }
}
/* Datum */
.beitrag-header__datum {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-green);
}
/* Titel – identisch zu globalem h1 */
.beitrag-header__titel {
  font-family: var(--font-display) !important;
  font-size: clamp(4rem, 9vw, 8rem) !important;
  font-weight: 100 !important;
  color: var(--color-orange) !important;
  line-height: 0.85 !important;
  margin: 0 !important;
  text-align: center !important;
  width: 100% !important;
}
/* Subline – identisch zu .eyebrow/.subline */
.beitrag-header__subline {
  font-size: 1.5rem !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--color-green) !important;
  margin: 0 !important;
}
/* Zurück-Link */
.beitrag-zurueck {
  background: var(--color-orange);
  padding: 20px;
}
.beitrag-zurueck__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.beitrag-zurueck__link {
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color var(--transition);
}
.beitrag-zurueck__link:hover {
  color: var(--color-green);
}
/* Erste Section direkt nach Beitrags-Header: weniger Abstand oben */
.beitrag-header + .mh-sektion {
  padding-top: 20px !important;
}
/* ============================================================
   KEIN HERO – Automatischer Abstand unter Header
   ============================================================ */
body.no-hero-page .mh-sektion:first-of-type,
body.no-hero-page .mh-sektion.first-section,
body.no-hero-page .standorte-section:first-of-type,
body.no-hero-page .aktuelles-liste:first-of-type,
body.no-hero-page .standort-karte-section:first-of-type {
  padding-top: 300px !important;
}
body.admin-bar.no-hero-page .mh-sektion:first-of-type,
body.admin-bar.no-hero-page .mh-sektion.first-section,
body.admin-bar.no-hero-page .standorte-section:first-of-type {
  padding-top: 332px !important;
}
/* Fehlt die Headline (H1), fällt die visuelle "Reserve" weg, die die
   große H1 sonst eingenommen hätte → Abstand entsprechend reduzieren.
   .first-section wird zuverlässig in PHP gesetzt (page.php), unabhängig
   von der tatsächlichen DOM-Geschwister-Reihenfolge. */
body.no-hero-page .mh-sektion.no-h1:first-of-type,
body.no-hero-page .mh-sektion.no-h1.first-section {
  padding-top: 210px !important;
}
body.admin-bar.no-hero-page .mh-sektion.no-h1:first-of-type,
body.admin-bar.no-hero-page .mh-sektion.no-h1.first-section {
  padding-top: 242px !important;
}
/* Mobile: Logo sitzt in der Navi-Zeile → kleiner Abstand reicht */
@media (max-width: 768px) {
  body.no-hero-page .mh-sektion:first-of-type,
  body.no-hero-page .mh-sektion.first-section,
  body.no-hero-page .standorte-section:first-of-type,
  body.admin-bar.no-hero-page .mh-sektion:first-of-type,
  body.admin-bar.no-hero-page .mh-sektion.first-section,
  body.admin-bar.no-hero-page .standorte-section:first-of-type {
    padding-top: 140px !important;
  }
  body.no-hero-page .mh-sektion.no-h1:first-of-type,
  body.no-hero-page .mh-sektion.no-h1.first-section,
  body.admin-bar.no-hero-page .mh-sektion.no-h1:first-of-type,
  body.admin-bar.no-hero-page .mh-sektion.no-h1.first-section {
    padding-top: 100px !important;
  }
  .beitrag-header {
    padding: 100px 20px 20px !important;
  }
  body.admin-bar .beitrag-header {
    padding-top: 132px !important;
  }
}
/* Abstand vor Footer auf Beitragsseiten */
.single-post .beitrag-zurueck {
  margin-top: 15vh;
}
/* ============================================================
   WOCHENANGEBOTE-TABELLE
   ============================================================ */
.wochenangebote-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.wochenangebote-liste {
  max-width: 900px;
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.wochenangebote-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  border-bottom: 2px solid var(--color-green);
  padding-bottom: 20px;
}
.wochenangebote-item__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wochenangebote-item__produkt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-green);
  line-height: 1.3;
}
.wochenangebote-item__beschreibung {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-green);
  line-height: 1.3;
}
.wochenangebote-item__preis {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-shrink: 0;
  white-space: nowrap;
}
.wochenangebote-item__einheit {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.wochenangebote-item__wert {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-green);
}
@media (max-width: 600px) {
  .wochenangebote-item {
    flex-wrap: wrap;
  }
  .wochenangebote-item__preis {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ============================================================
   404-SEITE – Suchfeld
   ============================================================ */
.mh-404-search .search-form {
  display: flex;
  gap: 8px;
}
.mh-404-search .search-field {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--color-green);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
}
.mh-404-search .search-submit {
  padding: 12px 24px;
  background: var(--color-green);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color var(--transition);
}
.mh-404-search .search-submit:hover {
  background: var(--color-green);
  color: var(--color-orange);
}
/* ============================================================
   SUCHERGEBNISSE – Vorschaubild
   ============================================================ */
.mh-suche-thumb {
  flex: 0 0 auto;
  width: 300px;
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
}
@media (max-width: 600px) {
  .mh-suche-thumb {
    width: 90px;
    height: 90px;
  }
}
/* ============================================================
   MINI-CART (WooCommerce Mini-Cart Block)
   ============================================================ */
.mh-mini-cart {
  display: flex;
  align-items: center;
}
/* Hover wie die restlichen Nav-Punkte: keine Hintergrundfarbe,
   stattdessen dieselbe 3px-Unterstreichung (gleiche Technik wie
   .nav-right .nav-right-menu li a:hover::after) */
.wc-block-mini-cart__button {
  position: relative;
}
.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus {
  background: transparent !important;
  color: inherit !important;
}
.wc-block-mini-cart__button:hover::after,
.wc-block-mini-cart__button:focus::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  background: var(--color-green);
}
/* ── MINI-CART DRAWER (aufklappendes Panel) ──────────────────── */
.wc-block-components-drawer__content,
.wp-block-woocommerce-mini-cart-contents {
  background-color: var(--color-orange) !important;
}
/* Pauschale Absicherung gegen Standard-Rahmen/Schatten am Drawer
   selbst - Quelle der weißen Haarlinie links war im Inspector nicht
   auffindbar, daher hier vorsorglich an allen Wrapper-Elementen
   entfernt statt weiter zu suchen */
.wc-block-components-drawer,
.wc-block-components-drawer__content,
.wc-block-components-drawer__screen-overlay,
.wp-block-woocommerce-mini-cart-contents {
  border: none !important;
  box-shadow: none !important;
}
/* Close-Button: blauer Fokus-Rahmen weg, Icon weiß */
.wc-block-components-drawer__close {
  outline: none !important;
  box-shadow: none !important;
}
.wc-block-components-drawer__close svg path {
  fill: var(--color-white);
}
/* Titel "Dein Warenkorb (Artikel: X)" – Zeilenumbruch verhindern
   statt den Text selbst zu ändern (Artikelzahl wird per JS/
   Interactivity-API nachgeladen, daher Layout-Fix statt Text-Fix).
   Kleiner + eigenes Padding, damit nichts rechts abgeschnitten wird
   und die Zeile bündig mit dem restlichen Content (Buttons etc.,
   ~16px) sitzt. */
.wc-block-mini-cart__title {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  color: var(--color-white) !important;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0 32px;
  box-sizing: border-box;
  width: 100%;
}
/* Artikelzahl-Zusatz "(Artikel: X)" ausblenden - lief trotz kleinerer
   Schrift/Umbruch-Fix immer noch ins Off. "Dein Warenkorb" allein
   reicht als Titel. */
.wp-block-woocommerce-mini-cart-title-items-counter-block {
  display: none !important;
}
/* Kein font-weight:100 im gesamten Mini-Cart (WooCommerce-Default an
   manchen Textelementen wirkte zu dünn/hell auf Orange) */
.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer * {
  font-weight: 500 !important;
}
/* Tabellen-Kopf + allgemeiner Text auf Orange: weiß.
   WICHTIG: Alle folgenden Selektoren mit generischen Klassennamen
   (ohne "mini-cart" im Namen) werden ab hier mit
   .wc-block-mini-cart__drawer als Vorfahre gescoped – diese Klassen
   teilt sich der Mini-Cart-Block nämlich mit dem normalen
   Warenkorb-/Kasse-Seiten-Block (beide nutzen dieselben WooCommerce-
   Blocks-Komponenten). Ohne dieses Scoping haben unsere Regeln auch
   auf der echten Warenkorb-Seite gegriffen (weißer Text auf weißem
   Hintergrund dort). */
.wc-block-mini-cart__products-table thead span,
.wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-components-totals-item__label,
.wc-block-mini-cart__drawer .wc-block-components-totals-item__description,
.wc-gzd-block-mini-cart-notices__notice {
  color: var(--color-white) !important;
}
/* Versandkosten-Link im Mini-Cart: Grün statt Standard-Orange, da
   oranger Link auf dem orangenen Mini-Cart-Hintergrund kaum lesbar
   wäre. Nur dieser Sonderfall, sonst bleibt Orange die Standard-
   Link-Farbe im ganzen Theme. */
.wc-gzd-block-mini-cart-notices__shipping-notice a {
  color: var(--color-green) !important;
}
/* Kurzbeschreibung im Mini-Cart ausblenden - reicht mit Bild, Name,
   Preis und Mengen-Auswahl */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
  display: none !important;
}
/* Produktname + Preise: grün, größer, gut lesbar auf Orange */
.wc-block-mini-cart__drawer .wc-block-components-product-name,
.wc-block-mini-cart__drawer .wc-block-components-product-price,
.wc-block-mini-cart__drawer .wc-block-formatted-money-amount,
.wc-block-mini-cart__drawer .wc-block-components-totals-item__value {
  color: var(--color-green) !important;
  font-weight: 700 !important;
}
.wc-block-mini-cart__drawer .wc-block-components-product-name {
  font-size: 1.05rem !important;
}
.wc-block-mini-cart__drawer .wc-block-components-product-price,
.wc-block-mini-cart__drawer .wc-block-formatted-money-amount {
  font-size: 1rem !important;
}
/* Produktbild: 64px -> 150px. Zeile selbst auf Flex umgestellt statt
   sich auf die fragile Tabellen-Zellen-Breitenberechnung zu
   verlassen (bei der schmalen Drawer-Breite drückte das sonst den
   Textblock über statt neben das Bild). */
.wc-block-mini-cart__drawer .wc-block-cart-items__row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 20px;
  border-bottom: none !important;
  box-shadow: none !important;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .wc-block-cart-item__product,
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
  border-bottom: none !important;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__image {
  flex: 0 0 100px !important;
  width: 100px !important;
}
/* 100x100 Rahmen, aber object-position:bottom zoomt/croppt den
   oberen Leerraum weg, den die Produktfotos mitbringen - gleiche
   Technik wie bei den "Verwandten Produkten" auf der Produktseite.
   Robuster als transform:scale (kein Unschärfe-Risiko). */
.wc-block-mini-cart__drawer .wc-block-cart-item__image img {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
  object-position: center bottom;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__product {
  flex: 1 1 auto !important;
  min-width: 0;
}
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
  flex: 0 0 auto !important;
}
/* Haarlinie vor unserer eigenen Zwischensumme-Trennlinie entfernen
   (saß am Tabellen-Element selbst, nicht nur am Container) */
.wc-block-mini-cart__items,
.wc-block-mini-cart__products-table,
.wc-block-mini-cart__drawer .wc-block-cart-items,
.wc-block-mini-cart-items {
  border: none !important;
  box-shadow: none !important;
}
/* Padding vereinheitlicht (war 16px, jetzt 32px wie Headline und
   Zwischensumme-Bereich) */
.wc-block-mini-cart__items {
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}
/* Mengen-Auswahl (+/-) */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
  border-color: var(--color-green) !important;
  background: var(--color-white);
}
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button {
  color: var(--color-green) !important;
}
/* Produkt entfernen (Mülleimer-Icon) */
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg path {
  fill: var(--color-green);
}
/* "Warenkorb anzeigen" – wie unser btn-secondary (Outline-Variante) */
.wc-block-mini-cart__footer-cart {
  background: transparent !important;
  border: 2px solid var(--color-white) !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--color-white) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
}
.wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__footer-cart:focus {
  color: var(--color-green) !important;
  border-color: var(--color-white) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Ursprüngliche Standard-Haarlinie am Footer selbst - gefunden per
   Inspector, war die eigentliche verbleibende Quelle */
.wc-block-mini-cart__footer {
  border-top: none !important;
}
/* Zwischensumme: eigene Trennlinie (2px, wie überall sonst im
   Theme) statt der Standard-Haarlinie, Padding damit Text/Buttons
   links und rechts bündig zum restlichen Content sitzen */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal {
  border-top: 2px solid var(--color-white) !important;
  margin: 0 32px !important;
  padding: 16px 0 !important;
  width: calc(100% - 64px) !important;
  box-sizing: border-box !important;
}
.wc-block-mini-cart__footer-actions {
  padding: 0 32px 16px !important;
}
/* "Zur Kasse gehen" – wie unser btn-secondary (grün gefüllt) */
.wc-block-mini-cart__footer-checkout {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
}
.wc-block-mini-cart__footer-checkout:hover {
  color: var(--color-orange) !important;
}
/* Leerer Warenkorb: Text + "Einkaufen beginnen"-Button */
.wc-block-mini-cart__empty-cart-wrapper {
  color: var(--color-white);
}
.wc-block-mini-cart__shopping-button {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
}
.wc-block-mini-cart__shopping-button:hover {
  color: var(--color-orange) !important;
}
/* ============================================================
   WARENKORB + KASSE (normale Seiten, nicht Mini-Cart)
   ============================================================ */
/* Trennlinien auf einheitliche 2px-Stärke bringen (Standard-
   Haarlinien von WooCommerce Blocks) */
.wc-block-cart-items__header,
.wc-block-components-totals-item,
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-components-order-summary-item,
.wc-block-checkout__main .wc-block-components-panel,
.wc-block-components-address-card {
  border-width: 2px !important;
  border-color: var(--color-green) !important;
}
/* Inaktive Optionen (z.B. nicht gewählte Abholorte): nur die
   Rahmenstärke ändern, die vorhandene (hellere) Farbe bleibt
   erhalten - kein border-color hier, sonst geht das gewünschte
   "Aufgehellte" verloren */
.wc-block-components-radio-control__option {
  border-width: 2px !important;
}
/* Ausgewählter/aktiver Zustand (z.B. Abholort) - bestätigt: die
   Kontur läuft über box-shadow, nicht border (border zusätzlich zu
   setzen führte zu einer doppelt dicken Linie, daher jetzt nur noch
   box-shadow). */
.wc-block-checkout__form .wc-block-components-radio-control__option-checked,
.wc-block-checkout__form .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout__form .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  box-shadow: 0 0 0 2px var(--color-green) inset !important;
  border-radius: var(--radius) !important;
}
/* Tatsächliche Quelle der Haarlinie gefunden: border-top mit
   transparenter color-mix()-Farbe auf jeder Tabellenzelle. Gezielt
   auf 2px + volle Deckkraft (keine Transparenz) umgestellt.
   border-bottom zusätzlich neutralisiert - die letzte Zeile hatte
   vermutlich einen separaten, dünneren Abschluss-Rand nach unten,
   der bisher nicht überschrieben war. */
.wc-block-cart__main .wc-block-cart-items td {
  border-top: 2px solid var(--color-green) !important;
  border-bottom: none !important;
}
/* Kurzbeschreibung in der Produktauflistung ausblenden */
.wc-block-cart__main .wc-block-components-product-metadata__description {
  display: none !important;
}
/* Produktname + Preis größer/fett, wie auf der Produktübersicht
   (dort ist der Titel bewusst flach grün, nicht kategorieabhängig -
   macht im Warenkorb mit gemischten Kategorien ohnehin am meisten
   Sinn, hier genauso zu bleiben) */
.wc-block-cart__main .wc-block-components-product-name {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--color-green) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}
.wc-block-cart__main .wc-block-cart-item__prices .wc-block-formatted-money-amount,
.wc-block-cart__main .wc-block-cart-item__total .wc-block-formatted-money-amount {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--color-orange) !important;
}
/* Kein font-weight:100 im Warenkorb-Produktbereich - Montserrat
   wird dabei viel zu dünn/schwer lesbar (analog zum Fix auf der
   Kasse-Seite) */
.wc-block-cart__main,
.wc-block-cart__main * {
  font-weight: 500 !important;
}
.wc-block-cart__main .wc-block-components-product-name,
.wc-block-cart__main .wc-block-cart-item__prices .wc-block-formatted-money-amount,
.wc-block-cart__main .wc-block-cart-item__total .wc-block-formatted-money-amount {
  font-weight: 700 !important;
}
/* Die Tabelle selbst hatte vermutlich noch einen eigenen Rand (nur
   für den Mini-Cart hatten wir das schon entfernt, nicht für die
   echte Warenkorb-Seite) - das sah aus wie eine Extra-Linie hinter
   dem letzten Produkt. */
.wc-block-cart__main .wc-block-cart-items {
  border: none !important;
  border-bottom: 2px solid var(--color-green) !important;
}
/* Buttons "Weiter zur Kasse" (Warenkorb) und "Jetzt kaufen"
   (Kasse) – auf Brand-Styling statt WooCommerce-/GP-Standard-Grau */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
  height: 50px !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
  background: var(--color-orange) !important;
  color: var(--color-green) !important;
}
/* ============================================================
   KASSE: BESTELLÜBERSICHT (Sidebar) auf Brand-Grün
   ============================================================
   Nur die Kasse-Seite, nicht der Warenkorb - daher mit
   .wc-block-checkout__sidebar gescoped (die Cart-Seite nutzt die
   eigene Klasse .wc-block-cart__sidebar dafür).
   Nur .wp-block-woocommerce-checkout-order-summary-block bekommt
   den vollen grünen Hintergrund + abgerundete Kontur (erscheint 2x:
   Desktop-Sidebar + Duplikat direkt vor dem "Jetzt kaufen"-Button,
   beide sollen gleich aussehen). Der Button selbst (in
   .wc-gzd-checkout-submit, aber außerhalb dieses Blocks) bleibt
   bewusst unangetastet (weißer Hintergrund, wie gehabt).
   ============================================================ */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--color-green) !important;
  border: 2px solid var(--color-green) !important;
  border-radius: var(--radius) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}
/* Haarlinien (Standard 1px) auf unsere 2px-Stärke, in Weiß (nicht
   Grün wie sonst im Theme üblich - auf grünem Hintergrund selbst
   braucht's Weiß für Sichtbarkeit) */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item,
.wc-block-checkout__sidebar .wc-block-components-totals-item,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon {
  border-color: var(--color-white) !important;
  border-width: 2px !important;
}
/* Titelzeile "Bestellübersicht" + Gesamtpreis daneben */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price,
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon svg {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}
/* Titelzeile "Bestellübersicht" fett + orange statt weiß */
.wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
}
/* Kurzbeschreibung in der Bestellübersicht ausblenden */
.wc-block-checkout__sidebar .wc-block-components-product-metadata__description {
  display: none !important;
}
/* Produktname, Gutschein-Text, Zwischensumme-Label: weiß */
.wc-block-checkout__sidebar .wc-block-components-product-name,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon,
.wc-block-checkout__sidebar .wc-block-components-totals-item__label,
.wc-block-checkout__sidebar .wc-block-components-totals-item__description,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item-tax {
  color: var(--color-white) !important;
}
/* Preise/Beträge: weiß + fett (Orange bleibt exklusiv dem Kaufen-
   Button vorbehalten, damit der als CTA nicht verwässert wird) */
.wc-block-checkout__sidebar .wc-block-formatted-money-amount,
.wc-block-checkout__sidebar .wc-block-components-totals-item__value {
  color: var(--color-white) !important;
  font-weight: 700 !important;
}
/* Ausnahme: "Gesamtsumme"-Zeile (Label + Preis) explizit orange +
   fett - hier gewünschter Akzent auf den finalen Gesamtbetrag */
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-checkout__sidebar .wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
  color: var(--color-orange) !important;
  font-weight: 700 !important;
}
/* Mengen-Kreis auf dem Produktbild: weißer Rahmen statt Standard,
   damit er sich vom grünen Hintergrund abhebt */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__quantity {
  background-color: var(--color-orange) !important;
  border: 2px solid var(--color-white) !important;
}
/* Hellgrauer Standard-Hintergrund dieser inneren Box weg -
   transparent, damit das Grün der Elternbox durchscheint */
.wc-gzd-checkout .wc-block-components-order-summary,
.wc-gzd-checkout .wc-block-components-order-summary.is-large {
  background-color: transparent !important;
}
/* Sidebar auf Höhe des ersten Formularfelds ("E-Mail-Adresse" unter
   Kontaktinformationen) ziehen - war 45px zu weit unten. Nur ab
   769px (Desktop/Tablet), auf Mobile stapelt sich die Sidebar
   ohnehin anders. */
@media (min-width: 769px) {
  .wc-block-checkout__sidebar {
    margin-top: 45px;
  }
}
/* Titelzeile "Bestellübersicht" saß zu weit vom oberen Rand der Box
   ab (16px Standard-Margin) */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
  margin-top: 0 !important;
}
/* Gutschein-"Anwenden"-Button: Standard-Grau raus, Brand-Styling
   rein (orange auf dem grünen Sidebar-Hintergrund) */
.wc-block-checkout__sidebar .wc-block-components-totals-coupon__button {
  background: var(--color-orange) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
}
.wc-block-checkout__sidebar .wc-block-components-totals-coupon__button:hover,
.wc-block-checkout__sidebar .wc-block-components-totals-coupon__button:focus {
  background: var(--color-orange) !important;
  color: var(--color-green) !important;
}
/* Gutschein-"Anwenden"-Button auf der Warenkorbseite (weißer
   Hintergrund dort, daher grüner Button statt orange wie bei der
   Kasse - gleiches Prinzip wie unsere übrigen Standard-Buttons) */
.wc-block-cart__sidebar .wc-block-components-totals-coupon__button {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
}
.wc-block-cart__sidebar .wc-block-components-totals-coupon__button:hover,
.wc-block-cart__sidebar .wc-block-components-totals-coupon__button:focus {
  background: var(--color-green) !important;
  color: var(--color-orange) !important;
}
/* "Veranschlagte Gesamtsumme" + Preis fett und in Orange (wie fast
   überall sonst im Theme). Die MwSt.-Beschreibung darunter ist ein
   Geschwisterelement in derselben Flex-Box und konkurriert um
   Platz mit Label/Preis - per flex-basis:100% zwingen wir sie
   zuverlässig auf eine eigene Zeile, unabhängig davon ob Label+
   Preis "reinpassen" würden. Dadurch haben Label+Preis die ganze
   Zeile für sich und brauchen kein zusätzliches nowrap mehr. */
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
  flex-basis: 100%;
}
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 700 !important;
  font-size: 0.9rem;
  flex-shrink: 1;
}
.wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 700 !important;
  color: var(--color-orange) !important;
  flex-shrink: 0;
  white-space: nowrap;
}
/* ============================================================
   KASSE: FEHLER-/HINWEISFARBE ROT -> ORANGE
   ============================================================
   WooCommerce nutzt standardmäßig Rot für Validierungsfehler -
   beißt sich mit unserem Orange. Global auf Orange umgestellt:
   Eingabefelder mit Fehler, Checkbox mit Fehler, Fehlertext samt
   Icon, und die große "keine Zahlungsart"-Hinweisbox.
   ============================================================ */
/* Eingabefeld-Rahmen bei Fehler */
.wc-block-components-text-input.has-error input,
.wc-blocks-components-select.has-error .wc-blocks-components-select__select {
  border-color: var(--color-orange) !important;
}
.wc-block-components-text-input.has-error input:focus,
.wc-blocks-components-select.has-error .wc-blocks-components-select__select:focus {
  box-shadow: 0 0 0 1px var(--color-orange) !important;
}
/* Label wird bei Fehler ebenfalls rot eingefärbt - auf Orange */
.wc-block-components-text-input.has-error label,
.wc-blocks-components-select.has-error label {
  color: var(--color-orange) !important;
}
/* Checkbox-Rahmen bei Fehler (z.B. AGB-Zustimmung) */
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__mark {
  border-color: var(--color-orange) !important;
}
.wc-block-components-checkbox.has-error input[aria-invalid="true"] + .wc-block-components-checkbox__mark {
  outline-color: var(--color-orange) !important;
}
/* Links in der Checkbox-Beschriftung (AGB/Widerruf) werden bei
   Fehler ebenfalls rot - auf unser normales Orange zurückstellen */
.wc-block-components-checkbox.has-error span a {
  color: var(--color-orange) !important;
}
/* Fehlertext + Warn-Icon unter jedem Feld */
.wc-block-components-validation-error {
  color: var(--color-orange) !important;
}
.wc-block-components-validation-error svg path {
  fill: var(--color-orange) !important;
}
/* Große Hinweisbox (z.B. "keine Zahlungsart verfügbar") */
.wc-block-components-notice-banner.is-error {
  background-color: rgba(236, 103, 7, 0.08) !important;
  border-color: var(--color-orange) !important;
  color: var(--color-orange) !important;
}
/* Exakt gefundene Regel: rotes Kreis-Icon hinter dem Ausrufezeichen -
   Hintergrund auf Orange, das Ausrufezeichen selbst (Pfad) auf Weiß */
.wc-block-components-notice-banner.is-error > svg {
  background-color: var(--color-orange) !important;
}
.wc-block-components-notice-banner.is-error > svg path {
  fill: var(--color-white) !important;
}
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content {
  color: var(--color-orange) !important;
}
/* Formular-Außenkonturen auf einheitliche 2px-Stärke (statt der
   dünnen Standard-Haarlinie) */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-checkbox__mark,
.wc-block-components-address-card {
  border-width: 2px !important;
}
/* Land/Region-Auswahl: Text in Orange, wie unsere ausgefüllten
   Textfelder. Rahmenfarbe explizit separat auf Grün gesetzt - der
   Rahmen nutzt sonst currentColor und würde automatisch die neue
   Textfarbe übernehmen (gleiches Prinzip wie bei den Textfeldern) */
.wc-blocks-components-select .wc-blocks-components-select__select {
  color: var(--color-orange) !important;
  border-color: var(--color-green) !important;
}
/* Kein font-weight:100 im Checkout-Formular - das ist nur für
   Stones Crush korrekt, hier läuft aber Montserrat (Body-Font),
   die bei 100 viel zu dünn/schwer lesbar wird. Mindestens 500,
   passend zur globalen Body-Konvention. */
.wc-block-checkout__form,
.wc-block-checkout__form * {
  font-weight: 500 !important;
}
.wc-block-checkout__form label,
.wc-block-checkout__form .wc-block-components-checkout-step__title {
  font-weight: 700 !important;
}
/* Button-Text bleibt fett - ist auch ein Nachfahre des Formulars,
   würde sonst von der breiten Reset-Regel oben mit erfasst */
.wc-block-checkout__form .wc-block-components-checkout-place-order-button,
.wc-block-checkout__form .wc-block-components-checkout-place-order-button * {
  font-weight: 700 !important;
}
/* Hinweisbox hatte noch eine dünne Standard-Outline zusätzlich zum
   border-color - Breite/Stil dazu explizit setzen */
.wc-block-components-notice-banner.is-error {
  border-width: 2px !important;
  border-style: solid !important;
}
/* Checkbox bei Fehler: rote Kontur (exakt gefundene Regel) auf Orange */
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input,
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:active,
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:focus,
.wc-block-components-checkbox.has-error .wc-block-components-checkbox__input:hover {
  border-color: var(--color-orange) !important;
}
/* Checkboxen generell auf unsere Brand-Linienstärke (statt 1px mit
   currentColor-Transparenz) */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border: 2px solid var(--color-green) !important;
}
/* Ausgefüllter Text in den Feldern: Orange. Rahmenfarbe hier bewusst
   erneut explizit gesetzt (nicht nur Breite) - WooCommerce nutzt für
   den Rahmen teils currentColor, der sonst automatisch die neue
   Textfarbe mit übernehmen würde. So bleiben Text und Rahmen sauber
   getrennt. */
.wc-block-components-text-input.is-active input[type="email"],
.wc-block-components-text-input.is-active input[type="number"],
.wc-block-components-text-input.is-active input[type="password"],
.wc-block-components-text-input.is-active input[type="tel"],
.wc-block-components-text-input.is-active input[type="text"],
.wc-block-components-text-input.is-active input[type="url"],
.wc-block-components-text-input input:autofill {
  color: var(--color-orange) !important;
  border-color: var(--color-green) !important;
}
.wc-block-components-text-input.has-error input[type="email"],
.wc-block-components-text-input.has-error input[type="number"],
.wc-block-components-text-input.has-error input[type="password"],
.wc-block-components-text-input.has-error input[type="tel"],
.wc-block-components-text-input.has-error input[type="text"],
.wc-block-components-text-input.has-error input[type="url"],
.wc-block-components-text-input.has-error input {
  border-color: var(--color-orange) !important;
}
/* ============================================================
   LEERER WARENKORB (wp-block-woocommerce-empty-cart-block)
   ============================================================ */
/* "Dein Warenkorb ist gerade leer!" - Stones Crush wie unsere
   übrigen Section-Überschriften, Icon bleibt wie es ist */
.wc-block-cart__empty-cart__title {
  font-family: var(--font-display) !important;
  font-weight: 100 !important;
  font-size: clamp(2.5rem, 6vw, 5rem) !important;
  line-height: 1 !important;
  word-spacing: -0.1em;
  color: var(--color-green) !important;
  text-transform: uppercase;
}
/* Icon (Träne) wurde durch die neue Schriftgröße riesig - komplett
   ausblenden statt eigene Größe zu jonglieren */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  display: none !important;
}
/* "Style Dots"-Trennlinie weg */
.wp-block-woocommerce-empty-cart-block hr.is-style-dots {
  display: none !important;
}
/* "Neu im Shop"-Grid: Buttons grün, Titel größer, Preis größer +
   orange - vorerst nur diese drei Punkte, volle Angleichung an die
   Produktübersicht folgt später als größere eigene Aufgabe.
   Zusätzlich: Karte als Flex-Spalte + fixe Titel-Höhe (min-height,
   2-zeilig geclampt) + Button per margin-top:auto ans untere Ende -
   gleiche Technik wie auf der Produktübersicht, verhindert das
   Springen des Buttons bei 1- vs. 2-zeiligen Produktnamen. */
.wp-block-woocommerce-empty-cart-block li.wc-block-grid__product {
  display: flex;
  flex-direction: column;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.3;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-orange);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  margin-top: auto;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link.add_to_cart_button {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  transition: color var(--transition) !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link.add_to_cart_button:hover {
  color: var(--color-orange) !important;
}
/* ============================================================
   KASSE: ABHOLORTE + ZAHLUNGSOPTIONEN + BESTELLNOTIZ
   ============================================================ */
/* Radio-Buttons (Abholorte, Zahlungsoptionen): Auswahl-Punkt in
   Orange statt Standard-Schwarz - accent-color ist die moderne,
   browserseitige Art, native Radio-/Checkbox-Steuerelemente
   umzufärben, inkl. des inneren Punkts. Zusätzlich ein breiterer,
   generischerer Selektor als Absicherung. */
.wc-block-checkout__form input[type="radio"].wc-block-components-radio-control__input,
.wc-block-checkout__form input[type="radio"] {
  accent-color: var(--color-orange) !important;
}
/* Rahmenstärke der einzelnen Optionen (Abholorte + Versandart-Kacheln)
   auf unsere einheitliche 2px-Stärke */
.wc-block-checkout__form .wc-block-components-radio-control__option,
.wc-block-checkout__form .wc-block-checkout__shipping-method-option {
  border-width: 2px !important;
}
/* Zahlungsoptionen: Rahmen war dünner als der Rest - beide möglichen
   Wrapper-Klassen abgedeckt (Accordion-Wrapper + Options-Container) */
.wc-block-checkout__payment-method .wc-block-components-radio-control,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
  border-width: 2px !important;
}
/* Bestellnotiz-Textarea: Rahmen 2px, eingetragener Text in Orange
   wie bei allen anderen ausgefüllten Feldern */
.wc-block-checkout__form .wc-block-components-textarea {
  border-width: 2px !important;
  color: var(--color-orange) !important;
}