/* =========================================================
   meditationgongs.de · Design-System (Entwurf Fable, 03.09.2026)
   Farben sind fix (sechs Markenwerte). Schrift, Raster, Abstände,
   Komponenten: Entscheidung dieses Entwurfs.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Die sechs festen Markenfarben */
  --wein:#5B0000;      /* Überschriften, Fuß, Marke */
  --akzent:#a63e45;    /* Knöpfe, Links, Fokus */
  --creme:#f3eed9;     /* Flächen, Seitengrund */
  --text:#54595f;      /* Fließtext */
  --dunkel:#303030;    /* starke Kontraste, Bühne */
  --linie:#e6e2d4;     /* Linien, Rahmen */
  --weiss:#ffffff;     /* Karten und Felder */

  /* Abgeleitete Töne, ausschließlich Alpha-Werte derselben Farben */
  --wein-10:rgba(91,0,0,.10);
  --wein-20:rgba(91,0,0,.20);
  --dunkel-06:rgba(48,48,48,.06);
  --dunkel-14:rgba(48,48,48,.14);
  --creme-12:rgba(243,238,217,.12);
  --creme-30:rgba(243,238,217,.30);
  --creme-70:rgba(243,238,217,.70);

  /* Schrift */
  --f-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-text:"Manrope","Helvetica Neue",Arial,sans-serif;

  /* Größen, Zielgruppe 40 plus: nichts unter 16 px */
  --fs-body:1.1875rem;      /* 19 px */
  --fs-small:1.03rem;       /* 16,5 px */
  --fs-kicker:1rem;         /* 16 px, Versalien, fett, nie grau-dünn */
  --fs-h1:clamp(3rem,6.2vw,5.75rem);      /* 48 bis 92 px */
  --fs-h2:clamp(2.375rem,4.2vw,3.75rem);  /* 38 bis 60 px */
  --fs-h3:clamp(1.75rem,2.4vw,2.125rem);  /* 28 bis 34 px */
  --fs-h4:1.4375rem;        /* 23 px */
  --fs-preis:1.875rem;      /* 30 px */
  --lh-body:1.66;

  /* Raster und Abstände */
  --max:1440px;
  --gutter:clamp(22px,4.2vw,84px);
  /* Punkt 1 (Alexander 05.09.2026): mehr Freiraum zwischen den Sektoren.
     Klein 64 auf 80 px (plus 25 Prozent), gross 120 auf 168 px (plus 40 Prozent),
     damit das Verhaeltnis auf kleinen Schirmen nicht kippt. */
  --sec:clamp(96px,11.5vw,208px);
  --gap:clamp(24px,2.8vw,44px);
  /* Punkt 7 (Alexander 05.09.2026): mehr Abstand zwischen den Produkten.
     Zeilenabstand deutlich groesser als der Spaltenabstand, weil die Kacheln
     ohne Kasten stehen und die Zeilen sonst ineinanderlaufen. */
  --kachel-spalte:clamp(30px,3.8vw,64px);
  --kachel-zeile:clamp(60px,6.4vw,112px);
  --radius:6px;
  --radius-l:10px;

  --shadow-tile:0 20px 50px -30px rgba(48,48,48,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 2. Grundlagen ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--text);
  font-family:var(--f-text);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:3px}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--f-display);font-weight:400;color:var(--wein);margin:0;letter-spacing:-.005em}
h1{font-size:var(--fs-h1);line-height:1.02}
h2{font-size:var(--fs-h2);line-height:1.06}
h3{font-size:var(--fs-h3);line-height:1.15}
h4{font-family:var(--f-text);font-weight:600;font-size:var(--fs-h4);line-height:1.3;color:var(--dunkel);margin:0}
p{margin:0}
.lede{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.5;color:var(--dunkel)}
.small{font-size:var(--fs-small)}
.dunkel{color:var(--dunkel)}
em.it{font-style:italic;color:var(--akzent)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0}
.sec--flach{padding:calc(var(--sec)*.6) 0}
.skip{position:absolute;left:-999px;top:8px;background:var(--wein);color:var(--creme);padding:10px 16px;z-index:100}
.skip:focus{left:8px}

/* Kicker mit Ring-Glyphe: die Signatur des Systems */
.kicker{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--fs-kicker);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wein);margin:0 0 18px;
}
.kicker .ring{width:.85em;height:.85em;flex:none}
.ring{display:inline-block;width:1em;height:1em;vertical-align:-.1em}

