/* ==========================================================================
   Holzröder — Design-System
   Farben, Typografie und Maße 1:1 aus dem Prototyp Holzroeder.dc.html
   ========================================================================== */

:root {
  --rot:          #B4381A;   /* Aktionsfarbe: Ziegelrot */
  --rot-dunkel:   #93290F;
  --gruen:        #33513F;   /* Zweitfarbe: Waldgrün, für Symbole */
  --braun:        #2B211B;   /* Text und dunkle Flächen */
  --braun-tief:   #231A15;
  --braun-mittel: #4A3E36;   /* Fließtext auf hellem Grund */
  --braun-hell:   #7A6A5E;   /* Nebentext */
  --braun-grau:   #6B5C50;
  --sand:         #EFE7D8;   /* Flächenfarbe */
  --sand-dunkel:  #E2D5BE;
  --rand:         #D6CCBC;   /* Linien */
  --weiss:        #FFFFFF;
  --fehler:       #93290F;

  --radius:       4px;
  --bahn:         1280px;
  --gutter:       20px;
  --kopfhoehe:    72px;
}

*, *::before, *::after { box-sizing: border-box; }

/* clip statt hidden: hidden erzeugt einen Scroll-Container und setzt
   position: sticky des Kopfbereichs außer Kraft. */
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; }

body {
  background: var(--weiss);
  color: var(--braun);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Archivo, system-ui, sans-serif;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--rot); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--braun); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
table { border-collapse: collapse; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rot); color: #fff; padding: 12px 20px; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.bahn { max-width: var(--bahn); margin: 0 auto; padding: 0 var(--gutter); }
.bahn--schmal { max-width: 860px; }
.bahn > *, .raster > *, .split > * { min-width: 0; }

