/*
 * Maßgardinen — Atelier Bogen
 *
 * Entwurf des Betreibers aus zwölf Vorschlägen: heller Leinengrund, Messing als
 * einziger Akzent, der Bogen als Marken-Motiv. Fraunces trägt die Überschriften,
 * Inter den Text.
 *
 * Die Woo-Eigenheiten am Ende sind keine Kosmetik — sie beheben Fehler, die in
 * den Schwestershops erst bei 150 % Schriftgröße auffielen.
 */

/* ------------------------------------------------------------- Schriften */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- Grundlage */

:root {
  --leinen: #FAF7F2;
  --karte: #FFFFFF;
  --tinte: #2D2A26;
  --taupe: #78716C;
  --linie: #EAE4DB;
  --messing: #B45309;
  --messing-hell: #F6EBDD;
  --messing-rand: #E7D5BC;
  --gruen: #1B6B58;
  --rot: #A4362B;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  --breite: 74rem;
  --rand: clamp(1rem, 4vw, 2rem);
  --rund: 14px;
}

/* WordPress und WooCommerce setzen das nicht durchgängig. Ohne diese Regel
   ist eine Tabellenzelle mit width:100% und Innenabstand breiter als das
   Fenster — die waagerechte Rollbewegung sieht man im Quelltext nicht. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--leinen);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Deutsche Komposita wie „Versicherungskennzeichen" brechen sonst nicht um. */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

a { color: var(--messing); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tinte); }

/* Zweifarbig, weil es helle und dunkle Flächen gibt — einfarbig verschwindet
   der Rahmen auf der jeweils gleichfarbigen Fläche. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .knopf:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--messing-hell);
  border-radius: 3px;
}

img { max-width: 100%; height: auto; }

.huelle { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.schmal { max-width: 44rem; }

/* ------------------------------------------------------------------- Kopf */

.kopfleiste {
  background: var(--tinte);
  color: var(--leinen);
  font-size: .85rem;
  text-align: center;
  padding: .5rem var(--rand);
  display: flex; justify-content: center; align-items: center;
  gap: .55rem; flex-wrap: wrap;
}
.kopfleiste-trenner { color: var(--messing-hell); opacity: .5; }
/* Auf schmalen Schirmen bleibt nur die Aussage, die verkauft. */
@media (max-width: 34rem) {
  .kopfleiste span:nth-child(n+2) { display: none; }
}

.site-kopf {
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--leinen) 88%, transparent);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
}
/* Ältere Browser ohne color-mix bekommen den vollen Grund — sonst stünde
   die Schrift über durchscheinenden Produktfotos. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .site-kopf { background: var(--leinen); }
}
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem; flex-wrap: wrap;
}

/* ------------------------------------------------------------------ Marke */

.mg-marke {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: 1.4rem; line-height: 1;
  text-decoration: none; color: var(--tinte);
  min-width: 0;
}
.mg-marke .mg-bogen { width: 1.55em; height: 1.55em; flex: none; }
.mg-marke .mg-bogen-mass { stroke: var(--messing); }
.mg-marke-wort {
  font-family: var(--serif); font-weight: 600;
  letter-spacing: -.015em; white-space: nowrap;
}
.mg-marke-tld { color: var(--messing); }

a.mg-marke:hover { color: var(--tinte); }
a.mg-marke:hover .mg-marke-wort { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* In der Fußzeile steht die Marke auf hellem Grund, aber kleiner. */
.site-fuss .mg-marke { font-size: 1.15rem; color: var(--tinte); }

/* Bei 150 % Schriftgröße auf einem 390-px-Gerät ist die Wortmarke breiter als
   das Fenster — mit `white-space: nowrap` schob sie die ganze Seite 35 px zur
   Seite. Auf schmalen Schirmen darf sie deshalb umbrechen und wird kleiner.
   Eine Marke, die in zwei Zeilen steht, ist besser als eine Seite, die sich
   waagerecht schieben lässt. */
@media (max-width: 30rem) {
  .mg-marke { font-size: 1.1rem; gap: .45em; }
  .mg-marke-wort { white-space: normal; }
}

/* ------------------------------------------------------- Sortimentsleiste */

.sortimentsleiste {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
}
.sortimentsleiste ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 1.5rem; align-items: center;
  /* Auf schmalen Geräten rollt die Leiste in sich selbst — nicht die Seite.
     Ein Menü, das umbricht, schiebt sonst den ganzen Inhalt nach unten. */
  overflow-x: auto; scrollbar-width: none;
  padding-block: .15rem;
}
.sortimentsleiste ul::-webkit-scrollbar { display: none; }
.sortimentsleiste li { flex: none; }
/* Die Zeile war 28 px hoch — für eine Fingerkuppe zu wenig. Der Innenabstand
   macht daraus ein Ziel von gut 44 px, ohne dass die Leiste höher aussieht. */
.sortimentsleiste a {
  color: var(--tinte); text-decoration: none; font-size: .95rem;
  white-space: nowrap;
  display: inline-block; padding-block: .55rem;
  border-bottom: 2px solid transparent;
}
.sortimentsleiste a:hover,
.sortimentsleiste .current-menu-item > a,
.sortimentsleiste .current-cat > a { color: var(--messing); border-bottom-color: var(--messing); }
.sortimentsleiste .nav-alle a { color: var(--messing); }

