/* ============================================================
   R&G Classics — Shop (Entwurf V2)
   Ergänzt styles.css. Nutzt ausschließlich die vorhandenen Tokens,
   keine neuen Farben, keine neuen Größen.

   Enthält: Übersicht (shop.html) und Produktseite (produkt-*.html).
   Stand: Optik-Entwurf. Keine Funktion, keine Stripe-Anbindung.
   ============================================================ */

/* ---------------- Hero der Shop-Seiten ---------------- */
.shop-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border-default);
}
.shop-hero__media { position: absolute; inset: 0; z-index: 0; background: var(--color-primary-900); }
.shop-hero__media video,
.shop-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55;
}
.shop-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--surface-page) 2%, rgba(10,22,20,0.55) 45%, rgba(10,22,20,0.35) 100%),
    radial-gradient(120% 80% at 80% 0%, rgba(195,124,55,0.14), transparent 60%);
}
.shop-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(48px, 9vh, 96px);
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: 62ch;
}
.shop-hero h1 {
  font-size: clamp(2.1rem, 5vw, var(--text-display-lg));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0;
}
.shop-hero h1 .accent { color: var(--color-accent-400); }
.shop-hero p { color: var(--text-body); font-size: var(--text-body-lg); margin: 0; max-width: 54ch; }

/* ---------------- Materialband ---------------- */
.material-band {
  position: relative;
  height: clamp(120px, 18vh, 200px);
  overflow: hidden;
  border-block: 1px solid var(--border-default);
}
.material-band img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; display: block; }
.material-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--surface-page) 0%, transparent 30%, transparent 70%, var(--surface-page) 100%);
}
.material-band__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding-inline: var(--gutter);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-heading);
}

/* ---------------- Produktraster ---------------- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.prod {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard),
              box-shadow var(--duration-normal) var(--ease-standard);
}
.prod:hover {
  border-color: var(--border-hairline-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Platzhalter für das Produktfoto. Bewusst als Platzhalter erkennbar,
   nicht als fertiges Bild getarnt. */
.prod__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--color-ink-800);
  display: grid; place-items: center;
  border-bottom: 1px solid var(--border-default);
  overflow: hidden;
}
.prod__media::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(195,124,55,0.06) 0 1px,
    transparent 1px 14px
  );
}
.prod__media::after {
  content: "";
  position: absolute; inset: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.prod__media.has-bild::before,
.prod__media.has-bild::after { display: none; }
/* Block statt Grid, sobald ein Foto drin ist: Im Grid greift height:100%
   nicht, ein Hochformat behält seine eigene Höhe und hängt oben an. */
.prod__media.has-bild { display: block; }
.prod__media.has-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prod__ph {
  position: relative;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.8;
}
.prod__ph strong { display: block; color: var(--color-accent-400); font-weight: var(--weight-medium); }

.prod__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.prod__idx {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
}
.prod__body h3 { font-size: var(--text-heading-md); color: var(--text-heading); margin: 0; }
.prod__desc { color: var(--text-muted); font-size: var(--text-body-sm); flex: 1; margin: 0; }

.prod__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}
.prod__price { font-family: var(--font-mono); font-size: var(--text-heading-sm); color: var(--text-heading); }
.prod__price small { display: block; font-family: var(--font-sans); font-size: var(--text-caption); color: var(--text-muted); letter-spacing: 0; margin-top: 2px; }
.prod__more { color: var(--color-accent-400); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.prod:hover .prod__more .arrow { transform: translateX(3px); }

/* Variantenpunkte auf der Kachel */
.prod__dots { display: flex; gap: 6px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); }
.dot--poliert { background: linear-gradient(135deg, #cfd4d2, #7e8a86); }
.dot--gebuerstet { background: linear-gradient(135deg, #a8afac, #5d6764); }
.dot--pulver { background: var(--color-primary-800); }
/* Abgeschaltete Oberfläche: der Punkt bleibt als Umriss stehen, damit
   die Reihe nicht springt, füllt sich aber nicht. */
.dot--aus { background: none; opacity: 0.4; }

/* ---------------- Produktseite ---------------- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

.pdp__gallery { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 96px; }
.pdp__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-ink-800);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  overflow: hidden;
}
.pdp__stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, rgba(195,124,55,0.06) 0 1px, transparent 1px 16px);
}
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pdp__thumb {
  aspect-ratio: 1;
  background: var(--color-ink-800);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
}

/* ---- Mit echten Bildern ----
   Der gestrichelte Rahmen und die Schraffur sagen "Foto folgt". Sobald
   eines da ist, müssen beide weg, sonst liegt das Raster über der Ware. */
.pdp__stage.has-bild::before { display: none; }
.pdp__stage.has-bild { background: var(--color-ink-900); display: block; }
.pdp__stage img, .pdp__stage video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Knopf um das Bühnenbild. Er füllt die Bühne ganz aus und trägt
   selbst keine Gestaltung — sichtbar ist nur das Foto und das Zeichen
   in der Ecke, das sagt, dass es größer geht. */
.pdp__zoom {
  display: block; width: 100%; height: 100%;
  padding: 0; border: none; background: none;
  cursor: zoom-in;
}
.pdp__zoom:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: -2px; }
.pdp__zoomzeichen {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 22, 20, 0.72);
  border: 1px solid var(--border-hairline-accent);
  color: var(--color-cream-100);
  opacity: 0.72;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.pdp__zoomzeichen svg { width: 18px; height: 18px; }
.pdp__zoom:hover .pdp__zoomzeichen, .pdp__zoom:focus-visible .pdp__zoomzeichen { opacity: 1; }

.pdp__thumbs.has-bilder { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.pdp__thumbs.has-bilder .pdp__thumb {
  display: block; padding: 0; overflow: hidden; cursor: pointer;
  border-style: solid; border-color: var(--border-default);
  background: var(--color-ink-900);
  transition: border-color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
  opacity: 0.72;
}
.pdp__thumbs.has-bilder .pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vorschau eines Videos: das Standbild mit einem kleinen Abspielzeichen. */
.pdp__thumbs.has-bilder .pdp__thumb { position: relative; }
.pdp__thumbvideo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--color-cream-100);
  background: rgba(10, 22, 20, 0.28);
}
.pdp__thumbvideo svg { width: 18px; height: 18px; }
.pdp__thumbs.has-bilder .pdp__thumb:hover { opacity: 1; }
.pdp__thumbs.has-bilder .pdp__thumb.is-aktiv { opacity: 1; border-color: var(--color-accent-500); }
.pdp__thumbs.has-bilder .pdp__thumb:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }

/* ---- Großansicht ----
   Das Bild liegt hier unbeschnitten im Fenster: Das ist der ganze
   Zweck. Alles andere tritt zurück — dunkle Fläche, zwei Pfeile, eine
   Zählung. Der Rahmen lässt oben und unten Luft, damit Knöpfe und
   Zählung nicht auf dem Motiv liegen. */
.lupe {
  position: fixed; inset: 0; z-index: 200;
  visibility: hidden;
  display: grid; place-items: center;
}
.lupe.is-open { visibility: visible; }
.lupe__scrim {
  position: absolute; inset: 0;
  background: rgba(5, 12, 11, 0.97);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.lupe.is-open .lupe__scrim { opacity: 1; }
.lupe__rahmen {
  position: relative;
  width: min(1200px, 100vw - 2 * var(--space-6));
  height: calc(100vh - 8rem);
  /* Feste Spuren, sonst löst max-height:100% am Bild nicht auf und ein
     Hochformat läuft über die volle Breite nach unten aus dem Rahmen. */
  display: grid; place-items: center;
  grid-template: 100% / 100%;
  /* Im Zoom darf das Bild nicht über den Rahmen hinaus in die Knöpfe
     und die Zählung laufen. */
  overflow: hidden;
  opacity: 0; transform: scale(0.98);
  transition: opacity var(--duration-normal) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}
.lupe.is-open .lupe__rahmen { opacity: 1; transform: none; }
.lupe__bild {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: var(--radius-md);
  cursor: zoom-in;
  touch-action: none;
  user-select: none; -webkit-user-drag: none;
  transition: transform var(--duration-normal) var(--ease-standard);
}
/* Videos in der Großansicht: ganz, mit Bedienleiste, ohne Zoom. */
.lupe__video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  border-radius: var(--radius-md);
  background: var(--color-ink-900);
}
.lupe__bild[hidden], .lupe__video[hidden] { display: none; }
/* Im Zoom zieht man den Ausschnitt, statt weiterzublättern. Der Zeiger
   sagt das an, und die Übergangszeit fällt weg — sonst läuft das Bild
   der Hand hinterher. */
.lupe.ist-gezoomt .lupe__bild { cursor: grab; transition: none; }
.lupe.ist-gezoomt .lupe__bild:active { cursor: grabbing; }
.lupe__zu {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-default);
  background: rgba(16, 32, 28, 0.9);
  color: var(--text-heading);
  font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.lupe__zu:hover { border-color: var(--color-accent-500); }
.lupe__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--border-default);
  background: rgba(16, 32, 28, 0.9);
  color: var(--text-heading);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.lupe__pfeil svg { width: 22px; height: 22px; }
