@import url('fonts.css');

/* ============================================================
   ELIT CARWASH
   Design-Referenz ist der gedruckte Preisfolder: tiefschwarzer
   Grund, goldene Pill-Banner mit Leistung links und Preis rechts.
   Die Seite muss ohne Fotografie tragen — die Typografie und das
   Gold sind der Träger, Bilder sind später Zugabe, nicht Fundament.
   ============================================================ */

/* --- Tokens --- */
:root {
  --ink:        #0a0a0b;
  --ink-raised: #121214;
  --ink-sunken: #060607;
  --hairline:   #232326;
  --hairline-2: #313135;

  --gold-deep:   #a8792a;
  --gold:        #d6a445;
  --gold-bright: #efd08a;
  --gold-bar: linear-gradient(100deg, #b3822f 0%, #e6c274 20%, #d6a445 52%, #bd8d33 82%, #d8a848 100%);
  --gold-text: linear-gradient(92deg, #d6a445, #efd08a 45%, #cf9c3c);

  --paper:     #f0ede7;
  --paper-dim: #a49d93;
  --paper-mid: #cbc5bb;
  --on-gold:   #16120b;

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --nav-h: 84px;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.9vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.6vw, 2.9rem);
  --step-4:  clamp(2.5rem, 1.9rem + 2.9vw, 4.35rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

/* Inline-Icons folgen der Schriftgröße, statt auf die SVG-Standardgröße aufzugehen */
.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(h1, h2, h3, h4) { font-family: var(--font-display); line-height: 1.08; font-weight: 700; }

::selection { background: var(--gold); color: var(--on-gold); }

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--gold); color: var(--on-gold);
  padding: .8rem 1.4rem; font-weight: 600;
}
.skip:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout --- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap, .wrap--narrow { width: min(100% - 4rem, var(--wrap)); } }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--sunken { background: var(--ink-sunken); }
.section--raised { background: var(--ink-raised); }

/* --- Eyebrow / Überschriften --- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: .85rem;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ''; width: 2rem; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--gold));
}

h1, .h1 { font-size: var(--step-4); letter-spacing: -.025em; }
h2, .h2 { font-size: var(--step-3); letter-spacing: -.02em; }
h3, .h3 { font-size: var(--step-1); letter-spacing: -.01em; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--paper-mid); font-weight: 400; }
.muted { color: var(--paper-dim); }
.gold-text {
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ============================================================
   Kopfzeile
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 11, .88);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: .8rem; flex: none; text-decoration: none; padding-block: .6rem; }
.brand__mark { flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.06rem; letter-spacing: .05em; text-transform: uppercase;
}
.brand__name span { color: var(--gold); }
.brand__claim {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-dim); font-weight: 500; margin-top: .18rem;
}

.nav__links { display: none; margin-left: auto; align-items: center; gap: .25rem; }
.nav__link {
  text-decoration: none; font-size: .92rem; font-weight: 500;
  padding: .55rem .8rem; border-radius: 6px; color: var(--paper-mid);
  transition: color .18s var(--ease), background-color .18s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--paper); background: rgba(255,255,255,.05); }
.nav__link[aria-current="page"] { color: var(--gold); }

/* Spezifität bewusst über .nav__inner erhöht: Das Element trägt auch .btn, und
   .btn { display:inline-flex } steht weiter unten. Bei gleicher Spezifität
   gewänne die spätere Regel — der Button erschiene dann auch auf dem Handy. */
.nav__inner .nav__cta { display: none; }
.nav__toggle { margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; }
.nav__toggle:hover { background: rgba(255,255,255,.05); }
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-x { display: none; }
.nav__toggle[aria-expanded="true"] .icon-x { display: block; }
.nav__toggle[aria-expanded="true"] .icon-menu { display: none; }