.abschnitt        { padding: 64px 0; }
.abschnitt--sand  { background: var(--sand); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.abschnitt--dunkel{ background: var(--braun); color: var(--sand); }
.abschnitt--eng   { padding: 44px 0; }

.h-gross { font-size: clamp(28px, 4vw, 36px); font-weight: 800; }
.h-mittel { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; }
.lead { color: var(--braun-mittel); margin-top: 10px; max-width: 68ch; }
.abschnitt--dunkel .lead { color: var(--sand); }
.klein { font-size: 15px; color: var(--braun-mittel); }
.nebentext { font-size: 13px; color: var(--braun-hell); }
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--braun-grau);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 24px; border: 0; border-radius: var(--radius);
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; cursor: pointer;
  text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--rot { background: var(--rot); color: #fff; }
.btn--rot:hover { background: var(--rot-dunkel); color: #fff; }
.btn--dunkel { background: var(--braun); color: #fff; }
.btn--dunkel:hover { background: var(--braun-tief); color: #fff; }
.btn--rand { background: transparent; color: var(--braun); border: 1px solid var(--rand); }
.btn--rand:hover { border-color: var(--braun); color: var(--braun); }
.btn--rand-hell { background: transparent; color: #fff; border: 1px solid var(--rand); }
.btn--rand-hell:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--voll { width: 100%; }
.btn[disabled], .btn.laedt { opacity: .55; pointer-events: none; }

/* ==========================================================================
   Kopfbereich
   ========================================================================== */
.topbar { background: var(--braun); color: var(--sand); font-size: 13px; }
.topbar__inner {
  max-width: var(--bahn); margin: 0 auto; padding: 8px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: center;
}
.topbar span, .topbar a { display: flex; align-items: center; gap: 8px; }
.topbar a { color: var(--sand); text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar i { color: var(--rand); }

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--weiss); border-bottom: 1px solid var(--rand);
}
.kopf__inner {
  max-width: var(--bahn); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 16px; min-height: var(--kopfhoehe);
}

.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--braun); flex-shrink: 0;
}
.logo:hover { color: var(--braun); }
.logo i { color: var(--gruen); font-size: 24px; }
.logo__wort {
  font-family: Archivo, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(17px, 4vw, 21px); letter-spacing: 0.02em; white-space: nowrap;
}

.hauptnav { display: flex; align-items: center; gap: 2px; margin-left: 8px; list-style: none; padding: 0; }
.hauptnav a, .hauptnav .mega-schalter {
  padding: 10px 12px; font-weight: 600; text-decoration: none; color: var(--braun);
  min-height: 44px; display: flex; align-items: center; gap: 7px;
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: inherit;
}
.hauptnav a:hover, .hauptnav .mega-schalter:hover,
.hauptnav .current-menu-item > a, .hauptnav .current_page_item > a { color: var(--rot); }
.hauptnav .menu-item-has-children > a::after {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
}

.suche {
  margin-left: auto; display: flex; align-items: center;
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 0 10px; height: 44px; width: 230px; max-width: 100%;
}
.suche i { color: var(--braun-hell); font-size: 14px; }
.suche input {
  border: 0; outline: 0; background: none; padding: 0 8px; width: 100%; font-size: 15px; min-width: 0;
}
.suche button { border: 0; background: none; cursor: pointer; color: var(--braun-hell); padding: 0 2px; }
.suche button:hover { color: var(--rot); }

.kopf__aktionen { display: flex; align-items: center; gap: 4px; }
.kopf-aktion {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; color: var(--braun); text-decoration: none;
  font-weight: 600; font-size: 15px;
}
.kopf-aktion:hover { color: var(--rot); }
.zaehler {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--rot); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.burger { display: none; }

/* --- Mega-Menü ----------------------------------------------------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--weiss); border-bottom: 1px solid var(--rand);
  box-shadow: 0 12px 24px rgba(43,33,27,.10); z-index: 45;
}
.mega[hidden] { display: none; }
.mega__inner {
  max-width: var(--bahn); margin: 0 auto; padding: 28px var(--gutter);
  display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.mega__titel {
  font-family: Archivo, system-ui, sans-serif; font-weight: 700; font-size: 15px;
  margin-bottom: 12px;
}
.mega__liste { list-style: none; padding: 0; display: grid; gap: 8px; }
.mega__liste a { color: var(--braun); text-decoration: none; font-size: 16px; }
.mega__liste a:hover { color: var(--rot); text-decoration: underline; }
.mega__aktion {
  border: 1px solid var(--rand); padding: 18px; display: block;
  text-decoration: none; color: var(--braun); background: var(--sand);
}
.mega__aktion:hover { border-color: var(--braun); color: var(--braun); }
.mega__aktion strong { display: block; font-family: Archivo, sans-serif; font-size: 17px; }
.mega__aktion span { display: block; font-size: 15px; color: var(--braun-mittel); margin-top: 4px; }
.mega__aktion b { display: block; color: var(--rot); font-weight: 700; margin-top: 10px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--braun); }
.hero__bild {
  width: 100%; height: 60vh; min-height: 420px; max-height: 620px;
  object-fit: cover; display: block; opacity: .85;
}
.hero__inhalt {
  position: absolute; inset: 0; display: flex; align-items: center;
}
.hero__kasten {
  max-width: 660px; background: rgba(43, 33, 27, 0.74);
  padding: 32px; border-left: 4px solid var(--rot);
}
.hero__kasten h1 {
  color: #fff; font-size: clamp(28px, 5vw, 44px); font-weight: 800; line-height: 1.08;
}
.hero__text { color: var(--sand); font-size: clamp(16px, 2vw, 19px); margin-top: 16px; max-width: 52ch; }
.hero__preis {
  color: #fff; font-family: Archivo, sans-serif; font-weight: 700;
  font-size: clamp(21px, 3vw, 27px); margin-top: 20px;
}
.hero__preis small {
  font-family: "Source Sans 3", sans-serif; font-weight: 400; font-size: 15px; color: var(--rand);
}
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* --- Vertrauensleiste ---------------------------------------------------- */
.trust { border-bottom: 1px solid var(--rand); }
.trust__inner {
  max-width: var(--bahn); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 28px;
}
.trust__punkt { display: flex; gap: 14px; align-items: flex-start; padding: 22px 0; }
.trust__punkt i { color: var(--gruen); font-size: 22px; margin-top: 3px; }
.trust__punkt p:first-child { font-weight: 600; }

/* ==========================================================================
   Karten und Raster
   ========================================================================== */
.raster {
  display: grid; gap: 24px; margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.raster--produkte { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; }

.kachel {
  text-decoration: none; color: var(--braun);
  border: 1px solid var(--rand); display: block; background: var(--weiss);
}
.kachel:hover { border-color: var(--braun); color: var(--braun); }
.kachel img { width: 100%; height: 200px; object-fit: cover; }
.kachel__body { padding: 18px; }
.kachel__body h3 { font-size: 21px; font-weight: 700; }
.kachel__body p { font-size: 15px; color: var(--braun-mittel); margin-top: 6px; }
.kachel__ab { font-weight: 700; color: var(--rot); margin-top: 12px; }

.produkt {
  background: var(--weiss); border: 1px solid var(--rand);
  display: flex; flex-direction: column; min-width: 0;
}
.produkt__bild { display: block; position: relative; }
.produkt__bild img { width: 100%; height: 170px; object-fit: cover; }
.produkt__badge {
  position: absolute; top: 0; left: 0; background: var(--braun); color: #fff;
  font-size: 13px; font-weight: 600; padding: 5px 10px;
}
.produkt__merken {
  position: absolute; top: 6px; right: 6px; width: 36px; height: 36px;
  border: 1px solid var(--rand); background: rgba(255,255,255,.92);
  color: var(--braun-hell); cursor: pointer; border-radius: var(--radius);
}
.produkt__merken.aktiv, .produkt__merken:hover { color: var(--rot); border-color: var(--rot); }
.produkt__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.produkt__meta { font-size: 13px; color: var(--braun-hell); }
.produkt__name {
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 17px;
  color: var(--braun); text-decoration: none; line-height: 1.3; overflow-wrap: break-word;
}
.produkt__name:hover { color: var(--rot); }
.produkt__preis {
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 21px; margin-top: 4px;
}
.produkt__preis del { color: var(--braun-hell); font-weight: 400; font-size: 16px; margin-right: 8px; }
.produkt__preis ins { text-decoration: none; }
.produkt__grund { font-size: 13px; color: var(--braun-mittel); }
.produkt__lager { font-size: 13px; color: var(--gruen); font-weight: 600; }
.produkt__lager--leer { color: var(--braun-hell); }
.produkt .btn { margin-top: auto; }

.mengen {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden;
}
.mengen button { width: 38px; border: 0; background: var(--sand); cursor: pointer; color: var(--braun); }
.mengen button:hover { background: var(--sand-dunkel); }
.mengen input {
  width: 46px; text-align: center; border: 0; background: var(--weiss);
  font-weight: 700; -moz-appearance: textfield; min-height: 44px;
}
.mengen input::-webkit-outer-spin-button,
.mengen input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
   Inhaltsblöcke
   ========================================================================== */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px; align-items: center; }
.split img { width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; }

.zahlen { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.zahlen__wert { font-family: Archivo, sans-serif; font-weight: 800; font-size: 30px; color: var(--rot); }
.zahlen__label { font-size: 15px; color: var(--braun-mittel); }

.schritte { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 32px; }
.schritt__n {
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 15px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--rot); color: #fff; border-radius: var(--radius);
}
.schritt h3 { font-size: 19px; font-weight: 700; margin-top: 12px; }
.schritt p { font-size: 15px; color: var(--braun-mittel); margin-top: 6px; }

.stimme { border: 1px solid var(--rand); background: var(--weiss); padding: 22px; }
.stimme__sterne { color: var(--rot); letter-spacing: 2px; font-size: 14px; }
.stimme p { margin-top: 12px; }
.stimme footer { margin-top: 14px; font-size: 15px; color: var(--braun-hell); }

.artikel-karte { border: 1px solid var(--rand); background: var(--weiss); display: flex; flex-direction: column; text-decoration: none; color: var(--braun); }
.artikel-karte:hover { border-color: var(--braun); color: var(--braun); }
.artikel-karte img { width: 100%; height: 180px; object-fit: cover; }
.artikel-karte__body { padding: 18px; }
.artikel-karte__meta { font-size: 13px; color: var(--braun-hell); }
.artikel-karte h3 { font-size: 19px; font-weight: 700; margin-top: 8px; }
.artikel-karte p { font-size: 15px; color: var(--braun-mittel); margin-top: 8px; }

/* --- Rechner und PLZ-Prüfung -------------------------------------------- */
.werkzeug {
  border: 1px solid var(--rand); background: var(--weiss); padding: 26px;
}
.werkzeug h2 { font-size: 27px; font-weight: 800; }
.werkzeug__feld { display: grid; gap: 6px; margin-top: 18px; }
.werkzeug label { font-weight: 600; font-size: 15px; }
.werkzeug input[type="range"] { width: 100%; accent-color: var(--rot); }
.werkzeug select, .werkzeug input[type="text"], .werkzeug input[type="email"], .werkzeug input[type="number"] {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 12px;
  background: var(--weiss); width: 100%; min-height: 44px;
}
.werkzeug__ergebnis {
  margin-top: 20px; padding: 16px; background: var(--sand);
  border-left: 4px solid var(--rot); font-family: Archivo, sans-serif;
  font-weight: 700; font-size: 19px;
}
.werkzeug__ergebnis[hidden] { display: none; }
.plz-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.plz-form input { flex: 1 1 160px; }
.meldung--ok { color: var(--gruen); font-weight: 600; margin-top: 10px; }
.meldung--fehler { color: var(--fehler); font-weight: 600; margin-top: 10px; }

/* ==========================================================================
   Shop
   ========================================================================== */
.brotkrumen {
  max-width: var(--bahn); margin: 0 auto; padding: 12px var(--gutter);
  font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--braun-hell);
}
.brotkrumen a { color: var(--braun-hell); }
.brotkrumen a:hover { color: var(--rot); }

.shop-kopf { border-bottom: 1px solid var(--rand); padding: 8px 0 32px; }
.shop-layout {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; padding: 32px 0 72px;
}
.filter { align-content: start; display: grid; gap: 26px; }
.filter__block { border: 1px solid var(--rand); padding: 18px; }
.filter__titel { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 12px; }
.filter ul { list-style: none; padding: 0; display: grid; gap: 9px; font-size: 16px; }
.filter a { color: var(--braun); text-decoration: none; display: flex; justify-content: space-between; gap: 10px; }
.filter a:hover, .filter .aktiv > a { color: var(--rot); }
.filter .anzahl { color: var(--braun-hell); font-size: 14px; }

.shop-werkzeuge {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid var(--rand);
}
.woocommerce-result-count { margin: 0; color: var(--braun-hell); font-size: 15px; }
.woocommerce-ordering select {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 9px 12px;
  background: var(--weiss); min-height: 44px;
}

.woocommerce-pagination { margin-top: 32px; }
.woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--rand); color: var(--braun); text-decoration: none; font-weight: 600;
}
.woocommerce-pagination .current { background: var(--braun); border-color: var(--braun); color: #fff; }

/* --- Produktseite -------------------------------------------------------- */
.produktseite { padding: 24px 0 72px; }
.produktseite__raster {
  display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: start;
}
.galerie__haupt img { width: 100%; height: clamp(260px, 40vw, 480px); object-fit: cover; border: 1px solid var(--rand); }
.galerie__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.galerie__thumb { width: 78px; height: 78px; border: 1px solid var(--rand); padding: 0; background: none; cursor: pointer; }
.galerie__thumb.aktiv { border-color: var(--rot); }
.galerie__thumb img { width: 100%; height: 100%; object-fit: cover; }

.produktseite h1 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; margin-top: 6px; }
.produktseite__preis { font-family: Archivo, sans-serif; font-weight: 800; font-size: 32px; margin-top: 16px; }
.produktseite__preis del { font-size: 20px; font-weight: 400; color: var(--braun-hell); margin-right: 10px; }
.produktseite__preis ins { text-decoration: none; }
.produktseite__hinweis { font-size: 14px; color: var(--braun-mittel); margin-top: 4px; }
.produktseite__kurz { margin-top: 18px; color: var(--braun-mittel); }
.produktseite__kurz p { margin-bottom: 10px; }