.lupe__pfeil:hover { border-color: var(--color-accent-500); }
.lupe__pfeil:focus-visible, .lupe__zu:focus-visible {
  outline: 2px solid var(--color-accent-500); outline-offset: 2px;
}
.lupe__pfeil--zurueck { left: var(--space-4); }
.lupe__pfeil--vor { right: var(--space-4); }
.lupe__zaehler {
  position: absolute; bottom: var(--space-5); left: 0; right: 0;
  margin: 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
}

@media (max-width: 640px) {
  .lupe__rahmen { width: calc(100vw - 2 * var(--space-3)); height: calc(100vh - 7rem); }
  .lupe__pfeil { width: 40px; height: 40px; }
  .lupe__pfeil--zurueck { left: var(--space-2); }
  .lupe__pfeil--vor { right: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .lupe__scrim, .lupe__rahmen, .lupe__bild { transition: none; }
}

.pdp__buy { display: flex; flex-direction: column; gap: var(--space-5); }
.pdp__buy h1 {
  font-size: clamp(1.9rem, 3.6vw, var(--text-display-md));
  line-height: var(--leading-snug);
  color: var(--text-heading);
  margin: 0;
}
.pdp__lead { color: var(--text-body); font-size: var(--text-body-lg); margin: 0; }

.pdp__price { display: flex; flex-direction: column; gap: var(--space-1); }
.pdp__price .amount {
  font-family: var(--font-mono);
  font-size: var(--text-heading-lg);
  color: var(--text-heading);
}
.pdp__price .vat { font-size: var(--text-body-sm); color: var(--text-muted); }
.pdp__price .vat a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

/* Variantenauswahl */
.variants { display: flex; flex-direction: column; gap: var(--space-3); }
/* hidden muss gewinnen: Das display oben hebt es sonst auf. Gebraucht,
   seit ausgeschaltete Oberflächen und Setgrößen samt Gruppe
   verschwinden (09.10.2026). */
.variants[hidden], .variant[hidden] { display: none; }
.variants__label {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
/* auto-fit statt fester Dreiteilung: Wird eine Oberfläche für ein
   Produkt gelöscht, rücken die übrigen auf, statt eine Lücke zu lassen. */
.variants__set { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-3); }
.variant { position: relative; }
.variant input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.variant span {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-body);
  font-size: var(--text-body-sm);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
  position: relative; overflow: hidden;
}
.variant span em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}
.variant input:hover + span { border-color: var(--border-strong); }

/* Die gewaehlte Ausfuehrung bekommt einen Balken an der linken Kante,
   der aus der Mitte aufwaechst. Der Farbwechsel allein sprang bisher
   ohne Uebergang um — bei zwei Auswahlgruppen uebereinander (Setgroesse
   und Oberflaeche) sieht man dann nicht, was sich gerade geaendert hat.
   Abgeleitet aus den Toggle-Referenzen der Dribbble-Sammlung, aber ohne
   deren 3D-Spielerei: die Marke traegt keine Effekte, nur Hinweise. */
.variant span::before {
  content: ''; position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 2px; border-radius: 2px;
  background: var(--color-accent-500);
  transform: scaleY(0);
  transition: transform var(--duration-normal) var(--ease-standard);
}
.variant input:checked + span::before { transform: scaleY(1); }

.variant input:checked + span {
  border-color: var(--color-accent-500);
  background: var(--surface-accent-tint);
  color: var(--text-heading);
  transform: translateY(-1px);
}
.variant input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Abgeschaltete Oberfläche: sichtbar, aber erkennbar nicht wählbar.
   Ausblenden wäre falsch — wer die Oberfläche kennt, soll sehen, dass
   es sie gibt und sie gerade nur nicht zu haben ist. */
.variant--aus { opacity: 0.45; }
.variant--aus input { cursor: not-allowed; }
.variant--aus span { border-style: dashed; }
.variant--aus span em { font-style: normal; }

/* Lieferzeit */
.delivery {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--color-accent-500);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}
.delivery__k {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.delivery__v { color: var(--text-heading); font-size: var(--text-body-sm); font-weight: var(--weight-medium); }

/* Kaufbereich */
.buybox { display: flex; flex-direction: column; gap: var(--space-4); }
.buybox .btn { width: 100%; justify-content: center; }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-body-sm); color: var(--text-muted); }
.consent input { margin-top: 4px; accent-color: var(--color-accent-500); flex: none; }
.consent a { color: var(--text-link); }
.buybox__note { font-size: var(--text-caption); color: var(--text-muted); margin: 0; }

/* Datenblatt */
.specs { border-top: 1px solid var(--border-default); }
.specs__row {
  display: grid; grid-template-columns: 12rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-body-sm);
}
.specs__k { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; }
.specs__v { color: var(--text-body); }

/* ================================================================
   WARENKORB
   ================================================================ */

/* Der Knopf in der Kopfzeile steht in styles.css — der Kopf ist auf allen Seiten derselbe. */