.nav__panel {
  display: none; padding-block: .6rem 1.4rem;
  border-top: 1px solid var(--hairline);
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel .nav__link { display: block; padding: .75rem .2rem; font-size: 1rem; border-radius: 0; }
.nav__panel .btn { margin-top: .9rem; width: 100%; }

@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .nav__inner .nav__cta { display: inline-flex; margin-left: .6rem; }
  .nav__toggle { display: none; }
  .nav__panel { display: none !important; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .95rem; letter-spacing: .03em;
  padding: .85rem 1.6rem; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--gold { background: var(--gold-bar); color: var(--on-gold); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 24px -12px rgba(214,164,69,.8); }
.btn--gold:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -12px rgba(214,164,69,.95); }
.btn--ghost { border: 1px solid var(--hairline-2); color: var(--paper); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--sm { padding: .6rem 1.1rem; font-size: .87rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================
   Hero — trägt ohne Foto
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  /* Spalte plus vertikale Zentrierung für alle Heros gemeinsam: Am Handy
     ergibt das Text über Bild, am Desktop den mittig sitzenden Textblock. */
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--hairline);
}
.hero::before {
  content: ''; position: absolute; inset: -30% -10% auto; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(214,164,69,.16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  opacity: .55;
}
/* --- Hero mit Bild ---
   Das Foto bringt sein eigenes Schwarz auf der linken Seite mit. Der Verlauf
   darüber ist die Garantie: Er hält die Textzone auch dann deckend schwarz,
   wenn object-fit bei schmalen Fenstern seitlich beschneidet. */
.hero--media { position: relative; overflow: hidden; }
/* Auf dem Handy zuerst Schlagzeile und Telefonnummer, das Bild darunter —
   im Quelltext steht es davor, weil es am Desktop die Hintergrundebene ist. */
.hero--media > .hero__media { order: 2; }
.hero--media > .hero__inner { order: 1; }
.hero__media { margin-top: 2.4rem; }
.hero__media img { width: 100%; height: auto; border-radius: 12px; }

@media (min-width: 48rem) {
  /* Keine eigene Höhe und keine eigene Flex-Richtung hier — beides kommt von
     .hero--statement bzw. .hero--page. Sonst säße der Text auf Seiten mit Bild
     anders als auf Seiten ohne. Am Desktop liegt das Bild ohnehin absolut,
     der Hero hat dann nur noch .hero__inner im Fluss. */
  .hero--media .hero__inner { width: min(100% - 4rem, var(--wrap)); margin-inline: auto; }
  .hero__media {
    position: absolute; inset: 0; margin: 0; z-index: 0; pointer-events: none;
  }
  .hero__media img {
    width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
    border-radius: 0;
  }
  /* Zurückhaltender als früher: Die Motive tragen ihr Schwarz inzwischen selbst
     (links auf die Fläche montiert). Der Verlauf ist nur noch die Absicherung
     für den Fall, dass object-fit bei schmalen Fenstern seitlich beschneidet —
     stärker gesetzt würde er das Foto unnötig zumatschen. */
  .hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--ink) 0%, var(--ink) 18%, rgba(10,10,11,.86) 33%, rgba(10,10,11,.3) 52%, transparent 72%),
      linear-gradient(0deg, var(--ink) 0%, transparent 26%);
  }
  .hero--media .hero__inner { position: relative; z-index: 1; }
  .hero--media .hero__facts { background: rgba(35,35,38,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .hero--media .fact { background: rgba(10,10,11,.82); }
}

/* ============================================================
   Kontaktseite — eigene Seitenform
   Kein Hero, keine große Schlagzeile. Wer hier landet, sucht Adresse,
   Nummer und Karte. Links ein zusammenhängendes Panel mit allen Daten,
   rechts die Karte mit dem Anfahrtstext darunter. Am Desktop passt das
   in eine Bildschirmhöhe.
   ============================================================ */
.kontakt {
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex; align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hairline);
}
.kontakt__grid { display: grid; gap: 1.25rem; }

/* --- linkes Panel --- */
.kontakt__panel {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column;
}
.kontakt__panel .eyebrow { margin-bottom: .8rem; }
.kontakt__titel { font-size: var(--step-2); letter-spacing: -.02em; }
.kontakt__adresse {
  font-style: normal; font-size: var(--step-1); line-height: 1.35;
  color: var(--paper-mid); margin-top: .45rem;
}

/* Telefon und E-Mail als klar angreifbare Zeilen, mit Trennlinien statt
   verschachtelter Kärtchen — sonst kämpfen zwei Kartenebenen gegeneinander. */
