/* Unterseiten, Fassung 2: Inhaltsregeln der Fassung 1 mit den Werten der neuen
   Marke. Erzeugt von fahrrad-unterseiten.js, Rahmen (Kopf, Fuss, Knoepfe,
   Musterleiste) kommt aus rahmen.css. Schriften stehen in rahmen.css. */


/* ---------- Grundwerte ---------- */

:root {
  /* Drei helle Flaechen, alle unterscheidbar (R92), seit 22.08.2026 alle
     ins Rot gezogen: Papier 1,15:1 gegen Wechsel, Karte 1,13:1 gegen Papier. */
  --papier: #f4efe2;      /* Grundflaeche der Seite, warm-rosé */
  --wechsel: #e8e0cc;     /* Wechselabschnitt, deutlich rot getoent */
  --karte: #fffdf7;       /* oberste Ebene: Karten, Eingabefelder */
  --graphit: #0c231b;     /* nur noch Rest-Rolle: Zahlenband-Linien, Menuetext */
  --graphit-licht: #12382b;

  /* Signalrot, jetzt Leitfarbe statt Akzent (Hugo, 22.08.2026: „viel mehr
     mit dem Rot"). Fuenf Rollen, jede gemessen:
       --signal        Bedienelemente und Marken, Weiss darauf 5,83:1
       --signal-flaeche ganze Abschnitte, Weiss darauf 6,93:1
       --signal-nacht  Fuss, Weiss darauf 9,84:1
       --signal-tief   Schrift auf hell: 5,99:1 auf Papier, 5,21:1 auf Wechsel
       --signal-hell   Schrift/Grafik auf dem dunklen Fussrot: 5,15:1 */
  --signal: #12382b;
  --signal-flaeche: #12382b;
  --signal-nacht: #0c231b;
  --signal-tief: #a83f08;
  --signal-hell: #ff8a3d;
  --signal-hauch: #fbf6ea;   /* zarteste rote Flaeche, fuer Karten und Baender */

  /* Schrift auf den roten Flaechen. Nicht --signal-hell nehmen: das kommt
     auf --signal-flaeche nur auf 3,63:1 und ist damit keine Textfarbe. */
  --auf-rot: #ffffff;        /* 6,93:1 auf --signal-flaeche */
  --auf-rot-gedimmt: #c9d6cd;/* 5,22:1 auf --signal-flaeche */

  --text: #1b2a24;        /* 14,5:1 auf Papier */
  --gedimmt: #4c5f56;     /* 6,8:1 auf Papier, 5,9:1 auf Wechsel */
  --linie: #d5cbb3;       /* Haarlinie, reine Grafik, rot getoent */
  --linie-fest: #b9ad90;  /* kraeftigere Trennung */

  /* Radius-System (R106), vier Werte mit Zuordnung:
     0 Baender und Linien, 4 Bedienelemente, 10 Karten, 16 Bilder. */
  --r-bedien: 6px;
  --r-karte: 14px;
  --r-bild: 14px;

  --schatten: 0 1px 2px rgba(30, 32, 35, .05), 0 14px 30px -18px rgba(30, 32, 35, .3);
  --schatten-tief: 0 24px 50px -28px rgba(30, 32, 35, .45);

  /* Hoehe der Musterleiste. Sie klebt seit Hugos Entscheidung vom
     21.08.2026 („die sollen in der Hinsicht gleich sein"), und die
     Kopfleiste legt sich mit `top: var(--nw-leiste-h)` darunter statt
     dahinter. Die Werte sind fuer DIESE Leiste gemessen, nicht von den
     vier aelteren Musterseiten uebernommen: andere Texte, anderer
     Umbruchpunkt, andere Zahlen. skript.js misst beim Laden nach und
     schreibt den echten Wert; diese Zahlen sind der Rueckfall ohne
     JavaScript.

     Gemessen am 21.08.2026 ueber neun Breiten von 320 bis 1280 px:
     ueberall **55 px**, weil der Text gestuft ist und die Leiste damit
     auf keiner Breite umbricht. Deshalb ein einziger Rueckfallwert und
     keine Staffelung je Umbruchstufe. Wird der Text der Leiste geaendert,
     ist dieser Wert neu zu messen, nicht zu schaetzen. */
  --nw-leiste-h: 55px;

  --rand: 1.5rem;
  --breite: 76rem;
  --abstand: 6rem;        /* Abschnittsabstand am Rechner (R29: 5 bis 7 rem) */
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: "Karla", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  font-synthesis-weight: none;
}

/* Oberflaechen, die der Browser mitbringt, werden mitgestaltet (R81). */
::selection { background: var(--signal); color: #fff; }
:root { accent-color: var(--signal); color-scheme: light; }

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 112%;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  overflow-wrap: break-word;   /* R78 */
  hyphens: auto;
}

h1 { font-size: clamp(2.1rem, 1.15rem + 3.6vw, 3.25rem); }   /* 52 px bei 1280, Faktor 2,89 */
h2 { font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.25rem); }
h3 { font-size: 1.3rem; font-stretch: 105%; }
h4 { font-size: 1.0625rem; font-stretch: 100%; letter-spacing: 0; }