/* Schublade */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(5, 12, 11, 0.66);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-standard);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--surface-card);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-standard);
  display: flex; flex-direction: column;
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.drawer__head h2 { font-size: var(--text-heading-sm); color: var(--text-heading); margin: 0; }
.drawer__close {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.4rem; line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-sm);
}
.drawer__close:hover { color: var(--text-heading); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.drawer__foot { padding: var(--space-5); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-4); }
.drawer__foot .btn { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__scrim { transition: none; }
}

/* Warenkorbzeile — auf Seite und in der Schublade dieselbe */
.cart-line { display: flex; gap: var(--space-4); align-items: flex-start; }
.cart-line + .cart-line { padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.cart-line__media {
  width: 78px; height: 98px; flex: none;
  background: var(--color-ink-800);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
  text-align: center; line-height: 1.6;
}
/* Liegt ein Foto vor, verschwindet der gestrichelte Rahmen — er ist die
   Markierung für "hier fehlt noch etwas", nicht Zierrat. */
.cart-line__media:has(img) { display: block; border-style: solid; border-color: var(--border-default); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-line__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cart-line__body h3 { font-size: var(--text-body-md); color: var(--text-heading); margin: 0; font-weight: var(--weight-medium); }
.cart-line__meta { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-muted); }
.cart-line__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.cart-line__price { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-heading); white-space: nowrap; }
.cart-line__del {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--text-caption);
  text-decoration: underline; text-underline-offset: 2px;
  padding: 0; font-family: var(--font-sans);
}
.cart-line__del:hover { color: #C98A8A; }

/* Fortschritt zur Versandkostenfreigrenze */
.freeship { display: flex; flex-direction: column; gap: var(--space-2); }
.freeship__t { font-size: var(--text-body-sm); color: var(--text-body); }
.freeship__t b { color: var(--color-accent-300); }
.freeship__track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.freeship__fill { height: 100%; background: var(--color-accent-500); border-radius: var(--radius-pill); }

/* Leerer Warenkorb */
.cart-empty { text-align: center; padding-block: var(--space-8); }
.cart-empty p { color: var(--text-muted); margin-bottom: var(--space-5); }

/* ================================================================
   CHECKOUT

   Auf unserer Seite liegt nur die Bestellübersicht. Die Bezahlung
   selbst passiert bei Stripe, deshalb endet unsere Gestaltung am
   Bestellbutton.

   Die Anordnung ist nicht frei wählbar: Nach § 312j BGB müssen
   Ware, Gesamtpreis und Versandkosten unmittelbar über dem Button
   stehen. Deshalb sitzt die Zusammenfassung direkt darüber und
   nicht in einer Spalte daneben.
   ================================================================ */

/* Kopf ohne Navigation — im Checkout wird nichts angeboten,
   was vom Abschluss wegführt. Nur Logo und Rücksprung. */
.co-header {
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-card);
}
.co-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.co-header img { height: 44px; width: auto; display: block; }
.co-back { font-size: var(--text-body-sm); color: var(--text-muted); display: inline-flex; gap: 8px; align-items: center; }
.co-back:hover { color: var(--color-accent-400); }

/* Fortschritt */
.co-steps { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-6); }
.co-step {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
.co-step__n {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-default);
  font-size: 0.6rem;
}
.co-step.is-now { color: var(--text-heading); }
.co-step.is-now .co-step__n { background: var(--color-accent-500); color: var(--text-on-accent); border-color: transparent; }
.co-step__sep { width: 26px; height: 1px; background: var(--border-default); }

.co-wrap { max-width: 720px; margin: 0 auto; }
.co-wrap h1 {
  font-size: clamp(1.8rem, 3.4vw, var(--text-display-md));
  color: var(--text-heading);
  margin: 0 0 var(--space-5);
}

.co-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.co-card__title {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Artikelzeile */
.co-line { display: flex; gap: var(--space-4); align-items: flex-start; }
.co-line__media {
  width: 96px; height: 120px; flex: none;
  background: var(--color-ink-800);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
  text-align: center; line-height: 1.6;
}
.co-line__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.co-line__body h2 { font-size: var(--text-heading-sm); color: var(--text-heading); margin: 0; }
.co-line__meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); letter-spacing: 0.06em; }
.co-line__price { font-family: var(--font-mono); font-size: var(--text-heading-sm); color: var(--text-heading); white-space: nowrap; }

/* Menge */
.qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border-default); border-radius: var(--radius-pill); overflow: hidden; }
.qty button {
  width: 34px; height: 32px; border: none; background: transparent;
  color: var(--text-body); cursor: pointer; font-size: 1rem; line-height: 1;
}
.qty button:hover { background: var(--surface-sunken); color: var(--text-heading); }
.qty span { min-width: 32px; text-align: center; font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--text-heading); }

/* Summen */
.co-sum { display: flex; flex-direction: column; gap: var(--space-3); }
.co-sum__row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-body-sm); color: var(--text-body); }
.co-sum__row span:last-child { font-family: var(--font-mono); color: var(--text-heading); white-space: nowrap; }
.co-sum__row--muted, .co-sum__row--muted span:last-child { color: var(--text-muted); }
.co-sum__rule { height: 1px; background: var(--border-default); margin-block: var(--space-2); }
.co-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.co-total__k { font-size: var(--text-body-lg); color: var(--text-heading); font-weight: var(--weight-semibold); }
.co-total__v { font-family: var(--font-mono); font-size: var(--text-heading-lg); color: var(--text-heading); }

/* Lieferung */
.co-fact { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-sm); color: var(--text-body); }
.co-fact + .co-fact { margin-top: var(--space-3); }
.co-fact svg { width: 18px; height: 18px; color: var(--color-accent-500); flex: none; }
.co-fact b { color: var(--text-heading); font-weight: var(--weight-medium); }

/* Lieferanschrift.
   Zwei Spalten, weil Postleitzahl und Ort zusammengehören und
   untereinander wie zwei unabhängige Angaben aussähen. Alles andere
   läuft über die volle Breite — ein Name bricht sonst mitten im Feld. */
.co-form { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4); }
.co-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.co-field--voll { grid-column: 1 / -1; }
/* Vorname und Nachname nebeneinander, je halb breit, auch auf dem Telefon */
.co-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.co-field label {
  font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
.co-field input {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-ink-900);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: var(--font-sans); font-size: var(--text-body-sm);
}
.co-field input:focus { outline: none; border-color: var(--color-accent-500); }
.co-field input:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }
.co-optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }

/* Auswahlfelder in der Kasse (Fahrzeug, seit 08.10.2026): aussehen wie
   die Textfelder, den Pfeil zeichnen wir selbst. color-scheme sorgt
   dafür, dass die aufgeklappte Liste dunkel bleibt. */