/* Am rechten Rand andeuten, dass die Leiste weitergeht. Ohne diesen Hinweis
   sieht ein abgeschnittener Eintrag wie ein Darstellungsfehler aus. */
@media (max-width: 62rem) {
  .sortimentsleiste { position: relative; }
  .sortimentsleiste::after {
    content: ""; position: absolute; right: 0; top: 0; bottom: 1px; width: 2.5rem;
    background: linear-gradient(90deg, transparent, var(--karte));
    pointer-events: none;
  }
}

.kopf-rechts { display: flex; align-items: center; gap: 1.25rem; }
.kopf-tel { font-size: .92rem; color: var(--taupe); text-decoration: none; white-space: nowrap; }
.kopf-tel strong { color: var(--tinte); font-variant-numeric: tabular-nums; }
.warenkorb-knopf { position: relative; color: var(--tinte); text-decoration: none; font-size: .95rem; }
.warenkorb-zahl {
  background: var(--messing); color: #fff; border-radius: 100vmax;
  font-size: .72rem; padding: .1rem .45rem; margin-left: .3rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- Startseite */

/* Leinenstruktur als Grund.
   Zwei sehr schwache Streifenmuster über Kreuz ergeben ein Gewebe. Es ist
   kaum zu sehen und genau deshalb richtig: Der Grund soll Stoff sein, nicht
   Tapete. Ein Bild dafür wären 40 kB und ein zweiter Request. */
body {
  background-image:
    repeating-linear-gradient(90deg, rgba(120,113,108,.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(120,113,108,.035) 0 1px, transparent 1px 4px);
}

/* Hier stand ein Einblendeffekt beim Scrollen über `animation-timeline: view()`.
   Er ist wieder raus, und zwar aus einem harten Grund: Der Ausgangszustand
   einer solchen Animation ist `opacity: 0`. Läuft sie aus irgendeinem Grund
   nicht an — Fenstergröße ändert sich, Browser rechnet den Bereich neu, eine
   Eigenheit im Zusammenspiel mit `position: sticky` —, bleibt der Inhalt
   unsichtbar. Beim Prüflauf ist genau das passiert: Sortiment, Beweisleiste
   und Musterband waren weiße Flächen. Ein Ladeneffekt, der im Zweifel den
   Laden verschwinden lässt, ist den Effekt nicht wert. Die Bewegung auf
   dieser Seite kommt jetzt aus der Bühne (zeitgesteuert, läuft immer zu Ende)
   und aus den Zeigerzuständen.

   Merksatz für später: Nichts, was Inhalt trägt, darf bei `opacity: 0`
   anfangen. */

.buehne { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.5rem); position: relative; overflow: hidden; }

/* Ein warmer Lichtschein hinter der Bühne — dieselbe Bogenform wie die
   Bildmarke, nur sehr groß und sehr blass. Er gibt der Seite oben Tiefe,
   ohne dass etwas darauf hinweist. */
.buehne::before {
  content: ""; position: absolute; z-index: -1;
  top: -12rem; right: -10%; width: min(46rem, 90%); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 45%, var(--messing-hell) 0%, transparent 62%);
  opacity: .8; pointer-events: none;
}

.buehne-innen {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 56rem) { .buehne-innen { grid-template-columns: 1.05fr 1fr; } }

.buehne-text > * { animation: auf .7s ease-out backwards; }
.buehne-text .augenbraue { animation-delay: .05s; }
.buehne-text h1 { animation-delay: .15s; }
.buehne-text .vorspann { animation-delay: .25s; }
.buehne-text .knopfreihe { animation-delay: .35s; }
.buehne-text .buehne-belege { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .buehne-text > * { animation: none; } }
@keyframes auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.augenbraue {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--messing); margin-bottom: 1rem;
}
.buehne h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.buehne h1 em { font-style: italic; color: var(--messing); display: block; }
.vorspann { font-size: 1.12rem; color: var(--taupe); max-width: 34rem; }

/* Die drei harten Angaben direkt unter dem Knopf. Wer bis hierhin gelesen
   hat, will wissen: Was kostet es, wie lange dauert es, was kommt oben drauf.
   Alles drei aus dem Katalog gerechnet. */
.buehne-belege {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  font-size: .93rem; color: var(--taupe);
}
.buehne-belege li { display: flex; align-items: center; gap: .5rem; }
.buehne-belege li::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--messing); flex: none;
}

