/* ============================================================
   HOFMANN MOTORRAD — ONE-PAGE-ERWEITERUNG
   Umbau 30.07.2026 auf Kundenwunsch (Florian Hofmann):
   alles auf EINER Seite, Kopfleiste = Sprungmarken.
   Ergänzt site.css, überschreibt nichts Bestehendes.
   ============================================================ */

/* --- Anker springen nicht unter die feste Kopfleiste --- */
:root {
  --nav-h: 76px;
}
[id] {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
/* Kein globales scroll-behavior: smooth — die Sprünge steuert onepage.js
   (siehe Kommentar dort). */

/* Die angeschnittene Bilder-Galerie (.hscroll) ragt bewusst über den Rand.
   Am body allein greift overflow-x nicht, deshalb ließ sich die Seite auf dem
   Handy seitlich verschieben (390 px Viewport, 410 px Dokument). "clip" stoppt
   das, ohne einen zusätzlichen Scroll-Container zu erzeugen. */
html {
  overflow-x: clip;
}

/* --- aktive Sprungmarke (Scrollspy) --- */
.nav__links a.is-active:not(.nav__cta) {
  color: var(--ink);
}
.nav__links > a.is-active:not(.nav__cta),
.nav__item > a.is-active {
  position: relative;
}
.nav__links > a.is-active:not(.nav__cta)::after,
.nav__item > a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  background: var(--accent);
}

/* --- Burger + mobiles Sprungmarken-Panel --- */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background 0.2s;
}
.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease-out);
}
.nav__burger span::before {
  top: -6px;
}
.nav__burger span::after {
  top: 6px;
}
body.menu-open .nav__burger span {
  background: transparent;
}
body.menu-open .nav__burger span::before {
  transform: translateY(6px) rotate(45deg);
}
body.menu-open .nav__burger span::after {
  transform: translateY(-6px) rotate(-45deg);
}

.navpanel {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: color-mix(in srgb, var(--sunken) 97%, transparent);
  backdrop-filter: blur(10px);
  padding: calc(var(--nav-h) + 1.2rem) var(--pad) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s var(--ease-out),
    visibility 0.25s;
}
body.menu-open .navpanel {
  opacity: 1;
  visibility: visible;
}
.navpanel__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}
.navpanel__list a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.navpanel__list a .n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-text);
  min-width: 1.6rem;
}
.navpanel__list a.is-sub {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-muted);
  padding-left: 2.5rem;
}
.navpanel__list a.is-active {
  color: var(--accent-text);
}
.navpanel__foot {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

@media (max-width: 900px) {
  .nav__burger {
    display: inline-flex;
  }
  /* Im offenen Menü drängelt der CTA neben dem X — er steht unten im Panel. */
  body.menu-open .nav__cta {
    display: none;
  }
}
@media (min-width: 901px) {
  .navpanel {
    display: none;
  }
}

/* ============================================================ LEISTUNGEN IM DETAIL (Accordion) */
.lsvc-sec__hint {
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin: 0 0 1.6rem;
}
.lsvc-list {
  border-top: 1px solid var(--line-strong);
}
.lsvc {
  border-bottom: 1px solid var(--line-strong);
}
.lsvc__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
}
.lsvc__head::-webkit-details-marker {
  display: none;
}
.lsvc__head::marker {
  content: "";
}
.lsvc__head:hover .lsvc__title b {
  color: var(--accent-text);
}
.lsvc__head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.lsvc__n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-text);
  border: 1px solid var(--line-accent);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
}
.lsvc__title b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  color: var(--ink);
  line-height: 1.2;
  transition: color 0.2s;
}
.lsvc__sub {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
  max-width: 70ch;
}
.lsvc__toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink-muted);
  flex: none;
  transition:
    transform 0.3s var(--ease-out),
    border-color 0.2s,
    color 0.2s;
}
.lsvc__toggle svg {
  width: 16px;
  height: 16px;
}
.lsvc[open] .lsvc__toggle {
  transform: rotate(180deg);
  border-color: var(--line-accent);
  color: var(--accent-text);
}
/* Der Einleitungssatz bleibt auch im geöffneten Zustand stehen — er ist der
   Kerntext der früheren Unterseite und soll nicht beim Aufklappen verschwinden. */
