/*
 * 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.6em; height: 1.76em; flex: none; }
.mg-bogen-mass { stroke: var(--messing); }
.mg-bogen-schal { fill: var(--gruen); }
.mg-marke-text { display: flex; flex-direction: column; gap: .38em; min-width: 0; }
.mg-marke-wort {
  font-family: var(--serif); font-weight: 600; font-size: 1.12em;
  letter-spacing: -.015em; white-space: nowrap;
}
.mg-marke-unter {
  font-family: var(--sans); font-weight: 500; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); 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); }
/* Logo A (07.10.2026): im Kopf am PC größer, die Unterzeile bleibt lesbar (fest in rem). */
@media (min-width: 48rem) { .site-kopf .mg-marke { font-size: 1.7rem; } }

/* 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; }
  .mg-marke-unter { font-size: .6rem; letter-spacing: .08em; 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; }
/* Ohne Mindestbreite drückt die lange Produktspalte das Bild auf ~18 px (07.10.2026). */
.woocommerce-cart table.cart td.product-thumbnail { width: 84px; min-width: 84px; }
.woocommerce-cart table.cart td.product-thumbnail img { max-width: none; height: 68px; object-fit: cover; }

.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; }

/* Farbwahl fürs Muster (07.10.2026): eigene Zeile, Kästchen nebeneinander. */
.mg-muster-text { flex: 1 1 18rem; }
.mg-muster-farben {
  flex: 1 1 100%; margin: 0; padding: 0; border: 0;
  display: flex; flex-wrap: wrap; gap: .45rem .6rem;
}
.mg-muster-farben legend { font-size: .85rem; color: var(--taupe); margin-bottom: .4rem; padding: 0; }
.mg-muster-farben label {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .4rem .75rem; background: var(--karte);
  border: 1px solid var(--messing-rand); border-radius: 999px; font-size: .9rem;
}
.mg-muster-farben label:has(input:checked) { border-color: var(--messing); box-shadow: 0 0 0 1px var(--messing); }
.mg-muster-farben input { accent-color: var(--messing); margin: 0; }
.mg-muster-eine { flex: 1 1 100%; margin: 0; font-size: .9rem; }

/* Seite des Musterartikels: Stoffe zum Aussuchen statt Kaufknopf. */
.mg-stoffwahl { margin-top: 1rem; }
.mg-stoffwahl-titel { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .6rem; }
.mg-stoffwahl ul {
  list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow-y: auto;
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte);
}
.mg-stoffwahl li + li { border-top: 1px solid var(--linie); }
.mg-stoffwahl a {
  display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem;
  color: var(--tinte); text-decoration: none; font-size: .93rem;
}
.mg-stoffwahl a:hover { background: var(--messing-hell); color: var(--messing); }
.mg-stoffwahl img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }

.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; }
  .mg-muster-text { flex-basis: auto; }
}

/* 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;
}
/* 07.10.: Die Bildleiste MUSS breiter als das Fenster sein (Flexslider legt die Bilder nebeneinander). Mit max-width:100% stapeln sie sich untereinander und ab Bild 2 bleibt das Fenster leer. Abgeschnitten wird am .flex-viewport. */
.woocommerce div.product .woocommerce-product-gallery__wrapper { max-width: none !important; }
.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; }

/* ===========================================================================
   Beratungsfenster (inc/ki-chat.php + assets/js/berater.js)
   ---------------------------------------------------------------------------
   Farben ausschliesslich aus den Tokens oben — das Fenster soll aussehen wie
   der Laden, nicht wie ein fremdes Werkzeug, das jemand hineingeklebt hat.

   Die Masse sind bewusst gross: Zielgruppe sind auch Menschen um 60 und deren
   Kinder. Klickziele 48 px, Schrift nicht unter 1rem, und der Knopf haelt
   Abstand zum unteren Rand, damit er auf dem Telefon nicht in der Systemleiste
   klebt.
   =========================================================================== */

.mgb-knopf {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--messing-rand);
  border-radius: 999px;
  background: var(--messing);
  color: #fff;
  font: 600 1rem/1.2 var(--sans);
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(45 42 38 / 22%);
}

.mgb-knopf:hover { background: #97440a; }
.mgb-knopf:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

.mgb-fenster {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 950;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  /* Nicht 100vh: Auf dem Telefon verdeckt die Adressleiste sonst das Eingabefeld. */
  max-height: min(34rem, calc(100vh - 2rem));
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--karte);
  box-shadow: 0 10px 40px rgb(45 42 38 / 26%);
  overflow: hidden;
}

