/* ============================================================
   Nur was der Shop zusätzlich braucht.
   Das Grundgerüst – Farben, Schriften, Knöpfe, Kacheln – kommt
   aus der Stilvorlage der Website. Wird sie weiterentwickelt,
   wandert der Shop automatisch mit.
   ============================================================ */

/* ---------- Warenkorb in der Kopfleiste ---------- */
.shop-korb__zahl {
  display: inline-grid; place-items: center;
  min-width: 1.45em; height: 1.45em; padding: 0 .35em;
  margin-left: .15rem;
  border-radius: 999px;
  background: #fff; color: var(--c-accent);
  font-size: .78em; font-weight: 700; line-height: 1;
}

/* ---------- Preis auf der Kachel ---------- */
.shop-preis {
  font-family: var(--font-head);
  font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink);
  line-height: 1.15; margin: .5rem 0 .2rem;
}
.shop-preis__zusatz {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted);
  line-height: 1.5; margin-top: .25rem;
}
.shop-preis__zusatz a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Angebot: der geltende Preis in Rot. Der alte Preis steht
   durchgestrichen und leise davor, der Zusatz bleibt grau. */
.shop-preis.ist-angebot, .artikel__preis.ist-angebot { color: var(--c-accent); }
.shop-preis__alt { font-size: .72em; font-weight: 600; color: var(--c-muted); margin-right: .3rem; }
/* Die Sale-Marke im Warenkorb (Schublade und Seite): dieselbe rote
   Pille wie überall, neben dem Titel. */
.sale-marke {
  display: inline-block; vertical-align: middle; margin-left: .5rem;
  font-family: var(--font-body); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--c-accent); padding: .2rem .5rem; border-radius: 999px; white-space: nowrap;
}
.sale-marke--klein { font-size: .6rem; padding: .15rem .4rem; margin-left: .4rem; }
.korb__rabatt--sale { color: var(--c-accent); }
/* Sale-Marke auf der Artikelseite: rote Pille vor dem Preis. */
.artikel__sale {
  display: inline-block; vertical-align: middle; margin: 0 .5rem .2rem 0;
  font-family: var(--font-body); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--c-accent); padding: .3rem .65rem; border-radius: 999px;
}

.shop-ausverkauft {
  font-size: var(--fs-sm); color: var(--c-muted);
  margin-top: auto; padding-top: .6rem;
}

/* ---------- Rückmeldung nach dem Hineinlegen ---------- */
.shop-meldung {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-bottom: var(--space-4); padding: .9rem 1.1rem;
  border-radius: var(--radius);
  background: var(--c-accent-sft);
  border: 1px solid var(--c-accent);
  font-size: var(--fs-sm); color: var(--c-ink);
}
.shop-meldung a { font-weight: 700; color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Fußzeile des Shops ---------- */
.shop-fuss {
  border-top: 1px solid var(--c-line);
  padding-block: var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--fs-sm); color: var(--c-muted);
}
.shop-fuss__reihe {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .8rem var(--space-3);
}
.shop-fuss__marke { font-weight: 600; color: var(--c-ink-soft); margin: 0; }
.shop-fuss__links { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; }
.shop-fuss__links a { color: var(--c-muted); }
.shop-fuss__links a:hover { color: var(--c-accent-dk); }
.shop-fuss__hinweis { margin: .9rem 0 0; font-size: var(--fs-xs); line-height: 1.6; }
.shop-fuss__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Zahlungsarten im Fuß: kleine Schilder mit Zeichen und zwei Zeilen
   Text – die Entsprechung zu den Kartenlogos anderer Shops. */
.shop-fuss__zahlung { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1.4rem 0 1.6rem; }
.shop-fuss__zahlung-titel { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(245,245,246,.55); margin-right: .3rem; }
.shop-fuss__zahlschild {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .85rem .5rem .7rem;
  border: 1px solid rgba(245,245,246,.16); border-radius: 10px; background: rgba(255,255,255,.04);
  color: rgba(245,245,246,.85); text-decoration: none; transition: border-color .18s ease, background .18s ease;
}
.shop-fuss__zahlschild:hover { border-color: var(--c-accent); background: rgba(255,255,255,.07); }
.shop-fuss__zahlschild svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--c-accent-lt, #ec3b46); }
.shop-fuss__zahlschild span { display: flex; flex-direction: column; line-height: 1.2; }
.shop-fuss__zahlschild b { font-size: var(--fs-sm); }
.shop-fuss__zahlschild small { font-size: var(--fs-xs); color: rgba(245,245,246,.55); }
:root[data-thema="hell"] .shop-fuss__zahlung-titel { color: var(--c-muted); }
:root[data-thema="hell"] .shop-fuss__zahlschild { border-color: var(--c-line); background: var(--c-panel); color: var(--c-ink); }
:root[data-thema="hell"] .shop-fuss__zahlschild small { color: var(--c-muted); }

/* ---------- Seite bei abgeschaltetem Shop ---------- */
.shop-wartung { min-height: 100vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-6); }
.shop-wartung .container { max-width: 620px; }
.shop-wartung__marke { display: inline-flex; margin-bottom: var(--space-4); }
.shop-wartung h1 { margin-bottom: var(--space-3); }
.shop-wartung p { color: var(--c-ink-soft); margin-bottom: var(--space-3); }
.shop-wartung__weiter { font-size: var(--fs-sm); color: var(--c-muted); }
.shop-wartung__weiter a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Warenkorb ---------- */
.korb { margin-bottom: var(--space-5); }
.korb__zeile {
  display: grid;
  grid-template-columns: 120px 1fr auto auto;
  align-items: center; gap: 1.2rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--c-line);
}
.korb__bild { display: block; width: 120px; border-radius: var(--radius); overflow: hidden; background: var(--c-panel-2); }
.korb__bild img { display: block; width: 100%; height: 120px; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--fokus, 50% 50%); }
.korb__leer { display: grid; place-items: center; height: 120px; font-size: var(--fs-xs); color: var(--c-muted); }
.korb__text h2 { font-size: var(--fs-md); margin-bottom: .15rem; }
.korb__text h2 a { color: inherit; }
.korb__text h2 a:hover { color: var(--c-accent-dk); }
.korb__merkmale { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: .25rem; }
.korb__stueck { font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }
.korb__menge { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
/* Etwas schmaler als auf der Artikelseite: In der Zeile steht die
   Menge neben Bild, Text und Summe und darf nicht die Breite nehmen,
   die dort die halbe Spalte ist. */
.menge--klein .menge__btn { width: 30px; height: 34px; font-size: 1rem; }
.menge--klein .menge__feld { width: 38px; height: 34px; }
.korb__mindest { font-size: var(--fs-xs); color: var(--c-muted); }

/* Während der Server neu rechnet, treten die Beträge kurz zurück –
   sichtbar genug, dass eine veraltete Zahl nicht für bare Münze
   genommen wird, ruhig genug, dass es nicht flackert. */
.ist-am-rechnen { transition: opacity .18s ease; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .ist-am-rechnen { transition: none; } }
.korb__weg { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-xs); color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }
.korb__weg:hover { color: var(--c-error); }
.korb__summe { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink); margin: 0; min-width: 6rem; text-align: right; }
.korb__fuss { display: flex; flex-wrap: wrap; gap: .8rem; padding-top: 1.2rem; }

.korb__summeblock {
  max-width: 420px; margin-left: auto;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 1.8rem);
}
.korb__summeblock h2 { font-size: var(--fs-lg); margin-bottom: 1rem; }
.korb__rechnung { margin: 0 0 1.3rem; }
.korb__rechnung div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; }
.korb__rechnung dt, .korb__rechnung dd { margin: 0; }
.korb__rechnung dd { font-weight: 700; color: var(--c-ink); }
.korb__klein { font-size: var(--fs-xs); color: var(--c-muted); }
.korb__klein dd { font-weight: 400; color: var(--c-muted); }
.korb__weiter { margin-top: 1rem; }

.shop-meldung--warnung { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.35); }

@media (max-width: 640px) {
  .korb__zeile { grid-template-columns: 84px 1fr; grid-template-areas: "bild text" "menge summe"; row-gap: .8rem; }
  .korb__bild { width: 84px; grid-area: bild; }
  .korb__bild img { height: 84px; }
  .korb__text { grid-area: text; }
  .korb__menge { grid-area: menge; flex-direction: row; align-items: center; gap: .9rem; }
  .korb__summe { grid-area: summe; }
}

/* ---------- Einzelner Artikel ---------- */
.artikel__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
/* Lagerware hat keine gezeichnete Vorschau – dann steht die Kaufspalte
   allein und braucht keine halbe Seite Luft daneben. */
.artikel__raster--schmal { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.artikel__bilder { display: grid; gap: 1rem; }
.artikel__bild { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-panel); }
.artikel__bild img { display: block; width: 100%; height: auto; }
.artikel__ohnebild { display: grid; place-items: center; aspect-ratio: 3/4; border-radius: var(--radius-lg); border: 1px dashed var(--c-line); color: var(--c-muted); font-size: var(--fs-sm); }
.artikel__text h1 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.8rem); line-height: 1.08; margin-bottom: .5rem; }
.artikel__merkmale { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 1rem; }
/* Über dem Preis, nicht darunter: erst was es ist, dann was es kostet.
   Kleiner und leiser gesetzt, damit die Zahl darunter die auffälligste
   Stelle der Spalte bleibt. */
.artikel__vorspann { font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.65; margin-bottom: .9rem; max-width: 46ch; }
.artikel__preis { font-family: var(--font-head); font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; color: var(--c-ink); line-height: 1.1; margin-bottom: .9rem; }
.artikel__lager { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 1.4rem; }
.artikel__lager::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.artikel__lager--da { color: var(--c-success); }
.artikel__lager--weg { color: var(--c-error); }
.artikel__nachschub { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: 1rem; }
.artikel__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 2rem; }
.artikel__beschreibung { border-top: 1px solid var(--c-line); padding-top: 1.6rem; }
.artikel__beschreibung h2 { font-size: var(--fs-lg); margin-bottom: .7rem; }
.artikel__beschreibung p { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.75; margin-bottom: .8rem; }
.artikel__zurueck { margin-top: 1.6rem; }

/* ---------- Kasse ---------- */
.kasse__spalten { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.kasse__block { border: 0; padding: 0; margin: 0 0 2rem; }
.kasse__block legend {
  font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 700;
  color: var(--c-ink); padding: 0; margin-bottom: 1rem;
}
.kasse__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.kasse__reihe--plz { grid-template-columns: 8rem 1fr; }

/* Die Mengenwahl trägt im Laden dasselbe Grau wie die Felder und
   keinen Rahmen mehr. Nur im Laden: .menge steht in style.css und
   wird auch auf der Agenturseite benutzt, wo ein helles Grau auf
   dunklem Grund ein Fremdkörper wäre. */
.shop-seite .menge { background: var(--v-feld); border: 0; }
.shop-seite .menge:hover { background: var(--v-feld-hover); }
.shop-seite .menge:focus-within { background: var(--v-feld-fokus); }

/* ---------- Werte für die Eingabefelder ----------

   Dieselben wie in der Verwaltung, damit Laden und Verwaltung eine
   Handschrift haben. Das Grau ist von apple.com – auf der iPhone-Seite
   tragen sieben Abschnitte genau #f5f5f7.

   Fest eingetragen und nicht aus der Stilvorlage geholt: Der Laden hat
   dunkle Inseln (Kopf, Fuß, Laufband), die ihre eigenen Farbwerte
   mitbringen. Ein Feld, das sich die Farbe aus dem Umfeld holt, würde
   dort mitwandern – die Formulare stehen aber alle im hellen Teil, und
   sie sollen überall gleich aussehen.

   Beim Tippen passiert dasselbe wie beim Überfahren: Der Grund wird
   eine Spur dunkler, sonst nichts. Kein Ring, kein Schein, kein
   Rahmen. */
:root {
  --v-feld:        #f5f5f7;
  --v-feld-hover:  #ececf0;
  --v-feld-fokus:  #ececf0;
  --v-feld-rund:   999px;
  --v-feld-rund-gross: 18px;
}

.feld-k { display: block; margin-bottom: 1.1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-soft); }
.feld-k > span { font-weight: 400; color: var(--c-muted); font-size: var(--fs-xs); }
.feld-k input, .feld-k select, .feld-k textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .8rem 1.15rem;
  background: var(--v-feld); border: 0;
  border-radius: var(--v-feld-rund); color: var(--c-ink); font: inherit; font-weight: 400;
  transition: background .18s ease;
}
/* Mehrzeilig bleibt ein Kasten mit runden Ecken: Bei 120 Pixeln Höhe
   würde aus der Pille ein Halbkreis, und der Text stünde in einer
   Tonne. */
.feld-k textarea { resize: vertical; line-height: 1.6; border-radius: var(--v-feld-rund-gross); }
.feld-k input:hover, .feld-k select:hover, .feld-k textarea:hover { background: var(--v-feld-hover); }
/* :focus und nicht :focus-visible – bei einem Eingabefeld ist die Maus
   kein anderer Fall als die Tastatur: Wer hineingeklickt hat, tippt
   gleich. */
.feld-k input:focus, .feld-k select:focus, .feld-k textarea:focus {
  outline: none; background: var(--v-feld-fokus); box-shadow: none;
}
.feld-k__hilfe { display: block; margin-top: .3rem; font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); }
/* Ein Fehler ist kein Ruhezustand: Hier darf und muss es auffallen.
   Der Grund färbt sich, dazu eine Linie innen – ohne sie ginge das
   Rot bei hellen Bildschirmen unter. */
.feld-k.ist-falsch input, .feld-k.ist-falsch select, .feld-k.ist-falsch textarea {
  background: color-mix(in oklab, var(--c-error) 9%, var(--v-feld));
  box-shadow: inset 0 0 0 1.5px var(--c-error);
}
.feld-k em, .feld-k__fehler { display: block; margin-top: .3rem; font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--c-error); }
.kasse__hinweis-klein { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; }
.kasse__hinweis-klein a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.wahl-k {
  display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
  padding: 1rem 1.2rem; margin-bottom: .7rem;
  background: var(--v-feld); border: 0;
  border-radius: var(--v-feld-rund-gross); transition: background .18s ease;
}
.wahl-k:hover { background: var(--v-feld-hover); }
/* Keine Pille: Hier stehen zwei Zeilen Text übereinander, und eine
   Pille um einen Absatz sieht aus wie ein sehr großer Knopf. */
.wahl-k:has(input:checked) {
  background: var(--c-accent-sft);
  box-shadow: inset 0 0 0 1.5px var(--c-accent);
}
.wahl-k:has(input:checked):hover { background: var(--c-accent-sft); }
.wahl-k input { margin-top: .25rem; accent-color: var(--c-accent); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.wahl-k span { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.55; }
.wahl-k strong { display: block; font-size: var(--fs-sm); color: var(--c-ink); margin-bottom: .15rem; }

.kasse__uebersicht {
  position: sticky;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 1.8rem);
}
.kasse__uebersicht h2 { font-size: var(--fs-lg); margin-bottom: 1rem; }
.kasse__posten { list-style: none; margin: 0 0 1.2rem; padding: 0 0 1rem; border-bottom: 1px solid var(--c-line); }
.kasse__posten li { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; padding: .35rem 0; font-size: var(--fs-sm); }
.kasse__menge { color: var(--c-muted); }
.kasse__titel { color: var(--c-ink-soft); }
.kasse__zeile { font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.kasse__gesamt { border-top: 1px solid var(--c-line); margin-top: .4rem; padding-top: .7rem; }
.kasse__gesamt dt { font-weight: 700; color: var(--c-ink); }
.kasse__gesamt dd { font-family: var(--font-head); font-size: var(--fs-lg); }
.kasse__ok { display: flex; gap: .7rem; align-items: flex-start; margin: 1.2rem 0; font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.6; }
.kasse__ok input { margin-top: .2rem; accent-color: var(--c-accent); width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.kasse__ok a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }
.kasse__ok.ist-falsch { color: var(--c-error); }
.kasse__rechtlich { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin: .9rem 0 0; }
.kasse__rechtlich a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kasse__zurueck { margin-top: 1rem; }
.korb__frei { font-size: var(--fs-xs); color: var(--c-accent-dk); margin: -.4rem 0 1rem; }

/* Spamfalle – für Menschen unsichtbar, für Maschinen sichtbar.
   Bewusst nicht display:none, das durchschauen viele Skripte. */
.hm-leer { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Bestätigungsseite ---------- */
.danke { max-width: 620px; margin-inline: auto; text-align: center; }
.danke h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); margin-bottom: 1.2rem; }
.danke__nummer {
  display: inline-flex; flex-direction: column; gap: .2rem;
  padding: 1rem 2rem; margin-bottom: 1.6rem;
  border-radius: var(--radius); background: var(--c-panel); border: 1px solid var(--c-line);
  font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .12em;
}
.danke__nummer b { font-family: var(--font-head); font-size: var(--fs-xl); color: var(--c-accent-lt); letter-spacing: .02em; text-transform: none; }
.danke__text { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.75; margin-bottom: 1rem; }
.danke__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 2rem 0 1.6rem; }
.danke__hilfe { font-size: var(--fs-xs); color: var(--c-muted); }
.danke__hilfe a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Versand & Zahlung ---------- */
.versand__zahl dt { font-weight: 700; color: var(--c-ink); margin-top: 1rem; }
.versand__zahl dd { margin: .2rem 0 0; color: var(--c-ink-soft); }

@media (max-width: 900px) {
  .artikel__raster, .kasse__spalten { grid-template-columns: 1fr; }
  .kasse__uebersicht { position: static; }
}
@media (max-width: 520px) {
  .kasse__reihe, .kasse__reihe--plz { grid-template-columns: 1fr; }
}

/* ---------- Ausstattung auf der Artikelseite ---------- */
.wahlgruppe { border: 0; padding: 0; margin: 0 0 1.6rem; }
.wahlgruppe legend {
  font-family: var(--font-head); font-size: var(--fs-md); font-weight: 700;
  color: var(--c-ink); padding: 0; margin-bottom: .5rem;
}
.wahlgruppe legend span { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted); }
/* Der Hinweis steht seit dem Umbau UNTER den Farbkreisen, nicht mehr
   darüber – deshalb braucht er den Abstand nach oben. */
.wahlgruppe__hinweis { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin-top: 12px; margin-bottom: .7rem; }
.wahlgruppe.ist-falsch .wahlwert { border-color: var(--c-error); }
.wahlgruppe__werte { display: flex; flex-wrap: wrap; gap: .6rem; }

.wahlwert {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  /* Seitlich 0,9 rem: genug, damit der Text am runden Rand nicht auf
     der Kante steht, und knapp genug, dass die drei Materialien in
     eine Zeile passen. Gemessen bei 1440 Punkten – die Spalte gibt
     548 her, die drei Knöpfe brauchen 541. Bei 1,05 rem waren es 555,
     und „Natura Braun" rutschte in die zweite Zeile. */
  padding: .6rem .9rem; border-radius: var(--v-feld-rund);
  background: var(--v-feld); border: 0;
  font-size: var(--fs-sm); transition: background .18s ease, color .18s ease;
}
.wahlwert:hover { background: var(--v-feld-hover); }
/* Gewählt heißt hier nicht „betont", sondern „das ist Ihre Karte" –
   wer die Bindung nicht ablesen kann, bestellt blind. Deshalb wird der
   gewählte Knopf voll rot mit weißer Schrift, während die anderen im
   Grau bleiben. Keine Linie mehr: Bei einem gefüllten Knopf wäre sie
   dieselbe Auskunft ein zweites Mal.

   Weiß auf dem Hausrot kommt auf einen Kontrast von 5,9 zu 1 – über
   der Schwelle, auch für den Aufpreis in der kleineren Schrift. */