.vorteile { display: grid; gap: 10px; margin-top: 22px; }
.vorteile div { display: flex; gap: 10px; font-size: 15px; }
.vorteile i { color: var(--gruen); margin-top: 4px; }

.datenblatt { margin-top: 26px; border: 1px solid var(--rand); }
.datenblatt__titel {
  background: var(--sand); border-bottom: 1px solid var(--rand); padding: 12px 16px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px;
}
.datenblatt table { width: 100%; font-size: 15px; }
.datenblatt th, .datenblatt td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--rand); }
.datenblatt th { color: var(--braun-hell); font-weight: 400; width: 45%; }
.datenblatt td { font-weight: 600; }
.datenblatt tr:last-child th, .datenblatt tr:last-child td { border-bottom: 0; }

.akkordeon { margin-top: 40px; border-top: 1px solid var(--rand); }
.akkordeon__kopf {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rand);
  padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 17px; cursor: pointer; text-align: left;
}
.akkordeon__kopf i { color: var(--rot); }
.akkordeon__inhalt { padding: 16px 0 24px; border-bottom: 1px solid var(--rand); }
.akkordeon__inhalt[hidden] { display: none; }
.akkordeon__inhalt p { margin-bottom: 12px; }
.akkordeon__inhalt ul { padding-left: 22px; margin-bottom: 12px; }

.cart-form { margin-top: 24px; }
.cart-form .variations { width: 100%; margin-bottom: 16px; }
.cart-form .variations th {
  text-align: left; padding: 6px 0; font-weight: 600; font-size: 15px;
}
.cart-form .variations td { padding: 0 0 12px; }
.cart-form select {
  width: 100%; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 11px 12px; background: var(--weiss); min-height: 44px;
}
.cart-form__zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cart-form .quantity input[type="number"] {
  width: 78px; min-height: 48px; text-align: center; border: 1px solid var(--rand);
  border-radius: var(--radius); font-weight: 700;
}
.single_add_to_cart_button {
  flex: 1 1 220px; background: var(--rot); color: #fff; border: 0; border-radius: var(--radius);
  min-height: 48px; font-family: Archivo, sans-serif; font-weight: 700; cursor: pointer; padding: 12px 24px;
}
.single_add_to_cart_button:hover { background: var(--rot-dunkel); }

.verwandte { border-top: 1px solid var(--rand); padding: 56px 0; background: var(--sand); }

/* ==========================================================================
   Inhalts- und Formularseiten
   ========================================================================== */
.seiten-kopf { border-bottom: 1px solid var(--rand); padding: 8px 0 32px; }
.seiten-kopf h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.seiten-inhalt {
  padding: 40px 0 72px; overflow-wrap: break-word; hyphens: auto;
}
/* Lesebreite: 860–900 px ergaben 94–109 Zeichen je Zeile, rund ein Drittel
   über dem, was sich flüssig liest. 68 Zeichen sind die übliche Grenze. */
.seiten-inhalt .bahn { max-width: min(900px, 68ch); }
.seiten-inhalt h2 { font-size: 27px; margin: 36px 0 12px; }
.seiten-inhalt h3 { font-size: 21px; margin: 26px 0 10px; }
.seiten-inhalt p { margin-bottom: 16px; }
.seiten-inhalt ul, .seiten-inhalt ol { margin: 0 0 18px; padding-left: 24px; }
.seiten-inhalt li { margin-bottom: 8px; }
.seiten-inhalt table { width: 100%; font-size: 16px; margin-bottom: 22px; }
.seiten-inhalt th, .seiten-inhalt td { border: 1px solid var(--rand); padding: 10px 12px; text-align: left; }
.seiten-inhalt th { background: var(--sand); font-family: Archivo, sans-serif; }