/* ---------- 3. Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:56px;padding:0 30px;border-radius:999px;border:1.5px solid transparent;
  font-weight:600;font-size:1.0625rem;letter-spacing:.01em;line-height:1;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--akzent);color:var(--weiss)}
.btn--primary:hover{background:var(--wein)}
.btn--secondary{background:transparent;color:var(--wein);border-color:var(--wein)}
.btn--secondary:hover{background:var(--wein);color:var(--creme)}
.btn--hell{background:var(--creme);color:var(--wein)}
.btn--hell:hover{background:var(--weiss)}
.btn--breit{width:100%}
.btn--klein{min-height:46px;padding:0 20px;font-size:1rem}
.nebenlink{font-size:var(--fs-small);font-weight:500;color:var(--text);text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:.22em}
.nebenlink:hover{color:var(--akzent);text-decoration-color:var(--akzent)}
/* 13.10.2026, Lea (Adler S13): eigenstaendige Textlinks waren 22 bis 23 px hoch.
   2 px Innenabstand oben und unten heben die Trefferflaeche ueber 24 px. Bei
   einem Inline-Element verschiebt senkrechter Innenabstand keine Zeile. */
.nebenlink,.fuss li a{padding-block:2px}
/* Der Herstellerlink in Kapitaelchen kam so nur auf 23 px (Jody K-1). Als
   Inline-Block nimmt er die volle Zeilenhoehe, die Zeile selbst bleibt gleich. */
.kauf__marke a{display:inline-block}

/* ---------- 4. Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:50;background:var(--creme);
  border-bottom:1px solid var(--linie);
}
.kopf__zeile{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;
  min-height:88px;
}
.logo{flex:none;display:inline-flex}
.logo img{height:46px;width:auto;max-width:none}
.nav{display:flex;gap:clamp(18px,2vw,34px);justify-content:center;list-style:none;margin:0;padding:0}
.nav a{color:var(--dunkel);font-weight:500;font-size:1.0625rem;padding:8px 0;position:relative;white-space:nowrap}
.nav a:hover{text-decoration:none;color:var(--wein)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--wein);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.werkzeuge{display:flex;align-items:center;gap:8px}
.suche{
  display:flex;align-items:center;gap:10px;height:46px;padding:0 16px 0 18px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:999px;min-width:150px;color:var(--text);
}
.suche input{border:0;outline:0;background:transparent;font:inherit;font-size:1rem;color:var(--dunkel);width:100%}
.suche input::placeholder{color:var(--text)}
.ikon-knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;min-width:46px;padding:0 12px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--dunkel);font-weight:500;font-size:1rem;
}
.ikon-knopf:hover{background:var(--weiss);border-color:var(--linie)}
.ikon-knopf svg{width:22px;height:22px}
.zahl{background:var(--wein);color:var(--creme);font-size:1rem;font-weight:700;min-width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.burger{display:none}

/* Störer für Geschäftskunden */
/* 13.10.2026, Lea (Adler K6): ohne JavaScript liess sich der Pflichtklick nicht
   ausloesen, die feste Ebene sperrte die ganze Seite. Ohne Skript steht die
   Karte jetzt als Hinweis im Fluss oben auf der Seite, ohne Knopf. Die Sperre
   gilt nur, wenn rahmen.php die Klasse js gesetzt hat. */
.stoerer{background:var(--dunkel);padding:140px var(--gutter) 64px}
html:not(.js) .stoerer__aktion{display:none}
html:not(.js) .stoerer__karte p:not(.stoerer__titel){margin-bottom:0}
.js .stoerer{
  /* Punkt 1 (Runde 3, 05.09.2026): bei 390x844 war die aufgeklappte Karte 939 px
     hoch und wurde vom zentrierenden Raster oben und unten abgeschnitten, ohne
     dass man herankam. Flex mit margin:auto zentriert genauso, schneidet beim
     Ueberlauf aber nicht ab, und das Overlay scrollt selbst. 100dvh statt der
     Layout-Hoehe, weil die Browserleiste auf dem Telefon Hoehe frisst. */
  position:fixed;inset:0;height:100vh;height:100dvh;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px;
  overflow-y:auto;overscroll-behavior:contain;
  background:rgba(48,48,48,.66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.stoerer[hidden]{display:none}
.stoerer__karte{
  /* Punkt 2 (Alexander 05.09.2026): der Stoerer bleibt ein Pflichtklick, aber
     die Cremeflaeche knallte auf dem dunklen Grund. Die Karte steht jetzt im
     Dunkel statt darauf, Creme traegt nur noch Schrift und Kante. */
  width:min(600px,100%);margin:auto;background:var(--dunkel);color:var(--creme);
  border:1px solid var(--creme-30);border-radius:var(--radius-l);
  padding:clamp(30px,3.6vw,48px);position:relative;overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.75);
}
.stoerer__karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--akzent)}
.stoerer__karte .kicker{margin-bottom:14px;color:var(--creme-70)}
/* 13.10.2026, Lea (Adler S4): der Titel ist kein h2 mehr, sonst stuende vor dem
   h1 der Seite eine zweite Ebene. Der Dialog bekommt seinen Namen ueber
   aria-labelledby. Aussehen wie bisher, deshalb die h2-Werte hier vollstaendig. */