.wahlwert:has(input:checked) {
  background: var(--c-accent); color: #fff; font-weight: 600;
  box-shadow: none;
}
.wahlwert:has(input:checked):hover { background: var(--c-accent); }
/* In den breiten Zeilen bleibt der Punkt sichtbar. Auf dem roten Grund
   wäre er in derselben Farbe unsichtbar – deshalb wird er weiß. */
.wahlwert--breit:has(input:checked) input { accent-color: #fff; }
.wahlwert:has(input:checked) strong { color: #fff; }
.wahlwert input { accent-color: var(--c-accent); width: 1rem; height: 1rem; flex-shrink: 0; }

/* Bei den Pillen wird der Radioknopf ausgeblendet – nicht entfernt.
   Er bleibt im Formular, bleibt anspringbar und bleibt das, was die
   Vorlesehilfe ankündigt; nur gezeichnet wird er nicht mehr. Die
   gewählte Pille erkennt man am roten Rahmen und am getönten Grund,
   und das ist dieselbe Auskunft in weniger Platz.

   In den breiten Zeilen bleibt er sichtbar: Dort steht ein ganzer
   Satz, und ohne Punkt davor läse sich das wie ein Absatz.

   Nicht display:none und nicht visibility:hidden – beides nähme dem
   Feld den Tastaturzugriff. */
.wahlwert:not(.wahlwert--breit) input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}
/* Der Tastaturrahmen sitzt jetzt an der Pille: Das versteckte Feld
   kann ihn nicht mehr zeigen, und ohne ihn wüsste niemand, der mit
   der Tabulatortaste geht, wo er gerade steht. */
.wahlwert:not(.wahlwert--breit):has(input:focus-visible) {
  outline: none; box-shadow: var(--ring);
}
.wahlwert__text { color: var(--c-ink); }
/* Der Aufpreis ist eine Angabe, keine Handlung – und Rot heißt im
   Shop „In den Warenkorb", „Zahlungspflichtig bestellen". Steht es
   auch an jedem Aufpreis, heißt es bald nirgends mehr etwas. */
.wahlwert__auf { font-size: var(--fs-xs); color: var(--c-ink); font-weight: 600; }
/* Auf dem roten Grund ziehen die Innenteile mit. Ohne diese Zeile
   bliebe die Schrift dunkel: .wahlwert__text setzt eine eigene Farbe
   und schlägt damit das color am Elternteil. */
.wahlwert:has(input:checked) .wahlwert__text,
.wahlwert:has(input:checked) .wahlwert__auf { color: #fff; }
.wahlwert--breit { display: flex; width: 100%; border-radius: var(--v-feld-rund-gross); margin-bottom: .5rem; }

.artikel__datei {
  display: block; width: 100%; margin: 0 0 .9rem;
  padding: .7rem .9rem; font-size: var(--fs-sm);
  background: var(--c-panel-2); border: 1px dashed var(--c-line);
  border-radius: var(--radius); color: var(--c-ink-soft);
}

/* Format, Maße, Material: ein schmaler Streifen zwischen Kurztext und
   Auswahl. Die feinen Linien oben und unten fassen die Angaben zusammen,
   ohne dass daraus ein zweiter Kasten neben dem Rechner wird. */
.artikel__daten { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: .6rem 0; margin: 0 0 1.3rem; }
.artikel__eckdaten { list-style: none; margin: 0; padding: 0; line-height: 1.65; }
/* Die Paare laufen als Fließtext weiter, statt als Raster zu stehen:
   So bleibt der Streifen auch mit fünf Angaben zwei Zeilen hoch. */
.artikel__eckdaten > div { display: inline; }
.artikel__eckdaten > div + div::before { content: "·"; color: var(--c-muted); opacity: .6; margin: 0 .5rem; }
.artikel__eckdaten dt { display: inline; font-size: .72rem; color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; margin: 0 .35rem 0 0; }
.artikel__eckdaten dd { display: inline; font-size: var(--fs-sm); color: var(--c-ink-soft); margin: 0; }
.artikel__passend { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin: .25rem 0 0; }
/* Der Zusatz tritt noch eine Spur zurück – er gehört zur Angabe
   darüber, ist aber nicht die Angabe. */
.artikel__ohnegewaehr { opacity: .85; }

.artikel__staffel { margin-bottom: 1.4rem; }
.artikel__staffel b { display: block; font-size: var(--fs-xs); color: var(--c-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.artikel__staffel table { border-collapse: collapse; font-size: var(--fs-sm); }
.artikel__staffel td { padding: .25rem 1.4rem .25rem 0; color: var(--c-ink-soft); }
.artikel__staffel tr td:last-child { font-weight: 600; color: var(--c-ink); }

.artikel__stempel {
  font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.65;
  /* Der rote Grund trägt den Hinweis allein – ein Rahmen darum wäre
     dieselbe Auskunft zweimal. Die Farbe bleibt: Hier steht ein
     Betrag, der sonst niemandem auffällt. */
  background: var(--c-accent-sft); border: 0;
  border-radius: var(--v-feld-rund-gross); padding: 1rem 1.2rem; margin-bottom: 1.4rem;
}
.artikel__stempel b { display: block; color: var(--c-accent-dk); font-size: var(--fs-sm); margin-bottom: .2rem; }

/* Die Website setzt alle Listen ohne Zeichen (ul, ol { list-style: none }).
   Hier bekommt jeder Punkt wieder eines – als kleiner Punkt in der
   Hausfarbe, wie im übrigen Shop. */
.artikel__punkte { margin: 0 0 1.6rem; padding: 0; list-style: none; }
.artikel__punkte li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.7; margin-bottom: .35rem;
}
/* Ein Haken in der Hausfarbe – derselbe wie in der Auswahl und unter
   der Größentabelle, damit alles nach einer Hand aussieht. */
.artikel__punkte li::before {
  content: ""; position: absolute; left: .1rem; top: .5em;
  width: .7em; height: .38em; border-left: 2.2px solid var(--c-accent); border-bottom: 2.2px solid var(--c-accent);
  transform: rotate(-45deg);
}

.artikel__beratung { border-top: 1px solid var(--c-line); padding-top: 1.6rem; margin-top: 1.6rem; }
.artikel__beratung h2 { font-size: var(--fs-lg); margin-bottom: .6rem; }
.artikel__beratung p { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.75; margin-bottom: .6rem; }
.artikel__beratung a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }
.artikel__klein { font-size: var(--fs-xs); color: var(--c-muted); }

.artikel__pflege { margin-top: 1.4rem; border-top: 1px solid var(--c-line); padding-top: 1.2rem; }
.artikel__pflege summary { cursor: pointer; font-weight: 600; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.artikel__pflege p { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.7; margin-top: .7rem; }

/* ---------- Ausstattung im Warenkorb ---------- */
.korb__ausstattung { list-style: none; margin: .2rem 0 .35rem; padding: 0; }
.korb__ausstattung li { font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.6; }
.korb__ausstattung span { color: var(--c-muted); }
.korb__ausstattung em { font-style: normal; color: var(--c-accent-dk); font-weight: 600; }
.korb__logo { font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: .3rem; }
.korb__rabatt { display: inline-block; margin-left: .5rem; font-size: var(--fs-xs); color: var(--c-success); font-weight: 600; }
.korb__zeile--einmalig { background: var(--c-panel); border-radius: var(--radius); }
.korb__bild--symbol { display: grid; place-items: center; height: 120px; color: var(--c-muted); }
.korb__bild--symbol svg { width: 44px; height: 44px; }

/* Die gezeichnete Karte im Korb, in der Schublade und an der Kasse.
   Anders als ein Foto wird sie nicht beschnitten: Sie zeigt das
   gewaehlte Format, und ein angeschnittenes Format ist keine Angabe
   mehr. Der graue Grund ist derselbe, den die Bildflaeche ohnehin
   traegt - so bleibt die Zeile ruhig, ob dort ein Foto steht oder
   eine Zeichnung. */
/* Kein Innenabstand und etwas herangeholt: Die Zeichenflaeche bringt
   ringsum Luft mit, damit der Schatten hineinpasst - in einem
   Bildchen von 120 Punkten blieb von der Karte dadurch nur die
   Haelfte der Breite uebrig. 1,15 schneidet einen Teil dieser Luft
   weg und laesst dem Schatten gerade genug: Beim breitesten Format
   (quadratisch, 274 von 405 Einheiten) bleiben 39 Einheiten Rand,
   und so weit traegt er. */
.korb-zeichnung {
  display: grid; place-items: center; overflow: hidden;
  background: var(--c-panel-2);
}
.korb-zeichnung .vorschau__bild { transform: scale(1.15); }
.korb-zeichnung .vorschau__bild {
  width: 100%; height: 100%; max-width: none;
  object-fit: contain; display: block;
}
/* ---------- Fotos auf der Artikelseite ----------

   Umgeschaltet wird ohne Skript: Je Bild ein verstecktes
   Auswahlfeld, und :checked entscheidet, welches Foto steht. Das
   Feld selbst ist nicht versteckt mit display:none - so bliebe es
   fuer die Tastatur unerreichbar; es liegt stattdessen ausserhalb
   des Sichtbaren und behaelt seinen Fokusring am Etikett. */
/* In der klebenden Bildspalte darf die Galerie nicht ueber die
   Bildschirmhoehe hinauswachsen - sonst waere ihr unteres Ende nie
   zu erreichen. Unter dem Kaufbereich gilt die Grenze nicht. */
.artikel__fotos { margin-top: 0; }
.artikel__galerie { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }
.artikel__galerie h2 { font-size: 1.35rem; margin-bottom: 1rem; }
.artikel__galerie .artikel__fotobuehne { max-width: 620px; }
.artikel__fotowahl { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.artikel__fotobuehne { position: relative; display: grid; }
.artikel__foto {
  grid-area: 1 / 1; width: 100%; height: auto;
  border-radius: var(--radius); display: block;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
  /* Als Knopf: ohne eigene Optik, der Zeiger sagt, dass es größer geht. */
  position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left;
}
.artikel__foto-bild { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.artikel__foto-lupe {
  position: absolute; right: .8rem; bottom: .8rem; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(20,20,26,.72); color: #fff; opacity: 0; transition: opacity .2s ease;
}
.artikel__foto-lupe svg { width: 20px; height: 20px; }
.artikel__foto:hover .artikel__foto-lupe, .artikel__foto:focus-visible .artikel__foto-lupe { opacity: 1; }
@media (hover: none) { .artikel__foto-lupe { opacity: .85; } }
/* Nur ein Foto: Dann gibt es nichts umzuschalten, und es steht
   einfach da. */
.artikel__fotos:not(.artikel__fotos--mehr) .artikel__foto { opacity: 1; visibility: visible; }
.artikel__fotowahl:nth-of-type(1):checked ~ .artikel__fotobuehne .artikel__foto:nth-of-type(1),
.artikel__fotowahl:nth-of-type(2):checked ~ .artikel__fotobuehne .artikel__foto:nth-of-type(2),
.artikel__fotowahl:nth-of-type(3):checked ~ .artikel__fotobuehne .artikel__foto:nth-of-type(3),
.artikel__fotowahl:nth-of-type(4):checked ~ .artikel__fotobuehne .artikel__foto:nth-of-type(4),
.artikel__fotowahl:nth-of-type(5):checked ~ .artikel__fotobuehne .artikel__foto:nth-of-type(5),
.artikel__fotowahl:nth-of-type(6):checked ~ .artikel__fotobuehne .artikel__foto:nth-of-type(6)
  { opacity: 1; visibility: visible; }

.artikel__fotoreihe { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.artikel__fotoklein {
  width: 72px; border-radius: 4px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; transition: border-color .18s ease;
}
.artikel__fotoklein img { display: block; width: 100%; height: 90px; object-fit: cover; }
.artikel__fotoklein:hover { border-color: var(--c-line); }
/* Das gewaehlte Bild traegt die Hausfarbe - sonst sieht man nicht,
   welches oben steht. */
.artikel__fotowahl:nth-of-type(1):checked ~ .artikel__fotoreihe .artikel__fotoklein:nth-of-type(1),
.artikel__fotowahl:nth-of-type(2):checked ~ .artikel__fotoreihe .artikel__fotoklein:nth-of-type(2),
.artikel__fotowahl:nth-of-type(3):checked ~ .artikel__fotoreihe .artikel__fotoklein:nth-of-type(3),
.artikel__fotowahl:nth-of-type(4):checked ~ .artikel__fotoreihe .artikel__fotoklein:nth-of-type(4),
.artikel__fotowahl:nth-of-type(5):checked ~ .artikel__fotoreihe .artikel__fotoklein:nth-of-type(5),
.artikel__fotowahl:nth-of-type(6):checked ~ .artikel__fotoreihe .artikel__fotoklein:nth-of-type(6)
  { border-color: var(--c-accent); }
.artikel__fotowahl:focus-visible + .artikel__fotobuehne { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ---------- Pop-up ----------

   Als <dialog>: Verdunkelung, Tastaturfang und Escape bringt der
   Browser mit. Gestaltet wird nur der Kasten selbst und der Rand
   dahinter. */
.popup {
  /* Ein <dialog> zentriert sich von selbst - aber nur, solange ihm
     niemand den Aussenabstand nimmt. Die Grundregel des Stilblatts
     setzt jedes Element auf margin: 0, und damit klebte der Kasten
     oben links in der Ecke. */
  margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--c-panel); color: var(--c-ink);
  box-shadow: 0 24px 70px -20px rgba(20,20,26,.45);
  overflow: hidden;
}
.popup::backdrop { background: rgba(12,12,15,.55); backdrop-filter: blur(3px); }
/* Eingeblendet und ein Stueck heraufgeschoben - ein Kasten, der
   ohne Bewegung dasteht, wirkt wie ein Fehler der Seite. */
@keyframes popup-auf { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.popup[open] { animation: popup-auf .3s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { .popup[open] { animation: none; } }

.popup__zu-form { position: absolute; top: .6rem; right: .6rem; z-index: 2; margin: 0; }
.popup__zu {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(12,12,15,.5); color: #fff;
  backdrop-filter: blur(6px); transition: background .18s ease;
}
.popup__zu:hover { background: var(--c-accent); }

.popup__bild { display: block; width: 100%; height: 190px; object-fit: cover; }
.popup__innen { padding: 1.5rem 1.6rem 1.7rem; }
/* Platz fuer den Schliessknopf: Ohne Bild sitzt er sonst auf der
   Ueberschrift. */
.popup__titel { margin: 0 0 .5rem; padding-right: 2.2rem; font-size: 1.4rem; line-height: 1.2; }
.popup__bild + .popup__innen .popup__titel { padding-right: 0; }
.popup__text { margin: 0; color: var(--c-ink-soft); font-size: .95rem; line-height: 1.6; }
.popup__knopf { margin-top: 1.3rem; }

/* Die Angebote im Pop-up: eine Zeile je Artikel, Bild links. */
.popup__angebote { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.popup__angebote a {
  display: flex; gap: .9rem; align-items: center;
  padding: .5rem; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; transition: background .18s ease;
}
.popup__angebote a:hover { background: var(--c-panel-2); }
.popup__angebote img,
.popup__angebote .popup__leer { width: 56px; height: 70px; border-radius: 2px; flex: 0 0 auto; }
.popup__angebote img { object-fit: cover; }
/* Ein Artikel ohne Foto bekommt eine leere Flaeche statt gar nichts -
   sonst ruecken Name und Preis nach links und die Zeilen stehen
   nicht mehr untereinander. */
.popup__angebote .popup__leer { background: var(--c-panel-2); }
.popup__angebot-wort { display: grid; gap: .2rem; min-width: 0; }
.popup__angebot-wort b { font-size: .95rem; line-height: 1.25; }
.popup__angebot-preis { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: .9rem; }
.popup__angebot-preis s { color: var(--c-muted); font-size: .85em; }
.popup__angebot-preis em { font-style: normal; font-weight: 700; }
.popup__angebot-spar {
  background: var(--c-accent); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .1rem .45rem; border-radius: 999px;
}

/* Gutscheinfeld im Warenkorb. Es steht ueber der Rechnung und nicht
   darunter: Wer einen Code hat, sucht ihn dort, wo die Summe
   entsteht - und sieht die Wirkung gleich darunter. */
.gutschein { margin: 0 0 1.1rem; }
.gutschein__zeile { display: flex; gap: .5rem; align-items: center; }
.gutschein__zeile input {
  flex: 1 1 auto; min-width: 0;
  padding: .7rem 1.1rem; background: var(--v-feld); border: 0;
  border-radius: var(--v-feld-rund); color: var(--c-ink); font: inherit;
  text-transform: uppercase; letter-spacing: .06em;
  transition: background .18s ease;
}
.gutschein__zeile input:hover { background: var(--v-feld-hover); }
.gutschein__zeile input:focus { outline: none; background: var(--v-feld-fokus); }
.gutschein__zeile .btn { flex: 0 0 auto; }
/* Ist ein Code eingeloest, steht dort keine leere Zeile mehr,
   sondern was gilt - und ein Weg, es rueckgaengig zu machen. */
.gutschein__hat {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin: 0; padding: .7rem 1.1rem;
  background: var(--v-feld); border-radius: var(--v-feld-rund);
  font-size: .92rem;
}
.gutschein__weg {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-muted); font: inherit; text-decoration: underline;
}
.gutschein__weg:hover { color: var(--c-accent); }
/* Der Nachlass in der Rechnung: als einzige Zeile in der Hausfarbe,
   weil er die einzige ist, die abzieht. */
.korb__rabatt dt, .korb__rabatt dd { color: var(--c-accent); }
.korb__rabatt dt span { font-weight: 400; opacity: .75; }

.korb-zeichnung--gross  { width: 120px; height: 120px; }
.korb-zeichnung--klein  { width: 64px;  height: 64px; }
.korb-zeichnung--winzig { width: 56px;  height: 56px; }
@media (max-width: 700px) {
  .korb-zeichnung--gross { width: 84px; height: 84px; }
}
.korb__einmalig-text { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin: 0; }
.korb__fest { font-size: var(--fs-sm); color: var(--c-muted); }

/* Der Stempel, der nicht berechnet wird.

   Grün und nicht grau: Es ist eine gute Nachricht, und sie soll als
   solche gelesen werden. Der Betrag steht trotzdem da – „0,00 €" sagt
   deutlicher, dass hier nichts hinzukommt, als ein leeres Feld. */
.korb__zeile--gutschrift { background: color-mix(in oklab, var(--c-success) 9%, transparent); }
.korb__zeile--gutschrift .korb__summe { color: var(--c-success); }
.korb__zeile--gutschrift .korb__weg { color: var(--c-ink-soft); margin-top: .5rem; display: inline-block; }
.korb__zeile--gutschrift .korb__weg:hover { color: var(--c-accent-dk); }

/* Ein Satz statt einer Zeile: Für Gäste und für den Rückweg gibt es
   nichts zu beziffern. */
.korb__stempelweg {
  margin: .8rem 0 0; padding: .8rem 1rem;
  border: 1px dashed var(--c-line); border-radius: var(--radius);
  font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6;
}
.korb__stempelweg a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }
.kasse__stempelweg .kasse__zeile { color: var(--c-success); }
.kasse__stempelweg a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }
.kasse__ausstattung { display: block; font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; }

/* ---------- Bereichsköpfe im Laden ---------- */
.bereich__kopf { max-width: 60ch; margin-bottom: var(--space-4); }
.bereich__kopf h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem); margin-bottom: .5rem; }
.bereich__kopf p { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.7; }
.section--schmal { padding-block: var(--space-3); }

/* ============================================================
   Der Shop als eigenständige Seite
   ============================================================ */

/* Schmale Zeile ganz oben, Weg zurück zur Hauptseite */

/* Die Kopfleiste des Shops steht fest, nicht schwebend über dem Bild –
   ein Laden braucht kein Vollbild, sondern ein greifbares Menü. */
/* Der Zusatz steht unter dem Logo, auf dessen Breite zentriert. Neben
   dem Schriftzug brauchte er eine Trennlinie, um nicht wie ein Teil
   davon zu wirken – darunter braucht er nichts: Die Zeile darüber
   trennt von selbst.

   Nur im Shop: .brand trägt auf der Website weiterhin eine Zeile. */
.shop-header .brand { flex-direction: column; align-items: center; gap: .3rem; }
.shop-marke {
  font-family: var(--font-body); font-size: .63rem; line-height: 1.1;
  font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-ink-soft); white-space: nowrap;
  /* Die Sperrung hängt hinten am letzten Buchstaben; ohne Ausgleich
     stünde das Wort um einen halben Buchstaben nach links versetzt. */
  text-indent: .3em;
}
/* Das <b> im Markup bleibt, trägt aber kein eigenes Gewicht mehr:
   ein Wort, eine Stimme. */
.shop-marke b { font-weight: inherit; color: inherit; }
.shop-seite .page-hero { padding-top: var(--space-5); }

/* Flach statt Verlauf: Ein Farbverlauf auf einem 42 Punkt hohen Knopf
   ist auf keinem Bildschirm als Verlauf zu erkennen – er macht die
   Fläche nur unruhig. Die Zahl sitzt innen mit, statt oben rechts
   überzustehen. */
/* Gefüllt in der Markenfarbe, weiße Schrift – der Korb ist die
   Handlung und darf sie zeigen. Schlank gehalten: 34 Punkt hoch
   statt 40, damit er neben dem Logo nicht wuchtet.

   Gesetzt wird --btn-fg, nicht color: .btn liest seine Schriftfarbe
   aus diesem Wert, und ein direktes color würde von .btn--accent
   wieder überschrieben. */
.shop-korb {
  position: relative; height: 34px; padding-inline: .9rem;
  --btn-fg: #fff;
  background: var(--c-accent); border-color: var(--c-accent);
  gap: .45rem; font-size: .8rem; font-weight: 600; letter-spacing: 0;
}
.shop-korb:hover {
  background: var(--c-accent-lt); border-color: var(--c-accent-lt);
  box-shadow: none; transform: none;
}
.shop-korb .ico { width: 15px; height: 15px; flex: none; }
.shop-korb, .shop-konto { flex: none; white-space: nowrap; }
.shop-kopf__rechts { flex: none; }
.shop-korb__zahl.ist-leer { display: none; }
/* Auf roter Fläche ist die Zahl weiß mit roter Ziffer. */
.shop-korb__zahl { background: #fff; color: var(--c-accent); }

/* Band mit dem Hinweis auf Nettopreise */
.gewerbe-band { background: var(--c-panel); border-block: 1px solid var(--c-line); }
.gewerbe-band p { margin: 0; padding-block: .8rem; font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.65; }
.gewerbe-band b { color: var(--c-ink); }
.artikel__gewerbe, .kasse__gewerbe {
  font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.65;
  background: var(--c-panel-2); border-left: 3px solid var(--c-accent);
  padding: .7rem .9rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.2rem;
}
.kasse__gewerbe { margin: 1rem 0; }

/* ============================================================
   Warenkorb-Schublade
   ============================================================ */
.korb-hinter {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(8,8,10,.6);
  backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px);
  opacity: 0; transition: opacity 280ms ease;
}
.korb-hinter.ist-offen { opacity: 1; }

.korb-schublade {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1401;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border-left: 1px solid var(--c-line);
  box-shadow: -24px 0 60px -30px rgba(0,0,0,.8);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.korb-schublade.ist-offen { transform: none; }

.korb-schublade__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--c-line); flex-shrink: 0;
}
.korb-schublade__kopf h2 { font-size: var(--fs-lg); margin: 0; }
.korb-schublade__zu {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--c-line); border-radius: 50%;
  background: none; color: var(--c-ink-soft); cursor: pointer;
  transition: var(--transition);
}
.korb-schublade__zu:hover { background: var(--grad-gold); color: #fff; border-color: transparent; transform: rotate(90deg); }
.korb-schublade__zu svg { width: 18px; height: 18px; }

.korb-schublade__inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem 1.3rem 1.6rem; }
.korb-schublade__laedt, .korb-schublade__leer { font-size: var(--fs-sm); color: var(--c-muted); text-align: center; padding-block: 2rem; }
.korb-schublade__leer .btn { margin-top: 1rem; }
.korb-schublade__hinweis {
  font-size: var(--fs-xs); line-height: 1.6; margin-bottom: 1rem;
  padding: .7rem .9rem; border-radius: var(--radius);
  background: rgba(255,107,107,.1); border: 1px solid rgba(255,107,107,.3); color: var(--c-ink-soft);
}

/* Zeilen in der Schublade */
.ks-liste { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.ks-zeile { display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--c-line); }
.ks-bild { display: block; width: 64px; border-radius: var(--radius); overflow: hidden; background: var(--c-panel-2); }
.ks-bild img { display: block; width: 64px; height: 64px; object-fit: cover; transform: scale(var(--zoom, 1)); transform-origin: var(--fokus, 50% 50%); }
.ks-bild__leer { display: block; width: 64px; height: 64px; }
.ks-bild--symbol { display: grid; place-items: center; height: 64px; color: var(--c-muted); }
.ks-bild--symbol svg { width: 26px; height: 26px; }
.ks-titel { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); line-height: 1.35; }
a.ks-titel:hover { color: var(--c-accent-dk); }
.ks-ausstattung { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.5; margin: .15rem 0 0; }
.ks-stueck { font-size: var(--fs-xs); color: var(--c-ink-soft); margin: .25rem 0 .4rem; }
.ks-menge { display: flex; align-items: center; gap: .4rem; }
.ks-schritt {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--c-line); border-radius: 50%;
  background: var(--c-panel-2); color: var(--c-ink); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); line-height: 1;
}
.ks-schritt:hover:not(:disabled) { border-color: var(--c-accent); }
/* Am unteren Rand angekommen: Der Knopf bleibt stehen, statt zu
   verschwinden – ein Platz, der sich beim Klicken verschiebt, ist
   schlimmer als ein Knopf, der gerade nicht kann. Wer die Position
   loswerden will, nimmt „entfernen“ daneben. */