.formular { display: grid; gap: 16px; }
.formular__zeile { display: grid; gap: 6px; }
.formular__zeile--zwei { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.formular label { font-weight: 600; font-size: 15px; }
.formular input, .formular select, .formular textarea {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 12px;
  background: var(--weiss); width: 100%; min-height: 44px;
}
.formular textarea { min-height: 150px; resize: vertical; }
.formular__hinweis { font-size: 14px; color: var(--braun-hell); }
.meldung {
  border-left: 4px solid var(--gruen); background: var(--sand);
  padding: 14px 18px; margin-bottom: 20px;
}
.meldung--warn { border-left-color: var(--fehler); }

.kontakt-raster { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: start; }
.kontakt-karte { border: 1px solid var(--rand); padding: 24px; background: var(--sand); }
.kontakt-karte__zeile { display: flex; gap: 12px; margin-bottom: 16px; }
.kontakt-karte i { color: var(--gruen); margin-top: 4px; width: 18px; text-align: center; }
.kontakt-karte strong { display: block; }
/* Ein Flex-Kind schrumpft ohne min-width:0 nicht unter seine Inhaltsbreite.
   Die E-Mail-Adresse ist ein einziges Wort ohne Trennstelle und schob die
   Karte auf 320 px um 14 px über den Rand hinaus. */
.kontakt-karte span {
  color: var(--braun-mittel); min-width: 0; overflow-wrap: anywhere;
}
.kontakt-karte__zeile a { overflow-wrap: anywhere; }

.faq-gruppe { margin-top: 32px; }
.faq-gruppe > h2 { font-size: 21px; font-weight: 700; margin-bottom: 8px; }

/* ==========================================================================
   Warenkorb-Schublade, Cookie-Banner, Fußbereich
   ========================================================================== */
.drawer-schleier {
  position: fixed; inset: 0; background: rgba(43,33,27,.5); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.drawer-schleier.offen { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--weiss); z-index: 95; transform: translateX(100%);
  transition: transform .25s ease; display: flex; flex-direction: column;
}
.drawer.offen { transform: none; }
.drawer__kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--rand);
}
.drawer__kopf h2 { font-size: 19px; font-weight: 700; }
.drawer__zu { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--braun); min-height: 44px; min-width: 44px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px; }
.drawer-zeile { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rand); }
.drawer-zeile img { width: 68px; height: 68px; object-fit: cover; border: 1px solid var(--rand); }
.drawer-zeile__name { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; color: var(--braun); text-decoration: none; }
.drawer-zeile__meta { font-size: 14px; color: var(--braun-hell); margin-top: 2px; }
.drawer-zeile__preis { font-weight: 700; margin-top: 4px; }
.drawer-zeile__weg { background: none; border: 0; color: var(--braun-hell); cursor: pointer; min-width: 44px; }
.drawer-zeile__weg:hover { color: var(--rot); }
.drawer__fuss { border-top: 1px solid var(--rand); padding: 18px 20px; display: grid; gap: 10px; }
.drawer__summe { display: flex; justify-content: space-between; font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; }