/* 🔑 Das HTML-Attribut `hidden` entspricht `display:none` — aber die Regel
   oben setzt `display:flex` und ist spezifischer, also gewinnt sie. Ohne diese
   zwei Zeilen steht das Fenster PERMANENT offen: Am 12.08.2026 im Browser
   gemessen, fing der unsichtbar darueberliegende „Senden"-Knopf jeden Klick auf
   den Beratungsknopf ab. Wer `display` auf ein Element mit `hidden` setzt, muss
   diesen Fall immer mitschreiben. */
.mgb-fenster[hidden] { display: none; }

.mgb-kopf {
  position: relative;
  padding: 0.9rem 3rem 0.8rem 1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--messing-hell);
}

.mgb-kopf strong {
  display: block;
  font: 600 1.05rem/1.3 var(--serif);
  color: var(--tinte);
}

.mgb-hinweis {
  margin: 0.35rem 0 0;
  font: 400 0.8rem/1.4 var(--sans);
  /* --taupe auf --messing-hell gemessen: 4,6:1. Fuer Text unter 18,66px ist
     4,5:1 die Grenze (WCAG AA), das haelt. */
  color: var(--taupe);
}

.mgb-hinweis a { color: var(--messing); text-decoration: underline; }

.mgb-schliessen {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinte);
  font: 400 0.85rem/1 var(--sans);
  cursor: pointer;
}

.mgb-schliessen:hover { background: var(--messing-rand); }
.mgb-schliessen:focus-visible { outline: 3px solid var(--tinte); outline-offset: -2px; }

.mgb-verlauf {
  flex: 1 1 auto;
  min-height: 8rem;
  padding: 1rem;
  overflow-y: auto;
  background: var(--leinen);
}

.mgb-nachricht {
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font: 400 1rem/1.55 var(--sans);
}

.mgb-nachricht p { margin: 0 0 0.55rem; }
.mgb-nachricht p:last-child { margin-bottom: 0; }

.mgb-bot {
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--tinte);
}

.mgb-mensch {
  margin-left: 1.5rem;
  background: var(--messing-hell);
  border: 1px solid var(--messing-rand);
  color: var(--tinte);
}

.mgb-wartet { color: var(--taupe); font-style: italic; }

.mgb-formular {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--linie);
  background: var(--karte);
}

.mgb-feld {
  flex: 1 1 auto;
  /* min-width:0 ist Pflicht: ohne sie dehnt ein langer Platzhaltertext das
     Flex-Kind und der Senden-Knopf rutscht aus dem Fenster. */
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--tinte);
  font: 400 1rem/1.3 var(--sans);
}

.mgb-feld:focus-visible { outline: 3px solid var(--messing); outline-offset: -1px; }

.mgb-senden {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 10px;
  background: var(--gruen);
  color: #fff;
  font: 600 1rem/1.2 var(--sans);
  cursor: pointer;
}

.mgb-senden:hover { background: #145445; }
.mgb-senden:disabled { background: var(--taupe); cursor: default; }
.mgb-senden:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }

.mgb-nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Auf schmalen Geraeten sitzt das Fenster ueber die ganze Breite und traegt
   keinen Rand — sonst bleiben links und rechts zwei nutzlose Streifen. */
@media (max-width: 30rem) {
  .mgb-fenster {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 82vh;
    border-radius: var(--rund) var(--rund) 0 0;
  }
}

/* Bei vergroesserter Schrift darf das Fenster wachsen, nicht abschneiden. */
@media (min-width: 30.01rem) {
  .mgb-fenster { max-height: min(40rem, calc(100vh - 2rem)); }
}

/* 06.10.2026: Bildmarke „Mass-Gardinen-Shop“ (altes Logo, 2x-Datei) */
/* Woo setzt `.woocommerce-page img { height: auto }` - daher die hohe Spezifitaet. */
/* Bildlogo (bis 06.10.2026) ersetzt durch Logo A aus inc/logo.php. */

/* =====================================================================
   Gestaltung 07.10.2026 (freigegeben nach Probe, inc/gestaltung.php)
   ===================================================================== */

/* ---------- Shop-Liste: Einstieg, Filter, Karten ---------- */
.mg-liste-einstieg { color: var(--taupe); max-width: 46rem; margin: .2rem 0 1rem; }
.mg-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.mg-filter a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem;
  border-radius: 999px; border: 1px solid var(--linie); background: var(--karte);
  color: var(--tinte); text-decoration: none; font-size: .9rem;
  transition: border-color .15s, background-color .15s;
}
.mg-filter a:hover { border-color: var(--messing-rand); }
.mg-filter a.an { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.mg-filter a:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }

.woocommerce ul.products li.product,
ul.products li.product {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  overflow: hidden; padding-bottom: 1rem !important;
}
.woocommerce ul.products li.product a img,
ul.products li.product img { border: 0; border-radius: 0; margin-bottom: .85rem; }
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product .mg-karte-merkmale,
ul.products li.product .price,
ul.products li.product .wc-gzd-additional-info,
ul.products li.product .konfig-hinweis { padding-inline: 1rem !important; }
ul.products li.product .woocommerce-loop-product__title { min-height: 2.6em; }
.mg-karte-merkmale { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 .5rem; }
.mg-karte-merkmale span {
  font-size: .75rem; line-height: 1.2; padding: .25rem .55rem; border-radius: 999px;
  background: var(--leinen); border: 1px solid var(--linie); color: var(--tinte);
}
.mg-farbpunkte { display: inline-flex; align-items: center; gap: 3px; }
.mg-farbpunkte i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); display: inline-block; }
.mg-farbpunkte i:last-of-type { margin-right: .3rem; }
ul.products li.product .price { margin-top: auto !important; }
.mg-karte-qm { display: block; color: var(--tinte); font-size: .95rem; }
.mg-karte-qm strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.mg-karte-bsp { display: block; color: var(--taupe); font-size: .8rem; font-weight: 400; margin-top: .1rem; }
ul.products li.product .wc-gzd-additional-info {
  display: inline; margin: 0 !important; font-size: .74rem; color: var(--taupe);
}
ul.products li.product .wc-gzd-additional-info + .wc-gzd-additional-info { padding-left: 0 !important; }
ul.products li.product .wc-gzd-additional-info + .wc-gzd-additional-info::before { content: ", "; }
ul.products li.product .konfig-hinweis { display: block; margin-top: .55rem; }

/* ---------- Produktseite ---------- */
.mg-beispielpreis { margin: .1rem 0 .7rem; color: var(--taupe); font-size: .95rem; }
.mg-beispielpreis strong { color: var(--tinte); font-weight: 600; }
.mg-vertrauen { list-style: none; margin: .5rem 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.mg-vertrauen li {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem;
  padding: .35rem .75rem; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie);
}
.mg-vertrauen svg, .mg-seitenkarte svg {
  width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--gruen);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* Konfigurator: Preis-Platzhalter, Kacheln, Knöpfe */