.ks-schritt:disabled { opacity: .35; cursor: default; }
.ks-stufe { font-size: var(--fs-xs); color: var(--c-muted); margin: .35rem 0 0; }
.ks-zahl { min-width: 1.6rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; }
.ks-weg { margin-left: .5rem; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-xs); color: var(--c-muted); text-decoration: underline; text-underline-offset: 2px; }
.ks-weg:hover { color: var(--c-error); }
.ks-summe { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); white-space: nowrap; }

/* Nur noch eine Zeile: die Zwischensumme. Der Strich darüber trennt
   sie von der Liste, die Trennlinie zwischen den Beträgen braucht es
   ohne zweiten Betrag nicht mehr. */
.ks-summen { margin-bottom: .5rem; }
.ks-summen div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ks-summen b { color: var(--c-ink); }
.ks-gesamt { border-top: 1px solid var(--c-line); padding-top: .8rem; }
.ks-gesamt b { font-family: var(--font-head); font-size: var(--fs-lg); }
.ks-hinweis { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.55; margin: 0 0 1rem; }
.ks-frei { font-size: var(--fs-xs); color: var(--c-accent-dk); margin: -.5rem 0 1rem; }
.ks-aktionen { display: grid; gap: .6rem; }
.ks-gewerbe { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin: 1rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .korb-schublade, .korb-hinter { transition-duration: .01ms; }
}
@media (max-width: 520px) {
  .korb-schublade { width: 100%; }
}
/* Unter 760 Punkten trägt der Warenkorb nur Sinnbild und Zahl – das Wort
   schob ihn zwischen 560 und 700 Punkten über den rechten Rand. */
@media (max-width: 760px) {
  .shop-korb__wort { display: none; }
  .shop-korb { padding-inline: .85rem; }
}

/* ---------- Kundenkonto ---------- */
.konto__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.konto__karte {
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 3vw, 2rem);
}
.konto__karte--breit { margin-top: var(--space-4); }
.konto__karte h2 { font-size: var(--fs-lg); margin-bottom: .7rem; }
.konto__text { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.7; margin-bottom: 1.2rem; }
.konto__klein { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6; margin-top: .9rem; }
.konto__klein a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }
.konto__kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: var(--space-4); padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.konto__kopf p { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.konto__kopf form { margin: 0; }
.konto__tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.konto__tabelle th, .konto__tabelle td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--c-line); }
.konto__tabelle th { font-size: var(--fs-xs); color: var(--c-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.konto__leer { color: var(--c-muted); }

/* Nachbestellen steht in jeder Zeile, aber leise: Es ist ein Angebot,
   kein Aufruf – die Zeile gehört der Bestellung, nicht dem Knopf. */
.konto__nach { margin: 0; }
.konto__nachknopf {
  background: none; border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  padding: .35rem .8rem; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--c-ink-soft); white-space: nowrap;
  transition: var(--transition);
}
.konto__nachknopf:hover { border-color: var(--c-accent); color: var(--c-accent-dk); }
.konto__nachknopf:focus-visible { outline: none; box-shadow: var(--ring); }

.kasse__konto {
  font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.65;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: .8rem 1.1rem; margin-bottom: var(--space-4);
}
.kasse__konto a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Laufende Preisberechnung auf der Artikelseite ---------- */
/* Derselbe Grund wie die Eingabefelder, ohne Rahmen: Der Rechner steht
   zwischen ihnen und gehört zur selben Sache – die laufende Rechnung
   zu dem, was oben gewählt wurde. Ein eigener Rahmen machte daraus
   einen fremden Kasten.

   Etwas runder als ein Feld (18 statt 999): Hier stehen Zeilen
   übereinander, und eine Pille um eine Tabelle ist keine Form,
   sondern ein Unfall. */
.rechner {
  background: var(--v-feld); border: 0;
  border-radius: var(--v-feld-rund-gross); padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
}
.rechner__zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .3rem 0; font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.rechner__zeile b { color: var(--c-ink); font-weight: 600; white-space: nowrap; }
.rechner__zeile--klein { font-size: var(--fs-xs); color: var(--c-muted); }
.rechner__zeile--klein b { font-weight: 400; color: var(--c-muted); }

/* Die einzelnen Aufpreise stehen eingerückt unter dem Grundpreis –
   sie gehören zur Rechnung darüber, nicht daneben. */
.rechner__zeile--extra {
  padding: .15rem 0 .15rem .9rem;
  font-size: var(--fs-xs); color: var(--c-muted);
}
.rechner__zeile--extra span { position: relative; }
.rechner__zeile--extra span::before {
  content: ""; position: absolute; left: -.65rem; top: .55em;
  width: .3rem; height: 1px; background: currentColor; opacity: .5;
}
.rechner__zeile--extra b { font-weight: 600; color: var(--c-ink-soft); white-space: nowrap; }
[data-rechner-extras]:not(:empty) { margin-bottom: .2rem; }
.rechner__zeile--summe {
  border-top: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent);
  margin-top: .4rem; padding-top: .7rem;
}
.rechner__zeile--summe span { font-weight: 600; color: var(--c-ink); }
.rechner__zeile--summe b { font-family: var(--font-head); font-size: var(--fs-lg); }
.rechner__fuss { font-size: var(--fs-xs); color: var(--c-muted); margin: .5rem 0 0; }

/* Die Stichpunkte stehen jetzt in der Beschreibung, nicht mehr
   zwischen Bestellknopf und Text. */
.artikel__beschreibung .artikel__punkte { margin: 1rem 0 0; }

/* Der Hinweis in der obersten Leiste ist lang – er darf umbrechen und
   soll rechts stehen, ohne den Rückweg nach links zu verdrängen. */
/* ---------- Bildergalerie auf der Artikelseite ---------- */
/* Nicht mehr die Galerie allein – die ganze linke Spalte klebt (siehe
   weiter unten). Sonst blieben die Bilder stehen, während die Vorschau
   der gewählten Ausstattung nach oben hinausrollt. */
.galerie__spur {
  display: flex; gap: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--radius-lg); border: 1px solid var(--c-line);
  background: var(--c-panel);
  /* Rollbalken ausblenden, gerollt wird über die Vorschaubilder */
  scrollbar-width: none;
}
.galerie__spur::-webkit-scrollbar { display: none; }
.galerie__spur:focus-visible { outline: none; box-shadow: var(--ring); }
.galerie__bild { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.galerie__bild img { display: block; width: 100%; height: auto; }

.galerie__mini { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.galerie__knopf {
  display: block; width: 74px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-panel);
  transition: var(--transition);
}
.galerie__knopf img { display: block; width: 100%; height: 74px; object-fit: cover; opacity: .72; transition: opacity var(--transition); }
.galerie__knopf:hover img { opacity: 1; }
.galerie__knopf:hover { border-color: var(--c-accent-dk); }
.galerie__knopf.ist-aktiv { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.galerie__knopf.ist-aktiv img { opacity: 1; }
.galerie__knopf:focus-visible { outline: none; box-shadow: var(--ring); }

@media (prefers-reduced-motion: reduce) { .galerie__spur { scroll-behavior: auto; } }

/* „/Stk." direkt am Betrag – kleiner und ruhiger, damit die Zahl die
   Aufmerksamkeit behält. */
.shop-preis__je {
  font-family: var(--font-body); font-size: .42em; font-weight: 400;
  color: var(--c-muted); margin-left: .15em; letter-spacing: 0;
}

/* Das Merkzeichen macht auf einen Blick klar, an wen sich der Shop
   richtet – der Satz dahinter sagt es genau. */

/* Die Symbole der Abteilungen stehen heute nur noch außerhalb der
   Kopfleiste – im Abteilungsband auf der Startseite und in der
   Fußzeile. */
.nav__ico { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }

/* ============================================================
   Kopfleiste des Shops – eine Zeile

   Marke, der Knopf zum Sortiment, die häufigen Wege, Konto und Korb.
   Sie ist bei einer Abteilung so hoch wie bei fünfzig; das Feld
   darunter trägt den Katalog.
   ============================================================ */
.shop-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .9rem;
}
.shop-kopf__rechts { display: flex; align-items: center; gap: .7rem; }

/* Die Navigation steht mittig zwischen Marke und Konto.

   „margin-inline: auto" und nicht ein Raster mit drei gleichen
   Spalten: Die Marke ist breit, die beiden Knöpfe rechts sind es
   nicht. Ein starres Raster hätte die Navigation deshalb aus der
   Mitte des Zwischenraums gezogen, um sie in die Mitte der Zeile zu
   rücken – gemeint war aber der Zwischenraum. */
.shop-navi {
  display: flex; align-items: center; gap: .4rem;
  margin-inline: auto;
}

/* Der Knopf, der das Sortiment öffnet. Er sieht aus wie ein Knopf und
   nicht wie ein Menüpunkt – das ist der Unterschied, an dem man ihn
   findet, ohne ihn zu suchen. */
.sortknopf {
  display: inline-flex; align-items: center; gap: .55rem;
  height: 34px; padding-inline: .95rem;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--c-panel-2); color: var(--c-ink);
  font-size: .84rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.sortknopf svg { width: 15px; height: 15px; flex: none; }
.sortknopf__pfeil { transition: transform var(--transition); }
.sortknopf:hover { background: var(--c-panel); }
.sortknopf[aria-expanded="true"] { background: var(--c-accent); color: #fff; }
.sortknopf[aria-expanded="true"]:hover { background: var(--c-accent); }
.sortknopf[aria-expanded="true"] .sortknopf__pfeil { transform: rotate(180deg); }
.sortknopf:focus-visible { outline: none; box-shadow: var(--ring); }

/* Die Wege, die oft genommen werden. Sie stehen offen, damit man für
   sie das Feld nicht erst öffnen muss. */
.schnell { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.schnell a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem; border-radius: 8px;
  font-size: .84rem; color: var(--c-ink-soft); white-space: nowrap;
  transition: color var(--transition);
}
.schnell a:hover { color: var(--c-ink); }
.schnell a[aria-current] { color: var(--c-accent-lt); font-weight: 600; }
.schnell svg { width: 15px; height: 15px; opacity: .6; flex: none; }

/* Die Schnellwege gehen gestaffelt: erst „Kontakt“ (steht auch im
   Feld und im Fuß), dann die Wörter, dann alle. Der Warenkorb darf nie
   aus dem Bild geschoben oder zusammengedrückt werden. */
@media (max-width: 1299px) {
  .schnell__kontakt { display: none; }
}
@media (max-width: 1199px) {
  .schnell a { padding-inline: .45rem; font-size: .8rem; }
  .schnell svg { display: none; }
}
@media (max-width: 1099px) {
  .schnell { display: none; }
}
/* Und wenn selbst dafür der Platz nicht reicht, bleibt vom Knopf das
   Sinnbild. Der Zugang darf als Letztes verschwinden. */
@media (max-width: 520px) {
  .sortknopf { padding-inline: .7rem; font-size: 0; gap: .35rem; }
  .sortknopf svg { width: 17px; height: 17px; }
}

/* Auf dem Handy darf das Logo kleiner werden. */
@media (max-width: 720px) {
  .shop-kopf .brand img { height: 34px; }
}

/* Das Klappmenü der Website wird hier nicht mehr gebraucht. */
.shop-seite .nav__toggle { display: none; }

/* Geschlossene Schublade wirklich aus dem Weg nehmen.

   Ohne diese Regel gewinnt das display:flex weiter oben gegen das
   hidden-Attribut: Die Schublade bliebe dauerhaft im Aufbau stehen,
   nur nach rechts geschoben. Folgen: Die Seite ließ sich waagerecht
   schieben, und mit der Tabulatortaste wäre man in einen Warenkorb
   gesprungen, der gar nicht offen ist. */
/* Das Ausblenden regelt jetzt [hidden] in der Stilvorlage – für alle
   Elemente zugleich, nicht nur für diese beiden. */

/* Kopfleiste auf schmalen Geräten: Marke und Warenkorb dürfen umbrechen,
   statt über den Rand hinauszuragen. */
@media (max-width: 620px) {
  /* Handy: Logo groß mit „Speisekartenshop“ darunter, rechts daneben
     Menüknopf, Herz und Konto. Der Warenkorb – der breiteste Knopf –
     schwebt unter der Kopfzeile am rechten Rand und wandert mit ihr. */
  .shop-kopf { flex-wrap: nowrap; gap: .5rem; padding-block: .6rem; }
  .shop-kopf .brand { flex: 0 1 auto; min-width: 0; }
  .shop-kopf .brand img { height: 34px; }
  .shop-marke { display: block; font-size: .54rem; letter-spacing: .22em; text-indent: .22em; }
  .shop-navi { margin-left: auto; }
  .shop-kopf__rechts { gap: .25rem; }
  .shop-merk, .shop-konto { width: 32px; height: 32px; }
  .shop-korb {
    position: absolute; top: calc(100% + .55rem); right: 1rem; z-index: 5;
    height: 32px; padding-inline: .65rem .8rem; gap: .35rem; font-size: .72rem;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
  }
  .shop-korb .ico { width: 13px; height: 13px; }
  .shop-korb__zahl { transform: scale(.9); }
  .shop-korb .shop-korb__wort { display: inline; }
  .shop-korb { transition: opacity .25s ease, transform .25s ease, background var(--transition); }
  .shop-korb.ist-versteckt { opacity: 0; transform: translateY(-10px); pointer-events: none; }
  /* Der schwebende Korb liegt rechts über dem Seitenanfang – die
     Brotkrümel weichen ihm aus, damit nichts darunter verschwindet. */
  .shop-seite .breadcrumb { max-width: calc(100% - 7.5rem); }
}
@media (max-width: 360px) {
  .shop-kopf .brand img { height: 30px; }
  .shop-marke { font-size: .48rem; }
}

/* ============================================================
   Kopfleiste bleibt beim Rollen stehen
   ============================================================ */
.shop-seite .site-header.shop-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--transition), background var(--transition);
}

