/* ==========================================================================
   Your Place – Parken mit Vertrauen · gemeinsames Stylesheet (DE/EN/DA, Startseite + /buchen/)
   Designsystem wie die neue Hansa-Parking-Seite (hell, seriös, Serifen-Überschriften),
   Markenfarben aus dem Logo: Anthrazit #242424 + Gold #DCAA00–#E4B400 (Gold sparsam als Akzent).
   Kontrast: Gold nur als Fläche mit Anthrazit-Schrift (7,2:1) oder auf Dunkel; Gold als Schrift auf Hell = --gold-ink (6,2:1).
   ========================================================================== */
:root {
  --ink: #242424;          /* Anthrazit aus dem Logo */
  --ink-2: #2E2E2E;
  --ink-deep: #1A1A1A;
  --gold: #DCAA00;         /* Gold aus dem Logo */
  --gold-2: #E4B400;
  --gold-3: #F0C000;
  --gold-ink: #7A5C00;     /* Gold-Braun für Schrift auf Weiß/Papier (AA) */
  --gold-soft: #FBF3D9;
  --paper: #F6F4EE;
  --tint: #FCF8EC;
  --white: #FFFFFF;
  --text: #1E1E1E;
  --muted: #5A5A5A;
  --line: #E4E0D6;
  --wa: #178543;           /* WhatsApp-Grün, dunkler als #25D366 → weiße Schrift 4,7:1 */
  --wa-2: #126B36;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(36, 36, 36, .06), 0 10px 26px -14px rgba(36, 36, 36, .28);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --container: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; font-weight: 400; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
h3 { font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--ink); }
strong, b { font-weight: 700; }
p { margin: 0; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hinweisleiste (Handy/Tablet) – am PC ersetzt durch den schwebenden Stempel */
.notice { background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center; padding: 8px 16px; letter-spacing: .01em; }
.notice svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--gold-2); }

