/* =====================================================================
   Ramsauer Radsport — Startseite, Redesign 2026-09
   Werkstatt bei Tageslicht: Papier, Tinte wie Kettenfett, Logo-Gelb als Signal.
   Gelb trägt auf Hell nie Text — nur Flächen, Markierungen, Fokus auf Dunkel.
   ===================================================================== */

@font-face {
  font-family: "Anybody";
  src: url("schriften/anybody.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Anybody";
  src: url("schriften/anybody-kursiv.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 50% 150%; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("schriften/instrument-sans.woff2") format("woff2");
  /* optional statt swap am 29.09.2026 gemessen: LCP unverändert 3,3 s, deshalb zurück auf swap. */
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --papier: #F2EEE6;
  --papier-2: #E6DFD1;
  --tinte: #16140F;
  --tinte-2: #221F19;
  --grau: #595347;          /* 6,5:1 auf Papier, 5,7:1 auf Papier-2 */
  --hell-grau: #BDB6A7;     /* 9,4:1 auf Tinte */
  --gelb: #FFD200;          /* Logo-Gelb, Live-Theme */
  --gold-tief: #6B5200;     /* Gelb, das auf Hell lesbar ist: 6,9:1 */
  --linie: rgba(22, 20, 15, .16);
  --fokus: var(--tinte);
  --display: "Anybody", "Arial Narrow", sans-serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: 16px;
  --breite: 1240px;
  --federn: cubic-bezier(.2, .75, .15, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; scroll-padding-bottom: 76px; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 1.0625rem/1.62 var(--text);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
/* Das Netz gegen Seitenscrollen: auf main, nie auf html/body (CLAUDE.md §4) */
main { overflow-x: clip; display: block; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 1; }
h2 {
  font-size: clamp(2.05rem, 7.4vw, 4.4rem); font-stretch: 78%; letter-spacing: -.012em;
  text-transform: uppercase; margin-bottom: .45em; hyphens: auto; overflow-wrap: break-word;
}
h3 { font-size: 1.45rem; font-stretch: 88%; text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 2px; }
.dunkel, .hero, .kopf:not(.ist-fest), .schublade, .fuss { --fokus: var(--gelb); }

.wrap { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.sektion { padding: clamp(4.5rem, 11vw, 9rem) 0; position: relative; }
.dunkel { background: var(--tinte); color: var(--papier); }

.sprung {
  position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--gelb); color: var(--tinte);
  padding: .8rem 1.2rem; font-weight: 700; text-decoration: none; min-height: 44px;
}
.sprung:focus { top: 12px; }

.kicker {
  font: 600 .8rem/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase;
  color: var(--grau); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .7rem;
}
.kicker::before { content: ""; width: 28px; height: 3px; background: var(--gelb); flex: none; }
.kicker--hell { color: var(--hell-grau); }
.lead { font-size: clamp(1.08rem, 2.2vw, 1.25rem); line-height: 1.55; max-width: 38em; }
.zugabe { color: var(--grau); font-size: .98rem; max-width: 34em; border-left: 3px solid var(--gelb); padding-left: .9rem; }
.dunkel .zugabe { color: var(--hell-grau); }

.textlink {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em;
}
.textlink svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--federn); }
.textlink:hover svg { transform: translateX(4px); }
.lead a, .schritt a, .akkordeon a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---------- Icons: ein Strich, runde Enden, zeichnen sich beim Erscheinen ---------- */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--gross { width: 40px; height: 40px; stroke-width: 1.3; }
.zeichne * { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
html.js .zeichne * { stroke-dashoffset: 1; }
html.js .ist-da .zeichne *, html.js .zeichne.ist-da * , html.alles-da .zeichne * {
  stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6, .1, .2, 1) calc(var(--i, 0) * 90ms + 250ms);
}
.kat:hover .zeichne *, .dienst:hover .zeichne *, .loesung li:hover .zeichne *, .schritt:hover .zeichne *, .werk-liste li:hover .zeichne * {
  animation: nachzeichnen 1s cubic-bezier(.6, .1, .2, 1);
}
@keyframes nachzeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: .75rem 1.45rem; border-radius: 999px; border: 2px solid transparent;
  font: 650 1rem/1.1 var(--text); text-decoration: none; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s, transform .5s var(--federn);
  will-change: transform;
}
.knopf-pfeil { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--federn); }
.knopf:hover .knopf-pfeil { transform: translateX(5px); }
.knopf--gelb { background: var(--gelb); color: var(--tinte); }
.knopf--gelb:hover { background: #FFE14D; }
.knopf--dunkel { background: var(--tinte); color: var(--papier); }
.knopf--dunkel:hover { background: #34302A; }
.knopf--rand { border-color: var(--tinte); color: var(--tinte); background: transparent; }
.knopf--rand:hover { background: var(--tinte); color: var(--papier); }
.knopf--rand-hell { border-color: rgba(242, 238, 230, .85); color: var(--papier); background: transparent; }
.knopf--rand-hell:hover { background: var(--papier); color: var(--tinte); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ---------- Auftritt und Reveals: gestaffelt, nie im Gleichschritt ---------- */
html.js .zeige { opacity: 0; transform: translate3d(0, 26px, 0); }
html.js .zeige.ist-da {
  opacity: 1; transform: none;
  transition: opacity calc(620ms + var(--i, 0) * 55ms) ease calc(var(--i, 0) * 85ms),
              transform calc(900ms + var(--i, 0) * 70ms) var(--federn) calc(var(--i, 0) * 85ms);
}
html.js .zeige--bild { opacity: 0; clip-path: inset(12% 0 0 0); transform: scale(1.04); }
html.js .zeige--bild.ist-da {
  opacity: 1; clip-path: inset(0 0 0 0); transform: none;
  transition: opacity .7s ease calc(var(--i, 0) * 90ms), clip-path 1.25s var(--federn) calc(var(--i, 0) * 90ms),
              transform 1.6s var(--federn) calc(var(--i, 0) * 90ms);
}
html.js .auftritt { opacity: 0; transform: translate3d(0, 22px, 0); }
/* Hero-Text sofort zeichnen, nur einschieben: sonst zählt das grösste Element erst nach der
   Einblendung als gemalt (LCP 3,1 s, davon 2,6 s Render-Verzögerung, gemessen 29.09.2026). */
html.js .hero-titel .auftritt, html.js .hero-unterzeile.auftritt, html.js .hero-eyebrow.auftritt { opacity: 1; }
html.js .hero.bereit .auftritt {
  opacity: 1; transform: none;
  transition: opacity calc(700ms + var(--t) * 60ms) ease calc(var(--t) * 150ms + 120ms),
              transform calc(1000ms + var(--t) * 80ms) var(--federn) calc(var(--t) * 150ms + 120ms);
}
html.alles-da .zeige, html.alles-da .auftritt { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* ================= KOPF ================= */
.kopf { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--papier); transition: background-color .35s, color .35s, box-shadow .35s; }
.kopf.ist-fest { background: var(--papier); color: var(--tinte); box-shadow: 0 1px 0 var(--linie); }
.kopf-innen {
  width: min(100% - 2 * var(--rand), 1400px); margin-inline: auto; min-height: 72px;
  display: flex; align-items: center; gap: 1rem;
}
.marke { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; margin-right: auto; padding: 6px 0; }
.marke-wort { font: 900 1.55rem/1 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: .01em; }
.marke-zusatz { font: 600 .68rem/1.2 var(--text); letter-spacing: .18em; text-transform: uppercase; margin-top: .3rem; }
.marke-wort::after { content: ""; display: inline-block; width: .32em; height: .32em; background: var(--gelb); margin-left: .12em; vertical-align: baseline; }
.nav { display: none; }
.kopf-tel { display: none; align-items: center; gap: .5rem; min-height: 44px; text-decoration: none; font-weight: 600; }
.menue-knopf {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; min-width: 44px; padding: 0 .9rem;
  border: 2px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer; font-weight: 650;
}
.menue-striche { display: grid; gap: 5px; width: 18px; }
.menue-striche i { display: block; height: 2px; background: currentColor; }
.menue-striche i:last-child { width: 12px; }

@media (min-width: 1100px) {
  .menue-knopf { display: none; }
  .nav { display: block; }
  .kopf-tel { display: inline-flex; }
  .nav-liste { display: flex; align-items: center; gap: .3rem; }
  .nav-liste > li { position: relative; display: flex; align-items: center; }
  .nav-liste > li > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; text-decoration: none; font-weight: 600; }
  .nav-liste > li > a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
  .nav-auf { width: 44px; height: 44px; margin-left: -.6rem; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
  .nav-auf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s; }
  .nav-auf[aria-expanded="true"] svg { transform: rotate(180deg); }
  .nav-unter {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; display: none;
    background: var(--tinte); color: var(--papier); padding: .6rem; border-top: 3px solid var(--gelb);
  }
  .nav-gruppe.offen .nav-unter { display: grid; }
  .nav-unter a { display: flex; align-items: center; min-height: 44px; padding: 0 .8rem; text-decoration: none; }
  .nav-unter a:hover { background: var(--gelb); color: var(--tinte); }
  .nav-unter a:focus-visible { outline-color: var(--gelb); }
}

/* ---------- Schublade (Mobilmenü): scrollt selbst ---------- */
.schublade { position: fixed; inset: 0; z-index: 90; background: var(--tinte); color: var(--papier); overflow-y: auto; overscroll-behavior: contain; }
.schublade[hidden] { display: none; }
.schublade-innen { width: min(100% - 2 * var(--rand), 640px); margin-inline: auto; padding: 5.5rem 0 3rem; }
.schublade-zu { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--papier); background: var(--tinte); cursor: pointer; display: grid; place-items: center; }
.schublade-zu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.schublade-titel { margin: 1.2rem 0 .6rem; }
.schublade-titel a { font: 800 2rem/1 var(--display); font-stretch: 80%; text-transform: uppercase; text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.schublade-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.schublade-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid rgba(242, 238, 230, .45); border-radius: 999px; text-decoration: none; }
.schublade-chips a:hover { background: var(--gelb); color: var(--tinte); }
.schublade-fuss { display: grid; gap: .7rem; margin-top: 2.5rem; }
html.menue-offen { overflow: hidden; }

/* ================= HERO ================= */
.hero {
  position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7.5rem 0 5.5rem; background: var(--tinte); color: #FFFDF8; overflow: hidden;
}
/* Das Foto wird per Filter abgedunkelt (Schleier unter der Kulisse), der zweite
   Schleier liegt über der Kulisse. Kontrast gerechnet gegen ein weisses Foto:
   Weiss 7,5:1, Gelb 5,1:1 — siehe MESSPROTOKOLL.md. */
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; z-index: -3; filter: brightness(.42) saturate(.9); }
.hero-kulisse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-schleier { position: absolute; inset: 0; z-index: -1; background: rgba(18, 16, 12, .25); }
.hero-inhalt { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; position: relative; }
.hero-eyebrow { display: flex; align-items: center; gap: .6rem; font: 600 .8rem/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.3rem; }
.hero-eyebrow .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gelb); flex: none; }
.hero-titel {
  font-family: var(--display); font-weight: 850; font-stretch: 70%; text-transform: uppercase;
  font-size: clamp(2.6rem, 12.4vw, 8.4rem); line-height: .9; letter-spacing: -.012em; margin-bottom: 1.4rem;
}
.hero-titel .zeile { display: block; }
.hero-titel .zeile--anders {
  font-style: italic; font-weight: 330; font-stretch: 122%; text-transform: none; color: var(--gelb);
  font-size: .8em; letter-spacing: -.02em; margin-top: .12em;
}
.hero-unterzeile { max-width: 34em; font-size: clamp(1.02rem, 2.1vw, 1.2rem); line-height: 1.55; color: #F3EFE7; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.6rem; }
.hero-schluss { font-size: .92rem; color: #E8E3D9; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; margin: 0; }
.hero-schluss .sterne { color: var(--gelb); }
.hero-schluss .trenner { color: var(--gelb); }
.hero-weiter {
  position: absolute; right: var(--rand); bottom: 3.2rem; display: none; align-items: center; gap: .5rem;
  font: 600 .75rem/1 var(--text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; min-height: 44px;
}
.hero-weiter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; animation: nicken 2.4s ease-in-out infinite; }
@keyframes nicken { 50% { transform: translateY(5px); } }
.hero-kante { position: absolute; left: 0; bottom: -1px; width: 100%; height: 26px; }
.hero-kante path { fill: var(--papier); }
@media (min-width: 760px) {
  .hero { padding-bottom: 6.5rem; }
  .hero-weiter { display: inline-flex; }
  .hero-inhalt > * { max-width: 56%; }
  .hero-inhalt > .hero-titel { max-width: none; }
}

/* ================= VERTRAUENSANKER ================= */
.anker { position: relative; background: var(--papier); padding-top: 1.4rem; }
.ticker-rahmen { position: relative; z-index: 3; overflow: hidden; padding: 12px 0; margin-top: -6px; }
.ticker {
  position: relative; background: var(--gelb); color: var(--tinte); overflow: hidden;
  transform: rotate(-1.6deg); margin: 0 -24px; padding: .85rem 0;
}
.ticker-spur { display: flex; width: max-content; animation: laufen 42s linear infinite; }
.ticker-liste { display: flex; flex: none; }
.ticker-liste li { font: 850 1.35rem/1 var(--display); font-stretch: 92%; text-transform: uppercase; padding: 0 1.1rem; display: flex; align-items: center; gap: 2.2rem; white-space: nowrap; }
.ticker-liste li::after { content: ""; width: 12px; height: 12px; border: 2.5px solid var(--tinte); border-radius: 50%; }
@keyframes laufen { to { transform: translate3d(-50%, 0, 0); } }
/* Laufband anhalten (WCAG 2.2.2): Knopf, dazu Pause bei Zeiger und Fokus */
.ticker:hover .ticker-spur, .ticker:focus-within .ticker-spur, .ticker-rahmen.steht .ticker-spur { animation-play-state: paused; }
.ticker-pause { position: absolute; z-index: 4; right: var(--rand, 16px); top: -30px; min-height: 44px; padding: 0 .9rem; font: 600 .8rem/1 var(--text); background: var(--tinte); color: var(--papier); border: 0; border-radius: 999px; cursor: pointer; }
.ticker-pause:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.anker-buehne { position: relative; isolation: isolate; color: var(--papier); padding: 4.5rem 0 5rem; margin-top: -1.5rem; }
.anker-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.anker-schleier { position: absolute; inset: 0; background: rgba(22, 20, 15, .84); z-index: -1; }
.anker-raster { display: grid; gap: 2.4rem; }
.zahl:nth-child(2) { margin-left: 16%; }
.zahl:nth-child(3) { margin-left: 5%; }
.zahl:nth-child(4) { margin-left: 22%; }
.zahl-wert { font: 800 clamp(3.4rem, 15vw, 6.6rem)/.92 var(--display); font-stretch: 118%; color: var(--gelb); margin: 0 0 .35rem; letter-spacing: -.02em; white-space: nowrap; }
.zahl--wort .zahl-wert { font-size: clamp(2.3rem, 9.6vw, 4.4rem); font-style: italic; font-weight: 500; }
.zahl-wert .stern { font-size: .55em; vertical-align: .45em; }
.zahl-text { max-width: 17em; color: #E9E4DA; margin: 0; }
.anker-zugabe { color: var(--hell-grau); border-left: 3px solid var(--gelb); padding-left: .9rem; max-width: 30em; margin: 0; }
@media (min-width: 700px) {
  .anker-raster { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .zahl:nth-child(n) { margin-left: 0; }
  .zahl:nth-child(2) { margin-top: 3.5rem; }
  .zahl:nth-child(4) { margin-top: 3.5rem; }
  .anker-zugabe { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .anker-raster { grid-template-columns: repeat(4, 1fr); }
  /* «1937» ist breiter als die frühere «89»: bei vier Spalten gemessen 1287 > 1240 px (29.09.2026) */
  .zahl { min-width: 0; }
  .zahl-wert { font-size: clamp(3.4rem, 5vw, 4.9rem); }
  .zahl--wort .zahl-wert { font-size: clamp(2.3rem, 3.6vw, 3.6rem); }
  .zahl:nth-child(2) { margin-top: 4.5rem; }
  .zahl:nth-child(3) { margin-top: 1.5rem; }
  .zahl:nth-child(4) { margin-top: 5.5rem; }
  .anker-zugabe { grid-column: 2 / 4; margin-top: 1rem; }
}

/* ================= PROBLEM UND LÖSUNG ================= */
.problem-raster { display: grid; gap: 3.5rem; }
.problem h2 { font-stretch: 72%; max-width: 15ch; }
.problem-stimme { font: italic 420 clamp(1.25rem, 3.4vw, 1.6rem)/1.4 var(--display); font-stretch: 96%; max-width: 30em; }
.loesung { display: grid; gap: 1.3rem; margin: 1.6rem 0 1.8rem; }
.loesung li { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
.loesung strong { font-weight: 700; }
.nicht-dabei { background: var(--papier-2); padding: 1rem 1.2rem; max-width: 34em; margin: 0; }
.nicht-dabei span { font-weight: 700; }
.bildpaar { position: relative; padding-bottom: 1rem; }
.bildpaar-hinten { width: 88%; margin-left: auto; aspect-ratio: 3 / 2; overflow: hidden; }
.bildpaar-hinten img, .bildpaar-vorne img { width: 100%; height: 100%; object-fit: cover; }
.bildpaar-vorne {
  width: 48%; aspect-ratio: 4 / 5; overflow: hidden; position: relative; margin-top: -26%;
  box-shadow: 14px 14px 0 var(--gelb); border: 6px solid var(--papier);
}
@media (min-width: 1000px) {
  .problem-raster { grid-template-columns: 1.05fr 1fr; gap: 5rem; align-items: center; }
  .bildpaar { margin-top: 3rem; }
}

/* ================= SORTIMENT ================= */
.sortiment { background: var(--papier); padding-top: 2rem; }
.kopfzeile { max-width: 46rem; margin-bottom: 3.5rem; }
.kopfzeile .zugabe { margin-top: 1.4rem; }
.kat-raster { display: grid; gap: 3rem; }
.kat { display: block; position: relative; text-decoration: none; color: var(--tinte); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--federn); }
.kat-bild { overflow: hidden; background: var(--papier-2); }
.kat-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--federn); }
.kat:hover .kat-bild img, .beitrag:hover img, .amflow-rahmen:hover img { transform: scale(1.035); }
.kat--emtb { width: 88%; } .kat--emtb .kat-bild { aspect-ratio: 4 / 5; }
.kat--city .kat-bild { aspect-ratio: 3 / 2; }
.kat--road { width: 74%; margin-left: auto; } .kat--road .kat-bild { aspect-ratio: 1 / 1; }
.kat--cargo .kat-bild { aspect-ratio: 16 / 9; }
.kat-text {
  position: relative; background: var(--papier); margin: -2.6rem 0 0 .9rem; padding: 1rem 1.2rem 0;
  width: fit-content; max-width: calc(100% - 1.8rem); display: grid; gap: .25rem;
}
.kat--city .kat-text, .kat--road .kat-text { margin-left: auto; margin-right: .9rem; }
.kat-text .ico { margin-bottom: .35rem; }
.kat-etikett { font: 600 .74rem/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
.kat-text p { margin: .15rem 0 0; color: var(--grau); }
.kat h3 { font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
.kat::after { content: ""; position: absolute; left: .9rem; bottom: -.9rem; width: 0; height: 4px; background: var(--gelb); transition: width .6s var(--federn); }
.kat:hover::after, .kat:focus-visible::after { width: 4.5rem; }
@media (min-width: 1000px) {
  .kat-raster { grid-template-columns: repeat(12, 1fr); column-gap: 1.5rem; row-gap: 0; }
  .kat--emtb { grid-column: 1 / 6; grid-row: 1 / 3; width: auto; }
  .kat--city { grid-column: 7 / 13; grid-row: 1; margin-top: 4rem; }
  .kat--road { grid-column: 8 / 12; grid-row: 2; margin-top: 3rem; width: auto; }
  .kat--cargo { grid-column: 2 / 10; grid-row: 3; margin-top: 3rem; }
}

/* ================= BESTAND ONLINE ================= */
.bestand { padding-top: 0; background: var(--papier); }
.bestand-streifen { aspect-ratio: 2 / 1; overflow: hidden; }
.bestand-streifen img { width: 100%; height: 100%; object-fit: cover; }
.bestand-karte { position: relative; background: var(--papier-2); padding: 2rem 1.3rem; margin-top: -3rem; max-width: 50rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chips li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border: 1.5px solid var(--tinte); border-radius: 999px; font-weight: 600; font-size: .95rem; }
.chips li::before { content: ""; width: 8px; height: 8px; background: var(--tinte); border-radius: 50%; }
@media (min-width: 900px) {
  .bestand-streifen { aspect-ratio: 7 / 3; }
  .bestand-karte { margin: -7rem 0 0 6%; padding: 2.6rem 3rem; }
}

/* ================= AMFLOW ================= */
.amflow { overflow: hidden; }
.riesenwort {
  position: absolute; top: 2.2rem; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none;
  font: 900 15vw/.8 var(--display); font-stretch: 140%; color: transparent;
  -webkit-text-stroke: 1px rgba(242, 238, 230, .2); letter-spacing: -.02em; white-space: nowrap;
}
.amflow-raster { position: relative; display: grid; gap: 3rem; padding-top: 3.5rem; }
.amflow-rahmen { background: var(--tinte-2); padding: 1.2rem .6rem; overflow: hidden; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--federn); }
.amflow-rahmen img { width: 100%; aspect-ratio: 1600 / 907; object-fit: contain; transition: opacity .35s, transform 1.3s var(--federn); }
.amflow-rahmen img.wechselt { opacity: 0; }
.farben { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.farbe {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; cursor: pointer;
  border-radius: 999px; border: 1.5px solid rgba(242, 238, 230, .5); background: transparent; font-weight: 600; font-size: .92rem;
}
.farbe i { width: 14px; height: 14px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 1.5px rgba(242, 238, 230, .7); }
.farbe[aria-pressed="true"] { background: var(--gelb); color: var(--tinte); border-color: var(--gelb); }
.farbe[aria-pressed="true"] i { box-shadow: 0 0 0 1.5px var(--tinte); }
.haken-liste { display: grid; gap: .8rem; margin-top: 1.4rem; }
.haken-liste li { position: relative; padding-left: 1.9rem; }
.haken-liste li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 8px; border-left: 2.5px solid var(--gelb); border-bottom: 2.5px solid var(--gelb); transform: rotate(-45deg); }
.amflow h2 { font-stretch: 74%; }
@media (min-width: 1000px) {
  .amflow-raster { grid-template-columns: 1.25fr 1fr; gap: 4.5rem; align-items: center; padding-top: 6rem; }
  .amflow-buehne { margin-left: -3%; }
}

/* ================= WERKSTATT ================= */
.werkstatt { background: var(--papier-2); }
.werkstatt-raster { display: grid; gap: 3.5rem; }
.werk-liste { display: grid; gap: .9rem; margin-top: 1.6rem; }
.werk-liste li { display: grid; grid-template-columns: 24px 1fr; gap: .9rem; align-items: start; padding-bottom: .9rem; border-bottom: 1px solid var(--linie); }
.werkstatt-bild { position: relative; width: 72%; margin-left: auto; }
.werkstatt-bild img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.stempel { position: absolute; left: -2rem; top: 12%; width: 118px; height: 118px; border-radius: 50%; background: var(--gelb); color: var(--tinte); display: grid; place-items: center; transition: transform 1.2s var(--federn); }
.werkstatt-bild:hover .stempel { transform: rotate(-40deg); }
.stempel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stempel text { font: 700 9.6px var(--text); letter-spacing: .14em; fill: var(--tinte); }
.stempel span { font: 700 .56rem/1.15 var(--text); text-transform: uppercase; letter-spacing: .03em; text-align: center; width: 74px; }
@media (min-width: 1000px) {
  .werkstatt-raster { grid-template-columns: 1.4fr 1fr; gap: 6rem; align-items: center; }
  .werkstatt-bild { width: 82%; margin-top: -9rem; }
}

/* ================= MARKEN ================= */
.marken-raster { display: grid; gap: 2.5rem; }
.marken-bild { width: 58%; margin-top: 1rem; aspect-ratio: 3 / 4; overflow: hidden; }
.marken-bild img { width: 100%; height: 100%; object-fit: cover; }
.marken-liste { border-bottom: 1px solid var(--tinte); counter-reset: none; }
.marken-liste a {
  position: relative; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .6rem; row-gap: .2rem;
  padding: 1.1rem .4rem; border-top: 1px solid var(--tinte); text-decoration: none; isolation: isolate;
}
.marken-liste a::before { content: ""; position: absolute; inset: 0; background: var(--gelb); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--federn); z-index: -1; }
.marken-liste a:hover::before, .marken-liste a:focus-visible::before { transform: scaleX(1); }
.marken-liste .nr { font: 700 .85rem/2.2 var(--text); color: var(--grau); grid-row: span 2; }
.marken-liste a:hover .nr { color: var(--tinte); }
.marken-liste .name { font: 850 clamp(1.7rem, 6vw, 3.1rem)/1 var(--display); font-stretch: 84%; text-transform: uppercase; transition: transform .55s var(--federn); overflow-wrap: anywhere; }
.marken-liste a:hover .name { transform: translateX(8px); }
.marken-liste .was { color: var(--grau); font-size: .98rem; }
.marken-liste a:hover .was { color: var(--tinte); }
.marken-liste .zur { display: none; }
@media (min-width: 1000px) {
  .marken-raster { grid-template-columns: 4fr 8fr; gap: 4rem; }
  .marken-bild { width: 100%; margin-top: 2rem; }
  .marken-liste { margin-top: 1.5rem; }
  .marken-liste a { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr) auto; align-items: baseline; column-gap: 1.2rem; }
  .marken-liste .nr { grid-row: auto; }
  .marken-liste .zur { display: inline-flex; font-weight: 600; font-size: .9rem; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .45s var(--federn); }
  .marken-liste a:hover .zur, .marken-liste a:focus-visible .zur { opacity: 1; transform: none; }
}

/* ================= DIENSTLEISTUNGEN ================= */
.dienste { overflow: hidden; }
.dienste-oben { display: grid; gap: 2rem; }
.dienste-bild { aspect-ratio: 2 / 1; overflow: hidden; }
.dienste-bild img { width: 100%; height: 100%; object-fit: cover; }
.riesenwort--klein { position: relative; z-index: 1; top: 0; text-align: left; font-size: 15vw; font-stretch: 125%; margin: -.38em 0 0; }
.dienste-raster { display: grid; gap: 2.6rem; margin-top: 2rem; }
.dienst { display: grid; gap: .7rem; text-decoration: none; padding-top: 1.3rem; border-top: 2px solid var(--gelb); max-width: 30rem; }
.dienst--b { margin-left: 10%; }
.dienst .nr { font: 800 .9rem/1 var(--display); color: var(--gelb); letter-spacing: .1em; }
.dienst .ico { color: var(--gelb); }
.dienst p { color: #E4DED3; margin: 0; }
.dienst .mehr { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--gelb); font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.dienst:hover h3 { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 3px; text-underline-offset: .15em; }
@media (min-width: 1000px) {
  .dienste-oben { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: end; }
  .dienste-kopf { padding-bottom: 3rem; }
  .riesenwort--klein { font-size: 12.5vw; margin-top: -.42em; text-align: right; }
  .dienste-raster { grid-template-columns: repeat(12, 1fr); column-gap: 2rem; margin-top: 2.5rem; }
  .dienst--a { grid-column: 1 / 5; }
  .dienst--b { grid-column: 5 / 9; margin: 5rem 0 0; }
  .dienst--c { grid-column: 9 / 13; margin-top: 2rem; }
}

/* ================= STIMMEN ================= */
.stimmen-raster { display: grid; gap: 3rem; }
.stimmen-bild { width: 64%; aspect-ratio: 2 / 3; overflow: hidden; }
.stimmen-bild img { width: 100%; height: 100%; object-fit: cover; }
.zitat { margin: 0 0 1.8rem; }
.zitat blockquote { margin: 0; }
.zitat blockquote p { font: italic 450 1.3rem/1.35 var(--display); font-stretch: 95%; margin: .3rem 0 .6rem; }
.zitat--gross blockquote p { font-size: clamp(1.6rem, 4.6vw, 2.5rem); line-height: 1.18; font-weight: 500; }
.zitat figcaption { font-size: .92rem; color: var(--grau); font-weight: 600; }
.zitat-sterne { color: var(--gold-tief); letter-spacing: .15em; margin: 0; }
.zitat-paar { display: grid; gap: .5rem; }
.velafrica { display: flex; gap: .8rem; align-items: flex-start; font-weight: 600; margin-top: 1.4rem; }
.velafrica .ico { color: var(--gold-tief); }
@media (min-width: 1000px) {
  .stimmen-raster { grid-template-columns: 4fr 7fr; gap: 6rem; align-items: start; }
  .stimmen-bild { width: 100%; margin-top: 5rem; }
  .zitat-paar { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .zitat--versetzt { margin-top: 3rem; }
}

/* ================= ABLAUF ================= */
.ablauf { background: var(--papier-2); }
.ablauf-kopf { display: grid; gap: 2.5rem; margin-bottom: 3.5rem; }
.ablauf-bild { position: relative; }
.ablauf-bild img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.plakette {
  position: absolute; right: 10px; bottom: -34px; width: 124px; height: 124px; border-radius: 50%;
  background: var(--gelb); color: var(--tinte); display: grid; place-content: center; text-align: center;
  transform: rotate(-8deg); transition: transform 1s var(--federn);
}
.ablauf-bild:hover .plakette { transform: rotate(6deg) scale(1.04); }
.plakette strong { font: 900 2.2rem/1 var(--display); font-stretch: 110%; }
.plakette span { font: 700 .6rem/1.2 var(--text); text-transform: uppercase; letter-spacing: .03em; width: 100px; margin-top: .25rem; }
.schritte { display: grid; gap: 2.4rem; position: relative; z-index: 1; border-left: 2px dashed rgba(22, 20, 15, .35); padding-left: 1.4rem; }
.schritt { position: relative; display: grid; gap: .6rem; }
.schritt-nr {
  font: 900 4.4rem/.8 var(--display); font-stretch: 130%; color: transparent; -webkit-text-stroke: 1.6px var(--tinte);
}
.schritt .ico { position: absolute; right: 0; top: 0; }
.schritt p { margin: 0; max-width: 26rem; }
.spur-linie { display: none; }
.knopfreihe--mitte { margin-top: 3rem; }
@media (min-width: 1000px) {
  .ablauf-kopf { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: end; }
  .schritte { grid-template-columns: repeat(3, 1fr); gap: 3.5rem; border-left: 0; padding-left: 0; }
  .schritt:nth-child(2) { margin-top: 4rem; }
  .schritt:nth-child(3) { margin-top: 1.5rem; }
  .spur-linie { display: block; width: 100%; height: 60px; margin: 0 0 -3.2rem; fill: none; stroke: var(--tinte); stroke-opacity: .35; stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .spur-linie.ist-da { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(.6, .1, .2, 1) .3s; }
}

/* ================= FRAGEN ================= */
.fragen-raster::after { content: ""; display: block; clear: both; }
.fragen-bild { float: right; width: 30%; margin: 0 0 1rem 1rem; aspect-ratio: 1 / 2; overflow: hidden; }
.fragen-bild img { width: 100%; height: 100%; object-fit: cover; }
.akkordeon { border-bottom: 1px solid var(--tinte); margin: 1rem 0 1.4rem; clear: both; }
.akkordeon details { border-top: 1px solid var(--tinte); }
.akkordeon summary {
  list-style: none; cursor: pointer; position: relative; min-height: 44px; padding: 1.15rem 3.2rem 1.15rem 0;
  font: 650 1.1rem/1.35 var(--text);
}
.akkordeon summary::-webkit-details-marker { display: none; }
.plus { position: absolute; right: .3rem; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--tinte); transition: transform .45s var(--federn), background-color .3s; }
.plus::before, .plus::after { content: ""; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--papier); }
.plus::after { transform: rotate(90deg); transition: transform .45s var(--federn); }
details[open] .plus { transform: rotate(180deg); background: var(--gelb); }
details[open] .plus::before, details[open] .plus::after { background: var(--tinte); }
details[open] .plus::after { transform: rotate(0deg); }
.akkordeon details p { padding: 0 3rem 1.3rem 0; margin: 0; max-width: 42rem; }
@media (min-width: 1000px) {
  .fragen-raster { display: grid; grid-template-columns: 3fr 9fr; gap: 5rem; align-items: start; }
  .fragen-raster::after { display: none; }
  .fragen-bild { float: none; width: 100%; margin: 4rem 0 0; }
  .akkordeon { clear: none; }
}

/* ================= STANDORT ================= */
.standort-raster { display: grid; gap: 3rem; }
.jetzt { display: inline-flex; align-items: center; gap: .6rem; font-weight: 650; background: var(--papier-2); padding: .45rem .9rem; border-radius: 999px; }
.jetzt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--grau); }
.jetzt.offen::before { background: #1F7A3A; box-shadow: 0 0 0 4px rgba(31, 122, 58, .18); }
/* Live-Status auf dunklem Grund (Hero, Fusszeile): eigener Grund, damit der Text
   unabhängig von Foto und Kulisse lesbar bleibt; helleres Grün für den Punkt (Nicht-Text 3:1). */
.jetzt--hero, .jetzt--fuss { background: rgba(22, 20, 15, .78); color: var(--papier); font-size: .9rem; }
.jetzt--hero { margin-top: 1.1rem; }
.jetzt--fuss { margin-top: .8rem; background: rgba(242, 238, 230, .08); }
.jetzt--hero::before, .jetzt--fuss::before { background: var(--hell-grau); }
.jetzt--hero.offen::before, .jetzt--fuss.offen::before { background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .22); }
.standort-bloecke { display: grid; gap: 2rem; margin-top: 1.8rem; }
.block h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; margin-bottom: .7rem; }
.block p { margin: 0 0 .4rem; }
.block a[href^="tel"], .block a[href^="mailto"] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.zeiten { width: 100%; max-width: 24rem; margin-bottom: 1rem; }
.zeiten th, .zeiten td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linie); font-weight: 400; }
.zeiten th { font-weight: 650; }
.zeiten tr.heute th, .zeiten tr.heute td { background: var(--gelb); }
.standort-medien { position: relative; }
.standort-bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.karte { position: relative; background: var(--papier-2); padding: 1.4rem; margin: -3rem 0 0 8%; display: grid; gap: .8rem; }
.karte-skizze { width: 100%; height: auto; aspect-ratio: 16 / 9; fill: none; stroke: var(--tinte); stroke-opacity: .5; stroke-width: 2; }
.karte-skizze circle { fill: var(--gelb); stroke: var(--tinte); stroke-opacity: 1; }
.karte p { margin: 0; font-size: .95rem; }
.karte iframe { width: 100%; aspect-ratio: 4 / 3; border: 0; }
@media (min-width: 760px) {
  .standort-bloecke { grid-template-columns: 1fr 1fr; }
  .block--zeiten { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .standort-raster { grid-template-columns: 1.1fr 1fr; gap: 5rem; }
  .standort-medien { margin-top: 5rem; }
  .karte { margin: -5rem 0 0 -12%; max-width: 70%; }
}

/* ================= SCHLUSS ================= */
.schluss { position: relative; isolation: isolate; padding: clamp(6rem, 16vw, 11rem) 0; }
.schluss-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.schluss-schleier { position: absolute; inset: 0; background: rgba(22, 20, 15, .76); z-index: -1; }
.schluss h2 { font-size: clamp(2.4rem, 9vw, 6.4rem); font-stretch: 72%; max-width: 15ch; }
.schluss p { font-size: 1.15rem; max-width: 30em; color: #EEE9DF; }

/* ================= NEWS ================= */
.news-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 2rem; margin-bottom: 2.5rem; }
.news-raster { display: grid; gap: 2.8rem; }
.beitrag { position: relative; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--federn); }
.beitrag img { width: 100%; object-fit: cover; transition: transform 1.3s var(--federn); }
.beitrag--a { width: 72%; } .beitrag--a img { aspect-ratio: 4 / 5; }
.beitrag--b { width: 64%; margin-left: auto; } .beitrag--b img { aspect-ratio: 1 / 1; }
.beitrag--c img { aspect-ratio: 3 / 2; }
.beitrag { overflow: hidden; }
.beitrag h3 { font-size: 1.3rem; margin-top: 1rem; font-stretch: 90%; }
.beitrag h3 a { text-decoration: none; display: block; min-height: 44px; }
.beitrag h3 a::after { content: ""; position: absolute; inset: 0; }
.beitrag:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.newsletter { background: var(--papier-2); padding: 1.6rem 1.3rem; display: grid; gap: .7rem; }
.newsletter-titel { font-weight: 600; margin: 0; }
.newsletter label { font-weight: 650; }
.newsletter-zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.newsletter input[type="email"] { flex: 1 1 12rem; min-width: 0; min-height: 50px; padding: .6rem .9rem; border: 2px solid var(--tinte); background: #FFFDF8; border-radius: 0; }
.newsletter-hinweis { font-size: .88rem; color: var(--grau); margin: 0; }
.newsletter-hinweis a { color: var(--tinte); }
.newsletter-meldung { margin: 0; font-weight: 650; }
.newsletter-meldung:empty { display: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 1000px) {
  .news-raster { grid-template-columns: repeat(12, 1fr); column-gap: 1.6rem; row-gap: 3rem; align-items: start; }
  .beitrag--a { grid-column: 1 / 4; width: auto; }
  .beitrag--b { grid-column: 5 / 8; width: auto; margin-top: 5rem; }
  .beitrag--c { grid-column: 9 / 13; margin-top: 1.5rem; }
  .newsletter { grid-column: 6 / 13; padding: 2rem 2.4rem; margin-top: -2rem; }
}

/* ================= FUSS ================= */
.fuss { padding: 4.5rem 0 7rem; overflow: hidden; }
.fuss-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem 1.5rem; }
.fuss-marke { grid-column: 1 / -1; }
.fuss-marke p { color: var(--hell-grau); margin-top: 1rem; }
.fuss-zeiten { line-height: 1.8; }
.fuss-titel { font: 650 .78rem/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--gelb); margin: 0 0 .8rem; }
.fuss ul a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss ul li:not(:has(a)) { padding: .5rem 0; color: var(--hell-grau); }
.fuss ul a:hover, .fuss-recht a:hover { text-decoration: underline; text-decoration-color: var(--gelb); text-decoration-thickness: 2px; }
.fuss-sozial { display: flex; gap: .4rem; margin-top: .6rem; }
.fuss-sozial a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(242, 238, 230, .4); border-radius: 50%; }
.fuss-wort {
  margin: 3.5rem 0 1.5rem; font: 900 12.8vw/.8 var(--display); font-stretch: 112%; color: transparent;
  -webkit-text-stroke: 1px rgba(242, 238, 230, .28); white-space: nowrap; letter-spacing: -.01em;
}
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(242, 238, 230, .2); padding-top: 1.4rem; color: var(--hell-grau); font-size: .92rem; }
.fuss-unten p { margin: 0; }
.fuss-recht { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.fuss-recht a { display: inline-flex; align-items: center; min-height: 44px; color: var(--papier); }
@media (min-width: 900px) {
  .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .fuss-marke { grid-column: auto; }
  .fuss-wort { font-size: 12.4vw; }
  .fuss { padding-bottom: 3rem; }
}

/* ================= SCHWEBENDE KNÖPFE ================= */
.schwebe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--tinte); border-top: 3px solid var(--gelb);
  transform: translateY(110%); transition: transform .5s var(--federn);
}
.schwebe.sichtbar { transform: none; }
.schwebe-knopf { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 56px; text-decoration: none; font-weight: 650; color: var(--papier); }
.schwebe-knopf--termin { background: var(--gelb); color: var(--tinte); }
.schwebe-knopf--oben { display: none; }
.schwebe-knopf:focus-visible { outline-color: var(--gelb); outline-offset: -4px; }
.schwebe-knopf--termin:focus-visible { outline-color: var(--tinte); }
@media (min-width: 760px) {
  .schwebe { left: auto; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: .6rem; background: none; border: 0; }
  .schwebe-knopf { width: 56px; height: 56px; border-radius: 50%; padding: 0; background: var(--tinte); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
  .schwebe-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .schwebe-knopf--tel { background: var(--gelb); color: var(--tinte); }
  .schwebe-knopf--termin { display: none; }
  .schwebe-knopf--oben { display: flex; border: 2px solid var(--papier); }
  .schwebe-knopf--tel:focus-visible { outline-color: var(--tinte); outline-offset: 3px; }
  .schwebe-knopf--oben:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; }
}