p { margin: 0 0 1.1em; max-width: 68ch; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
img { display: block; max-width: 100%; height: auto; }   /* R47 */

a { color: var(--signal-tief); text-underline-offset: .18em; }
a:hover { color: var(--signal); }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-bedien);
}

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

/* R7: Jedes Sprungziel bekommt Vorlauf, sonst schiebt die klebende
   Kopfleiste (72 px plus Musterleiste) die angesprungene Ueberschrift
   unter sich. Gilt fuer alle sechs Anker der Seite, gemessen am
   hoechsten Stand der Leiste. */
[id] { scroll-margin-top: calc(var(--nw-leiste-h) + 5.5rem); }

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

.abschnitt { padding-block: var(--abstand); }
.abschnitt-wechsel { background: var(--wechsel); }

/* Frueher Graphit. Der Abschlussabschnitt jeder Seite steht jetzt auf voller
   roter Flaeche — das ist der groesste einzelne Rotblock der Seite und der
   Grund, warum die Seite ueberhaupt als „rote Seite" liest. Die Klasse heisst
   weiter `abschnitt-dunkel`, weil sie im HTML aller fuenf Seiten steht und
   ihre Rolle dieselbe geblieben ist: dunkle Flaeche, helle Schrift. */
.abschnitt-dunkel { background: var(--signal-flaeche); color: var(--auf-rot); }
.abschnitt-dunkel h2, .abschnitt-dunkel h3 { color: var(--auf-rot); }
.abschnitt-dunkel a { color: var(--auf-rot); }

.vorzeile {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 100%;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal-tief);
  margin: 0 0 .7rem;
}
/* Roter Strich vor jeder Vorzeile: die Wiederholung traegt das Rot durch
   jeden Abschnitt, ohne dass ein weiteres Bauteil noetig wird. */
.vorzeile::before {
  content: "";
  display: inline-block;
  width: 1.7rem; height: 3px;
  background: var(--signal);
  vertical-align: .28em;
  margin-right: .7rem;
}
.abschnitt-dunkel .vorzeile { color: var(--auf-rot); }
.abschnitt-dunkel .vorzeile::before { background: var(--auf-rot); }

.fuehrung { color: var(--gedimmt); font-size: 1.1875rem; max-width: 62ch; }
.abschnitt-dunkel .fuehrung { color: var(--auf-rot-gedimmt); }

/* ---------- Hero: zweigeteilt, Bild randlos bis zur Fensterkante ---------- */

.hero { padding-block: 4.5rem 5rem; overflow: hidden; }
.hero-innen {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 3.5rem;
  align-items: center;   /* R103 */
}
/* Der Hero hat keine Vorzeile, ihm fehlte damit als einzigem Abschnitt der
   rote Strich. Er bekommt ihn ueber der Ueberschrift, breiter, weil hier
   nichts danebensteht, was ihn masshalten muesste. */
.hero h1::before {
  content: "";
  display: block;
  width: 4.5rem; height: 5px;
  background: var(--signal);
  margin-bottom: 1.5rem;
}
.hero h1 { margin-bottom: .45em; }
.hero-fuehrung { font-size: 1.25rem; color: var(--gedimmt); max-width: 46ch; }

.hero-bild {
  position: relative;
  margin-right: calc((100vw - min(100vw, var(--breite))) / -2 - var(--rand));
}
/* Roter Klotz, der unten links unter dem Bild hervorschaut. Er ist die
   groesste Rotflaeche des ersten Bildschirms und haelt den Hero rot, ohne
   das Foto zu ueberdecken. Kein Text darauf, also reine Grafik (R30). */
.hero-bild::before {
  content: "";
  position: absolute; z-index: 0;
  left: -1.6rem; bottom: -1.6rem;
  width: 46%; height: 58%;
  background: var(--signal);
  border-radius: var(--r-bild) 0 0 var(--r-bild);
}
.hero-bild picture, .hero-bild img { position: relative; z-index: 1; }
.hero-bild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-bild) 0 0 var(--r-bild);
  box-shadow: var(--schatten-tief);
}

.hero-weiter {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-top: 1.9rem;
  color: var(--gedimmt); font-size: .9375rem; text-decoration: none;
  border-bottom: 1px solid var(--linie-fest);
}
.hero-weiter:hover { color: var(--signal-tief); border-bottom-color: var(--signal); }

/* ---------- Zahlenband: eine Zeile auf einer Haarlinie, kein Kasten ---------- */

.zahlenband { padding-block: 0 var(--abstand); }
.zahlenband-zeile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 4px solid var(--signal);
  border-bottom: 1px solid var(--linie);
}
.zahlenband-zeile > div {
  padding: 1.5rem 1.6rem 1.4rem 0;
  border-left: 1px solid var(--linie);
  padding-left: 1.6rem;
}
.zahlenband-zeile > div:first-child { border-left: 0; padding-left: 0; }
.zahlenband b {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 118%; font-weight: 800;
  font-size: 2.1rem; line-height: 1;
  color: var(--signal-tief);   /* 5,99:1 auf Papier */
  font-variant-numeric: tabular-nums;
}
.zahlenband small { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--gedimmt); line-height: 1.45; }