.knopfreihe { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.knopfreihe.mittig { justify-content: center; }

.knopf {
  display: inline-block; background: var(--messing); color: #fff;
  padding: .85rem 1.6rem; border-radius: 100vmax; text-decoration: none;
  font-weight: 500; border: 1px solid var(--messing); cursor: pointer;
  font-family: var(--sans); font-size: 1rem; line-height: 1.4;
  box-shadow: 0 10px 20px -14px rgba(180, 83, 9, .9);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.knopf:hover { background: #92400E; border-color: #92400E; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 26px -16px rgba(180, 83, 9, .95); }
.knopf:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:hover { transform: none; } }

.knopf.gross { padding: 1rem 1.9rem; font-size: 1.05rem; }
.knopf.leise { background: transparent; color: var(--tinte); border-color: var(--tinte); box-shadow: none; }
.knopf.leise:hover { background: var(--tinte); color: var(--leinen); box-shadow: none; }
/* Für dunkle Flächen: heller Knopf auf dunklem Grund. */
.knopf.hell { background: var(--leinen); color: var(--tinte); border-color: var(--leinen); box-shadow: none; }
.knopf.hell:hover { background: #fff; border-color: #fff; color: var(--tinte); }

.unterknopf { display: inline-block; margin-top: .8rem; font-size: .95rem; }

/* Das Bogen-Motiv der Marke */
.buehne-bild { position: relative; }
.bogen {
  display: block;
  border-radius: 100vmax 100vmax var(--rund) var(--rund);
  overflow: hidden; background: var(--karte);
  border: 1px solid var(--linie);
  box-shadow: 0 30px 60px -40px rgba(45, 42, 38, .45);
  aspect-ratio: 3 / 4;
}
.bogen img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .bogen { animation: schweben 9s ease-in-out infinite; }
  @keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
}

/* Der Preiszettel am Bild.
   Bei Maßware steht nirgends ein Preis, den man begreift — „16 € je m²" sagt
   niemandem, was seine Gardine kostet. Eine ausgerechnete Bestellung sagt es
   sofort. Die Zahl kommt aus mg_preis_berechnen(), also aus derselben Formel
   wie der Konfigurator: zwei Rechenwege für einen Preis wären ein Fehler,
   den erst ein Kunde findet. */
.preiszettel {
  position: absolute; left: clamp(-1rem, -2vw, 0rem); bottom: 1.5rem;
  margin: 0; max-width: 15rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-left: 3px solid var(--messing);
  border-radius: 0 var(--rund) var(--rund) 0;
  padding: .9rem 1.1rem;
  box-shadow: 0 18px 40px -24px rgba(45, 42, 38, .55);
}
.preiszettel figcaption {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--messing); margin-bottom: .35rem;
}
.preiszettel-mass { margin: 0; font-size: .87rem; color: var(--taupe); }
.preiszettel-preis {
  margin: .1rem 0 .15rem; font-family: var(--serif); font-size: 1.75rem;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.preiszettel-fuss { margin: 0; font-size: .76rem; color: var(--taupe); }

/* Unter 56rem liegt das Bild über dem Text; ein überlappender Zettel würde
   dort den Bildrand verlassen. Er wandert deshalb unter das Bild. */
@media (max-width: 56rem) {
  .preiszettel {
    position: static; max-width: none; margin-top: -1.5rem;
    margin-inline: auto; width: min(22rem, 100%);
    border-radius: var(--rund); border-left-width: 3px;
    position: relative; z-index: 2;
  }
}

/* Heftstich-Linie als Trenner */
.stich { border: 0; border-top: 1px dashed var(--linie); margin-block: clamp(2.5rem, 6vw, 4rem); }

.abschnitt { padding-block: clamp(2rem, 5vw, 3.5rem); }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.abschnitt-vor { color: var(--taupe); margin: .35rem 0 0; max-width: 42rem; }
.weiter { white-space: nowrap; text-decoration: none; font-size: .95rem; }
.weiter:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------- Beweisleiste */

.beleg-band {
  background: var(--karte);
  border-block: 1px solid var(--linie);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
}
.beleg-raster {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.beleg { min-width: 0; }
.beleg-symbol { width: 1.9rem; height: 1.9rem; color: var(--messing); display: block; margin-bottom: .55rem; }
.beleg strong { display: block; font-family: var(--serif); font-size: 1.05rem; margin-bottom: .15rem; }
.beleg span { font-size: .92rem; color: var(--taupe); }

/* Kategorien mit Ziffern — hier trägt die Nummer Information: sie ordnet
   das Sortiment für den, der zum ersten Mal hier ist. */
/* 18rem statt 16rem: Bei sechs Kacheln ergibt das auf dem Schreibtisch drei
   Spalten in zwei vollen Reihen. Mit vier Spalten blieben in der zweiten
   Reihe zwei Lücken stehen — das sieht aus, als fehle Sortiment. */
.kategorien { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.kategorie-kachel {
  position: relative; display: block; text-decoration: none; color: var(--tinte);
  border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden;
  background: var(--karte); min-width: 0; aspect-ratio: 4 / 3; isolation: isolate;
}
.kachel-bild { position: absolute; inset: 0; display: block; overflow: hidden; }
.kategorie-kachel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.kategorie-kachel:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .kategorie-kachel img { transition: none; } .kategorie-kachel:hover img { transform: none; } }

/* Der alte Verlauf setzte erst bei 40 % ein und war unten bei 72 % Deckung —
   auf hellen Stoffbildern (und das sind fast alle) stand weiße Schrift damit
   auf weißem Grund. Jetzt beginnt er früher, deckt unten voll und legt eine
   Grundtönung über das ganze Bild. Lesbarkeit vor Bildwirkung. */
.kategorie-kachel .verlauf {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(45,42,38,.30) 0%, rgba(45,42,38,.05) 35%, rgba(45,42,38,.78) 78%, rgba(45,42,38,.92) 100%);
}
.kategorie-kachel .ziffer {
  position: absolute; top: .8rem; left: .9rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: .95rem;
  color: var(--leinen); background: rgba(45,42,38,.55);
  border: 1px solid rgba(250,247,242,.35);
  backdrop-filter: blur(2px);
}
.kategorie-kachel .beschriftung { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; color: #fff; }
/* Deutsche Komposita sind lang: „Verdunkelungsvorhänge" brach ohne Trennung
   mitten im Wort um („Verdunkelungsvorhäng / e"). `hyphens` greift, weil
   WordPress am <html> `lang="de-DE"` setzt — ohne Sprachangabe weiß der
   Browser nicht, wo er trennen darf, und tut es gar nicht. */
.kategorie-kachel .beschriftung strong {
  display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
  line-height: 1.2; text-wrap: balance;
  hyphens: auto; overflow-wrap: normal;
}
.kategorie-kachel .beschriftung span { font-size: .87rem; opacity: .88; }
.kategorie-kachel:hover .beschriftung strong { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- Näherei */

.naeherei {
  background: var(--tinte); color: var(--leinen);
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
  margin-block: clamp(2rem, 5vw, 3.5rem);
  position: relative; overflow: hidden;
}
/* Dieselbe Leinenstruktur wie der Seitengrund, nur hell auf dunkel. */
.naeherei::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(250,247,242,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,  rgba(250,247,242,.04) 0 1px, transparent 1px 4px);
}
.naeherei-innen {
  position: relative;
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 56rem) { .naeherei-innen { grid-template-columns: 1.5fr 1fr; } }
.naeherei h2 { color: var(--leinen); max-width: 30ch; }
.naeherei p { color: rgba(250,247,242,.82); }
.naeherei .augenbraue { color: var(--messing-rand); }

.naeherei-karte {
  background: rgba(250,247,242,.06);
  border: 1px solid rgba(250,247,242,.16);
  border-radius: var(--rund);
  padding: 1.5rem;
}
.naeherei-karte hr { border: 0; border-top: 1px dashed rgba(250,247,242,.22); margin: 1.25rem 0; }
.karte-zahl {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  margin: 0 0 .4rem; color: var(--messing-rand);
  font-variant-numeric: tabular-nums;
}
.karte-text { margin: 0; font-size: .93rem; color: rgba(250,247,242,.78); }

/* Hakenliste — der Haken ist gezeichnet, kein Zeichen aus der Schrift.
   Emoji werden je nach Gerät bunt und springen dann aus dem Farbklang. */
.hakenliste { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; }
.hakenliste li { position: relative; padding-left: 1.9rem; }
.hakenliste li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.1rem; height: .6rem;
  border-left: 2px solid var(--messing); border-bottom: 2px solid var(--messing);
  transform: rotate(-45deg); transform-origin: center;
}
.naeherei .hakenliste li::before { border-color: var(--messing-rand); }
.hakenliste strong { font-weight: 600; }

/* Drei Schritte */
.schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  container-type: inline-size;
}
.schritt { min-width: 0; position: relative; }

/* Verbindungslinie zwischen den Schritten — eine gestrichelte Naht. Sie reicht
   über den Spaltenabstand hinweg zum nächsten Schritt.
   Das darf nur passieren, wenn alle drei Schritte tatsächlich nebeneinander
   stehen. Bricht das Raster auf zwei Spalten um, hängt die Linie des zweiten
   Schritts im Nichts — und schiebt die Seite 9 px zur Seite (gemessen bei
   820 px und 150 % Schrift).
   Deshalb eine Behälterabfrage statt einer Fensterabfrage: Sie misst die
   Breite, die das Raster wirklich hat, und rechnet dabei die vergrößerte
   Schrift mit. Kann der Browser das nicht, entfällt die Linie — das ist der
   richtige Rückfall, sie ist Schmuck. */
@container (min-width: 48rem) {
  .schritt:not(:last-child)::after {
    content: ""; position: absolute; top: 1.1rem; left: 2.8rem; right: -1.75rem;
    border-top: 1px dashed var(--messing-rand);
  }
}
.schritt .nr {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--messing-hell); color: var(--messing); border: 1px solid var(--messing-rand);
  display: grid; place-items: center; font-family: var(--serif); margin-bottom: .8rem;
  position: relative; z-index: 1;
}
.schritt h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.schritt p { color: var(--taupe); font-size: .96rem; margin: 0; }