.mg-preis.mg-preis-leer { font-family: var(--sans) !important; font-size: 1.05rem !important; color: var(--taupe) !important; }
.mg-wahl { margin: .3rem 0 1.1rem; }
.mg-wahl-titel { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--taupe); margin: 0 0 .55rem; }
.mg-wahl-titel b { text-transform: none; letter-spacing: 0; color: var(--tinte); font-weight: 600; margin-left: .3rem; }
.mg-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem; }
.mg-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.mg-kachel, .mg-knopf {
  position: relative; cursor: pointer; background: var(--karte); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 12px; min-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
.mg-kachel { display: block; padding: 4px 4px 6px; text-align: center; font-size: .78rem; line-height: 1.25; }
.mg-kachel img, .mg-kachel-farbe {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; margin: 0 0 5px; border: 0;
}
.mg-knopf { display: inline-flex; flex-direction: column; justify-content: center; padding: .55rem 1rem; font-size: .92rem; }
.mg-knopf small { font-size: .75rem; color: var(--taupe); }
.mg-kachel input, .mg-knopf input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mg-kachel:hover, .mg-knopf:hover { border-color: var(--messing-rand); }
.mg-kachel:has(input:checked), .mg-knopf:has(input:checked) { border-color: var(--messing); box-shadow: 0 0 0 2px var(--messing); }
.mg-kachel:has(input:focus-visible), .mg-knopf:has(input:focus-visible) { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Kaufknopf: volle Breite, kein Mengenfeld (je Fenster eine Position) */
.mg-massware div.product form.cart .quantity { display: none !important; }
.mg-massware div.product form.cart .single_add_to_cart_button {
  float: none !important; width: 100%; padding: 1.05rem 1.2rem; font-size: 1.05rem;
}
.mg-unterknopf { clear: both; margin: .6rem 0 0; font-size: .84rem; color: var(--taupe); text-align: center; }
.mg-massware .mg-rechtshinweis { font-size: .78rem; margin-top: .5rem; text-align: center; }

/* Galerie-Vorschaubilder nicht mehr blass */
.woocommerce div.product .flex-control-thumbs img { opacity: 1; }
.woocommerce div.product .flex-control-thumbs img.flex-active { box-shadow: 0 0 0 2px var(--messing); }

/* Beschreibung ohne Reiter: Text links, Karte rechts */
.woocommerce div.product .mg-text { grid-column: 1 / -1; }
.mg-text { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; margin-top: 1rem; }
.mg-text-haupt { max-width: 44rem; font-size: 1.02rem; line-height: 1.7; }
.mg-text-haupt .mg-text-titel { margin-top: 0; }
.mg-text-haupt h2 { font-size: 1.45rem; margin: 2rem 0 .6rem; }
.mg-text-haupt h3 { font-size: 1.05rem; margin: 1.3rem 0 .3rem; }
.mg-text-haupt table { width: 100%; border-collapse: collapse; margin: .8rem 0 1.3rem; font-size: .95rem; background: var(--karte); border-radius: 10px; overflow: hidden; }
.mg-text-haupt th, .mg-text-haupt td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.mg-text-haupt thead th { background: var(--messing-hell); font-weight: 600; }
.mg-text-haupt tbody th { width: 38%; color: var(--taupe); font-weight: 500; }
.mg-seitenkarte {
  position: sticky; top: 1.5rem; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 1.2rem 1.25rem; font-size: .92rem;
}
.mg-seitenkarte h3 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .7rem; }
.mg-seitenkarte ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.mg-seitenkarte li { display: flex; gap: .5rem; }
.mg-seitenkarte svg { margin-top: .25rem; }
.mg-seitenkarte .knopf { display: block; text-align: center; width: 100%; }
@media (max-width: 60rem) {
  .mg-text { grid-template-columns: 1fr; gap: 1.5rem; }
  .mg-seitenkarte { position: static; }
}

/* Kaufleiste Handy */
.mg-kaufleiste { display: none; }
@media (max-width: 48rem) {
  .mg-kaufleiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--karte); border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 18px rgba(45, 42, 38, .08);
    transition: transform .2s ease;
  }
  .mg-kaufleiste.mg-kl-weg { transform: translateY(110%); }
  .mg-kl-preis span { display: block; font-family: var(--serif); font-size: 1.15rem; line-height: 1.1; }
  .mg-kl-preis small { display: block; font-size: .72rem; color: var(--taupe); }
  .mg-kaufleiste .knopf { padding: .8rem 1.1rem; min-height: 44px; white-space: nowrap; }
  .mg-massware { padding-bottom: 4.5rem; }
  .mg-massware .mgb-knopf { bottom: 5.2rem; }
}
@media (prefers-reduced-motion: reduce) { .mg-kaufleiste { transition: none; } }
/* Nachbesserung 07.10.2026 */
fieldset.mg-feld-gruppe.mg-merkmale { display: block !important; }
.mg-wahl { width: 100%; }
.mg-karte-qm strong { display: inline !important; }
.woocommerce ul.products li.product p.wc-gzd-additional-info,
ul.products li.product p.wc-gzd-additional-info { display: inline !important; padding-inline: 0 !important; margin: 0 !important; }
.woocommerce ul.products li.product p.wc-gzd-additional-info.tax-info { padding-left: 1rem !important; }
ul.products li.product .konfig-hinweis { white-space: nowrap; }
/* Karte: Flex-Spalte stapelte die zwei Germanized-Hinweise untereinander. */
.woocommerce ul.products li.product, ul.products li.product { flex-direction: row !important; flex-wrap: wrap; align-content: flex-start; }
ul.products li.product > * { flex: 0 0 100%; min-width: 0; }
ul.products li.product > p.wc-gzd-additional-info { flex: 0 0 auto; }

/* =====================================================================
   SEO + Einrichtungen 07.10.2026 (inc/objekt.php)
   ===================================================================== */