.co-field select {
  width: 100%;
  padding: 12px 38px 12px 14px;
  background: var(--color-ink-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239C927C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: var(--font-sans); font-size: var(--text-body-sm);
  appearance: none; -webkit-appearance: none;
  color-scheme: dark;
  cursor: pointer;
}
.co-field select:disabled { color: var(--text-muted); cursor: default; }
.co-field select:focus { outline: none; border-color: var(--color-accent-500); }
.co-field select:focus-visible { outline: 2px solid var(--color-accent-500); outline-offset: 2px; }
/* "selbst eintragen": Das Textfeld erscheint unter der Auswahl */
.co-field select:not([hidden]) + input:not([hidden]) { margin-top: 8px; }

/* ---------------- Vertrag widerrufen (§ 356a BGB) ---------------- */
.widerruf { margin-top: var(--space-5); }
.widerruf .co-form { grid-template-columns: 1fr; }
.widerruf textarea {
  width: 100%; padding: 12px 14px; resize: vertical;
  background: var(--color-ink-900);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  color: var(--text-heading); font-family: var(--font-sans); font-size: var(--text-body-sm);
}
.widerruf textarea:focus { outline: none; border-color: var(--color-accent-500); }
.widerruf__knopf { margin-top: var(--space-5); }
.widerruf__satz { color: var(--text-heading); }
.widerruf__daten { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.widerruf__daten dt {
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--text-muted); padding-top: 3px;
}
.widerruf__daten dd { margin: 0; color: var(--text-heading); overflow-wrap: anywhere; }
.widerruf__tat { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.widerruf__zurueck {
  margin-top: var(--space-5); background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-muted); font: inherit; font-size: var(--text-body-sm);
  text-decoration: underline; text-underline-offset: 3px;
}
.widerruf__zurueck:hover { color: var(--text-heading); }
.widerruf__vorgang { font-family: var(--font-mono); color: var(--text-heading); }
.widerruf__alternativ { color: var(--text-muted); font-size: var(--text-body-sm); }
.widerruf__fertig:focus { outline: none; }
@media (max-width: 560px) { .widerruf__daten { grid-template-columns: 1fr; } .widerruf__daten dd { margin-bottom: var(--space-3); } }
.co-hinweis { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }

/* Das Zahlungsfeld gehört Stripe. Wir geben nur den Platz und die
   Mindesthöhe vor, damit die Seite beim Nachladen nicht springt. */
.co-zahlung { min-height: 120px; }

@media (max-width: 560px) {
  .co-form { grid-template-columns: 1fr; }
}

/* Fahrzeugangabe in der Kasse: oben Marke und Modell je halb breit,
   darunter Baujahr, HSN und TSN. Seit den Auswahlfeldern (08.10.2026)
   brauchen Marke und Modell die Breite, sonst schneidet die Auswahl
   Namen wie "Ponton (W120/W121/W180)" ab. Auf dem Telefon Marke und
   Modell über die volle Breite, der Rest paarweise. */
.co-form--fahrzeug { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.co-form--fahrzeug .co-field { grid-column: span 2; }
.co-form--fahrzeug .co-field:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 560px) {
  .co-form--fahrzeug { grid-template-columns: 1fr 1fr; }
  .co-form--fahrzeug .co-field { grid-column: auto; }
  .co-form--fahrzeug .co-field:nth-child(-n+2) { grid-column: 1 / -1; }
}

/* Einwilligung */
.co-consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-body-sm); color: var(--text-body); }
.co-consent input { margin-top: 4px; accent-color: var(--color-accent-500); flex: none; width: 17px; height: 17px; }
.co-consent a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }

/* Hinweis auf der Bestätigungsseite, wenn die Zahlung noch offen ist */
.co-stand {
  margin: var(--space-4) auto 0;
  max-width: 46ch;
  padding: var(--space-4);
  border: 1px solid var(--color-accent-500);
  border-radius: var(--radius-md);
  background: rgba(195,124,55,0.10);
  color: var(--text-body);
  font-size: var(--text-body-sm);
}

/* Der Bestellbutton */
.co-submit {
  width: 100%; justify-content: center;
  padding-block: 16px;
  font-size: var(--text-body-lg);
  margin-top: var(--space-4);
}
.co-after {
  margin-top: var(--space-3);
  font-size: var(--text-caption); color: var(--text-muted);
  text-align: center;
}

/* Zahlungsarten */
.pay-list { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pay {
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); color: var(--text-muted);
}

/* Abschlussseiten */
.co-result { max-width: 620px; margin: 0 auto; text-align: center; padding-block: var(--space-9); }
.co-result__mark {
  width: 68px; height: 68px; margin: 0 auto var(--space-5);
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-hairline-accent);
  background: var(--surface-accent-tint);
  color: var(--color-accent-400);
}
.co-result__mark svg { width: 30px; height: 30px; }
.co-result h1 { font-size: clamp(1.9rem, 4vw, var(--text-display-md)); color: var(--text-heading); margin: 0 0 var(--space-4); }
.co-result p { color: var(--text-body); font-size: var(--text-body-lg); margin: 0 auto var(--space-5); max-width: 52ch; }
.co-result__nr {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-mono);
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-default); color: var(--text-heading);
  margin-bottom: var(--space-6);
}
.co-next { text-align: left; margin-top: var(--space-6); }
.co-next__row { display: flex; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--border-default); }
.co-next__n {
  font-family: var(--font-mono); font-size: var(--text-caption);
  color: var(--color-accent-400); flex: none; padding-top: 2px;
}
.co-next__b b { display: block; color: var(--text-heading); font-weight: var(--weight-medium); font-size: var(--text-body-sm); }
.co-next__b span { font-size: var(--text-body-sm); color: var(--text-muted); }

@media (max-width: 640px) {
  .co-line__media { width: 72px; height: 90px; }
  .co-header__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* ================================================================
   RECHTSTEXTE UND INFOSEITEN
   ================================================================ */
.legal { max-width: 760px; margin: 0 auto; }
.legal h1 {
  font-size: clamp(1.9rem, 4vw, var(--text-display-md));
  color: var(--text-heading);
  margin: 0 0 var(--space-3);
}
.legal__stand {
  font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
  display: block; margin-bottom: var(--space-7);
}
.legal h2 {
  font-size: var(--text-heading-md);
  color: var(--text-heading);
  margin: var(--space-7) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 {
  font-size: var(--text-heading-sm);
  color: var(--text-heading);
  margin: var(--space-5) 0 var(--space-2);
}
.legal p, .legal li { color: var(--text-body); font-size: var(--text-body-md); }
.legal p { margin: 0 0 var(--space-4); }
.legal ul, .legal ol { margin: 0 0 var(--space-4); padding-left: 1.2rem; }
.legal li { margin-bottom: var(--space-2); }
/* Buttons ausgenommen: sonst stünde Kupfertext auf Kupferfläche (Widerrufsbelehrung) */
.legal a:not(.btn) { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.legal address { font-style: normal; color: var(--text-body); margin-bottom: var(--space-4); line-height: 1.9; }
.legal strong { color: var(--text-heading); font-weight: var(--weight-semibold); }

/* Offene Stelle, die noch gefüllt werden muss */
.todo {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: rgba(195,124,55,0.16);
  border: 1px dashed var(--border-hairline-accent);
  color: var(--color-accent-300);
}

.legal__box {
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-left: 2px solid var(--color-accent-500);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  margin-bottom: var(--space-5);
}
.legal__box p:last-child { margin-bottom: 0; }
/* Die Schreiblinien im Musterformular sind eine Kette aus Unterstrichen
   ohne Umbruchstelle. Auf dem Telefon war die Seite dadurch 600 px breit. */
.legal__box--formular p { overflow-wrap: anywhere; }

/* Inhaltsverzeichnis */
.legal__toc {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}
.legal__toc ol { margin: 0; padding-left: 1.3rem; }
.legal__toc li { margin-bottom: 6px; font-size: var(--text-body-sm); }

/* Tabellen in Infoseiten */
.legal table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-5); font-size: var(--text-body-sm); }
.legal th {
  text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted); font-weight: 400;
}
.legal td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--border-default); color: var(--text-body); }
.legal td:last-child, .legal th:last-child { text-align: right; padding-right: 0; }