.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--weiss); border-top: 1px solid var(--rand);
  box-shadow: 0 -6px 20px rgba(43,33,27,.12);
}
.cookie[hidden] { display: none; }
.cookie__inner { max-width: var(--bahn); margin: 0 auto; padding: 20px var(--gutter); }
.cookie h2 { font-size: 19px; font-weight: 700; }
.cookie p { color: var(--braun-mittel); margin-top: 8px; font-size: 16px; }
.cookie__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cookie__optionen { display: grid; gap: 12px; margin-top: 16px; }
.cookie__optionen[hidden] { display: none; }
.cookie-option { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.schalter {
  width: 46px; height: 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--rand); display: flex; align-items: center; padding: 3px; flex: 0 0 auto;
  justify-content: flex-start;
}
.schalter[aria-pressed="true"], .schalter[disabled] { background: var(--gruen); justify-content: flex-end; }
.schalter[disabled] { opacity: .7; cursor: default; }
.schalter span { width: 20px; height: 20px; border-radius: 999px; background: #fff; display: block; }

.footer { background: var(--braun); color: var(--sand); margin-top: auto; }
.footer a { color: var(--sand); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__inner {
  max-width: var(--bahn); margin: 0 auto; padding: 56px var(--gutter);
  display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.footer__marke { font-family: Archivo, sans-serif; font-weight: 800; font-size: 21px; letter-spacing: .02em; color: #fff; }
.footer__claim { color: var(--rand); margin-top: 6px; }
.footer__adresse { margin-top: 18px; font-size: 16px; line-height: 1.7; }
.footer__titel { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; color: #fff; }
.footer__liste { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 9px; font-size: 16px; }
.footer__unten {
  border-top: 1px solid rgba(214,204,188,.25);
}
.footer__unten-inner {
  max-width: var(--bahn); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 15px; color: var(--rand);
}

.nach-oben {
  position: fixed; right: 16px; bottom: 16px; z-index: 80;
  width: 46px; height: 46px; border: 1px solid var(--rand); background: var(--weiss);
  color: var(--braun); cursor: pointer; display: none; place-items: center; border-radius: var(--radius);
}
.nach-oben.sichtbar { display: grid; }
.nach-oben:hover { background: var(--sand); }


/* ==========================================================================
   WooCommerce-Anpassungen
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  list-style: none; border-left: 4px solid var(--gruen); background: var(--sand);
  padding: 14px 18px; margin: 0 0 22px;
}
.woocommerce-error { border-left-color: var(--fehler); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none !important; }

.wc-seite, .wc-inhalt { padding: 32px 0 72px; }
.wc-inhalt .bahn { max-width: var(--bahn); }

.woocommerce table.shop_table {
  width: 100%; border: 1px solid var(--rand); font-size: 16px;
}
.woocommerce table.shop_table th {
  background: var(--sand); text-align: left; padding: 12px 14px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px;
}
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--rand); vertical-align: middle; }
.woocommerce table.shop_table img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--rand); }
.woocommerce .cart_item .product-name a { color: var(--braun); font-weight: 700; text-decoration: none; }
.woocommerce .cart_item .product-name a:hover { color: var(--rot); }

.woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button,
.woocommerce #place_order, .woocommerce .button.alt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rot); color: #fff; border: 0; border-radius: var(--radius);
  font-family: Archivo, sans-serif; font-weight: 700; padding: 12px 24px;
  min-height: 44px; cursor: pointer; text-decoration: none;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button:hover, .woocommerce #place_order:hover, .woocommerce .button.alt:hover {
  background: var(--rot-dunkel); color: #fff;
}
.woocommerce .button:disabled, .woocommerce .button.disabled { background: var(--rand); color: var(--braun-hell); }

.woocommerce .coupon { display: flex; gap: 10px; flex-wrap: wrap; }
.woocommerce .coupon input[type="text"] {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 12px; min-height: 44px;
}
.cart_totals, .woocommerce-checkout-review-order {
  border: 1px solid var(--rand); background: var(--sand); padding: 24px;
}
.cart_totals h2, #order_review_heading {
  font-family: Archivo, sans-serif; font-size: 19px; font-weight: 700; margin-bottom: 14px;
}
.cart_totals table, .woocommerce-checkout-review-order table { border: 0; }
.cart_totals table th, .cart_totals table td { background: transparent; border-top: 1px solid var(--rand); }
.order-total .amount { color: var(--rot); font-weight: 800; }

.woocommerce-cart .cart-collaterals { margin-top: 32px; max-width: min(460px, 100%); margin-left: auto; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells { float: none; width: 100%; min-width: 0; }
.woocommerce-cart .cart-collaterals .cross-sells { display: none; }
.woocommerce-cart table.cart td.actions { text-align: right; }
.woocommerce-cart table.cart td.actions .coupon { float: left; }
.woocommerce-cart .quantity input[type="number"] {
  width: 76px; min-height: 44px; text-align: center; border: 1px solid var(--rand);
  border-radius: var(--radius); font-weight: 700;
}

.woocommerce-checkout form.checkout {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 24px 40px; align-items: start;
}
.woocommerce-checkout form.checkout > * { min-width: 0; }
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 3; }
.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 90px; }
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-checkout form.login, .woocommerce-checkout form.checkout_coupon { grid-column: 1 / -1; }

/* Fehlermeldungen der Kasse setzt WooCommerce als erstes Kind in das
   Formular. Ohne eigene Rasterzeile landete der Kasten rechts unter der
   klebenden Bestellübersicht und war von ihr verdeckt — nach dem Klick auf
   „Zahlungspflichtig bestellen" sah der Kunde keine Meldung, und die Seite
   sprang zu dieser verdeckten Stelle statt zu den Feldern. Der Kasten steht
   deshalb über beiden Spalten; die Spalten rücken nur dann eine Zeile tiefer. */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup .woocommerce-error { margin: 0; }
@media (min-width: 981px) {
  .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #customer_details { grid-row: 2 / span 3; }
  .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #order_review_heading { grid-row: 2; }
  .woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #order_review { grid-row: 3; }
}

.woocommerce .col2-set { display: block; }
.woocommerce .col2-set > *, .woocommerce-billing-fields, .woocommerce-shipping-fields { min-width: 0; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; margin: 0 0 28px; }

.woocommerce form .woocommerce-billing-fields__field-wrapper,
.woocommerce form .woocommerce-shipping-fields__field-wrapper,
.woocommerce form .woocommerce-additional-fields__field-wrapper {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px;
}
@media (min-width: 560px) {
  .woocommerce form .woocommerce-billing-fields__field-wrapper,
  .woocommerce form .woocommerce-shipping-fields__field-wrapper,
  .woocommerce form .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce form .form-row-wide {
  float: none; width: auto; margin-right: 0;
}
.woocommerce form .form-row-wide, .woocommerce form .notes,
.woocommerce form .form-row.create-account, .woocommerce form .woocommerce-account-fields { grid-column: 1 / -1; }
.woocommerce form .form-row label { font-weight: 600; font-size: 15px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 11px 12px;
  background: var(--weiss); width: 100%; max-width: 100%; min-width: 0; min-height: 44px; height: auto;
}
.woocommerce form .form-row textarea, .woocommerce form #order_comments { min-height: 120px; }
.woocommerce form .required { color: var(--fehler); text-decoration: none; }
.woocommerce-billing-fields h3, .woocommerce-shipping-fields h3 {
  font-family: Archivo, sans-serif; font-size: 19px; font-weight: 700; margin: 0 0 14px;
}
.woocommerce-shipping-fields h3 label { display: flex; gap: 10px; align-items: center; }
.woocommerce-shipping-fields h3 input { width: auto; }
#payment ul.payment_methods { list-style: none; padding: 0; display: grid; gap: 10px; }
#payment ul.payment_methods li { border: 1px solid var(--rand); padding: 14px; background: var(--weiss); }
#payment .payment_box { font-size: 15px; color: var(--braun-mittel); margin-top: 8px; }
#place_order { width: 100%; }
#order_review ul#shipping_method { list-style: none; padding: 0; display: grid; gap: 8px; }
#order_review ul#shipping_method input { width: auto; }

.woocommerce-order, .woocommerce-account { padding: 32px 0 72px; }
.woocommerce-order .woocommerce-order-overview {
  list-style: none; padding: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin: 24px 0;
}
.woocommerce-order .woocommerce-order-overview li {
  border: 1px solid var(--rand); padding: 14px; font-size: 14px; color: var(--braun-hell);
}
.woocommerce-order .woocommerce-order-overview strong { display: block; font-size: 16px; color: var(--braun); margin-top: 4px; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.woocommerce-MyAccount-navigation a {
  display: block; padding: 12px 14px; border: 1px solid var(--rand); color: var(--braun); text-decoration: none;
}
.woocommerce-MyAccount-navigation .is-active a { background: var(--braun); border-color: var(--braun); color: #fff; }
.woocommerce-account .woocommerce { display: grid; gap: 32px; grid-template-columns: 240px minmax(0, 1fr); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 1024px) {
  .shop-layout { grid-template-columns: 1fr; gap: 28px; }
  .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
  .burger { display: inline-flex; }
  .hauptnav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--weiss); border-bottom: 1px solid var(--rand);
    flex-direction: column; align-items: stretch; margin: 0;
    padding: 8px var(--gutter) 20px; gap: 0; z-index: 45;
  }
  .hauptnav.offen { display: flex; }
  .hauptnav > li { width: 100%; border-bottom: 1px solid var(--rand); }
  .hauptnav .sub-menu { list-style: none; padding: 0 0 8px 16px; display: grid; gap: 6px; }
  .mega { display: none; }
  .suche { display: none; }
}

@media (max-width: 980px) {
  .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review { grid-column: 1; grid-row: auto; position: static; }
}

@media (max-width: 860px) {
  .abschnitt { padding: 44px 0; }
  .hero__bild { height: 46vh; min-height: 320px; }
  .hero__kasten { padding: 22px; }
  .footer__inner { padding: 40px var(--gutter); }
  .split { gap: 28px; }
  .verwandte { padding: 40px 0; }
  .woocommerce-cart .cart-collaterals { margin-left: 0; }
  .woocommerce-cart table.cart td.actions { text-align: left; }
  .woocommerce-cart table.cart td.actions .coupon { float: none; margin-bottom: 10px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  /* Nur die Beschriftungen ausblenden — der Zähler muss sichtbar bleiben. */
  .kopf-aktion > span:not(.zaehler) { display: none; }
  .drawer { width: 100%; }
  .cookie__aktionen .btn { flex: 1 1 100%; }
  .zahlen { gap: 20px; }
}

@media (max-width: 400px) {
  .topbar__inner { gap: 4px 16px; font-size: 12.5px; }
  .logo i { font-size: 20px; }
  .btn { padding: 12px 18px; }
  .produktseite__preis { font-size: 26px; }
}

@media print {
  .kopf, .topbar, .footer, .cookie, .drawer, .drawer-schleier, .nach-oben { display: none !important; }
}

/* Klassen aus dem Warenkorb-Baustein, die das Grundgerüst noch nicht kennt. */
.drawer-zeile__entfernen {
  background: none; border: 0; color: var(--braun-hell); cursor: pointer; min-width: 44px;
}
.drawer-zeile__entfernen:hover { color: var(--rot); }
.drawer__leer { color: var(--braun-mittel); }
.drawer__mwst { font-size: 14px; color: var(--braun-hell); }
.drawer__aktionen { display: grid; gap: 10px; margin-top: 12px; }
.drawer__titel { font-family: Archivo, sans-serif; font-weight: 700; font-size: 19px; }
.drawer__schliessen { background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--braun); min-height: 44px; min-width: 44px; }

/* Kopfzeile auf schmalen Telefonen: Logo, Menüknopf und die drei Aktionen
   passen sonst nicht in eine Zeile. */
@media (max-width: 520px) {
  .kopf__inner { flex-wrap: wrap; gap: 6px 8px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .logo { gap: 8px; }
  .logo i { font-size: 20px; }
  .logo__wort { font-size: 16px; }
  .burger { order: 3; }
  .kopf__aktionen { margin-left: auto; gap: 0; }
  .kopf-aktion { min-width: 40px; padding: 0 4px; }
  .zaehler { top: 2px; right: 0; min-width: 16px; height: 16px; font-size: 10px; }
  .hauptnav { top: calc(100% + 1px); }
}
@media (max-width: 360px) {
  .logo__wort { font-size: 14px; letter-spacing: 0; }
  .kopf-aktion { min-width: 36px; }
}

/* Untermenüpunkte gehören auf dem Desktop ins Mega-Menü, nicht in die Leiste.
   Im aufgeklappten Mobilmenü bleiben sie dagegen sichtbar. */
.hauptnav .sub-menu { display: none; }
@media (max-width: 1024px) {
  .hauptnav.offen .sub-menu {
    display: grid; list-style: none; padding: 0 0 10px 16px; gap: 6px;
  }
  .hauptnav.offen .sub-menu a { font-weight: 400; padding: 6px 0; min-height: 0; }
}

/* --------------------------------------------------------------------------
   Kurzmeldungen (Toasts) und Bewegung
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 120;
  display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: var(--weiss); border: 1px solid var(--rand); border-left: 4px solid var(--gruen);
  border-radius: var(--radius); padding: 14px 40px 14px 14px;
  box-shadow: 0 8px 24px rgba(43,33,27,.18); pointer-events: auto;
  animation: toast-ein .22s ease-out;
}
.toast--fehler { border-left-color: var(--rot); }
.toast--info   { border-left-color: var(--braun); }
.toast.geht    { animation: toast-aus .2s ease-in forwards; }
.toast__icon   { color: var(--gruen); font-size: 18px; margin-top: 2px; flex: 0 0 auto; }
.toast--fehler .toast__icon { color: var(--rot); }
.toast--info .toast__icon   { color: var(--braun); }
.toast__titel  { font-family: Archivo, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--braun); }
.toast__text   { font-size: 14px; color: var(--braun-mittel); margin-top: 3px; line-height: 1.45; }
.toast__link   { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; }
.toast__zu {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px;
  border: 0; background: none; color: var(--braun-hell); cursor: pointer; border-radius: var(--radius);
}
.toast__zu:hover { color: var(--braun); background: var(--sand); }
.toast__balken {
  position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gruen);
  animation: toast-balken linear forwards;
}
.toast--fehler .toast__balken { background: var(--rot); }
.toast--info .toast__balken   { background: var(--braun); }

@keyframes toast-ein  { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-aus  { to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-balken { from { width: 100%; } to { width: 0; } }

@media (max-width: 560px) { .toasts { right: 12px; left: 12px; bottom: 12px; width: auto; } }

.produkt, .kachel, .artikel-karte, .stimme { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.produkt:hover, .kachel:hover, .artikel-karte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(43,33,27,.08); }
.btn, .woocommerce .button { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.btn:active, .woocommerce .button:active { transform: translateY(1px); }
.zaehler { transition: transform .18s ease; }
.zaehler.puls { animation: zaehler-puls .45s ease; }
@keyframes zaehler-puls { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast__balken, .zaehler.puls { animation: none !important; }
  .produkt:hover, .kachel:hover, .artikel-karte:hover { transform: none; }
}

/* Warenkorbseite: Mengenfeld mit Schaltflächen. */
.woocommerce-cart .quantity.mengen {
  display: inline-flex; align-items: stretch; border: 1px solid var(--rand);
  border-radius: var(--radius); overflow: hidden;
}
.woocommerce-cart .quantity.mengen input[type="number"] { border: 0; border-radius: 0; width: 56px; }
.woocommerce-cart .quantity.mengen button { width: 40px; border: 0; background: var(--sand); color: var(--braun); cursor: pointer; }
.woocommerce-cart .quantity.mengen button:hover { background: var(--sand-dunkel); }
form.woocommerce-cart-form.wird-aktualisiert { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* Suchfeld auf schmalen Displays ausklappbar statt ganz verborgen. */
.kopf-aktion--suche { display: none; }
@media (max-width: 1024px) {
  .kopf-aktion--suche { display: inline-flex; }
  .suche { display: none; order: 4; flex-basis: 100%; width: 100%; margin-top: 6px; }
  .kopf.suche-offen .suche { display: flex; }
}


/* --------------------------------------------------------------------------
   Nachbesserungen aus dem Responsive-Audit
   -------------------------------------------------------------------------- */

/* 1) Der Textkasten ragte auf schmalen Displays oben und unten aus dem Hero
      heraus (bis 44,6 px), weil die Bildhöhe fest war und der überlagerte
      Inhalt nicht mitgezählt wurde. Als Raster liegen Bild und Text in
      derselben Zelle — die Zeilenhöhe richtet sich nach dem höheren von beiden. */
@media (max-width: 520px) {
  .hero { display: grid; }
  .hero__bild { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 380px; }
  .hero__inhalt { grid-area: 1 / 1; position: static; align-items: center; padding: 28px 0; }
  .hero__kasten { padding: 20px; border-left-width: 3px; }
  .hero__kasten h1 { font-size: clamp(24px, 7vw, 32px); }
  .hero__text { font-size: 15px; margin-top: 12px; }
  .hero__preis { font-size: 20px; margin-top: 14px; }
  .hero__aktionen { margin-top: 18px; }
  .hero__aktionen .btn { flex: 1 1 100%; }
}

/* 2) Die Kopfzeile brach unter 350 px um, weil der Menüknopf keinen Platz
      mehr fand. Enger setzen statt umbrechen. */
@media (max-width: 380px) {
  .kopf__inner { gap: 4px; padding: 8px 12px; }
  .kopf-aktion { min-width: 36px; padding: 0 2px; }
  .logo { gap: 6px; }
  .logo__wort { font-size: 13px; letter-spacing: 0; }
}

/* 4) Aufgeklappte Suche: über 520 px konnte sie nicht in eine eigene Zeile
      rutschen, weil die Kopfzeile nicht umbrach — sie blieb auf 114 px
      zusammengedrückt. */
@media (max-width: 1024px) {
  .kopf__inner { flex-wrap: wrap; }
  .kopf.suche-offen .suche { flex-basis: 100%; width: 100%; }
}


/* --------------------------------------------------------------------------
   Zweite Runde Audit-Korrekturen
   -------------------------------------------------------------------------- */

/* Schichtung: die Schublade ist eine bewusste Handlung und gehört über den
   Cookie-Hinweis. Schwebende Knöpfe und Meldungen weichen ihm nach oben aus. */
.cookie          { z-index: 100; }
.drawer-schleier { z-index: 128; }
.drawer          { z-index: 130; }
.toasts          { z-index: 140; bottom: calc(16px + var(--cookie-hoehe, 0px)); }
.nach-oben       { bottom: calc(16px + var(--cookie-hoehe, 0px)); }
.cookie__inner   { max-height: min(78vh, 620px); overflow-y: auto; }

/* Der Fuß der Schublade soll beim Scrollen stehen bleiben. */
.drawer__fuss { position: sticky; bottom: 0; background: var(--weiss); }

/* Fingergerechte Bedienelemente. */
.produkt__merken { width: 44px; height: 44px; }
.toast__zu { width: 40px; height: 40px; }
.toast__link { display: inline-block; padding: 6px 0; }
.kopf-aktion { min-width: 44px; min-height: 44px; }

/* Der Nach-oben-Knopf lag in der einspaltigen Ansicht auf den Karten. */
@media (max-width: 900px) {
  .nach-oben { right: 12px; }
}

/* Drei Bestellschritte: entweder alle drei nebeneinander oder untereinander —
   zwei plus einer ließ eine Lücke von 272 × 130 px stehen. */
.schritte { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Die Kennzahlen tragen ganze Sätze als Beschriftung und standen deshalb
   immer untereinander. Als Raster stehen sie ab Tablet nebeneinander. */
.zahlen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; }
@media (min-width: 620px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.zahlen > div { flex: none; }

/* Split: das Bild schrumpfte zwischen 710 und 1024 px auf ein Drittel. */
@media (min-width: 710px) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); }
}

/* Tabellen als echte Tabelle in einem scrollbaren Rahmen (display:block
   hätte den Tabellenkopf von den Datenspalten gelöst). */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; }
/* Keine erzwungene Mindestbreite: schmale Tabellen sollen sich einfügen,
   breite scrollen von selbst. Ein festes min-width zwang das Datenblatt
   (285 px natürliche Breite) unnötig ins seitliche Scrollen. */
.tabelle-scroll table { margin-bottom: 0; min-width: 0; width: 100%; }
.tabelle-scroll.scrollbar { background: linear-gradient(to left, rgba(43,33,27,.08), rgba(43,33,27,0) 28px); }

.kontakt-karte__zeile a { display: inline-block; padding: 10px 0; }
.formular select { text-overflow: ellipsis; }
.meldung[role="status"] { scroll-margin-top: 120px; }

/* Warenkorb: Bedienelemente aus dem Audit nachgebessert. */
form.woocommerce-cart-form [name="update_cart"] {
  min-height: 44px; opacity: 1; background: var(--braun); color: #fff;
}
.woocommerce a.remove { width: 36px; height: 36px; display: inline-grid; place-items: center; font-size: 20px; text-decoration: none; }
.woocommerce .coupon input[type="text"] { flex: 1 1 220px; min-width: 200px; min-height: 44px; }
#payment input[type="radio"], #shipping_method input[type="radio"] { width: 20px; height: 20px; }
.woocommerce-columns--addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; }
/* Früher schaltete hier ein `position: static` das Kleben auf flachen
   Fenstern ganz ab. Die Übersicht darf kleben und selbst scrollen — die
   Regel dafür steht weiter unten. */

/* --------------------------------------------------------------------------
   Kundenkonto — Korrekturen aus dem Audit
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }

.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  grid-template-columns: minmax(0, 1fr);
}
.woocommerce-account #customer_login {
  grid-column: 1 / -1; display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.woocommerce-account #customer_login > div { float: none; width: auto; }

/* Die Bestellnummer steckt in einem <th>, das WooCommerce mobil ausblendet. */
@media (max-width: 768px) {
  .woocommerce-account table.my_account_orders tbody th {
    display: block; text-align: left; background: transparent;
    padding: 14px 14px 0; font-size: 15px;
  }
  .woocommerce-account table.my_account_orders tbody th::before {
    content: attr(data-title) ": "; color: var(--braun-hell); font-weight: 400;
  }
}

.woocommerce-MyAccount-navigation a { min-height: 44px; display: flex; align-items: center; }
.woocommerce .my_account_orders .button { min-height: 44px; }

/* „Ähnliche Produkte": die WooCommerce-Liste braucht ein eigenes Raster. */
.woocommerce ul.products {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.woocommerce ul.products > li { margin: 0; width: auto; float: none; }

/* Bestellübersicht an der Kasse lief bei 320 px 24 px über. */
@media (max-width: 480px) {
  #order_review .shop_table { table-layout: fixed; width: 100%; }
  #order_review .shop_table th, #order_review .shop_table td { word-break: break-word; }
}

/* ==========================================================================
   Warenkorb und Kasse — Nachbesserungen aus der Responsive-Prüfung
   ========================================================================== */

/* WooCommerce färbt „Weiter zur Kasse" in sein eigenes Violett. */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background: var(--rot); color: #fff; border: 0;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: var(--rot-dunkel, #932d15); }

/* Mengenknöpfe und Entfernen-Kreuz auf Fingergröße. */
.woocommerce .quantity .mengen button,
.woocommerce .quantity .mengen-wahl button { min-width: 44px; min-height: 44px; }
.woocommerce td.product-remove a.remove { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }

/* Ankreuzfelder waren 13 × 13 px — auf dem Telefon kaum zu treffen. */
.woocommerce form .form-row .input-checkbox,
.woocommerce-checkout input[type="checkbox"] { width: 20px; height: 20px; margin-right: 10px; }
.woocommerce-checkout .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 4px; min-height: 44px; }

/* Produktbild bleibt auch in der gestapelten Ansicht sichtbar: es ist die
   schnellste Wiedererkennung, gerade auf dem Telefon. */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive tr td.product-thumbnail { display: block; text-align: left; }
  .woocommerce table.shop_table_responsive tr td.product-thumbnail::before { content: none; }
  .woocommerce table.shop_table_responsive tr td.product-thumbnail img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius); }
}

/* Gutscheinfeld: Eingabe und Knopf nebeneinander, solange Platz ist. */
.woocommerce .coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: 100%; }
.woocommerce .coupon #coupon_code { flex: 1 1 180px; min-width: 0; margin: 0; }
.woocommerce .coupon button { flex: 0 0 auto; min-height: 44px; }