.lsvc[open] .lsvc__sub {
  color: var(--ink-muted);
}
.lsvc__body {
  padding: 0.4rem 0 2.4rem;
  animation: lsvcIn 0.35s var(--ease-out);
}
@keyframes lsvcIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lsvc__body {
    animation: none;
  }
}
.lsvc__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  align-items: start;
}
.lsvc__text p {
  margin: 0 0 0.9rem;
  max-width: 62ch;
}
.lsvc__media .plate-frame {
  margin: 0;
}
.lsvc__h {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 2rem 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.lsvc__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.6rem;
}
.lsvc__feat b {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.97rem;
  margin-bottom: 0.25rem;
}
.lsvc__feat b .tick {
  color: var(--accent-text);
  flex: none;
}
.lsvc__feat span {
  font-size: 0.88rem;
  color: var(--ink-muted);
}
.lsvc__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}
.lsvc__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
}
.lsvc__steps .step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 1.85rem;
  background: var(--ink);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  border-radius: 5px;
  font-size: 0.92rem;
}
.lsvc__steps b {
  color: var(--ink);
  display: block;
  margin-bottom: 0.1rem;
}
.lsvc__steps p {
  margin: 0;
  font-size: 0.9rem;
}
.lsvc__note {
  margin: 1.6rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--line-accent);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.lsvc__cta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.lsvc__cta b {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 1.05rem;
}
.lsvc__cta span {
  color: var(--ink-muted);
  font-size: 0.92rem;
  flex: 1 1 14rem;
}
@media (max-width: 900px) {
  .lsvc__grid {
    grid-template-columns: 1fr;
  }
  .lsvc__features {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .lsvc__features {
    grid-template-columns: 1fr;
  }
  .lsvc__head {
    gap: 0.7rem;
  }
  .lsvc__toggle {
    width: 30px;
    height: 30px;
  }
}

/* ============================================================ SIMSON-VERMIETUNG */
.rent {
  background: var(--sunken);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
  overflow: hidden;
}
.rent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 88% 12%,
    rgba(220, 68, 37, 0.12),
    transparent 60%
  );
  pointer-events: none;
}
.rent__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.6rem, 5vw, 3.4rem);
  align-items: center;
  position: relative;
}
.rent__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  margin-bottom: 1rem;
}
.rent h2 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  margin: 0 0 0.9rem;
}
.rent__points {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.rent__points li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.rent__points b {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
  margin-bottom: 0.15rem;
}
.rent__points span {
  font-size: 0.89rem;
  color: var(--ink-muted);
}
.rent__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.7rem;
}
.rent__hint {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.rent__media .plate-frame {
  position: relative;
}
/* Der Bildausschnitt soll auf den Simson-Tanks liegen, nicht auf der Menge. */
.rent__media .plate-frame img {
  object-position: center 68%;
}
.rent__stamp {
  position: absolute;
  left: -0.6rem;
  bottom: -0.6rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  color: var(--accent);
  background: var(--sunken);
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 0.1rem 0.7rem 0.25rem;
  transform: rotate(-4deg);
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .rent__grid {
    grid-template-columns: 1fr;
  }
  .rent__media {
    order: -1;
  }
}

/* ============================================================ RECHTLICHES (Sektionen statt Extra-Seiten) */
.legal-sec {
  background: var(--sunken);
  border-top: 1px solid var(--line-strong);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.legal-block + .legal-block {
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}
.legal-block__h {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  margin: 0 0 1.4rem;
}
.legal-prose {
  max-width: 78ch;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ink-muted);
}
.legal-prose h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  margin: 1.7rem 0 0.4rem;
  letter-spacing: 0.01em;
}
.legal-prose h3:first-child {
  margin-top: 0;
}
.legal-prose p {
  margin: 0 0 0.7rem;
}
.legal-prose a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-prose .todo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--warn);
  background: rgba(228, 161, 58, 0.1);
  border: 1px dashed rgba(228, 161, 58, 0.4);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}
.legal-prose ul {
  margin: 0 0 0.9rem;
  padding-left: 1.1rem;
}
.legal-prose li {
  margin-bottom: 0.3rem;
}

/* --- Einleitung einer übernommenen Sektion (früher der Seitenkopf) --- */
.onepage-intro {
  padding-block: clamp(2.6rem, 6vw, 4rem) 0;
}
.onepage-intro .tag-caption {
  margin-bottom: 0.6rem;
}
.onepage-intro h2 {
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  margin: 0 0 0.9rem;
}
.onepage-intro .subhero__lead,
.onepage-intro .lead {
  max-width: 62ch;
  margin-bottom: 1.4rem;
}
.onepage-intro .hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* --- aus den alten Unterseiten übernommene Blöcke --- */
.onepage-part {
  display: block;
}
.onepage-part > section {
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
}

/* Die beiden Bilder-Galerien kamen aus zwei verschiedenen Unterseiten und
   waren dort unterschiedlich hoch (338 px in "Aus der Garage", 540 px in
   "Aus der Szene"). Auf einer durchgehenden Seite fällt das als Bruch auf,
   und die flachere Reihe wirkt während der gepinnten Scroll-Strecke verloren,
   weil darunter der halbe Bildschirm leer bleibt. Deshalb: eine gemeinsame
   Höhe und die Reihe mittig im gepinnten Bereich. */
.onepage-part .hscroll {
  display: flex;
  align-items: center;
}
.onepage-part .hscroll__item {
  height: min(56vh, 460px);
}
/* Ab Tablet wird die Reihe beim Scrollen festgehalten (app.js, Pin + Scrub).
   Damit in dieser Phase nicht der halbe Bildschirm leer bleibt, füllt der
   festgehaltene Bereich die Fensterhöhe und die Bilder sitzen mittig darin.
   Unter 821 px greift der Pin nicht — dort bleibt die Reihe kompakt. */
@media (min-width: 821px) {
  .onepage-part .hscroll {
    min-height: calc(100svh - 96px);
  }
}
.onepage-part .hscroll__item img {
  height: 100%;
  object-fit: cover;
}

/* Bilder in der waagerechten Reihe, die rechts außerhalb starten, wurden vom
   Scroll-Reveal nie eingeblendet und blieben unsichtbar. Sie brauchen kein
   Reveal — die Reihe bewegt sich ohnehin. */
.hscroll .reveal,
.hscroll .batch-reveal {
  opacity: 1 !important;
  transform: none !important;
}