/* ================= INHALT WIE LIVE (29.09.2026) ================= */
.cargo-liste { display: grid; gap: .8rem; margin: 1.3rem 0 0; }
.cargo-liste li { padding-left: 1rem; border-left: 3px solid var(--gelb); }
.cargo-liste strong { display: block; }
.werkstatt-text > p:not(.kicker):not(.lead) { max-width: 38em; }
.dienste-raster--vier .dienst { max-width: none; }
@media (min-width: 760px) {
  .dienste-raster--vier { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
  .dienste-raster--vier .dienst--b { margin: 2.5rem 0 0; }
  .dienste-raster--vier .dienst--d { margin-top: 2.5rem; }
}
@media (min-width: 1100px) {
  .dienste-raster--vier { grid-template-columns: repeat(4, 1fr); }
  .dienste-raster--vier .dienst--a, .dienste-raster--vier .dienst--b,
  .dienste-raster--vier .dienst--c, .dienste-raster--vier .dienst--d { grid-column: auto; margin: 0; }
  .dienste-raster--vier .dienst--b, .dienste-raster--vier .dienst--d { margin-top: 3rem; }
}
.bewerten-titel { font-size: 1.3rem; margin: 2rem 0 .3rem; }
.beitrag-art { margin: 1rem 0 0; font: 700 .78rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.beitrag-art + h3 { margin-top: .4rem; }
.beitrag > p:not(.beitrag-art) { margin: .3rem 0 0; color: var(--grau); }
.newsletter-titel { font-size: 1.25rem; }
.newsletter p { margin: 0; }
.newsletter-einwilligung { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; align-items: start; font-weight: 400 !important; font-size: .92rem; min-height: 44px; }
.newsletter-einwilligung input { width: 20px; height: 20px; min-height: 0; margin: .15rem 0 0; accent-color: var(--tinte); }
.newsletter-einwilligung a { color: var(--tinte); }
.schluss-inhalt .haken-liste { margin: 1.2rem 0 1.6rem; }
.schluss-inhalt .knopfreihe { flex-wrap: wrap; }

/* ================= TERMINFORMULAR ================= */
.schluss-raster { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .schluss-raster { grid-template-columns: 1fr 1.05fr; align-items: start; column-gap: 4rem; } }
.schluss .schluss-text p { color: #EEE9DF; }
.termin { background: var(--papier); color: var(--tinte); padding: 1.4rem 1.2rem; display: grid; gap: .9rem; min-width: 0; }
@media (min-width: 700px) { .termin { padding: 2rem 2.2rem; } }
.termin fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.termin legend { font-weight: 650; padding: 0; margin-bottom: .4rem; }
.termin-zwei { display: grid; gap: .9rem; }
@media (min-width: 560px) { .termin-zwei { grid-template-columns: 1fr 1fr; } }
.termin .feld { display: grid; gap: .3rem; min-width: 0; }
.termin label { font-weight: 650; font-size: .95rem; }
.termin input:not([type="checkbox"]), .termin select, .termin textarea { width: 100%; max-width: 100%; min-width: 0; min-height: 48px; padding: .55rem .8rem; border: 2px solid var(--tinte); background: #FFFDF8; color: var(--tinte); font: inherit; border-radius: 0; }
.termin textarea { min-height: 96px; resize: vertical; }
.termin [aria-invalid="true"] { border-color: #A4260E; box-shadow: 0 0 0 3px rgba(164, 38, 14, .18); }
.termin p.termin-hinweis { font-size: .88rem; color: var(--grau); margin: -.3rem 0 0; }
.termin-einwilligung { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; align-items: start; min-height: 44px; font-weight: 400 !important; }
.termin-einwilligung input { width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--tinte); }
.termin a { color: var(--tinte); }
.termin .knopf { justify-self: start; }
.termin p.termin-meldung { margin: 0; font-weight: 650; color: var(--tinte); }
.termin-meldung:empty { display: none; }
.termin p.termin-meldung.fehler { color: #A4260E; }

/* ================= WENIGER BEWEGUNG ================= */
/* Alles aus, ausser Deckkraft (Auftrag). Die Kulisse zeichnet ein ruhendes Bild (app.js). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: opacity !important; }
  html.js .zeige, html.js .auftritt, html.js .zeige--bild { transform: none !important; clip-path: none !important; }
  html.js .zeichne * { stroke-dashoffset: 0 !important; }
  html.js .hero.bereit .auftritt, html.js .zeige.ist-da { transition-duration: .5s !important; transition-delay: calc(var(--t, var(--i, 0)) * 50ms) !important; }
  .spur-linie { stroke-dashoffset: 0 !important; }
  .kat, .beitrag, .amflow-rahmen { transform: none !important; }
  .hero-foto { transform: none; }
  /* Laufband steht: alle Marken sichtbar statt abgeschnitten, Doppel und Knopf weg */
  .ticker-spur { width: auto; }
  .ticker-liste { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: .6rem; }
  .ticker-liste[aria-hidden="true"], .ticker-pause { display: none; }
}

/* Betriebsferien (30.09.2026) */
/* Im fixierten Kopf als oberste Zeile: vorher lag es unter dem Kopf und wurde von Logo und Menü überdeckt (Befund Jairo 30.09.) */
.ferien-band { background: var(--gelb); color: var(--tinte); padding: .55rem 1.25rem; text-align: center; font-size: .92rem; line-height: 1.4; }
html:has([data-ferien-band]) { scroll-padding-top: 140px; }
.ferien-band p { margin: 0 auto; max-width: 70rem; }
.ferien-liste { margin: .9rem 0 0; font-size: .92rem; }