.kontakt__aktionen {
  margin-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.kontakt__aktion {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem .2rem; text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: background-color .18s var(--ease);
}
.kontakt__aktion:hover { background: rgba(255,255,255,.035); }
.kontakt__aktionIcon {
  flex: none; display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(214,164,69,.12); color: var(--gold); font-size: 1.05rem;
}
.kontakt__aktionLabel {
  display: block; font-family: var(--font-display); font-size: .64rem;
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-dim);
}
.kontakt__aktionWert {
  display: block; font-size: 1.06rem; color: var(--paper); margin-top: .1rem;
}

.kontakt__label {
  font-family: var(--font-display); font-size: .64rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: .6rem;
}
.kontakt__zeiten { margin-top: 1.4rem; }
.kontakt__hinweis {
  color: var(--paper-dim); font-size: .88rem; line-height: 1.5; margin-top: .8rem;
}

/* --- rechte Spalte: Karte, darunter die Anfahrt --- */
.kontakt__rechts { display: grid; gap: 1.25rem; }
.kontakt__karte { min-height: 15rem; }
.kontakt__karte .map-consent { height: 100%; }
.kontakt__anfahrt {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 1.15rem 1.3rem;
}
.kontakt__anfahrt p {
  color: var(--paper-dim); font-size: .9rem; line-height: 1.55;
  max-width: 68ch;
}

@media (min-width: 62rem) {
  .kontakt__grid {
    grid-template-columns: minmax(19rem, 23rem) 1fr;
    gap: 1.5rem; align-items: stretch;
  }
  /* Die Karte nimmt den verbleibenden Platz, der Anfahrtstext nur seine
     eigene Höhe — so endet die Spalte bündig mit dem Panel daneben. */
  .kontakt__rechts { grid-template-rows: 1fr auto; }
  .kontakt__karte { min-height: 22rem; }
  .kontakt__karte .map-consent iframe { min-height: 0; }
  .kontakt__panel { justify-content: center; }
}

.hero__inner { position: relative; }
.hero h1 em { font-style: normal; display: block; }

/* --- Zwei Hero-Größen, mehr nicht ---
   .hero--statement  nur die Startseite: ganz große Schlagzeile
   .hero--page       ALLE Unterseiten: identische Schriftgröße, identische
                     Höhe und identische vertikale Position — mit Bild wie ohne.
   Vorher setzte jede Seite ihre Maße selbst, dadurch sprang der Text beim
   Wechsel zwischen den Unterseiten. */
.hero--statement { min-height: clamp(30rem, 46vw, 42rem); }
.hero--statement h1 { font-size: var(--step-4); max-width: 15ch; }
.hero--statement .lede { font-size: var(--step-1); max-width: 46ch; }

.hero--page {
  /* Oben ausgerichtet, nicht zentriert. Bei Zentrierung hängt die Höhe des
     Textblocks an seiner Länge, und die Schlagzeile sprang beim Wechsel
     zwischen den Unterseiten um bis zu 40 px. So beginnt sie überall gleich. */
  justify-content: flex-start;
  /* Bildschirmfüllend: Kopfzeile plus Hero ergeben genau eine Bildschirmhöhe.
     svh statt vh, damit die ein- und ausfahrende Browserleiste am Handy den
     Hero nicht springen lässt; vh bleibt als Rückfall für ältere Browser. */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(2.6rem, 5vw, 4rem);
}
.hero--page > .hero__inner { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 48rem) {
  .hero--page > .hero__inner { width: min(100% - 4rem, var(--wrap)); }
}
/* Scroll-Hinweis. Der bildschirmfüllende Hero lässt auf Seiten ohne
   Hintergrundbild viel Schwarz stehen — ohne Zeichen sieht das aus, als wäre
   die Seite zu Ende. Eine Haarlinie mit wanderndem Goldpunkt statt eines
   Pfeil-Buttons: Sie zeigt, dass es weitergeht, tut aber nicht so, als wäre
   sie anklickbar. */