.merksatz {
  background: var(--messing-hell); border-left: 3px solid var(--messing);
  padding: 1.1rem 1.4rem; border-radius: 0 var(--rund) var(--rund) 0;
  font-size: .97rem; margin-top: 2rem;
}

/* ---------------------------------------------------------- Für Angehörige */

.angehoerige {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  position: relative; overflow: hidden;
}
/* Ein Bogen als Wasserzeichen — das Markenzeichen, groß und blass, damit die
   rechte Hälfte des Kastens nicht leer steht.
   Angeschnitten sah er wie ein Haken aus, nicht wie ein Bogen; er steht
   deshalb vollständig im Kasten. Unterhalb von 62rem liegt der Text über der
   ganzen Breite — dann ist er im Weg und verschwindet. */
.angehoerige::before {
  content: ""; position: absolute; right: 2rem; top: 2.5rem;
  width: 14rem; height: 15rem; pointer-events: none;
  border: 1.6rem solid var(--messing-hell);
  border-radius: 100vmax 100vmax .5rem .5rem;
  border-bottom: 0; opacity: .75;
}
@media (max-width: 62rem) { .angehoerige::before { display: none; } }
.angehoerige-text { position: relative; max-width: 46rem; }
.angehoerige h2 { max-width: 22ch; }
.angehoerige .hakenliste li { padding-left: 2rem; }