/* Sobald der Inhalt darunter wegrollt, wird die Leiste kompakter und
   bekommt einen Schatten – sonst nimmt sie beim Lesen zu viel Raum und
   „schwebt" ohne erkennbare Kante über dem Text.
   Die Klasse is-scrolled setzt das Skript der Website. */
/* Die Klasse heißt hier ist-gerollt und kommt aus shop.js, nicht aus
   dem Skript der Website: Das schaltet bei 8 px um, und die Leiste
   wird beim Umschalten rund 25 px flacher. Der Browser verankert den
   Inhalt (scroll anchoring) und verschiebt die Rollposition um genau
   diese 25 px – womit die Schwelle sofort wieder in die andere
   Richtung überschritten war. Die Leiste zitterte, weil sie sich
   nicht entscheiden konnte. shop.js schaltet mit Abstand: klein ab
   80 px, groß erst wieder unter 16 px. */
.shop-seite .site-header.shop-header { overflow-anchor: none; }
.shop-seite .site-header.shop-header.ist-gerollt {
  background: var(--c-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.9);
}
.shop-header.ist-gerollt .shop-kopf { padding-block: .45rem; }
.shop-header.ist-gerollt .brand img { height: 32px; }
.shop-kopf, .shop-kopf .brand img {
  transition: padding var(--transition), height var(--transition);
}

/* Sprungmarken dürfen nicht unter der Leiste verschwinden. */
.shop-seite { scroll-padding-top: calc(var(--shop-kopf-h) + 1.5rem); }

/* Klebende Blöcke im Inhalt beginnen unterhalb der Kopfleiste.
   Die tatsächliche Höhe misst shop.js und schreibt sie in
   --shop-kopf-h; der Wert hier gilt, bis das geschehen ist, und für
   den Fall, dass kein JavaScript läuft. */
/* Nur der Wert, bis shop.js gemessen hat – und für den Fall, dass kein
   JavaScript läuft. Mit einer Zeile statt zweien ist er kleiner. */
.shop-seite { --shop-kopf-h: 4.5rem; }
.kasse__uebersicht { top: calc(var(--shop-kopf-h) + 1rem); }

/* ============================================================
   Die linke Spalte der Artikelseite bleibt stehen.

   Wer Farbe, Prägung und Ecken durchprobiert, rollt dabei durch die
   rechte Spalte – und soll die Vorschau dabei im Blick behalten,
   sonst wählt er blind.

   Damit die Spalte in den Bildschirm passt, bekommen Vorschau und
   Galeriebild eine Höhengrenze. Ohne sie wäre die Spalte höher als
   das Fenster: Der obere Rand bliebe zwar kleben, das untere Ende
   wäre aber nie zu erreichen.
   ============================================================ */
@media (min-width: 901px) {
  .artikel__bilder {
    position: sticky;
    top: calc(var(--shop-kopf-h) + 1rem);
    align-self: start;
    --spalte-h: calc(100dvh - var(--shop-kopf-h) - 2rem);
    max-height: var(--spalte-h);

    /* Eine Zeile, die den ganzen Platz nimmt: So bekommt die Vorschau
       darin eine feste Höhe und kann sich selbst aufteilen. */
    grid-template-rows: minmax(0, 1fr);

    /* Bleibt trotzdem etwas übrig, rollt es innerhalb der Spalte –
       besser als ein Ende, an das man nicht herankommt. Nach der
       Aufteilung unten sollte der Fall nicht mehr eintreten. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  /* Die Vorschau teilt sich die Spalte selbst auf: Die Beschriftung
     nimmt, was sie braucht, die Zeichnung den Rest.

     Vorher stand hier ein fester Abzug von 5 rem für die
     Beschriftung. Das war eine gemessene Zahl – und sie stimmte, bis
     der Satz darunter länger wurde und drei Zeilen brauchte statt
     zwei. Dann ragte die Spalte um zehn Pixel über ihre Grenze, und
     neben der Zeichnung erschien ein Rollbalken für diese zehn Pixel.

     Eine Zahl, die bei jeder Textänderung nachgezogen werden muss,
     wird irgendwann vergessen. Das Raster rechnet sie stattdessen
     jedes Mal neu aus – gleich, wie lang der Satz ist. */
  .artikel__bilder .vorschau {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
    margin-bottom: 0;
  }
  .artikel__bilder .vorschau__buehne { min-height: 0; }
  .artikel__bilder .vorschau__bild { max-height: 100%; }

  /* Fotos ebenso: Das große Bild wird auf die Spaltenhöhe begrenzt,
     die Reihe der Vorschaubilder (90 px) bleibt darunter sichtbar –
     so passt alles ins Fenster und die Spalte braucht keinen
     Rollbalken. Hochkantfotos werden dadurch schmaler als die Spalte
     und stehen mittig. */
  .artikel__bilder .artikel__fotos { min-height: 0; }
  .artikel__bilder .artikel__fotobuehne { min-height: 0; justify-items: center; }
  .artikel__bilder .artikel__foto { width: auto; max-width: 100%; }
  .artikel__bilder .artikel__foto-bild {
    width: auto; max-width: 100%; max-height: var(--spalte-h); object-fit: contain;
  }
  .artikel__bilder .artikel__fotos--mehr .artikel__foto-bild {
    max-height: calc(var(--spalte-h) - 90px - .6rem - 4px);
  }
  .artikel__bilder .artikel__fotoreihe { justify-content: center; }
}

/* ---------- Kopfzeile der Fußleiste: Rückweg und Beratung ---------- */
.shop-fuss__oben {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .7rem 1.6rem; padding-bottom: var(--space-3); margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--c-line);
}
.shop-fuss__zurueck {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-sm); color: var(--c-ink-soft); transition: var(--transition);
}
.shop-fuss__zurueck:hover { color: var(--c-accent-dk); }
.shop-fuss__zurueck:hover svg { transform: translateX(-3px); }
.shop-fuss__zurueck svg { width: 16px; height: 16px; transition: transform var(--transition); }
.shop-fuss__zurueck b { color: var(--c-ink); font-weight: 600; }
.shop-fuss__beratung { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.shop-fuss__beratung a { color: var(--c-ink-soft); font-weight: 600; }
.shop-fuss__beratung a:hover { color: var(--c-accent-dk); }
.shop-fuss__beratung span { color: var(--c-muted); }

/* Ohne die Leiste darüber beginnt der Inhalt direkt unter der
   Kopfleiste – der Abstand zum ersten Element darf etwas größer sein. */
.shop-seite .page-hero { padding-top: var(--space-5); }

/* ============================================================
   Reiter und Mengenrabatt auf der Artikelseite
   ============================================================ */

/* Ohne Skript: Abschnitte untereinander mit Trennlinie. */
.reiter { margin-top: var(--space-5); }
.reiter__blatt { padding-block: var(--space-4); border-top: 1px solid var(--c-line); max-width: 80ch; }
.reiter__blatt h2 { font-size: var(--fs-lg); margin-bottom: .8rem; }
.reiter__blatt h3 { font-size: var(--fs-md); margin: 1.6rem 0 .6rem; }
.reiter__blatt p { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.78; margin-bottom: .8rem; }
.reiter__blatt a { color: var(--c-accent-dk); text-decoration: underline; text-underline-offset: 2px; }

/* Mit Skript: Leiste oben, nur ein Blatt sichtbar. */
.hat-reiter .reiter__blatt--js { padding-top: var(--space-4); border-top: 0; }
.reiter__leiste { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--c-line); }
.reiter__knopf {
  padding: .85rem 1.2rem; background: none; border: 0;
  border-bottom: 2px solid transparent;
  font: inherit; font-size: var(--fs-sm); color: var(--c-muted); cursor: pointer;
  transition: var(--transition);
}
.reiter__knopf:hover { color: var(--c-ink); }
.reiter__knopf.ist-aktiv { color: var(--c-accent-lt); border-bottom-color: var(--c-accent); }
.reiter__knopf:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius) var(--radius) 0 0; }

/* Steht ganz oben im Reiter, also ohne den Abstand, den eine h3
   mitten im Text braucht. */
/* Größentabelle im Reiter. Auf schmalen Geräten rollt sie waagerecht
   im eigenen Rahmen – die Seite selbst darf sich dabei nicht
   verschieben lassen. */
.tabellenrahmen { overflow-x: auto; margin-bottom: 1rem; }
.groessen { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 34rem; }
/* Die Einheit steht über der Tabelle, nicht in jeder Zelle und nicht im
   Spaltenkopf: Sie gilt für alle vier Maßspalten gleich. */
.groessen caption {
  caption-side: top; text-align: left;
  font-size: var(--fs-xs); color: var(--c-muted);
  padding-bottom: .8rem;
}
.groessen th, .groessen td {
  text-align: left; vertical-align: baseline;
  padding: .55rem .9rem .55rem 0;
  border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.groessen thead th {
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: .45rem;
}
/* Die Gruppenzeile ordnet die vier Maßspalten den zwei Bindungen zu.
   Ohne sie stünden vier Zahlen nebeneinander und man müsste raten,
   welche zu welcher gehört. Sie trägt keine Linie: Der Strich unter dem
   Kopf gehört zur Zeile mit den Spaltennamen, nicht hierher. */
.groessen__gruppen th { color: var(--c-ink); padding-bottom: .1rem; }
.groessen__gruppen th, .groessen__gruppen td { border-bottom-color: transparent; }
/* Die senkrechte Linie trennt die beiden Bindungen – zwei Blöcke, nicht
   fünf einzelne Spalten. Deshalb steht sie nur an dieser einen Kante. */
.groessen .ist-trenner { border-left: 1px solid var(--c-line); padding-left: 1rem; }
.groessen tbody th { font-weight: 700; color: var(--c-ink); width: 1%; padding-right: 1.6rem; }
.groessen td { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.groessen tbody tr:last-child th, .groessen tbody tr:last-child td { border-bottom: 0; }

/* Unter der Tabelle steht, was keine Zahl ist. Vorher stand es in der
   Papierspalte und hat sie auseinandergezogen – daher der unruhige
   Eindruck. */
.groessen-saetze {
  list-style: none; margin: .9rem 0 1rem; padding: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.groessen-saetze li {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-soft);
}
.groessen-saetze__wo { color: var(--c-muted); font-size: var(--fs-xs); white-space: nowrap; }
.details__titel { margin-top: 0 !important; }
.details { margin: 0 0 1.6rem; }
.details div { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-sm); }
.details dt { flex: 0 0 12rem; color: var(--c-muted); margin: 0; }
.details dd { margin: 0; color: var(--c-ink); }

@media (max-width: 560px) {
  .details div { flex-direction: column; gap: .1rem; }
  .details dt { flex: none; }
}

/* ---------- Bestellübersicht an der Kasse: mit Bild ---------- */
.kasse__posten li {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: .8rem; align-items: start;
  padding: .7rem 0; border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.kasse__posten li:last-child { border-bottom: 0; }

.kasse__bild { position: relative; display: block; width: 56px; }
/* Der innere Rahmen beschneidet den Zoom-Ausschnitt – die Marke sitzt außen und bleibt ganz zu sehen. */
.kasse__bildrahmen { display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 0; }
.kasse__bild img { transform: scale(var(--zoom, 1)); transform-origin: var(--fokus, 50% 50%); }
.kasse__bild img,
.kasse__bild--leer,
.kasse__bild--symbol {
  display: block; width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--c-line);
  background: var(--c-panel-2);
}
.kasse__bild--symbol { display: grid; place-items: center; color: var(--c-muted); }
.kasse__bild--symbol svg { width: 24px; height: 24px; }

/* Die Stückzahl sitzt als Marke am Bild – sie gehört zum Artikel und
   nicht in eine eigene Spalte, sonst zerfällt die Zeile. */
.kasse__menge {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: var(--grad-gold); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1;
}

.kasse__titel { color: var(--c-ink); line-height: 1.4; }
.kasse__aendern {
  display: inline-block; margin-top: .25rem;
  font-size: var(--fs-xs); color: var(--c-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.kasse__aendern:hover { color: var(--c-accent-dk); }
.kasse__zeile { font-weight: 700; color: var(--c-ink); white-space: nowrap; }

.kasse__zeilenaktion { display: flex; gap: .8rem; margin-top: .3rem; }
.kasse__weg {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--c-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.kasse__weg:hover { color: var(--c-error); }
.kasse__aendern { margin-top: 0; }

/* ============================================================
   Vorschau der Karte auf der Artikelseite
   ============================================================ */
.vorschau { margin: 0 0 1.2rem; }
/* Keine Bühne mehr: Der Kasten stand als eigene Fläche um die
   Zeichnung und nahm ihr Platz weg – Rahmen, Rundung und Polsterung
   zusammen rund 60 Pixel, die keiner Information dienten. Die Karte
   steht jetzt frei auf dem Seitengrund.

   Raster und Position bleiben: Der Einblick hängt absolut in dieser
   Fläche, und place-items hält die Zeichnung mittig, wenn sie
   schmaler ist als die Spalte. */
.vorschau__buehne {
  position: relative;
  display: grid; place-items: center;
}
/* Die gezeichnete Karte ist das, worauf beim Auswählen geschaut wird –
   sie bekommt so viel Platz, wie die Bühne hergibt. */
/* Die Zeichenfläche ist von 340 auf 405 Einheiten gewachsen, damit der
   Schatten hineinpasst. Damit die Karte darin gleich groß bleibt,
   wächst die Grenze im selben Verhältnis: 460 × 405 / 340 = 548. */
.vorschau__bild { width: 100%; max-width: 548px; height: auto; display: block; }
/* Aufgeschlagen ist die Karte doppelt so breit und halb so hoch –
   dann darf sie die Bühne ganz nehmen, sonst schrumpft sie beim
   Aufklappen, statt zu wachsen. */
/* Aufgeschlagen ist die Karte doppelt so breit und halb so hoch. Als
   Hauptbild taugt sie nicht – man kauft keine aufgeschlagene Karte –,
   deshalb sitzt sie klein in der Ecke über der Vorderseite. */
.vorschau__einblick {
  position: absolute; right: .6rem; bottom: .6rem;
  /* Größer als früher: Seit die Laschen beschriftet sind, muss die
     Schrift darin lesbar sein. Bei 190 Pixeln war sie es nicht. */
  width: 46%; max-width: 270px;
  padding: .4rem .4rem .1rem;
  background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.8);
}
.vorschau__einblick .vorschau__bild { max-width: 100%; }
.vorschau__einblick-text {
  display: block; text-align: center;
  font-size: .62rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c-muted);
  padding: .2rem 0 .25rem;
}
/* Die Farben kommen über Stilregeln, nicht als fill="var(…)" im
   SVG-Attribut: Dort wird die Variable nur beim ersten Zeichnen
   aufgelöst, spätere Änderungen blieben wirkungslos – die Schrauben
   behielten ihre Anfangsfarbe, während die Variable längst eine andere
   trug. */
.v-mappe { fill: var(--v-karte); }

/* Die Materialstruktur wird eingerechnet, nicht aufgemalt.

   Aufgemalt hieß: eine helle Linie mit 7,5 % Deckkraft. Auf einer
   mittelhellen Karte ist das ein feiner Faden. Auf einer fast
   schwarzen ist derselbe Faden dreimal so hell wie der Grund – und
   weil die dunkle Linienschar auf Schwarz nichts mehr abdunkeln
   kann, bleibt von der Leinwandbindung nur eine Richtung übrig. Aus
   dem Gewebe werden Streifen.

   „overlay" rechnet die Linie gegen den Grund: Der Zuwachs wächst
   mit der Helligkeit der Karte. Helle Karten behalten ihren Stoff,
   dunkle bekommen nur noch eine Andeutung – ohne dass irgendwo eine
   Farbe gepflegt werden müsste. Ändert der Kunde die Farbe im
   Browser, stimmt es weiter, weil gerechnet und nicht gesetzt wird. */
.v-struktur { mix-blend-mode: overlay; }
/* Gemischt wird nur innerhalb der Zeichnung. Ohne diese Zeile
   nähme die Struktur auch den Seitenhintergrund als Grund. */
.vorschau__bild { isolation: isolate; }
.v-metall-praegung { fill: var(--v-praegung); }
.v-strich-praegung { stroke: var(--v-praegung); }
.v-ecke { fill: var(--v-ecken); }

/* Die Farbwechsel sollen gleiten, nicht springen. */
.v-mappe, .v-metall-praegung, .v-strich-praegung, .v-ecke {
  transition: fill .32s ease, stroke .32s ease;
}
/* Ohne gewählte Schutzecken bleibt auch der Metallglanz weg – sonst
   sähe man Ecken, die nicht bestellt sind. Gilt für die Zeichnung
   auf der Artikelseite wie für die in der Kachel. */
.ohne-ecken .vorschau__ecken { opacity: 0; }

/* Schwarze Ecken ohne Glanz.

   Über jeder Ecke liegt sonst ein Verlauf, der das Licht auf
   poliertem Messing nachzeichnet – bei Gold und Silber genau
   richtig. Eine schwarze Ecke ist aber kein poliertes Metall,
   sondern brüniert oder lackiert; ein heller Streifen darauf sähe
   aus, als wäre sie doch silbern. */
.ecken-matt .v-ecke-glanz { display: none; }
.vorschau__ecken { opacity: 1; transition: opacity .32s ease; }

/* Die Nahaufnahme des Stoffs, als kleiner Kasten über dem Farbkreis.

   Klein und am Kreis, nicht groß auf der Bühne: Die Bühne zeigt die
   Karte, und die soll beim Umsehen stehen bleiben. Der Kasten
   beantwortet eine Frage zum Kreis darunter – also gehört er dorthin,
   wie ein Zettel, den man neben eine Farbe legt.

   Die Reihe der Kreise ist der Bezugsrahmen; wohin der Kasten
   waagerecht rückt, rechnet das Skript aus dem Kreis darunter.

   Der Kasten nimmt die Maus entgegen: Man soll hineinfahren und das
   Foto anklicken können, um den Stoff größer zu sehen. Damit er dabei
   nicht verschwindet, wartet das Skript nach dem Verlassen des Kreises
   einen Augenblick – die Lücke dazwischen ist in dieser Zeit längst
   überfahren. */
.wahlgruppe--kreise .wahlgruppe__werte { position: relative; }
.stoffbox {
  position: absolute; bottom: calc(100% + .55rem); left: 0;
  width: 122px; padding: 6px 6px 0;
  background: var(--c-panel-2); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: 0 10px 26px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none; z-index: 6;
}
/* Erst wenn er wirklich zu sehen ist. Ein unsichtbarer Kasten, der
   Klicks abfängt, läge sonst über den Kreisen der Reihe darüber. */
.stoffbox.ist-da { pointer-events: auto; }
.stoffbox[hidden] { display: none; }
.stoffbox.ist-da { opacity: 1; transform: translateY(0); }
/* Das Foto ist bereits in der richtigen Größe geschnitten – auf 110
   Punkte für den gewöhnlichen Schirm, auf 220 für den
   hochauflösenden. Der Browser wählt am srcset.

   Deshalb hier nichts mehr zuschneiden und nichts umrechnen: Ein
   Gewebe nimmt beides übel. Verkleinert mittelt der Browser die
   Fäden weg – gemessen fiel die sichtbare Struktur dabei von 12,2
   auf 8,1 –, vergrößert wird sie weich. */
.stoffbox img {
  display: block; width: 110px; height: 110px;
  object-fit: cover; border-radius: 3px;
}
/* Das Foto sitzt in einem Knopf: Ein Klick öffnet es größer. Der Knopf
   bringt seine eigene Fläche mit, deshalb hier alles zurücksetzen –
   sonst schöbe die Standardfüllung das Bild aus dem Kasten. */
.stoffbox__lupe {
  display: block; position: relative;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 3px; line-height: 0;
}
.stoffbox__lupe[hidden] { display: none; }
.stoffbox__lupe:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Das Zeichen liegt still in der Ecke, bis die Maus im Kasten ist.
   Immer sichtbar verdeckte es ein Stück Gewebe – und das ist das
   Einzige, was der Kasten zeigen soll. */
.stoffbox__zeichen {
  position: absolute; right: 4px; bottom: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(8,8,10,.72); color: #fff;
  opacity: 0; transform: scale(.9);
  transition: opacity .14s ease, transform .14s ease;
}
.stoffbox__zeichen svg { width: 13px; height: 13px; }
.stoffbox__lupe:hover .stoffbox__zeichen,
.stoffbox__lupe:focus-visible .stoffbox__zeichen { opacity: 1; transform: scale(1); }
.stoffbox b {
  display: block; padding: .35rem 0 .4rem;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Spitze zeigt auf den Kreis. Zwei Dreiecke übereinander: das
   untere in der Randfarbe, das obere in der Füllung – so hat die
   Spitze denselben Rand wie der Kasten. */
.stoffbox::after,
.stoffbox::before {
  content: ""; position: absolute; top: 100%; left: 50%;
  border: 7px solid transparent; border-bottom: 0;
}
.stoffbox::before { left: var(--spitze, 50%); margin-left: -7px; border-top-color: var(--c-line); }
.stoffbox::after  { left: var(--spitze, 50%); margin-left: -6px; border-width: 6px; border-bottom: 0; border-top-color: var(--c-panel-2); }

.vorschau__text {
  font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.6;
  margin-top: .7rem; text-align: center;
}
.vorschau__text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Farbtupfer in der Auswahl – ein Wort allein sagt nicht, wie
   „Olivgrün" aussieht. */
.wahlwert__tupfen {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35);
}

/* ---------- Mengenrabatt im Rechenkasten ---------- */
.rechner__staffel {
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  margin-bottom: .9rem; padding-bottom: .9rem;
}
.rechner__staffel th {
  text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  padding-bottom: .35rem; border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent);
}
.rechner__staffel th:last-child { text-align: right; }
/* Die Tabelle ragt um den Innenabstand über den Kasten hinaus, damit
   der Hintergrund der hervorgehobenen Zeile bis an dessen Rand reicht –
   und die Beträge trotzdem auf einer Linie mit allem anderen stehen.

   Vorher bekam nur die aktive Zeile zusätzliche Innenabstände; dadurch
   rutschte ausgerechnet ihr Betrag um acht Pixel nach links, während die
   übrigen bündig blieben. */
.rechner__staffel { margin-inline: -.5rem; width: calc(100% + 1rem); }
.rechner__staffel th { padding-inline: .5rem; }
.rechner__staffel td {
  padding: .4rem .5rem; color: var(--c-ink-soft);
  border-bottom: 1px solid color-mix(in oklab, var(--c-ink) 9%, transparent);
}
.rechner__staffel td:last-child {
  display: flex; align-items: baseline; gap: .8rem;
  font-weight: 600; color: var(--c-ink); white-space: nowrap;
}
.rechner__staffel tr:last-child td { border-bottom: 0; }

/* Der Betrag wird nach rechts geschoben, die Ersparnis bleibt links.

   Über margin-left:auto und nicht über justify-content: In der ersten
   Zeile gibt es keine Ersparnis, und dann stünde der Betrag sonst links
   statt unter seiner Überschrift. */
.staffel__preis { margin-left: auto; }
.staffel__spar {
  font-size: var(--fs-xs); font-weight: 400; color: var(--c-success);
}

/* Die Stufe, in der der Kunde gerade steht. */
.rechner__staffel tr.ist-aktiv td { color: var(--c-ink); background: var(--c-accent-sft); }
.rechner__staffel tr.ist-aktiv td:first-child { border-radius: var(--radius) 0 0 var(--radius); font-weight: 600; }
.rechner__staffel tr.ist-aktiv td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.rechner__rechnung { border-top: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent); padding-top: .8rem; }
.rechner__staffel + .rechner__rechnung { border-top: 0; padding-top: 0; }