.stoerer__karte .stoerer__titel{font-family:var(--f-display);font-weight:400;line-height:1.06;letter-spacing:-.005em;opacity:1;color:var(--creme);font-size:clamp(1.75rem,2.6vw,2.25rem);margin-bottom:16px}
.stoerer__karte p{color:var(--creme);opacity:.9;font-size:var(--fs-small);margin-bottom:30px}
.stoerer__karte .nebenlink{color:var(--creme-70);text-decoration-color:var(--creme-30)}
.stoerer__karte .nebenlink:hover{color:var(--creme);text-decoration-color:var(--creme)}
.stoerer__aktion{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* Der Nebenlink ist ein Knopf, er klappt die Erklaerung im Stoerer selbst auf */
.stoerer__karte .nebenlink{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-small);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.stoerer__erklaerung{margin-top:26px;padding-top:22px;border-top:1px solid var(--creme-30)}
.stoerer__erklaerung[hidden]{display:none}
.stoerer__erklaerung p{color:var(--creme);opacity:.9;font-size:var(--fs-small);margin-bottom:14px}
.stoerer__erklaerung p:last-child{margin-bottom:0}

/* ---------- 5. Hero ---------- */
.hero{padding:clamp(40px,5vw,72px) 0 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--gap);align-items:stretch}
.hero__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,3vw,48px) 0 clamp(40px,5vw,72px)}
.hero h1{margin-bottom:26px;max-width:14ch}
.hero .lede{max-width:34ch;margin-bottom:38px}
.hero__aktionen{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero__bild{
  position:relative;border-radius:var(--radius-l) var(--radius-l) 0 0;overflow:hidden;
  background:var(--dunkel);min-height:520px;box-shadow:var(--shadow-tile);
}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:center 40%;position:absolute;inset:0}
.hero__chip{
  position:absolute;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:10px;
  background:rgba(48,48,48,.72);color:var(--creme);padding:10px 16px;border-radius:999px;
  font-size:var(--fs-small);font-weight:500;backdrop-filter:blur(4px);
}
.hero__chip .ring{color:var(--creme)}

/* Vertrauensleiste unter dem Hero */
.leiste{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);background:var(--weiss)}
.leiste__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.leiste__item{padding:30px 30px 30px 0;display:flex;gap:14px;align-items:flex-start;font-size:var(--fs-small);color:var(--dunkel);font-weight:500;line-height:1.4}
.leiste__item + .leiste__item{padding-left:30px;border-left:1px solid var(--linie)}
.leiste__item .ring{color:var(--akzent);flex:none;margin-top:.15em;width:1.1em;height:1.1em}

/* ---------- 6. Sektionsköpfe ---------- */
.sek-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sek-kopf h2{max-width:20ch}
.sek-kopf .lede{max-width:48ch;margin-top:16px}
.sek-kopf__aktion{padding-bottom:8px}

/* ---------- 7. Warenart-Kacheln (Einstieg) ---------- */
.warenarten{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.warenart{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-l);
  padding:34px 30px 32px;min-height:232px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  color:var(--dunkel);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.warenart:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-tile)}
.warenart__glyphe{width:44px;height:44px;color:var(--wein)}
.warenart h4{color:var(--wein);font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.1}
.warenart span{font-size:var(--fs-small);color:var(--text)}