/* ---------- Kopfzeile ---------- */
.header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { flex: none; display: flex; align-items: center; text-decoration: none; color: var(--ink); }
/* Logo: SVG aus /logo/ (Platzhalter: das JPG der Live-Seite). .logo-kompakt = Fassung ohne Unterzeile fürs Handy */
.brand-logo { display: block; line-height: 0; }
.brand-logo img, .brand-logo svg { display: block; height: 52px; width: auto; }
.brand-logo .logo-kompakt { display: none; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--gold); }
.nav a:hover, .nav a[aria-current="page"] { text-decoration-line: underline; }
.header-tools { display: flex; align-items: center; gap: 14px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
/* Sprachwahl DE/EN/DA */
.lang { display: flex; align-items: center; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.lang a { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--muted); transition: background-color .15s, color .15s; }
.lang a:hover { color: var(--ink); background: var(--paper); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }

/* ---------- Buttons: Pillen mit Hover ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.header .btn { height: 44px; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 6px 14px -8px rgba(122, 92, 0, .7); }
.btn-gold:hover { background: var(--gold-3); box-shadow: 0 10px 20px -10px rgba(122, 92, 0, .75); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper); border-color: #CFC9BA; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-wa, .hdr-wa { background: var(--wa); color: #fff; border-color: var(--wa); }
.btn-wa:hover, .hdr-wa:hover { background: var(--wa-2); border-color: var(--wa-2); }
.wa-glyph { width: 20px; height: 20px; }
.hdr-btn { padding: 0 16px; }
.hdr-icon { width: 44px; padding: 0; }
.hdr-label { white-space: nowrap; }
/* Telefon in der Kopfzeile immer nur als Symbol: mit ausgeschriebener Nummer passt die Kopfzeile
   in keiner Sprache in die 1200-px-Spalte (dänisch „+49 40 57307641“ + „Book parkering“ laufen über).
   Die Nummer bleibt für Screenreader im aria-label und steht im Kontaktblock, im Fuß und in der Handy-Leiste. */
.hdr-phone { width: 44px; padding: 0; }
.hdr-phone .hdr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hero: hell, links Text + Buchung, rechts Tageslichtfoto ---------- */
.hero { position: relative; background: linear-gradient(180deg, var(--tint) 0%, #FFFFFF 85%); }
.hero-grid { padding-block: 52px 64px; }
.hero-text { max-width: 600px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--gold-ink); }
.eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.hero h1 { margin-top: 16px; font-size: clamp(34px, 3.6vw, 50px); line-height: 1.07; }
@media (min-width: 480px) { .hero h1 span { white-space: nowrap; } }
.hero-lead { margin-top: 16px; max-width: 54ch; font-size: 18px; line-height: 1.55; color: var(--muted); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid #E6D9AE; box-shadow: 0 2px 6px -2px rgba(36, 36, 36, .14); font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: default; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
.hero-meta span::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 fill=%27none%27 stroke=%27%23242424%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 12px no-repeat; }
.hero-meta span:hover { transform: translateY(-2px); background: var(--gold-soft); border-color: var(--gold); box-shadow: 0 8px 18px -8px rgba(36, 36, 36, .3); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 22px; }
.text-link { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.text-link:hover { color: var(--gold-ink); }
.hero-photo { position: relative; margin: 0; overflow: hidden; background: #E9E4D6; }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(rgba(20, 20, 20, 0), rgba(20, 20, 20, .42)); pointer-events: none; }
.hero-photo figcaption { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 10px; text-align: right; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.hero-photo figcaption span { display: inline-block; }

/* Buchungskarte: massives Anthrazit – das ParkStar-Widget nutzt weiße Hinweistexte */
.booking { position: relative; z-index: 2; margin-top: 30px; background: var(--ink); color: #fff; border-radius: var(--radius); border-top: 4px solid var(--gold); padding: 24px 24px 18px; box-shadow: 0 24px 48px -24px rgba(20, 20, 20, .6); }
.booking h2 { font-size: 24px; line-height: 1.2; color: #fff; }
.booking p { margin-top: 4px; font-size: 14.5px; color: rgba(255, 255, 255, .76); }
/* ParkStar-Widget – Mindesthöhe wie auf der Live-Seite. Die tatsächliche Höhe setzt iframe-resizer
   inline (Option minHeight: 280); eine zusätzliche CSS-Regel für kleine Fenster wäre wirkungslos,
   weil das Inline-min-height gewinnt. Der Widget-Inhalt misst am Handy 267 px und passt in die 280 px. */
#ps-form-frame { display: block; width: 100%; min-height: 280px; border: 0; margin-top: 15px; }
.booking-foot { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: rgba(255, 255, 255, .78); }
.booking-foot { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.booking-foot span { display: inline-flex; align-items: center; gap: 8px; }
.booking-foot span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); }

/* ---------- Kennzahlen ---------- */
.facts { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts ul { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.facts li { padding: 28px 24px; border-left: 1px solid #DCD6C8; }
.facts li:first-child { border-left: 0; padding-left: 0; }
.facts strong { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.facts strong::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--gold); }
.facts span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); }

/* ---------- Sektionen ---------- */
.section { padding-block: clamp(64px, 8vw, 112px); }
.section--paper { background: var(--paper); }
.section--compact { padding-block: clamp(56px, 6vw, 88px); }
.section-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.section-head h2::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--gold); }
.section-head p { margin-top: 14px; max-width: 60ch; font-size: 18px; color: var(--muted); }
.section-head p a { color: var(--ink); font-weight: 700; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; border-radius: var(--radius); object-fit: cover; background: var(--line); }
.photo figcaption { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.photo figcaption strong { color: var(--text); }

/* ---------- Leistungen: dunkles Band mit farbigen Kacheln ---------- */
#leistungen { background: var(--ink); color: #fff; }
#leistungen h2, #leistungen h3 { color: #fff; }
#leistungen .section-head p { color: rgba(255, 255, 255, .8); }
#leistungen .photo figcaption, #leistungen .photo figcaption strong { color: rgba(255, 255, 255, .82); }
.services { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.services .photo { position: sticky; top: 112px; }
.services .photo img { aspect-ratio: 4 / 5; }
.usp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.usp { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px 18px 18px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); background: rgba(255, 255, 255, .06); transition: background-color .2s, transform .2s, border-color .2s; }
.usp:hover { background: rgba(255, 255, 255, .1); border-color: rgba(228, 180, 0, .45); transform: translateY(-2px); }
.usp-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--gold); color: var(--ink); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.usp-icon svg { width: 24px; height: 24px; }
.usp p { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .8); }

/* ---------- Parkangebote (Tarife) ---------- */
/* Zwei Spalten seit 22.09.2026: die Tarife Parkhaus und Parkdeck (Modering 5A) sind
   entfallen, es bleiben Außenparkplatz und Valet. Mit repeat(4, …) hätten die beiden
   Karten nur die linke Hälfte gefüllt. Unter 1200 px galt diese Aufteilung schon vorher. */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.offer { position: relative; display: flex; flex-direction: column; padding: 24px 22px 22px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.offer:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(36, 36, 36, .06), 0 18px 32px -16px rgba(36, 36, 36, .35); }
.offer--top { border-top-color: var(--gold); }
.offer-tag { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.offer--top .offer-tag { background: var(--gold); }
.offer h3 { margin-top: 14px; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.offer-addr { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--gold-ink); }
.offer ul { margin: 16px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.offer li { position: relative; padding-left: 24px; margin-top: 8px; line-height: 1.45; }
.offer li::before { content: ""; position: absolute; left: 0; top: .28em; width: 15px; height: 15px; border-radius: 50%; background: var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M5 12.5l4.5 4.5L19 7.5%27 fill=%27none%27 stroke=%27%237A5C00%27 stroke-width=%273.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 10px no-repeat; }
.offer-note { margin-top: auto; padding-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.offers-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.offers-foot p { max-width: 70ch; font-size: 15px; color: var(--muted); }
.offers-foot p a { color: var(--ink); font-weight: 700; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.step { padding-top: 20px; border-top: 2px solid var(--gold); }
.step::before { counter-increment: s; content: counter(s) "."; display: block; margin-bottom: 14px; font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.step p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.steps-note { margin-top: 32px; font-size: 15px; color: var(--muted); }
.steps-note strong { color: var(--ink); }

/* ---------- Bewertungen ---------- */
.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; }
.review { margin: 0; padding: 28px; display: flex; flex-direction: column; background: #fff; border-left: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow); }
.review blockquote { margin: 0; flex: 1; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--text); }
.review figcaption { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--ink); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.faq-layout .section-head { position: sticky; top: 112px; margin-bottom: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 700; font-size: 17px; color: var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; transition: color .15s; }
.faq summary:hover { color: var(--gold-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 14px; text-align: center; font-size: 22px; font-weight: 400; line-height: 1; color: var(--gold-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { max-width: 64ch; padding: 0 0 22px; color: var(--muted); }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.address h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.2; }
.address .firm { margin-top: 2px; font-size: 14px; color: var(--muted); }
.address dl { margin: 24px 0 0; border-top: 1px solid var(--line); }
.address dl > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.address dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.address dd { margin: 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.address dd small { display: block; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.address dd a { text-decoration: none; }
.address dd a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contact-actions .btn { height: 44px; }
.contact .photo img { aspect-ratio: 3 / 2; border: 1px solid var(--line); }

/* ---------- Unterseiten (/buchen/): Seitentitel + ParkStar-Karte ---------- */
.page-title { background: var(--ink); color: #fff; }
.page-title .container { padding-block: clamp(34px, 5vw, 58px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "›"; font-weight: 700; color: var(--gold-2); }
.crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: #fff; }
.page-title h1 { margin-top: 10px; font-size: clamp(30px, 4.2vw, 46px); color: #fff; }
.title-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.title-facts li { display: inline-flex; align-items: center; gap: 8px; }
.title-facts svg { width: 16px; height: 16px; flex: none; color: var(--gold-2); }
.page-title--app .container { padding-bottom: calc(clamp(34px, 5vw, 58px) + 56px); }
/* flow-root: sonst wandert der negative Abstand der Karte nach außen */
.page-body--app { display: flow-root; padding-block: 0 clamp(56px, 7vw, 96px); background: var(--paper); }
.ps-card { position: relative; display: flow-root; margin-top: -56px; padding: clamp(10px, 2.2vw, 28px); background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 18px; box-shadow: var(--shadow); }
.ps-card iframe { display: block; max-width: 100%; }
.app-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.info-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.info-card h2 { font-size: 22px; line-height: 1.2; }
.info-card p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.info-card ul { margin: 10px 0 0; padding-left: 1.1em; font-size: 15px; color: var(--muted); }
.info-card li { margin-top: 6px; }
.info-card li::marker { color: var(--gold); }
.info-card .btn { margin-top: 18px; height: 44px; }
.info-card .btn + .btn { margin-top: 10px; }
.info-card--dark { background: var(--ink); border-color: var(--ink); }
.info-card--dark h2 { color: #fff; }
.info-card--dark p { color: rgba(255, 255, 255, .8); }

/* ---------- Fußzeile ---------- */
.footer { background: var(--ink-deep); color: rgba(255, 255, 255, .72); padding: 48px 0 110px; font-size: 14.5px; border-top: 4px solid var(--gold); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer a { text-decoration: none; color: rgba(255, 255, 255, .84); }
.footer a:hover { color: var(--gold-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Platzhalter-JPG hat weißen Hintergrund → weiße Box; das SVG (helle Fassung) steht frei auf Dunkel */
.footer-logo { display: block; padding: 10px 14px; background: #fff; border-radius: 8px; line-height: 0; }
.footer-logo img, .footer-logo svg { display: block; height: 46px; width: auto; }
.footer-logo--svg { padding: 0; background: none; }
.footer-legal .footer-lang { display: inline-flex; gap: 14px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; }
.footer-legal .footer-lang a[aria-current="true"] { color: var(--gold-2); }
.footer-legal { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13.5px; color: rgba(255, 255, 255, .62); }
.footer-legal > span { display: inline-block; }
.footer-legal > span + span::before { content: "·"; margin: 0 9px; }

/* ---------- Handy-Leiste unten ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--ink); box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.mobile-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 50px; border-radius: 999px; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; }
.mobile-bar a svg { width: 20px; height: 20px; }
.mobile-bar .wa-glyph { color: #25D366; }
.mobile-bar .mb-book { background: var(--gold); color: var(--ink); }

/* ---------- Schwebender Stempel (großer PC-Bildschirm) ----------
   Der Stempel steht fest in der unteren rechten Ecke und ist undurchsichtig. Er darf deshalb nur
   erscheinen, wenn der Seitenrand neben der 1200-px-Inhaltsspalte breit genug ist – sonst legt er
   sich über Überschriften, Kacheln und Fußzeilenlinks (gemessen bei 1025–1440 px).
   Rechnung: Textkante = Fensterbreite/2 + 576 px; der Kreis dreht sich leicht und braucht dadurch
   rund 3,5 % mehr Platz als seine Breite. Ab 1500 px passt er mit 148 px, ab 1700 px in voller Größe.
   Unterhalb davon bleibt stattdessen die Hinweisleiste „Kostenlos stornieren …“ oben stehen. */
.stamp { display: none; pointer-events: none; }
@media (min-width: 1500px) {
  .notice { display: none; }
  .stamp { position: fixed; right: 12px; bottom: 16px; z-index: 60; display: grid; place-items: center; align-content: center; width: 148px; height: 148px; padding: 20px; border-radius: 50%; background: var(--gold); color: var(--ink); text-align: center; font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; box-shadow: 2px 2px 10px 4px rgba(36, 36, 36, .2); animation: stempel-schweben 4.5s ease-in-out infinite; }
  .stamp::before { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(36, 36, 36, .55); border-radius: 50%; pointer-events: none; }
  .stamp svg { display: block; width: 22px; height: 22px; margin: 0 auto 5px; }
  .footer { padding-bottom: 160px; }
}
@media (min-width: 1700px) {
  .stamp { right: 20px; bottom: 20px; width: 158px; height: 158px; padding: 22px; font-size: 12.5px; letter-spacing: .05em; }
  .stamp svg { width: 24px; height: 24px; margin-bottom: 6px; }
  .footer { padding-bottom: 170px; }
}
@media (min-width: 1500px) and (max-height: 820px) { .stamp { width: 136px; height: 136px; padding: 18px; font-size: 11px; } .stamp svg { width: 20px; height: 20px; margin-bottom: 4px; } }
@keyframes stempel-schweben { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }

/* ---------- Responsiv ---------- */
/* ab 1200 px: Foto rechts bis an den Rand, Buchungskarte (660 px) greift leicht ins Foto */
@media (min-width: 1200px) {
  .hero-photo { position: absolute; top: 0; bottom: 0; right: 0; left: calc(50% + 40px); }
  .booking { width: 660px; }
  .hero-grid { padding-block: 44px 64px; }
}
/* unter 1200 px: Foto neben dem Text, Buchungskarte darunter (max. 720 px) */
@media (max-width: 1199px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-areas: "text photo" "card card"; gap: 0 36px; padding-block: 40px 56px; }
  .hero-text { grid-area: text; max-width: none; }
  .hero-photo { grid-area: photo; border-radius: var(--radius); min-height: 280px; }
  .booking { grid-area: card; }
  .services, .contact { gap: 48px; }
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Kopfzeile: Die Hauptnavigation braucht in allen drei Sprachen mehr Platz, als unter 1200 px
     übrig bleibt (gemessen: 1025 px → 30–48 px Überlauf, 1200 px → bis 24 px auf Dänisch).
     Deshalb erscheint sie erst ab 1200 px; darunter führen Kopf-Button, Handy-Leiste und Fußzeile. */
  .nav { display: none; }
}
@media (min-width: 761px) and (max-width: 1199px) { .booking { width: 100%; max-width: 720px; } }
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .faq-layout { grid-template-columns: 1fr; gap: 0; }
  .faq-layout .section-head { position: static; margin-bottom: 32px; }
  .app-info { grid-template-columns: 1fr 1fr; }
  .app-info .info-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .services, .contact { grid-template-columns: 1fr; }
  .services .photo { position: static; order: 2; }
  .services .photo img { aspect-ratio: 16 / 10; }
  .reviews { grid-template-columns: 1fr; gap: 16px; }
}
@media (min-width: 761px) and (max-width: 860px) { .brand-logo img, .brand-logo svg { height: 46px; } .header-actions .btn-gold { padding: 0 16px; } }
@media (max-width: 760px) {
  .header-inner { height: 64px; gap: 12px; }
  html { scroll-padding-top: 76px; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-logo img, .brand-logo svg { height: 44px; }
  .brand-logo .logo-voll { display: none; }
  .brand-logo .logo-kompakt { display: block; height: 34px; }
  .header-actions .btn-gold { display: none; }
  .facts ul { grid-template-columns: repeat(2, 1fr); }
  .facts li { padding: 18px 12px; }
  .facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts li:nth-child(n+3) { border-top: 1px solid #DCD6C8; }
  .mobile-bar { display: grid; }
  /* Handy-Hero: schmaler Fotostreifen oben, dann Überschrift und direkt das Buchungs-Widget */
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "text" "card"; padding-block: 0 36px; }
  .hero-photo { margin-inline: -24px; min-height: 0; height: 120px; border-radius: 0; }
  .hero-photo figcaption { display: none; }
  .hero-text { padding-top: 20px; }
  .hero h1 { margin-top: 12px; font-size: 30px; line-height: 1.1; }
  .hero-lead { margin-top: 10px; font-size: 15.5px; line-height: 1.5; }
  .hero-meta, .hero-actions { display: none; }
  .booking { margin-top: 18px; }
  .address dl > div { grid-template-columns: 1fr; gap: 2px; }
  .footer-legal > span { display: block; }
  .footer-legal > span + span::before { content: none; }
  .footer-legal .footer-lang { display: flex; margin-top: 6px; }
}
@media (max-width: 560px) {
  .container { padding-inline: 18px; }
  body { font-size: 16px; }
  /* Anrufen/WhatsApp/Buchen stehen in der Leiste unten → oben nur Logo + Sprachwahl */
  .header-actions { display: none; }
  .brand-logo .logo-kompakt { height: 30px; }
  .lang a { min-width: 30px; height: 28px; padding: 0 6px; font-size: 12px; }
  .hero-photo { margin-inline: -18px; }
  .hero-lead .lead-more, .eyebrow { display: none; }
  .hero h1 { margin-top: 0; }
  .booking { padding: 16px 10px 12px; }
  .booking-head, .booking-foot { padding-inline: 6px; }
  .booking > p { display: none; }
  .booking h2 { font-size: 21px; }
  #ps-form-frame { margin-top: 8px; }
  .offers, .app-info { grid-template-columns: 1fr; }
  .usp-grid, .steps { grid-template-columns: 1fr; }
  .usp-grid { gap: 12px; }
  .usp { grid-template-columns: 40px minmax(0, 1fr); padding: 14px; column-gap: 14px; }
  .usp-icon { width: 40px; height: 40px; }
  .usp-icon svg { width: 20px; height: 20px; }
  .steps { gap: 0; border-left: 2px solid var(--gold); }
  .step { padding: 0 0 26px 22px; border-top: 0; }
  .step:last-child { padding-bottom: 0; }
  .step::before { font-size: 24px; margin-bottom: 6px; }
  .section-head p { font-size: 16.5px; }
  .review { padding: 22px; }
  .review blockquote { font-size: 18px; }
  .hero-meta span { font-size: 13.5px; padding: 7px 13px 7px 10px; }
  .page-title--app .container { padding-bottom: calc(clamp(34px, 5vw, 58px) + 40px); }
  .container--app { padding-inline: 10px; }
  .ps-card { margin-top: -40px; padding: 14px 6px 6px; border-radius: 14px; }
  .page-title h1 { hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 360px) {
  .container { padding-inline: 16px; }
  .hero-photo { margin-inline: -16px; }
  .brand-logo .logo-kompakt { height: 27px; }
  .hero h1 { font-size: 28px; }
  .facts strong { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .usp:hover, .offer:hover, .hero-meta span:hover { transform: none; }
}