/* Zweirad Halbeck, Musterseite, Fassung 2 (18.09.2026). Marke „Laeuft rund".
   Reines CSS, keine fremde Anfrage, Schriften lokal.

   FARBEN, alle Paarungen gerechnet (18.09.2026):
     Tanne  #12382b auf Creme #f4efe2   11,25:1
     Weiss           auf Tanne           12,91:1
     Orange #ff6a13  auf Tanne            4,50:1  nur Grafik und grosse Schrift
     Orange-hell #ff8a3d auf Tanne        5,51:1  Schrift auf Tanne
     Nacht  #0c231b auf Orange            5,76:1  Schrift auf Orange-Flaeche
     Orange auf Creme                     2,50:1  NIE Schrift, nur Flaeche/Linie
     Rost   #a83f08 auf Creme             5,41:1  Schrift/Links auf hell
     Rost auf Sand #e8e0cc                4,72:1
     Rost auf Weiss                       6,21:1
     Gedimmt #4c5f56 auf Creme            5,94:1
     Hellgruen #c9d6cd auf Tanne          8,60:1
     Orange-hell auf Nacht                7,04:1
   Hausregel: Orange ist auf hellem Grund eine Flaeche, keine Schrift.

   RADIUS-SYSTEM: Flaechen 14 px, klein 6 px, Knoepfe rund (999 px, wie ein
   Lenkerstopfen). Alles, was sich dreht, ist rund; alles andere kantig-weich. */

@font-face {
  font-family: "Archivo";
  src: url("schriften/archivo-variable.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("schriften/karla-variable.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}

:root {
  --tanne: #12382b;
  --nacht: #0c231b;
  --creme: #f4efe2;
  --sand: #e8e0cc;
  --karte: #fffdf7;
  --orange: #ff6a13;
  --orange-hell: #ff8a3d;
  --rost: #a83f08;
  --text: #1b2a24;
  --gedimmt: #4c5f56;
  --hellgruen: #c9d6cd;
  --linie: #d5cbb3;
  --linie-dunkel: rgba(244, 239, 226, .2);

  --r-flaeche: 14px;
  --r-klein: 6px;
  --r-knopf: 999px;

  --rand: clamp(1.1rem, 4vw, 2.5rem);
  --laufweite: 76rem;
  --feder: cubic-bezier(.34, 1.56, .64, 1);
  --nw-leiste-h: 55px;

  --display: "Archivo", "Arial Narrow", sans-serif;
  --brot: "Karla", "Segoe UI", sans-serif;
}

@view-transition { navigation: auto; }
/* R36: Der Browser unterdrueckt den Seitenwechsel nicht von selbst, wenn Bewegung abbestellt ist. */
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--creme); color: var(--text);
  font-family: var(--brot); font-size: 1.0625rem; line-height: 1.6;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[id] { scroll-margin-top: calc(var(--nw-leiste-h) + 5.5rem); }

h1, h2, h3 {
  font-family: var(--display); font-stretch: 118%; font-weight: 800;
  line-height: 1.04; letter-spacing: -.015em; margin: 0 0 1rem;
  overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.1rem + 2.5vw, 3.4rem); font-stretch: 106%; }