/* ---------- 8. Produktkachel ---------- */
/* Punkte 5, 6 und 8 (Alexander 05.09.2026): kein viereckiger Kasten mehr.
   Die Ware ist freigestellt und steht auf dem Seitengrund, das Bild wird
   nie angeschnitten (contain statt cover), runde Gongs wirken damit rund.
   Die feine Linie unter dem Bild traegt die Kachel und zeigt beim Zeigen
   den Klick an, der Kreis auf der Linie und die Zeile darunter sind der
   sichtbare Hinweis, dass die ganze Kachel ein Verweis ist. */
.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kachel-zeile) var(--kachel-spalte)}
.kachel{display:flex;flex-direction:column;color:inherit;min-width:0}
.kachel:hover{text-decoration:none}
.kachel__bild{
  position:relative;aspect-ratio:1/1;background:none;border-radius:0;
  overflow:visible;box-shadow:none;
  /* 05.09.2026: als Flex-Kind zieht min-height:auto hochformatige Bilder ueber
     das Quadrat hinaus, das Raster kippt. min-height:0 haelt aspect-ratio 1/1. */
  flex:0 0 auto;min-height:0;
}
.kachel__bild img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:transform .6s var(--ease)}
.kachel:hover .kachel__bild img{transform:scale(1.035)}
.kachel__bild--platz{display:grid;place-items:center;background:none;color:var(--linie)}
.kachel__bild--platz .ring{width:38%;height:38%;color:var(--linie)}