/* ------------------------------------------------------------- Musterband */

.musterband {
  background: var(--tinte); color: var(--leinen);
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
  margin-block: clamp(2rem, 5vw, 3.5rem);
}
.musterband-innen {
  display: grid; gap: 1.75rem;
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 52rem) { .musterband-innen { grid-template-columns: 1.7fr 1fr; } }
.musterband h2 { color: var(--leinen); margin-bottom: .6rem; max-width: 24ch; }
.musterband p { color: rgba(250,247,242,.82); margin-bottom: .6rem; }
.musterband-klein { font-size: .9rem; color: rgba(250,247,242,.6) !important; margin: 0 !important; }
.musterband-tat { text-align: left; }
@media (min-width: 52rem) { .musterband-tat { text-align: right; } }
.musterband .unterknopf { color: var(--messing-rand); display: block; }

/* --------------------------------------------------------------- Abschluss */

.abschluss { padding-block: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.abschluss-innen { max-width: 40rem; margin-inline: auto; }
.abschluss .mg-bogen { width: 2.6rem; height: 2.6rem; color: var(--tinte); margin-bottom: .75rem; }
.abschluss .mg-bogen-mass { stroke: var(--messing); }
.abschluss p { color: var(--taupe); }
.abschluss-klein { font-size: .87rem; margin-top: 1.5rem; }

/* Die Fragen auf der Startseite stehen ohne Kasten, damit der Abschnitt
   nicht wie ein Nachtrag wirkt. */
.start-fragen { max-width: 48rem; }

/* ------------------------------------------------------------ Produktlisten */

/* Woo rechnet in ul.products mit festen Prozentbreiten und Floats — das bricht
   auf, sobald die Schrift größer wird. Raster statt Float. */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important;
  min-width: 0; text-align: left; display: flex; flex-direction: column;
}
.woocommerce ul.products li.product a img,
ul.products li.product img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--rund); border: 1px solid var(--linie);
  background: var(--karte); margin-bottom: .75rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  line-height: 1.3; margin: 0 0 .25rem; padding: 0;
}
/* Auf der Startseite umschließt ein Verweis Bild und Titel gemeinsam — die
   ganze obere Hälfte der Kachel ist damit anklickbar, nicht nur die
   Textzeile. Auf dem Telefon ist das der Unterschied zwischen treffen und
   danebentippen. */
.kachel-verweis { display: block; text-decoration: none; color: var(--tinte); }
.kachel-verweis img { transition: box-shadow .25s ease, transform .25s ease; }
.kachel-verweis:hover img { box-shadow: 0 18px 32px -24px rgba(45, 42, 38, .7); transform: translateY(-3px); }
.kachel-verweis:hover .woocommerce-loop-product__title { color: var(--messing); }
@media (prefers-reduced-motion: reduce) {
  .kachel-verweis img { transition: none; }
  .kachel-verweis:hover img { transform: none; }
}

ul.products li.product .preis-zeile { margin-top: auto; }
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  color: var(--tinte); font-size: 1rem; font-weight: 500; display: block; margin-top: .3rem;
}
.woocommerce ul.products li.product .price del { color: var(--taupe); font-weight: 400; }
ul.products li.product .zusatz { font-size: .87rem; color: var(--taupe); display: block; }

/* Der eigene Sale-Hinweis reicht; der von Woo doppelt ihn. */
.woocommerce span.onsale { display: none; }

/* „In den Warenkorb" in Listen führt bei Maßware in die Irre — dort wird
   konfiguriert, nicht gekauft. */
.woocommerce ul.products li.product .button { display: none; }
ul.products li.product .konfig-hinweis {
  display: inline-block; margin-top: .4rem; font-size: .9rem; color: var(--messing); text-decoration: none;
}
ul.products li.product .konfig-hinweis:hover { text-decoration: underline; }

.woocommerce-result-count { color: var(--taupe); font-size: .92rem; }
.woocommerce-ordering select { padding: .5rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--karte); font: inherit; }

.kategorie-kopf { padding-block: 2.5rem 1.5rem; }
.kategorie-kopf .einstieg { color: var(--taupe); max-width: 40rem; }

/* -------------------------------------------------------- Einzelprodukt */

.woocommerce div.product { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; padding-block: 2rem; }
@media (min-width: 56rem) { .woocommerce div.product { grid-template-columns: 1fr 1fr; align-items: start; } }
.woocommerce div.product .woocommerce-product-gallery { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce div.product div.summary { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }

/* Woo zwingt Galeriebilder auf 25 % Breite. */
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100% !important; height: auto !important; border-radius: var(--rund); }
.woocommerce div.product .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.woocommerce div.product .flex-control-thumbs li { width: auto !important; margin: 0 !important; float: none !important; }
.woocommerce div.product .flex-control-thumbs img { border-radius: 8px; border: 1px solid var(--linie); opacity: .75; }
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--messing); }

