/* ==========================================================================
   MARTINO — Grundlage aller Seiten und der Konfigurator
   Kopf, Fuß, Knöpfe und Fotos für jede Seite; dazu das Warenkorb-Fach und
   der Konfigurator auf einen Blick:
   links die Bühne, rechts die Liste. Die Startseite hat css/start.css, die
   Kapitel der Seite Bikes css/bikes.css.
   ========================================================================== */

@import url('fonts.css');

:root {
  --paper:    #FFFFFF;
  --paper-2:  #FAF9F7;
  --paper-3:  #F2F0EC;
  --ink:      #14161A;
  --ink-2:    #5C6067;
  --ink-3:    #8E9299;
  --line:     #E6E3DE;
  --line-2:   #D5D1CA;
  --nero:     #0B0B0C;   /* Primär, dasselbe Schwarz wie der Kopf */
  --nero-2:   #2A2B2E;
  --gold:     #EFC03C;
  --gold-2:   #D9A722;
  --gold-hell: #FCF4DA;  /* Fläche: die Leiste der Schaltgruppe */
  --l-ok:     #3E8E5B;   /* „Lagernd", wie „unterwegs" im Konto */

  /* The bridge to martino-cycling.at: used sparingly, for signals only —
     new arrivals, sale, the cart dot. Never as a second primary. */
  --rosso:     #D42027;   /* fills; white text on it reaches 4.8:1 */
  --rosso-ink: #B81A21;   /* red text on paper, 5.9:1 */

  --display: 'Playfair Display', Georgia, serif;
  --ui:      'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --script:  'Caveat', cursive;

  --rail: 366px;
  --gutter: 40px;
  --head-h: 80px;                      /* Höhe des Kopfs, wie Werkstatt (5rem) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 170ms;
}

* , *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--nero); outline-offset: 3px; }

/* --- shared type ------------------------------------------------------- */
.eyebrow {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.serif { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }

.spaced {
  letter-spacing: .34em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
}

/* --- page frame -------------------------------------------------------- */
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  min-height: calc(100vh - var(--head-h));
}

.main { min-width: 0; }

/* --- Kopf, wie auf der Werkstattseite -------------------------------------
   Übernommen von martino-cycling.at (Theme „martino", Abschnitt 8 HEADER),
   damit beide Seiten gleich aussehen: fast Schwarz, Originallogo links, Menü
   in der Mitte, roter eckiger Knopf rechts, am Handy eckige Symbolknöpfe und
   ein Vollbild-Menü. Farben, Schriften und Maße sind die der Werkstatt
   (--w-…); Inter Tight und Big Shoulders liegen dafür in assets/fonts/.

   Anders als dort ist der Kopf oben nicht durchsichtig: Die Werkstatt hat ein
   dunkles Startbild dahinter, der Shop eine weiße Seite. Also deckend, und
   erst beim Scrollen (.is-scrolled, js/kopf.js) mit Weichzeichner — zu 90 %
   statt 80 %, sonst würde er vor weißem Inhalt grau.

   Er klebt beim Scrollen. Was sonst klebt (Leiste im Konfigurator,
   Zusammenfassung in Warenkorb und Kasse), dockt über --head-h darunter an,
   und Sprungmarken halten denselben Abstand. */
:root {
  --w-ink: #0B0B0C;
  --w-line: #2A2D34;
  --w-cream: #ECE9E2;
  --w-rosso: #A90B0B;
  --w-rosso-hover: #C81C14;
  --w-rosso-text: #E5484D;
  --w-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --w-body: 'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
html { scroll-padding-top: var(--head-h); }

/* Vorschau für die Verwaltung (js/kopf.js, server/vorschau.js): Rot als
   Signal — so sieht es kein Besucher. */
.vorschau-leiste {
  margin: 0;
  padding: 8px var(--gutter);
  background: var(--w-rosso);
  color: #fff;
  font: 500 13px/1.4 var(--w-body);
  text-align: center;
}

.top {
  position: sticky;
  top: 0;
  z-index: 70;                         /* unter Warenkorb-Fach, Auswahl und Toast */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: var(--head-h);
  padding: 0 var(--gutter);
  background: var(--w-ink);
  color: var(--w-cream);
  border-bottom: 1px solid transparent;
  transition: background-color .5s, border-color .5s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .top.is-scrolled {
    background: rgba(11, 11, 12, .9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom-color: rgba(255, 255, 255, .05);
  }
  html.menu-offen .top { background: var(--w-ink); }
}

.brand { flex: none; display: block; }
.brand__logo { display: block; height: 28px; width: auto; }
@media (min-width: 768px) { .brand__logo { height: 32px; } }

/* Die Wortmarke als Text — nur noch im Seitenfuß. */
.brand__name {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.brand__name sup { font-size: 9px; letter-spacing: 0; margin-top: 2px; }

.mainnav { display: none; align-items: center; gap: 28px; }
@media (min-width: 1024px) { .mainnav { display: flex; } }
/* Nur die Menüpunkte selbst — die Links im Dropdown darunter sehen anders aus. */
.mainnav > a {
  position: relative;
  font-family: var(--w-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .025em;
  white-space: nowrap;
  color: rgba(236, 233, 226, .7);
  transition: color .3s;
}
.mainnav > a:hover,
.mainnav > a[aria-expanded='true'],
.mainnav > a[aria-current='page'] { color: var(--w-cream); }
/* Roter Strich, der beim Überfahren von links einläuft; auf der aktuellen
   Seite steht er ganz. */
.mainnav > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 0;
  background: var(--w-rosso-text);
  transition: width .3s;
}
.mainnav > a:hover::after,
.mainnav > a[aria-expanded='true']::after,
.mainnav > a[aria-current='page']::after { width: 100%; }
/* Zwischen 1024 und 1199 px wird es eng: Kopf und Menü rücken zusammen,
   sonst bricht „Custom Builder" auf zwei Zeilen um. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .top, .mainnav { gap: 18px; }
  .top .cta { padding: 14px 20px; }
}

/* --- Dropdown unter „Zubehör" und „Wear" (js/kopf.js) -----------------------
   Seit 3.10.2026 im Schwarz des Kopfs und über die ganze Breite: Es setzt den
   Kopf nach unten fort (Robert: das helle Feld wirkte zu schwach). Links je
   Spalte eine Überschrift und ihre Kategorien in Big Shoulders, wie im Menü
   am Handy; der rote Strich der Menüpunkte läuft auch hier ein. Rechts ein
   Fenster auf --paper-3 wie die Kategorie-Kacheln: Bild, Zahl und „ab €" der
   Kategorie unter der Maus. Wenige Kategorien (Wear) stehen gleich als
   Kacheln da. Der Schleier dunkelt die Seite ab und fängt keine Klicks.
   Bewegung macht GSAP im Skript. Unter 1024 px gibt es das Dropdown nicht —
   dort stehen die Kategorien im Menü. */
.top.drop-offen { background: var(--w-ink); }
.drop {
  position: absolute;
  top: var(--head-h);
  left: 0;
  right: 0;
  z-index: 71;
  background: var(--w-ink);
  color: var(--w-cream);
  border-top: 1px solid var(--w-line);
  box-shadow: 0 34px 60px rgba(11, 11, 12, .3);
}
.drop[hidden] { display: none; }
.drop__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  padding: 38px var(--gutter) 44px;
}
.drop__innen--kacheln { grid-template-columns: minmax(0, 1fr); }
.drop__spalten { display: flex; flex-wrap: wrap; gap: 32px 60px; align-content: start; }
.drop__titel {
  margin-bottom: 16px;
  font-family: var(--w-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(236, 233, 226, .56);
}
.drop__col > a, .drop__name {
  font-family: var(--w-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
}
.drop__col > a {
  position: relative;
  display: block;
  width: fit-content;
  padding: 5px 0 7px;
  font-size: 23px;
  color: rgba(236, 233, 226, .7);
  transition: color .25s var(--ease);
}
/* Der rote Strich wie unter den Menüpunkten: unter der Kategorie, die das
   Fenster gerade zeigt. */
.drop__col > a::after, .drop__kachel .drop__name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 0;
  height: 2px;
  background: var(--w-rosso-text);
  transition: width .3s var(--ease);
}
.drop__col > a:hover, .drop__col > a.is-blick, .drop__col > a[aria-current='page'] { color: var(--w-cream); }
.drop__col > a:hover::after, .drop__col > a.is-blick::after,
.drop__kachel:hover .drop__name::after, .drop__kachel:focus-visible .drop__name::after { width: 100%; }

.drop__blick { display: block; align-self: start; color: inherit; }
.drop__fenster {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-3);
}
.drop__bild { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.drop__bild.is-on { opacity: 1; }
.drop__bild svg { width: 58%; height: 58%; color: var(--ink-2); }
.drop__bild svg.part { width: 140%; height: auto; max-width: none; }
.drop__bild svg.part--rad { width: 100%; }   /* die Skizze eines Rads füllt die Bühne schon (js/parts.js) */
.drop__text { display: grid; gap: 1px; margin-top: 16px; }
.drop__name { display: block; font-size: 21px; color: var(--w-cream); }
.drop__zahl, .drop__ab { font-family: var(--w-body); font-size: 13px; color: rgba(236, 233, 226, .62); }

.drop__kacheln { display: flex; flex-wrap: wrap; gap: 24px; }
.drop__kachel { display: block; width: 232px; }
.drop__kachel .drop__name { position: relative; width: fit-content; margin-top: 14px; padding-bottom: 5px; }
.drop__kachel .drop__ab { display: block; }

.top .drop :focus-visible { outline: 2px solid var(--w-rosso-text); outline-offset: 4px; }

.drop-schleier {
  position: fixed;
  inset: var(--head-h) 0 0 0;
  z-index: 69;                         /* unter dem Kopf, über der Suche */
  background: rgba(11, 11, 12, .42);
  pointer-events: none;
}
.drop-schleier[hidden] { display: none; }

/* Schmaler: Das Fenster fällt weg, die Spalten bekommen den Platz. */
@media (max-width: 1239px) {
  .drop__innen { grid-template-columns: minmax(0, 1fr); }
  .drop__blick { display: none; }
  .drop__spalten { column-gap: 48px; }
  .drop__col > a { font-size: 21px; }
}
@media (max-width: 1023px) { .drop, .drop-schleier { display: none; } }

/* --- Suche (js/kopf.js) -----------------------------------------------------
   Die Lupe im Kopf öffnet das Feld darunter, im Ton des Kopfs. Unter
   1024 px steht das Feld stattdessen oben im Menü. */
.top .tool--suche { display: none; }
@media (min-width: 1024px) { .top .tool--suche { display: grid; } }
.suche {
  position: fixed;
  top: var(--head-h);
  left: 0;
  right: 0;
  z-index: 68;
  padding: 16px var(--gutter) 18px;
  background: var(--w-ink);
  border-top: 1px solid var(--w-line);
  color: var(--w-cream);
}
.suche[hidden] { display: none; }
.suche__form, .menu__suche { display: flex; gap: 10px; }
.suche__form { max-width: 760px; margin: 0 auto; }
.suche__form input, .menu__suche input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  font-family: var(--w-body);
  font-size: 16px;                     /* darunter zoomt das iPhone hinein */
  color: var(--w-cream);
  background: transparent;
  border: 1px solid var(--w-line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.suche__form input::placeholder, .menu__suche input::placeholder { color: rgba(236, 233, 226, .5); }
.suche__form input:focus, .menu__suche input:focus {
  outline: 2px solid var(--w-rosso-text);
  outline-offset: 2px;
  border-color: rgba(236, 233, 226, .6);
}
.suche__form button, .menu__suche button {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--w-cream);
  border: 1px solid var(--w-line);
  transition: border-color .2s;
}
.suche__form button:hover, .menu__suche button:hover { border-color: rgba(236, 233, 226, .6); }
.suche :focus-visible { outline: 2px solid var(--w-rosso-text); outline-offset: 2px; }
@media (max-width: 1023px) { .suche { display: none; } }

.top__tools { display: flex; align-items: center; gap: 12px; flex: none; }

/* Der rote Knopf — .btn-primary der Werkstatt: eckig, mindestens 48 px. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--w-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .025em;
  background: var(--w-rosso);
  color: #fff;
  border: 1px solid var(--w-rosso);
  transition: background-color .2s, border-color .2s;
}
.cta:hover { background: var(--w-rosso-hover); border-color: var(--w-rosso-hover); }
.top .cta { display: none; }
@media (min-width: 1024px) { .top .cta { display: inline-flex; } }

/* `.tool` allein ist der runde Symbolknopf im hellen Teil (etwa Schließen
   im Auswahlfenster). Im Kopf wird er zum .icon-btn der Werkstatt: eckig,
   44 px, feiner Rahmen. */
.tool {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--ink);
  border-radius: 50%;
  transition: background var(--fast) var(--ease);
}
.tool:hover { background: var(--paper-3); }
.tool--cart { position: relative; }
.tool__dot {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.top .tool {
  width: 44px; height: 44px;
  border-radius: 0;
  border: 1px solid var(--w-line);
  color: var(--w-cream);
  transition: border-color .2s;
}
.top .tool:hover { background: none; border-color: rgba(236, 233, 226, .6); }
.top .burger { display: grid; }
@media (min-width: 1024px) { .top .burger { display: none; } }
@media (max-width: 620px) {
  .top { gap: 16px; }
  .top .tool--konto { display: none; }  /* steht im Menü */
}
.top :focus-visible { outline: 2px solid var(--w-rosso-text); outline-offset: 2px; }

/* --- Menü am Handy (js/kopf.js) -------------------------------------------
   Wie das Overlay der Werkstatt: fast deckendes Schwarz unter dem Kopf,
   Links groß in Big Shoulders, darunter der rote Knopf. Höhe und Breite
   ausdrücklich, weil backdrop-filter sonst den Bezugsrahmen verkleinert
   (dieselbe Falle, die im Werkstatt-Theme beschrieben ist). */
.menu {
  position: fixed;
  top: var(--head-h);
  left: 0;
  width: 100vw;
  height: calc(100dvh - var(--head-h));
  z-index: 69;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(11, 11, 12, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, .05);
  padding: 32px var(--gutter) 40px;
  color: var(--w-cream);
}
.menu[hidden] { display: none; }
.menu__main { display: grid; margin-bottom: 32px; }
.menu__link {
  display: block;
  padding: 12px 0;
  font-family: var(--w-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: rgba(236, 233, 226, .9);
}
.menu__link:hover,
.menu__link[aria-current='page'] { color: var(--w-rosso-text); }
.menu .cta {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding: 16px 20px;
  font-family: var(--w-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
/* Das Suchfeld oben im Menü, und unter „Zubehör" und „Wear" ihre
   Kategorien zum Aufklappen. */
.menu__suche { margin-bottom: 20px; }
.menu__gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; }
.menu__auf {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: rgba(236, 233, 226, .8);
  border: 1px solid var(--w-line);
}
.menu__auf svg { transition: transform .2s; }
.menu__auf[aria-expanded='true'] svg { transform: rotate(180deg); }
.menu__sub {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  padding: 2px 0 14px;
}
.menu__sub[hidden] { display: none; }
.menu__titel {
  grid-column: 1 / -1;
  margin: 12px 0 2px;
  font-family: var(--w-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(236, 233, 226, .5);
}
.menu__sub a {
  padding: 9px 0;
  font-family: var(--w-body);
  font-size: 15px;
  color: rgba(236, 233, 226, .85);
}
.menu__sub a:hover { color: var(--w-rosso-text); }
.menu__more { display: grid; gap: 2px; margin-top: 28px; }
.menu__more a {
  font-family: var(--w-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .025em;
  color: rgba(236, 233, 226, .7);
  padding: 10px 0;
}
.menu__more a:hover { color: var(--w-cream); }
.menu :focus-visible { outline: 2px solid var(--w-rosso-text); outline-offset: 2px; }
html.menu-offen { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) { animation: menu-auf .3s cubic-bezier(.22, 1, .36, 1); }
  @keyframes menu-auf { from { opacity: 0; transform: translateY(-8px); } }
}
@media (min-width: 1024px) {
  .menu { display: none; }             /* breiter: die Navigation steht im Kopf */
}

/* --- Titel und Knöpfe, auf allen Seiten -----------------------------------
   `.hero__title` und `.hero__lead` benutzen die Startseite und das Konto.
   Der Konfigurator hat seit dem 1.10.2026 keinen eigenen Hero mehr. */
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 4.6vw, 70px);
  line-height: 1.0;
  letter-spacing: -.02em;
  margin: 0 0 26px;
}

.hero__lead {
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 0 0 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 52px;
  padding: 0 26px;
  background: var(--nero);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background var(--fast) var(--ease);
}
.btn:hover { background: var(--nero-2); }
.btn--block { width: 100%; }
.btn--ghost {
  background: none;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { background: var(--paper-3); border-color: var(--ink-3); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Abschnitte ------------------------------------------------------------ */
.section {
  border-top: 1px solid var(--line);
  padding: 40px var(--gutter) 56px;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 26px;
}
.section__title {
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 8px 0 0;
}
.section__note {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.section__note::before { content: ''; width: 46px; height: 1px; background: var(--line-2); }

/* ==========================================================================
   Konfigurator auf einen Blick (js/build.js)
   Links die Bühne — das Foto des Rahmens, nach einem Plus in der Liste die
   Kategorie mit ihren Teilen —, rechts die Liste mit Fortschritt, Preis und
   Bestellen (Robert, 6.10.2026, nach dem ersten Konfigurator). Alles auf
   einem Bildschirm unter dem Kopf: Reicht die Höhe nicht, blättert die
   Bühne oder die Liste in sich, nicht die Seite. Am Handy stehen Bühne,
   Liste und Balken untereinander.

   Unser Design: Playfair für Titel und Rahmennamen, Schwarz für die
   Auswahl, Gold nur für „Empfohlen", Fotos unverändert.
   ========================================================================== */

/* --- Das Raster -------------------------------------------------------------- */
.kfg-app {
  height: calc(100vh - var(--head-h));
  height: calc(100dvh - var(--head-h));
  min-height: 600px;
}

/* --- Bühne ------------------------------------------------------------------- */
.stage { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.stage__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 28px;
  padding: 22px var(--gutter) 14px;
}
/* Titel und Erklärsatz links; rechts bleibt Platz für Veloce/Avventura. */
.stage__wort { min-width: 0; max-width: 56ch; }
.stage__lead { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
/* Der goldene Hinweis im Kopf: am großen Bildschirm steht er in der Liste
   rechts und im Balken, hier also aus. Am Handy kehrt sich das um (unten). */
.stage__fehlt { display: none; }
.stage__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 6px 0 0;
}
.stage__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.stage__close:hover { border-color: var(--ink); color: var(--ink); }
/* Hier blättert eine Kategorie mit vielen Teilen — nie die Seite. */
.stage__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px var(--gutter) 18px;
  scrollbar-width: thin;
}
.stage__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 28px;
  padding: 10px var(--gutter) 16px;
  border-top: 1px solid var(--line);
}
.stage__foot:empty { display: none; }
.stage__next {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.stage__next:hover { color: var(--ink-2); }

/* --- Bühne: das Foto ------------------------------------------------------------------
   Nach Roberts Vorlage (7.10.2026): das Foto groß in der Mitte der Bühne,
   links und rechts ein Pfeil, der die Lackierungen blättert; darunter
   mittig die Lackierungen als Punkte und die Rahmengröße in einer Reihe.
   Beides sind Pflichtwahlen, darum stehen sie sichtbar da und nicht hinter
   einer Klappe. Preis, Gewicht und Lieferzeit stehen in der Fußzeile der
   Bühne (.sfuss). */
.sfoto { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0; }
.sfoto__buehne {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
}
.sfoto__art {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
  background: radial-gradient(70% 66% at 50% 50%, #FFF 0%, #F4F2EE 100%);
}
.sfoto__art .foto { width: 100%; height: 100%; object-fit: contain; }

/* Die Pfeile liegen über dem Verlauf, nicht daneben — so bleibt das Foto so
   breit wie die Bühne. Auf dem Verlauf, also weiß hinterlegt und mit
   Haarlinie, damit sie auf hellen wie dunklen Rahmen zu sehen sind. */
.sfoto__pfeil {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  color: var(--ink-2);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.sfoto__pfeil--zurueck { grid-area: 1 / 1; justify-self: start; }
.sfoto__pfeil--vor { grid-area: 1 / 3; justify-self: end; }
.sfoto__pfeil:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
/* Das Foto liegt unter den Pfeilen und über die ganze Breite der Bühne;
   es streckt sich über die Zeile, statt von ihr gestaucht zu werden. */
.sfoto__art { grid-area: 1 / 1 / 2 / 4; align-self: stretch; }

/* Veloce oder Avventura: zwei Felder nebeneinander, das gewählte schwarz.
   Seit 7.10.2026 stehen sie rechts im Kopf der Bühne — die Mitte gehört dem
   Foto, und der Rahmenwechsel bleibt trotzdem einen Klick entfernt. */
.fwahlen { display: grid; grid-auto-flow: column; flex: none; border: 1px solid var(--line-2); }
.fwahl {
  min-width: 116px;
  padding: 9px 14px 10px;
  text-align: left;
  border-left: 1px solid var(--line-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.fwahl:first-child { border-left: 0; }
.fwahl:hover { background: var(--paper-3); }
.fwahl[aria-pressed='true'] { background: var(--nero); color: #fff; }
.fwahl--locked { opacity: .6; }
.fwahl__kind { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.fwahl[aria-pressed='true'] .fwahl__kind { color: rgba(255, 255, 255, .7); }
.fwahl__name { display: block; font-family: var(--display); font-size: 19px; line-height: 1.2; }

/* Lackierung, Name und Größe — mittig unter dem Foto. */
.sfoto__wahl { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: none; }
.sfoto__colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dot {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(20, 22, 26, .16);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .35), inset 0 -3px 5px rgba(0, 0, 0, .25);
}
.dot::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
/* Der Strich unter dem gewählten Punkt, wie in der Vorlage — statt eines
   Rings rundum, der auf dunklen Lackierungen verschwindet. */
.dot::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 2px;
  margin-left: 0;
  background: var(--nero);
  transition: width var(--fast) var(--ease), margin-left var(--fast) var(--ease);
}
.dot[aria-pressed='true']::after { width: 22px; margin-left: -11px; }
.dot--locked { opacity: .55; }
.sfoto__color { font-size: 13px; color: var(--ink-2); margin: 2px 0 0; text-align: center; }
.sfoto__color b { font-weight: 600; color: var(--ink); }

.sfoto__link {
  min-height: 34px;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
  white-space: nowrap;
}
.sfoto__link:hover { color: var(--ink); text-decoration-color: var(--ink-3); }

/* --- Bühne: die Fußzeile beim Rahmen ------------------------------------------
   Links, was gewählt ist, rechts der Preis des Rahmensets; darunter die
   Merkmale des Rahmens mit Symbol und der Lieferumfang mit der Geometrie.
   Die Zahlen sind die des Katalogs: Gewicht, Reifenfreiheit, Lieferzeit —
   ein Radgewicht oder ein Material führt der Katalog nicht. */
.stage__foot--set { flex-direction: column; align-items: stretch; gap: 0; }
.sfuss { display: grid; gap: 8px; }
.sfuss__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 24px; }
.sfuss__was { min-width: 0; }
.sfuss__name { font-family: var(--display); font-size: 24px; line-height: 1.12; margin-top: 1px; }
.sfuss__wahl { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.sfuss__preis { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.sfuss__eur { font-size: 26px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.sfuss__ab { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; margin-top: 2px; }

.sfuss__fakten { display: flex; flex-wrap: wrap; gap: 9px 32px; padding-top: 9px; border-top: 1px solid var(--line); }
.sfakt { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.sfakt svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.sfakt__text { display: grid; min-width: 0; }
.sfakt__label { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sfakt__wert { font-size: 12.5px; line-height: 1.4; }
/* Die letzte Zeile: Lieferumfang links, dann Geometrie und „Weiter". */
.sfuss__mehr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 20px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.sfuss__set { min-width: 0; margin-right: auto; }
.sfuss__set b { font-weight: 600; color: var(--ink); }
.sfuss__mehr .sfoto__link { min-height: 30px; }
.sfuss__mehr .stage__next { min-height: 30px; }

/* --- Bühne: die Wahl des Rahmens --------------------------------------------------
   Am Anfang ist kein Rahmen gewählt (Robert, 6.10.2026). Die Rahmen stehen
   nebeneinander wie bis Roberts Nr. 86 im Programm auf der Seite Bikes: Foto 3:2 auf dem hellen
   Verlauf der Bühne, Art und Name in Playfair, Reifenfreiheit und Gewicht,
   die Lackierungen als Punkte, darunter über einer Haarlinie „Rahmenset" und
   „Rad ab". Die ganze Kachel ist der Knopf. */
.ftiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ftile { width: 100%; cursor: pointer; }   /* gleich hoch, die Preise unten bündig */
.ftile__art {
  position: relative;                  /* das Foto liegt absolut darin (img.foto) */
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  background: radial-gradient(70% 66% at 50% 50%, #FFF 0%, #F4F2EE 100%);
  overflow: hidden;
}
.ftile__art .foto { width: 100%; height: 100%; object-fit: contain; }
.ftile__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 18px 16px; }
.ftile__name { font-family: var(--display); font-size: 30px; font-weight: 400; line-height: 1.15; margin: 2px 0 6px; }
.ftile__note { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ftile__colors { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.ftile__colors i {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(20, 22, 26, .16);
}
/* Zwei Zeilen, das Wort links, der Preis rechts — in jeder Breite gleich. */
.ftile__prices {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-2);
}
.ftile__prices span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ftile__prices b { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ftile--locked .ftile__art { opacity: .6; }

/* --- Bühne: Rahmengröße und Cockpit ---------------------------------------------
   Die Größe steht beim Rahmen (im Foto rechts), die des Cockpits in seiner
   Kachel — beides wie Knöpfe, die gewählte schwarz. */
.swahl__hint { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 0; text-align: center; }
/* Unter den Lackierungen, mittig und in einer Reihe (Robert, 7.10.2026).
   Wird es eng, bricht sie um — gestapelt bleibt sie lesbar. */
.sizes--rahmen { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.sizes--rahmen .size { min-width: 74px; min-height: 48px; padding: 5px 10px; }
.ptiles.ptiles--cockpit { grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); }
.ctile .ptile__pick { cursor: default; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.size {
  min-width: 66px;
  min-height: 50px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.size small { display: block; font-size: 10.5px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.size:hover { border-color: var(--ink); }
.size[aria-pressed='true'] { background: var(--nero); border-color: var(--nero); color: #fff; }
.size[aria-pressed='true'] small { color: rgba(255, 255, 255, .72); }
.sizes--gross { gap: 10px; }
.sizes--gross .size { min-width: 104px; min-height: 64px; font-size: 16px; }
.size--lenker { white-space: nowrap; }
.sizes--klein { gap: 6px; margin: 8px 0 0; }
.sizes--klein .size { min-width: 0; min-height: 40px; padding: 6px 11px; font-size: 13.5px; }

/* --- Bühne: die Teile eines Bereichs -----------------------------------------------
   Je Teil eine Kachel. Gewählt: schwarzer Rahmen und eine schwarze Ecke oben
   rechts. Lucas Vorauswahl trägt „Empfohlen" in Gold. */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: start; gap: 14px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease);
}
.tile:hover { border-color: var(--line-2); }
.tile.is-on { border-color: var(--nero); }
/* Zweite Linie innen, über dem Foto — so wird der Rahmen 2 px stark, ohne
   dass sich die Kachel verschiebt. */
.tile.is-on::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--nero);
  pointer-events: none;
  z-index: 2;
}
.tile.is-on::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent var(--nero) transparent transparent;
  pointer-events: none;
  z-index: 2;
}
.ptile__pick { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; padding: 0 12px 10px; text-align: left; }
.ptile__art {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;                 /* wie die Teilefotos, siehe „Fotos" */
  margin: 0 -12px 10px;
  background: var(--paper-3);
  overflow: hidden;
}
.ptile__art svg { width: 58%; height: 58%; color: var(--ink-2); }
/* „Empfohlen" liegt oben links auf dem Foto — so stehen die Namen einer
   Reihe auf gleicher Höhe. */
.ptile__tipp {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 1;
  padding: 3px 7px;
  background: var(--gold);
  color: var(--nero);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Passt nicht zum Rahmen (Reifenfreiheit): sichtbar, aber nicht wählbar. */
.ptile__pick:disabled { cursor: not-allowed; }
.ptile__pick:disabled > * { opacity: .45; }
.ptile__pick:disabled .tile__note--why { opacity: 1; color: var(--rosso-ink); }
.ptile__wahl { display: grid; gap: 14px; padding: 14px 12px 14px; background: var(--paper-2); border-top: 1px solid var(--line); }

.tile__brand { display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tile__name { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.tile__note { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin-top: 4px; }
.tile__note--facts { color: var(--ink-3); }
/* „Lagernd" (grüner Punkt) oder „Auf Bestellung" (leerer Punkt), wie im
   Sortiment — das Wort steht immer daneben. */
.tile__lager { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.tile__lager::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--l-ok); }
.tile__lager--bestellung::before { background: none; border: 1.5px solid var(--ink-3); }
.tile__price {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  min-height: 32px;
  align-self: flex-end;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* Früher Zugang: Schild in Schwarz, Kaufen erst mit Konto. */
.early { display: block; font-size: 11px; color: var(--nero); margin-top: 4px; font-weight: 600; }

/* Die Leiste der gewählten Schaltgruppe unten auf der Bühne (Robert,
   6.10.2026: erst „Leiste unten", dann „zu klein, mach sie größer und
   farblicher, der Kunde erkennt es schwer"): eine Fläche in hellem Gold mit
   goldener Linie oben — Gold heißt im Konfigurator „hier ist noch etwas zu
   wählen", wie das Plus in der Liste. Oben der Name der Gruppe und was
   noch fehlt, rechts „Weiter", darunter Powermeter, Kurbel und Kassette in
   großen Knöpfen. Die Kacheln darüber bleiben gleich hoch. */
.stage__foot.stage__foot--gruppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'kopf weiter' 'wahl wahl';
  align-items: center;
  gap: 10px 24px;
  padding: 14px var(--gutter) 18px;
  background: var(--gold-hell);
  border-top: 3px solid var(--gold);
}
.stage__foot--gruppe .stage__next { grid-area: weiter; min-height: 36px; }
.gleiste__kopf { grid-area: kopf; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0; }
.gleiste__name { font-size: 15px; font-weight: 700; }
.gleiste__hint { font-size: 15px; }
.gleiste { grid-area: wahl; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.gleiste .pm { width: auto; min-height: 46px; gap: 12px; font-size: 15px; }
.gleiste .pm__text { flex-wrap: nowrap; gap: 10px; }
.gwahl { display: flex; align-items: center; gap: 12px; }
.gwahl__label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.sizes--leiste { gap: 8px; margin: 0; }
.sizes--leiste .size { min-width: 0; min-height: 46px; padding: 8px 14px; font-size: 15px; }

/* Powermeter: ein eckiger Schalter wie die eckigen Knöpfe des Shops,
   daneben der Aufpreis. An: schwarz, das Quadrat rechts. */
.pm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
.pm__track {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--paper);
  border: 1.5px solid var(--line-2);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pm__knob {
  position: absolute;
  top: 3.5px; left: 3.5px;
  width: 14px; height: 14px;
  background: var(--ink-3);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pm:hover .pm__track { border-color: var(--ink); }
.pm[aria-checked='true'] .pm__track { background: var(--nero); border-color: var(--nero); }
.pm[aria-checked='true'] .pm__knob { background: #fff; transform: translateX(20px); }
.pm__text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.pm__price { white-space: nowrap; }

/* --- Die Liste rechts -------------------------------------------------------------
   Nach Roberts Vorlage (6.10.2026, der erste Entwurf „Build Your Martino"):
   „Your Martino" groß und gesperrt, je Bereich eine Zeile ohne Linien —
   Kreis, Bild, Name und Wahl, rechts „Ändern" oder „Auswählen". Gewählt:
   Häkchen auf Schwarz; offen: Plus auf Gold. Schwarz statt des Blaus der
   Vorlage, wie überall im Shop. */
.rail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--paper);
  border-left: 1px solid var(--line);
}
.rail__head { padding: 24px 28px 12px; }
.rail__title { font-size: 20px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; margin: 0; line-height: 1.2; }
.rail__sub { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.rail__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 8px; scrollbar-width: thin; }

.slots { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 62px;
  padding: 5px 14px;
  text-align: left;
  transition: background var(--fast) var(--ease);
}
.slot:hover { background: var(--paper-2); }
.slot[aria-current='true'] { background: var(--paper-2); box-shadow: inset 2px 0 0 var(--nero); }
.slot__state {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--nero);
}
.slot__state svg { width: 10px; height: 10px; }
.slot[data-set='true'] .slot__state { background: var(--nero); color: #fff; }
.slot[data-set='true'] .slot__state svg { width: 11px; height: 9px; }
/* Das Häkchen einer fertigen Zeile ist ein eigener Knopf genau über ihrem
   Kreis: Ein Klick nimmt die Wahl heraus (Robert, 6.10.2026). Mit der Maus
   darüber wird aus dem Häkchen ein Kreuz. Die Fläche zum Treffen ist
   größer als der Kreis. */
.slotli { position: relative; }
.slotli:hover > .slot { background: var(--paper-2); }
.slot__weg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 14px;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--nero);
  color: #fff;
}
.slot__weg::before { content: ''; position: absolute; inset: -9px -8px; }
.slot__weg svg { width: 11px; height: 9px; }
.slot__weg svg + svg { display: none; width: 9px; height: 9px; }
.slot__weg + .slot .slot__state { visibility: hidden; }
.slot__weg:focus-visible svg:first-child { display: none; }
.slot__weg:focus-visible svg + svg { display: block; }
@media (hover: hover) {
  .slot__weg:hover svg:first-child { display: none; }
  .slot__weg:hover svg + svg { display: block; }
}
/* Breiter als die übrigen Leisten des Shops, damit Name, Wahl und
   „Auswählen" nebeneinander Platz haben. */
@media (min-width: 1281px) { .kfg-app { --rail: 396px; } }
/* Das Bild: Foto des Teils (ganz, auf Weiß) oder sein Symbol. */
.slot__thumb { position: relative; display: grid; place-items: center; width: 38px; height: 34px; overflow: hidden; }
.slot__thumb svg { width: 32px; height: 26px; color: var(--ink-3); }
.slot[data-set='true'] .slot__thumb svg { color: var(--ink-2); }
.slot__text { min-width: 0; }
.slot__name { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.slot__short { display: none; }
.slot__value {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slot[data-set='false'] .slot__value { color: var(--ink-3); }
/* Nach Roberts Vorlage (7.10.2026) ein umrandetes Feld statt eines
   unterstrichenen Textes. Es sitzt im Knopf der ganzen Zeile, ist also
   selbst keiner — die ganze Zeile bleibt das Ziel. */
.slot__act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.slot__act svg { width: 13px; }
.slot:hover .slot__act { border-color: var(--ink); background: var(--paper); }

/* --- Die Liste: der aufgeklappte Schritt „Rahmen & Cockpit" -------------------
   Zeigt die Bühne diesen Schritt, klappt seine Zeile auf und stellt Rahmen
   und Cockpit als eigene Karten darunter (Robert, 7.10.2026, nach seiner
   Vorlage). Jede Karte hat ihr eigenes Häkchen zum Abwählen, damit die
   Entscheidung vom 6.10.2026 auch im zusammengelegten Schritt gilt. */
.slotli--auf {
  margin: 0 0 6px;
  padding-bottom: 8px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.slotli--auf > .slot:hover, .slotli--auf:hover > .slot { background: none; }
.slotli--auf > .slot__weg { display: none; }
/* Die Zeilen neben dem aufgeklappten Schritt: flacher, damit die Liste so
   weit wie möglich auf einen Blick bleibt (Plan „Konfigurator auf einen
   Blick"). */
.slots--auf .slotli:not(.slotli--auf) .slot { min-height: 46px; }
.slots--auf .slotli:not(.slotli--auf) .slot__thumb { height: 30px; }
.slotli--auf > .slot__weg + .slot .slot__state { visibility: visible; }
.slotli--auf > .slot[aria-current='true'] { background: none; box-shadow: none; }
.setkarten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.setkarte {
  position: relative;
  display: flex;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color var(--fast) var(--ease);
}
.setkarte:hover { border-color: var(--line-2); }
.setkarte.is-on { border-color: var(--nero); }
.setkarte__pick {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px 10px;
  text-align: left;
}
.setkarte__kopf {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.setkarte__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  margin: 5px 0 6px;
  overflow: hidden;
}
.setkarte__art .foto { width: 100%; height: 100%; object-fit: contain; }
.setkarte__art svg { width: 44px; height: 32px; color: var(--ink-3); }
.setkarte__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.setkarte__zeile {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.setkarte__dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.setkarte__dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(20, 22, 26, .16);
}
.setkarte__act {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding: 6px 9px;
  border: 1px solid var(--line-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.setkarte__act svg { width: 13px; }
.setkarte__pick:hover .setkarte__act { border-color: var(--ink); background: var(--paper-2); }
/* Das Häkchen über dem Eck der Karte: ein Klick nimmt die Wahl heraus, mit
   der Maus darüber wird es zum Kreuz — wie in den Zeilen der Liste. */
.setkarte__weg {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--nero);
  color: #fff;
}
.setkarte__weg::before { content: ''; position: absolute; inset: -8px; }
.setkarte__weg svg { width: 10px; height: 8px; }
.setkarte__weg svg + svg { display: none; width: 8px; height: 8px; }
.setkarte__weg:focus-visible svg:first-child { display: none; }
.setkarte__weg:focus-visible svg + svg { display: block; }
@media (hover: hover) {
  .setkarte__weg:hover svg:first-child { display: none; }
  .setkarte__weg:hover svg + svg { display: block; }
}

/* Fortschritt wie in der Vorlage: die Zahl fett, ein runder Balken je
   Schritt, darunter „4 von 8 Komponenten ausgewählt" in Versalien. */
.rail__progress { margin: 0 28px; padding: 14px 0 8px; border-top: 1px solid var(--line); }
.progress__text {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}
.progress__text svg { flex: none; margin-top: 1px; color: var(--gold-2); }
.progress__text b { font-weight: 700; }
.pbar { display: flex; gap: 4px; }
.pbar i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); transition: background var(--fast) var(--ease); }
.pbar i[data-on='true'] { background: var(--gold-2); }
.progress__count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.progress__count svg { flex: none; color: var(--ink-3); }
.progress__serie {
  min-height: 32px;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.progress__serie[hidden] { display: none; }

/* --- Preis und Bestellen ----------------------------------------------------------- */
.rail__price { padding: 10px 28px 2px; }
/* Betrag und Zusatz brechen nie in sich um: Passt der Zusatz nicht mehr
   daneben, rutscht er als Ganzes darunter. */
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.price-row + .price-row { margin-top: 0; }
.price-gross { font-size: 40px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; white-space: nowrap; }
.price-net { font-size: 15px; font-weight: 400; color: var(--ink-3); letter-spacing: -.01em; white-space: nowrap; }
.price-tag { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
/* Komplettrad-Vorteil: der Preis ohne ihn leise durchgestrichen, daneben
   die Ersparnis im Rot der Marke — das Signal für „Sale", wie auf
   martino-cycling.at. Gold bleibt „hier fehlt noch etwas". Beides in einer
   Zeile, nie umgebrochen. */
.price-row--vorteil { gap: 0 12px; margin-bottom: 1px; font-size: 13.5px; line-height: 1.3; }
.price-row--vorteil[hidden], .buybar__vorteil[hidden] { display: none; }
.price-was { color: var(--ink-3); text-decoration-thickness: 1px; white-space: nowrap; }
.price-save { color: var(--rosso-ink); font-weight: 600; white-space: nowrap; }
/* Die Zeile braucht Platz; dann ist das Rad vollständig, und der Satz
   „Dein Martino ist vollständig." sagt es. Balken und Zählung, die nur
   dasselbe wiederholen, machen ihr Platz — so bleibt die ganze Liste auf
   dem Bildschirm, auch bei 1024 × 768. */
.kfg-app--vorteil .rail__progress .pbar,
.kfg-app--vorteil .rail__progress .progress__count { display: none; }
.kfg-app--vorteil .rail__progress .progress__text { margin-bottom: 0; }

.rail__cta { padding: 10px 28px 0; }
/* Der Knopf bleibt einzeilig, wo die Liste breit genug ist. */
.rail__cta .btn, .buybar__cta .btn { min-height: 50px; padding: 0 18px; gap: 12px; letter-spacing: .1em; text-align: left; }
.cta__alt {
  display: block;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
}
.cta__alt:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
/* Unter dem Preis wie in jedem Shop (Robert, 6.10.2026): „In den
   Warenkorb" schwarz, „Sofort kaufen" daneben mit schwarzem Rand. */
.cta__kauf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rail__cta .cta__kauf .btn, .buybar__cta .cta__kauf .btn {
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
  letter-spacing: .1em;
  text-align: center;
}
.btn.cta__sofort { background: var(--paper); color: var(--ink); border: 1.5px solid var(--nero); }
.btn.cta__sofort:hover { background: var(--nero); color: #fff; }
.btn.cta__sofort[disabled]:hover { background: var(--paper); color: var(--ink); }
.cta__hint { font-size: 12px; line-height: 1.45; color: var(--ink-2); margin: 8px 0 0; }
/* Was fürs Rahmenset fehlt: groß in Gold an der Stelle des Knopfs, jeder
   Schritt ein Knopf, der ihn öffnet (Robert, 6.10.2026: „Pflicht, aber
   deutlich"). */
.cta__fehlt {
  margin-top: 10px;
  padding: 10px 12px 12px;
  background: var(--gold-hell);
  border-left: 3px solid var(--gold);
}
.cta__fehlt-text { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.cta__fehlt-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.cta__fehlt-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.cta__fehlt-btn svg { width: 14px; }
.cta__fehlt-btn:hover { background: var(--nero); color: #fff; }
/* Der Schritt, den „fehlt noch" geöffnet hat, leuchtet kurz in Gold auf. */
.is-gesucht { animation: gesucht 1.8s var(--ease); }
@keyframes gesucht {
  0%, 55% { box-shadow: 0 0 0 4px var(--gold); }
  100%    { box-shadow: 0 0 0 4px rgba(239, 192, 60, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .is-gesucht { animation: none; box-shadow: 0 0 0 4px var(--gold); }
}

/* Leasing und Versicherung: zwei Kästchen wie in der Vorlage, nur beim Rad. */
.rail__addons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 28px 0; }
.rail__addons[hidden] { display: none; }
.addon { padding: 9px 12px; border: 1px solid var(--line-2); }
.addon strong { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.addon span { font-size: 11.5px; color: var(--ink-2); }

.rail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 28px 10px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rail__foot button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.rail__foot button:hover { color: var(--ink); }
.rail .rail__garantie { margin: 10px 28px 0; font-size: 11.5px; }

/* Am Handy: Preis und Bestellen unter der Liste; darunter, außerhalb des
   Bildschirms, Gewährleistung, Neu beginnen und Teilen. */
.buybar, .kfg-unten { display: none; }

/* Auf Laptops wird die Liste dichter, damit alle Bereiche und der Preis zu
   sehen sind; auf ganz niedrigen Bildschirmen (Tablet quer) ohne Bilder. */
@media (min-width: 901px) and (max-height: 980px) {
  .rail__head { padding: 10px 28px 4px; }
  .rail__title { font-size: 17px; }
  .rail__sub { display: none; }
  .slot { min-height: 47px; gap: 12px; padding-top: 1px; padding-bottom: 1px; grid-template-columns: 22px 48px minmax(0, 1fr) auto; }
  .slot__state, .slot__weg { width: 22px; height: 22px; }
  .slot__weg { margin-top: -11px; }
  .slot__thumb { width: 48px; height: 38px; }
  .slot__thumb svg { width: 38px; height: 28px; }
  .slot__name { font-size: 10.5px; }
  .slot__value { font-size: 12px; line-height: 1.3; }
  .rail__progress { padding-top: 8px; padding-bottom: 2px; }
  .progress__text { margin-bottom: 7px; }
  .progress__count { margin-top: 6px; }
  .progress__serie { min-height: 28px; }
  .rail__price { padding-top: 6px; }
  .rail__price .price-row--netto { display: none; }
  .price-gross { font-size: 28px; }
  .rail__cta { padding-top: 6px; }
  .rail__cta .btn { min-height: 46px; font-size: 10.5px; }
  .cta__alt { min-height: 32px; }
  .cta__hint { margin-top: 5px; }
  .cta__fehlt { margin-top: 6px; padding: 5px 10px 7px; }
  .cta__fehlt-text { margin-bottom: 4px; font-size: 13px; }
  .cta__fehlt-btn { min-height: 30px; padding: 0 10px; font-size: 13px; }
  .rail__cta .cta__kauf .btn { min-height: 44px; }
  .rail__addons { gap: 8px; padding-top: 6px; }
  .addon { padding: 5px 10px; }
  .rail .rail__garantie { margin-top: 6px; }
  .rail__foot { margin-top: 4px; padding-top: 4px; padding-bottom: 6px; }
  .stage__head { padding-top: 16px; padding-bottom: 10px; }
  .stage__foot { padding-top: 6px; padding-bottom: 8px; }
  .stage__foot.stage__foot--gruppe { padding-top: 10px; padding-bottom: 12px; }
  /* Die Fußzeile beim Rahmen ist der größte Posten der Bühne: Je weniger
     sie nimmt, desto größer steht das Foto da. */
  .stage__lead { margin-top: 5px; font-size: 13px; }
  .stage__foot.stage__foot--set { padding-top: 9px; padding-bottom: 10px; }
  .sfuss { gap: 7px; }
  .sfuss__name { font-size: 21px; }
  .sfuss__eur { font-size: 23px; }
  .sfuss__fakten { gap: 7px 26px; padding-top: 7px; }
  .sfuss__mehr { font-size: 12px; }
  .sfoto__wahl { gap: 7px; }
  .sizes--rahmen .size { min-height: 44px; }
  .sfoto__color { margin-top: 0; }
  /* Die Karten des aufgeklappten Schritts werden flach: Bild und
     Farbpunkte stehen groß auf der Bühne daneben, und vom Knopf bleibt der
     Pfeil. Sonst schöben die Karten die letzten Zeilen aus dem Bild — und
     die ganze Liste auf einen Blick ist die ältere Zusage. */
  .setkarte__art, .setkarte__dots, .setkarte__act > span { display: none; }
  .setkarte__pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 8px;
    padding: 7px 9px 8px;
  }
  .setkarte__kopf, .setkarte__name, .setkarte__zeile { grid-column: 1; }
  .setkarte__kopf { font-size: 9px; }
  .setkarte__name { font-size: 13px; }
  .setkarte__zeile { font-size: 11.5px; }
  /* Der Pfeil unten rechts, das Häkchen oben rechts — in der flachen Karte
     säßen sie sonst aufeinander. */
  .setkarte__act {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    margin-top: 0;
    padding: 5px;
    color: var(--ink-2);
  }
  .setkarte__weg { top: 4px; right: 4px; width: 18px; height: 18px; }
  .setkarte__weg svg { width: 9px; height: 7px; }
  .slotli--auf { margin-bottom: 5px; padding-bottom: 7px; }
  .slots--auf .slotli:not(.slotli--auf) .slot { min-height: 38px; }
  /* Mit dem Flaschenhalter hat die Liste neun Zeilen (8.10.2026): Damit sie
     bei 900 px Höhe samt Vorteilszeile ganz zu sehen bleibt — die ältere
     Zusage „alles auf einem Bildschirm“ —, rücken die Zeilen etwas enger,
     die Zusatzkarten werden einzeilig, und Kopf, Fortschritt und Fuß geben
     je ein paar Pixel. Über 980 px Höhe ändert sich nichts. */
  .slot__value { line-height: 1.2; }
  .rail__head { padding-top: 8px; padding-bottom: 2px; }
  .rail__progress { padding-top: 6px; }
  .progress__text { margin-bottom: 5px; }
  .addon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 10px; }
  .rail .rail__garantie { margin-top: 4px; }
  .rail__foot { padding-top: 3px; padding-bottom: 4px; }
  .rail__foot button { min-height: 32px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  .rail__head, .rail__addons { display: none; }
  .rail__body { padding-top: 2px; padding-bottom: 4px; }
  .slot { grid-template-columns: 22px minmax(0, 1fr) auto; min-height: 36px; }
  .slot__weg::before { inset: -6px -8px; }       /* bleibt in der niedrigen Zeile */
  .cta__fehlt-btn svg { display: none; }
  .slot__thumb { display: none; }
  .progress__count { display: none; }
  .price-gross { font-size: 26px; }
  .rail__cta .btn { min-height: 46px; }
  .rail .rail__garantie { margin-top: 6px; font-size: 11px; }
  .rail__foot { margin-top: 4px; }
  .ptiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .ftiles { gap: 14px; }
  .ftile__body { padding: 10px 14px 12px; }
  .ftile__name { font-size: 25px; margin-bottom: 4px; }
  .ftile__colors { margin: 8px 0 10px; }
  .ftile__prices { padding-top: 8px; }
  /* Schmalere Ränder, damit Fortschritt und Gewährleistung in einer Zeile
     stehen und die ganze Liste zu sehen bleibt. */
  .rail__progress, .rail .rail__garantie { margin-left: 20px; margin-right: 20px; }
  .rail__price, .rail__cta, .rail__foot { padding-left: 20px; padding-right: 20px; }
  .progress__text { font-size: 12px; }
  .stage__lead, .sfuss__set, .swahl__hint { display: none; }
  .slots--auf .slotli:not(.slotli--auf) .slot { min-height: 31px; }
  /* Neun Zeilen auch bei 768 px Höhe (Flaschenhalter, 8.10.2026). */
  .rail__body { padding-bottom: 2px; }
  .rail__progress { padding-top: 4px; }
  .progress__text { margin-bottom: 4px; }
  .rail__price { padding-top: 4px; }
  .rail__cta { padding-top: 4px; }
  .cta__alt { min-height: 30px; }
  .rail .rail__garantie { margin-top: 3px; }
  .rail__foot button { min-height: 30px; }
  .price-gross { font-size: 24px; }
  .setkarte__zeile { font-size: 11.5px; }
  .sfuss__name { font-size: 19px; }
  .sfuss__eur { font-size: 21px; }
  .sfakt__wert { font-size: 12px; }
  .sizes--rahmen .size { min-height: 40px; min-width: 66px; }
  .rail__foot { padding-top: 2px; padding-bottom: 4px; }
  .rail__cta .cta__kauf .btn { min-height: 42px; padding: 0 6px; font-size: 10px; letter-spacing: .06em; }
  .cta__fehlt-text { font-size: 12.5px; }
}

/* --- Blatt von rechts: die Geometrie-Tabelle -----------------------------------
   Der Schleier dahinter (.sheet-scrim) dient auch dem Warenkorb-Fach der
   Seiten des Sortiments. */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 22, 26, .38);
  opacity: 0; visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 240ms;
}
.sheet-scrim[data-open='true'] { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  top: 0; right: 0;
  z-index: 90;
  width: min(760px, 100vw);
  height: 100vh;
  height: 100dvh;
  background: var(--paper);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 300ms var(--ease), visibility 300ms;
}
.sheet[data-open='true'] { transform: none; visibility: visible; }

.sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
}
.sheet__title { font-family: var(--display); font-size: 27px; font-weight: 400; margin: 6px 0 0; }
.sheet__body { flex: 1; overflow-y: auto; padding: 18px 28px 28px; }

/* Je Größe eine Spalte; die gewählte ist hinterlegt. Auf schmalen
   Bildschirmen scrollt die Tabelle zur Seite, die erste Spalte bleibt. */
.geo__wrap { overflow-x: auto; }
.geo { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.geo th, .geo td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.geo th { font-weight: 400; }
.geo thead th { font-weight: 600; border-bottom-color: var(--ink-3); }
.geo th:first-child {
  position: sticky;
  left: 0;
  background: var(--paper);
  text-align: left;
  white-space: normal;
  min-width: 150px;
  color: var(--ink-2);
}
.geo thead th:first-child { color: var(--ink); }
.geo .is-on { background: var(--paper-2); font-weight: 600; }

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --rail: 320px; --gutter: 26px; }
  .sfoto { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
}

@media (max-width: 900px) {
  /* the section note would collide with a wrapping headline */
  .section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section__note { font-size: 9px; letter-spacing: .16em; }
  .hero__title { font-size: clamp(40px, 10vw, 58px); }

  /* Untereinander: Bühne, Liste, Balken — und am Handy scrollt die Seite,
     nicht die Bühne. Darum hier keine feste Höhe: Sonst bekäme die Bühne
     nur, was Kopf und Fußzeile übrig lassen, und schnitte das Foto ab. */
  .kfg-app { display: flex; flex-direction: column; min-height: 520px; }
  .stage { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .stage__body { flex: none; min-height: 0; overflow: visible; }
  /* Knapper als am großen Bildschirm, und zwar an jedem Abstand ein paar
     Pixel: Solange die Größe noch offen ist, trägt der goldene Hinweis zwei
     Knöpfe und wird eine Zeile höher — dann schnitt die Felderliste den
     Namen der Lackierung ab (Robert, 7.10.2026: „der farb name liegt nicht
     in der ansicht die kategorien unterhalb überdecken es"). Die Pixel
     kommen aus den Abständen, nicht vom Foto. */
  .stage__head { padding: 10px var(--gutter) 6px; align-items: center; }
  .stage__head .eyebrow { display: none; }
  .stage__title { font-size: 23px; margin: 0; }
  .stage__close { width: 40px; height: 40px; }
  .stage__body { padding-bottom: 12px; }
  .stage__foot { gap: 6px 16px; padding: 2px var(--gutter) 2px; }
  .stage__next { min-height: 38px; font-size: 10.5px; }
  /* Am Handy untereinander: was fehlt, die Wahlen, „Weiter". Der Name
     steht auf der Kachel darüber. */
  /* Die goldene Leiste bleibt am unteren Rand der Bühne stehen, während man
     die Gruppen durchsieht (Robert, 7.10.2026: „ich finde man findet kurbel
     und kassete schwer"). Gemessen lag sie 1.240 px unter der Kante —
     hinter der ganzen Kachelliste. Sie hat ihren eigenen Hintergrund, die
     Kacheln scrollen also sauber darunter durch. */
  .stage__foot.stage__foot--gruppe {
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* Nur die Wahlen: Die Kopfzeile der Leiste ist weg (Robert, 7.10.2026:
       „die obere zeile kann weg"), mit ihr „Weiter" — weiter geht es am
       Handy über die Felder unter der Bühne. Das hält die klebende Leiste
       bei drei Reihen. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'wahl';
    gap: 6px 12px;
    padding: 8px var(--gutter) 6px;
  }
  .stage__foot--gruppe .stage__next { display: none; }
  /* Am Handy ohne Überschrift „Kurbel und Kassette wählen": Sie kostete zwei
     Zeilen der klebenden Leiste (Robert, 7.10.2026: „mach die klebende
     leiste kleiner"). Oben im Kopf steht bei der Schaltung nichts („für die
     schaltgruppe fehlt noch der satz kann weg") — was zu tun ist, sagen die
     Beschriftungen KURBEL und KASSETTE an ihren Reihen. */
  .gleiste__name, .gleiste__kopf--fertig, .gleiste__hint { display: none; }
  .gleiste { gap: 6px 12px; }
  .gleiste .pm { min-height: 36px; font-size: 13px; }
  /* Name links in fester Breite, die Knöpfe daneben in einer Reihe. */
  .gwahl { gap: 6px; width: 100%; }
  .gwahl__label { flex: none; width: 64px; letter-spacing: .06em; font-size: 11px; }
  /* Die Leiste der Stückzahl hat nur eine Reihe: „Stückzahl“ bekommt seine
     natürliche Breite statt der Spalte von KURBEL und KASSETTE, die das
     Wort abschnitt (Prüfbericht Flaschenhalter, M-3). */
  [data-mwahl] .gwahl__label { width: auto; padding-right: 2px; }
  .sizes--leiste { flex: 1 1 auto; min-width: 0; gap: 5px; }
  .sizes--leiste .size { min-height: 38px; padding: 4px 8px; font-size: 13.5px; }
  .rail .rail__garantie { display: none; }
  .ftiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ftile__body { padding: 8px 10px 10px; }
  .ftile__name { font-size: 22px; margin: 0 0 2px; }
  .ftile__note { display: none; }
  .ftile__colors { gap: 4px; margin: 6px 0 8px; }
  .ftile__colors i { width: 11px; height: 11px; }
  .ftile__prices { gap: 1px; padding-top: 6px; font-size: 11.5px; }
  .ftile__prices span { gap: 6px; }
  .ftile__prices b { font-size: 13px; }
  /* Der Kopf am Handy: Titel und Satz über die ganze Breite, darunter
     Veloce/Avventura; das Kreuz bleibt oben rechts (order). */
  .stage__head { flex-wrap: wrap; gap: 8px 16px; }
  .stage__wort { order: 1; flex: 1 1 auto; max-width: none; }
  .stage__close { order: 2; }
  .stage__head .fwahlen { order: 3; flex: 1 1 100%; }
  /* Veloce und Avventura allein nebeneinander: „RENNRAD" und „GRAVEL"
     fallen am Handy weg (Robert, 7.10.2026). Die Gattung steht im Menü und
     auf der Startseite; hier kostete sie dem Foto 28 px. Der Knopf bleibt
     mit 44 px hoch genug für den Finger. */
  .stage__head .fwahl__kind { display: none; }
  .stage__head .fwahl { min-height: 44px; padding: 8px 14px; display: flex; align-items: center; }
  .stage__lead { font-size: 13.5px; }
  /* Was dem Rahmenset fehlt, steht am Handy hier oben — unter
     Veloce/Avventura, über dem Foto — und nicht mehr im Balken unten
     (Robert, 7.10.2026). Dort kostete die Zeile die Höhe, die Lackierung
     und Größe brauchen; oben füllt sie Platz, der ohnehin frei ist. */
  .stage__head .stage__fehlt { order: 4; flex: 1 1 100%; display: block; }
  .stage__head .stage__fehlt[hidden] { display: none; }
  .stage__fehlt .cta__fehlt {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 8px; margin: 0; padding: 4px 10px;
  }
  .stage__fehlt .cta__fehlt-text { margin: 0; font-size: 12.5px; }
  .stage__fehlt .cta__fehlt-wahl { gap: 6px; }
  .stage__fehlt .cta__fehlt-btn { min-height: 28px; font-size: 12.5px; }

  /* Die Bühne am Handy: Foto 3:2, die Pfeile bleiben (gewischt wird nicht),
     Lackierung und Größe darunter wie am großen Bildschirm. Die Zeile des
     Rasters muss hier mitwachsen — ohne feste Höhe fiele sie auf null
     zusammen und das Foto verschwände. */
  .sfoto { height: auto; gap: 10px; }
  .sfoto__wahl { gap: 7px; }
  .sfoto__color { margin-top: 0; }
  .sfoto__buehne {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    grid-template-rows: auto;
    flex: none;
  }
  /* Das Foto behält seine Größe (Robert, 7.10.2026: „so gross wie das foto
     davor war ich gehe den kompromiss ein"). Damit stehen Rahmen und
     Lackierung auf einer Ansicht, die Größenreihe kommt beim Wischen —
     bewusst so entschieden, nachdem der Balken unten schon schlanker
     geworden ist und der goldene Hinweis nach oben gewandert ist. */
  .sfoto__art { aspect-ratio: 3 / 2; height: auto; align-self: auto; }
  .sfoto__pfeil { width: 38px; height: 38px; }
  .sizes--rahmen .size { min-width: 62px; min-height: 44px; padding: 4px 8px; }

  /* Die Fußzeile: alles untereinander, die Merkmale zu zweit nebeneinander. */
  .stage__foot--set { padding-bottom: 12px; }
  .sfuss__name { font-size: 22px; }
  .sfuss__eur { font-size: 22px; }
  .sfuss__fakten { gap: 10px 20px; }
  .sfakt { flex: 1 1 calc(50% - 20px); }
  .sfuss__mehr .sfoto__link { margin-left: 0; }

  /* Die Liste als zwei Reihen kleiner Felder: Plus oder Häkchen und der Name. */
  .rail { flex: none; height: auto; border-left: 0; border-top: 1px solid var(--line); background: var(--paper); }
  .rail__head, .rail__progress, .rail__price, .rail__cta, .rail__addons, .rail__garantie, .rail > .rail__foot { display: none; }
  .rail__body { overflow: visible; padding: 8px var(--gutter); }
  .slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .slot__thumb, .slot__act, .setkarten { display: none; }
  .slotli--auf { margin: 0; padding: 0; background: none; border: 0; }
  .slot {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 4px;
    min-height: 0;
    padding: 6px 2px 5px;
    border: 1px solid var(--line);
    text-align: center;
  }
  .slot[aria-current='true'] { border-color: var(--nero); box-shadow: inset 0 -2px 0 var(--nero); }
  /* Name und Wahl bleiben für Screenreader da; zu sehen ist der kurze Name. */
  .slot { position: relative; }
  .slot__name, .slot__value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .slot__text { display: block; width: 100%; }
  .slot__short { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--ink-2);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .slot__state { width: 20px; height: 20px; }
  /* Das Häkchen oben im Feld (Rand 1 px + Abstand 6 px); die Fläche zum
     Treffen reicht nicht bis zum Namen. */
  .slot__weg { top: 7px; left: 50%; width: 20px; height: 20px; margin: 0 0 0 -10px; }
  .slot__weg::before { inset: -7px -12px -3px; }
  /* Am Handy stehen die Karten nicht in der Liste; dort behält die Zeile
     ihr Häkchen, sonst ließe sich der Rahmen gar nicht mehr abwählen —
     die Bühne beginnt bei ihm, der Schritt ist also immer „aufgeklappt"
     (Roberts Entscheidung vom 6.10.2026: Abwählen per Häkchen). */
  .slotli--auf > .slot__weg { display: grid; }
  .slotli--auf > .slot__weg + .slot .slot__state { visibility: hidden; }

  .buybar {
    display: block;
    flex: none;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 1px solid var(--line-2);
  }
  .buybar__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
  .buybar__price { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
  .buybar__vorteil { display: flex; gap: 0 8px; font-size: 11.5px; line-height: 1.3; }
  .buybar__tag { display: block; font-size: 11px; color: var(--ink-2); }
  .buybar__progress { flex: 1; max-width: 220px; text-align: right; }
  .buybar__progress .progress__text { font-size: 11.5px; margin: 2px 0 0; }
  /* Was gewählt ist, zeigen die Felder der Liste darüber — kein zweiter Balken. */
  .buybar__progress .pbar { display: none; }
  .buybar__progress .progress__serie { min-height: 28px; margin-top: 0; font-size: 11.5px; }
  .buybar__cta .btn { min-height: 46px; font-size: 11px; }
  .buybar .cta__alt { min-height: 34px; margin-top: 2px; }
  /* Der goldene Hinweis steht am Handy oben im Kopf der Bühne (Robert,
     7.10.2026). Hier unten nähme er der Bühne die Höhe, die Lackierung und
     Größe brauchen — die Regeln für seine Gestaltung im Balken sind damit
     hinfällig. */
  .buybar .cta__fehlt { display: none; }
  .buybar .cta__hint { margin-top: 4px; font-size: 11.5px; }

  .kfg-unten { display: block; padding: 16px var(--gutter) 4px; }
  .kfg-unten .rail__foot { margin-top: 10px; padding: 6px 0 4px; }
  .kfg .toast { bottom: 160px; }
}

@media (max-width: 640px) {
  .sheet__head { padding: 20px 18px 14px; }
  .sheet__body { padding: 14px 18px 24px; }
  .ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Das Cockpit steht am Handy allein in seiner Reihe: quadratisch wäre
     das Foto so hoch wie der Bildschirm breit, die Größen kämen erst nach
     Blättern. Darum flacher (Robert, 6.10.2026: 16 : 9); das Foto steht
     ganz darin, wie überall (object-fit: contain). */
  .ptiles--cockpit .ptile__art { aspect-ratio: 16 / 9; }
  .sizes--gross .size { min-width: 84px; min-height: 58px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Shop — grid, filters, cart. Same light system as the configurator.
   ========================================================================== */

/* --- shop hero --------------------------------------------------------- */
.shop-hero {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 52px var(--gutter) 34px;
}
.shop-hero__art {
  background: radial-gradient(74% 68% at 52% 48%, #FFF 0%, #F6F4F0 54%, #EDEAE4 100%);
  aspect-ratio: 3 / 2;                 /* wie das Foto des Komplettrads */
  display: grid;
  place-items: center;
}
.shop-hero__art img { width: 100%; height: 100%; object-fit: contain; }

/* --- filters -----------------------------------------------------------
   Zwei Zeilen: oben die Bereiche (Alle, Fahrräder, Rahmen, Komponenten,
   Zubehör), darunter die Kategorien des gewählten Bereichs. */
.filters { margin-bottom: 24px; }
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; }
.filters__row--sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.filters__row--sub .filter { border-color: var(--line); letter-spacing: .12em; }
.filter {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.filter:hover { color: var(--ink); border-color: var(--ink); }
.filter[aria-pressed='true'] { background: var(--nero); border-color: var(--nero); color: #fff; }

/* --- product grid ------------------------------------------------------ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.product { position: relative; display: flex; flex-direction: column; text-align: left; }

.product__art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 14px;
}
.product__art img { width: 100%; height: 100%; object-fit: contain; }
.product__art svg { width: 78%; height: 78%; color: var(--ink-2); }
/* Die Karte eines Rads (Kategorie mit `raeder`) — auf der Seite Bikes und bei
   „Ausgewählte Bikes" auf der Startseite: Foto 3:2 wie für das Komplettrad
   (Roberts Nr. 82). Die Skizze eines Rads ohne Foto: css/liste.css. */
.product--rad .product__art { aspect-ratio: 3 / 2; }

.product__flag {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--rosso);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  font-weight: 600;
}

.product__brand {
  display: block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.product__name { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; margin: 4px 0 4px; }
.product__spec { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
/* Die Farbpunkte einer Rad-Karte (Roberts Nr. 82 (2)): die Farbe nur über
   `--c`, gesetzt mit M.farbe (Roberts Nr. 74). */
.product__farben { display: flex; gap: 6px; margin: 8px 0 10px; }
.product__farben i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(20, 22, 26, .16);
}

.product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.product__price { font-size: 15px; font-weight: 600; }
.product__add {
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.product__add:hover { background: var(--nero); border-color: var(--nero); color: #fff; }
/* Früher Zugang: Schild in Gold, Kaufen erst mit Konto. */
.product__flag--early { background: var(--gold); color: var(--nero); }
.product__early { display: block; font-size: 11.5px; color: var(--ink-2); margin: 4px 0 0; }
.product--locked .product__price { color: var(--ink-2); }
.product__add--lock { display: inline-grid; place-items: center; }

.pgrid__note {
  grid-column: 1 / -1;
  padding-top: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.pgrid__empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--ink-2); }

/* Ein Rahmen im Sortiment: die ganze Kachel führt in den Konfigurator.
   Das Bild hat das Format der Rahmenfotos (3:2), dann bleibt kein Rand. */
.product--frame .product__art { aspect-ratio: 3 / 2; }
.product--frame:hover .product__add { background: var(--nero); border-color: var(--nero); color: #fff; }

/* --- build tile inside the grid ---------------------------------------- */
.product--build {
  background: linear-gradient(160deg, rgba(11,11,12,.05), transparent 64%), var(--paper-2);
  border: 1px solid var(--line);
  padding: 24px;
  justify-content: center;
}
.product--build h3 { font-family: var(--display); font-size: 26px; font-weight: 400; margin: 0 0 10px; }
.product--build p { font-size: 13px; color: var(--ink-2); margin: 0 0 20px; }

/* --- workshop pointer --------------------------------------------------- */
.pointer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 30px 32px;
}
.pointer h3 { font-family: var(--display); font-size: 27px; font-weight: 400; margin: 6px 0 8px; }
.pointer p { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: 58ch; }

/* --- footer ------------------------------------------------------------ */
.foot {
  border-top: 1px solid var(--line);
  padding: 46px var(--gutter) 26px;
  margin-top: 60px;
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: 34px;
}
.foot__grid p { font-size: 13px; color: var(--ink-2); margin: 10px 0 0; max-width: 40ch; }
.foot__col h4 {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--ink-3);
}
.foot__col a { display: block; font-size: 13px; color: var(--ink-2); padding: 3px 0; }
.foot__col a:hover { color: var(--ink); }

.foot__legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-3);
}

/* --- cart drawer -------------------------------------------------------- */
.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 95;
  width: min(420px, 100vw);
  height: 100dvh;
  background: var(--paper);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 300ms var(--ease), visibility 300ms;
}
.drawer[data-open='true'] { transform: none; visibility: visible; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h3 { font-family: var(--display); font-size: 24px; font-weight: 400; margin: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 26px; }
.drawer__foot { border-top: 1px solid var(--line); padding: 20px 26px; }

.line {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.line:last-child { border-bottom: 0; margin-bottom: 0; }
.line__thumb {
  width: 56px; height: 56px;
  background: var(--paper-3);
  display: grid; place-items: center;
  overflow: hidden;
}
.line__thumb img, .line__thumb svg { width: 100%; height: 100%; object-fit: contain; color: var(--ink-2); }
.line__name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.line__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.line__drop { font-size: 11px; color: var(--ink-3); margin-top: 6px; text-decoration: underline; }
.line__drop:hover { color: var(--rosso-ink); }
.line__price { font-size: 14px; font-weight: 600; white-space: nowrap; }

.cart-sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cart-sum b { font-size: 22px; font-weight: 600; }
.cart-empty { text-align: center; color: var(--ink-2); padding: 60px 0; font-size: 14px; }
.cart-empty a { color: var(--rosso-ink); border-bottom: 1px solid currentColor; }

/* --- toast --------------------------------------------------------------
   Nur eine Meldung: Klicks gehen durch sie hindurch — am Handy liegt sie
   über den Feldern des Konfigurators. */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: 120;
  pointer-events: none;
  transform: translate(-50%, 14px);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
.toast[data-open='true'] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (max-width: 1180px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 900px) {
  .shop-hero { grid-template-columns: 1fr; gap: 26px; }
  .shop-hero__art { order: -1; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pointer { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
}

/* --- Fotos ----------------------------------------------------------------
   Jedes Foto erscheint so, wie es in Image/ liegt: nicht freigestellt, nicht
   beschnitten, ohne Schatten und ohne Zoom (object-fit: contain überall).
   Den Rand, den eine Kachel mit anderem Seitenverhältnis lässt, färbt
   js/cart-core.js in der Farbe des Fotorands.

   Das Foto liegt absolut in seiner Kachel. In einer Grid-Kachel mit
   aspect-ratio rechnet `height: 100%` sonst gegen die Bildhöhe statt gegen
   die Kachel — ein quadratisches Foto würde so hoch wie breit und unten
   abgeschnitten.

   Kacheln, in denen Teilefotos erscheinen (Sortiment, Optionen im
   Konfigurator, Warenkorb), sind quadratisch wie diese Fotos: Deren Vignette hätte an einem Rand eine sichtbare Kante. Rahmen
   (3:2 auf Weiß) bekommen darin weiße Ränder, die nicht auffallen. */
.shop-hero__art, .product__art, .line__thumb,
.ptile__art, .sfoto__art { position: relative; }
img.foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ==========================================================================
   Drawer extras, the cart count and the withdrawal button
   These sit on every page, so they live here rather than in cart.css.
   ========================================================================== */
.cart-note { font-size: 11.5px; color: var(--ink-3); margin: 0 0 14px; }
.cart-skip {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-skip:hover { color: var(--ink); }

.tool__count {
  position: absolute;
  top: -4px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--rosso);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* With a number on it the bare dot would sit underneath. */
.tool--cart:has(.tool__count:not([hidden])) .tool__dot { display: none; }

/* --- Rücktrittsfunktion, § 13a FAGG -------------------------------------
   The law wants this one highlighted and easy to find on every page, never
   behind a login — so it gets its own band in the footer with a framed
   button, set apart from the ordinary footer links. */
.foot__withdraw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 22px 26px;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
}
.foot__withdraw strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.foot__withdraw p {
  font-size: 12px;
  color: var(--ink-2);
  margin: 4px 0 0;
  max-width: 62ch;
}

.btn--withdraw {
  flex: none;
  background: var(--paper);
  color: var(--nero);
  border: 1.5px solid var(--nero);
  font-size: 12px;
}
.btn--withdraw:hover { background: var(--nero); color: #fff; }

@media (max-width: 560px) {
  .foot__withdraw { padding: 18px; }
  .btn--withdraw { width: 100%; justify-content: center; }
}


/* --- Harmonisierte Mitteilung zur Gewährleistung (Anhang II FAGG) --------
   Pflicht seit 27.9.2026 (§ 4 Abs 1 Z 12 FAGG). Geöffnet von js/garantie.js
   über jeden Link mit data-garantie; ohne Skript führt er auf
   gewaehrleistung.html.
   Die Grafik darf nicht verändert werden und muss in normaler Anzeigegröße
   lesbar sein. Auf dem Handy wäre sie in Bildschirmbreite zu klein —
   darum hat sie eine Mindestbreite und der Rahmen scrollt. */
.garantie { overflow: auto; border: 1px solid var(--line); background: #fff; }
.garantie img { display: block; width: 100%; min-width: 640px; height: auto; }
.garantie__link { font-size: 13px; margin: 12px 0 0; color: var(--ink-2); }
.garantie__link a { color: var(--nero); text-decoration: underline; text-underline-offset: 3px; }

/* Der Hinweis, der sie öffnet — in der Kasse, im Warenkorb, im Sortiment. */
.garantie-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.garantie-hint:hover { color: var(--ink); text-decoration-color: var(--ink-3); }
.garantie-hint svg { flex: none; color: #003399; }

.gdialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
}
.gdialog::backdrop { background: rgba(20, 22, 26, .55); }
.gdialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
}
.gdialog__head strong { font-size: 13px; font-weight: 600; }
.gdialog__close { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.gdialog__body { padding: 16px 18px 20px; }

/* Nachfrage im Konfigurator: nur die Teile kaufen? (Robert, 6.10.2026) */
.kdialog {
  width: min(480px, calc(100vw - 32px));
  padding: 26px 26px 24px;
  border: 0;
  border-top: 3px solid var(--gold);
  background: var(--paper);
  color: var(--ink);
}
.kdialog::backdrop { background: rgba(20, 22, 26, .55); }
.kdialog__titel { margin: 0 0 8px; font-family: var(--display); font-size: 24px; line-height: 1.2; }
.kdialog__text { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.kdialog__knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.kdialog__knoepfe .btn { justify-content: center; min-height: 48px; padding: 0 14px; letter-spacing: .1em; text-align: center; }

/* Nur für Screenreader — etwa der Text der Mitteilung, die als Bild kommt. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Rechtliche Links im Seitenfuß — früher nur Text. */
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot__links a:hover { color: var(--ink); }
.section__garantie { margin: -8px 0 22px; }
.rail__garantie { margin: 12px 24px 0; }