/* ============================================================
   Ausstattung als Farbkreise
   ============================================================ */
.wahlgruppe--kreise { border: 0; padding: 0; margin: 0 0 1.5rem; }
.wahlgruppe--kreise legend {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem;
  padding: 0; margin-bottom: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .07em;
}
/* Der Name der gewählten Farbe – die Kreise selbst tragen keinen Text. */
.wahlgruppe--kreise legend b {
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink);
  text-transform: none; letter-spacing: 0;
}
/* Die Farbkreise stehen enger als andere Wahlen: Seit es elf Farben
   sind, brauchten sie bei .6rem zusammen 558 px in einer 548er
   Spalte und brachen um. Enger zu rücken kostet nichts – die Kreise
   bleiben so groß, wie sie waren, und zwei Zeilen Farbe sähen aus
   wie zwei Gruppen. */
.wahlgruppe--kreise .wahlgruppe__werte { display: flex; flex-wrap: wrap; gap: .45rem; }

/* Gruppen ohne Farben – etwa der Tageskarteneinschub. Dieselbe
   Überschriftenzeile wie bei den Kreisen, damit die Spalte einen Takt
   behält; darunter Schaltflächen mit Text, weil hier eine Beschreibung
   die Wahl trägt und kein Farbton. */
.wahlgruppe--text { border: 0; padding: 0; margin: 0 0 1.5rem; }
/* Auswahlliste – für Gruppen mit langen Beschreibungen. Sieht aus wie
   die übrigen Felder der Seite, nicht wie ein Formularelement von 1998. */
.wahlliste {
  width: 100%; max-width: 24rem;
  padding: .7rem 2.4rem .7rem 1rem;
  background: var(--v-feld); color: var(--c-ink);
  border: 0; border-radius: var(--v-feld-rund);
  font: inherit; font-size: var(--fs-sm);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.15rem center, right .85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  transition: background-color .18s ease;
}
.wahlliste:hover { background-color: var(--v-feld-hover); }
.wahlliste__reihe { display: flex; align-items: center; gap: .5rem; }

/* Welches Papier in das gewählte Format passt, steht offen unter der
   Auswahl – es ist die Frage, die dort als Nächstes kommt. Das
   Papierzeichen davor ordnet den Text der Auswahl zu, statt ihn als
   losen Absatz stehen zu lassen. */
.wahlinfo {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: .6rem 0 0; padding: .8rem 1rem;
  background: var(--v-feld); border: 0;
  border-radius: var(--v-feld-rund-gross);
  font-size: var(--fs-xs); color: var(--c-ink-soft); line-height: 1.6;
}
.wahlinfo__zeichen { width: 17px; height: 17px; flex-shrink: 0; margin-top: .15rem; color: var(--c-muted); }
.wahlinfo__text { display: flex; flex-direction: column; gap: .25rem; }
.wahlinfo__klein { color: var(--c-muted); }
/* Wie überall im Laden: beim Öffnen dasselbe Bild wie beim Überfahren. */
.wahlliste:focus { outline: none; background-color: var(--v-feld-fokus); box-shadow: none; }
/* Die aufgeklappte Liste zeichnet das Betriebssystem – dort hilft nur,
   dass Schrift und Fläche zueinander passen. */
.wahlliste option { background: var(--c-panel); color: var(--c-ink); }

/* Schrittnummer vor dem Namen der Wahlgruppe. */
/* Einheit neben dem Namen: kleiner, ohne Versalien – sie ist ein
   Zusatz, keine zweite Überschrift. */
.wahlgruppe legend .wahlgruppe__einheit {
  font-size: var(--fs-xs); font-weight: 400; color: var(--c-muted);
  text-transform: none; letter-spacing: 0;
}

.wahlgruppe legend .wahlgruppe__nr {
  display: inline-grid; place-items: center;
  width: 1.5rem; height: 1.5rem; margin-right: .1rem;
  border-radius: 50%;
  background: var(--c-accent-sft); border: 1px solid var(--c-accent);
  color: var(--c-accent-dk);
  font-size: .72rem; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.wahlgruppe--text legend {
  display: block; padding: 0; margin-bottom: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .07em;
}

.kreiswahl { position: relative; cursor: pointer; line-height: 0; }
.kreiswahl input { position: absolute; opacity: 0; width: 0; height: 0; }

.kreiswahl__feld {
  display: block; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.4);
  transition: transform var(--transition), box-shadow var(--transition);
}
.kreiswahl:hover .kreiswahl__feld { transform: translateY(-2px); }

/* Der Ring sitzt außerhalb des Kreises, damit die Farbe selbst
   unangetastet bleibt – ein Rahmen darauf würde sie verfälschen. */
.kreiswahl input:checked + .kreiswahl__feld {
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.4),
              0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent);
}
.kreiswahl input:focus-visible + .kreiswahl__feld {
  box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent-lt);
}

/* „Keine Ecken" und Ähnliches: durchgestrichener Kreis statt einer
   erfundenen Farbe. */
.kreiswahl--ohne .kreiswahl__feld {
  background: var(--c-panel-2);
  border-color: var(--c-line);
  box-shadow: none;
  position: relative; overflow: hidden;
}
.kreiswahl--ohne .kreiswahl__feld::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%;
  height: 1.5px; background: var(--c-muted);
  transform: rotate(-45deg); transform-origin: center;
}
.kreiswahl--ohne input:checked + .kreiswahl__feld {
  box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent);
}

.kreiswahl__auf {
  position: absolute; right: -6px; bottom: -4px;
  padding: 0 5px; border-radius: 999px;
  background: var(--c-accent); color: #fff;
  font-family: var(--font-body); font-size: .6rem; font-weight: 700; line-height: 1.6;
  white-space: nowrap;
}

/* ============================================================
   Helle Ansicht – die Stellen im Shop, an denen eine Farbe fest
   im Regelwerk steht und einen dunklen Untergrund voraussetzt.
   Alles andere folgt den Farbwerten aus der Stilvorlage.
   ============================================================ */

/* Der Ring um das gewählte Farbfeld sitzt auf hellem Grund. */
:root[data-thema="hell"] .kreiswahl input:checked + .kreiswahl__feld {
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.28),
              0 0 0 3px var(--c-panel), 0 0 0 5px var(--c-accent);
}
:root[data-thema="hell"] .kreiswahl--ohne input:checked + .kreiswahl__feld {
  box-shadow: 0 0 0 3px var(--c-panel), 0 0 0 5px var(--c-accent);
}
:root[data-thema="hell"] .kreiswahl--ohne .kreiswahl__feld {
  background: var(--c-panel); border-color: var(--c-line);
}
:root[data-thema="hell"] .kreiswahl__feld { border-color: rgba(20,20,26,.18); }

/* Der Erläuterungstext der gewählten Zahlart sitzt auf einer rot
   eingefärbten Fläche – dort trägt das Tertiärgrau nicht weit genug.
   Der Auswahlknopf steht nicht mehr dabei: Er ist inzwischen voll rot
   und trägt weiße Schrift, ein Grauton wäre dort ein Rückschritt. */
:root[data-thema="hell"] .wahl-k:has(input:checked) span { color: var(--c-ink-soft); }

/* Warnungen: auf Hell reicht ein blasser Ton, das Leuchtrot der
   dunklen Ansicht wäre hier ein Schrei. */
:root[data-thema="hell"] .shop-meldung--warnung,
:root[data-thema="hell"] .korb-schublade__fehler {
  background: rgba(179,43,43,.08); border-color: rgba(179,43,43,.3); color: var(--c-ink-soft);
}

/* ---------- Der Umschalter selbst ---------- */
/* Der Umschalter steht frei über dem Pfeil nach oben – sein Stil
   steht weiter unten bei den übrigen schwebenden Bedienelementen. */

/* Zwei Sinnbilder liegen übereinander; gezeigt wird immer das, wohin
   der Klick führt – bei dunkler Ansicht die Sonne, bei heller der Mond.
   Ohne JavaScript gibt es nichts zu schalten, also auch keinen Knopf. */
.thema-schalter__mond { display: none; }
:root[data-thema="hell"] .thema-schalter__sonne { display: none; }
:root[data-thema="hell"] .thema-schalter__mond { display: block; }
html:not(.js) .thema-schalter { display: none; }

/* ============================================================
   Kopf und Fuß bleiben dunkel – auch in der hellen Ansicht.

   Die Leiste trägt das Logo und den roten Warenkorbknopf; beides
   steht auf Dunkel, wie überall sonst auch. Statt jede Regel darin
   zu wiederholen, bekommen die beiden Bereiche einfach die dunklen
   Farbwerte zurück. Alles darin folgt ihnen von selbst.
   ============================================================ */
/* Die Warenkorb-Schublade steht nicht mehr dabei: Sie fährt über die
   helle Seite und wird gelesen wie eine Seite – nicht wie ein Rahmen
   um sie herum. Kopf und Fuß sind dunkle Ränder, die Schublade ist
   Inhalt. */
:root[data-thema="hell"] .shop-header,
:root[data-thema="hell"] .site-footer {
  color-scheme: dark;

  --c-bg:        #0e0e10;
  --c-surface:   #151517;
  --c-surface-2: #222226;
  --c-panel:     #18181b;
  --c-panel-2:   #242429;
  --c-deep:      #08080a;
  --c-line:      #2b2b30;

  --c-ink:       #f5f5f6;
  --c-ink-soft:  #bcbcc2;
  --c-muted:     #86868d;

  --c-accent:    #d6202c;
  --c-accent-dk: #f04652;
  --c-accent-lt: #ff5d67;
  --c-accent-sft: rgba(214,32,44,.16);
  --c-error:     #ff6b6b;
}

/* Der Fuß bleibt dunkel, auch wenn die Seite hell steht: Er ist als
   dunkle Bank gebaut und trägt das weiße Logo. Die Werte oben geben
   ihm die dunklen Farben zurück; hier stehen nur die Flächen, die er
   sonst aus --c-deep zöge – und das ist hell ein Grauton. */
:root[data-thema="hell"] .site-footer {
  background: #0c0c0f; color: #b6b6c0; border-top-color: #292930;
}
/* Das Muster im Grund ist für Dunkel gezeichnet. */
:root[data-thema="hell"] .site-footer::before { opacity: .5; }

/* ============================================================
   Das Schaufenster des Ladens

   Die Startseite lebt von den Bausteinen der Website – Slider,
   Kacheln, Ablauf. Hier steht nur, was der Laden zusätzlich braucht.
   ============================================================ */

/* Der Verlauf über den Bildern ist im Laden eine Spur kräftiger als
   auf der Website. Dort liegen ausgesuchte Aufnahmen, hier stehen
   Produktfotos, die auch mal hell sind – gemessen kam die hellste
   Stelle hinter der Überschrift auf einen Kontrast von 4,2. Das
   reicht für große Schrift, aber ohne Reserve für das nächste Bild. */
.shop-seite .slide::after {
  background: linear-gradient(90deg, rgba(8,8,10,.92) 0%, rgba(8,8,10,.8) 40%, rgba(8,8,10,.4) 72%, rgba(8,8,10,.12) 100%);
}

/* Zwei gleichberechtigte Wege. Sie sollen nebeneinander stehen wie
   zwei Türen, nicht wie Haupteingang und Nebenausgang. */
.shop-wege { align-items: stretch; }
.shop-wege .card { display: flex; flex-direction: column; }
.shop-wege .card .link-arrow { margin-top: auto; }

/* Schaufenster: Slider und Abteilungsband als ein Stück. Das Band legt
   sich über die untere Kante des Bildes – so hat der Besucher die
   Abteilungen sofort vor sich, ohne zu scrollen. Der Slider hat
   overflow: hidden, deshalb liegt das Band außerhalb von ihm und wird
   über den negativen Abstand hochgezogen. */
.shop-schaufenster { position: relative; padding-bottom: var(--space-4); }
.shop-schaufenster .slider { height: clamp(400px, 62vh, 620px); }