/* ---------- Sortiment: ungleiches Raster, eine grosse Kachel, fuenf kompakte ---------- */

.sortiment-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.kachel-gross {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.kachel-gross img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Das Textfeld der grossen Kachel steht auf Rot. Damit traegt der
   Sortimentsabschnitt eine zweite grosse Rotflaeche, ohne dass ein Kasten
   dazukommt. Weiss auf --signal-flaeche: 6,93:1. */
.kachel-gross-text {
  padding: 1.6rem 1.7rem 1.8rem;
  background: var(--signal-flaeche);
  color: var(--auf-rot);
}
.kachel-gross h3 { margin-bottom: .35em; color: var(--auf-rot); }
.kachel-gross-text p { color: var(--auf-rot-gedimmt); }

.kachel-liste { display: grid; gap: 0; border-top: 4px solid var(--signal); }
.kachel-liste a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
  /* Der rote Streifen links waechst beim Zeigen von 0 auf 6 px und schiebt
     den Text mit; deshalb liegt er als Rahmen an, nicht als Pseudoelement. */
  padding: 1rem 0 1rem 0;
  border-left: 0 solid var(--signal);
  border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
  transition: border-left-width .15s ease, padding-left .15s ease, background .15s ease;
}
.kachel-liste a:hover {
  color: var(--signal-tief);
  background: var(--signal-hauch);
  border-left-width: 6px;
  padding-left: .9rem;
}
.kachel-liste strong {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 105%; font-weight: 700; font-size: 1.1rem;
  display: block;
}
.kachel-liste small { color: var(--gedimmt); font-size: .9375rem; }
.kachel-liste .pfeil { color: var(--signal); font-size: 1.3rem; line-height: 1; }

/* ---------- Werkstattabschnitt: Bildpaar versetzt, Text mit Haekchenliste ---------- */

.werkstatt-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}
.bildpaar { position: relative; padding-bottom: 4.5rem; padding-right: 3rem; }
/* :first-of-type / :last-of-type statt :first-child / :last-child: seit R109
   folgt jedem Bild ein <span class="ki-zeichen">, das zweite Bild ist damit
   nicht mehr das letzte Kind des Rahmens. */
.bildpaar img:first-of-type {
  width: 78%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-bild);
  box-shadow: var(--schatten);
}
.bildpaar img:last-of-type {
  position: absolute; right: 0; bottom: 0;
  width: 56%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-bild);
  /* War ein Rand in Flaechenfarbe, der das Bild nur freistellte. Jetzt ein
     roter Rahmen: dasselbe Freistellen, aber sichtbar. */
  border: 7px solid var(--signal);
  box-shadow: var(--schatten);
}

.haken { list-style: none; padding: 0; margin: 1.6rem 0 2rem; }
.haken li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .85rem;
  max-width: 56ch;
}
.haken li::before {
  content: "";
  position: absolute; left: 0; top: .48em;
  width: 14px; height: 14px;
  background: var(--signal);
}

/* ---------- Ablauf: Schrittleiste auf einer Linie, grosse Ziffern ---------- */

.schrittleiste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 4px solid var(--signal);
  padding-top: 2.2rem;
}
.schrittleiste { padding-left: 0; list-style: none; }
.schrittleiste > li { list-style: none; margin: 0; }
.schritt-ziffer {
  display: block;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 118%; font-weight: 800;
  font-size: 2.4rem; line-height: 1;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  margin-bottom: .6rem;
}
.schrittleiste h3 { font-size: 1.15rem; margin-bottom: .3em; }
.schrittleiste p { font-size: 1rem; color: var(--gedimmt); margin: 0; }

/* ---------- Preisliste mit Fuehrungspunkten ---------- */

.preisliste { margin: 0; }
.preisliste-zeile {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--linie);
}
.preisliste-zeile:first-child { border-top: 4px solid var(--signal); }
.preisliste-zeile dt { font-weight: 600; }
.preisliste-zeile .punkte {
  flex: 1 1 auto;
  border-bottom: 2px dotted var(--signal);
  transform: translateY(-.25em);
  min-width: 2rem;
}
.preisliste-zeile dd {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 105%; font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--signal-tief);   /* 5,21:1 auf der Wechselflaeche */
}
.preis-notiz { margin-top: 1.5rem; font-size: .9375rem; color: var(--gedimmt); }

/* ---------- Ein grosses Zitat ---------- */

