/* besuch.css: Zeiten und Anfahrt. Selektoren unter .p-besuch. */

.p-besuch { padding-block: var(--s-7) var(--section); row-gap: var(--s-8); }

/* Ankerabstand zur Kopfzeile kommt aus html { scroll-padding-top } in base.css (ein zusätzliches scroll-margin verdoppelte ihn) */

/* Zeiten --------------------------------------------------------------------- */
.p-besuch .season {
  margin-top: var(--s-3);
  color: var(--muted);
  font-size: var(--step-1);
}

.p-besuch .zeiten .advent { margin-top: var(--s-6); }

@media (min-width: 1200px) {
  .p-besuch h1 { font-size: min(5.5vw, 6rem); }
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
  .p-besuch .advent .advent__d { font-size: var(--step-2); }
  .p-besuch .advent time { min-width: 2.5rem; }
}

.p-besuch .hours {
  width: 100%;
  margin-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.p-besuch .hours tr { border-bottom: 1px solid var(--line); }

.p-besuch .hours th,
.p-besuch .hours td {
  padding-block: var(--s-4);
  text-align: left;
  vertical-align: baseline;
}

.p-besuch .hours tbody th {
  width: 42%;
  padding-right: var(--s-3);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
}

.p-besuch .hours td {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-5);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

.p-besuch .hours__unit {
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--muted);
}

.p-besuch .last-evening {
  margin-top: var(--s-5);
  color: var(--muted);
  font-size: var(--step-0);
}

/* Anfahrt -------------------------------------------------------------------- */
.p-besuch .anfahrt {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background: var(--bg-2);
  border-radius: var(--radius);
}

.p-besuch .addr {
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.4;
}

.p-besuch .anfahrt .btn { width: 100%; }

.p-besuch .note {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 500;
}

.p-besuch .contact { margin: auto 0 0; padding-top: var(--s-4); }

.p-besuch .contact > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--s-4);
  min-height: 56px;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}

.p-besuch .contact dt { color: var(--muted); font-size: var(--step--1); font-weight: 500; }
.p-besuch .contact dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.p-besuch .contact a { display: inline-flex; align-items: center; min-height: 44px; }

/* Gut zu wissen: Bus, Parken, Bezahlen, Pfand, Hunde & Kinder (gleiche Zeilen wie Kontakt) */
.p-besuch .gut-h { margin-top: var(--s-4); color: var(--gold-hell); font-size: var(--step-0); font-weight: 700; letter-spacing: .02em; }
.p-besuch .contact.gut { margin: 0; padding-top: 0; }
.p-besuch .gut dd { text-align: right; }

/* Desktop -------------------------------------------------------------------- */
@media (min-width: 900px) {
  .p-besuch .zeiten { grid-column: 1 / 8; }
  .p-besuch .anfahrt { grid-column: 8 / 13; padding: var(--s-6); }

  .p-besuch .hours tbody th { width: 38%; }
}

@media (min-width: 1200px) {
  .p-besuch .contact > div { min-height: 64px; padding-block: var(--s-4); }
}

@media (min-width: 1600px) {
  .p-besuch .anfahrt h2 { font-size: var(--step-3); }
  .p-besuch .addr { font-size: var(--step-2); }
}

/* Goldene Akzente: Öffnungszeiten leuchten warm */
.p-besuch .hours td { color: var(--gold-hell); text-shadow: 0 0 18px rgb(232 190 110 / .3); }
.p-besuch .anfahrt { box-shadow: inset 0 0 0 1px rgb(217 180 106 / .18); }

/* Große Schrift: Zeitentabelle bleibt in der Spalte */
.hours { width: 100%; table-layout: fixed; }
.hours th, .hours td { overflow-wrap: anywhere; }
.hours__unit { display: inline-block; }
.p-besuch .hours td { white-space: normal; }