.buehne h1 .augenbraue { display: block; font-family: var(--sans); font-weight: 500; line-height: 1.4; margin-bottom: .9rem; }
.mg-kategorie-text { max-width: 46rem; margin: 3rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--linie); line-height: 1.7; }
.mg-kategorie-text h2 { font-size: 1.4rem; margin: 1.8rem 0 .5rem; }
.mg-kategorie-text h2:first-child { margin-top: 0; }
.mg-staffel-hinweis { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); }
.mg-staffel-hinweis p { margin: .2rem 0; }
.mg-staffel-klein { font-size: .85rem; }
table.mg-staffel { border-collapse: collapse; margin: .8rem 0 1.3rem; min-width: min(100%, 22rem); background: var(--karte); }
table.mg-staffel th, table.mg-staffel td { text-align: left; padding: .5rem .9rem; border-bottom: 1px solid var(--linie); }
table.mg-staffel thead th { background: var(--messing-hell); }
.mg-angebot { margin: 2rem 0; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte); padding: 0; }
.mg-angebot summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; min-height: 44px; }
.mg-angebot[open] summary { border-bottom: 1px solid var(--linie); }
.mg-angebot > p, .mg-angebot form { padding: 0 1.2rem; }
.mg-angebot > p { margin-top: 1rem; color: var(--taupe); }
.mg-angebot form { padding-bottom: 1.2rem; }
.mg-angebot-raster { display: grid; gap: .2rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.mg-angebot-feld label { display: block; font-size: .85rem; margin-bottom: .25rem; }
.mg-angebot-feld input, .mg-angebot-feld textarea { width: 100%; min-height: 44px; padding: .55rem .7rem; border: 1px solid var(--linie); border-radius: 8px; font: inherit; background: #fff; }
.mg-feld-bemerkung { grid-column: 1 / -1; }
.mg-angebot-datenschutz { font-size: .8rem; color: var(--taupe); }
.mg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mg-anfrage { margin: 1rem 0 2rem; padding: 1.2rem; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--karte); }
.mg-anfrage-ok { padding: .9rem 1.1rem; border-radius: 12px; background: #e7f2ee; border: 1px solid var(--gruen); }

/* =====================================================================
   Handy-Ansicht 07.10.2026 (Freigabe Inhaber). Alles unter 48rem,
   am PC ändert sich nichts außer: Symbole/☰ sind dort ausgeblendet.
   ===================================================================== */
.kopf-symbol, .menue-knopf { display: none; }
.mgb-knopf { display: inline-flex; align-items: center; gap: .5rem; }
.mgb-knopf-symbol { flex: none; }
.mg-weiterlesen { display: none; }

@media (max-width: 48rem) {
  /* Kopf: eine Zeile — Marke links, rechts Telefon, Warenkorb, ☰. */
  .kopfleiste { font-size: .78rem; padding-block: .3rem; }
  .kopf-innen { flex-wrap: nowrap; gap: .5rem; padding-block: .45rem; }
  .site-kopf .mg-marke { font-size: clamp(.8rem, 3.9vw, 1.02rem); gap: .4em; flex: 0 1 auto; min-width: 0; }
  .site-kopf .mg-marke-unter { display: none; }
  .site-kopf .mg-marke-wort { white-space: nowrap; }
  .kopf-rechts { gap: 0; flex: none; margin-right: -.35rem; }
  .kopf-symbol { display: block; }
  .kopf-tel, .warenkorb-knopf, .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    color: var(--tinte); position: relative;
  }
  .menue-knopf { background: none; border: 0; padding: 0; cursor: pointer; }
  .kopf-tel strong, .kopf-tel .tel-wort, .wk-wort, .menue-wort {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .kopf-tel:focus-visible, .warenkorb-knopf:focus-visible, .menue-knopf:focus-visible {
    outline: 3px solid var(--messing); outline-offset: 0;
  }
  .warenkorb-zahl {
    position: absolute; top: 2px; right: 0; margin: 0;
    min-width: 1.15rem; padding: .05rem .3rem; font-size: .66rem; line-height: 1.3; text-align: center;
  }
  .menue-knopf[aria-expanded="true"] { background: var(--karte); }

  /* Sortiment: mit Skript eingeklappt, auf ☰ als Liste unter dem Kopf. */
  .mg-js .sortimentsleiste { display: none; }
  .mg-js .sortimentsleiste.ist-offen {
    display: block; position: fixed; left: 0; right: 0; z-index: 19;
    max-height: 75vh; overflow-y: auto;
    box-shadow: 0 18px 30px -18px rgba(45, 42, 38, .45);
  }
  .mg-js .sortimentsleiste::after { content: none; }
  .mg-js .sortimentsleiste ul { flex-direction: column; align-items: stretch; gap: 0; overflow: visible; padding-block: .25rem .5rem; }
  .mg-js .sortimentsleiste li + li { border-top: 1px solid var(--linie); }
  .mg-js .sortimentsleiste a { display: block; padding: .8rem .25rem; font-size: 1.02rem; border-bottom: 0; }
  .mg-js .sortimentsleiste .current-cat > a,
  .mg-js .sortimentsleiste .current-menu-item > a { border-bottom: 0; font-weight: 600; }

  /* Beratung: runder Knopf, nur Sprechblase. */
  .mgb-knopf { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 50%; }
  .mgb-knopf-symbol { width: 26px; height: 26px; }
  /* Oben auf der Seite liegt der Hauptknopf — dort keine Überlagerung.
     Die Sprechblase erscheint nach dem ersten Scrollen (mobil.js). */
  .mgb-knopf { transition: opacity .2s ease, transform .2s ease; }
  .mg-js.mg-oben .mgb-knopf:not([aria-expanded="true"]) { opacity: 0; transform: scale(.6); pointer-events: none; }
  .mgb-knopf-wort {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Bühne: Bild zuerst, knapp; Überschrift kleiner, Vorspann aus. */
  .buehne { padding-block: 1rem 1.75rem; }
  .buehne-innen { gap: 1.1rem; }
  .buehne-bild { order: -1; }
  .buehne .bogen { aspect-ratio: 16 / 10; border-radius: 9rem 9rem var(--rund) var(--rund); animation: none; }
  .buehne .preiszettel { display: none; }
  .buehne h1 { font-size: 1.6rem; line-height: 1.18; margin-bottom: .8rem; }
  .buehne h1 .augenbraue { font-size: .7rem; letter-spacing: .1em; margin-bottom: .5rem; }
  .buehne .vorspann { display: none; }
  .buehne .knopfreihe { gap: .6rem; }
  .buehne .knopfreihe .knopf { width: 100%; text-align: center; justify-content: center; }
  .buehne-belege { margin-top: 1rem; font-size: .88rem; }

  /* Lange Texte: gekürzt, „Weiterlesen“ klappt auf (assets/js/mobil.js). */
  .mg-klapp.ist-zu {
    max-height: 300px; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 62%, transparent);
            mask-image: linear-gradient(#000 62%, transparent);
  }
  .mg-weiterlesen {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
    margin: .4rem 0 0; padding: .55rem 1.1rem; border-radius: 999px;
    border: 1px solid currentColor; background: transparent; color: inherit;
    font: inherit; font-size: .92rem; cursor: pointer;
  }
  .mg-weiterlesen { justify-self: start; align-self: start; width: auto; }
  .mg-weiterlesen::after { content: "▾"; font-size: .8em; }
  .mg-weiterlesen[aria-expanded="true"]::after { content: "▴"; }
  section.mg-klapp + .mg-weiterlesen { margin: -1rem 0 1.5rem var(--rand); }
  .naeherei .mg-weiterlesen { color: var(--leinen); }

  /* Produktkarten: Bild 4:3 statt quadratisch, Abstände knapper. */
  .woocommerce ul.products, ul.products { gap: 1rem; }
  .woocommerce ul.products li.product a img,
  ul.products li.product img { aspect-ratio: 4 / 3; margin-bottom: .6rem; }
  ul.products li.product .woocommerce-loop-product__title { min-height: 0; }
  .woocommerce ul.products li.product, ul.products li.product { padding-bottom: .8rem !important; }
}

/* =====================================================================
   Fehlerbehebung 08.10.2026 (Fehlertest)
   ===================================================================== */
.mg-titel-handy { display: none; }
.mg-muster-farben label.ist-gesperrt { opacity: .45; }
.mg-konfigurator ~ .single_add_to_cart_button[disabled],
form.cart .single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; }
.mg-konfigurator input[readonly] { background: var(--leinen); color: var(--tinte); }
@media (max-width: 48rem) {
  .single-product .woocommerce-breadcrumb { font-size: .8rem; padding-block: .6rem 0; }
  .woocommerce div.product { padding-block: .5rem 2rem; gap: 1rem; }
  .mg-titel-handy {
    display: block; margin: 0; font-family: var(--serif); font-weight: 600;
    font-size: 1.35rem; line-height: 1.2; color: var(--tinte);
  }
  .woocommerce div.product .summary .product_title {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Foto höchstens 62 % der Bildschirmhöhe; beschnitten wird nur im Sichtfenster. */
  .woocommerce-product-gallery .flex-viewport { max-height: 62vh; }
  .woocommerce-product-gallery__image img { max-height: 62vh; object-fit: cover; }
}
/* Kasse: Platzhalter „Anmerkungen zu Ihrer Bestellung …“ war abgeschnitten. */
.woocommerce-checkout #order_comments { min-height: 6.5rem; }