/* Auf dem Telefon füllten die Vorschaubilder zwei Reihen (180 px) und
   schoben den Kaufknopf weiter nach unten. Eine einzelne, seitlich
   verschiebbare Reihe zeigt genauso viel und kostet 96 px weniger. */
@media (max-width: 600px) {
  .galerie__thumbs {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .galerie__thumb { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Frachtfrei-Hinweis über Warenkorb und Kasse. */
.frachtfrei { margin: 0 0 20px; font-size: 14.5px; }
.frachtfrei--erreicht { font-weight: 600; }

/* Felder, die nur Bots ausfüllen sollen: unsichtbar, ohne das Dokument nach
   links zu verlängern (left:-9999px täte genau das).
   Fehlte diese Regel, stand „Bitte leer lassen" sichtbar über dem Namensfeld
   — und wer es ausfüllte, bekam ein „Vielen Dank", während die Nachricht
   verworfen wurde. */
.honigtopf {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Sprungziele dürfen nicht unter dem klebenden Kopf landen: beim Klick auf
   ein Inhaltsverzeichnis war die Überschrift um bis zu 78 px verdeckt. */
html { scroll-padding-top: 120px; }
:target { scroll-margin-top: 120px; }
@media (max-width: 1024px) { html { scroll-padding-top: 130px; } :target { scroll-margin-top: 130px; } }

/* WooCommerce räumt seine Floats mit `::before`/`::after { display: table }`
   auf. In einem Raster sind das zwei zusätzliche Rasterkinder: vier Kacheln
   für zwei Blöcke — die Anmeldung landete in Spalte 2, die Registrierung
   fiel in Zeile 2, und im Konto tauschten Navigation und Inhalt die Plätze. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
#customer_login::before,
#customer_login::after { display: none; }

/* --- Fingergerechte Größen und Lesbarkeit (Responsive-Prüfung) ----------- */

/* Ankreuzfelder lieferte der Browser mit 13 px aus. */
.woocommerce input[type="checkbox"],
.formular input[type="checkbox"] { width: 20px; height: 20px; }
.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Bestellnummer in der Übersicht war 36 × 16 px groß. */
.woocommerce .my_account_orders td a,
.woocommerce-orders-table__cell-order-number a { display: inline-flex; align-items: center; min-height: 44px; }

/* Schieberegler des Rechners: 16 px hoher Griff ist mit dem Daumen kaum
   zu treffen. */
input[type="range"] { width: 100%; height: 32px; }
input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }

/* Zeilenlänge auf den Rechtstexten: 860 px ergaben 94–109 Zeichen je Zeile.
   68 Zeichen sind die übliche Obergrenze für flüssiges Lesen. */

/* Der Zustimmungsbanner nahm auf 320 × 844 die Hälfte des Bildschirms ein. */
.cookie { max-height: 45vh; overflow-y: auto; }

/* --- Letzte Nacharbeiten aus den Responsive-Berichten -------------------- */

/* Der Hinweis auf seitlich scrollende Tabellen war mit 6 % Deckkraft auf
   28 px praktisch unsichtbar — auf 320 px blieben so über 200 px Inhalt
   unbemerkt. Breiter und deutlicher, mit weißem Anfang, damit die Kante
   nicht schmutzig wirkt. */
.tabelle-scroll.scrollbar {
  background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,.04) 24px, rgba(0,0,0,0) 56px);
}

/* Fingergerechte Ziele in Kopf- und Fußbereich. */
.topbar a, .topbar span.mit-icon { min-height: 34px; display: inline-flex; align-items: center; }
.suche button { min-width: 52px; min-height: 44px; }
a.logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__liste a, .fuss__liste a { min-height: 34px; display: inline-flex; align-items: center; }

/* Bestellkarten im Konto: die letzte Karte blieb ohne Rahmen, weil
   WooCommerce die Trennlinie nur zwischen den Zeilen zeichnet. */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive tbody tr,
  .woocommerce-orders-table tbody tr {
    display: block; border: 1px solid var(--rand); border-radius: var(--radius);
    margin-bottom: 14px; padding: 4px 0;
  }
  .woocommerce table.shop_table_responsive tbody tr td { border: 0; }
}

/* Die Bestellübersicht klebte nur auf hohen Fenstern; auf einem flachen
   Laptop sprang sie zurück in den Fluss. Sie darf mitscrollen, wenn sie
   höher ist als das Fenster. */
@media (min-width: 1025px) {
  .woocommerce-checkout form.checkout > #order_review,
  .kasse__uebersicht {
    position: sticky; top: 110px; align-self: start;
    max-height: calc(100vh - 130px); overflow-y: auto;
  }
}