.shop-band {
  position: relative; z-index: 6;
  margin-top: -3.4rem;
  padding: 1.1rem clamp(1rem, 3vw, 1.6rem) 1.2rem;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.shop-band__titel {
  margin: 0 0 .8rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .09em;
}

/* Auf schmalen Geräten hat das Überlappen keinen Reiz – dort steht das
   Band einfach unter dem Bild, sonst deckt es die Überschrift zu. */
@media (max-width: 720px) {
  .shop-band { margin-top: var(--space-2); }
  .shop-schaufenster .slider { height: clamp(360px, 56vh, 480px); }
}

/* Abteilungen als Kachelreihe. Kleiner als Artikelkacheln – sie sind
   ein Wegweiser, keine Ware. */
.shop-abteilung-grid {
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.shop-abteilung {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  padding: 1.1rem 1.2rem;
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.shop-abteilung:hover { border-color: var(--c-accent); transform: translateY(-3px); background: var(--c-panel-2); }
.shop-band .shop-abteilung { background: var(--c-panel-2); padding: .85rem .9rem; }
.shop-band .shop-abteilung:hover { background: var(--c-surface-2); }
.shop-band .shop-abteilung-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.shop-abteilung__ico { display: grid; place-items: center; width: 34px; height: 34px; color: var(--c-accent-dk); }
.shop-abteilung__ico svg { width: 22px; height: 22px; }
.shop-abteilung__name { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600; color: var(--c-ink); }
.shop-abteilung__zahl { font-size: var(--fs-xs); color: var(--c-muted); }

/* Der Ausweg unter den fertigen Ausführungen: Wer nichts Passendes
   findet, soll nicht zurückblättern müssen. */
.shop-anders {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.shop-anders .link-arrow { margin-left: .4rem; }

/* Beratung: Text links, die beiden Wege rechts. */
.shop-beratung {
  display: grid; gap: var(--space-4);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.shop-beratung h2 { font-size: var(--fs-xl); margin-bottom: .7rem; }
.shop-beratung p { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.7; }
.shop-beratung__wege { display: flex; flex-direction: column; gap: .8rem; }

@media (max-width: 820px) {
  .shop-beratung { grid-template-columns: 1fr; }
}

/* ---------- Das Sortimentfeld ----------

   Es spannt über die ganze Kopfzeile. Der nächste positionierte
   Vorfahr ist die Kopfleiste selbst – sie klebt beim Rollen und ist
   damit ohnehin positioniert. */
.shop-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--c-surface); border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
/* Geöffnet wird per Klick und nicht beim Überfahren: Ein Feld, das von
   selbst aufgeht, sobald der Zeiger vorbeiwandert, steht auf dem Weg
   zum Warenkorb im Weg. */
.shop-mega.ist-offen {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.shop-mega__innen {
  display: grid; grid-template-columns: repeat(3, 1fr) minmax(0, 1.15fr);
  gap: 2.4rem; padding-block: 1.8rem 2rem;
}
.shop-mega h4 {
  margin: 0 0 .9rem; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 700;
}
.shop-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.shop-mega ul a { display: flex; align-items: flex-start; gap: .6rem; padding: .42rem 0; }
.shop-mega ul b { display: block; font-size: .9rem; font-weight: 600; color: var(--c-ink); }
.shop-mega ul a > span > span { font-size: .78rem; color: var(--c-muted); line-height: 1.45; }
.shop-mega ul a:hover b { color: var(--c-accent-dk); }
.shop-mega__punkt {
  width: 5px; height: 5px; border-radius: 50%; margin-top: .5rem;
  background: var(--c-accent-dk); opacity: .65; flex: none;
}
.shop-mega__tipp {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 1.1rem; display: grid; gap: .7rem; align-content: start;
}
/* Sofort lieferbar: grüner Punkt und Marke, der Name in Grün. */
.shop-mega__lager .shop-mega__punkt { background: var(--c-success); opacity: 1; box-shadow: 0 0 0 3px rgba(20,121,76,.15); }
.shop-mega ul .shop-mega__lager b { color: var(--c-success); }
.shop-mega__marke {
  display: inline-block; vertical-align: 1px; margin-left: .35rem; padding: .08rem .45rem;
  font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-success); background: rgba(20,121,76,.12); border-radius: 999px;
}
/* Fußzeile über alle Spalten: die zwei Knöpfe. */
.shop-mega__fuss {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .7rem;
  padding-top: 1.2rem; border-top: 1px solid var(--c-line);
}
.shop-mega__knopf { padding: .7rem 1.25rem; font-size: .84rem; gap: .5rem; }
.shop-mega__knopf svg { width: 17px; height: 17px; flex: none; }
.shop-mega__knopf--lager { --btn-bg: transparent; --btn-fg: var(--c-success); border-color: var(--c-success); }
.shop-mega__knopf--lager:hover { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.shop-mega__knopf-zusatz { font-weight: 500; opacity: .75; font-size: .76rem; }
.shop-mega__knopf-zusatz::before { content: "·"; margin-right: .5rem; }
@media (max-width: 899px) {
  .shop-mega__fuss { flex-direction: column; }
  .shop-mega__knopf { justify-content: center; }
}
/* Die leise Zeile ganz unten: Sondermaß, Fragen, Kontakt, Telefon. */
.shop-mega__hilfe {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem;
  padding-top: .9rem; margin-top: .3rem; border-top: 1px solid var(--c-line);
}
.shop-mega__hilfe a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem 0; font-size: .82rem; color: var(--c-ink-soft);
  transition: color var(--transition);
}
.shop-mega__hilfe a:hover, .shop-mega__hilfe a[aria-current] { color: var(--c-ink); }
.shop-mega__hilfe svg { width: 15px; height: 15px; opacity: .65; flex: none; }
.shop-mega__hilfe-tel { margin-left: auto; font-weight: 600; }
@media (max-width: 899px) {
  .shop-mega__hilfe-tel { margin-left: 0; }
}
.shop-mega__tipp img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; }
/* Die gezeichnete Karte im Menuekasten. Sie wird eingepasst und
   nicht beschnitten - sie zeigt das Format, und ein angeschnittenes
   Format ist keine Angabe mehr. Der Grund ist derselbe wie beim
   Foto, damit der Kasten gleich aussieht, ob dort eine Zeichnung
   steht oder eine Aufnahme. */
.shop-mega__karte {
  margin: 0; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16/10; border-radius: 6px; background: var(--c-panel-2);
}
.shop-mega__karte .vorschau__bild {
  width: auto; height: 100%; max-width: none; transform: scale(1.12);
}
.shop-mega__tipp b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.1; color: var(--c-ink); }
.shop-mega__tipp p { margin: 0; font-size: .84rem; color: var(--c-ink-soft); line-height: 1.5; }
.shop-mega__tipp .btn { justify-content: center; padding: .7rem 1.2rem; font-size: .84rem; }
/* Auf schmalen Geräten steht alles untereinander – ein Raster mit vier
   Spalten wäre dort unbedienbar. Das Feld bleibt trotzdem über dem
   Inhalt und rollt in sich selbst: Stünde es im Fluss, schöbe es beim
   Öffnen die halbe Seite nach unten.

   Der Kasten am Ende behält seinen Knopf und verliert nur das Bild.
   Ganz ausgeblendet war er, solange die Leiste darunter den
   Konfigurator noch führte – jetzt ist er der einzige Weg dorthin. */
@media (max-width: 899px) {
  .shop-mega {
    max-height: calc(100dvh - var(--shop-kopf-h, 4.5rem));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .shop-mega__innen { grid-template-columns: 1fr; gap: 1.4rem; padding-block: 1.4rem 1.6rem; }
  .shop-mega__tipp img { display: none; }
}

/* Zugang zum Konto in der oberen Zeile. */
/* Beide Knöpfe gleich hoch und gleich gerundet, damit sie als Paar
   lesbar sind. Der Zugang zum Konto steht offen – ohne Fläche, nur
   eine Haarlinie –, der Warenkorb trägt als einziger die Farbe. Zwei
   gefüllte Knöpfe nebeneinander streiten sich um denselben Blick. */
/* Nur das Zeichen: Das Sinnbild einer Person ist im Handel eindeutig,
   und rechts oben wird der Platz gebraucht. Ein Kreis wie der Knopf
   daneben, nur ohne Fläche. */
.shop-konto {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; padding: 0;
  /* Ohne Rahmen: Er saß direkt neben dem gefüllten Warenkorb und ließ
     die beiden wie ein Paar aussehen, das sie nicht sind – der eine
     führt zum Kauf, der andere nur ins Konto. Der Kreis kommt jetzt
     erst beim Überfahren, als Fläche statt als Strich. */
  border: 0; border-radius: 999px;
  background: transparent; color: var(--c-ink-soft);
  font-size: .8rem; font-weight: 600; letter-spacing: 0;
  transition: color var(--transition), background var(--transition);
}
.shop-konto:hover {
  color: var(--c-ink);
  background: color-mix(in oklab, var(--c-ink) 10%, transparent);
}
.shop-konto svg { width: 17px; height: 17px; }
/* Das Wort bleibt im Markup, nur unsichtbar – sonst hätte der Verweis
   für Vorleseprogramme keinen Namen mehr. */
.shop-konto__wort {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.shop-konto[aria-current] { color: var(--c-accent-dk); }

/* ---------- Der Umschalter steht frei über dem Pfeil nach oben ---------- */
.thema-schalter {
  position: fixed; right: 22px; bottom: 152px; z-index: 900;
  display: inline-grid; place-items: center;
  width: 50px; height: 50px; padding: 0;
  border: 1px solid var(--c-line); border-radius: 50%;
  background: var(--c-panel-2); color: var(--c-ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}
.thema-schalter:hover { color: var(--c-accent-dk); border-color: var(--c-accent); transform: translateY(-3px); }
.thema-schalter .ico { width: 21px; height: 21px; }
@media (max-width: 720px) {
  .thema-schalter { right: 16px; bottom: calc(220px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
}

/* ------------------------------------------------------------
   Das Format an der Zeichnung.

   Die Karte wächst und schrumpft zwar mit der Wahl, aber ohne einen
   Vergleich daneben sieht man einer einzelnen nicht an, ob sie L oder
   M ist. Das Schild sitzt oben links auf der Bühne – dort verdeckt es
   die Karte nicht, die mittig steht, und es liegt neben dem Einblick
   unten rechts statt darüber.
   ------------------------------------------------------------ */
.vorschau__format {
  position: absolute; left: .7rem; top: .7rem;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem .7rem;
  background: var(--c-panel-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  line-height: 1.25; pointer-events: none;
}
.vorschau__format b {
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink);
  letter-spacing: .04em;
}
.vorschau__format span { font-size: .68rem; color: var(--c-muted); }

/* ============================================================
   Beispielfotos zu den Materialien

   Über der Wahl steht eine Zeichnung. Sie zeigt Format, Farbe und
   Beschläge – aber nicht, wie ein Material im Licht aussieht. Dafür
   das Foto einer Karte, die wirklich so gefertigt wurde.
   ============================================================ */

/* Knopf und Schildchen als Paar untereinander. Das Paar ist das
   Element in der Reihe – so bleibt der Knopf so breit wie ohne Schild,
   und nichts ragt über eine Kante. */
.wahl-stapel { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.wahl-stapel .wahlwert { margin: 0; }

/* Bewusst leise und ohne Rot: Rot ist im Shop die Farbe der Handlung –
   „In den Warenkorb", „Zahlungspflichtig bestellen". Ein Foto anzusehen
   ist keine. Steht Rot überall, heißt es nirgends mehr etwas. */
.beispiel-schild {
  display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: .1rem 0; cursor: zoom-in;
  font-family: inherit; font-size: .7rem; line-height: 1.4;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-line);
}
.beispiel-schild:hover { color: var(--c-ink); border-bottom-color: var(--c-ink-soft); }
.beispiel-schild:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.beispiel-schild svg { width: 11px; height: 11px; flex: 0 0 11px; }

/* ---------- Großansicht ---------- */
/* Über allem außer dem Warenkorb: Bei 95 lag das Fenster unter der
   Kopfzeile (1000) und unter dem Cookie-Hinweis (1200) – der Rest der
   Seite war abgedunkelt, die beiden standen hell darüber, und das
   Kreuz zum Schließen steckte hinter der Kopfzeile. */
/* ---------- Die Zeichnung groß ----------

   Eigenes Fenster, weil der Inhalt ein anderer ist: Das Beispielfenster
   zeigt eine Bilddatei in fester Größe, hier steht ein SVG, das mit der
   Höhe des Bildschirms wachsen darf. */
.zeichnung-gross {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(8, 8, 10, .9);
}
.zeichnung-gross figure {
  margin: 0; max-width: min(900px, 100%);
  background: var(--c-panel); border-radius: var(--radius-lg); overflow: hidden;
}
.zeichnung-gross__buehne { display: grid; place-items: center; padding: 1.4rem 1.4rem .6rem; }
/* Die Kopie darf so groß werden, wie der Bildschirm hergibt – die
   Grenze von 548 Punkten gilt nur für die Zeichnung auf der Seite. */
.zeichnung-gross .vorschau__bild {
  width: auto; max-width: 100%; height: min(72vh, 760px); max-height: 72vh;
  cursor: default;
}
.zeichnung-gross .vorschau { margin: 0; }
.zeichnung-gross figcaption { padding: .4rem 1.4rem 1.2rem; font-size: var(--fs-sm); line-height: 1.55; }
.zeichnung-gross figcaption b { display: block; color: var(--c-ink); margin-bottom: .2rem; }
.zeichnung-gross figcaption span { color: var(--c-muted); font-size: var(--fs-xs); }

/* Die Zeichnung auf der Seite lädt zum Klicken ein. */
.vorschau__bild[data-zeichnung-gross] { cursor: zoom-in; }
.vorschau__bild[data-zeichnung-gross]:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

.beispiel-gross {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(8, 8, 10, .9);
}
.beispiel-gross figure {
  margin: 0; max-width: min(460px, 100%);
  background: var(--c-panel); border: 1px solid var(--c-line);
  border-radius: var(--radius); overflow: hidden;
}
.beispiel-gross--foto figure { max-width: min(960px, 100%); }
.beispiel-gross--foto img { max-height: 84vh; }
.beispiel-gross img {
  width: 100%; max-height: 68vh; object-fit: contain; display: block; background: #0b0b0d;
}
.beispiel-gross figcaption { padding: .8rem 1rem; font-size: var(--fs-sm); line-height: 1.55; }
.beispiel-gross figcaption b { display: block; color: var(--c-ink); }
.beispiel-gross figcaption span { color: var(--c-muted); font-size: var(--fs-xs); }
.beispiel-gross__zu {
  position: absolute; top: 1rem; right: 1.2rem;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--c-panel-2); border: 1px solid var(--c-line);
  color: var(--c-ink); font-size: 1.3rem; line-height: 1;
}
/* Die Stoffnahaufnahme im selben Fenster, aber in ihrer eigenen Größe.
   Die Vorlagen sind 240 × 240 – genau so wird das Foto gezeigt und
   nicht auf die Breite des Fensters gezogen. Hochgerechnet verliert
   das Gewebe rund vier Zehntel seiner messbaren Struktur: Die Fäden
   verwaschen zu einer Fläche, und die Fläche sieht man schon am
   Farbkreis. Lieber klein und scharf. */
.beispiel-gross--stoff figure { max-width: 252px; }
.beispiel-gross--stoff img {
  width: 240px; height: 240px; max-height: none;
  object-fit: cover; margin: 6px 6px 0; border-radius: 4px;
}
.beispiel-gross--stoff figcaption { padding: .6rem .75rem .8rem; text-align: center; }

/* ============================================================
   Schrittkopf im Konfigurator

   Große Zahl als Umriss links, Name und gewählte Ausstattung rechts
   daneben. Der alte runde Zähler zählte zwar, sagte aber nichts – und
   sah beim ersten wie beim letzten Schritt gleich aus.

   Die Regeln stehen bewusst mit „legend" davor: Sonst gewinnt
   „.wahlgruppe legend span" weiter oben in dieser Datei, und die große
   Zahl bliebe zwölf Pixel klein. Eine Klasse plus zwei Elemente
   schlägt eine Klasse allein.
   ============================================================ */
.wahlgruppe legend.schritt {
  /* width:100%: Eine <legend> schrumpft sonst auf ihren Inhalt, gleich
     welches display sie trägt – der rechte Teil bekäme keinen Platz. */
  display: block; width: 100%; padding: 0; margin-bottom: .7rem;
  text-transform: none; letter-spacing: 0;
}
/* display:flex wirkt auf einer <legend> nicht. Deshalb die Reihe innen. */
.wahlgruppe legend.schritt .schritt__innen {
  display: flex; align-items: center; gap: .8rem;
}
.wahlgruppe legend.schritt .schritt__nr {
  /* min-width, damit der Strich bei allen Schritten auf derselben
     Kante steht. Heute sind alle Nummern einstellig – käme je ein
     zehnter Schritt dazu, verrutschte die Reihe sonst. */
  flex: 0 0 auto; min-width: .75em; text-align: center;
  font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-soft);
  transition: color .18s ease;
}
/* Der Strich trennt Zahl und Text. Er ist der eigentliche Träger der
   Rückmeldung: Beim Arbeiten in einer Gruppe wird er rot. */
.wahlgruppe legend.schritt .schritt__strich {
  flex: 0 0 1px; align-self: stretch; min-height: 1.9rem;
  background: var(--c-line);
  transition: background .18s ease;
}
/* Kein „erledigt"-Zustand: Im Konfigurator steht überall eine
   Voreinstellung, und man kann in beliebiger Reihenfolge springen –
   ein Haken lobte dann für nichts. */
.wahlgruppe:focus-within legend.schritt .schritt__strich,
.wahlgruppe:hover legend.schritt .schritt__strich { background: var(--c-accent); }
.wahlgruppe:focus-within legend.schritt .schritt__nr,
.wahlgruppe:hover legend.schritt .schritt__nr { color: var(--c-ink); }
/* Name und Wahl nebeneinander auf einer Zeile, nicht untereinander. */
.wahlgruppe legend.schritt .schritt__text {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0;
}
.wahlgruppe legend.schritt .schritt__name {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted);
}
.wahlgruppe legend.schritt .schritt__wahl {
  font-family: var(--font-head); font-size: var(--fs-md); font-weight: 700;
  color: var(--c-ink); text-transform: none; letter-spacing: 0;
}

@media (max-width: 560px) {
  .wahlgruppe legend.schritt .schritt__nr { font-size: 1.6rem; }
  .wahlgruppe legend.schritt .schritt__strich { min-height: 1.6rem; }
  .wahlgruppe legend.schritt .schritt__innen { gap: .6rem; }
}

/* Häkchen vor den Angaben in der Infobox. Jede Zusage steht in einer
   eigenen Zeile – vorher lief der Satz zur Bindung an den zum Papier
   an, und beides las sich als eine Aussage. */
.wahlinfo__zeile { display: flex; align-items: flex-start; gap: .4rem; }
.wahlinfo__haken {
  width: 13px; height: 13px; flex-shrink: 0; margin-top: .28em;
  color: var(--c-accent);
}
.wahlinfo__zeile[hidden] { display: none; }

/* Die Mengenregel steht in der Zeile mit Feld und Knopf. Dezent:
   Sie ist eine Randbedingung, keine Ansage – wer 25 eintippt, soll
   sie nie gebraucht haben.

   Am Handy rückt sie unter den Knopf, statt die Zeile zu sprengen:
   Der Knopf soll seine Breite behalten. */
/* Die Zeile gehört zum Mengenfeld darüber, nicht zum Kasten darunter.
   Vorher stand der ganze Abstand oben und keiner unten – sie klebte
   am Prägestempel-Kasten und las sich wie dessen Überschrift.

   Der Abstand wird deshalb umgedreht: knapp unter den Knopf, dann
   Luft zum nächsten Block. Ohne :has() bleibt es beim alten Bild –
   unschön, aber nicht kaputt. */
.artikel__aktion:has(+ .artikel__mengenregel) { margin-bottom: .5rem; }
.artikel__mengenregel {
  margin: 0 0 2rem; font-size: .72rem; line-height: 1.4; color: var(--c-muted);
}

/* Zwei Zeichen, zwei Aussagen: Haken für das, was geht; durchgestrichener
   Kreis für das, was nicht geht. Der Kreis bleibt grau – er ist eine
   Einschränkung, keine Warnung. */
.wahlinfo__zeilen { display: flex; flex-direction: column; gap: .25rem; }
.wahlinfo__zeichen-ja,
.wahlinfo__zeichen-nein {
  width: 13px; height: 13px; flex-shrink: 0; margin-top: .28em;
}
.wahlinfo__zeichen-ja   { color: var(--c-accent); }
.wahlinfo__zeichen-nein { color: var(--c-muted); }

/* Konfiguration teilen. Leise wie die Mengenregel darüber: Es ist ein
   Angebot, keine Handlung, die wir vom Kunden wollen. Ein Knopf –
   auch als Umriss – stellte es auf dieselbe Stufe wie das Bestellen. */
.artikel__teilen {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem;
  margin: -1.4rem 0 2rem;
}
.artikel__teilen[hidden] { display: none; }
.artikel__teilen-knopf {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; padding: .1rem 0; cursor: pointer;
  font-family: inherit; font-size: .72rem; line-height: 1.4;
  color: var(--c-muted);
}
.artikel__teilen-knopf:hover { color: var(--c-ink); }
.artikel__teilen-knopf:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.artikel__teilen-knopf.ist-fertig { color: var(--c-accent); }
.artikel__teilen-knopf svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Eine Wahlgruppe, die gerade nicht dran ist.

   Sie bleibt stehen und wird blass. Verschwände sie, sähe der Kunde
   nur, dass etwas weg ist – nicht, dass es die Wahl gibt und woran
   sie hängt. Und die Schritte danach rückten eine Nummer vor.

   Blass wird die Überschrift und die Reihe der Werte, nicht das ganze
   Feld: Der Grund darunter soll lesbar bleiben, und ein Kind kann
   nicht kräftiger sein als sein Elternteil – eine Deckkraft am
   fieldset zöge ihn mit.

   Das Sperren selbst macht das disabled am fieldset; hier steht nur,
   wie es aussieht. pointer-events aus, damit auch der Mauszeiger
   nichts anderes verspricht. */
.wahlgruppe--aus .schritt,
.wahlgruppe--aus .wahlgruppe__werte,
.wahlgruppe--aus .wahlliste__reihe,
.wahlgruppe--aus .wahlinfo,
.wahlgruppe--aus .wahlgruppe__hinweis { opacity: .34; }
.wahlgruppe .schritt,
.wahlgruppe .wahlgruppe__werte,
.wahlgruppe .wahlliste__reihe { transition: opacity .25s ease; }
.wahlgruppe--aus .wahlgruppe__werte,
.wahlgruppe--aus .wahlliste__reihe { pointer-events: none; }

/* Der Grund bleibt kräftig – er ist das Einzige in dieser Gruppe, was
   gerade noch etwas zu sagen hat. */
.wahlgruppe__sperrgrund {
  margin: .55rem 0 0; font-size: var(--fs-xs); line-height: 1.5;
  color: var(--c-ink-soft);
}
.wahlgruppe__sperrgrund[hidden] { display: none; }

/* Der Abstand zwischen Navigation und erster Sektion.

   Auf der Agenturseite sind die 9 rem richtig: Dort beginnt jede
   Seite mit einer Aussage, und die braucht Luft. Im Shop beginnt
   sie mit einem Brotkrumenpfad und einem Artikel – da wirkt
   dieselbe Luft wie eine leere Seite, durch die man erst scrollen
   muss.

   Nur die erste Sektion und nur oben: Der Abstand zwischen zwei
   Sektionen trennt sie voneinander, den braucht es weiter. Und nur
   unter body.shop-seite – die Website behält ihre Maße. */
.shop-seite main > .section:first-child { padding-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); }

/* Formate, die es mit der gewählten Bindung nicht gibt. */
.wahlkacheln label.ist-gesperrt, label.ist-gesperrt { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------ Anfrageseiten: Kontakt und Sondermaße
   Beide Seiten teilen sich Aufbau und Stil: Kopf, ein Band mit drei
   Wegen oder Schritten, darunter das Formular als Karte mit
   nummerierten Blöcken und rechts die ruhigen Nebenkarten. */
.page-hero__lead { max-width: 640px; margin: -.4rem 0 .6rem; font-size: var(--fs-md, 1.1rem); line-height: 1.6; color: var(--c-ink-soft); }
.anfrage .page-hero .eyebrow { margin-bottom: .2rem; }

/* Das Band unter dem Kopf: Schritte (Sondermaße) oder Wege (Kontakt).
   Es hängt in den Kopf hinein – so bekommt die Seite eine Kante, an der
   das Auge einhakt, statt Kopf, Band und Formular als drei getrennte
   Kästen zu lesen. */
.anfrage__ablauf { position: relative; z-index: 2; margin-top: -1.6rem; }
.ablauf, .wege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ablauf__schritt, .wege__karte {
  display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem;
  border-radius: var(--radius); background: var(--c-panel); border: 1px solid var(--c-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.ablauf__schritt b, .wege__karte b { display: block; margin-bottom: .2rem; font-size: var(--fs-base, 1rem); }
.ablauf__schritt span:last-child, .wege__karte span { display: block; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-muted); }
.ablauf__zahl {
  flex: 0 0 auto; width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad-gold); color: #fff; font-weight: 700; font-size: .95rem;
}
.wege__karte { flex-direction: column; gap: .5rem; color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.wege__karte:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.wege__karte svg { width: 30px; height: 30px; color: var(--c-accent); margin-bottom: .2rem; }
.wege__karte span { word-break: break-word; }

/* Hauptteil: Formular links, Nebenkarten rechts */
.anfrage__hauptteil { padding-top: clamp(2rem, 4vw, 3.5rem); }
.anfrage__spalten { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.anfrage__seite { position: sticky; top: calc(var(--sticky-offset, 106px) + 1rem); display: grid; gap: 1rem; }

.anfrage__karte {
  padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: var(--radius);
  background: var(--c-panel); border: 1px solid var(--c-line);
}
.anfrage__karte--leise { padding: 1.3rem 1.4rem; }
.anfrage__karte--leise h2 { font-size: var(--fs-md, 1.1rem); margin: 0 0 .6rem; }
.anfrage__karte--leise p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--c-ink-soft); }
.anfrage__leise { font-size: var(--fs-sm); color: var(--c-muted); }
.anfrage__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.anfrage__liste li { position: relative; padding-left: 1.5rem; line-height: 1.5; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.anfrage__liste li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: .8em; height: .45em;
  border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg);
}

/* Standardgrößen als Liste mit Maß, jede ein Link in den Konfigurator */
.anfrage__groessen { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .5rem; }
.anfrage__groessen a {
  display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: var(--radius-sm);
  background: var(--c-panel-2); border: 1px solid transparent; text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.anfrage__groessen a:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.anfrage__groessen b { font-size: 1.05rem; }
.anfrage__groessen span { font-size: var(--fs-xs); color: var(--c-muted); }

/* Nummerierte Blöcke im Formular */
.anfrage__block { border: 0; padding: 0; margin: 0 0 1.6rem; }
.anfrage__block + .anfrage__block { padding-top: 1.6rem; border-top: 1px solid var(--c-line); }
.anfrage__block legend { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font-size: var(--fs-md, 1.1rem); font-weight: 700; }
.anfrage__block legend .anfrage__leise { font-weight: 400; }
.anfrage__nr {
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--grad-gold); color: #fff; font-size: .85rem; font-weight: 700;
}
.anfrage__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.anfrage__reihe--drei { grid-template-columns: 1fr 1fr 1fr; }
.anfrage__reihe--masse { grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0 .6rem; }
.anfrage__mal { padding-bottom: 1.5rem; font-size: 1.3rem; color: var(--c-muted); }
.anfrage__kurz { max-width: 10rem; }
.anfrage__zwischen { margin: -.4rem 0 1rem; }
.anfrage__fehler { display: block; margin: -.7rem 0 1rem; color: var(--c-accent); }
.anfrage .feld-k .anfrage__fehler { margin: .3rem 0 0; }

/* Maß und Skizze nebeneinander */
.anfrage__mass { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1.5rem; align-items: start; }
.anfrage__skizze { margin: 0; padding: .6rem; border-radius: var(--radius-sm); background: var(--c-panel-2); text-align: center; }
.anfrage__skizze svg { width: 100%; height: auto; color: var(--c-muted); font-size: 11px; font-family: var(--font-body); }
.anfrage__skizze rect { fill: var(--c-panel); stroke: var(--c-ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.anfrage__skizze .hat-mass rect { stroke: var(--c-accent); stroke-dasharray: none; fill: rgba(214,32,44,.06); }
.anfrage__skizze line { stroke: currentColor; stroke-width: 1; }
.anfrage__skizze text { fill: currentColor; }
.anfrage__skizze .hat-mass text { fill: var(--c-ink); font-weight: 600; }
.anfrage__skizze figcaption { margin-top: .2rem; font-size: var(--fs-xs); color: var(--c-muted); }

/* Abschluss: Haken, Knopf, Nachsatz */
.anfrage__abschluss { padding-top: 1.4rem; border-top: 1px solid var(--c-line); }
.anfrage__haken { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.2rem; font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.5; }
.anfrage__haken input { margin-top: .25rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--c-accent); }
.anfrage__haken.ist-falsch span { color: var(--c-accent); }
.anfrage__abschluss .anfrage__leise { margin: .8rem 0 0; }

/* Danke */
.anfrage__danke { text-align: center; }
.anfrage__danke > svg { width: 56px; height: 56px; color: #2f8f4e; margin-bottom: .6rem; }
.anfrage__danke h2 { margin: 0 0 .6rem; font-size: var(--fs-xl); }
.anfrage__danke p { max-width: 52ch; margin: 0 auto .8rem; color: var(--c-ink-soft); line-height: 1.6; }
.anfrage__danke-knoepfe { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }

/* Hinweis unter der Größentabelle der Artikelseite */
.artikel__hinweiskasten { margin-top: 1.4rem; }
.artikel__hinweiskasten--logo { align-items: center; gap: 1rem; }
.artikel__logobild {
  flex: 0 0 auto; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: none; cursor: zoom-in; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .18s ease;
}
.artikel__logobild:hover { transform: scale(1.06); }
.artikel__logobild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artikel__hinweiskasten b { color: var(--c-ink); }
.artikel__herz { color: var(--c-accent); }
.artikel__hinweiskasten, .groessen-sondermass {
  display: flex; gap: .6rem; align-items: flex-start; margin: 1.2rem 0 0; padding: .9rem 1.1rem;
  border-radius: var(--radius-sm); background: var(--c-panel-2); font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.artikel__hinweiskasten svg, .groessen-sondermass svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; color: var(--c-accent); }
.artikel__hinweiskasten a, .groessen-sondermass a { font-weight: 600; }
.anfrage input[type="file"] { padding: .7rem .9rem; }

@media (max-width: 960px) {
  .anfrage__spalten { grid-template-columns: 1fr; }
  .anfrage__seite { position: static; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}
@media (max-width: 720px) {
  .ablauf, .wege { grid-template-columns: 1fr; }
  .anfrage__ablauf { margin-top: -1rem; }
  .anfrage__mass { grid-template-columns: 1fr; }
  .anfrage__skizze { max-width: 15rem; margin-inline: auto; }
  .anfrage__reihe, .anfrage__reihe--drei { grid-template-columns: 1fr; }
  .anfrage__reihe--masse { grid-template-columns: 1fr auto 1fr; }
}
/* ------------------------------------------------ Stift für den Verwalter
   Nur sichtbar, wenn im CMS angemeldet (kern.php prüft die Marke). Unten
   links, damit er weder dem Warenkorb-Knopf noch WhatsApp in die Quere
   kommt. */
.admin-stift {
  position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 1200;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem .65rem .85rem; border-radius: 999px;
  background: #14141a; color: #fff; border: 1px solid rgba(255,255,255,.14);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .18s ease, background .18s ease;
}
.admin-stift:hover { transform: translateY(-2px); background: var(--c-accent); color: #fff; }
.admin-stift svg { width: 18px; height: 18px; }
.admin-stift small { font-weight: 400; opacity: .7; }
@media (max-width: 640px) { .admin-stift { bottom: 5.4rem; } }
/* ------------------------------------------------ Seitenkopf mit Foto
   Statt der grauen Fläche mit Ringen ein Foto aus der Werkstatt, das
   beim Rollen etwas langsamer mitläuft als die Seite (shop.js setzt
   --hero-y). Darüber ein Schleier in der Farbe des Themas, damit
   Überschrift und Text lesbar bleiben. Das Bild ist höher als der
   Kopf, damit beim Verschieben kein Rand entsteht. */
.shop-seite.hat-hero .page-hero { background: var(--c-surface); }
.shop-seite.hat-hero .page-hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22%; bottom: -22%; z-index: 0; pointer-events: none;
  background: var(--hero-bild) center 40% / cover no-repeat;
  -webkit-mask-image: none; mask-image: none;
  transform: translate3d(0, var(--hero-y, 0px), 0); will-change: transform;
}
/* Der Schleier ist in beiden Themen dunkel – das Foto wirkt so wie
   eine Bühne, und die Schrift darauf ist weiß. */
.shop-seite.hat-hero .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.74) 45%, rgba(10,10,12,.42) 100%);
}
.shop-seite.hat-hero .page-hero { border-bottom-color: rgba(255,255,255,.08); }
.shop-seite.hat-hero .page-hero h1,
.shop-seite.hat-hero .page-hero .page-hero__lead,
.shop-seite.hat-hero .page-hero .page-hero__text,
.shop-seite.hat-hero .page-hero p { color: #fff; }
.shop-seite.hat-hero .page-hero .page-hero__lead,
.shop-seite.hat-hero .page-hero .page-hero__text { color: rgba(255,255,255,.82); }
.shop-seite.hat-hero .page-hero .breadcrumb,
.shop-seite.hat-hero .page-hero .breadcrumb a { color: rgba(255,255,255,.62); }
.shop-seite.hat-hero .page-hero .breadcrumb a:hover { color: #fff; }
.shop-seite.hat-hero .page-hero .eyebrow { color: var(--c-accent-lt, #ec3b46); }
.shop-seite.hat-hero .page-hero .hero__herz, .shop-seite.hat-hero .page-hero .artikel__herz { color: var(--c-accent-lt, #ec3b46); }
@media (prefers-reduced-motion: reduce) { .shop-seite.hat-hero .page-hero::before { transform: none; } }
/* Schmaler Kopf für die Artikelübersicht: Brotkrümel, Titel und eine
   Zeile nebeneinander – die Artikel stehen ohne Rollen im Bild. */
.shop-seite .page-hero--kompakt { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.page-hero--kompakt .breadcrumb { margin-bottom: .6rem; }
.page-hero--kompakt .page-hero__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.6rem; }
.page-hero--kompakt h1 { margin: 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem); }
.page-hero--kompakt .page-hero__text { margin: 0; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 720px) { .page-hero--kompakt .page-hero__text { display: none; } }
/* Nach dem schmalen Kopf darf der erste Abschnitt dichter folgen –
   sonst schiebt die Luft die Artikel wieder unter die Falz. */
.page-hero--kompakt + .section, .page-hero--kompakt + .section--schmal + .section { padding-top: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.page-hero--kompakt ~ .section .bereich__kopf { margin-bottom: var(--space-3); }

/* ------------------------------------------------ Artikelkacheln: flacher, alle gleich hoch
   Das Bild ist quadratisch statt 4:5, Titel und Kurztext sind auf zwei
   Zeilen begrenzt, die Merkmale auf eine. Preis und Knopf sitzen unten
   – so sind alle Kacheln einer Reihe gleich hoch, egal wie lang der
   Text im CMS ist. */
.shop-seite .lager-grid { align-items: stretch; }
.shop-seite .lager-karte { height: 100%; }

.shop-seite .lager-karte__zeichnung { padding: 6%; }

.shop-seite .lager-karte .shop-preis { margin-top: auto; margin-bottom: .6rem; font-size: var(--fs-md); }
.shop-seite .lager-karte .shop-preis__zusatz { line-height: 1.35; }
/* Der Kasten bestimmt die Höhe, nicht das Bild: Foto und Zeichnung
   liegen absolut darin { height: auto; overflow: hidden; }
.shop-seite .lager-karte__bild > img,
.shop-seite .lager-karte__bild > .lager-karte__zeichnung,
.shop-seite .lager-karte__bild > .lager-karte__leer { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Auch über Abschnitte hinweg gleich hoch: Der Textteil bekommt eine
   feste Mindesthöhe (Platz für zwei Zeilen Titel, Merkmale, zwei Zeilen
   Text, Preis und Mengenfeld mit Knopf). Was kürzer ist { min-height: 20.9rem; }

/* Eckig statt abgerundet – Kachel, Bildkasten und Zeichnungsfläche. */
.shop-seite .lager-karte, .shop-seite .lager-karte__bild, .shop-seite .lager-karte__zeichnung,
.shop-seite .lager-karte__bild > img { border-radius: 0; }

/* „mehr": klappt den Kurztext auf, statt ihn nur abzuschneiden. Der
   Knopf erscheint nur { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* ------------------------------------------------ Helle Abschnitte: weiß, ohne Muster
   Die Ringe gehören auf dunkle Flächen. Auf hellem Grund bleibt die
   Fläche weiß und ruhig – ohne Grauton, ohne Rahmenlinien. */
.shop-seite .section--light, .shop-seite .section--surface { background: var(--c-bg); border-block: 0; }
.shop-seite .section--light::before, .shop-seite .section--surface::before { display: none; }

/* Kacheln ohne Rahmen – ein weicher Schatten trägt sie, beim
   Darüberfahren etwas mehr. */
.shop-seite .lager-karte {
  border: 0; background: var(--c-panel);
  box-shadow: 0 6px 22px -14px rgba(20,20,26,.22), 0 1px 3px rgba(20,20,26,.05);
}
.shop-seite .lager-karte:hover {
  border-color: transparent;
  box-shadow: 0 22px 44px -24px rgba(20,20,26,.32), 0 2px 6px rgba(20,20,26,.06);
}

/* „mehr" klappt weich auf: Die Höhe läuft über max-height { transition: max-height .38s cubic-bezier(.2,.7,.3,1); }

/* Mengenwahl und Warenkorb-Knopf in einer Zeile: der Zähler kompakt
   links, der Knopf füllt den Rest – kein Umbruch mehr auf zwei Zeilen. */
.shop-seite .lager-karte__aktion { flex-wrap: nowrap; gap: .45rem; align-items: stretch; }
.shop-seite .lager-karte__aktion .menge { flex: 0 0 auto; border-radius: 0; background: var(--c-panel-2); border-color: transparent; }
.shop-seite .lager-karte__aktion .menge__btn { width: 28px; height: 40px; font-size: 1rem; }
.shop-seite .lager-karte__aktion .menge__feld { width: 34px; height: 40px; }
.shop-seite .lager-karte__add {
  flex: 1 1 auto; min-width: 0; padding: .55rem .6rem; gap: .35rem;
  font-size: var(--fs-xs); white-space: nowrap; border-radius: 0;
}
.shop-seite .lager-karte__add .ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* Fotos ganz zeigen statt nah heranzuzoomen: eingepasst mit etwas
   Luft { object-fit: contain; padding: 5%; background: var(--c-panel-2); }
/* Fokus und Zoom aus der Verwaltung: object-position legt den
   Fokuspunkt des Bildes auf X/Y des Inhaltskastens; der Drehpunkt fürs
   Vergrößern muss denselben Punkt treffen – wegen der 5 % Rand ist das
   5 % + X × 0 {
  transform: scale(var(--zoom, 1));
  transform-origin: calc(5% + var(--fx, 50%) * .9) calc(5% + var(--fy, 50%) * .9);
}
/* Der Einzelknopf („Jetzt konfigurieren", „Ansehen & bestellen") steht
   direkt in der Spalte – er darf nicht in die Höhe wachsen. */
.shop-seite .lager-karte__body > .lager-karte__add { flex: 0 0 auto; }

/* Rund statt eckig, Zähler schmaler, Knopf breiter. */
.shop-seite .lager-karte__aktion .menge { border-radius: 999px; }
.shop-seite .lager-karte__aktion .menge__btn { width: 24px; }
.shop-seite .lager-karte__aktion .menge__feld { width: 28px; }
.shop-seite .lager-karte__add { border-radius: 999px; }

/* Hand-Zeiger auf allem, was sich anklicken lässt – Knöpfe, Zähler,
   Kachelbild (das führt zum Artikel, nicht in eine Lupe). */
.shop-seite button, .shop-seite .btn, .shop-seite [role="button"], .shop-seite label[for] { cursor: pointer; }

.shop-seite button:disabled { cursor: not-allowed; }

/* Feste Plätze in der Kachel: Titel zwei Zeilen, Merkmale eine, Text
   zwei, dann „mehr lesen", Preisblock { min-height: calc(2 * 1.25em); }

/* Preisblock mit fester Höhe (Preis, Zusatz, „ab n Stück") und die
   Knopfzeile direkt darunter – kein Auto-Abstand mehr, der den Preis
   je nach Kachel woanders hinschiebt. */
.shop-seite .lager-karte .shop-preis { min-height: 4.4rem; }
.shop-seite .lager-karte__aktion { margin-top: 0; }
.shop-seite .lager-karte__aktion, .shop-seite .lager-karte__body > .lager-karte__add { min-height: 41px; }
.shop-seite .shop-ausverkauft { min-height: 41px; }
/* ------------------------------------------------ Fotos & Referenzkarten
   Kleine quadratische Kacheln statt eines großen Fotos mit Reihe. */
.artikel__galerie-text { font-size: var(--fs-sm); color: var(--c-muted); margin: -.4rem 0 1rem; }
.referenz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.referenz-kachel {
  position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; overflow: hidden;
  background: var(--c-panel-2); cursor: zoom-in; box-shadow: 0 6px 18px -12px rgba(20,20,26,.25);
}
.referenz-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.referenz-kachel:hover img { transform: scale(1.06); }
.referenz-kachel:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (max-width: 640px) { .referenz-raster { grid-template-columns: repeat(3, 1fr); gap: .4rem; } }
/* Zahlungsschilder im Fuß: kleiner, damit sie neben dem Copyright
   nicht auftragen. */
.shop-fuss__zahlung { gap: .5rem; margin: 1rem 0 1.2rem; }
.shop-fuss__zahlschild { padding: .32rem .6rem .32rem .5rem; gap: .45rem; border-radius: 8px; }
.shop-fuss__zahlschild svg { width: 18px; height: 18px; }
.shop-fuss__zahlschild b { font-size: var(--fs-xs); }
.shop-fuss__zahlschild small { font-size: .68rem; }
.shop-fuss__zahlschild small, .shop-fuss__zahlschild b { white-space: nowrap; }

/* Galerie-Pfeile und Zähler in der Großansicht */
.beispiel-gross__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(20,20,26,.72); border: 1px solid rgba(255,255,255,.18); color: #fff;
  display: grid; place-items: center; transition: background .18s ease, transform .18s ease;
}
.beispiel-gross__pfeil svg { width: 22px; height: 22px; }
.beispiel-gross__pfeil:hover { background: var(--c-accent); transform: translateY(-50%) scale(1.06); }
.beispiel-gross__pfeil--zurueck { left: 1.2rem; }
.beispiel-gross__pfeil--weiter  { right: 1.2rem; }
.beispiel-gross__zaehler { display: block; margin-top: .3rem; font-size: var(--fs-xs); color: var(--c-muted); letter-spacing: .06em; }
@media (max-width: 640px) {
  .beispiel-gross__pfeil { width: 40px; height: 40px; top: auto; bottom: 1rem; transform: none; }
  .beispiel-gross__pfeil:hover { transform: none; }
  .beispiel-gross__pfeil--zurueck { left: 1rem; }
  .beispiel-gross__pfeil--weiter { right: 1rem; }
}
/* ------------------------------------------------ Seitenköpfe: dunkel mit Ringen
   In beiden Themen dunkel, mit dem roten Schein und den Konturringen
   der Website. Schrift weiß, Brotkrümel gedämpft. */
/* Die Ringe waren im hellen Thema unsichtbar: Das Stilblatt der
   Website setzte dort eine DUNKLE Linie (für seinen hellen Kopf), die
   auf dem hier immer dunklen Kopf unterging. Deshalb gilt die Angabe
   ausdrücklich für beide Themen – mit denselben Werten wie die Ringe
   in der Fußzeile (site-footer::before), damit Kopf und Fuß gleich
   hell zeichnen. */
.shop-seite .page-hero,
:root[data-thema="hell"] .shop-seite .page-hero,
:root[data-thema="hell"] .shop-seite .page-hero--rings {
  --pat-line: rgba(245,245,246,.07); --pat-size: 54px;
  background:
    radial-gradient(44rem 18rem at 86% -30%, rgba(214,32,44,.28), transparent 60%),
    #0e0e10;
  border-bottom-color: rgba(255,255,255,.08);
}
.shop-seite .page-hero::before {
  background-image: repeating-radial-gradient(circle at 88% -8%, var(--pat-line) 0 1px, transparent 1px var(--pat-size));
  background-size: auto;
  -webkit-mask-image: radial-gradient(130% 118% at 88% 0%, #000 22%, transparent 80%);
          mask-image: radial-gradient(130% 118% at 88% 0%, #000 22%, transparent 80%);
}
/* Wie die Fußzeile im hellen Thema: das Muster auf halbe Deckung. */
:root[data-thema="hell"] .shop-seite .page-hero::before { opacity: .5; }
.shop-seite .page-hero h1, .shop-seite .page-hero p { color: #fff; }
.shop-seite .page-hero .page-hero__lead, .shop-seite .page-hero .page-hero__text { color: rgba(255,255,255,.8); }
.shop-seite .page-hero .breadcrumb, .shop-seite .page-hero .breadcrumb a { color: rgba(255,255,255,.6); }
.shop-seite .page-hero .breadcrumb a:hover { color: #fff; }
.shop-seite .page-hero .eyebrow { color: var(--c-accent-lt, #ec3b46); }
/* Das Grün des Lager-Eintrags im Menüfeld: Das Feld ist in beiden
   Themen dunkel, das Standard-Grün des hellen Themas wäre dort
   zu dunkel – deshalb ein fester heller Ton. */
.shop-mega { --mega-gruen: #3fcf86; --mega-gruen-flaeche: rgba(63,207,134,.14); }
.shop-mega__lager .shop-mega__punkt { background: var(--mega-gruen); box-shadow: 0 0 0 3px var(--mega-gruen-flaeche); }
.shop-mega ul .shop-mega__lager b { color: var(--mega-gruen); }
.shop-mega__marke { color: var(--mega-gruen); background: var(--mega-gruen-flaeche); }
.shop-mega__knopf--lager { --btn-fg: var(--mega-gruen); border-color: var(--mega-gruen); }
.shop-mega__knopf--lager:hover { background: var(--mega-gruen); border-color: var(--mega-gruen); color: #0b0b0d; }

/* ==================== Häufige Fragen ==================== */
/* Sprungleiste: Pillen, die oben kleben bleiben. */
.faq__leiste {
  position: sticky; top: calc(var(--sticky-offset, 106px) - 1rem); z-index: 5;
  display: flex; flex-wrap: wrap; gap: .5rem; margin: -1rem 0 2.2rem; padding: .8rem 0;
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
}
.faq__leiste a {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-decoration: none;
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-ink-soft);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.faq__leiste a:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
/* Gruppen: Titel links, Fragen rechts. */
.faq__gruppe { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 2rem 3rem; padding: 2.2rem 0; border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--sticky-offset, 106px) + 3rem); }
.faq__gruppe:first-of-type { border-top: 0; padding-top: .4rem; }
.faq__kopf h2 { font-size: var(--fs-xl); margin: 0 0 .5rem; line-height: 1.1; }
.faq__kopf p { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.faq__liste { display: grid; gap: .6rem; }
.faq__frage {
  border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-panel);
  scroll-margin-top: calc(var(--sticky-offset, 106px) + 4rem);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq__frage:hover, .faq__frage[open] { border-color: rgba(214,32,44,.35); }
.faq__frage[open] { box-shadow: 0 14px 34px -22px rgba(20,20,26,.35); }
.faq__frage summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; font-weight: 600; font-size: var(--fs-md); line-height: 1.35; color: var(--c-ink);
}
.faq__frage summary::-webkit-details-marker { display: none; }
.faq__frage summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c-accent); transition: transform .25s ease; }
.faq__frage[open] summary svg { transform: rotate(45deg); }
.faq__frage summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: var(--radius); }
.faq__antwort { padding: 0 1.15rem 1.1rem; color: var(--c-ink-soft); font-size: var(--fs-sm); line-height: 1.65; }
.faq__antwort p { margin: 0; }
.faq__antwort a { font-weight: 600; }
.faq__antwort b { color: var(--c-ink); }
/* Schluss: die Einladung, direkt zu fragen. */
.faq__schluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
  margin-top: 2.4rem; padding: 1.6rem 1.8rem; border-radius: var(--radius); background: var(--c-panel-2);
}
.faq__schluss h2 { margin: 0 0 .3rem; font-size: var(--fs-lg); }
.faq__schluss p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-sm); }
.faq__schluss-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 860px) {
  .faq__gruppe { grid-template-columns: 1fr; gap: 1rem; }
  .faq__leiste { top: calc(var(--sticky-offset, 106px) - 1.4rem); }
}
/* FAQ-Verweise auf der Kontaktseite und der Artikelseite */
.anfrage__liste--verweise a { text-decoration: none; color: var(--c-ink); }
.anfrage__liste--verweise a:hover { color: var(--c-accent-dk); text-decoration: underline; }
.anfrage__mehr { display: inline-block; margin-top: .6rem; font-size: var(--fs-sm); font-weight: 600; }
.artikel__hinweiskasten--faq { align-items: center; }
/* Sale: Schnellverweis in der Kopfleiste in Rot, Knopf im Menüfeld weiß
   mit rotem Wort, Zeile unter dem Titel der Sale-Übersicht. */
.schnell__sale a { color: var(--c-accent-lt, #ec3b46); font-weight: 700; }
.schnell__sale a:hover { color: #fff; }
.shop-mega__knopf--sale { --btn-bg: #fff; --btn-fg: var(--c-accent); border-color: #fff; }
.shop-mega__knopf--sale:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.page-hero--kompakt .page-hero__lead--kompakt { margin: .3rem 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
.artikel__foto-symbol {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.88); background: rgba(8,8,10,.6); padding: .2rem .5rem; border-radius: 999px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none;
}
.artikel__foto-symbol { left: .8rem; bottom: .8rem; }

/* ==================== Korrekturabzug freigeben ==================== */
.freigabe__bild { display: block; margin: 1rem 0; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-panel-2); }
.freigabe__bild img { display: block; width: 100%; height: auto; }
.freigabe__form { margin-top: 1.2rem; display: grid; gap: 1rem; }
.freigabe__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; }
.shop-meldung--fehler { background: #fdecee; color: #8a1a22; border-color: #f2b8bd; }

/* ---------- Eckig: alle Bilder und Kacheln im Shop ----------
   Auf Wunsch ohne Rundung – Kacheln, Fotos, Zeichnungen, Großansicht, Warenkorb- und Kassenbilder, Megamenü-Vorschau. Formfelder und Knöpfe
   bleiben, wie sie sind. */
.karte__bild, .karte__bild img, .lager-karte, .artikel__bild, .artikel__ohnebild, .artikel__foto, .artikel__foto-bild, .artikel__fotoklein, .artikel__fotoklein img, .artikel__logobild, .artikel__logobild img, .referenz-kachel, .referenz-kachel img, .gallery__item, .gallery__item img, .beispiel-gross figure, .beispiel-gross img, .beispiel-gross--foto figure, .zeichnung-gross figure, .korb__bild, .korb__bild img, .ks-bild, .ks-bild img, .kasse__bild, .kasse__bild img, .freigabe__bild, .shop-mega__karte, .shop-mega__tipp img, .held__rahmen, .editorial__bild, .editorial__bild img, .vorschau__bild[data-zeichnung-gross]:focus-visible, .stoffbox__lupe, .stoffbox__lupe img { border-radius: 0 !important; }

/* Vergriffene Variante: gedämpft, mit Vermerk. */
.wahlwert:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.wahlwert__aus { font-style: normal; font-size: .72em; color: var(--c-error, #c0392b); margin-left: .3em; }

.shop-preis__je small { font-size: .78em; font-weight: 400; color: var(--c-muted); }
.kasse__ok--stempel { margin: 0 0 1rem; }
.kasse__ok--stempel b { font-weight: 600; }

/* ==================== Merkzettel ====================
   Herz auf der Kachel (oben rechts, über dem Foto), Herz mit Text auf
   der Artikelseite, Herz mit Zahl in der Kopfzeile. Rot ist im Shop
   das Bestellen – das Herz füllt sich deshalb erst, wenn es gedrückt
   ist, und bleibt vorher ein Umriss. */
/* ==================== Artikelkachel (Aufbau der Startseiten-Karte) ====================
   Foto im Hochformat mit Marke, darunter ohne Rahmen: Abteilung, Name,
   Lieferangabe mit Punkt, Preis über einer Haarlinie, Knopfzeile mit
   Korbknopf und Herz. Gleiche Höhe in der Reihe: Preis und Knöpfe sitzen
   am unteren Rand (margin-top: auto). */
.kachel { display: flex; flex-direction: column; position: relative; }
.kachel__bild {
  position: relative; display: block; overflow: hidden;
  background: var(--c-panel-2); aspect-ratio: 4 / 5;
}
.kachel__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(var(--zoom, 1)); transform-origin: var(--fokus, 50% 50%);
  transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.kachel__bild img + img { position: absolute; inset: 0; opacity: 0; }
.kachel:hover .kachel__bild img { transform: scale(calc(var(--zoom, 1) * 1.045)); }
.kachel:hover .kachel__bild img + img { opacity: 1; }
.kachel__zeichnung { display: grid; place-items: center; height: 100%; padding: 7%; background: var(--c-panel-2); }
.kachel__zeichnung .vorschau__bild { width: 100%; max-width: none; height: 100%; object-fit: contain; }
.kachel__leer { display: grid; place-items: center; height: 100%; color: var(--c-muted); font-size: var(--fs-sm); }
.kachel__fahne {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: rgba(8,8,10,.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
}
.kachel__fahne--rot { background: var(--c-accent); }
.kachel__fahne--sale { left: auto; right: .7rem; background: var(--c-accent); }
.kachel__symbol {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
  font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85); background: rgba(8,8,10,.6); padding: .2rem .5rem; border-radius: 999px;
}
.kachel__text { padding-top: .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.kachel__kat { font-size: .72rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--c-muted); }
.kachel__name { font-size: 1.02rem; font-weight: 600; text-decoration: none; line-height: 1.3; color: var(--c-ink); }
.kachel__name:hover { color: var(--c-accent-dk); }
.kachel__merkmal { display: inline-flex; align-items: center; gap: .4rem; font-size: .81rem; color: var(--c-muted); line-height: 1.5; }
.kachel .punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--c-muted); flex-shrink: 0; }
.kachel .punkt--lager { background: var(--c-success); }
.kachel .punkt--weg { background: var(--c-accent); }
.kachel__preis { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: .15rem; }
.kachel__betrag { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kachel__betrag b { font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.kachel__betrag s { font-size: .88rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.kachel__je { font-size: .8rem; font-weight: 500; color: var(--c-muted); }
.kachel__preis.ist-angebot b { color: var(--c-accent); }
.kachel__preis small { font-size: .72rem; color: var(--c-muted); }
.kachel__preis small a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kachel__knoepfe { display: flex; align-items: stretch; gap: .5rem; margin-top: .75rem; }
.kachel__form { flex: 1 1 auto; display: flex; min-width: 0; }
.kachel__add { flex: 1 1 auto; justify-content: center; height: 42px; min-height: 0; padding-block: 0; border-radius: 999px; font-size: .84rem; padding-inline: .9rem; }
.kachel__add .ico { width: 15px; height: 15px; flex: 0 0 auto; }
/* Herz rechts unten im Foto: weißer runder Knopf, Umriss-Herz, füllt sich rot. */
.kachel__foto { position: relative; display: block; }
.merk-knopf {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 3;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--c-ink-soft);
  box-shadow: 0 4px 14px -6px rgba(20,20,26,.45);
  transition: color .15s ease, transform .15s ease;
}
.merk-knopf svg { width: 18px; height: 18px; }
.merk-knopf:hover { color: var(--c-accent); transform: scale(1.08); }
.merk-knopf:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.merk-knopf.ist-an { color: var(--c-accent); border-color: var(--c-accent); }
.merk-knopf.ist-an svg { fill: currentColor; }
.merk-knopf.wird-gemerkt { opacity: .6; }
.merk-knopf.ist-neu { animation: merk-puls .45s ease; }
/* Das Gitter: Luft wie die Reihen der Startseite, zwischen den Zeilen etwas mehr. */
.shop-seite .lager-grid { row-gap: 2.2rem; align-items: stretch; }
@keyframes merk-puls { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

.artikel__merken { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem 1rem; margin: -1.2rem 0 1.6rem; }
.artikel__teilen { margin-top: -1.2rem; }
.artikel__merken-knopf {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: .1rem 0; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600; line-height: 1.4; color: var(--c-ink-soft);
}
.artikel__merken-knopf svg { width: 15px; height: 15px; flex: none; }
.artikel__merken-knopf:hover { color: var(--c-accent); }
.artikel__merken-knopf:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.artikel__merken-knopf.ist-an { color: var(--c-accent); }
.artikel__merken-knopf.ist-an svg { fill: currentColor; }
.artikel__merken-knopf.ist-neu svg { animation: merk-puls .45s ease; }
.artikel__merken-link { font-size: .72rem; color: var(--c-muted); }
.artikel__merken-link:hover { color: var(--c-ink); }

.shop-merk {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--c-ink-soft); white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.shop-merk:hover { color: var(--c-ink); background: color-mix(in oklab, var(--c-ink) 10%, transparent); }
.shop-merk svg { width: 17px; height: 17px; }
.shop-merk[aria-current] { color: var(--c-accent-dk); }
.shop-merk[aria-current] svg, .shop-merk:not(:has(.ist-leer)) svg { fill: currentColor; }
.shop-merk__wort { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shop-merk__zahl {
  position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--c-accent); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
}
.shop-merk__zahl.ist-leer { display: none; }

.merk-leer { text-align: center; padding: 2.5rem 1rem 3rem; max-width: 34rem; margin: 0 auto; }
.merk-leer svg { width: 48px; height: 48px; color: var(--c-line); margin-bottom: 1rem; }
.merk-leer p { font-size: var(--fs-md); margin: 0 0 .4rem; }
.merk-leer__klein { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 1.6rem !important; }
.merk-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1.4rem; }
.merk-kopf__text { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-soft); }
.merk-titel__zahl { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .35em; margin-left: .3em; border-radius: 999px; background: var(--c-accent); color: #fff; font-size: .42em; vertical-align: middle; }
.merk-fuss { margin-top: 2rem; font-size: var(--fs-sm); color: var(--c-muted); max-width: 62ch; }

/* Kategorieseiten: Kacheln in derselben Größe wie die Reihen der Startseite
   (vier nebeneinander mit 1,4rem Luft, darunter dieselben Stufen). */
.shop-seite .lager-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 1099px) { .shop-seite .lager-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .shop-seite .lager-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (max-width: 520px)  { .shop-seite .lager-grid { grid-template-columns: 1fr; } }
/* Auf großen Bildschirmen nutzt das Gitter die volle Spaltenbreite (1220px)
   wie die Reihen der Startseite – ohne den Innenabstand des Containers.
   Darunter bleibt der Randabstand, damit nichts an der Fensterkante klebt. */
@media (min-width: 1300px) { .shop-seite .lager-grid { margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2.2rem)); } }
/* Kachel: Kurztext und Mengenwähler */
.kachel .kachel__kurz { margin: .15rem 0 0; }

.kachel__form { gap: .45rem; align-items: stretch; }
.kachel__form .menge { flex: 0 0 auto; height: 42px; border-radius: 999px; background: var(--c-panel-2); border-color: transparent; }
.kachel__form .menge__btn { width: 26px; height: 42px; font-size: 1rem; }
.kachel__form .menge__feld { width: 30px; height: 42px; }
.kachel__add { padding-inline: .7rem; min-width: 0; white-space: nowrap; }
.kachel__add .ico { display: none; }
@media (min-width: 1300px) { .kachel__add .ico { display: inline-block; } }

/* Haus-Symbol vorn in der Schnellleiste: nur das Symbol, das Wort für Vorleser. */
.schnell__start svg { opacity: .8; }
.schnell__start-wort { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.schnell__start { display: flex; align-items: stretch; }
.schnell__start a { padding-inline: .55rem; height: 100%; }

/* ==================== Seitenübergänge ====================
   Von Seite zu Seite blendet der Browser weich über, statt kurz weiß zu
   werden. Die Kopfzeile bekommt einen Namen und bleibt dabei stehen –
   nur der Inhalt wechselt. Browser ohne die Technik ignorieren den
   Block; wer wenig Bewegung wünscht, bekommt den harten Wechsel. */
@view-transition { navigation: auto; }
.shop-seite .site-header.shop-header { view-transition-name: shop-kopf; }
::view-transition-old(root) { animation: 160ms ease-out both uebergang-raus; }
::view-transition-new(root) { animation: 220ms ease-in both uebergang-rein; }
@keyframes uebergang-raus { to { opacity: 0; } }
@keyframes uebergang-rein { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Pochende Herzen – wie auf der Website. */
.hero__herz, .herkunft__herz, .artikel__herz { display: inline-block; transform-origin: center; animation: herz-schlag 1.6s ease-in-out infinite; }
@keyframes herz-schlag { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.22); } 28% { transform: scale(1); } 42% { transform: scale(1.14); } 60% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__herz, .herkunft__herz, .artikel__herz { animation: none; } }