.zitat-gross {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  margin: 0;
  max-width: 60rem;
}
.zitat-gross img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--signal);
}
.zitat-gross blockquote {
  margin: 0;
  /* Rote Kante am Zitat statt Anfuehrungsgrafik: gleiche Bauweise wie das
     Hinweisband, damit die Seite dasselbe Rotmotiv wiederholt. */
  border-left: 6px solid var(--signal);
  padding-left: 1.7rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 105%;
  font-weight: 500;
  font-size: clamp(1.35rem, 1rem + 1.3vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}
/* Gleicher Einzug wie das Zitat, damit die Zeile unter der roten Kante
   buendig mit dem Zitattext steht und nicht 2 rem davor. */
.zitat-gross figcaption {
  margin-top: 1.1rem; color: var(--gedimmt); font-size: .9375rem;
  padding-left: calc(1.7rem + 6px);
}

/* ---------- Einzugsgebiet: fortlaufende Zeile mit Trennpunkten ---------- */

.gebiet-orte {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 108%; font-weight: 600;
  font-size: clamp(1.2rem, .9rem + 1.1vw, 1.6rem);
  line-height: 1.5;
  max-width: 54ch;
  margin: 0 0 1.2rem;
}
.gebiet-orte span { color: var(--signal-tief); padding: 0 .2rem; }
/* Der Punkt traegt Text und wird deshalb an 4,5:1 gemessen, nicht an 3:1
   (R30). Die Flaechenvariante kam auf der Wechselflaeche nur auf 4,43:1,
   die tiefe Variante auf 5,12:1. Die Leerzeichen um den Punkt stehen im
   HTML und sind kein Schmuck: Ohne sie ist die ganze Ortszeile ein
   einziges Wort ohne Umbruchstelle und sprengt die Seite bei 320 px um
   507 px seitlich. */

/* ---------- Haeufige Fragen: Aufklappliste ---------- */

.fragen { border-top: 4px solid var(--signal); max-width: 60rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
/* Die offene Frage bekommt eine rote Kante links: das Aufklappen ist damit
   auch am Rand ablesbar, nicht nur am Zeichen rechts. */
.fragen details[open] {
  border-left: 5px solid var(--signal);
  padding-inline: 1.1rem;
  background: var(--signal-hauch);
}
.fragen details[open] summary { color: var(--signal-tief); }
.fragen summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 64px; padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 105%; font-weight: 700; font-size: 1.2rem;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 { margin: 0; font: inherit; letter-spacing: inherit; }
/* Das Zeichen rechts war ein rotes Plus auf heller Flaeche und damit der
   kleinste Rotpunkt der Seite. Jetzt ein rotes Quadrat mit weissem Zeichen:
   sechs davon untereinander tragen den Fragenabschnitt mit. */
.fragen summary::after {
  content: "+";
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--signal); color: #fff;
  font-size: 1.4rem; line-height: 1;
  border-radius: var(--r-bedien);
}
.fragen details[open] summary::after { content: "\2013"; }
.fragen summary:hover { color: var(--signal-tief); }
.fragen .antwort { padding-bottom: 1.3rem; }
.fragen .antwort p { margin-bottom: .6em; }
.fragen .antwort p:last-child { margin-bottom: 0; }

/* ---------- Kontaktabschluss: dunkle Flaeche, Zeiten links, Telefon rechts ---------- */

.abschluss-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.zeitentabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeitentabelle th, .zeitentabelle td {
  text-align: left; padding: .8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-weight: 400;
}
.zeitentabelle th { font-weight: 600; }
.zeitentabelle td { text-align: right; }
/* Frueher --signal-hell. Auf der jetzt roten Flaeche waere das Rot auf Rot
   (3,63:1). Der gedimmte Rosaton misst 5,22:1 und bleibt trotzdem als
   „anders als die Oeffnungszeit" lesbar. */
.zeitentabelle .zu { color: var(--auf-rot-gedimmt); font-style: italic; }

.telefon-gross {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 118%; font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.1;
  color: #fff; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.telefon-gross:hover { color: var(--auf-rot-gedimmt); }


/* Zeile kurzer Angaben im Seitenkopf: durch Punkte getrennt, keine Pillen,
   damit sie sich von den Eckdaten in den Warengruppen unterscheidet. */
.chips {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: flex; flex-wrap: wrap; gap: .2rem 0;
  font-size: .9375rem; color: var(--gedimmt);
}
.chips li { margin: 0; }
.chips li + li::before { content: "·"; color: var(--signal); padding: 0 .7rem; }

/* Schmales Kontaktband am Fuss der Unterseiten. Andere Bauform als der
   zweispaltige Kontaktabschluss der Startseite. */
.kontaktband {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.8rem 3rem;
}
.kontaktband h2 { font-size: 1.6rem; margin-bottom: .35em; }
.kontaktband p { margin-bottom: 0; color: var(--auf-rot-gedimmt); max-width: 52ch; }

/* ---------- Unterseite: Warengruppen als wechselseitige Bildreihen ---------- */

.seitenkopf { padding-block: 3.5rem 2.5rem; border-bottom: 4px solid var(--signal); }
.seitenkopf p { color: var(--gedimmt); font-size: 1.1875rem; }

.warengruppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding-block: 3.6rem;
  border-bottom: 1px solid var(--linie);
}
.warengruppe:last-of-type { border-bottom: 0; }
.warengruppe img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-bild); }
.warengruppe.gedreht .warengruppe-bild { order: 2; }
.warengruppe h2 { margin-bottom: .35em; }
.warengruppe .eckdaten {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  list-style: none; padding: 0; margin: 1.2rem 0 0;
}
.warengruppe .eckdaten li {
  margin: 0;
  padding: .35rem .75rem;
  border: 1px solid var(--signal);
  border-radius: var(--r-bedien);
  background: var(--signal-hauch);
  font-size: .9375rem;
  color: var(--signal-tief);   /* 5,7:1 auf --signal-hauch */
}