.woocommerce div.product .product_title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.woocommerce div.product p.price { font-family: var(--serif); font-size: 1.8rem; color: var(--tinte); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--taupe); }

.woocommerce-breadcrumb { font-size: .88rem; color: var(--taupe); padding-block: 1rem 0; }
.woocommerce-breadcrumb a { color: var(--taupe); }

/* Woo gibt dem Auswahlfeld zusätzlich zu width:100% noch margin-right:1em —
   das ergibt 403 px im 390-px-Fenster. */
.woocommerce div.product form.cart .variations { display: block; width: 100%; }
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { display: block; width: 100%; padding: 0; border: 0; }
.woocommerce div.product form.cart .variations select { width: 100% !important; margin-right: 0 !important; max-width: 100%; }

.woocommerce-tabs ul.tabs { list-style: none; padding: 0; display: flex; gap: 1.5rem; border-bottom: 1px solid var(--linie); margin: 0 0 1.5rem; }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs a { text-decoration: none; color: var(--taupe); padding-bottom: .6rem; display: inline-block; }
.woocommerce-tabs ul.tabs li.active a { color: var(--tinte); border-bottom: 2px solid var(--messing); }

/* ------------------------------------------------------ Warenkorb und Kasse */

.woocommerce table.shop_table { border: 1px solid var(--linie); border-radius: var(--rund); border-collapse: separate; border-spacing: 0; width: 100%; }
.woocommerce table.shop_table th { font-family: var(--sans); font-weight: 600; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-top: 1px solid var(--linie); padding: .85rem; }
.woocommerce table.shop_table tr:first-child td, .woocommerce table.shop_table tr:first-child th { border-top: 0; }
.woocommerce-cart table.cart img { width: 68px; border-radius: 8px; }

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--messing); color: #fff; border-radius: 100vmax;
  padding: .85rem 1.6rem; font-family: var(--sans); font-weight: 500; font-size: 1rem;
  border: 1px solid var(--messing); line-height: 1.4;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce button.button.alt:hover { background: #92400E; border-color: #92400E; color: #fff; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single {
  padding: .7rem .8rem; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--karte); font: inherit; width: 100%;
}
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info {
  background: var(--messing-hell); border-top-color: var(--messing); color: var(--tinte);
}
.woocommerce .woocommerce-error { background: #FDF2F1; border-top-color: var(--rot); }

/* Die Maße gehören im Warenkorb deutlich sichtbar — hier fällt ein
   Zahlendreher noch auf, später kostet er eine Neuanfertigung. */
.woocommerce table.shop_table .variation,
.woocommerce table.shop_table dl.variation { margin: .4rem 0 0; font-size: .9rem; }
.woocommerce table.shop_table dl.variation dt { color: var(--taupe); font-weight: 400; float: left; clear: left; margin-right: .35rem; }
.woocommerce table.shop_table dl.variation dd { margin: 0; }
.woocommerce table.shop_table dl.variation dd p { margin: 0; }

/* ------------------------------------------------------------------ Fuß */

.site-fuss { border-top: 1px solid var(--linie); margin-top: clamp(3rem, 8vw, 5rem); padding-block: 3rem 3.5rem; font-size: .93rem; color: var(--taupe); }
.fuss-satz { margin-top: .85rem; }
.fuss-raster { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.fuss-raster h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); margin-bottom: .8rem; }
.fuss-raster ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.fuss-raster a { color: var(--taupe); text-decoration: none; }
.fuss-raster a:hover { color: var(--messing); text-decoration: underline; }
.fuss-schluss { border-top: 1px solid var(--linie); margin-top: 2rem; padding-top: 1.25rem; font-size: .85rem; }

/* --------------------------------------------------------- Kleinigkeiten */

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.zum-inhalt { position: absolute; left: -9999px; }
.zum-inhalt:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--karte); padding: .75rem 1rem; border-radius: 6px; }

@media (max-width: 44rem) {
  .sortimentsleiste ul { gap: 1.1rem; }
  /* Vorher verschwand die Rufnummer auf schmalen Geräten ganz. Das war
     verkehrt herum gedacht: Genau dort ist sie ein Knopf, der wählt — und
     für die ältere Kundschaft und für Angehörige, die für andere bestellen,
     der wichtigste Weg zu uns. Es verschwindet nur das Wort davor. */
  .kopf-tel .tel-wort { display: none; }
  .kopf-tel { font-size: .88rem; }
}
@media (max-width: 30rem) {
  .kopf-innen { gap: .5rem .75rem; }
  .warenkorb-knopf { font-size: .88rem; }
}

/* --------------------------------------------------------- Maß-Konfigurator */

.mg-konfigurator {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: clamp(1.1rem, 3vw, 1.6rem);
  margin-bottom: 1.25rem;
}

.mg-preisanzeige { margin-bottom: 1.25rem; }
.mg-preis {
  display: block; font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.mg-preis-detail { display: block; font-size: .9rem; color: var(--taupe); margin-top: .2rem; }

.mg-feld-gruppe { border: 0; padding: 0; margin: 0; }
.mg-feld-gruppe legend {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--taupe); padding: 0; margin-bottom: .6rem;
}

