/* ==========================================================================
   Bikeshop 6390, Stylesheet
   Farbschema: automatisch nach Systemeinstellung, überschreibbar per Toggle
   (html[data-theme="light" | "dark"]). Farben laufen über light-dark().
   ========================================================================== */

:root {
  color-scheme: light dark;

  --bg:          light-dark(#f6f5f2, #141518);
  --bg-elevated: light-dark(#ffffff, #1d1f23);
  --text:        light-dark(#191a1c, #ececea);
  --text-muted:  light-dark(#5e6165, #a4a7ab);
  --border:      light-dark(#e2e0db, #2d3035);
  /* Der helle Akzent ist so weit abgedunkelt, dass er als Textfarbe auf
     beiden hellen Untergründen über 4.5:1 kommt und Weiss auf der Fläche
     ebenso. Der Hover geht entsprechend noch eine Stufe tiefer.
     Achtung: Wählt Lena im Panel unter Firmendaten eine eigene
     Akzentfarbe, überschreibt site/snippets/theme-colors.php diese drei
     Werte. Der Kontrast hängt dann an ihrer Wahl, nicht an dieser Zeile.
     Darum bietet site/blueprints/site.yml nur geprüfte Töne an. */
  --accent:      light-dark(#b34407, #f0731f);
  --accent-hover:light-dark(#8f3506, #ff8534);
  --on-accent:   light-dark(#ffffff, #1b0e03);
  /* Nur die FARBE darf durch light-dark(): die Funktion ist als
     light-dark(<color>, <color>) definiert und akzeptiert keinen kompletten
     box-shadow-Kurzwert. Stand hier früher der ganze Schatten, war jede
     Deklaration «invalid at computed-value time» und fiel ersatzlos weg —
     die Site hatte dadurch keinen einzigen Schatten. Die Geometrie steht
     darum in --shadow, das nur noch die Farbe einsetzt. */
  --shadow-color: light-dark(rgba(0, 0, 0, .07), rgba(0, 0, 0, .4));
  --shadow:      0 1px 3px var(--shadow-color);
}

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* --- Grundlagen --------------------------------------------------------- */

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

/* Seitliche Überstände abschneiden (z.B. Reveal-Karten, die vor dem
   Einblenden 38px verschoben sind), sonst lässt sich die Seite auf dem
   Handy horizontal ziehen. «clip» statt «hidden», damit position:sticky
   in der Velo-Szene weiterhin funktioniert. */
html,
body {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Links mitten im Fliesstext bekommen dauerhaft eine Unterstreichung. Die
   Farbe allein reicht als Kennzeichnung nicht, wer Farben schlecht
   unterscheidet, übersieht sie sonst. Eine gemeinsame Wrapperklasse für
   Kirbytext gibt es nicht, darum steht hier jeder Container einzeln. */
.prose a:not(.button),
.page-intro a:not(.button),
.hero__intro a:not(.button),
.statement__text a:not(.button),
.about__text a:not(.button),
.about__outro a:not(.button),
.notice--success a:not(.button),
.faq__antwort a:not(.button),
.tipp__text a:not(.button),
.note a:not(.button),
.service-dialog__details a:not(.button),
.bike-dialog__text a:not(.button),
/* Der Shop-Intro auf der Startseite steht ohne eigene Klasse direkt in der
   Section. Der Pfeil-Link darunter behält seine eigene Gestaltung. */
.section > p a:not(.button):not(.textlink) {
  text-decoration: underline;
  text-underline-offset: .15em;
}

h1, h2, h3 {
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin: 1.2em 0 .5em; }
h2 { font-size: 1.35rem; }

.container {
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

main.container {
  padding-block: .5rem 4rem;
  min-height: 55vh;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Logo-Umschaltung: helles Schema -> schwarzes Logo, dunkles -> weisses Logo.
   (light-dark() geht nur für Farben, darum hier klassisch per Selektor.) */
.logo__img--dark { display: none; }

html[data-theme="dark"] .logo__img--light { display: none; }
html[data-theme="dark"] .logo__img--dark  { display: block; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .logo__img--light { display: none; }
  html:not([data-theme="light"]) .logo__img--dark  { display: block; }
}

/* --- Hinweis-Banner ------------------------------------------------------ */

.banner {
  background: var(--accent);
  color: var(--on-accent);
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 1rem;
}

/* --- Header & Navigation ------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 40;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: transform .3s ease, box-shadow .3s ease;
  }
}

/* Beim Runterscrollen schiebt sich der Header weg, beim Hochscrollen
   kommt er sofort zurück (Klassen setzt theme.js) */
.site-header--hidden {
  transform: translateY(-100%);
}

.site-header--scrolled {
  box-shadow: var(--shadow);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .7rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--text);
}

.logo:hover {
  text-decoration: none;
  color: var(--text);
}

.logo__img {
  width: 52px;
  height: auto;
}

.logo__text {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo__text strong {
  font-weight: 800;
}

.nav {
  display: flex;
  align-items: center;
  /* Abstände knapp halten: Der Container ist auf 1060px begrenzt, und die
     Navigation muss mit den langen Menütiteln (z.B. "Occasion Verkauf")
     neben dem Logo Platz finden, sonst bricht sie in eine zweite Zeile um. */
  gap: clamp(.85rem, 1.6vw, 1.15rem);
  flex-wrap: wrap;
}

.nav > a:not(.button):not(.lang-toggle) {
  color: var(--text);
  font-weight: 600;
  padding-block: .3rem;
  border-bottom: 2px solid transparent;
}

.nav > a:not(.button):not(.lang-toggle):hover {
  text-decoration: none;
  color: var(--accent);
}

.nav > a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

/* --- Theme-Toggle -------------------------------------------------------- */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle__icon {
  width: 19px;
  height: 19px;
  display: none;
}

/* Sprachumschalter: zeigt die Sprache, zu der gewechselt wird */
.lang-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.lang-toggle:hover {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
}

/* Ohne JS bzw. im Modus «Auto» das Monitor-Symbol zeigen */
.theme-toggle:not([data-mode]) .theme-toggle__icon--auto,
.theme-toggle[data-mode="auto"]  .theme-toggle__icon--auto,
.theme-toggle[data-mode="light"] .theme-toggle__icon--light,
.theme-toggle[data-mode="dark"]  .theme-toggle__icon--dark {
  display: block;
}

/* --- Hero (Startseite) --------------------------------------------------- */

.hero {
  text-align: center;
  padding-block: clamp(2rem, 6vw, 3.5rem) 1.5rem;
}

.hero__logo {
  width: clamp(150px, 30vw, 220px);
  margin-inline: auto;
}

.hero__claim {
  margin: 1rem 0 .4em;
}

.hero__intro {
  max-width: 38rem;
  margin-inline: auto;
  color: var(--text-muted);
  font-size: 1.15rem;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em 1.2em;
  border: 2px solid var(--text);
  border-radius: 999px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
}

.button:hover {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
}

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.button--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.button--large {
  font-size: 1.1rem;
  padding: .7em 1.6em;
}

/* --- Karten & Abschnitte --------------------------------------------------- */

.cards {
  display: grid;
  gap: 1.1rem;
  margin-block: 2rem;
}

.cards--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  box-shadow: var(--shadow);
}

.card__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .8rem;
}

.card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}

.card__icon .icon {
  width: 19px;
  height: 19px;
}

.card__title {
  margin: 0 0 .6rem;
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}

.card__head .card__title {
  margin: 0;
}

/* Foto oben in einer Karte, randlos bis zur Kartenkante */
.card__media {
  margin: -1.3rem -1.4rem 1.1rem;
  border-bottom: 1px solid var(--border);
}

.card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 13px 13px 0 0;
}

.card p {
  margin: 0 0 .6rem;
}

.card__biglink {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
}

.section {
  margin-block: 3rem;
}

.section__head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
}

.section__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
}

.section__icon .icon {
  width: 21px;
  height: 21px;
}

.section__title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.section__head .section__title {
  margin: 0;
}

/* --- Öffnungszeiten -------------------------------------------------------- */

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem 1.2rem;
  margin: 0;
}

.hours dt {
  font-weight: 700;
  white-space: nowrap;
}

.hours dd {
  margin: 0;
  color: var(--text-muted);
}

/* Hinweis unter den Öffnungszeiten mit WhatsApp-Knopf für Terminanfragen */
.hours-note {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}

.hours-note__text {
  margin: 0;
  color: var(--text-muted);
  font-size: .95rem;
}

/* Ohne JS wird der Knopf per hidden-Attribut ausgeliefert. Das display:grid
   würde das aufheben, er wäre sichtbar und fokussierbar, aber ohne Wirkung. */
.hours-note__wa[hidden] {
  display: none;
}

.hours-note__wa {
  display: grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #157f43;
  color: #fff;
  cursor: pointer;
}

.hours-note__wa:hover {
  background: #0f6634;
}

.hours-note__wa .icon {
  width: 21px;
  height: 21px;
}

/* Kompaktere Variante im Footer */
.site-footer .hours-note {
  gap: .6rem;
  margin-top: .8rem;
  padding-top: .8rem;
}

.site-footer .hours-note__wa {
  width: 36px;
  height: 36px;
}

.site-footer .hours-note__wa .icon {
  width: 19px;
  height: 19px;
}

/* --- Service-Tabelle -------------------------------------------------------- */

.service-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-block: 1.5rem;
}

.service-table th,
.service-table td {
  padding: .95rem 1.3rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.service-table tr:last-child th,
.service-table tr:last-child td {
  border-bottom: none;
}

.service-table th[scope="row"] {
  font-weight: 700;
}

.service-table th small {
  display: block;
  font-weight: 400;
  font-size: .92rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

.service-table__price {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
  width: 1%;
}

/* Interaktive Preisliste (Service-Seite): Zeilen sind klickbar und
   öffnen ein Detailfenster */
.service-table--interactive tbody tr {
  cursor: pointer;
  transition: background-color .15s ease;
}

.service-table--interactive tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Die Zeile selbst ist nicht fokussierbar, das übernimmt der Pfeil-Knopf
   darin. Sobald er den Tastaturfokus hat, hebt sich die ganze Zeile hervor.
   Den Fokusrahmen bringt der Knopf selber mit. */
.service-table--interactive tbody tr:has(.service-table__more:focus-visible) {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.service-table__chevron {
  width: 1%;
  text-align: right;
  color: var(--text-muted);
}

.service-table__chevron .icon {
  width: 1.05em;
  height: 1.05em;
  transition: translate .15s ease, color .15s ease;
}

.service-table--interactive tbody tr:hover .service-table__chevron .icon {
  translate: 3px 0;
  color: var(--accent);
}

/* Auf schmalen Screens werden die Zeilen zu gestapelten Karten:
   Titel und Beschreibung volle Breite, Preis darunter, Pfeil oben rechts.
   Sonst quetscht die nowrap-Preisspalte den Text zusammen und die
   Tabelle schiebt die Seite breiter als den Viewport. */
@media (max-width: 540px) {
  .service-table tr {
    display: block;
    position: relative;
    padding: .95rem 1.1rem;
    border-bottom: 1px solid var(--border);
  }

  .service-table tr:last-child {
    border-bottom: none;
  }

  .service-table th,
  .service-table td {
    display: block;
    padding: 0;
    border-bottom: none;
  }

  .service-table th[scope="row"] {
    padding-right: 2.2rem; /* Platz für den Pfeil */
  }

  .service-table__price {
    text-align: left;
    white-space: normal;
    width: auto;
    margin-top: .4rem;
  }

  .service-table__price:empty {
    display: none;
  }

  .service-table__chevron {
    position: absolute;
    top: 1.05rem;
    right: 1.1rem;
    width: auto;
    padding: 0;
  }
}

/* Zeilen blenden beim Laden gestaffelt ein (endet immer im sichtbaren
   Zustand, funktioniert deshalb auch ohne JS) */
@media (prefers-reduced-motion: no-preference) {
  .service-table--interactive tbody tr {
    animation: service-row-in .4s ease-out backwards;
  }
  .service-table--interactive tbody tr:nth-child(2) { animation-delay: .06s; }
  .service-table--interactive tbody tr:nth-child(3) { animation-delay: .12s; }
  .service-table--interactive tbody tr:nth-child(4) { animation-delay: .18s; }
  .service-table--interactive tbody tr:nth-child(5) { animation-delay: .24s; }
  .service-table--interactive tbody tr:nth-child(6) { animation-delay: .3s; }
  .service-table--interactive tbody tr:nth-child(7) { animation-delay: .36s; }
  .service-table--interactive tbody tr:nth-child(8) { animation-delay: .42s; }
  .service-table--interactive tbody tr:nth-child(n+9) { animation-delay: .48s; }
}

@keyframes service-row-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

/* Detailfenster (natives dialog-Element) */
.service-dialog {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elevated);
  color: var(--text);
  padding: 1.5rem 1.6rem;
  width: min(32rem, calc(100% - 2rem));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

.service-dialog::backdrop {
  background: rgba(10, 10, 12, .5);
}

@media (prefers-reduced-motion: no-preference) {
  .service-dialog[open] {
    animation: dialog-in .18s ease-out;
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
}

.service-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.service-dialog__title {
  margin: 0;
  font-size: 1.3rem;
}

.service-dialog__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.service-dialog__close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.service-dialog__price {
  margin: .5rem 0 .2rem;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
}

.service-dialog__dauer {
  margin: 0 0 .8rem;
  color: var(--text-muted);
  font-size: .95rem;
}

.service-dialog__desc {
  margin: 0 0 .6rem;
  font-weight: 600;
}

.service-dialog__details {
  margin-bottom: 1.1rem;
}

.service-dialog__details p {
  margin: 0 0 .6rem;
}

.service-dialog__details ul {
  margin: 0 0 .6rem;
  padding-left: 1.2rem;
}

.service-dialog__details li {
  margin-bottom: .25rem;
}

.note {
  color: var(--text-muted);
  font-size: .95rem;
}

.page-intro {
  max-width: 44rem;
  font-size: 1.12rem;
  color: var(--text-muted);
}

/* --- Formular --------------------------------------------------------------- */

.form {
  max-width: 40rem;
  margin-block: 1.5rem 3rem;
}

.form__row--2 {
  display: grid;
  gap: 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.form__field {
  margin-bottom: 1.1rem;
}

.form__field label {
  display: block;
  font-weight: 700;
  margin-bottom: .3rem;
}

.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  padding: .65rem .8rem;
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form__hint {
  font-size: .9rem;
  color: var(--text-muted);
  margin-top: .35rem;
}

.form__error {
  color: light-dark(#b3261e, #ff8c85);
  font-size: .92rem;
  font-weight: 600;
  margin: .3rem 0 0;
}

.form__field--captcha input {
  max-width: 8rem;
}

/* Honeypot ausserhalb des sichtbaren Bereichs */
/* Honeypot-Feld im Buchungsformular (siehe site/templates/buchen.php).
   visibility: hidden ist hier der tragende Teil, nicht das Wegschieben:
   Passwortmanager und die Autofill-Heuristik der Browser überspringen
   Felder, die als unsichtbar berechnet werden, füllen aber ein Feld, das
   bloss per left: -9999px aus dem Bild steht. Ein von Autofill gefülltes
   Honeypot-Feld würde eine echte Buchung still verwerfen. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.notice {
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-block: 1.5rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.notice--success {
  border-color: light-dark(#7bb87e, #3e6b41);
}

.notice--error {
  border-color: light-dark(#d98a85, #7a3f3b);
}

.notice p {
  margin: 0 0 .5rem;
}

/* --- Buchung per WhatsApp ----------------------------------------------------- */

/* WhatsApp-Grün so weit abgedunkelt, dass die weisse Beschriftung 4.5:1
   erreicht. Das hellere Markengrün blieb bei 3.17:1 und verschwamm auf dem
   Handy in der Sonne. */
.button--whatsapp {
  background: #157f43;
  border-color: #157f43;
  color: #fff;
}

.button--whatsapp:hover {
  background: #0f6634;
  border-color: #0f6634;
  color: #fff;
}

.wa-step__lead {
  font-size: 1.05rem;
}

.wa-step__action {
  margin-block: 1rem .4rem;
}

.wa-step__previewtitle {
  margin: 1.2rem 0 .4rem;
  font-weight: 700;
}

.wa-step__mailform {
  margin: 0 0 .8rem;
}

/* Vorschau der vorbereiteten Nachricht, wie eine Chat-Blase */
.wa-step__msg {
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  max-width: 34rem;
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  background: color-mix(in srgb, #24a55e 8%, var(--bg-elevated));
  font-size: .95rem;
  line-height: 1.55;
}

/* Terminanfrage-Popup (unter den Öffnungszeiten) */
.termin-dialog__form {
  margin-top: 1.2rem;
}

/* --- Fliesstext (Impressum etc.) --------------------------------------------- */

.prose {
  max-width: 44rem;
}

.prose h2 {
  margin-top: 2rem;
}

/* --- Saisonband (schräges Laufband für Saison-Aktionen) ------------------ */

.saisonband {
  overflow: hidden;
  padding: clamp(2.5rem, 7vh, 4.5rem) 0;
}

.saisonband__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.saisonband__link:hover {
  color: inherit;
  text-decoration: none;
}

.saisonband__link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* Streifen breiter als der Viewport, damit die Drehung keine Ecken zeigt */
.saisonband__streifen {
  width: 120vw;
  margin-left: -10vw;
  padding: .5rem 0;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  transform: rotate(-2.5deg);
}

.saisonband__streifen--zwei {
  margin-top: -.25rem;
  background: var(--text);
  color: var(--bg);
  transform: rotate(1.75deg);
}

.saisonband__lauf {
  display: inline-block;
}

.saisonband__lauf span {
  margin-right: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .saisonband__lauf {
    animation: saisonband-lauf 50s linear infinite;
  }

  .saisonband__streifen--zwei .saisonband__lauf {
    animation-duration: 62s;
    animation-direction: reverse;
  }

  /* Beim Zeigen oder Fokussieren anhalten, damit sich das Band lesen
     und in Ruhe anklicken lässt */
  .saisonband:hover .saisonband__lauf,
  .saisonband:focus-within .saisonband__lauf {
    animation-play-state: paused;
  }
}

@keyframes saisonband-lauf {
  to { transform: translateX(-50%); }
}

/* --- Kundenbikes-Band (über der Fusszeile) ----------------------------------- */

.bike-band {
  border-top: 1px solid var(--border);
  padding-block: 2rem 2.4rem;
  overflow: hidden;
}

.bike-band__title {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
}

.bike-band__viewport {
  overflow: hidden;
}

.bike-band__track {
  display: flex;
  width: max-content;
  animation: bike-band-lauf var(--bike-band-dauer, 60s) linear infinite;
}

/* Anhalten, solange die Maus über dem Band ist oder etwas darin Fokus hat */
.bike-band:hover .bike-band__track,
.bike-band:focus-within .bike-band__track {
  animation-play-state: paused;
}

@keyframes bike-band-lauf {
  to {
    transform: translateX(-50%);
  }
}

/* Der Abstand sitzt als gap IN der Gruppe plus padding am Gruppenende,
   damit die 50%-Verschiebung exakt nahtlos ist */
.bike-band__gruppe {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  flex: none;
}

.bike-band__item {
  position: relative;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  margin: 0;
  background: var(--bg-elevated);
  cursor: zoom-in;
}

.bike-band__item img {
  display: block;
  height: 100%;
  width: auto;
}

.bike-band__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .8rem .55rem;
  background: linear-gradient(transparent, rgba(10, 10, 12, .75));
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity .25s ease;
}

.bike-band__item:hover .bike-band__caption {
  opacity: 1;
}

/* Instagram-Karte am Ende der Fotoreihe */
.bike-band__insta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  flex: none;
  width: 200px;
  height: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text);
  font-weight: 700;
  text-align: center;
}

.bike-band__insta .icon {
  width: 30px;
  height: 30px;
}

.bike-band__insta:hover {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
}

/* Ohne Maus (Handy/Tablet) und bei reduzierter Bewegung ist die
   CSS-Animation aus und das Band von Hand scrollbar. Auf Touch-Geräten
   schiebt JS sanft weiter (siehe bike-band.php), dafür bleibt das
   Duplikat als Schleifen-Reserve stehen; die Füller braucht es nicht. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bike-band__track {
    animation: none;
    width: auto;
  }

  .bike-band__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-inline: clamp(1rem, 4vw, 2rem);
    scrollbar-width: thin;
  }

  .bike-band__item--fueller {
    display: none;
  }

  .bike-band__caption {
    opacity: 1;
  }
}

/* Bei reduzierter Bewegung läuft gar nichts von selbst, darum wäre das
   Duplikat nur doppelter Inhalt */
@media (prefers-reduced-motion: reduce) {
  .bike-band__gruppe--dup {
    display: none;
  }
}

@media (max-width: 700px) {
  .bike-band__item,
  .bike-band__insta {
    height: 170px;
  }

  .bike-band__insta {
    width: 160px;
  }
}

/* Grossansicht eines Kundenbikes (Klick aufs Band) */
.bike-dialog {
  width: min(46rem, calc(100% - 2rem));
}

.bike-dialog__bild {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: .6rem;
  background: var(--bg);
}

.bike-dialog__text {
  margin-top: .9rem;
}

.bike-dialog__text p {
  margin: 0 0 .5rem;
}

/* --- Footer -------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  padding-block: 2.5rem 1.5rem;
  font-size: .97rem;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.site-footer__title {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin: 0 0 .7rem;
}

.site-footer a {
  color: var(--text);
}

.site-footer a:hover {
  color: var(--accent);
}

.hours--footer {
  font-size: .95rem;
}

.site-footer__copyright {
  margin-top: 2.5rem;
  color: var(--text-muted);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .35rem 1.5rem;
}

/* Dezenter Hinweis auf den Websitemacher, bewusst gedämpfter als die
   übrigen Footer-Links; nur das Herz trägt die Akzentfarbe */
.site-footer a.site-footer__credit {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a.site-footer__credit:hover {
  color: var(--text);
}

.site-footer__credit span {
  color: var(--accent);
}

/* --- Tipps-Karten ------------------------------------------------------------- */

.tipp {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tipp.is-collapsible {
  cursor: pointer;
}

/* Einblenden beim Laden, gestaffelt */
@media (prefers-reduced-motion: no-preference) {
  .tipps .tipp {
    animation: tipp-in .5s ease-out backwards;
  }
  .tipps .tipp:nth-child(2) { animation-delay: .08s; }
  .tipps .tipp:nth-child(3) { animation-delay: .16s; }
  .tipps .tipp:nth-child(4) { animation-delay: .24s; }
  .tipps .tipp:nth-child(5) { animation-delay: .32s; }
  .tipps .tipp:nth-child(6) { animation-delay: .40s; }
  .tipps .tipp:nth-child(n+7) { animation-delay: .48s; }
}

@keyframes tipp-in {
  from { opacity: 0; translate: 0 14px; }
}

/* Hover: Karte hebt sich, Icon kippt verspielt */
.tipp.is-collapsible:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

.tipp__icon {
  transition: rotate .25s ease, scale .25s ease;
}

.tipp:hover .tipp__icon {
  rotate: -12deg;
  scale: 1.08;
}

/* Text gekürzt anzeigen, bis die Karte geöffnet wird */
.tipp.is-collapsible .tipp__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}

.tipp.is-collapsible.is-open .tipp__text {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* Sanfter Ausblendverlauf am unteren Rand des gekürzten Textes */
.tipp.is-collapsible:not(.is-open) .tipp__text::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg-elevated));
}

.tipp__toggle {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-top: .7rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tipp__toggle .icon {
  width: 1em;
  height: 1em;
  rotate: 90deg;
  transition: rotate .25s ease;
}

.tipp.is-open .tipp__toggle .icon {
  rotate: -90deg;
}

.tipp__toggle-weniger { display: none; }
.tipp.is-open .tipp__toggle-mehr { display: none; }
.tipp.is-open .tipp__toggle-weniger { display: inline; }

/* Ohne JS (nicht collapsible) den Knopf gar nicht zeigen */
.tipp:not(.is-collapsible) .tipp__toggle {
  display: none;
}

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

/* --- FAQ-Akkordeon ------------------------------------------------------------ */

.faq {
  max-width: 44rem;
  margin-block: 1.5rem;
}

.faq__item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  margin-bottom: .7rem;
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.2rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary .icon {
  flex: none;
  color: var(--accent);
  transition: rotate .25s ease;
}

.faq__item[open] summary .icon {
  rotate: 90deg;
}

.faq__antwort {
  padding: 0 1.2rem 1.05rem;
  color: var(--text-muted);
}

.faq__antwort p {
  margin: 0 0 .6rem;
}

.faq__item[open] .faq__antwort {
  animation: faq-auf .3s ease;
}

@keyframes faq-auf {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__antwort {
    animation: none;
  }
  .faq__item summary .icon {
    transition: none;
  }
}

/* --- Neuigkeiten-Slider (Startseite) ----------------------------------------- */

.news-slider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.1rem;
  padding: .6rem 1.1rem .6rem .6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-elevated));
  box-shadow: var(--shadow);
}

/* Scroll-Einblendung: theme.js setzt --wartet nur, wenn die Meldung beim
   Laden unterhalb des Sichtbereichs liegt, und --sichtbar beim Auftauchen */
.news-slider--wartet {
  opacity: 0;
  translate: 0 24px;
  transition: opacity .65s ease, translate .65s ease;
}

.news-slider--sichtbar {
  opacity: 1;
  translate: 0 0;
}

/* Das Megafon meldet sich kurz zu Wort, sobald die Meldung auftaucht */
.news-slider--sichtbar .news-slider__icon {
  animation: news-megafon .9s ease .5s both;
}

@keyframes news-megafon {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-14deg); }
  40%      { transform: rotate(10deg); }
  60%      { transform: rotate(-7deg); }
  80%      { transform: rotate(4deg); }
}

/* Mobil wird die Meldung mehrzeilig: sanfte Ecken statt Vollpille */
@media (max-width: 720px) {
  .news-slider {
    border-radius: 14px;
    padding: .7rem .9rem .7rem .7rem;
  }
}

.news-slider__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.news-slider__icon .icon {
  width: 19px;
  height: 19px;
}

.news-slider__items {
  display: grid;
  flex: 1;
  min-width: 0;
}

.news-slider__item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  row-gap: .2rem;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity .45s ease, translate .45s ease, visibility .45s;
}

.news-slider__item.is-active {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

a.news-slider__item:hover {
  text-decoration: none;
}

a.news-slider__item:hover .news-slider__text {
  color: var(--accent);
}

.news-slider__badge {
  flex: none;
  padding: .1em .7em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.news-slider__text {
  font-weight: 600;
  transition: color .15s ease;
}

.news-slider__dots {
  display: flex;
  gap: .45rem;
  flex: none;
}

.news-slider__dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 25%, transparent);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.news-slider__dots button.is-active {
  background: var(--accent);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .news-slider__item {
    transition: none;
  }

  .news-slider--wartet {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .news-slider--sichtbar .news-slider__icon {
    animation: none;
  }
}

/* --- Animiertes Shop-Titelbild ---------------------------------------------- */

.shop-hero {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-block: 1.5rem;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
  box-shadow: var(--shadow);
}

.shop-hero svg {
  display: block;
  width: 100%;
  height: clamp(170px, 26vw, 300px);
}

.shop-hero__sonne {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  animation: shop-hero-leuchten 6s ease-in-out infinite alternate;
}

.shop-hero__berg--hinten { fill: color-mix(in srgb, var(--text) 10%, transparent); }
.shop-hero__berg--vorne  { fill: color-mix(in srgb, var(--text) 17%, transparent); }

.shop-hero__wolke {
  fill: color-mix(in srgb, var(--text) 9%, transparent);
}

.shop-hero__wolke--1 { animation: shop-hero-ziehen 55s linear infinite; }
.shop-hero__wolke--2 { animation: shop-hero-ziehen 80s linear infinite; animation-delay: -30s; }

.shop-hero__boden {
  stroke: color-mix(in srgb, var(--text) 35%, transparent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 26 20;
  animation: shop-hero-fahren .7s linear infinite;
}

.shop-hero__velo {
  animation: shop-hero-wippen 2.4s ease-in-out infinite alternate;
}

.shop-hero__reifen,
.shop-hero__rahmen,
.shop-hero__speichen line,
.shop-hero__kurbel line {
  fill: none;
  stroke: var(--text);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop-hero__speichen line { stroke-width: 3; }
.shop-hero__speichen,
.shop-hero__kurbel {
  transform-box: fill-box;
  transform-origin: center;
  animation: shop-hero-drehen 1.6s linear infinite;
}

.shop-hero__nabe,
.shop-hero__kurbellager {
  fill: var(--accent);
}

.shop-hero__tasche rect {
  fill: var(--accent);
}

.shop-hero__henkel {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}

@keyframes shop-hero-drehen {
  to { transform: rotate(360deg); }
}

/* Positiver Versatz schiebt das Strichmuster zum Linienanfang, die
   Striche laufen also nach links: das Velo fährt nach rechts */
@keyframes shop-hero-fahren {
  to { stroke-dashoffset: 46; }
}

@keyframes shop-hero-wippen {
  from { transform: translateY(0); }
  to   { transform: translateY(3px); }
}

/* Wolken ziehen wie der Boden nach links, nur langsamer (Tiefenwirkung) */
@keyframes shop-hero-ziehen {
  from { transform: translateX(1460px); }
  to   { transform: translateX(-260px); }
}

@keyframes shop-hero-leuchten {
  from { transform: scale(1); opacity: .85; }
  to   { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero__sonne,
  .shop-hero__wolke--1,
  .shop-hero__wolke--2,
  .shop-hero__boden,
  .shop-hero__velo,
  .shop-hero__speichen,
  .shop-hero__kurbel {
    animation: none;
  }
}

/* --- Velos zum Verkauf (Shop) ----------------------------------------------- */

.velo-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-block: 1.1rem 1.4rem;
}

.velo-filter[hidden] {
  display: none;
}

.velo-filter input,
.velo-filter select {
  padding: .55rem .8rem;
  font: inherit;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.velo-filter input:focus,
.velo-filter select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.velo-filter__search {
  flex: 1 1 11rem;
  min-width: 9rem;
}

.velo-filter__reset {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .6rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: .92rem;
  color: var(--text-muted);
  cursor: pointer;
}

.velo-filter__reset:hover {
  color: var(--accent);
}

.velo-filter__reset .icon {
  width: 1em;
  height: 1em;
}

.velo-card {
  position: relative;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.velo-card[hidden] {
  display: none;
}

/* Die Karte selbst ist nicht fokussierbar, fokussierbar ist der Titel-Link
   darin. Bekommt er den Tastaturfokus, hebt sich die ganze Karte an wie beim
   Hover. Den Fokusrahmen bringt der Link selber mit. */
.velo-card:hover,
.velo-card:has(.velo-card__link:focus-visible) {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
}

/* Velofotos etwas höher als die Kategorie-Fotos, plus sanfter Zoom beim Hover */
.velo-card__media {
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}

.velo-card__media img {
  aspect-ratio: 4 / 3;
  transition: transform .35s ease;
}

.velo-card:hover .velo-card__media img {
  transform: scale(1.045);
}

.velo-card__media--leer {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
}

.velo-card__media--leer .icon {
  width: 52px;
  height: 52px;
  opacity: .8;
}

.velo-card__badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .28rem .7rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.velo-card__badge--reserviert {
  color: light-dark(#8a5b00, #ffd479);
  border-color: light-dark(#e0b25c, #8a6a2b);
}

.velo-card__badge--verkauft {
  color: var(--text-muted);
}

.velo-card--verkauft .velo-card__media img,
.velo-card--verkauft .velo-card__media--leer {
  filter: grayscale(.7);
  opacity: .75;
}

.velo-card__title {
  margin: 0 0 .35rem;
  font-size: 1.08rem;
}

.velo-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .55rem;
  color: var(--text-muted);
  font-size: .92rem;
}

.velo-card__farbe {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.velo-dot {
  display: inline-block;
  width: .85em;
  height: .85em;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex: none;
}

.velo-dot--mehrfarbig {
  background: conic-gradient(#c62f2f, #eec21b, #2e7d3a, #2059a8, #7a44d8, #c62f2f);
}

.velo-card__price {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent);
}

/* Durchgestrichener Neupreis vor dem reduzierten Preis */
.velo-card__alt {
  font-size: .82em;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration-thickness: 2px;
}

/* Zustand («Occasion») und Mietvermerk («zur Miete») sind gleichwertige
   kleine Marken neben dem Preis */
.velo-card__zustand,
.velo-card__miete {
  padding: .12rem .55rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.velo-card__miete {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
}

/* Karten blenden beim Laden gestaffelt ein, wie die Service-Preisliste */
@media (prefers-reduced-motion: no-preference) {
  .velo-card {
    animation: service-row-in .4s ease-out backwards;
  }
  .velo-card:nth-child(2) { animation-delay: .06s; }
  .velo-card:nth-child(3) { animation-delay: .12s; }
  .velo-card:nth-child(4) { animation-delay: .18s; }
  .velo-card:nth-child(5) { animation-delay: .24s; }
  .velo-card:nth-child(n+6) { animation-delay: .3s; }
}

/* Detailfenster: Foto, Fakten, Kontakt */
.velo-dialog {
  width: min(36rem, calc(100% - 2rem));
}

.velo-dialog__media {
  margin-top: 1rem;
}

/* Ohne festen Zuschnitt: Hoch- und Querformat sind komplett sichtbar,
   der Klick aufs Bild öffnet die Vollbild-Ansicht */
.velo-dialog__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  object-fit: contain;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  cursor: zoom-in;
}

/* Vollbild-Ansicht des Fotos */
.velo-zoom {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}

.velo-zoom::backdrop {
  background: rgba(8, 8, 10, .82);
}

.velo-zoom img {
  display: block;
  max-width: 94vw;
  max-height: 90vh;
  border-radius: 12px;
  cursor: zoom-out;
}

.velo-zoom__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
  background: var(--bg-elevated);
  z-index: 1;
}

.velo-dialog__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .55rem;
}

.velo-dialog__thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.velo-dialog__thumb img {
  display: block;
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 7px;
}

.velo-dialog__thumb.is-active,
.velo-dialog__thumb:hover {
  border-color: var(--accent);
}

.velo-dialog__badge {
  position: static;
  vertical-align: middle;
  margin-left: .4rem;
  box-shadow: none;
}

.velo-dialog__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .7rem 1rem;
  margin: 1rem 0 1.1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.velo-dialog__facts dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .15rem;
}

.velo-dialog__facts dd {
  margin: 0;
  font-weight: 600;
}

.velo-dialog__facts dd .velo-dot {
  margin-right: .35rem;
  vertical-align: -1px;
}

/* Mietpreis im Detailfenster: eigene Zeile unter dem Verkaufspreis, eine
   Spur leiser, mit vorangestelltem Wort «Miete». Gibt es keinen
   Verkaufspreis, ist das die einzige Preiszeile. */
.velo-dialog__miete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .2rem 0 .2rem;
  font-size: 1.05rem;
}

.velo-dialog__mietlabel {
  padding: .12rem .55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.velo-dialog__datenblatt {
  margin: 0 0 1.1rem;
}

.velo-dialog__interest {
  margin: 0 0 .6rem;
  font-weight: 600;
}

.velo-dialog__contact {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

/* --- Über-mich-Seite -------------------------------------------------------- */

.about {
  display: grid;
  gap: 1.6rem;
  align-items: start;
  margin-top: 1.2rem;
}

@media (min-width: 720px) {
  .about {
    grid-template-columns: 320px 1fr;
    gap: 2.2rem;
  }
}

.about__portrait {
  margin: 0;
}

.about__portrait img {
  display: block;
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Begrüssung: tippt sich beim Laden selbst (Schreibmaschinen-Effekt) */
.about__gruss {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
  min-height: 1.25em;
}

.about__gruss-tipp.is-tippt::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: .1em;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: gruss-cursor 1s steps(1) infinite;
  transition: opacity .6s ease;
}

.about__gruss-tipp.is-still::after {
  opacity: 0;
}

@keyframes gruss-cursor {
  50% { opacity: 0; }
}

/* Kurze Absätze in angenehmer Lesebreite statt einem langen Block */
.about__text p {
  max-width: 36rem;
  margin: 0 0 .9rem;
  line-height: 1.65;
}

.about__text p:not(.about__gruss):first-of-type,
.about__gruss + p {
  font-size: 1.12rem;
  font-weight: 600;
}

/* Hervorgehobener Satz: im Panel mit «>» am Zeilenanfang markiert */
.about__text blockquote {
  max-width: 36rem;
  margin: 1.2rem 0;
  padding: .4rem 0 .4rem 1.1rem;
  border-left: 3px solid var(--accent);
}

.about__text blockquote p {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.55;
}

.about__signatur {
  margin-top: .3rem;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  transform: rotate(-2deg);
  transform-origin: left center;
  width: fit-content;
}

.about__outro {
  max-width: 44rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-block: 1.5rem;
}

/* Zeitstrahl: Linie links, Punkte in Akzentfarbe */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 44rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.timeline__item {
  position: relative;
  padding: 0 0 1.9rem 2.4rem;
}

.timeline__item:last-child {
  padding-bottom: .3rem;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent);
}

.timeline__when {
  margin: 0 0 .15rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--accent);
}

.timeline__title {
  margin: 0 0 .25rem;
  font-size: 1.15rem;
}

.timeline__text {
  margin: 0;
  color: var(--text-muted);
}

/* Einblend-Animation, wird per JS aktiviert (ohne JS alles sichtbar) */
.timeline--animate .timeline__item {
  opacity: 0;
  translate: -18px 0;
  transition: opacity .55s ease, translate .55s ease;
}

.timeline--animate .timeline__item:nth-child(2) { transition-delay: .15s; }
.timeline--animate .timeline__item:nth-child(3) { transition-delay: .3s; }
.timeline--animate .timeline__item:nth-child(4) { transition-delay: .45s; }

.timeline--animate .timeline__item.is-visible {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .timeline--animate .timeline__item {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* Social-Media-Symbole im Footer */
.social {
  display: flex;
  gap: .6rem;
  margin-top: 1.1rem;
}

.social__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
}

.social__link .icon {
  width: 19px;
  height: 19px;
}

.social__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- Icons ---------------------------------------------------------------- */

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.button .icon {
  width: 1.15em;
  height: 1.15em;
}

/* Zeile mit Icon davor (Footer, Kontaktkarte) */
.iconline {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.iconline .icon {
  color: var(--accent);
}

/* Textlink mit Pfeil */
.textlink {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-weight: 600;
}

.textlink .icon {
  width: 1em;
  height: 1em;
  transition: translate .15s ease;
}

.textlink:hover .icon {
  translate: 3px 0;
}

/* --- Foto-Hero (Startseite mit hochgeladenem Foto) ------------------------- */

.hero-photo {
  position: relative;
  margin-top: 1.4rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Das Bild liegt als Füllung hinter dem Inhalt. Der Inhalt bestimmt die
   Höhe und bekommt oben Luft, damit ein Stück Foto frei sichtbar bleibt.
   So kann der Text auf schmalen Bildschirmen nie abgeschnitten werden. */
.hero-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-photo__content {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  padding-top: clamp(150px, 28vw, 260px);
  background: linear-gradient(to top, rgba(10, 10, 12, .78), rgba(10, 10, 12, .35) 55%, transparent 85%);
  color: #fff;
}

.hero-photo__claim {
  margin: 0 0 .3em;
  color: #fff;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.hero-photo__intro {
  max-width: 40rem;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .88);
}

.hero-photo__intro p {
  margin: 0;
}

.hero__actions--start {
  justify-content: flex-start;
  margin-top: 1.2rem;
}

/* Sekundärbutton auf dem Foto: heller Rand auf dunklem Glas, damit er
   auch auf hellen Bildstellen lesbar bleibt */
.button--onphoto {
  border-color: rgba(255, 255, 255, .85);
  color: #fff;
  background: rgba(10, 12, 16, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.button--onphoto:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(10, 12, 16, .55);
}

/* --- Titelbild auf Unterseiten ---------------------------------------------- */

/* --- Unterseiten-Hero: Text links, Bild rechts (mobil: Bild zuoberst) ---- */

.page-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-block: 1.6rem 2.5rem;
}

/* Ohne Bild bleibt es beim gewohnten einspaltigen Kopf */
.page-hero--textonly {
  display: block;
}

.page-hero h1 {
  margin: 0 0 .35em;
}

.page-hero__cta {
  margin: 1.3rem 0 0;
}

.page-hero__img,
.page-hero__media {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.page-hero__img {
  display: block;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Die animierte Shop-Szene füllt das Bildfeld, ihr eigener Rahmen bleibt */
.page-hero__media .shop-hero {
  margin: 0;
  height: 100%;
}

.page-hero__media .shop-hero svg {
  height: 100%;
}

@media (max-width: 720px) {
  .page-hero {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .page-hero__img,
  .page-hero__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }
}

/* --- Bildergalerie ------------------------------------------------------------ */

.gallery {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.gallery__item {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery__item figcaption {
  padding: .6rem .9rem;
  font-size: .9rem;
  color: var(--text-muted);
}

/* --- Cinematic-Intro (Startseite mit Foto) --------------------------------- */

/* Der Hero bricht aus main.container aus und füllt den ganzen Viewport.
   Damit die 100vw-Breite auf Systemen mit fester Scrollleiste nichts
   seitlich verschiebt, schneidet der body Überstand ab (clip erzeugt im
   Gegensatz zu hidden keinen Scrollkontext, position: sticky läuft weiter). */
body {
  overflow-x: clip;
}

/* Der Hero ist genau einen Viewport hoch und scrollt normal mit weg,
   kein Festkleben, damit nach dem Verblassen nie Leerraum bleibt. Die
   Choreografie beim Rausscrollen (Text zieht davon, Foto-Parallax)
   übernimmt intro.js. */
.intro {
  --intro-ease: cubic-bezier(.16, 1, .3, 1);
  height: 100vh;
  height: 100svh;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -.5rem; /* hebt das padding-block von main.container auf */
}

.intro__sticky {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.intro__media {
  position: absolute;
  inset: 0;
}

.intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  animation: intro-ken 3s var(--intro-ease) forwards;
}

@keyframes intro-ken {
  from { transform: scale(1.14); }
  to   { transform: scale(1.03); }
}

.intro__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 12, 16, .42), rgba(10, 12, 16, 0) 30%),
    linear-gradient(to top, rgba(10, 12, 16, .55), rgba(10, 12, 16, .08) 45%),
    radial-gradient(110% 60% at 50% 66%, rgba(10, 12, 16, .38), rgba(10, 12, 16, 0) 68%),
    rgba(10, 12, 16, .15);
}

.intro__content {
  position: relative;
  max-width: 60rem;
  padding: 0 1.2rem;
  text-align: center;
  color: #fff;
}

.intro__eyebrow {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
  opacity: 0;
  animation: intro-fade-up .8s var(--intro-ease) .2s forwards;
}

.intro__claim {
  margin: .8rem 0 0;
  color: #fff;
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  letter-spacing: -.03em;
  line-height: 1.08;
}

/* Jedes Wort sitzt in einer eigenen Maske und schiebt sich von unten rein.
   drop-shadow statt text-shadow: wirkt nach dem Zuschnitt der Wort-Masken
   und wird darum nicht als Rechteck abgeschnitten. Der Schatten liegt pro
   Wort, damit das Akzentwort ein eigenes, helles Shading bekommen kann. */
.intro__wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .08em;
  margin-bottom: -.08em;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)) drop-shadow(0 8px 22px rgba(0, 0, 0, .35));
}

/* Das orange «Engelberg» hebt sich mit weissem Schein vom Foto ab,
   schwarzer Schatten würde das Orange nur zumatschen */
.intro__wort--akzent {
  color: var(--accent);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .75)) drop-shadow(0 0 16px rgba(255, 255, 255, .45));
}

.intro__wort-inner {
  display: inline-block;
  transform: translateY(115%);
  animation: intro-wort 1s var(--intro-ease) forwards;
}

@keyframes intro-wort {
  to { transform: none; }
}

@keyframes intro-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.intro .hero__actions {
  justify-content: center;
  margin-top: 1.7rem;
  opacity: 0;
  animation: intro-fade-up .8s var(--intro-ease) .95s forwards;
}

.intro__hint {
  position: absolute;
  bottom: 1.3rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .1rem;
  color: rgba(255, 255, 255, .85);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: opacity .3s;
}

.intro__hint-pfeil {
  display: block;
  will-change: transform;
  animation: intro-bob 1.6s ease-in-out infinite;
}

.intro__hint-pfeil svg {
  display: block;
}

@keyframes intro-bob {
  50% { transform: translateY(6px); }
}

/* --- Statement: Intro-Text färbt sich Wort für Wort ein --------------------- */

/* Die überhöhte Scrollstrecke ergibt nur Sinn, wenn intro.js die Wörter
   wirklich Stück für Stück einfärbt. Läuft das Script nicht, wäre es
   sonst rund 90vh leerer Raum nach dem Text. */
.statement {
  height: auto;
}

.statement__sticky {
  display: flex;
  align-items: center;
  padding: 4rem 0;
}

.has-introjs .statement {
  height: 190vh;
}

.has-introjs .statement__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0;
}

.statement__inner {
  max-width: 50rem;
}

.statement__eyebrow {
  margin: 0 0 1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.statement__text {
  font-size: clamp(1.45rem, 3.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.statement__text p {
  margin: 0 0 .6em;
}

.statement__text p:last-child {
  margin-bottom: 0;
}

/* Wörter starten gedämpft, aber nur, wenn das Intro-Script wirklich läuft */
.has-introjs .statement__text .sw {
  opacity: .13;
}

/* Sanfte Reveals für die Abschnitte danach (Klassen vergibt intro.js) */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro__img,
  .intro__eyebrow,
  .intro__wort-inner,
  .intro .hero__actions { animation: none; opacity: 1; transform: none; }
  .intro__hint { display: none; }
  .has-introjs .statement { height: auto; }
  .has-introjs .statement__sticky { position: static; height: auto; padding: 4rem 0; }
  .has-introjs .statement__text .sw { opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Gerichtete Reveals: Karten und Abschnitte fliegen mit Charakter ein ---
   Die Grundklasse .reveal vergibt intro.js, die Richtungen ebenso. Alles
   hier drin läuft nur bei erlaubter Bewegung; ohne JS gibt es die Klassen
   nicht, dann bleibt schlicht alles sichtbar. */

@media (prefers-reduced-motion: no-preference) {
  .reveal--links  { transform: translateX(-38px); }
  .reveal--rechts { transform: translateX(38px); }

  /* Icons in Karten- und Abschnittsköpfen ploppen federnd auf */
  .reveal .card__icon,
  .reveal .section__icon {
    opacity: 0;
    transform: scale(.4) rotate(-14deg);
    transition: opacity .45s ease .15s,
                transform .6s cubic-bezier(.34, 1.56, .64, 1) .15s;
  }

  .reveal .card__title,
  .reveal .section__title {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity .5s ease .24s, transform .5s cubic-bezier(.16, 1, .3, 1) .24s;
  }

  .reveal.is-in .card__icon,
  .reveal.is-in .section__icon,
  .reveal.is-in .card__title,
  .reveal.is-in .section__title {
    opacity: 1;
    transform: none;
  }

  /* Öffnungszeiten: Zeile für Zeile, Karteninhalte kurz danach */
  .reveal .hours dt,
  .reveal .hours dd,
  .reveal .card p,
  .reveal .hours-note {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
  }

  .reveal .hours dt:nth-of-type(1), .reveal .hours dd:nth-of-type(1) { transition-delay: .3s; }
  .reveal .hours dt:nth-of-type(2), .reveal .hours dd:nth-of-type(2) { transition-delay: .38s; }
  .reveal .hours dt:nth-of-type(3), .reveal .hours dd:nth-of-type(3) { transition-delay: .46s; }
  .reveal .hours dt:nth-of-type(4), .reveal .hours dd:nth-of-type(4) { transition-delay: .54s; }
  .reveal .hours dt:nth-of-type(5), .reveal .hours dd:nth-of-type(5) { transition-delay: .62s; }
  .reveal .card p { transition-delay: .34s; }
  .reveal .hours-note { transition-delay: .7s; }

  .reveal.is-in .hours dt,
  .reveal.is-in .hours dd,
  .reveal.is-in .card p,
  .reveal.is-in .hours-note {
    opacity: 1;
    transform: none;
  }

  /* Servicezeilen gleiten nacheinander von links herein, die Preise
     ziehen von rechts nach */
  .reveal .service-table tr {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
  }

  .reveal .service-table__price {
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
  }

  .reveal .service-table tr:nth-child(1) { transition-delay: .18s; }
  .reveal .service-table tr:nth-child(2) { transition-delay: .28s; }
  .reveal .service-table tr:nth-child(3) { transition-delay: .38s; }
  .reveal .service-table tr:nth-child(4) { transition-delay: .48s; }
  .reveal .service-table tr:nth-child(5) { transition-delay: .58s; }
  .reveal .service-table tr:nth-child(6) { transition-delay: .68s; }
  .reveal .service-table tr:nth-child(1) .service-table__price { transition-delay: .34s; }
  .reveal .service-table tr:nth-child(2) .service-table__price { transition-delay: .44s; }
  .reveal .service-table tr:nth-child(3) .service-table__price { transition-delay: .54s; }
  .reveal .service-table tr:nth-child(4) .service-table__price { transition-delay: .64s; }
  .reveal .service-table tr:nth-child(5) .service-table__price { transition-delay: .74s; }
  .reveal .service-table tr:nth-child(6) .service-table__price { transition-delay: .84s; }

  .reveal.is-in .service-table tr,
  .reveal.is-in .service-table__price {
    opacity: 1;
    transform: none;
  }

  /* Galerie: Bilder werden aufgewischt und zoomen dabei sanft zurück */
  .reveal .gallery__item {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .8s cubic-bezier(.7, 0, .2, 1);
  }

  .reveal .gallery__item img {
    transform: scale(1.09);
    transition: transform .95s cubic-bezier(.16, 1, .3, 1);
  }

  .reveal .gallery__item:nth-child(2) { transition-delay: .12s; }
  .reveal .gallery__item:nth-child(3) { transition-delay: .24s; }
  .reveal .gallery__item:nth-child(4) { transition-delay: .36s; }
  .reveal .gallery__item:nth-child(2) img { transition-delay: .12s; }
  .reveal .gallery__item:nth-child(3) img { transition-delay: .24s; }
  .reveal .gallery__item:nth-child(4) img { transition-delay: .36s; }

  .reveal.is-in .gallery__item { clip-path: inset(0 0 0 0); }
  .reveal.is-in .gallery__item img { transform: scale(1); }
}

/* --- Velo-Szene: das Bike baut sich beim Scrollen zusammen ----------------
   Markup in snippets/bike-szene.php, Choreografie in intro.js. Ohne JS
   (keine Klasse has-bikejs) ist die Szene ein stinknormaler Abschnitt mit
   fertigem Velo; erst mit JS wird sie hoch und klebrig und die Teile
   starten unsichtbar. */

.bike-szene__inner {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) 3fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}

.bike-szene__eyebrow {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
}

.bike-szene__title {
  margin: 0 0 .8rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.bike-szene__text {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  max-width: 36ch;
}

.bike-szene__steps {
  display: grid;
  gap: .55rem;
  margin: 0 0 1.7rem;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.bike-szene__steps li {
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: opacity .35s ease, color .35s ease;
}

.bike-szene__punkt {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

/* Die Punkte schalten wie eine Ampel Richtung Grün: Rot, Orange, Gelb,
   und «Bereit zum Losfahren» leuchtet grün */
.bike-szene__steps li:nth-child(1) { --punkt-farbe: #e5484d; }
.bike-szene__steps li:nth-child(2) { --punkt-farbe: #f76b15; }
.bike-szene__steps li:nth-child(3) { --punkt-farbe: #f5b800; }
.bike-szene__steps li:nth-child(4) { --punkt-farbe: #2fa863; }

.bike-szene__steps li.is-active .bike-szene__punkt {
  border-color: var(--punkt-farbe);
  background: var(--punkt-farbe);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--punkt-farbe) 25%, transparent);
}

.bike-szene__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
}

/* Strichstärken und Farben der Velo-Teile */
.bike-teil {
  stroke: var(--text);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bike-teil--boden { stroke: var(--border); stroke-width: 3; }
.bike-teil--pneu { stroke-width: 7; }
.bike-teil--felge { stroke: var(--text-muted); stroke-width: 2.5; }
.bike-teil--speichen line { stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; }
.bike-teil--nabe { fill: var(--text-muted); }
.bike-teil--rahmen { stroke-width: 8; }
.bike-teil--fein { stroke-width: 5; }
.bike-teil--sattel { stroke-width: 9; }
.bike-teil--antrieb { stroke: var(--accent); stroke-width: 4.5; }
.bike-teil--kurbel { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.bike-teil--punkte circle { fill: var(--accent); }
.bike-teil--kettenlauf {
  stroke: var(--accent);
  stroke-width: 4.5;
  stroke-dasharray: .028 .016;
  stroke-linecap: round;
}

/* Drehende und ploppende Teile drehen um die eigene Mitte */
.bike-szene__svg [data-dreh],
.bike-szene__svg [data-pop] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Erst mit laufendem Script wird die Szene klebrig und die Teile
   starten unsichtbar */
.has-bikejs .bike-szene {
  height: 320vh;
}

.has-bikejs .bike-szene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.has-bikejs .bike-szene [data-fade] {
  opacity: 0;
}

.has-bikejs .bike-szene [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.has-bikejs .bike-szene__steps li {
  opacity: .4;
  color: var(--text-muted);
}

.has-bikejs .bike-szene__steps li.is-active {
  opacity: 1;
  color: var(--text);
}

.has-bikejs .bike-szene__cta {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 719px) {
  .bike-szene__inner {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .bike-szene__svg {
    max-height: 44vh;
  }

  .bike-szene__text {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-bikejs .bike-szene { height: auto; }
  .has-bikejs .bike-szene__sticky { position: static; height: auto; }
}

/* --- Reparatur-Szene: Foto per WhatsApp, alle Marken ------------------------
   Markup in snippets/reparatur-szene.php, Choreografie in intro.js. Das
   Gegenstück zur Velo-Szene, darum gespiegelt: Bühne links, Text rechts.
   Ohne JS (keine Klasse has-repjs) steht das fertige Endbild da. */

.rep-szene__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
}

@media (min-width: 720px) {
  .rep-szene__inner { grid-template-columns: 3fr minmax(240px, 2fr); }
  .rep-szene__stage { grid-column: 1; grid-row: 1; }
  .rep-szene__copy  { grid-column: 2; grid-row: 1; }
}

.rep-szene__eyebrow {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
}

.rep-szene__title {
  margin: 0 0 .9rem;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.rep-szene__text {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  max-width: 36ch;
}

/* Kleine Piktogramm-Reihe: alle Modelle willkommen */
.rep-szene__marken {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
}

.rep-szene__marken svg {
  width: 60px;
  height: auto;
  display: block;
  stroke: var(--text-muted);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.rep-szene__marken .akku { fill: var(--accent); stroke: none; }

.rep-szene__steps {
  display: grid;
  gap: .55rem;
  margin: 0 0 1.7rem;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.rep-szene__steps li {
  display: flex;
  align-items: center;
  gap: .65rem;
  transition: opacity .35s ease, color .35s ease;
}

.rep-szene__punkt {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--border);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease;
}

/* Gleiche Ampel wie in der Velo-Szene: Richtung Grün */
.rep-szene__steps li:nth-child(1) { --punkt-farbe: #e5484d; }
.rep-szene__steps li:nth-child(2) { --punkt-farbe: #f76b15; }
.rep-szene__steps li:nth-child(3) { --punkt-farbe: #f5b800; }
.rep-szene__steps li:nth-child(4) { --punkt-farbe: #2fa863; }

.rep-szene__steps li.is-active .rep-szene__punkt {
  border-color: var(--punkt-farbe);
  background: var(--punkt-farbe);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--punkt-farbe) 25%, transparent);
}

.rep-szene__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 74vh;
}

/* Strichstärken und Farben, gleiche Sprache wie das Velo */
.rep-teil {
  stroke: var(--text);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.rep-teil--boden    { stroke: var(--border); stroke-width: 3; }
.rep-teil--pneu     { stroke-width: 7; }
.rep-teil--felge    { stroke: var(--text-muted); stroke-width: 2.5; }
.rep-teil--speichen line { stroke: var(--text-muted); stroke-width: 2.5; }
.rep-teil--nabe     { fill: var(--text-muted); stroke: none; }
.rep-teil--kassette { stroke: var(--accent); stroke-width: 4.5; }
.rep-teil--kette    { stroke: var(--accent); stroke-width: 4.5; stroke-dasharray: 10 7; }
.rep-teil--macke    { stroke: var(--text-muted); stroke-width: 4; }
.rep-teil--luft     { stroke: var(--text-muted); stroke-width: 3.5; }
.rep-teil--pumpe    { stroke-width: 7; }
.rep-teil--stange   { stroke-width: 4; }
.rep-teil--schlauch { stroke: var(--accent); stroke-width: 4.5; }
.rep-teil--pump     { stroke: var(--accent); stroke-width: 5; }
.rep-teil--funkeln  { fill: var(--accent); stroke: none; }

/* Handy und Chat */
.rep-phone__rahmen  { stroke: var(--text); stroke-width: 6; fill: var(--bg-elevated); }
.rep-phone__lautsp  { stroke: var(--text-muted); stroke-width: 4; stroke-linecap: round; }
.rep-phone__linie   { stroke: var(--border); stroke-width: 1.5; }
.rep-phone__avatar  { fill: var(--accent); }
.rep-phone__eingabe { stroke: var(--border); stroke-width: 1.5; fill: var(--bg); }

.rep-chat__name    { font-size: 17px; font-weight: 700; fill: var(--text); }
.rep-chat__status  { font-size: 13px; fill: #24a55e; }
.rep-chat__text    { font-size: 18px; fill: var(--text); }
.rep-chat__platzh  { font-size: 15px; fill: var(--text-muted); }

/* Blasen: rechts die Kundschaft (grün getönt), links Lena (Karte) */
.rep-blase--kunde { fill: color-mix(in srgb, #24a55e 16%, var(--bg-elevated)); }
.rep-blase--lena  { fill: var(--bg-elevated); stroke: var(--border); stroke-width: 1.5; }
.rep-check circle { fill: #24a55e; }
.rep-check path   { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Foto-Miniatur in den Blasen */
.rep-mini { stroke: var(--text); stroke-width: 3; fill: none; stroke-linecap: round; }

/* Sucher-Ecken und Blitz */
.rep-sucher { stroke: var(--accent); stroke-width: 5; fill: none; stroke-linecap: round; }
#rep-blitz  { opacity: 0; }

/* Tipp-Punkte hüpfen, solange sie sichtbar sind */
.rep-dot { fill: var(--text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .rep-dot { animation: rep-tippen 1.1s ease-in-out infinite; }
  .rep-dot:nth-child(2) { animation-delay: .18s; }
  .rep-dot:nth-child(3) { animation-delay: .36s; }
}

@keyframes rep-tippen {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-7px); }
}

/* Elemente, die nur während der Geschichte existieren (Defekt, Sucher,
   Tipp-Punkte, Pumpe): ohne JS bleiben sie unsichtbar, es steht das
   fertige Endbild da. */
.rep-szene [data-weg] { opacity: 0; }

/* Drehende und ploppende Teile drehen um die eigene Mitte */
.rep-szene__svg [data-pop] { transform-box: fill-box; transform-origin: center; }
#rep-speichen { transform-box: fill-box; transform-origin: center; }
#rep-rund     { transform-box: fill-box; transform-origin: center; }

/* Erst mit laufendem Script wird die Szene hoch und klebrig */
.has-repjs .rep-szene { height: 280vh; }

.has-repjs .rep-szene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}

.has-repjs .rep-szene [data-fade] { opacity: 0; }

.has-repjs .rep-szene [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.has-repjs .rep-szene__steps li { opacity: .4; color: var(--text-muted); }
.has-repjs .rep-szene__steps li.is-active { opacity: 1; color: var(--text); }

.has-repjs .rep-szene__cta { opacity: 0; pointer-events: none; }

@media (max-width: 719px) {
  .rep-szene__svg { max-height: 40vh; }
  .rep-szene__text { max-width: none; margin-bottom: 1.1rem; }
  .rep-szene__marken svg { width: 52px; }
  .rep-szene__steps { margin-bottom: 1.2rem; }

  /* Einspaltig ist der Inhalt höher als der Bildschirm: Text mit dem
     Knopf nach oben, Bühne darunter, und oben anschlagen. So bleiben
     Titel, Schritte und Knopf sichtbar und nur die Bühne wird auf ganz
     kurzen Bildschirmen unten angeschnitten. */
  .rep-szene__copy  { order: 1; }
  .rep-szene__stage { order: 2; }
  .has-repjs .rep-szene__sticky { align-items: flex-start; padding-top: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .has-repjs .rep-szene { height: auto; }
  .has-repjs .rep-szene__sticky { position: static; height: auto; }
}

/* --- Reparatur-Hinweis auf der Service-Seite ---------------------------------
   Kleine Endlos-Animation ohne JS: Ein Handy fotografiert ein Bike mit
   plattem Hinterrad. Die Sucher-Ecken fokussieren im Takt, dann leuchtet
   kurz der Blitz auf. Bei «Bewegung reduzieren» steht alles still. */

.rep-kompakt {
  display: grid;
  grid-template-columns: minmax(200px, 290px) 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: 2.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

.rep-kompakt__svg { display: block; width: 100%; height: auto; }

.rep-kompakt__linie {
  stroke: var(--text);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rep-kompakt__boden { stroke: var(--border); stroke-linecap: round; }
.rep-kompakt__macke { stroke: var(--text-muted); fill: none; stroke-linecap: round; }

.rep-kompakt__sucher path {
  stroke: var(--accent);
  stroke-width: 4.5;
  fill: none;
  stroke-linecap: round;
}

.rep-kompakt__sucher {
  transform-box: fill-box;
  transform-origin: center;
}

.rep-kompakt__blitz { opacity: 0; }

.rep-kompakt__gehaeuse { stroke: var(--text); stroke-width: 4.5; fill: var(--bg-elevated); }
.rep-kompakt__insel    { stroke: var(--text-muted); stroke-width: 2.5; fill: none; }
.rep-kompakt__linse    { stroke: var(--text-muted); stroke-width: 2.5; fill: none; }
.rep-kompakt__licht    { fill: var(--accent); }

/* Alle vier Sekunden ein Foto: fokussieren, knipsen */
@media (prefers-reduced-motion: no-preference) {
  .rep-kompakt__sucher { animation: rep-fokus 4s ease-in-out infinite; }
  .rep-kompakt__blitz  { animation: rep-knips 4s ease-out infinite; }
  .rep-kompakt__licht  { animation: rep-knipslicht 4s ease-out infinite; }
}

@keyframes rep-fokus {
  0%, 30%, 70%, 100% { transform: scale(1); }
  45%, 58%           { transform: scale(.93); }
}

@keyframes rep-knips {
  0%, 49%, 60%, 100% { opacity: 0; }
  53%                { opacity: .9; }
}

@keyframes rep-knipslicht {
  0%, 49%, 60%, 100% { fill: var(--accent); }
  53%                { fill: #fff; }
}

.rep-kompakt__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.rep-kompakt__text {
  margin: 0 0 1.1rem;
  color: var(--text-muted);
  max-width: 46ch;
}

@media (max-width: 599px) {
  .rep-kompakt { grid-template-columns: 1fr; }
  .rep-kompakt__svg { max-width: 260px; }
}

/* --- Burger-Navigation (schmale Bildschirme und Tablets) --------------------
   Grenze bewusst bei 1080px: Logo und Navigation brauchen zusammen rund
   1010px. Darunter würde die Navigation unter das Logo umbrechen, deshalb
   kommt dort der Burger. iPads im Querformat ab 1133px zeigen die volle
   Navigation neben dem Logo. */

.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  justify-items: center;
  align-content: center;
  gap: 4px;
}

.nav-burger:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.nav-burger__line {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s, opacity .2s;
}

.site-header.is-open .nav-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.is-open .nav-burger__line:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Auf breiten Bildschirmen verhalten sich die Werkzeuge wie direkte
   Nav-Kinder, das Markup bleibt für beide Welten gleich */
.nav__tools {
  display: contents;
}

@media (max-width: 1080px) {
  .nav-burger {
    display: grid;
  }

  .nav {
    display: none;
  }

  .site-header.is-open .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .1rem;
    padding: .3rem 0 1rem;
    animation: nav-auf .28s cubic-bezier(.16, 1, .3, 1);
  }

  @keyframes nav-auf {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }

  .site-header.is-open .nav > a:not(.button) {
    padding: .6rem .2rem;
    border-bottom: 1px solid var(--border);
  }

  .site-header.is-open .nav > a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--border);
  }

  .site-header.is-open .nav__cta {
    margin-top: .8rem;
    justify-content: center;
  }

  .site-header.is-open .nav__tools {
    display: flex;
    gap: .7rem;
    padding-top: .9rem;
  }
}

/* Ohne JavaScript kann der Burger nichts aufklappen. Dann steht die
   Navigation umgebrochen unter dem Logo, statt gar nicht erreichbar zu
   sein, und der wirkungslose Knopf verschwindet. */
@media (max-width: 1080px) and (scripting: none) {
  .nav-burger {
    display: none;
  }

  .nav {
    display: flex;
    width: 100%;
    gap: .6rem 1.1rem;
    padding-bottom: .4rem;
  }

  .nav__tools {
    display: flex;
    gap: .7rem;
  }
}

/* --- Zurück nach oben: Velorad mit Scroll-Fortschritt -------------------- */

.totop {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.5rem);
  bottom: clamp(.9rem, 3vw, 1.5rem);
  z-index: 30;
  width: 56px;
  height: 56px;
  padding: 3px;
  /* Die Kontur bewusst als echter Rahmen und nicht als zweiter Schatten:
     der Knopf steht mit --bg-elevated auf --bg und hat damit nur 1,05:1
     Eigenkontrast. Hinge die Abgrenzung am box-shadow, wäre er bei einem
     Fehler in der Schatten-Variable komplett unsichtbar. Die Aussenmasse
     bleiben dank box-sizing: border-box unverändert. */
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  /* Nur durchsichtig reicht nicht: Der Knopf bliebe für Tastatur und
     Screenreader vorhanden, obwohl visuell nichts da ist. */
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .totop {
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
}

.totop.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

/* Auf schmalen Screens kleiner und leicht durchscheinend, damit das Rad
   möglichst wenig Inhalt verdeckt (z.B. rechtsbündige Preise) */
@media (max-width: 540px) {
  .totop {
    width: 44px;
    height: 44px;
  }

  .totop.is-visible {
    opacity: .82;
  }

  .totop.is-visible:hover,
  .totop.is-visible:focus-visible {
    opacity: 1;
  }
}

.totop.is-visible:hover {
  transform: translateY(-2px);
}

.totop__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.totop__tire {
  fill: none;
  stroke: var(--text);
  stroke-width: 4.5;
}

/* Fortschrittsring auf dem Pneu: Umfang 2*PI*24, Offset setzt theme.js */
.totop__progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 150.8;
  stroke-dashoffset: 150.8;
}

.totop__rim {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.75;
}

.totop__spokes line {
  stroke: var(--text-muted);
  stroke-width: 1;
}

.totop__valve {
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.totop__hub {
  fill: var(--bg-elevated);
  stroke: var(--border);
}

.totop__chevron {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Drehpunkt fürs Mitrollen (theme.js dreht die Gruppe beim Scrollen) */
.totop__roll {
  transform-origin: 28px 28px;
}