.breitbild { margin-block: 0; }
.breitbild img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-bild); }
/* R89: Das Format folgt dem Bild, nicht dem Abschnitt. `laden-innen` ist
   1800 x 900 und passt auf 2:1. Das Werkstattbild ist 1400 x 876, also
   16:10; auf 2:1 gezwungen verlor es gemessen 25 Prozent der Hoehe. Der
   Fehler war mit Platzhaltern nicht messbar, weil die genau die Maße
   hatten, die das CSS verlangte. */
.breitbild-16-10 img { aspect-ratio: 16 / 10; }
.breitbild figcaption { margin-top: .8rem; font-size: .9375rem; color: var(--gedimmt); }

.hinweisband {
  border-left: 10px solid var(--signal);
  background: var(--signal-hauch);
  padding: 1.8rem 2rem;
  border-radius: 0 var(--r-karte) var(--r-karte) 0;
}
.hinweisband h2 { font-size: 1.4rem; color: var(--signal-tief); }
.hinweisband p:last-child { margin-bottom: 0; }

/* ---------- Unterseite Werkstatt ---------- */

.leistungsraster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  align-items: start;   /* R103 */
}
.leistung {
  border-top: 4px solid var(--signal);
  padding-top: 1.2rem;
}
.leistung h3 { font-size: 1.2rem; margin-bottom: .3em; }
.leistung p { margin-bottom: .5em; }
.leistung .dauer {
  display: inline-block;
  font-size: .875rem; font-weight: 600;
  color: var(--signal-tief);
  letter-spacing: .04em; text-transform: uppercase;
}

.preistabelle { width: 100%; border-collapse: collapse; }
.preistabelle caption { text-align: left; color: var(--gedimmt); font-size: .9375rem; padding-bottom: .9rem; }
.preistabelle th, .preistabelle td { padding: .95rem 1rem; border-bottom: 1px solid var(--linie); text-align: left; }
.preistabelle th { font-weight: 600; }
.preistabelle thead th {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 100%; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal-tief);
  border-bottom: 4px solid var(--signal);
}
.preistabelle td:last-child {
  text-align: right;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--signal-tief);
}
.preistabelle tbody tr:hover { background: var(--signal-hauch); }

.zeitleiste { list-style: none; padding: 0; margin: 0; }
.zeitleiste li {
  position: relative;
  padding-left: 3.2rem;
  padding-bottom: 2.2rem;
  margin: 0;
}
.zeitleiste li::before {
  content: "";
  position: absolute; left: 11px; top: 1.9rem; bottom: 0;
  width: 2px; background: var(--signal);
}
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li:last-child::before { display: none; }
.zeitleiste .punkt {
  position: absolute; left: 0; top: .3rem;
  width: 24px; height: 24px;
  background: var(--signal);
  color: #fff;
  font-size: .8125rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.zeitleiste h3 { font-size: 1.15rem; margin-bottom: .25em; }
.zeitleiste p { margin: 0; color: var(--gedimmt); }

.nicht-kasten {
  border: 3px solid var(--signal);
  padding: 1.8rem 2rem;
  border-radius: var(--r-karte);
}
.nicht-kasten h2 { font-size: 1.4rem; color: var(--signal-tief); }
.nicht-kasten ul { margin-bottom: 0; }

/* ---------- Unterseite Ueber uns ---------- */

.teambild img { width: 100%; aspect-ratio: 9 / 5; object-fit: cover; border-radius: var(--r-bild); }
.teambild figcaption { margin-top: .9rem; color: var(--gedimmt); font-size: .9375rem; }

.personen-gross {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
.person-gross {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 1.5rem;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 5px solid var(--signal);
  border-radius: var(--r-karte);
  padding: 1.5rem;
  box-shadow: var(--schatten);
}
.person-gross img {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--signal);
}
.person-gross h3 { margin-bottom: .15em; font-size: 1.2rem; }
.person-gross .rolle { color: var(--signal-tief); font-weight: 600; font-size: .9375rem; display: block; margin-bottom: .6rem; }
.person-gross p { font-size: 1rem; margin-bottom: 0; }

.personen-klein {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--linie);
  padding-top: 2.2rem;
}
.person-klein { display: flex; align-items: center; gap: 1rem; }
.person-klein .ki-bild { flex: none; }
.person-klein img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.person-klein strong { display: block; font-family: "Archivo", sans-serif; font-stretch: 105%; }
.person-klein span { color: var(--gedimmt); font-size: .9375rem; }