.hero__scroll {
  position: absolute; left: 50%; bottom: 2.2rem; translate: -50% 0;
  width: 1px; height: 3.4rem; overflow: hidden;
  background: linear-gradient(180deg, transparent, var(--hairline-2) 35%, transparent);
}
.hero__scroll::after {
  content: ''; position: absolute; left: -1px; top: 0;
  width: 3px; height: 1.1rem; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  animation: scrollcue 2.6s var(--ease) infinite;
}
@keyframes scrollcue {
  0%   { transform: translateY(-1.1rem); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(3.4rem); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after { animation: none; top: 1.1rem; opacity: .9; }
}
/* Wo der Hero ohnehin kurz ist, wäre der Hinweis überflüssig */
@media (max-height: 34rem) { .hero__scroll { display: none; } }

.hero--page h1 { font-size: var(--step-3); max-width: 24ch; }
.hero--page .lede { font-size: var(--step-0); max-width: 54ch; }

.hero .lede { margin-top: 1.5rem; }
.hero .btn-row { margin-top: 2.2rem; }

.hero__facts {
  display: grid; gap: 1px; margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: 12px; overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .hero__facts { grid-template-columns: repeat(3, 1fr); } }
.fact { background: var(--ink); padding: 1.35rem 1.4rem; }
.fact__k {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold);
}
.fact__v { margin-top: .4rem; font-size: .97rem; color: var(--paper-mid); }
.fact__v strong { color: var(--paper); font-weight: 600; }

/* ============================================================
   Preis-Pill — die Signatur aus dem Folder
   ============================================================ */
.tier { border-bottom: 1px solid var(--hairline); padding-bottom: 1.6rem; }
.tier:last-child { border-bottom: 0; padding-bottom: 0; }
.tier + .tier { margin-top: 1.6rem; }

.tier__bar {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--gold-bar);
  color: var(--on-gold);
  border-radius: 999px;
  padding: .6rem 1.5rem .65rem 1.35rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}
.tier__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.95rem, .88rem + .3vw, 1.16rem);
  letter-spacing: .055em; text-transform: uppercase;
}
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .92rem + .35vw, 1.24rem); white-space: nowrap; letter-spacing: -.01em; }
.tier__price .ab { font-size: .62em; font-weight: 600; letter-spacing: .04em; margin-right: .18em; opacity: .8; }
.tier__price--ask { font-size: clamp(.9rem, .85rem + .2vw, 1.05rem); letter-spacing: .02em; }

.tier__body { padding: 1.15rem 1.35rem 0; }
.tier__kurz { color: var(--paper-mid); max-width: 62ch; }
.tier__meta {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem;
  font-size: var(--step--1); color: var(--gold);
  font-family: var(--font-display); font-weight: 600; letter-spacing: .04em;
}
.tier__meta svg { width: 1em; height: 1em; }

.tier__delta {
  margin-top: 1.05rem; font-size: var(--step--1); color: var(--paper-dim);
}
.tier__delta strong { color: var(--paper-mid); font-weight: 600; }
.tier__new {
  display: inline-block; margin-left: .45rem; vertical-align: .06em;
  font-family: var(--font-display); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(214,164,69,.45);
  border-radius: 999px; padding: .05rem .4rem;
}
.tier__list li.is-new { color: var(--paper); }
.tier__list li.is-new::before { opacity: 1; box-shadow: 0 0 0 3px rgba(214,164,69,.16); }

.tier__list {
  list-style: none; padding: 0; margin: 1.05rem 0 0;
  display: grid; gap: .48rem .5rem;
  grid-template-columns: 1fr;
  font-size: .93rem; color: var(--paper-mid);
}
@media (min-width: 46rem) { .tier__list { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; } }
.tier__list li { position: relative; padding-left: 1.4rem; }
.tier__list li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); opacity: .85;
}

.tier--highlight .tier__bar { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 10px 40px -14px rgba(214,164,69,.85); }
/* Label steht im Textfluss über der Pille, nicht absolut darüber — sonst
   verdeckt es auf schmalen Breiten den Preis. */
.tier__flag {
  display: inline-block; margin: 0 0 .6rem 1.35rem;
  background: var(--ink); border: 1px solid var(--gold-deep); color: var(--gold);
  font-family: var(--font-display); font-size: .63rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 999px;
}