/* ================================================================
   KONTAKTFORMULAR
   ================================================================ */
.kontakt { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

.kform { display: flex; flex-direction: column; gap: var(--space-5); }
.kform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.kfield { display: flex; flex-direction: column; gap: var(--space-2); }
.kfield > label {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
.kfield > label .req { color: var(--color-accent-400); }
.kfield input,
.kfield textarea,
.kfield select {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-heading);
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.kfield textarea { min-height: 170px; resize: vertical; line-height: var(--leading-normal); }
.kfield input::placeholder, .kfield textarea::placeholder { color: var(--color-cream-400); opacity: 0.6; }
.kfield input:focus, .kfield textarea:focus, .kfield select:focus {
  outline: none; border-color: var(--color-accent-500);
}
.kfield input:user-invalid, .kfield textarea:user-invalid { border-color: #C98A8A; }
.kfield__hint { font-size: var(--text-caption); color: var(--text-muted); }

/* Falle für automatische Ausfüller — für Menschen unsichtbar */
.kform__hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.kform__consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-body-sm); color: var(--text-body); }
.kform__consent input { margin-top: 3px; accent-color: var(--color-accent-500); flex: none; width: 17px; height: 17px; }
.kform__consent a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }

.kform__submit { align-self: flex-start; min-width: 220px; justify-content: center; }
.kform button[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Rückmeldung */
.kform__msg {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  font-size: var(--text-body-sm);
  display: none;
}
.kform__msg.is-shown { display: block; }
.kform__msg--ok { border-color: rgba(195,124,55,0.45); background: var(--surface-accent-tint); color: var(--color-accent-300); }
.kform__msg--err { border-color: rgba(201,138,138,0.45); background: rgba(201,138,138,0.08); color: #D9A5A5; }

/* Seitenspalte */
.kaside { display: flex; flex-direction: column; gap: var(--space-5); }
.kaside__card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.kaside__card h3 { font-size: var(--text-heading-sm); color: var(--text-heading); margin: 0 0 var(--space-3); }
.kaside__card p { color: var(--text-muted); font-size: var(--text-body-sm); margin: 0 0 var(--space-3); }
.kaside__card p:last-child { margin-bottom: 0; }
.kaside__card a { color: var(--text-link); }
.kaside__row { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.kaside__row:last-child { margin-bottom: 0; }
.kaside__row svg { width: 17px; height: 17px; color: var(--color-accent-500); flex: none; margin-top: 3px; }
.kaside__row b { display: block; color: var(--text-heading); font-weight: var(--weight-medium); font-size: var(--text-body-sm); }
.kaside__row span { font-size: var(--text-body-sm); color: var(--text-muted); }

/* ---------------- Direkt erreichbar ----------------
   Drei Karten über dem Formular. Schlicht gehalten: keine Füllung,
   nur die Haarlinie, das Zeichen in Kupfer als einziger Akzent. */
.kwege {
  list-style: none; margin: 0 0 clamp(40px, 5vw, 64px); padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
.kwege__karte {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.kwege__karte svg { width: 18px; height: 18px; color: var(--color-accent-500); flex: none; margin-top: 2px; }
.kwege__titel {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}
.kwege__karte a, .kwege__karte address {
  font-style: normal; color: var(--text-heading);
  font-size: var(--text-body-sm); line-height: 1.5; text-decoration: none;
}
.kwege__karte a:hover { color: var(--color-accent-400); }
@media (max-width: 860px) { .kwege { grid-template-columns: 1fr; } }

/* ---------------- Gruppen ----------------
   Das Formular fragt seit 23.08.2026 deutlich mehr ab. Ohne sichtbare
   Abschnitte wird daraus eine Feldwüste, die niemand ausfüllt. */
.kgroup {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-6); margin: 0;
  display: flex; flex-direction: column; gap: var(--space-5);
}
.kgroup > legend {
  padding: 0 var(--space-3); margin-left: calc(var(--space-3) * -1);
  color: var(--text-heading); font-size: var(--text-heading-sm);
  font-weight: var(--weight-medium);
}
.kgroup > legend .req { color: var(--color-accent-400); }

/* PLZ braucht keine halbe Zeile */
.kform__row--plz { grid-template-columns: 160px 1fr; }

/* Beschriftung über einer Radiogruppe — sieht aus wie ein Feldlabel,
   ist aber keines, weil sie zu mehreren Feldern gehört. */
.kfield__legende {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------- Auswahl der Leistungen ---------------- */
.kwahl { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.kwahl__opt {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 11px 18px;
  border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  color: var(--text-body); font-size: var(--text-body-sm); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.kwahl__opt:hover { border-color: var(--border-hairline-accent); }
.kwahl__opt input { accent-color: var(--color-accent-500); width: 16px; height: 16px; flex: none; }
.kwahl__opt:has(input:checked) {
  border-color: var(--color-accent-500);
  background: var(--surface-accent-tint);
  color: var(--text-heading);
}
.kwahl__opt:has(input:focus-visible) { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
.kwahl--eng .kwahl__opt { padding: 8px 14px; }

/* ---------------- Aufklappende Detailblöcke ---------------- */
.kdetail[hidden] { display: none; }
.kdetail { border-color: var(--border-hairline-accent); }
.kmass {
  margin: 0; padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: var(--text-body-sm);
}
.kmass b { color: var(--color-accent-400); font-weight: var(--weight-medium); }

@media (max-width: 900px) {
  .kontakt { grid-template-columns: 1fr; }
  .kform__row, .kform__row--plz { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .kgroup { padding: var(--space-5) var(--space-4); }
  .kwahl__opt { flex: 1 1 100%; }
}

/* ---------------- Hinweisleiste (Entwurfsstatus) ---------------- */
.draft-note {
  background: var(--surface-accent-tint);
  border-bottom: 1px solid var(--border-hairline-accent);
  padding-block: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-300);
  text-align: center;
}

/* ---------------- Footer ---------------- */
.shop-footer {
  border-top: 1px solid var(--border-default);
  background: var(--surface-card);
  padding-block: var(--space-7);
  margin-top: var(--space-9);
}
.shop-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-5); justify-content: space-between; align-items: flex-start; }
.shop-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.shop-footer a { color: var(--text-muted); font-size: var(--text-body-sm); }
.shop-footer a:hover { color: var(--color-accent-400); }
.shop-footer__meta { font-size: var(--text-caption); color: var(--text-muted); max-width: 46ch; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
}
@media (max-width: 640px) {
  .shop-grid { grid-template-columns: 1fr; }
  .variants__set { grid-template-columns: 1fr; }
  .specs__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ============================================================
   VORMERKEN
   Für Objekte, die schon zu sehen, aber noch nicht zu kaufen sind.
   Der Preis bleibt sichtbar: Wer sich vormerken lässt, will wissen,
   worauf er wartet.
   ============================================================ */
.buybox--vormerken { gap: var(--space-4); }

.vormerk__kopf {
  margin: 0; color: var(--text-heading);
  font-size: var(--text-body-md); font-weight: var(--weight-medium);
}

.vormerk { display: flex; flex-direction: column; gap: var(--space-3); }

.vormerk__reihe { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.vormerk__feld {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--font-sans); font-size: var(--text-body-sm);
  color: var(--text-heading); background: var(--surface-sunken);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.vormerk__feld::placeholder { color: var(--text-muted); }
.vormerk__feld:focus-visible {
  outline: 2px solid var(--border-focus); outline-offset: 1px;
  border-color: var(--border-focus);
}
.vormerk__feld:disabled { opacity: 0.55; }

.vormerk__recht {
  margin: 0; color: var(--text-muted);
  font-size: 0.76rem; line-height: 1.6; max-width: 56ch;
}

.vormerk__meldung {
  margin: 0; font-size: var(--text-body-sm);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); color: var(--text-body);
}
.vormerk__meldung.ist-gut {
  border-color: var(--border-hairline-accent);
  background: var(--surface-accent-tint);
  color: var(--color-accent-300);
}
.vormerk__meldung.ist-fehler {
  border-color: rgba(201,138,138,0.45);
  background: rgba(201,138,138,0.10);
  color: #D9A5A5;
}

/* ---- Kachel in der Kollektion ---- */
.prod--vormerken .prod__media { position: relative; }

.prod__band {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-on-accent); background: var(--color-accent-500);
  padding: 5px 10px; border-radius: 100px;
}

/* ============================================================
   VORBESTELLUNG
   Für Objekte, die bezahlt und erst später geliefert werden.
   Der Kasten ist bewusst ruhig gehalten: Er ist eine Angabe, die
   vor dem Kauf gelesen werden muss, kein Werbebanner. Kupfer
   markiert nur die Überschrift, die Fläche bleibt Petrol.
   ============================================================ */
.buybox--vorbestellung { gap: var(--space-4); }

.vorbest {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-accent-tint);
  border: 1px solid var(--border-hairline-accent);
  border-radius: var(--radius-sm);
}

.vorbest__kopf {
  margin: 0; font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--color-accent-300);
}

.vorbest__termin {
  margin: 0; color: var(--text-heading);
  font-size: var(--text-body-md); font-weight: var(--weight-medium);
}

.vorbest__rest {
  margin: 0; color: var(--color-accent-300);
  font-size: var(--text-body-sm);
}

.vorbest__text {
  margin: 0; color: var(--text-body);
  font-size: 0.8rem; line-height: 1.65; max-width: 62ch;
}

/* Im Checkout sitzt der Kasten unmittelbar über dem Bestellknopf.
   Etwas mehr Luft darunter, damit er nicht am Knopf klebt. */
.vorbest--co { margin-bottom: var(--space-5); }

/* Der Warnhinweis am Kaufknopf, wenn Vorbestellung und Lagerware
   in denselben Warenkorb sollen. */
.buybox__note--warn { color: #D9A5A5; }

/* ---- Kachel in der Kollektion ---- */
.prod--vorbestellung .prod__media { position: relative; }

.prod__vorbest {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--color-accent-300);
}

/* ============================================================
   KOLLEKTION — die Shopseite, umgebaut am 23.09.2026

   Ruhiger als vorher: keine Bühne, keine Umblätter-Karten. Oben
   zwei kleine Welten-Kacheln in 16:9, die über dem Grund schweben,
   darunter je ein Kapitel mit den Produkten als einzelne Kacheln.

   Alles hier ist auf .kollektion beschränkt. Die Produktkacheln
   (.prod) stehen auch auf der Startseite, den Produktseiten und im
   Vorverkauf und behalten dort ihr bisheriges Aussehen.

   Gezoomt wird beim Überfahren mit der Eigenschaft `scale`, nicht
   mit `transform`: Der Bildausschnitt aus dem Admin sitzt als
   transform im style-Attribut und würde sonst überschrieben. Beide
   Eigenschaften wirken zusammen, der Ausschnitt bleibt erhalten.
   ============================================================ */
.section-head--mitte { text-align: center; margin-inline: auto; }

.kollektion {
  /* Bis 11.10.2026 stand hier eine Didone. Sie lag nie als Datei auf dem
     Server und fiel auf Windows und Android auf Georgia zurueck. Seitdem
     Poppins wie auf allen anderen Seiten. */
  --schweben: 0 18px 36px -14px rgba(0, 0, 0, 0.8), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
  --schweben-hoch: 0 30px 56px -18px rgba(0, 0, 0, 0.9), 0 12px 22px -8px rgba(0, 0, 0, 0.65);
  --kante: 1px solid rgba(242, 236, 222, 0.07);
  --ease-ruhig: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.kollektion-link {
  color: var(--text-heading);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: border-color var(--duration-slow) var(--ease-standard);
}
.kollektion-link:hover { color: var(--text-heading); border-bottom-color: var(--text-heading); }

/* ---- Einleitung ---- */
.kollektion-intro { padding-block: clamp(56px, 9vw, 120px) clamp(36px, 5vw, 64px); }
.kollektion-intro__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: end; gap: var(--space-6) var(--space-8);
}
.kollektion-intro h1 {
  margin: 0;
  font-family: var(--font-sans); font-weight: 500;
  font-size: clamp(3.4rem, 10.5vw, 8.25rem);
  line-height: 0.95; letter-spacing: -0.025em;
}
.kollektion-intro p { margin: 0 0 0.9em; max-width: 36ch; color: var(--text-body); }
@media (max-width: 760px) {
  .kollektion-intro__raster { grid-template-columns: 1fr; }
  .kollektion-intro p { margin-bottom: 0; }
}

/* ---- Kategorien als Textleiste ----
   Seit 10.10.2026 nur Text, damit sie sich klar von den Produktkacheln
   abheben. Die gewählte Kategorie trägt eine Kupferlinie. */
.welten {
  display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 36px);
  border-bottom: var(--kante);
}
.welt {
  display: block; padding: 14px 0 12px; margin-bottom: -1px;
  font-family: var(--font-sans); font-size: 0.9375rem; letter-spacing: 0.02em;
  color: var(--text-body); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 300ms var(--ease-ruhig), border-color 300ms var(--ease-ruhig);
}
.welt:hover, .welt:focus-visible { color: var(--text-heading); }
.welt.ist-gewaehlt { color: var(--text-heading); border-bottom-color: var(--color-accent-500); }

/* ---- Kategorien ----
   Ohne Auswahl zwei Spalten, eine je Welt. Mit Auswahl bleibt nur
   die gewählte stehen und nimmt die volle Breite. Das Raster in der
   Kategorie füllt mit auto-fill auf, damit eine Kachel in beiden
   Zuständen ungefähr gleich groß bleibt und nicht springt. */
.kapitel-raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(64px, 9vw, 96px) clamp(24px, 4vw, 56px);
  padding-top: clamp(72px, 10vw, 128px);
}
.kapitel { min-width: 0; scroll-margin-top: 96px; }
.kapitel-raster.ist-gefiltert { grid-template-columns: minmax(0, 1fr); }
.kapitel-raster.ist-gefiltert .kapitel:not(.ist-gewaehlt) { display: none; }

.kapitel__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  border-top: 1px solid var(--border-strong);
  padding-top: var(--space-5);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.kapitel__kopf h2 {
  margin: 0;
  font: 600 clamp(2.25rem, 4.2vw, 3.5rem)/1 var(--font-sans);
  letter-spacing: -0.015em; color: var(--text-heading);
}
.kapitel__alle {
  display: none;
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 6px 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  transition: color var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard);
}
.kapitel__alle:hover { color: var(--text-heading); border-bottom-color: var(--text-heading); }
.kapitel-raster.ist-gefiltert .kapitel__alle { display: inline-block; }

/* Ohne Auswahl keine Kategorie-Köpfe (Wunsch 03.10.2026): Dann ist es
   einfach die ganze Kollektion, Überschrift und Linie würden eine
   Trennung behaupten, die gerade niemand gewählt hat. Der Abstand
   zwischen den Kategorien wird dabei zum normalen Abstand zwischen
   Kacheln, sonst stünde dort eine Lücke ohne Grund. */
.kapitel-raster:not(.ist-gefiltert) .kapitel__kopf { display: none; }
.kapitel-raster:not(.ist-gefiltert) { gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px); }