h2 { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.9rem); max-width: 22ch; }
h3 { font-size: 1.25rem; font-stretch: 110%; letter-spacing: 0; }
p { margin: 0 0 1rem; max-width: 62ch; }
a { color: var(--rost); text-underline-offset: .18em; }
a:hover { color: var(--tanne); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.mitte { width: 100%; max-width: var(--laufweite); margin-inline: auto; padding-inline: var(--rand); }

.sprung {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--nacht); color: #fff; padding: .7rem 1rem; border-radius: var(--r-klein);
}
.sprung:focus { top: calc(var(--nw-leiste-h) + .6rem); color: #fff; }

/* ---------- Musterleiste (R109, R60) ---------- */
.nw-musterleiste {
  position: sticky; top: 0; z-index: 60;
  background: var(--nacht); color: #fff; font-size: .875rem; padding: .25rem 0;
}
.nw-musterleiste .mitte { display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; align-items: center; justify-content: space-between; }
.nw-musterleiste .nw-links { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.nw-musterleiste a {
  color: #fff; display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 .7rem; border-radius: var(--r-knopf);
}
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nw-musterleiste a.nw-cta { background: var(--creme); color: var(--nacht); text-decoration: none; font-weight: 700; }
.nw-musterleiste a.nw-cta:hover { background: var(--orange-hell); color: var(--nacht); }
.nw-musterleiste .nw-ki { color: var(--orange-hell); font-weight: 700; }
.nw-musterleiste .nw-lang { display: none; }
@media (min-width: 64em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 47.99em) {
  .nw-musterleiste .nw-mittel { display: none; }
  .nw-musterleiste { font-size: .8125rem; }
  .nw-musterleiste .mitte { gap: 0 .4rem; }
  .nw-musterleiste a { padding: 0 .5rem; }
}
@media print { .nw-musterleiste { display: none; } }

/* ---------- KI-Kennzeichen am Bild (R109) ---------- */
:where(:has(> .ki-zeichen)) { position: relative; }
.ki-zeichen {
  position: absolute; top: .6rem; left: .6rem; z-index: 3;
  background: var(--nacht); color: #fff; font-size: .75rem; line-height: 1;
  padding: .32rem .6rem; border-radius: var(--r-klein); letter-spacing: .02em; pointer-events: none;
}
.hero-bild .ki-zeichen { top: auto; left: auto; right: .75rem; bottom: .75rem; }
.ki-bild { position: relative; display: block; }
.ki-bild-rund { width: max-content; }
.ki-bild-rund > .ki-zeichen { position: static; display: block; width: max-content; margin-top: .45rem; font-size: .625rem; padding: .22rem .4rem; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: var(--nw-leiste-h); z-index: 40;
  background: var(--creme); border-bottom: 3px solid var(--tanne);
  transition: box-shadow .25s ease;
}
.kopf.gescrollt { box-shadow: 0 8px 24px rgba(12, 35, 27, .14); }
.kopf-innen { display: flex; align-items: center; gap: 1.25rem; min-height: 72px; }
.marke { display: inline-flex; align-items: center; gap: .7rem; color: var(--tanne); text-decoration: none; min-height: 48px; margin-right: auto; }
.marke-zeichen { flex: none; width: 44px; height: 44px; }
.marke-blatt { transform-box: view-box; transform-origin: 24px 24px; }
.marke-name { display: grid; line-height: 1.05; }
.marke-name b { font-family: var(--display); font-stretch: 122%; font-weight: 900; font-size: 1.15rem; letter-spacing: -.01em; text-transform: uppercase; }
.marke-name small { font-size: .78rem; color: var(--gedimmt); letter-spacing: .04em; }
.menue { display: flex; gap: .25rem; }
.menue a {
  white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 .9rem;
  color: var(--text); text-decoration: none; font-weight: 700; border-radius: var(--r-knopf);
}
.menue a:hover, .menue a[aria-current="page"] { background: var(--tanne); color: #fff; }
.kopf-tel {
  white-space: nowrap; flex: none;
  display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1.2rem;
  background: var(--orange); color: var(--nacht); font-weight: 800; text-decoration: none; border-radius: var(--r-knopf);
}
.kopf-tel:hover { background: var(--tanne); color: #fff; }
.burger { display: none; }

@media (max-width: 63.99em) {
  .burger {
    display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none;
    background: var(--tanne); border: 0; border-radius: 50%; cursor: pointer;
  }
  .burger span, .burger span::before, .burger span::after {
    display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; position: relative;
    transition: transform .3s var(--feder), background .2s;
  }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -7px; } .burger span::after { top: 7px; }
  .menue-offen .burger span { background: transparent; }
  .menue-offen .burger span::before { transform: translateY(7px) rotate(45deg); }
  .menue-offen .burger span::after { transform: translateY(-7px) rotate(-45deg); }
  .menue {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--tanne); padding: .5rem var(--rand) 1rem;
  }
  .menue-offen .menue { display: flex; }
  .menue a { color: #fff; min-height: 56px; border-radius: 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 1.15rem; }
  .menue a:hover { background: var(--nacht); }
  .kopf-tel span { display: none; }
}
@media (max-width: 75em) { .kopf-tel span { display: none; } }
@media (max-width: 30em) {
  .marke-name small { display: none; }
  .marke-name b { font-size: 1rem; }
  .kopf-tel { padding: 0 .9rem; font-size: .95rem; }
  .kopf-innen { gap: .6rem; }
}
@media (max-width: 23.5em) { .kopf-tel { display: none; } }

/* ---------- Knoepfe ---------- */
.knopf, .knopf-zweit, .knopf-dunkel {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.6rem;
  font-family: var(--brot); font-weight: 800; font-size: 1.05rem; text-decoration: none;
  border-radius: var(--r-knopf); border: 2px solid transparent; cursor: pointer;
  transition: transform .25s var(--feder), background .2s, color .2s;
}
.knopf { background: var(--orange); color: var(--nacht); }
.knopf:hover { background: var(--creme); color: var(--nacht); transform: translateY(-2px); }
.knopf-zweit { border-color: currentColor; color: var(--tanne); background: transparent; }
.knopf-zweit:hover { background: var(--tanne); color: #fff; border-color: var(--tanne); transform: translateY(-2px); }
.knopf-dunkel { background: var(--nacht); color: #fff; }
.abschnitt-dunkel .knopf, .abschnitt-dunkel .knopf:hover { color: var(--nacht); }
.knopf-dunkel:hover { background: var(--creme); color: var(--nacht); transform: translateY(-2px); }
.knopf:active, .knopf-zweit:active, .knopf-dunkel:active { transform: scale(.97); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1rem; }
.textlink { display: inline-flex; align-items: center; min-height: 48px; font-weight: 800; }
.textlink::after { content: "\2192"; margin-left: .45rem; transition: transform .25s var(--feder); }
.textlink:hover::after { transform: translateX(5px); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(3.5rem, 7vw, 6rem); }
.abschnitt-sand { background: var(--sand); }
.abschnitt-tanne { background: var(--tanne); color: #fff; }
.abschnitt-tanne h2 { color: #fff; }
.vorzeile {
  display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; color: var(--rost);
}
.abschnitt-tanne .vorzeile, .sz-speiche .vorzeile { color: var(--orange-hell); }
/* Die Abschnittsnummer sitzt in einem Kettenblatt-Ring, das Markenzeichen im Kleinen. */
.kote {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none;
  border: 3px dashed currentColor; border-radius: 50%; font-family: var(--display); font-size: .8rem; letter-spacing: 0;
}
.fuehrung { font-size: 1.2rem; max-width: 56ch; }

/* ---------- 1 Hero, Szene „Das Rad rollt" ---------- */
.hero { background: var(--tanne); color: #fff; position: relative; overflow-x: clip; padding-top: clamp(2rem, 4vw, 3.5rem); }
.hero-innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero-marke {
  font-family: var(--display); font-stretch: 125%; font-weight: 900; text-transform: uppercase;
  color: var(--orange-hell); font-size: 1rem; letter-spacing: .14em; margin: 0 0 1rem;
}
.hero h1 { color: #fff; }
.hero-fuehrung { font-size: 1.2rem; color: var(--hellgruen); max-width: 48ch; }
.hero .knopf-zweit { color: #fff; }
.hero .knopf-zweit:hover { background: #fff; color: var(--nacht); border-color: #fff; }
.hero-weiter { display: inline-flex; align-items: center; min-height: 48px; color: var(--hellgruen); font-weight: 700; }
.hero-weiter:hover { color: #fff; }
.hero-bild { border-radius: var(--r-flaeche); overflow: hidden; border: 4px solid var(--orange); }
.hero-bild img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }

/* Die Strasse: eine Linie mit Mittelstreifen. Das Rad steht im Ruhezustand
   links geparkt. JavaScript setzt --weg (0 bis 1) und --winkel. */
.sz-rollt-strasse {
  position: relative; height: 128px; margin-top: clamp(1rem, 3vw, 2.5rem);
  border-bottom: 10px solid var(--nacht);
  background: repeating-linear-gradient(90deg, var(--orange) 0 38px, transparent 38px 86px) left bottom 9px / 100% 3px no-repeat;
  --weg: .04; --winkel: 0deg;
}
.sz-rollt-rad {
  position: absolute; bottom: -3px; left: 0; width: clamp(150px, 17vw, 215px); height: auto;
  transform: translateX(calc(var(--weg) * (100vw - 100%)));
  will-change: transform;
}
.sz-rollt-laufrad, .sz-rollt-kurbel { transform-box: view-box; transform-origin: var(--mx) var(--my); transform: rotate(var(--winkel)); }
.sz-rollt-kurbel { transform: rotate(calc(var(--winkel) * .42)); }

@media (max-width: 63.99em) {
  .hero-innen { grid-template-columns: 1fr; }
  .hero-bild img { aspect-ratio: 4 / 3; }
}
@media (max-width: 47.99em) {
  .hero-bild img { aspect-ratio: 5 / 4; }
  .sz-rollt-strasse { height: 100px; }
}

/* ---------- 2 Zahlen, Szene „Tacho" ---------- */
.zahlen { background: var(--orange); color: var(--nacht); padding-block: clamp(2.5rem, 5vw, 4rem); overflow-x: clip; }
.zahlen-innen { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.sz-tacho-uhr svg { width: 100%; height: auto; overflow: visible; }
.sz-tacho-marken { font-family: var(--display); }
/* Ruhezustand: Nadel steht rechts am Anschlag (alle vier Marken ueberfahren). */
.sz-tacho-nadel { transform-box: view-box; transform-origin: 160px 170px; transform: rotate(72deg); transition: transform 1.9s cubic-bezier(.22, 1.35, .36, 1); }
.sz-tacho.sz-wartet .sz-tacho-nadel { transform: rotate(-84deg); transition: none; }
.zahlen-liste { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.5rem; }
.zahlen-liste div { border-top: 4px solid var(--nacht); padding-top: .6rem; }
.zahlen-liste dt {
  font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1;
  transition: transform .5s var(--feder);
}
.zahlen-liste dd { margin: .4rem 0 0; font-weight: 600; max-width: 30ch; }
.sz-tacho.sz-wartet .zahlen-liste dt { transform: scale(.86); transform-origin: left bottom; }
.sz-tacho .zahlen-liste div:nth-child(1) dt { transition-delay: .25s; }
.sz-tacho .zahlen-liste div:nth-child(2) dt { transition-delay: .6s; }
.sz-tacho .zahlen-liste div:nth-child(3) dt { transition-delay: .95s; }
.sz-tacho .zahlen-liste div:nth-child(4) dt { transition-delay: 1.3s; }
@media (max-width: 47.99em) {
  .zahlen-innen { grid-template-columns: 1fr; }
  .sz-tacho-uhr { max-width: 250px; }
  .zahlen-liste { gap: 1.1rem 1.2rem; }
}
@media (max-width: 23.5em) { .zahlen-liste { grid-template-columns: 1fr; } }

/* ---------- 3 Sortiment, Szene „Ritzelpaket" ---------- */
.sz-ritzel { overflow-x: clip; }
.sz-ritzel-buehne {
  display: grid; grid-template-columns: minmax(0, 17rem) 9.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: center; margin-top: 2.5rem;
}
.sz-ritzel-wahl { display: grid; gap: .35rem; }
.sz-ritzel-wahl button {
  display: flex; align-items: center; gap: .8rem; min-height: 56px; width: 100%; padding: 0 1rem 0 .5rem;
  background: transparent; border: 0; border-radius: var(--r-knopf); cursor: pointer; text-align: left;
  font: 700 1.05rem/1.2 var(--brot); color: var(--text);
  transition: background .2s, color .2s, transform .3s var(--feder);
}
.sz-ritzel-wahl button:hover { background: var(--sand); }
.sz-ritzel-wahl button[aria-selected="true"] { background: var(--tanne); color: #fff; transform: translateX(8px); }
.sz-ritzel-nr {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%;
  font-family: var(--display); font-weight: 900; background: var(--sand); color: var(--tanne);
}
.sz-ritzel-wahl button[aria-selected="true"] .sz-ritzel-nr { background: var(--orange); color: var(--nacht); }

/* Das Paket von hinten gesehen: sechs Ritzel, oben das kleinste. Die Kette
   ist ein Rahmen, der mit Feder aufs gewaehlte Ritzel springt. */
.sz-ritzel-paket { position: relative; display: grid; gap: 12px; justify-items: center; padding-block: 8px; --gang: 0; }
.sz-ritzel-paket i {
  display: block; height: 44px; border-radius: 5px; background: var(--tanne);
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(244, 239, 226, .22) 7px 9px);
}
.sz-ritzel-paket i:nth-child(1) { width: 38%; } .sz-ritzel-paket i:nth-child(2) { width: 50%; }
.sz-ritzel-paket i:nth-child(3) { width: 62%; } .sz-ritzel-paket i:nth-child(4) { width: 74%; }
.sz-ritzel-paket i:nth-child(5) { width: 86%; } .sz-ritzel-paket i:nth-child(6) { width: 98%; }
.sz-ritzel-kette {
  position: absolute; left: 50%; top: 0; height: 60px; width: calc(38% + var(--gang) * 12% + 18px);
  border: 6px dotted var(--orange); border-radius: 12px;
  transform: translate(-50%, calc(var(--gang) * 56px));
  transition: transform .55s var(--feder), width .55s var(--feder);
}
.sz-ritzel-felder { min-width: 0; }
.sz-ritzel-feld { background: var(--karte); border-radius: var(--r-flaeche); overflow: hidden; border: 2px solid var(--tanne); padding-bottom: 1.2rem; }
.sz-ritzel-feld > :not(.sz-ritzel-bild) { margin-inline: 1.4rem; }
.sz-ritzel-feld h3 { margin-top: 1.2rem; font-size: 1.6rem; }
.sz-ritzel-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Ohne JavaScript stehen alle sechs untereinander, die Wahl entfaellt. */
html:not(.js) .sz-ritzel-wahl, html:not(.js) .sz-ritzel-paket { display: none; }
html:not(.js) .sz-ritzel-buehne { grid-template-columns: 1fr; }
html:not(.js) .sz-ritzel-felder { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
html.js .sz-ritzel-feld[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .sz-ritzel-feld.sz-ritzel-neu { animation: sz-ritzel-rein .5s var(--feder); }
}
@keyframes sz-ritzel-rein { from { opacity: 0; transform: translateX(26px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 63.99em) {
  .sz-ritzel-buehne { grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: start; }
  .sz-ritzel-felder { grid-column: 1 / -1; }
}
@media (max-width: 35em) {
  /* Handy: die Kette liegt quer ueber den Wahlknoepfen, das Paket entfaellt. */
  .sz-ritzel-buehne { grid-template-columns: 1fr; }
  .sz-ritzel-paket { display: none; }
  .sz-ritzel-wahl { grid-template-columns: 1fr 1fr; }
  .sz-ritzel-wahl button { font-size: .95rem; padding-right: .5rem; gap: .5rem; }
  .sz-ritzel-wahl button[aria-selected="true"] { transform: none; }
  .sz-ritzel-nr { width: 2rem; height: 2rem; }
}

/* ---------- 4 Werkstatt, Szene „Einspeichen" ---------- */
.sz-speiche { background: var(--tanne); color: #fff; overflow-x: clip; --p: 1; --g0: 1; --g1: 1; --g2: 1; --g3: 1; --g4: 1; }
.sz-speiche h2 { color: #fff; }
.sz-speiche-innen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.sz-speiche-rad { width: 100%; max-width: 30rem; height: auto; margin-inline: auto; overflow: visible; }
.sz-speiche-drehung { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(calc(var(--p) * 140deg)); }
.sz-speiche-gruppe line { stroke: var(--creme); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 153; }
.sz-speiche-g0 line { stroke-dashoffset: calc(153 * (1 - var(--g0))); }
.sz-speiche-g1 line { stroke-dashoffset: calc(153 * (1 - var(--g1))); }
.sz-speiche-g2 line { stroke-dashoffset: calc(153 * (1 - var(--g2))); }
.sz-speiche-g3 line { stroke-dashoffset: calc(153 * (1 - var(--g3))); }
.sz-speiche-g4 line { stroke-dashoffset: calc(153 * (1 - var(--g4))); }
.sz-speiche-g1 line, .sz-speiche-g3 line { stroke: var(--orange-hell); }
.sz-speiche-liste { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .2rem; }
.sz-speiche-liste li {
  position: relative; padding: .7rem 0 .7rem 3rem; border-bottom: 1px solid var(--linie-dunkel); font-weight: 600;
}
/* Der Nippel: ein Ring, der sich fuellt, sobald die Speichengruppe sitzt. */
.sz-speiche-liste li::before {
  content: ""; position: absolute; left: .2rem; top: .75rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 3px solid var(--orange); background: var(--orange); box-shadow: inset 0 0 0 4px var(--tanne);
  transition: background .3s, transform .45s var(--feder);
}
.sz-speiche-liste li.sz-speiche-offen::before { background: transparent; transform: scale(.72); }
.sz-speiche .knopf-zweit { color: #fff; }
.sz-speiche .knopf-zweit:hover { background: #fff; color: var(--nacht); border-color: #fff; }

/* Nur das Rad klebt, der Text laeuft normal durch (ab 1024 px, mit JavaScript,
   ohne Bewegungsverzicht). So kann nichts ueberlaufen, egal wie niedrig das
   Fenster ist: Die erste Fassung mit klebender Gesamtbuehne ragte bei 768 px
   Fensterhoehe in den naechsten Abschnitt. */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  html.js .sz-speiche-innen { align-items: start; padding-block: 11vh; }
  html.js .sz-speiche-radhalter { position: sticky; top: calc(var(--nw-leiste-h) + 100px); }
  html.js .sz-speiche-rad { max-width: min(30rem, calc(100vh - var(--nw-leiste-h) - 150px)); }
  html.js .sz-speiche-liste li { padding-block: 1.5rem; }
  html.js .sz-speiche-liste li::before { top: 1.5rem; }
}
@media (max-width: 63.99em) {
  .sz-speiche-innen { grid-template-columns: 1fr; }
  .sz-speiche-rad { max-width: 17rem; }
}

/* ---------- 5 Ablauf, Szene „Die Kette laeuft" ---------- */
.sz-kette { overflow-x: clip; }
.sz-kette-band {
  --kette: 0; height: 30px; margin-block: 2rem 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='30'%3E%3Crect x='1' y='7' width='34' height='16' rx='8' fill='none' stroke='%2312382b' stroke-width='4'/%3E%3Crect x='30' y='10' width='24' height='10' rx='5' fill='%2312382b'/%3E%3Ccircle cx='9' cy='15' r='3' fill='%23ff6a13'/%3E%3Ccircle cx='27' cy='15' r='3' fill='%23ff6a13'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position-x: calc(var(--kette) * -1px);
}
.sz-kette-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2.5rem); }
.sz-kette-schritte li { position: relative; padding-top: 2.6rem; }
/* Das Kettenglied, an dem der Schritt haengt. */
.sz-kette-schritte li::before { content: ""; position: absolute; left: 1.1rem; top: 0; width: 4px; height: 2rem; background: var(--tanne); }
.sz-kette-ziffer {
  display: block; font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem);
  line-height: 1; color: var(--tanne); text-shadow: 4px 4px 0 var(--orange); margin-bottom: .6rem;
}
.sz-kette-schritte p { color: var(--gedimmt); margin: 0; }
@media (max-width: 63.99em) { .sz-kette-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }
@media (max-width: 30em) {
  .sz-kette-schritte { grid-template-columns: 1fr; }
  .sz-kette-schritte li { padding: 0 0 0 4.6rem; min-height: 4rem; }
  .sz-kette-schritte li::before { display: none; }
  .sz-kette-ziffer { position: absolute; left: 0; top: 0; font-size: 2.6rem; }
}

/* ---------- 6 Preise: Werkstattzettel ---------- */
.preise-innen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.preisliste { margin: 0; background: var(--karte); border-radius: var(--r-flaeche); padding: .5rem clamp(1rem, 3vw, 2rem); border-left: 10px solid var(--orange); box-shadow: 0 14px 40px rgba(12, 35, 27, .1); }
.preisliste-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 2px dashed var(--linie); }
.preisliste-zeile:last-child { border-bottom: 0; }
.preise-innen > * { min-width: 0; }
.preisliste dt { font-weight: 700; font-size: 1.1rem; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 30em) { .preisliste dd { font-size: 1.35rem; } .preisliste-zeile { gap: .6rem; } }
.preisliste dd { margin: 0; font-family: var(--display); font-stretch: 120%; font-weight: 900; font-size: 1.7rem; color: var(--tanne); white-space: nowrap; }
.preis-notiz { color: var(--gedimmt); margin-bottom: 1.5rem; }
@media (max-width: 63.99em) { .preise-innen { grid-template-columns: 1fr; } }

/* ---------- 7 Kundenstimme ---------- */
.zitat-gross { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 3rem); align-items: center; }
.zitat-gross img { width: clamp(6rem, 12vw, 9.5rem); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 5px solid var(--orange); }
.zitat-gross blockquote {
  margin: 0 0 1rem; font-family: var(--display); font-stretch: 105%; font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.3rem); line-height: 1.22; color: var(--tanne); max-width: 38ch;
}
.zitat-gross figcaption { font-weight: 700; color: var(--gedimmt); }
@media (max-width: 35em) { .zitat-gross { grid-template-columns: 1fr; } }

/* ---------- 8 Einzugsgebiet, Szene „Hoehenprofil" ---------- */
.sz-profil { overflow-x: clip; --p: 1; }
.sz-profil-bild { margin: 2rem calc(var(--rand) * -1) 0; }
.sz-profil-bild svg { width: 100%; height: clamp(120px, 18vw, 240px); overflow: visible; }
.sz-profil-flaeche { fill: var(--nacht); }
.sz-profil-linie { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.sz-profil-fahrer { fill: var(--creme); stroke: var(--orange); stroke-width: 5; vector-effect: non-scaling-stroke; }
.sz-profil-orte { list-style: none; margin: 0 0 2rem; padding: 1rem 0 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; border-top: 3px solid var(--orange); }
.sz-profil-orte li { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: clamp(.85rem, .6rem + .7vw, 1.15rem); transition: color .3s, transform .4s var(--feder); overflow-wrap: anywhere; }
.sz-profil-orte li.sz-profil-vor { color: var(--hellgruen); transform: translateY(6px); }
.sz-profil-orte li:not(.sz-profil-vor) { color: var(--orange-hell); }
.sz-profil-text { color: var(--hellgruen); font-size: 1.1rem; }
@media (max-width: 63.99em) { .sz-profil-orte { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: .8rem; } }
@media (max-width: 30em) { .sz-profil-orte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 9 Fragen ---------- */
.fragen-innen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.fragen details { border-bottom: 2px solid var(--tanne); }
.fragen details:first-child { border-top: 2px solid var(--tanne); }
.fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: .6rem 0; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 { margin: 0; font-size: 1.15rem; }
.fragen summary::after {
  content: "+"; display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--tanne); color: #fff; font-weight: 800; font-size: 1.4rem; transition: transform .4s var(--feder), background .2s;
}
.fragen details[open] summary::after { transform: rotate(135deg); background: var(--orange); color: var(--nacht); }
.fragen details p { padding: 0 3.5rem 1.2rem 0; color: var(--gedimmt); }
@media (max-width: 63.99em) { .fragen-innen { grid-template-columns: 1fr; } }

/* ---------- 10 Abschluss ---------- */
.abschluss { background: var(--orange); color: var(--nacht); }
.abschluss h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.abschluss-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.telefon-gross {
  display: inline-flex; align-items: center; min-height: 64px; margin: .5rem 0 1.2rem;
  font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: clamp(1.9rem, 1rem + 3.4vw, 4rem); line-height: 1; white-space: nowrap;
  color: var(--nacht); text-decoration-thickness: 5px; text-underline-offset: .12em;
}
.telefon-gross:hover { color: #fff; }
.zeitentabelle { width: 100%; border-collapse: collapse; }
.zeitentabelle th, .zeitentabelle td { text-align: left; padding: .8rem 0; border-bottom: 2px solid var(--nacht); vertical-align: top; }
.zeitentabelle th { font-weight: 800; padding-right: 1rem; }
@media (max-width: 47.99em) { .abschluss-raster { grid-template-columns: 1fr; } }

/* ---------- Fuss ---------- */
.fuss { background: var(--nacht); color: var(--hellgruen); padding-block: 3.5rem 2rem; border-top: 8px solid var(--tanne); }
.fuss a, .fuss .cookie-knopf { color: #fff; display: inline-flex; align-items: center; min-height: 48px; }
.fuss a:hover, .fuss .cookie-knopf:hover { color: var(--orange-hell); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.fuss-marke { font-family: var(--display); font-stretch: 122%; font-weight: 900; text-transform: uppercase; font-size: 1.4rem; color: #fff; display: block; margin-bottom: .8rem; }
.fuss h2 { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-hell); font-stretch: 100%; margin-bottom: .4rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss address { font-style: normal; line-height: 1.5; }
.cookie-knopf { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.fuss-schluss { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie-dunkel); }
.musterhinweis { font-size: .9rem; max-width: 80ch; margin: 0; }
@media (max-width: 47.99em) { .fuss-raster { grid-template-columns: 1fr; } }

dialog { border: 0; border-radius: var(--r-flaeche); padding: 2rem; max-width: min(34rem, calc(100vw - 2rem)); color: var(--text); background: var(--karte); }
dialog::backdrop { background: rgba(12, 35, 27, .7); }
dialog h2 { font-size: 1.5rem; }

/* ---------- Markenbewegung: das Kettenblatt dreht einmal beim Laden und
   bei Beruehrung. Das H bleibt stehen. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .marke-blatt { animation: marke-dreht 1.6s cubic-bezier(.2, .8, .2, 1) .2s 1 both; }
  .marke:hover .marke-blatt, .marke:focus-visible .marke-blatt { animation: marke-dreht-weiter .9s var(--feder) 1; }
}
@keyframes marke-dreht { from { transform: rotate(-360deg); } to { transform: rotate(0); } }
@keyframes marke-dreht-weiter { from { transform: rotate(0); } to { transform: rotate(144deg); } }

/* Fehlendes Bild tritt zurueck (Lehre Maler, 18.09.2026). */
img.fehlt { visibility: hidden; }

/* Bewegung abbestellt: alles steht im fertigen Zustand, nichts klebt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .kopf, .burger, .cookie-knopf, .sz-rollt-strasse, .sz-ritzel-wahl, .sz-ritzel-paket { display: none; }
}

/* =====================================================================
   AUSBAU UEBER DIE BILDSCHIRMBREITEN, 18.09.2026 (Hugo: „baue die seiten noch
   auf verschiedenen bildschirmbreiten"). Bis hierher war die Seite am Rechner
   (1440) fertig und am Handy (390) lauffaehig, dazwischen nur fehlerfrei.
   Gemessen mit breiten.mjs: 360, 480, 600, 768, 1024, 1280, 1920, 740 quer.
   ===================================================================== */

/* --- Musterleiste bleibt einzeilig. Bei 768 und 1024 px brach sie um und
   kostete dauerhaft 24 px Fensterhoehe. Der lange Satz kommt erst ab 1280. */
@media (min-width: 64em) and (max-width: 79.99em) { .nw-musterleiste .nw-lang { display: none; } }
@media (max-width: 59.99em) { .nw-musterleiste .nw-mittel { display: none; } }

/* --- Grosse Bildschirme: Die ganze Seite waechst mit, statt als schmale Spalte
   in der Mitte zu stehen. Alles ist in rem gebaut, deshalb reicht die Wurzel.
   (em in der Medienabfrage rechnet immer mit 16 px, es gibt keine Rueckkopplung.) */
@media (min-width: 100em) { html { font-size: 112.5%; } }
@media (min-width: 120em) { html { font-size: 125%; } }
@media (min-width: 150em) { html { font-size: 140%; } }

/* --- Handy im Querformat: Musterleiste und Kopf belegten zusammen 36 % des
   Fensters. Der Kopf laeuft dort mit der Seite weg, die Musterleiste bleibt. */
@media (max-height: 30em) and (orientation: landscape) { .kopf { position: static; } }

/* --- Tablet-Stufe, 768 bis 1023 px: eigene Anordnung statt gestrecktem Handy --- */
@media (min-width: 48em) and (max-width: 63.99em) {
  /* Hero: Text und Foto nebeneinander, Ueberschrift dafuer kleiner */
  .hero-innen { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.75rem; align-items: center; }
  .hero h1 { font-size: 2rem; }
  .hero-fuehrung { font-size: 1.05rem; }
  .hero-bild img { aspect-ratio: 4 / 5; }
  /* Werkstatt: das Rad klebt links neben dem Text, wie am Rechner */
  .sz-speiche-innen { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .sz-speiche-rad { max-width: 15rem; }
  /* Preise und Fragen: Ueberschrift links, Inhalt rechts */
  .preise-innen, .fragen-innen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem; }
  .preise-innen h2, .fragen-innen h2 { font-size: 1.6rem; }
}
@media (min-width: 48em) and (max-width: 63.99em) and (prefers-reduced-motion: no-preference) {
  html.js .sz-speiche-innen { padding-block: 9vh; }
  html.js .sz-speiche-radhalter { position: sticky; top: calc(var(--nw-leiste-h) + 100px); }
  html.js .sz-speiche-liste li { padding-block: 1.3rem; }
  html.js .sz-speiche-liste li::before { top: 1.3rem; }
}

/* --- Zahlenband unter 1024 px: Zahl links, Erklaerung rechts. Im Zweierraster
   lief die Erklaerung auf 15 bis 19 Zeichen je Zeile. */
@media (max-width: 63.99em) {
  .zahlen-liste { grid-template-columns: 1fr; gap: 0; }
  .zahlen-liste div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .8rem 0; border-top-width: 3px; }
  .zahlen-liste div:last-child { border-bottom: 3px solid var(--nacht); }
  .zahlen-liste dt { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem); }
  .zahlen-liste dd { margin: 0; max-width: none; }
}
@media (min-width: 48em) and (max-width: 63.99em) { .zahlen-innen { grid-template-columns: 15rem minmax(0, 1fr); } }
@media (max-width: 23.5em) { .zahlen-liste div { grid-template-columns: 6.5rem minmax(0, 1fr); } }

/* --- Ablauf: vier Spalten erst ab 1152 px, bei 1024 waren es 19 Zeichen je Zeile */
@media (min-width: 64em) and (max-width: 71.99em) { .sz-kette-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.5rem; } }

/* --- Kleine Handys: das grosse Zitat lief auf 24 Zeichen je Zeile */
@media (max-width: 30em) { .zitat-gross blockquote { font-size: 1.2rem; line-height: 1.3; } }
/* Nachzug nach der Sichtprobe bei 768 px: „20 km" brach in zwei Zeilen */
@media (max-width: 63.99em) { .zahlen-liste div { grid-template-columns: 9.5rem minmax(0, 1fr); } .zahlen-liste dt { white-space: nowrap; } }
/* Kleine Handys: Zahl ueber der Erklaerung, sonst 19 Zeichen je Zeile */
@media (max-width: 30em) { .zahlen-liste div { grid-template-columns: 1fr; gap: .15rem; } }
@media (min-width: 48em) and (max-width: 63.99em) { .preise-innen { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

/* Prüfung 01.10.2026: Die Hero-Überschrift trennte am Handy mitten im Wort („Repa-raturen“, „Kos-metik“). Dort nur noch an gesetzten Trennstellen. */
.hero h1 { hyphens: manual; }