/* Kompakte Liste für Zusatzleistungen */
.rate-list { list-style: none; padding: 0; margin: 0; }
.rate-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .95rem .2rem; border-bottom: 1px solid var(--hairline);
}
.rate-list li:last-child { border-bottom: 0; }
.rate-list__name {
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; font-size: .95rem;
}
.rate-list__name a { text-decoration: none; border-bottom: 1px solid transparent; transition: color .18s, border-color .18s; }
.rate-list__name a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.rate-list__price { font-family: var(--font-display); font-weight: 700; color: var(--gold); white-space: nowrap; }
.rate-list__price .ab { font-size: .68em; font-weight: 600; opacity: .8; margin-right: .15em; }
.rate-list__price--ask { color: var(--paper-dim); font-weight: 500; font-size: .93rem; }

/* ============================================================
   Karten / Raster
   ============================================================ */
.grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--ink-raised);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 1.6rem 1.5rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
a.card { text-decoration: none; display: block; }
a.card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--paper-dim); font-size: .95rem; }
.card__price {
  margin-top: 1rem; font-family: var(--font-display); font-weight: 700;
  color: var(--gold); font-size: 1.1rem;
}
.card__price .ab { font-size: .66em; font-weight: 600; opacity: .8; }
.card__num {
  font-family: var(--font-display); font-weight: 700; font-size: 2.2rem;
  line-height: 1; color: var(--gold-deep); margin-bottom: .7rem;
}

/* Sammelpass — Grafik statt Foto */
.pass {
  background: var(--ink-raised); border: 1px solid var(--hairline);
  border-radius: 16px; padding: clamp(1.6rem, 4vw, 2.6rem);
}
.pass__stamps { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 0; }
.pass__stamp {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1.5px dashed var(--hairline-2); color: var(--paper-dim);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.pass__stamp--free {
  border: 1.5px solid transparent;
  background: var(--gold-bar); color: var(--on-gold);
  box-shadow: 0 8px 26px -12px rgba(214,164,69,.9);
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}

/* ============================================================
   Kontakt / Karte / Footer
   ============================================================ */
.contact-grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 3rem; } }

.dl { display: grid; gap: 1.15rem; margin: 0; }
.dl dt {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem;
}
.dl dd { margin: 0; color: var(--paper-mid); }
.dl a { text-decoration: none; border-bottom: 1px solid var(--hairline-2); transition: color .18s, border-color .18s; }
.dl a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .55rem 0; border-bottom: 1px solid var(--hairline);
  color: var(--paper-mid); font-size: .96rem;
}
.hours li:last-child { border-bottom: 0; }
.hours .closed { color: var(--paper-dim); }
.hours .is-today { color: var(--paper); }
.hours .is-today span:first-child::after {
  content: 'heute'; margin-left: .6rem; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--on-gold); background: var(--gold);
  padding: .1rem .42rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700;
  vertical-align: .1em;
}

/* Karte erst nach Zustimmung — kein Google-Request beim Seitenaufruf */
.map-consent {
  position: relative; border: 1px solid var(--hairline); border-radius: 14px;
  background: var(--ink-raised); overflow: hidden; min-height: 320px;
  display: grid; place-items: center; text-align: center; padding: 2rem 1.5rem;
}
.map-consent p { color: var(--paper-dim); font-size: .93rem; max-width: 42ch; margin: .7rem auto 1.3rem; }
.map-consent iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.map-consent.is-loaded { padding: 0; display: block; min-height: 0; }

.footer { background: var(--ink-sunken); border-top: 1px solid var(--hairline); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.footer h4 {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; color: var(--paper-dim); font-size: .94rem; transition: color .18s; }
.footer a:hover { color: var(--gold); }
.footer__bottom {
  margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: var(--paper-dim);
}

/* Prosa für Impressum / Datenschutz */
.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: 2.6rem; margin-bottom: .9rem; }
.prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.05rem; color: var(--paper-mid); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: .2em; }
.prose strong { color: var(--paper); }

/* Sprungmarken nicht unter die Sticky-Nav schieben */
[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

/* Telefon-Leiste, nur mobil */
.callbar {
  position: fixed; inset: auto 0 0; z-index: 90;
  display: flex; gap: .6rem; padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(10,10,11,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
}
.callbar .btn { flex: 1; }
@media (min-width: 62rem) { .callbar { display: none; } }
@media (max-width: 61.99rem) { body { padding-bottom: 4.6rem; } }

@media print {
  .nav, .callbar, .map-consent { display: none !important; }
  body { background: #fff; color: #000; }
}