/* ===========================================================================
   Unterseiten des EMX-Park
   ---------------------------------------------------------------------------
   Die Startseite ist eine durchgehende Buehne: jeder Abschnitt fuellt einen
   Bildschirm. Fuer eine Inhaltsseite waere das falsch - dort soll man lesen,
   nicht durch Kapitel wandern. Dieses Blatt wird nur auf Unterseiten geladen
   und stellt genau das um.

   Farben, Schriftgroessen und Abstaende kommen aus styles.css. Hier steht
   nichts, was dort schon geregelt ist.
   =========================================================================== */

/* Die Regel aus styles.css bindet jeden Abschnitt an die Bildschirmhoehe.
   Auf einer Inhaltsseite entstuenden daraus riesige leere Flaechen. */
.unterseite main > section,
.unterseite main > footer {
  min-height: 0;
}

.unterseite {
  background: #fff;
}

.unterseite main {
  display: block;
  padding-top: var(--header-h, 72px);
}

/* --- Kopf der Seite ------------------------------------------------------ */
.seiten-kopf {
  padding: clamp(34px, 7vw, 68px) var(--page-gutter, 18px) clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--line, #e6e6e6);
  background: #f7f7f5;
}

.seiten-kopf .section-caption {
  margin-bottom: var(--space-3);
}

.seiten-kopf h1 {
  max-width: 18ch;
  margin: 0;
  font-size: 3.25rem;
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: uppercase;
}