/* Beim Umschalten blendet die Kategorie sanft ein, statt zu springen */
.kapitel.ist-neu { animation: kapitel-ein 480ms var(--ease-ruhig); }
@keyframes kapitel-ein { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 760px) { .kapitel-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---- Produktkacheln in der Kollektion ---- */
.kollektion .shop-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px);
}
.kollektion .prod {
  background: none; border: 0; border-radius: 0; overflow: visible;
  gap: var(--space-5);
}
.kollektion .prod:hover { transform: none; box-shadow: none; }

.kollektion .prod__media {
  border: var(--kante); border-radius: var(--radius-lg);
  background: var(--surface-card);
  isolation: isolate;
  box-shadow: var(--schweben);
  transition: transform 600ms var(--ease-ruhig), box-shadow 600ms var(--ease-ruhig);
}
.kollektion .prod__media::before,
.kollektion .prod__media::after { display: none; }
.kollektion .prod__media img { transition: scale 1400ms var(--ease-ruhig); }
.kollektion .prod:hover .prod__media { transform: translateY(-3px); box-shadow: var(--schweben-hoch); }
.kollektion .prod:hover .prod__media img { scale: 1.04; }

/* ---- Nachgeschärft am 25.09.2026 ----
   Die Kacheln standen hochkant (4:5) und nahmen nur die halbe Spalte
   ein, daneben blieb ein leerer Streifen.
   - auto-fit statt auto-fill: Leere Spuren fallen weg, eine einzelne
     Kachel füllt ihre Spalte. Kommen Objekte dazu, teilen sie sich
     die Breite.
   - 4:3 statt 4:5: Die Produktfotos sind Querformat, und 4:3 ist der
     Rahmen, in dem der Admin den Bildausschnitt zeigt. Was dort
     eingestellt wird, steht hier genauso.
   - Ist eine Kategorie gewählt und steht darin nur ein Objekt, liegen
     Bild und Text nebeneinander, statt dass ein einzelnes Bild über
     die ganze Seitenbreite wächst. */