.jahresband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.jahresband > div { border-top: 4px solid var(--signal); padding-top: 1.1rem; }
.jahresband b {
  display: block;
  font-family: "Archivo", sans-serif; font-stretch: 118%; font-weight: 800;
  font-size: 1.7rem; color: var(--signal-tief); font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.jahresband p { font-size: 1rem; margin: 0; color: var(--gedimmt); }

.ausbildung {
  border: 2px solid var(--signal);
  border-left-width: 10px;
  background: var(--signal-hauch);
  border-radius: 0 var(--r-karte) var(--r-karte) 0;
  padding: 2rem 2.2rem;
  max-width: 52rem;
}
.ausbildung h2 { font-size: 1.5rem; color: var(--signal-tief); }
.ausbildung p:last-child { margin-bottom: 0; }

/* ---------- Unterseite Kontakt ---------- */

.anfahrt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.karte-platzhalter {
  background: var(--wechsel);
  border: 2px dashed var(--signal);
  border-radius: var(--r-bild);
  padding: 2.4rem 2rem;
  text-align: center;
}
.karte-platzhalter p { margin-inline: auto; }
.karte-rahmen iframe {
  width: 100%; height: 380px; border: 0;
  border-radius: var(--r-bild);
  display: block;
}
.karte-quelle { font-size: .8125rem; color: var(--gedimmt); margin-top: .6rem; }

.formular { display: grid; gap: 1.1rem; max-width: 34rem; }
.feld { display: grid; gap: .4rem; }
.feld label { font-weight: 600; font-size: .9375rem; }
.feld input, .feld select, .feld textarea {
  font: inherit;
  padding: .8rem .9rem;
  min-height: 48px;
  border: 1px solid var(--linie-fest);
  border-left: 4px solid var(--signal);
  border-radius: var(--r-bedien);
  background: var(--karte);
  color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--signal);
}
.feld textarea { min-height: 120px; resize: vertical; }
.formular-hinweis { font-size: .875rem; color: var(--gedimmt); max-width: 46ch; }
.formular-status { font-weight: 600; color: var(--signal-tief); min-height: 1.5em; }


/* Bildduo auf der Werkstattseite: ein hohes und ein breites Bild nebeneinander. */
.bildduo {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: center;
}
.bildduo > * { min-width: 0; }
.bildduo img { width: 100%; display: block; object-fit: cover; border-radius: var(--r-bild); }
/* Nicht mehr `img:first-child`: seit R109 steht jedes Bild in einem eigenen
   Rahmen, damit sein Kennzeichen an ihm haengt und nicht am Nachbarbild. */
.bildduo > :first-child img { aspect-ratio: 4 / 5; }
.bildduo > :last-child img { aspect-ratio: 4 / 3; }

/* Kontaktseite */
.zeitentabelle-hell th, .zeitentabelle-hell td { border-bottom-color: var(--linie); }
.zeitentabelle-hell .zu { color: var(--signal-tief); font-weight: 600; }
.telefon-mittel {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 112%; font-weight: 700; font-size: 1.4rem;
  font-variant-numeric: tabular-nums; text-decoration: none;
}
.anfahrt-bild {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--r-bild); margin-bottom: 1.8rem;
}
.hofbild { margin: 2.4rem 0 0; }
.hofbild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-bild); }
.hofbild figcaption { margin-top: .8rem; font-size: .9375rem; color: var(--gedimmt); }


/* ---------- Rechtstexte und 404 ---------- */

.rechtstext { padding-block: 3.5rem 5rem; }
.rechtstext .rahmen { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--rand); }
.rechtstext section { margin-bottom: 2.4rem; }
.rechtstext h2 { font-size: 1.3rem; margin-bottom: .5em; color: var(--signal-tief); }
.rechtstext .grau { color: var(--gedimmt); font-size: .9375rem; }

.fehlerseite { padding-block: 5rem 6rem; text-align: left; }
.fehlerseite .zahl {
  font-family: "Archivo", system-ui, sans-serif;
  font-stretch: 125%; font-weight: 800;
  font-size: clamp(4rem, 2rem + 9vw, 7rem); line-height: 1;
  color: var(--signal); margin: 0 0 1rem;
}
.fehlerseite ul { list-style: none; padding: 0; margin-top: 1.5rem; }
.fehlerseite li { border-bottom: 1px solid var(--linie); }
.fehlerseite li a { display: inline-flex; align-items: center; min-height: 52px; font-weight: 600; }

/* ---------- Bewegung: gestalteter Moment, kein Grundzustand (R84) ---------- */

.einblenden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.einblenden.sichtbar { opacity: 1; transform: none; }

@view-transition { navigation: auto; }   /* R36: Seitenwechsel nie selbst animieren */

@media (prefers-reduced-motion: reduce) {
  /* 24.08.2026, R36: Die Ueberblendung wird vom Browser nicht von selbst
     unterdrueckt - ohne diese Zeile bleibt sie die einzige Animation,
     die den Wunsch des Besuchers uebergeht. */
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .einblenden { opacity: 1; transform: none; transition: none; }
  .knopf, .menue a, .kachel-liste a { transition: none; }
}