/* Die Linie unter dem Bild, sie ersetzt den Rahmen */
.kachel__text{
  position:relative;margin-top:32px;padding:28px 0 0;display:flex;flex-direction:column;gap:5px;
  border-top:1px solid var(--linie);
  /* 05.09.2026: der Textteil fuellt die Kachelhoehe, Preis und Ansehen sitzen
     unten. Damit stehen sie in jeder Reihe auf einer Linie, egal wie lang
     Titel und Merkmal laufen. */
  flex:1 1 auto;
}
.kachel__text::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--wein);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.kachel:hover .kachel__text::before,.kachel:focus-visible .kachel__text::before{transform:scaleX(1)}
/* Der Kreis sitzt auf der Linie am Bildfuss, er verdeckt die Ware nie */
.kachel__text::after{
  content:"";position:absolute;right:0;top:-22px;width:44px;height:44px;border-radius:999px;
  background:var(--weiss);border:1px solid var(--linie);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='%235B0000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.kachel:hover .kachel__text::after,.kachel:focus-visible .kachel__text::after{
  background-color:var(--wein);border-color:var(--wein);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'><path d='M5 12h13m-5-6 6 6-6 6' fill='none' stroke='%23f3eed9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.kachel__marke{font-size:var(--fs-kicker);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.kachel__titel{font-family:var(--f-display);font-size:1.625rem;line-height:1.15;color:var(--wein)}
.kachel:hover .kachel__titel{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.kachel__merkmal{
  font-size:var(--fs-small);color:var(--text);line-height:1.45;
  min-height:calc(2 * 1.45em);
  /* hoechstens drei Zeilen, der volle Text steht auf der Produktseite */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.kachel__preise{margin-top:auto;padding-top:12px;display:grid;gap:2px}
/* Der zweite sichtbare Hinweis, dauerhaft und ohne Mauszeiger lesbar */
.kachel__mehr{
  display:inline-flex;align-items:center;gap:.55em;margin-top:22px;
  font-size:var(--fs-small);font-weight:600;color:var(--akzent);
  border-bottom:1px solid var(--linie);padding-bottom:2px;align-self:flex-start;
  transition:color .3s,border-color .3s;
}
.kachel__mehr svg{width:18px;height:18px;transition:transform .4s var(--ease)}
.kachel:hover .kachel__mehr{color:var(--wein);border-color:var(--wein)}
.kachel:hover .kachel__mehr svg{transform:translateX(5px)}
.preis{font-weight:700;font-size:1.5rem;color:var(--dunkel);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.preis small{font-size:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-left:.4em}
.brutto{font-size:var(--fs-small);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.liefer{display:inline-flex;align-items:center;gap:.5em;font-size:var(--fs-small);font-weight:500;margin-top:8px}
/* flex:none, 13.10.2026 (Jody): bei mehrzeiligem Text schrumpfte das Symbol
   als Flex-Element fast auf null Breite. */
.liefer .ring{color:var(--akzent);flex:none}
/* Anmerkung Alexander 13.09.2026 auf /produkt/auris-gong-speculo: "mach
   diesen roten text hier standard-grau-farben", dazu im Chat "passe das
   jetzt einfach ueberall an". Der Text jeder Lieferaussage laeuft deshalb
   im Fliesston, egal welcher Zustand.
   Vorher trug die ganze Zeile die Zustandsfarbe: Vorrat in Weinrot
   (#5B0000), kurzfristig und Termin im Akzent (#a63e45). Gemessen am
   Katalog /katalog/gongs am 13.09.2026 lief das bei 5 von 24 Kacheln, die
   restlichen 19 standen schon im Fliesston, die Lieferzeile sah also je
   Kachel anders aus.
   Die Farbcodierung bleibt, aber nur noch am Ring. Das weicht bewusst von
   Checker Jodys Empfehlung vom 09.09.2026 ab, die fuer die drei Zustaende
   drei Erscheinungen verlangte. Mit der Aenderung sehen "kurzfristig
   lieferbar" und "wird gefertigt" gleich aus, sie tragen beide den Ring im
   Akzent. Der Unterschied lag vorher allein in der Textfarbe, und genau die
   nimmt Alexanders Anmerkung weg. Ob dieser Zustand so bleibt oder
   "kurzfristig" einen eigenen Ring bekommt, liegt am 13.09.2026 bei
   Alexander. Im Kaufbereich der Produktseite laeuft die Zeile seit Commit
   d70fa40 vom 13.09.2026 im Ton des Blocks, siehe produkt.css. */
.liefer--vorrat{color:var(--text)}
.liefer--vorrat .ring{color:var(--wein)}
.liefer--kurz{color:var(--text)}
.liefer--kurz .ring{color:var(--akzent)}
.liefer--termin{color:var(--text)}
.liefer--termin .ring{color:var(--akzent)}
/* In der Kachel haelt die Lieferzeile zwei Zeilen frei. Sonst rutscht der
   Preis in schmalen Spalten aus der Reihe, sobald ein Text umbricht. */
.kachel .liefer{min-height:calc(2 * 1.45em);align-items:flex-start}
.kachel .liefer .ring{flex:0 0 auto;margin-top:.15em}
/* Punkt 2 (Runde 3, 05.09.2026): der Zweizeiler-Deckel reichte nicht. Gemessen
   laeuft "Wird nach Bestellung gefertigt" ab einer Spaltenbreite unter 175 px
   ueber drei Zeilen (162 px = 67 px hoch, 182 px = 45 px hoch), "Vorraetig"
   bleibt einzeilig. Weil der Preis von unten haengt, schob der Unterschied ihn
   um 19 px aus der Reihe. Der Deckel haengt deshalb an der Spaltenbreite, nicht
   an der Fensterbreite: bei 1100 px Fenster ist die Spalte 225 px, bei 1440 px
   306 px, eine Media Query traefe die Faelle nicht. */
.kachel{container-type:inline-size}
@container (max-width:180px){
  .kachel .liefer{min-height:calc(3 * 1.45em)}
}

/* ---------- 9. Bühne (dunkle Sektion) ---------- */
.buehne{background:var(--dunkel);color:var(--creme)}
.buehne h2,.buehne h3{color:var(--creme)}
.buehne .kicker{color:var(--creme-70)}
.buehne .lede,.buehne p{color:var(--creme)}
.buehne .kachel__titel,.buehne .preis{color:var(--creme)}
.buehne .kachel__marke,.buehne .kachel__merkmal,.buehne .brutto,.buehne .preis small{color:var(--creme-70)}
.buehne .kachel__bild{box-shadow:none;outline:0}
.buehne .kachel__text{border-top-color:var(--creme-30)}
.buehne .kachel__text::before{background:var(--creme)}
.buehne .kachel__text::after{background-color:transparent;border-color:var(--creme-30)}
.buehne .kachel__mehr{color:var(--creme);border-color:var(--creme-30)}
.buehne .liefer{color:var(--creme)} .buehne .liefer .ring{color:var(--creme)}
.buehne a.nebenlink{color:var(--creme-70)}
.buehne .btn--secondary{color:var(--creme);border-color:var(--creme-70)}
.buehne .btn--secondary:hover{background:var(--creme);color:var(--wein)}

/* ---------- 10. Lieferaussage ---------- */
.lieferaussage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--gap);align-items:start}
.zustaende{display:grid;gap:16px}
.zustand{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 28px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-l)}
.zustand .ring{width:34px;height:34px;color:var(--akzent);margin-top:2px}
.zustand--vorrat .ring{color:var(--wein)}
.zustand h4{margin-bottom:6px}

/* ---------- 11. Hersteller ---------- */
.hersteller{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.hersteller a{
  display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:132px;padding:24px 20px;
  color:var(--wein);border-left:1px solid var(--linie);text-decoration:none;transition:background .3s;
}
.hersteller a:last-child{border-right:1px solid var(--linie)}
.hersteller a:hover{background:var(--weiss)}
.hersteller b{font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.1}
.hersteller span{font-size:var(--fs-small);color:var(--text)}

/* ---------- 12. Beratung ---------- */
.beratung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:center}
.beratung__bild{border-radius:var(--radius-l);overflow:hidden;aspect-ratio:1/1.04;box-shadow:var(--shadow-tile);background:var(--weiss)}
.beratung__bild img{width:100%;height:100%;object-fit:cover}
.beratung__text{padding:0 clamp(0px,3vw,48px)}
.beratung__text h2{margin-bottom:22px}
.beratung__text p{margin-bottom:22px}
.punkte{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px}
.punkte li{display:flex;gap:14px;align-items:flex-start;color:var(--dunkel)}
.punkte .ring{color:var(--akzent);flex:none;margin-top:.3em}

/* ---------- 13. Zahlung und Versand ---------- */
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-l);padding:32px 30px}
.karte h4{margin-bottom:12px;color:var(--wein)}
.karte p{color:var(--text)}
.karte .kicker{margin-bottom:12px}

/* ---------- 14. Fuß ---------- */
.fuss{background:var(--wein);color:var(--creme);padding:clamp(72px,7.6vw,120px) 0 48px}
.fuss a{color:var(--creme)}
.fuss__grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:var(--gap)}
.fuss__logo img{height:54px;width:auto;margin-bottom:22px}
.fuss__grid p{color:var(--creme);opacity:.85;max-width:32ch}
/* 13.10.2026, Lea (Adler S4): Spaltentitel im Fuss sind h2 statt h5, Aussehen unveraendert. */
.fuss .fuss__titel{font-family:var(--f-text);font-weight:700;font-size:var(--fs-kicker);line-height:inherit;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;color:var(--creme);opacity:.8}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fuss li a{font-size:1.0625rem;font-weight:500}
.fuss__unten{margin-top:72px;padding-top:30px;border-top:1px solid var(--creme-30);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:var(--fs-small)}
.fuss__unten p{opacity:.85}

