/* =====================================================================
   pages.css — Seiten-spezifische Feinheiten, Utilities, Edge-Cases
   ===================================================================== */

/* --- Header über dem Mobile-Overlay halten (Schliessen-Toggle klickbar) --- */
body.menu-open .site-header {
  z-index: var(--z-modal);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.menu-open .site-header::before { opacity: 0; }

/* --- Großes, dezent eingeblendetes Hintergrund-Wort (Hero / Page-Hero) --- */
.backdrop-word {
  position: absolute;
  right: clamp(-1rem, -2vw, -3rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(8rem, 26vw, 24rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  opacity: 0.022;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.hero > .container, .page-hero > .container { position: relative; z-index: 1; }

/* --- Positionierungs-Block (Startseite): kleine Kennzahl-freie Faktenliste --- */
.facts { display: grid; gap: var(--space-5); }
@media (min-width: 560px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { display: flex; gap: var(--space-3); align-items: flex-start; padding-top: var(--space-4); border-top: 1px solid var(--line-light); }
.theme-ink .fact, .theme-anthracite .fact { border-top-color: var(--line-dark); }
.fact__k { font-family: var(--font-display); font-weight: 700; color: var(--gold); }
.theme-paper .fact__k, .theme-paper-2 .fact__k { color: var(--gold-on-light); }
.fact__v { font-size: var(--fs-small); }

/* --- Map-Platzhalter (Kontakt) — später durch Karten-Embed ersetzbar --- */
.map-placeholder {
  position: relative;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: var(--anthracite);
  background-image:
    linear-gradient(135deg, rgba(198,162,86,0.06) 25%, transparent 25%),
    linear-gradient(225deg, rgba(198,162,86,0.06) 25%, transparent 25%),
    linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%);
  background-size: 28px 28px;
}
.map-placeholder__label { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--muted-on-dark); font-size: var(--fs-small); text-align: center; padding: 1rem; }
.map-placeholder__label .icon-circle { width: 48px; height: 48px; }

/* --- Standortkarte (OpenStreetMap-Embed) --- */
.map-embed { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; }
.map-embed iframe { display: block; width: 100%; aspect-ratio: 16 / 7; border: 0; background: var(--anthracite); }
.map-embed__link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: var(--space-4);
  color: var(--gold); font-size: var(--fs-small); font-weight: 600;
}
.map-embed__link:hover { text-decoration: underline; }
@media (max-width: 560px) { .map-embed iframe { aspect-ratio: 4 / 3; } }

/* --- Hinweis-Box für Platzhalter-Inhalte (dezent, nur intern sichtbar gemeint) --- */
.note {
  font-size: 0.8125rem;
  color: var(--muted-on-dark);
  border-left: 2px solid var(--gold);
  padding: 0.4rem 0 0.4rem 0.9rem;
  max-width: 60ch;
}
.theme-paper .note, .theme-paper-2 .note { color: var(--muted-on-light); border-left-color: var(--gold-deep); }

/* ---------------------------------------------------------------------
   Rechtliche Seiten (Impressum / Datenschutz)
   --------------------------------------------------------------------- */
.legal-address {
  font-style: normal;
  line-height: 1.7;
  font-size: 1.0625rem;
}
.legal-dl { margin: 0; }
.legal-dl > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.25rem 1.5rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--line-light);
}
.legal-dl > div:last-child { border-bottom: 1px solid var(--line-light); }
.legal-dl dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--muted-on-light);
}
.legal-dl dd { margin: 0; }
.legal-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.legal-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted-on-light);
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 0.45rem; height: 0.45rem;
  border: 1.5px solid var(--gold-deep);
  transform: rotate(45deg);
}
.legal-list strong { color: var(--text-on-light); }
/* Auszufüllende Platzhalter dezent hervorheben (vor Livegang ersetzen) */
.legal-fill {
  background: var(--paper-2);
  box-shadow: inset 0 -1px 0 var(--gold-deep);
  padding: 0.05em 0.4em;
  font-style: normal;
  color: var(--gold-on-light);
}
@media (max-width: 560px) {
  .legal-dl > div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
.flow > * + * { margin-top: var(--space-4); }
.flow-lg > * + * { margin-top: var(--space-6); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.muted { color: var(--muted-on-dark); }
.theme-paper .muted, .theme-paper-2 .muted { color: var(--muted-on-light); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.center-col { display: grid; justify-items: center; text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Kleinere Viewports
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero__badge { position: static; max-width: none; margin-top: var(--space-4); }
  .btn--auto-block { width: 100%; }
}

/* Sehr große Schrift (Dynamic Type) / langer Text — Umbruch statt Abschneiden */
.nowrap-guard { overflow-wrap: anywhere; }