/* ---------- Handy: eigene Entscheidungen, nicht nur gestapelt (R87) ---------- */

@media (max-width: 63.99em) {

  /* Inhaltsreiche Bausteine erst ab 1024 px zweispaltig (R40).
     Der Hero gehoert dazu: Bei 768 px war das Bild in der schmalen
     Spalte gemessen nur 316 px breit, damit ist der Zielbild-Satz
     „der erste Bildschirm traegt ein grosses Bild" verfehlt. Zwischen
     768 und 1023 px steht der Hero deshalb einspaltig mit dem breiten
     Bild ueber dem Text, erst darunter wechselt <picture> auf hochkant. */
  .hero { padding-block: 2.6rem 3.4rem; }
  .hero-innen { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .hero-bild { order: -1; margin-right: calc(var(--rand) * -1); }

  .werkstatt-block, .anfahrt-raster, .abschluss-raster, .warengruppe, .personen-gross {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }
  .warengruppe.gedreht .warengruppe-bild { order: 0; }
  .leistungsraster { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .bildduo { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .personen-klein { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 47.99em) {
  :root { --rand: 1.15rem; --abstand: 3rem; }

  .abschnitt { padding-block: var(--abstand); }
  .hero { padding-block: 2.2rem 3rem; }

  /* Handy-Entscheidung 3: Das Hero-Bild wechselt ins Hochformat 4:5.
     Die Fassung wechselt ueber <picture>, nicht ueber display:none.
     Sonst laedt der Browser beide Dateien und wirft eine davon weg. */
  .hero-innen { gap: 2rem; }
  .hero-bild img { aspect-ratio: 4 / 5; box-shadow: var(--schatten); }
  .hero-fuehrung { font-size: 1.125rem; }

  /* R108 (04.09.2026): Gleichfoermige Kartengruppen stehen am Telefon
     nebeneinander, nicht untereinander. Das ersetzt die frueheren
     Handy-Entscheidungen 1 (Zahlenband erst ab 360 px zweispaltig) und 2
     ("die fuenf kompakten Kacheln werden eine Liste") - Herleitung:
     Regelwerk R108.
     minmax(0, 1fr) statt 1fr: 1fr ist minmax(auto, 1fr), die Spalte wuerde
     sonst nie schmaler als ihr laengstes Wort.
     Der Griff `:last-child:nth-child(odd)` spannt die letzte Karte ueber
     beide Spalten, falls sie sonst allein stuende (R82) - und zwar
     unabhaengig davon, wie viele Karten heute im HTML stehen.
     Nicht umgestellt: .warengruppe, .werkstatt-block, .anfahrt-raster,
     .personen-gross und .abschluss-raster sind inhaltsreiche, asymmetrische
     Bausteine (Text neben Bild) - dafuer gilt R40, nicht R108. .schrittleiste
     und .zeitleiste sind textreiche Ablaufschritte auf einer Zeitleiste und
     bleiben untereinander. */

  /* Handy-Entscheidung 1: Zahlenband wird 2 x 2 mit waagerechten Trennlinien. */
  .zahlenband-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .zahlenband-zeile > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .zahlenband-zeile > div {
    padding: 1.1rem 1rem 1.1rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--linie);
    padding-left: 0;
  }
  .zahlenband-zeile > div:nth-child(2n) { padding-left: 1rem; border-left: 1px solid var(--linie); }
  .zahlenband b { font-size: 1.65rem; }

  /* Die grosse Kachel steht weiter allein ueber der Gruppe (asymmetrischer
     Baustein, R40). Die fuenf kompakten Kacheln stehen nach R108 zu zweit
     nebeneinander - und behalten dabei ihre Beischrift, die in der frueheren
     Listenfassung am Telefon ausgeblendet war. */
  .sortiment-raster { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .kachel-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .kachel-liste > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kachel-liste a { min-height: 76px; padding: .85rem 0; align-items: start; }
  .kachel-liste strong { font-size: 1rem; }
  .kachel-liste small { font-size: .875rem; }
  .kachel-liste .pfeil { align-self: center; }

  /* Handy-Entscheidung 4: Schrittleiste klappt in eine senkrechte Zeitleiste. */
  .schrittleiste {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 2px solid var(--graphit);
    padding-top: 1.6rem;
  }
  .schrittleiste > li {
    position: relative;
    padding-left: 3.2rem;
    padding-bottom: 1.8rem;
  }
  .schrittleiste > li::before {
    content: "";
    position: absolute; left: 13px; top: 2.4rem; bottom: 0;
    width: 2px; background: var(--linie);
  }
  .schrittleiste > li:last-child { padding-bottom: 0; }
  .schrittleiste > li:last-child::before { display: none; }
  .schritt-ziffer {
    position: absolute; left: 0; top: 0;
    font-size: 1.5rem;
  }

  /* Handy-Entscheidung 5: Preisliste ohne Fuehrungspunkte, Betrag darunter. */
  .preisliste-zeile { display: block; padding: .9rem 0; }
  .preisliste-zeile .punkte { display: none; }
  .preisliste-zeile dd { margin-top: .2rem; font-size: 1.15rem; color: var(--signal-tief); }

  .bildpaar { padding-bottom: 3.2rem; padding-right: 2rem; }
  .zitat-gross { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .zitat-gross img { width: 72px; height: 72px; }
  .jahresband { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .jahresband > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .jahresband b { font-size: 1.45rem; }
  .jahresband p { font-size: .9375rem; }

  /* R108: die vier kleinen Portraets stehen zu zweit. Damit der Name neben
     dem 72-px-Kreis nicht auf 78 px zusammengedrueckt wird, steht er in der
     schmalen Spalte unter dem Bild statt daneben. */
  .personen-klein { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .personen-klein > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .person-klein { flex-direction: column; align-items: flex-start; gap: .65rem; }

  /* R108: die acht Werkstattleistungen stehen zu zweit. */
  .leistungsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .leistungsraster > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .leistung { padding-top: 1rem; }
  .leistung h3 { font-size: 1.05rem; }
  .leistung p { font-size: .9375rem; }
  .leistung .dauer { font-size: .8125rem; letter-spacing: .02em; }
  .person-gross { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .person-gross img { width: 96px; height: 96px; }
  .hinweisband, .nicht-kasten, .ausbildung { padding: 1.4rem 1.3rem; }
  .karte-rahmen iframe { height: 300px; }

  /* R102: mehr als drei Spalten gibt es hier nicht, die Preistabelle
     bleibt zweispaltig und wird nur enger gesetzt. */
  .preistabelle th, .preistabelle td { padding: .8rem .5rem; }
}

/* Die frueheren Einspalter unterhalb 360 px (Zahlenband, Jahresband) sind
   nach R108 entfallen: mit minmax(0, 1fr) tragen beide Gruppen auch 320 px
   zweispaltig, gemessen am Pruefstand. */

@media print {
  body { background: #fff; }
}

.fehler-knopf { margin-top: 2rem; }

/* R109/S36 (04.09.2026): Kennzeichen am KI-Bild. Echter Text im DOM, deutsch,
   auf deckendem Grund (Kontrast nach R30 gegen den Schildgrund, nicht gegen
   das Foto darunter). Der Elternkasten des Kennzeichens wird ueber
   :where(:has()) positioniert, ohne bestehende position-Regeln zu
   ueberstimmen. Der Eckradius ist --r-bedien (4 px), also die kantigste
   Stufe der Werkstattbuch-Formensprache - wie an Knopf und Eingabefeld. */
:where(:has(> .ki-zeichen)) { position: relative; }
.ki-zeichen {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 3;
  background: var(--graphit);
  color: #ffffff;
  font-size: .75rem;
  line-height: 1;
  padding: .32rem .6rem;
  border-radius: var(--r-bedien);
  letter-spacing: .02em;
  pointer-events: none;
}

/* Hero: oben links stossen Bildkante und Ueberschrift zusammen, dort wuerde
   das Schild das Motiv anschneiden. Es steht deshalb unten rechts. z-index 3,
   weil <picture> und Bild im Hero selbst auf z-index 1 liegen. */
.hero-bild .ki-zeichen { top: auto; left: auto; right: .75rem; bottom: .75rem; }

/* Zwei Fotos in einem Rahmen: sonst laegen beide Schilder auf demselben
   Punkt. Im .bildpaar sitzt das zweite Bild absolut unten rechts, dorthin
   wandert auch sein Schild. Im .bildduo bekommt jedes Bild einen eigenen
   Rahmen (.ki-bild im HTML). */
.bildpaar > .ki-zeichen:nth-of-type(2) { top: auto; left: auto; right: .6rem; bottom: .6rem; }

/* .ki-bild ist der Rahmen, an dem ein einzelnes Kennzeichen haengt, wo der
   Elternkasten mehrere Bilder traegt. */
.ki-bild { position: relative; display: block; }

/* Runde Portraets: ein Schild in der Bildecke laege auf der leeren Flaeche
   neben dem Kreis, nicht auf dem Bild. Es steht deshalb unter dem Portrait
   und wird enger gesetzt, damit es nicht breiter wird als das Bild. */
.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;
}

/* .person-klein span faerbt jede Spanne im Kasten grau (--gedimmt) und ist
   spezifischer als .ki-zeichen. Ohne diese Zeile stuende Grau auf Graphit:
   2,14:1, durchgefallen nach R30. */
.person-klein .ki-zeichen { color: #ffffff; }

html:not(.js) .einblenden { opacity: 1; transform: none; }
/* Nachtraege aus dem Messlauf vom 18.09.2026 */
main a[href^="mailto:"], main a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 48px; }
input, select, textarea { max-width: 100%; min-width: 0; }
main * { min-width: 0; }
@media (max-width: 22.5em) { body { font-size: 1rem; } main strong, main span, main dt { overflow-wrap: anywhere; } }