.kollektion .prod__media { aspect-ratio: 4 / 3; }
@media (min-width: 761px) {
  .kapitel-raster.ist-gefiltert .prod:only-child {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 5vw, 72px); align-items: center;
  }
}

/* Das Band auf dem Bild: in der Kollektion ruhiger als anderswo. Kupfer
   nur als Schrift, die Fläche bleibt dunkel — wie beim Vorbestellungs-
   kasten auf der Produktseite. Eine volle Kupferfläche zog den Blick
   vom Objekt weg auf das Etikett. */
.kollektion .prod__band {
  background: rgba(8, 11, 10, 0.62); color: var(--color-accent-300);
  border: 1px solid rgba(242, 236, 222, 0.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.kollektion .prod__body { padding: 0; gap: var(--space-2); }
.kollektion .prod__body h3 {
  font: 600 clamp(1.6rem, 2.2vw, 2rem)/1.1 var(--font-sans);
  letter-spacing: -0.01em; color: var(--text-heading);
}
.kollektion .prod__desc { color: var(--text-body); max-width: 40ch; }
.kollektion .prod__dots { margin-top: var(--space-1); }
.kollektion .prod__foot { align-items: center; padding-top: var(--space-3); }
.kollektion .prod__price {
  font-family: var(--font-sans); font-weight: 300;
  font-size: 1.25rem; letter-spacing: -0.01em;
  color: var(--text-heading);
}
.kollektion .prod__more { color: var(--text-heading); font-weight: var(--weight-regular); }
.kollektion .prod__more .arrow { display: inline-block; transition: transform 500ms var(--ease-ruhig); }

/* Draufsicht statt Foto, solange keins hinterlegt ist */
.prod__zeichnung { width: 76%; height: auto; overflow: visible; }
.prod__zeichnung .z-kontur { fill: var(--surface-card); stroke: var(--text-heading); stroke-opacity: 0.7; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.prod__zeichnung .z-fein { fill: none; stroke: var(--text-heading); stroke-opacity: 0.38; stroke-width: 1; vector-effect: non-scaling-stroke; }
.prod__zeichnung .z-mitte { fill: none; stroke: var(--text-muted); stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 10 3 2 3; vector-effect: non-scaling-stroke; }
.prod__zeichnung .z-mass { fill: none; stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.prod__zeichnung text { fill: var(--text-muted); font-family: var(--font-mono); font-size: 4.2px; letter-spacing: 0.06em; }
.prod__zeichnung-notiz {
  position: absolute; left: var(--space-4); bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-muted);
}


/* ---- Versand, Fertigung, Widerruf ---- */
.kollektion-rahmen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-7);
  margin-top: clamp(96px, 12vw, 160px);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--border-strong);
}
.kollektion-rahmen h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: var(--weight-medium);
  letter-spacing: 0; line-height: 1.4; color: var(--text-heading);
}
.kollektion-rahmen p { margin: 0; font-size: 0.9375rem; max-width: 34ch; }
@media (max-width: 760px) { .kollektion-rahmen { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .kapitel.ist-neu { animation: none; }
  .welt,
  .kollektion .prod__media, .kollektion .prod__media img, .kollektion .prod__more .arrow { transition: none; }
  .kollektion .prod:hover .prod__media { transform: none; }
  .kollektion .prod:hover .prod__media img { scale: none; }
}

/* ============================================================
   VORVERKAUFSSEITE
   Drei Blöcke: was dabei ist, wie es läuft, wohin es geht.
   Bewusst ohne eigene Farbwelt — die Seite ist der Shop, nur
   ruhiger und mit mehr Erklärung.
   ============================================================ */
.vv-punkte {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.vv-punkt {
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.vv-punkt__n {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: var(--tracking-mono); color: var(--color-accent-400);
}
.vv-punkt h3 { margin: var(--space-3) 0 var(--space-2); color: var(--text-heading); }
.vv-punkt p { margin: 0; color: var(--text-body); font-size: var(--text-body-sm); }

.vv-ablauf { max-width: 760px; }

.vv-wahl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }

.vv-karte {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-normal) var(--ease-standard);
}
.vv-karte:hover { border-color: var(--border-hairline-accent); transform: translateY(-2px); }
.vv-karte__n {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: var(--tracking-mono); color: var(--text-muted);
}
.vv-karte h3 { margin: 0; color: var(--text-heading); }
.vv-karte p { margin: 0 0 var(--space-3); color: var(--text-body); font-size: var(--text-body-sm); }

@media (max-width: 900px) {
  .vv-punkte, .vv-wahl { grid-template-columns: 1fr; }
}


@media (prefers-reduced-motion: reduce) {
  .variant span, .variant span::before { transition: none; }
  .variant input:checked + span { transform: none; }
}


/* ---------------- Warenkorbzeile: Weg zurueck zum Produkt ----------------
   Ergaenzt am 11.09.2026. Foto und Name bilden zusammen einen Link auf
   die Produktseite, mit Setgroesse und Oberflaeche in der Adresse.
   Die Bedienelemente liegen daneben, nicht darin — ein Plusknopf
   innerhalb eines Links waere bei jedem Klick auch ein Seitenwechsel.
   -------------------------------------------------------------------- */
.cart-line__ziel {
  display: flex; gap: var(--space-4); align-items: flex-start;
  flex: 1; min-width: 0;
  color: inherit; text-decoration: none;
  border-radius: var(--radius-md);
  transition: opacity var(--duration-normal) var(--ease-standard);
}
.cart-line__ziel:hover { text-decoration: none; opacity: 0.72; }
/* Auf der Warenkorbseite umschließt der Link nur das Foto. Mit flex: 1
   nahm er die halbe Zeile ein, und Name und Preis rückten in die Mitte
   (gefunden 25.09.2026). In der Schublade stehen Foto und Name zusammen
   im Link, dort greift die Regel nicht. */
.cart-line__ziel:has(> .cart-line__media:only-child) { flex: none; }
.cart-line__ziel:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.cart-line__ziel h3 { transition: color var(--duration-normal) var(--ease-standard); }
.cart-line__ziel:hover h3 { color: var(--color-accent-400); }

/* In der Schublade steht die Bedienung unter der Zeile statt daneben:
   die Flaeche ist schmal, nebeneinander wuerde beides gedraengt. */
.drawer .cart-line { flex-direction: column; gap: var(--space-3); }
.drawer .cart-line__steuer {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
}
.drawer .cart-line__price { margin-left: auto; }
.drawer .cart-line__del { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .cart-line__ziel, .cart-line__ziel h3 { transition: none; }
}

/* ---------------- Passen dazu ----------------
   Weitere Objekte derselben Kategorie unter dem Datenblatt. Raster und
   Kacheln sind dieselben wie in der Kollektion, nur die Ueberschrift
   braucht eigenen Abstand. */
.dazu__titel {
  font-size: var(--text-heading-lg);
  color: var(--text-heading);
  margin: var(--space-3) 0 var(--space-6);
}

/* Stueckpreis im Set, unter dem Setpreis. Mono wie der Betrag darueber,
   aber zurueckgenommen: die Zahl, die zaehlt, ist der Setpreis. */
.pdp__price .jestueck {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-400);
}