/* ---------- 15. Listenseite ---------- */
.pfad{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-small);padding:20px 0 0}
.pfad a{color:var(--text)} .pfad span{color:var(--text)}
.listen-kopf{padding:clamp(28px,4vw,56px) 0 clamp(28px,3vw,40px)}
.listen-kopf h1{font-size:clamp(3rem,5.6vw,5rem);margin-bottom:18px}
.listen-kopf .lede{max-width:62ch}
.werkzeugleiste{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
}
.treffer{font-weight:600;color:var(--dunkel)}
.treffer b{font-family:var(--f-display);font-weight:400;font-size:1.75rem;color:var(--wein);margin-right:.25em}
.sortierung{display:flex;align-items:center;gap:12px;font-size:var(--fs-small);font-weight:500}
.sortierung select{
  font:inherit;font-size:1rem;color:var(--dunkel);background:var(--weiss);border:1px solid var(--linie);
  border-radius:999px;padding:10px 40px 10px 18px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 5l5 5 5-5' fill='none' stroke='%23303030' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center;
}
.filter-knopf{display:none}
.katalog{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(28px,4vw,64px);padding:clamp(28px,3vw,40px) 0 var(--sec);align-items:start}
.filter{position:sticky;top:112px;display:grid;gap:28px}
.filter__gruppe{border-top:1px solid var(--linie);padding-top:18px}
/* 13.10.2026, Lea (Adler S4): Filtertitel sind h2 (Kategorie) oder h3 (Marke)
   statt h4. Die h4-Werte stehen deshalb hier vollstaendig. */