.mg-felder { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
.mg-felder label { display: block; position: relative; min-width: 0; }
.mg-felder label > span { display: block; font-size: .92rem; margin-bottom: .3rem; }
.mg-felder label small { color: var(--taupe); font-weight: 400; }
.mg-felder input {
  width: 100%; padding: .8rem 2.6rem .8rem .8rem;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--leinen);
  font: inherit; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.mg-felder input::-webkit-outer-spin-button,
.mg-felder input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mg-felder input:focus { border-color: var(--messing); background: var(--karte); }
.mg-felder label em {
  position: absolute; right: .8rem; bottom: .95rem;
  font-style: normal; color: var(--taupe); font-size: .95rem; pointer-events: none;
}

.mg-warnung {
  background: var(--messing-hell); border: 1px solid var(--messing-rand);
  border-radius: 8px; padding: .75rem .9rem; margin: .8rem 0 0;
  font-size: .93rem; color: var(--tinte);
}

.mg-hinweis {
  margin-top: .9rem; font-size: .92rem; color: var(--taupe);
  border-left: 3px solid var(--messing); padding-left: .8rem;
}
.mg-hinweis strong { color: var(--tinte); display: block; }

.mg-rechner { margin-top: 1rem; border-top: 1px dashed var(--linie); padding-top: .9rem; }
.mg-rechner summary { cursor: pointer; color: var(--messing); font-size: .94rem; }
.mg-rechner summary::marker { color: var(--messing); }
.mg-rechner-innen { display: grid; gap: .75rem; margin-top: .9rem; }
.mg-rechner-innen label { display: block; position: relative; }
.mg-rechner-innen label > span { display: block; font-size: .9rem; margin-bottom: .25rem; }
.mg-rechner-innen input, .mg-rechner-innen select {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--leinen); font: inherit;
}
.mg-rechner-innen label em {
  position: absolute; right: .75rem; bottom: .75rem; font-style: normal;
  color: var(--taupe); font-size: .9rem; pointer-events: none;
}
.mg-rechner-ergebnis { margin: 0; font-size: .93rem; color: var(--tinte); }
.mg-rechner-innen .knopf { justify-self: start; padding: .6rem 1.1rem; font-size: .93rem; }

.mg-vorschau {
  margin: 1.25rem 0 0; padding: 1rem; background: var(--messing-hell);
  border: 1px solid var(--messing-rand); border-radius: var(--rund);
}
.mg-vorschau-buehne { display: flex; justify-content: center; }
.mg-vorschau svg { max-width: 100%; height: auto; }
.mg-vorschau figcaption { font-size: .88rem; color: var(--taupe); margin-top: .7rem; text-align: center; }

.mg-rechtshinweis {
  font-size: .87rem; color: var(--taupe);
  border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .5rem;
}

.mg-qm-preis small { color: var(--taupe); font-size: .82rem; font-weight: 400; }
.ab-preis { font-weight: 500; }

/* Letzte Kontrolle in der Kasse */
.mg-masspruefung {
  background: var(--messing-hell); border: 1px solid var(--messing-rand);
  border-radius: var(--rund); padding: 1.1rem 1.3rem; margin-bottom: 1.25rem;
}
.mg-masspruefung strong { display: block; margin-bottom: .5rem; }
.mg-masspruefung ul { margin: 0 0 .6rem; padding-left: 1.1rem; }
.mg-masspruefung li { font-variant-numeric: tabular-nums; }
.mg-masspruefung p { margin: 0; font-size: .9rem; color: var(--taupe); }

.mg-masse-zeile { font-size: .9rem; color: var(--taupe); margin: .3rem 0 0; }
.mg-masse-zeile strong { color: var(--tinte); font-weight: 500; }

/* ------------------------------------------- Vertrauen und Fragen vor dem Kauf */

.mg-versprechen {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: .8rem;
  border-top: 1px solid var(--linie); padding-top: 1.1rem;
}
.mg-versprechen li { display: grid; gap: .1rem; }
.mg-versprechen strong { font-size: .96rem; }
.mg-versprechen span { font-size: .88rem; color: var(--taupe); }
.mg-versprechen a { color: var(--messing); }

.mg-muster {
  margin-top: 1.25rem; padding: 1.15rem 1.35rem;
  background: var(--messing-hell); border: 1px solid var(--messing-rand);
  border-radius: var(--rund);
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  justify-content: space-between;
}
.mg-muster strong { display: block; font-family: var(--serif); font-size: 1.05rem; }
.mg-muster p { margin: .2rem 0 0; font-size: .9rem; color: var(--taupe); max-width: 28rem; }
.mg-muster .knopf { flex-shrink: 0; padding: .7rem 1.3rem; font-size: .95rem; }

.mg-fragen { margin: 3rem 0 0; }
.mg-fragen h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 1.25rem; }

/* Die Regeln hängen an der Liste, nicht am Abschnitt: Dieselbe Liste steht
   auch auf der Startseite, dort ohne den Rahmen `.mg-fragen`. */