.seiten-kopf p {
  max-width: 56ch;
  margin: 14px 0 0;
  color: var(--grau-text, #6b6b6b);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* --- Inhaltsbereich ------------------------------------------------------ */
.seiten-inhalt {
  padding: clamp(28px, 6vw, 60px) var(--page-gutter, 18px) clamp(40px, 8vw, 90px);
}

.seiten-inhalt > * + * {
  margin-top: clamp(26px, 5vw, 46px);
}

.seiten-block h2 {
  margin: 0 0 14px;
  font-size: 1.75rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.seiten-block p {
  max-width: 68ch;
  margin: 0 0 14px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

/* --- Datenliste (technische Daten, Bedingungen) -------------------------- */
.daten-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

.daten-liste li {
  display: grid;
  gap: var(--space-1);
  padding: 14px 16px;
  border: 1px solid var(--line, #e6e6e6);
  background: #fff;
}

.daten-liste li > a {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-1);
  width: 100%;
  padding-right: 34px;
  color: inherit;
}

.daten-liste li > a::after {
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 4px;
  color: var(--orange, #f25c27);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-52%);
  transition: transform 0.2s ease;
}

.daten-liste li:has(> a) {
  transition: border-color 0.2s ease, background 0.2s ease;
}

.daten-liste li:has(> a):hover,
.daten-liste li:has(> a):focus-within {
  border-color: var(--orange, #f25c27);
  background: #fffaf7;
}

.daten-liste li > a:hover::after,
.daten-liste li > a:focus-visible::after {
  transform: translate(4px, -52%);
}

.daten-liste span {
  color: var(--grau-text, #6b6b6b);
  font-size: var(--fs-100);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.daten-liste strong {
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.15;
}

/* --- Preiskarten --------------------------------------------------------- */
.preis-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.preis-karte {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 22px;
  border: 1px solid var(--line, #e6e6e6);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.preis-karte header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.preis-karte h2 {
  margin: 0;
  font-size: clamp(17px, 4.4vw, 20px);
  text-transform: uppercase;
}

.preis-karte .preis {
  color: var(--orange-dark, #c84612);
  font-size: clamp(19px, 5vw, 24px);
  font-weight: 800;
  white-space: nowrap;
}

.preis-karte .preis small {
  display: block;
  color: var(--grau-text, #6b6b6b);
  font-size: var(--fs-100);
  font-weight: 700;
  text-align: right;
}

.preis-karte ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.preis-karte li {
  position: relative;
  padding: 5px 0 5px 20px;
  font-size: var(--fs-400);
  line-height: 1.45;
}

.preis-karte li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange, #ff5b16);
}

/* --- Hinweiskasten ------------------------------------------------------- */
.hinweis-kasten {
  padding: 16px 18px;
  border-left: 4px solid var(--orange, #ff5b16);
  border-radius: 0 10px 10px 0;
  background: #f7f7f5;
}

.hinweis-kasten p {
  max-width: 68ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}

/* --- Fragen und Antworten ------------------------------------------------ */
.fragen-liste {
  border-top: 1px solid var(--line, #e6e6e6);
}

.fragen-liste details {
  border-bottom: 1px solid var(--line, #e6e6e6);
}

.fragen-liste summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

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

.fragen-liste summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--orange-dark, #c84612);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.fragen-liste details[open] summary::after {
  content: "\2212";
}

.fragen-liste details > p {
  max-width: 68ch;
  margin: 0;
  padding: 0 0 18px;
  color: var(--grau-text, #6b6b6b);
  font-size: 1rem;
  line-height: 1.6;
}

/* --- Handlungsaufforderung am Seitenende --------------------------------- */
.seiten-cta {
  display: grid;
  gap: var(--space-4);
  padding: clamp(30px, 6vw, 54px) var(--page-gutter, 18px);
  background: #0b0b0b;
  color: #fff;
  text-align: center;
}

.seiten-cta h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.seiten-cta p {
  max-width: 52ch;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.55;
}

.seiten-cta a {
  justify-self: center;
  min-height: 52px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  /* Kleiner weisser Text auf Orange: das helle ergibt 3.11:1, das dunkle
     4.84:1. Dieselbe Regel wie auf der Startseite. */
  background: var(--orange-dark, #c84612);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* --- Breite Bildschirme -------------------------------------------------- */
@media (min-width: 900px) {
  .seiten-kopf,
  .seiten-inhalt,
  .seiten-cta {
    padding-right: max(var(--page-gutter, 24px), calc((100vw - 1180px) / 2));
    padding-left: max(var(--page-gutter, 24px), calc((100vw - 1180px) / 2));
  }
}

/* --- Alle Bereiche im Fussbereich ---------------------------------------
   Verlinkt jede Seite von jeder Seite. Eine Seite, auf die kein Verweis
   zeigt, wird von Suchmaschinen seltener besucht und schlechter bewertet -
   und Besucher finden sie ohne Umweg ueber das Menue gar nicht. */
.footer-sitemap {
  /* Der Fussbereich ist ein Raster. Ohne eigene Spaltenangabe landet die
     Leiste in derselben Zelle wie die Kontaktspalten und legt sich ueber
     deren Verweise. */
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  /* Ohne diese Zeile strecken sich die Verweise auf die Hoehe ihrer Zeile -
     bei einer hohen Zeile waren sie 156px hoch und lagen ueber den Links
     darunter. */
  align-items: center;
  align-content: flex-start;
  gap: 8px 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-sitemap a {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-300);
  line-height: 1.5;
}

.footer-sitemap a:hover,
.footer-sitemap a:focus-visible {
  color: #fff;
}

/* --- Tippziele ----------------------------------------------------------
   Verweise mitten im Text sind ausgenommen, aber diese hier stehen fuer
   sich: Telefonnummer, Adresse, Fussbereich. Bei 20 bis 25px Hoehe trifft
   man sie mit dem Daumen nicht zuverlaessig - 44px ist das Mass, das auch
   im Buchungsprogramm gilt. */
.daten-liste a,
.footer-sitemap a,
.footer-details a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.daten-liste strong a {
  min-height: 44px;
}

/* Kurze Woerter wie "Home" sind nur 40px breit. Seitliche Polsterung bringt
   sie auf das Mindestmass, ohne die sichtbaren Abstaende zu veraendern -
   der Zwischenraum wandert vom Rasterabstand in die Polsterung. */
.footer-sitemap {
  gap: 0 2px;
}

.footer-sitemap a {
  padding: 0 8px;
}

/* --- Bilder --------------------------------------------------------------
   Ein Motocross-Park verkauft sich ueber Bilder, nicht ueber Absaetze. Die
   Unterseiten waren Text auf Weiss - das war die groesste Luecke gegenueber
   der bestehenden Seite.

   aspect-ratio statt fester Hoehen: das Seitenverhaeltnis steht damit schon
   vor dem Laden fest und der Text springt beim Nachladen nicht nach unten. */
.seiten-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

/* Bewertungszeile: bewusst mit Quelle UND Anzahl - keine geschoente Zahl.
   Orange in der lesbaren Variante (#c84612), damit der Kontrast haelt. */
.bewertung-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-400);
  color: var(--grau-text, #6b6b6b);
}
.bewertung-zeile .sterne {
  color: #c84612;
  letter-spacing: 2px;
}
.bewertung-zeile strong {
  color: var(--text, #0b0b0b);
}
.bewertung-zeile a {
  color: #c84612;
}

.park-status-inline {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 8px;
  color: var(--text, #0b0b0b);
  font-size: var(--fs-400);
  font-weight: 700;
  text-decoration: none;
}
.park-status-inline i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8b8b8b;
}
.park-status-inline[data-status="open"] i { background: #278a48; }
.park-status-inline[data-status="closed"] i { background: #c84612; }
.park-status-inline[data-status="unknown"] i { background: #b47a00; }

.bild-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 10px;
}

@media (min-width: 900px) {
  .bild-galerie-drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bild-galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

/* Bewusst KEIN randloses Bild ueber negative Raender: die verschieben das
   Element, verbreitern es aber nicht - das Bild sass dadurch 33px zu weit
   links. Es bleibt innerhalb derselben Polsterung wie der Text. Einheitlich
   und ohne Sonderfaelle. */
.bild-breit {
  aspect-ratio: 3 / 2;
}

/* Breites Bild direkt vor einer Galerie (Park, Stark VARG): ohne diesen
   Abstand klebten die ersten beiden Bilder aneinander, waehrend die
   Galeriebilder untereinander 10px Luft haben. Gleicher Abstand wie dort. */
.seiten-bild + .bild-galerie {
  margin-top: 10px;
}

/* --- Startplatz-Unterseite ------------------------------------------------
   Der Seitenkopf erklaert den Zweck bereits. Die zweite, fuer die lange
   Startseite gedachte Marketing-Ueberschrift wuerde Datum und Uhrzeit nur
   nach unten schieben und denselben Inhalt doppelt sagen. */
.unterseite #startplatz.booking-section .booking-heading {
  display: none;
}

/* --- Kompakter, lesbarer Unterseiten-Fussbereich --------------------------
   Die globale Footer-Buehne ist auf die bildstarke Startseite zugeschnitten.
   Auf Unterseiten gibt es weder Kontakt-Hero noch Foto: dort soll der Footer
   die volle Breite nutzen und die Kontaktdaten ohne leere Bildschirmflaechen
   zeigen. */
.unterseite .footer {
  display: block;
  padding: 0;
}

.unterseite .footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 3.5fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: start;
  padding: 58px max(var(--page-gutter, 24px), calc((100vw - 1600px) / 2)) 44px;
}

.unterseite .footer-grid > div:first-child p {
  max-width: 280px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--fs-500);
  line-height: 1.6;
}

.unterseite .footer-logo {
  width: 132px;
  margin: 0 0 20px;
}

.unterseite .footer-details {
  grid-column: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 58px);
  min-height: 0;
  padding: 8px 0 0;
  border: 0;
}

.unterseite .footer-details > div {
  gap: var(--space-2);
}

.unterseite .footer-details strong {
  margin-bottom: 10px;
  font-size: var(--fs-300);
  letter-spacing: 0.12em;
}

.unterseite .footer-details a,
.unterseite .footer-details p,
.unterseite .footer-details span {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-500);
  line-height: 1.55;
}

.unterseite .footer-sitemap {
  margin: 0;
  padding: 18px max(var(--page-gutter, 24px), calc((100vw - 1600px) / 2));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.unterseite .footer-sitemap a {
  font-size: var(--fs-400);
}

.unterseite .footer-legal {
  margin: 0;
  padding: 14px max(var(--page-gutter, 24px), calc((100vw - 1600px) / 2)) 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-400);
}

@media (max-width: 1100px) {
  .unterseite .footer-grid {
    grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2.2fr);
    gap: 38px;
  }

  .unterseite .footer-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 32px;
  }
}

@media (max-width: 700px) {
  .seiten-kopf h1 { font-size: 2rem; line-height: 1.12; }
  .seiten-kopf p { font-size: 1rem; }
  .seiten-block h2 { font-size: 1.5rem; }
  .seiten-cta h2 { font-size: 1.5rem; }

  .unterseite .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: 42px 18px 30px;
  }

  .unterseite .footer-grid > div:first-child p {
    max-width: 34ch;
  }

  .unterseite .footer-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px;
    padding: 0;
  }

  .unterseite .footer-sitemap {
    padding: 14px 10px;
  }

  .unterseite .footer-sitemap a {
    font-size: var(--fs-300);
  }

  .unterseite .footer-legal {
    gap: 4px 14px;
    padding: 12px 18px 20px;
    font-size: var(--fs-300);
  }
}

@media (max-width: 380px) {
  .unterseite .footer-details {
    grid-template-columns: 1fr;
  }
}

.park-overview { margin: 0; }
.park-overview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.park-overview figcaption { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--grau-text); }
.visit-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.visit-steps li { min-width: 0; }
.visit-steps img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.visit-steps h3 { margin: 20px 0 10px; font-size: 1.25rem; line-height: 1.3; }
@media (max-width: 700px) {
  .visit-steps { grid-template-columns: 1fr; gap: 32px; }
}

/* Bike information stays beside its image, in the same order as booking. */
.bike-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.bike-catalog-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fff;
}
.bike-catalog-item > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 564;
  object-fit: contain;
  background: #f7f7f5;
}
.bike-catalog-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
.bike-catalog-copy h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.bike-catalog-copy p { margin: 0; font-size: 16px; line-height: 1.6; }
.bike-catalog-copy .bike-catalog-category { color: #626262; font-size: 14px; }
.bike-catalog-fit {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  border-left: 4px solid var(--orange-action);
}
.bike-catalog-fit span { font-size: 14px; }
.bike-catalog-fit strong { font-size: 22px; line-height: 1.4; }
.bike-catalog-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-top: auto;
  padding: 12px 0;
  border-top: 1px solid #dcdcdc;
  color: var(--orange-on-light);
  font-size: 16px;
  font-weight: 700;
}
.bike-catalog-link:hover { text-decoration: underline; }
.bike-catalog-link:focus-visible { outline: 3px solid var(--orange-on-light); outline-offset: 3px; }
.bike-catalog > .hinweis-kasten { margin-top: 32px; }
@media (max-width: 1100px) {
  .bike-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bike-catalog-grid { grid-template-columns: 1fr; gap: 20px; }
  .bike-catalog-copy { padding: 20px; }
}

/* --- Du bist hier (Brotkrumen) --------------------------------------------
   Wer mitten auf einer Unterseite landet, sieht sofort, wo er ist, und kommt
   mit einem Tipp eine Ebene hoeher. Tippflaechen mindestens 44px hoch. */
.brotkrumen {
  padding: 6px var(--page-gutter, 18px) 0;
  background: #f7f7f5;
  font-size: var(--fs-400, 0.875rem);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brotkrumen li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--grau-text, #6b6b6b);
}

.brotkrumen li + li::before {
  content: "\203A";
  color: #8a8a8a;
  font-size: 1.15em;
}

.brotkrumen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text, #0b0b0b);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brotkrumen a:focus-visible {
  outline: 3px solid var(--orange-action, #c84612);
  outline-offset: 2px;
}

.brotkrumen + .seiten-kopf {
  padding-top: clamp(8px, 2.5vw, 24px);
}