.filter .filter__titel{font-family:var(--f-text);font-weight:600;font-size:1.0625rem;line-height:1.3;color:var(--dunkel);letter-spacing:.02em;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.filter .filter__titel svg{width:16px;height:16px;color:var(--text)}
.filter ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.filter label{display:flex;align-items:center;gap:12px;font-size:1.0625rem;color:var(--dunkel);cursor:pointer}
.filter input[type=checkbox]{width:20px;height:20px;accent-color:var(--akzent);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--linie);background:var(--weiss);border-radius:999px;padding:8px 14px;font-size:1rem;color:var(--dunkel)}
.chip[aria-pressed=true]{background:var(--wein);color:var(--creme);border-color:var(--wein)}
.baum{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.baum a{display:flex;justify-content:space-between;color:var(--dunkel);font-size:1.0625rem;padding:6px 0}
.baum a[aria-current]{color:var(--wein);font-weight:700}
.preisspanne{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.preisspanne input{width:100%;font:inherit;font-size:1rem;padding:10px 12px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--weiss);color:var(--dunkel)}
.aktiv{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.aktiv .chip{display:inline-flex;gap:8px;align-items:center;background:var(--weiss)}
.aktiv .chip b{font-weight:600}
.katalog .kacheln{grid-template-columns:repeat(3,1fr);gap:var(--kachel-zeile) var(--kachel-spalte)}
.nachladen{display:grid;justify-items:center;gap:14px;margin-top:clamp(40px,5vw,64px)}
.nachladen .balken{width:220px;height:3px;background:var(--linie);border-radius:3px;overflow:hidden}
.nachladen .balken i{display:block;height:100%;width:26%;background:var(--wein)}
.seo-text{margin-top:var(--sec);padding-top:var(--sec);border-top:1px solid var(--linie);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--gap)}
.seo-text p + p{margin-top:16px}
.seo-text .text{columns:1}

/* ---------- 16. Responsiv ---------- */
@media (max-width:1180px){
  .warenarten{grid-template-columns:repeat(3,1fr)}
  .hersteller{grid-template-columns:repeat(3,1fr)}
  .hersteller a:nth-child(3n){border-right:1px solid var(--linie)}
  .fuss__grid{grid-template-columns:1fr 1fr 1fr}
  .fuss__logo{grid-column:1/-1}
  .katalog{grid-template-columns:240px minmax(0,1fr)}
}
/* Kopf: bis 1439 px kompaktere Suche und engeres Menü, ab 1260 px abwärts Burger statt Menü und Suche.
   Grund: zwischen 901 und 1439 px passten Logo, sechs Menüpunkte, Suche und drei Knöpfe nicht in eine Zeile (Jody 04.09.2026). */
@media (max-width:1439px){
  .suche{min-width:0}
  .suche input{width:96px}
  .nav{gap:clamp(14px,1.4vw,24px)}
}
@media (max-width:1260px){
  .nav,.suche{display:none}
  .burger{display:inline-flex}
}
@media (max-width:900px){
  :root{--fs-body:1.125rem}
  .kopf__zeile{grid-template-columns:auto 1fr auto;min-height:76px}
  .logo img{height:40px}
  .hero__grid{grid-template-columns:1fr}
  .hero__text{padding-bottom:36px}
  .hero h1{max-width:none}
  .hero__bild{min-height:420px;border-radius:var(--radius-l)}
  .leiste__grid{grid-template-columns:1fr 1fr}
  .leiste__item{padding:18px 16px 18px 0}
  .leiste__item + .leiste__item{padding-left:16px}
  .leiste__item:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--linie)}
  .leiste__item:nth-child(4){border-top:1px solid var(--linie)}
  .sek-kopf{grid-template-columns:1fr}
  .kacheln,.katalog .kacheln{grid-template-columns:repeat(2,1fr)}
  .warenarten{grid-template-columns:repeat(2,1fr)}
  .lieferaussage,.beratung,.seo-text{grid-template-columns:1fr}
  .drei{grid-template-columns:1fr}
  .hersteller{grid-template-columns:repeat(2,1fr)}
  .hersteller a:nth-child(2n){border-right:1px solid var(--linie)}
  .fuss__grid{grid-template-columns:1fr 1fr}
  .katalog{grid-template-columns:1fr}
  .filter{display:none}
  .filter.offen{display:grid;position:fixed;inset:0;z-index:120;background:var(--creme);padding:24px var(--gutter) 110px;overflow:auto;top:0}
  .filter.offen .filter-zu{position:fixed;left:var(--gutter);right:var(--gutter);bottom:20px;z-index:2}
  .filter-knopf{display:inline-flex}
}
@media (max-width:560px){
  .kopf__zeile{gap:16px}
  .logo img{height:36px}
  .fuss__grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .fuss__logo{grid-column:1/-1}
  .kacheln,.katalog .kacheln{grid-template-columns:1fr 1fr}
  .kachel__titel{font-size:1.3rem}
  .kachel__text{margin-top:20px;padding-top:18px}
  .kachel__text::after{width:36px;height:36px;top:-18px;background-size:18px 18px}
  .preis{font-size:1.25rem}
  .warenarten{grid-template-columns:1fr 1fr}
  .warenart{min-height:160px}
  .hero__aktionen .btn{width:100%}
  .stoerer__aktion .btn{width:100%}
  /* Punkt 1 (Runde 3): der Weg dahin wird kurz gehalten, die Karte schrumpft
     von 939 auf 883 px, ohne dass ein Wort gekuerzt wird. */
  .js .stoerer{padding:16px}
  .stoerer__karte .stoerer__titel{margin-bottom:12px}
  .stoerer__karte p{margin-bottom:22px}
  .stoerer__erklaerung{margin-top:18px;padding-top:16px}
  .stoerer__erklaerung p{margin-bottom:10px}
}
@media (pointer:coarse){.btn,.ikon-knopf,.chip{min-height:48px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------- Burgermenue, ab 13.09.2026 ----------
   Der Knopf war bis dahin ohne Funktion, siehe js/menue.js. Am Schreibtisch
   aendert sich nichts: oberhalb von 1260 Pixel greift keine dieser Regeln,
   dort steht das Menue wie bisher in der Kopfzeile. Der offene Zustand haengt
   allein an der Klasse menue-offen am Kopf, das Skript setzt nichts direkt am
   Stil. Steht ganz am Dateiende, weil es die Regel .nav{display:none} aus dem
   Media-Query bei 1260 Pixel ueberschreiben muss und bei gleicher Spezifitaet
   die spaetere Regel gewinnt. */
@media (max-width:1260px){
  .kopf.menue-offen #hauptmenue{
    position:absolute;left:0;right:0;top:100%;
    background:var(--creme);border-bottom:1px solid var(--linie);
    box-shadow:0 18px 40px rgba(48,48,48,.14);
    padding:14px var(--gutter) 22px;
    max-height:calc(100vh - 88px);overflow-y:auto;
  }
  .kopf.menue-offen .nav{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
  }
  /* Grosszuegige Trefferflaeche und eine Stufe groesser als in der Kopfzeile,
     das Menue wird mit dem Daumen bedient und von Lesern ab 40. */
  .kopf.menue-offen .nav li{width:100%;border-top:1px solid var(--linie)}
  .kopf.menue-offen .nav li:first-child{border-top:0}
  .kopf.menue-offen .nav a{display:block;padding:15px 2px;font-size:1.25rem;width:100%}
  /* Der Unterstrich der Kopfzeile ergibt in einer Liste keinen Sinn, die
     aktuelle Seite bekommt stattdessen die Markenfarbe. */
  .kopf.menue-offen .nav a::after{display:none}
  .kopf.menue-offen .nav a[aria-current]{color:var(--wein);font-weight:600}
}

/* Honigtopf beider Formulare, seit 22.09.2026 hier statt in produkt.css.
   Befund Checker Jody: die Regel stand allein im Stilblatt der
   Produktseite. Das Kontaktformular auf /kontakt laedt dieses Blatt
   heute mit, faellt es dort einmal weg, steht ein Feld namens Webseite
   sichtbar im Formular. Im Grundblatt kann das nicht passieren. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Lockfeld des Formular-Spamschutzes (firmenname_2), seit 14.10.2026. Bewusst
   anders gebaut als .honig, ohne -9999px, dieselbe Regel wie auf den vier
   anderen Seiten mit dem gemeinsamen Modul. */
.fld-x{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* 13.10.2026, Lea: bei 320 px stand der Menueknopf 8 px ueber dem rechten
   Rand und schob die Seite seitlich. Engere Abstaende nur fuer ganz schmale Telefone. */
@media (max-width:340px){
  .kopf__zeile{gap:8px}
  .werkzeuge{gap:0}
}
/* 13.10.2026, Lea: in der zweispaltigen Kachel ist die Spalte bei 360 px nur
   143 px breit, "ab 2.618,00 € brutto" braucht 157 px und lief in die Nachbarkachel,
   bei 320 px schob es die Seite um 12 px seitlich. Betrag und Euro bleiben ueber
   das geschuetzte Leerzeichen zusammen, umbrechen darf nur vor netto und brutto. */
@media (max-width:560px){
  .kachel__preise .preis,.kachel__preise .brutto{white-space:normal}
}