.mg-fragen-liste { max-width: 46rem; border-top: 1px solid var(--linie); }
.mg-fragen-liste details { border-bottom: 1px solid var(--linie); }
.mg-fragen-liste summary {
  cursor: pointer; padding: 1rem 2rem 1rem 0; position: relative;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
  list-style: none;
}
.mg-fragen-liste summary::-webkit-details-marker { display: none; }
.mg-fragen-liste summary::after {
  content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  color: var(--messing); font-family: var(--sans); font-size: 1.3rem; font-weight: 400;
}
.mg-fragen-liste details[open] summary::after { content: "–"; }
.mg-fragen-liste summary:hover { color: var(--messing); }
.mg-fragen-liste details p {
  margin: 0 0 1.1rem; color: var(--taupe); max-width: 42rem;
  padding-right: 2rem;
}
.mg-fragen-schluss { margin-top: 1.5rem; font-size: .93rem; color: var(--taupe); }

@media (max-width: 34rem) {
  .mg-muster { flex-direction: column; align-items: stretch; }
  .mg-muster .knopf { text-align: center; }
}

/* Woo setzt Mengenfeld und Kaufknopf nebeneinander in einen Fließ-Kontext.
   Ohne clear landen die Blöcke danach in der Restspalte neben dem Knopf und
   werden auf wenige Zentimeter zusammengequetscht. */
.woocommerce div.product form.cart { display: block; }
.woocommerce div.product form.cart::after { content: ""; display: table; clear: both; }
.woocommerce div.product form.cart .quantity { float: left; margin-right: .6rem; }
.woocommerce div.product form.cart .single_add_to_cart_button { float: left; }
.mg-versprechen, .mg-muster, .mg-rechtshinweis { clear: both; width: 100%; }
.mg-versprechen { margin-top: 1.5rem; }

/* Der Altbestand enthielt Bilder vom inzwischen abgeschalteten Server. Beim
   Aufräumen bleiben leere Hüllen zurück, die als weiße Löcher im Text stehen. */
.woocommerce-Tabs-panel p:empty,
.woocommerce-Tabs-panel div:empty,
.woocommerce-Tabs-panel figure:empty,
.woocommerce-product-details__short-description p:empty { display: none; }
.woocommerce-Tabs-panel p > br:only-child { display: none; }

/* Der Flexslider legt alle Bilder in einer einzigen sehr breiten Reihe ab
   (bei fünf Bildern über 4.000 px) und schreibt Inline-Breiten, die das
   Fenster übersteigen. Sichtbar wird das nur als waagerechte Rollbewegung —
   im Quelltext sieht man nichts davon. */
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .flex-viewport {
  max-width: 100% !important;
  overflow: hidden;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { max-width: 100%; }
.woocommerce div.product .woocommerce-product-gallery__image { max-width: 100%; }
.woocommerce div.product .woocommerce-product-gallery img { max-width: 100%; }
/* Die Lupe sitzt sonst außerhalb des Bildes. */
.woocommerce div.product .woocommerce-product-gallery__trigger { right: .75rem; top: .75rem; }

/* Ein Grid-Kind ist standardmäßig mindestens so breit wie sein Inhalt. Die
   4.000-px-Bilderreihe dehnt damit die ganze Spalte, egal welche max-width
   darin steht. min-width:0 hebt das auf — ohne diese eine Zeile hilft nichts
   anderes. */
.woocommerce div.product > * { min-width: 0; }

/* Stoffmerkmale auf einen Blick, direkt unter der Kurzbeschreibung */
.mg-merkmale {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.5rem;
  margin: 1.25rem 0; padding: 1rem 0;
  border-block: 1px solid var(--linie); font-size: .94rem;
}
.mg-merkmale dt { color: var(--taupe); }
.mg-merkmale dd { margin: 0; }
@media (max-width: 30rem) {
  .mg-merkmale { grid-template-columns: 1fr; gap: .1rem; }
  .mg-merkmale dt { margin-top: .6rem; }
}

/* Datentabellen in Produktbeschreibungen: zweispaltig, Beschriftung links,
   damit die Werte eine gemeinsame Kante haben. */
.woocommerce-Tabs-panel--description table { border-collapse: collapse; margin: 1.25rem 0; }
.woocommerce-Tabs-panel--description table th[scope="row"] {
  text-align: left; font-weight: 500; color: var(--taupe);
  padding: .5rem 1.5rem .5rem 0; vertical-align: top;
}
/* Bei großer Schrift auf schmalen Schirmen untereinander statt nebeneinander —
   zwei Spalten mit langen Beschriftungen sprengen sonst das Fenster. */
@media (max-width: 34rem) {
  .woocommerce-Tabs-panel--description table,
  .woocommerce-Tabs-panel--description table tbody,
  .woocommerce-Tabs-panel--description table tr,
  .woocommerce-Tabs-panel--description table th[scope="row"],
  .woocommerce-Tabs-panel--description table td { display: block; width: 100%; }
  .woocommerce-Tabs-panel--description table th[scope="row"] { padding-bottom: 0; }
  .woocommerce-Tabs-panel--description table tr + tr th { padding-top: .6rem; }
  .woocommerce-Tabs-panel--description table tr + tr td { border-top: 0; }
}
.woocommerce-Tabs-panel--description table td { padding: .5rem 0; }
.woocommerce-Tabs-panel--description table tr + tr th,
.woocommerce-Tabs-panel--description table tr + tr td { border-top: 1px solid var(--linie); }
.woocommerce-Tabs-panel--description h2 { margin-top: 2rem; }
.woocommerce-Tabs-panel--description h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li { max-width: 42rem; }