/* ---------- Pulverfarbe (seit 10.10.2026) ---------- */
.farbwahl__set { flex-wrap: wrap; }
.farbwahl__farbe span { display: inline-flex; flex-direction: column; align-items: flex-start; }
.farbwahl__punkt {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--border-default); margin-bottom: var(--space-1);
}
.farbwahl__punkt--wunsch {
  background: conic-gradient(#b33 0 25%, #c9a227 0 50%, #2e6b4f 0 75%, #2b4f8c 0);
}
.farbwahl__wunsch { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.farbwahl__wunsch[hidden], .farbwahl[hidden] { display: none; }
.farbwahl__k { font-size: var(--text-body-sm); color: var(--text-muted); }
.farbwahl__wunsch input {
  max-width: 260px; padding: 10px 12px; background: transparent; color: var(--text-body);
  border: 1px solid var(--border-default); border-radius: 4px; font: inherit;
}
.co-wunsch { margin-top: var(--space-3); }

/* ---------- Übersicht vor dem Bestellknopf (11.10.2026) ----------
   Ware mit den wesentlichen Merkmalen, Lieferumfang, Gesamtpreis und
   Termin unmittelbar über dem Knopf (§ 312j Abs. 2 BGB). */
.co-zus {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-sunken); padding: var(--space-5); margin-bottom: var(--space-5);
}
.co-zus[hidden] { display: none; }
.co-zus__kopf {
  margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-caption);
  letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-muted);
}
.co-zus__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.co-zus__liste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  font-size: var(--text-body-sm); line-height: 1.5; color: var(--text-body);
}
.co-zus__was b { color: var(--text-heading); font-weight: var(--weight-semibold); }
.co-zus__merkmale { display: block; color: var(--text-muted); }
.co-zus__preis { white-space: nowrap; font-family: var(--font-mono); color: var(--text-heading); }
.co-zus__summe {
  margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-default);
  font-size: var(--text-body-sm); color: var(--text-body);
}
.co-zus__summe b { color: var(--text-heading); font-family: var(--font-mono); font-weight: var(--weight-medium); }
.co-zus__termin { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); color: var(--text-body); }

/* Kontaktformular: freiwillige Angabe (11.10.2026) */
.kfield__frei { color: var(--text-muted); }

/* ---------- EU-Gewährleistungsmitteilung (11.10.2026) ----------
   Amtliche Grafik, unverändert. Nur skaliert, nie beschnitten. */
.eu-hinweis { margin: var(--space-6) 0; }
.eu-hinweis img { display: block; width: 100%; max-width: 595px; height: auto; background: #fff; border-radius: var(--radius-sm); }
.co-gewaehr {
  display: flex; gap: var(--space-4); align-items: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-5);
}
.co-gewaehr__bild { flex: none; line-height: 0; }
.co-gewaehr__bild img { width: 96px; height: auto; background: #fff; border-radius: 2px; }
.co-gewaehr p { margin: 0; font-size: var(--text-body-sm); line-height: 1.55; color: var(--text-body); }
.co-gewaehr b { color: var(--text-heading); }