/* Site-scoped adjustments: sticky booking, mobile nav,
   apartment-detail, landing-page shell. Extends colors_and_type.css + styles.css. */

/* Skip to content — a11y */
.skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 4px; z-index: 200; }
.skip:focus { left: 8px; }

/* Visually-hidden — für Screen Reader, unsichtbar für Auge */
.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;
}

/* Claim-Durchstreichung: eigene Pinselstrich-Anmutung statt CSS-line-through.
   Der Strich ist ein SVG-Path, der über den Text drübergelegt wird. */
.claim-strike {
  position: relative;
  display: inline-block;
  color: var(--ink);
  opacity: 0.55;
  isolation: isolate;
}
.claim-strike::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: 0.14em;
  background: var(--accent);
  border-radius: 999px;
  transform: rotate(-1.2deg) skew(-6deg);
  transform-origin: center;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 50%, transparent);
}
/* Zweite Zeile leicht anders angesetzt, damit der Strich handgemalt wirkt */
.claim-strike:nth-of-type(2)::after { transform: rotate(0.8deg) skew(4deg); top: 50%; height: 0.13em; }

/* Body padding for sticky booking bar */
body { padding-bottom: 100px; }

/* Sticky primary CTA (Mews-ready) — persistent auf allen Seiten */
.book-strip {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 55;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 8px 8px 22px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 999px;
  box-shadow: 0 20px 60px -20px color-mix(in oklab, var(--accent) 60%, black), 0 0 0 1px rgba(255,255,255,0.08);
  max-width: calc(100vw - 32px);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.book-strip.hidden { opacity: 0; transform: translateX(-50%) translateY(140%); pointer-events: none; }
.book-strip .label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.75; margin-right: 8px; }
.book-strip a.book-btn {
  background: var(--accent-ink); color: var(--accent);
  padding: 0.85em 1.5em; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600;
}
.book-strip a.book-btn:hover { background: var(--bg); color: var(--accent); }
@media (max-width: 640px) {
  .book-strip { padding: 6px 6px 6px 14px; font-size: 12px; }
  .book-strip .label { display: none; }
}

/* sophie&jason strip — dezent, aber sichtbar */
.partner-strip {
  padding: 40px var(--gutter);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: var(--max); margin-inline: auto;
}
@media (min-width: 800px) { .partner-strip { grid-template-columns: auto 1fr auto; gap: 40px; } }
.partner-strip .p-eyebrow {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap;
}
.partner-strip .p-eyebrow::before { content: ""; width: 1.6em; height: 1px; background: currentColor; opacity: 0.5; }
.partner-strip .p-body { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 40; text-wrap: balance; }
.partner-strip .p-body em { font-style: italic; color: var(--accent); font-variation-settings: "opsz" 144, "SOFT" 100; }
.partner-strip .p-meta { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-70); white-space: nowrap; }
.partner-strip .p-meta strong { color: var(--accent); font-weight: 600; }

/* Unverified placeholder pill — für Apartment-Facts die noch nicht bestätigt sind */
.unverified {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-50);
  background: var(--ink-10); border: 1px dashed var(--line-strong);
  border-radius: 999px;
}

/* Apartment overview card — cleaner when facts unverified */
.apt-card .apt-card-meta {
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.85);
  letter-spacing: 0.05em; margin-top: 6px;
}
.apt-card .apt-card-body-inner { display: flex; flex-direction: column; gap: 2px; }

/* Simple two-col detail hero */
.detail-hero {
  /* Etwas mehr Seiten-Padding als der normale gutter, damit Hero luftig wirkt
     und Text/Bild nicht bis an den Bildschirmrand kleben. */
  padding: 140px clamp(24px, 6vw, 96px) 60px;
  display: grid; gap: 40px; grid-template-columns: 1fr;
  max-width: var(--max); margin-inline: auto;
  position: relative; overflow: hidden;
}
@media (min-width: 900px) {
  .detail-hero {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: stretch;             /* beide Spalten gleich hoch */
    padding-block: 120px 40px;        /* Hero-Padding kompakter */
  }
  /* Text-Spalte als Flex-Column mit erzwungenem Top-Start.
     height: 100% sichert, dass sie sich auf Bildhöhe streckt. */
  .detail-hero > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    height: 100% !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  /* Erstes Element (der Tag-Chip) klebt garantiert am oberen Rand */
  .detail-hero > div:first-child > .detail-tag {
    margin-top: 0 !important;
  }
  /* Hero-Meta klebt am Ende der Text-Spalte (auf Höhe des Bild-Endes).
     Wir nutzen einen unsichtbaren Spacer-Effekt: der Container ist flex-column,
     .hero-meta bekommt margin-top:auto und sitzt so am unteren Rand. */
  .detail-hero .hero-meta {
    margin-top: auto !important;
    align-self: stretch;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .detail-hero .detail-visual { align-self: stretch; }
}

/* ================ LOGO-BILD im Nav-Header (ersetzt den Text-Wordmark) ================
   Das PNG-Logo ist reines Schwarz auf Transparent. Per CSS-Filter kolorieren wir es
   passend zur Variante — Violett auf v4, Cream auf v0, Ink auf v1/v2/v3. */
.nav-logo-img {
  height: 34px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: filter var(--dur, 380ms) var(--ease, ease);
}
.nav-drawer-logo-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
}
/* Logo-Farb-Varianten: statt CSS-Filter werden vorab-eingefärbte PNGs geladen.
   Das ist pixelgenau und funktioniert auf allen Browsern verlässlich.
   JS setzt die src passend zur Variante — siehe common.js setLogoVariant(). */

/* Enger auf Mobile */
@media (max-width: 640px) {
  .nav-logo-img { height: 28px; }
  .nav-drawer-logo-img { height: 34px; }
}

/* Footer-Logo — Farbvariante wird per JS gesetzt (siehe common.js updateLogoForVariant) */
.footer-logo-img {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 12px;
}
@media (min-width: 720px) { .footer-logo-img { height: 64px; } }

/* ================ FOOTER · Mobile-Zentrierung ================
   Auf Mobile sind Footer-Spalten linksbündig gestapelt. Wir zentrieren sie. */
@media (max-width: 720px) {
  .site-footer { text-align: center; }
  .site-footer .footer-grid { justify-items: center; }
  .site-footer .footer-brand { display: flex; justify-content: center; }
  .site-footer .footer-logo-img { margin-inline: auto; }
  .site-footer h4 { text-align: center; }
  .site-footer ul { align-items: center; }
  .site-footer p { text-align: center; }
  .site-footer .footer-bottom { justify-content: center; text-align: center; }
  .site-footer .footer-bottom > * { flex-basis: 100%; }
}

/* ================ MOBILE FIXES ================
   Sehr schmale Viewports (Handy Portrait) — verhindern Overflow und zu große Type. */

/* Hero-Headline bei kleinen Screens deutlich reduzieren */
@media (max-width: 640px) {
  .hero-headline {
    font-size: clamp(2.4rem, 11vw, 3.6rem) !important;
    line-height: 1 !important;
    text-wrap: pretty;
  }
  .hero-headline em { font-size: 0.92em; }
  .hero {
    padding-top: clamp(80px, 15vw, 120px);
    padding-bottom: clamp(60px, 10vw, 100px);
  }
  .hero > .wrap,
  .hero .wrap {
    padding-inline: 20px;
  }
  .hero-meta {
    gap: 8px 14px;
    font-size: 10.5px;
    padding-top: 20px;
    margin-top: 28px;
  }
  .hero-meta > span { min-width: 0; word-break: normal; }
  /* Buttons stapeln bei Mobile, aber zentriert und volle Breite */
  .hero .btn,
  .hero-meta + div .btn { min-width: 0; }
}

/* .section-head links bei Mobile nicht doppelt-Rand */
@media (max-width: 640px) {
  .section-head { gap: 24px; }
  .h-1 { font-size: clamp(1.9rem, 8vw, 2.8rem); line-height: 1.05; }
  .lead { font-size: 15.5px; line-height: 1.5; }
  .eyebrow { font-size: 10.5px; }
}

/* Extras-Cards: bei Mobile kein Padding-Right (das war Platz fürs Icon rechts) */
@media (max-width: 720px) {
  .extras-card { padding-right: clamp(24px, 3vw, 32px); min-height: 200px; }
  .extras-icon {
    position: static;
    margin-bottom: 8px;
  }
}

/* Apartment-Rail bei Mobile: 1 Spalte, featured Karte nicht mehr riesig */
@media (max-width: 720px) {
  .apt-rail { gap: 16px; }
  .apt-card { aspect-ratio: 4/5 !important; grid-column: span 1 !important; }
  .apt-card-name { font-size: 1.6rem !important; }
}

/* Statement-Sektion (#bestpreis) mobile — Text-Break */
@media (max-width: 640px) {
  .statement { padding: clamp(64px, 12vw, 100px) 0; }
  .statement-text { font-size: clamp(1.9rem, 8vw, 3rem); line-height: 1.1; }
}

/* Marquee etwas kleiner auf mobile */
@media (max-width: 640px) {
  .marquee-track { font-size: clamp(1.6rem, 6vw, 2.2rem); }
}

/* Nav-Logo Bild auf sehr schmalen Viewports weiter reduzieren */
@media (max-width: 380px) {
  .nav-logo-img { height: 24px; }
  .nav-logo-tag { display: none; }
  .nav { padding: 10px 12px; }
}

/* Anfahrt / Landing: dass Text nicht überläuft */
@media (max-width: 640px) {
  main > section { padding-inline: 4px; }
  .wrap { padding-inline: 20px; }
  .prose-grid { gap: 14px; }
  .prose-card { padding: 20px; }
  .prose-card h3 { font-size: 18px; }
  .tag-list { gap: 6px; }
  .tag { font-size: 10px; padding: 2px 8px; }
  .usp-grid { gap: 14px; }
  .usp-item { padding: 20px 18px; }
}

/* ================ GLOBALE FARBVERLÄUFE (Neon-Gelb + Pink) — harmonisch auf allen Seiten
   Das gleiche Muster wie auf der Anfahrt-Seite: zwei sanft geblurrte Kreise, 
   Neon-Gelb top-left, Pink bottom-right, ca. 15% Opacity. 
   Wird als globale Body-Hintergrund-Ebene angelegt, sodass alle Seiten davon profitieren
   OHNE dass jede Sektion eigene Regeln braucht. Nur bei v4 aktiv. */

html[data-variant="v4"] body {
  background: #FFFFFF;
  position: relative;
  min-height: 100vh;
}
html[data-variant="v4"] body::before,
html[data-variant="v4"] body::after {
  content: "";
  position: fixed;
  width: 60vw;
  max-width: 780px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
html[data-variant="v4"] body::before {
  background: #DEFF00;   /* Neon-Gelb top-left */
  top: -12vw;
  left: -10vw;
}
html[data-variant="v4"] body::after {
  background: #FF7FE8;   /* Support-Pink bottom-right */
  bottom: -12vw;
  right: -10vw;
  opacity: 0.18;
}
/* Content-Elemente über den Verläufen — aber NICHT position:fixed-Elemente überschreiben.
   Nav und Book-Strip müssen fixed bleiben, damit sie beim Scrollen mitfahren. */
html[data-variant="v4"] body > main,
html[data-variant="v4"] body > footer,
html[data-variant="v4"] body > .breadcrumb,
html[data-variant="v4"] body > .marquee,
html[data-variant="v4"] body > section,
html[data-variant="v4"] body > .skip {
  position: relative;
  z-index: 1;
}
/* Nav und Booking-Bar behalten position:fixed und liegen über den Farbverläufen */
html[data-variant="v4"] .nav {
  z-index: 100;
}
html[data-variant="v4"] .book-strip {
  z-index: 90;
}
/* Auf sehr großen Screens die Farbverläufe zentrieren, damit sie präsent bleiben */
@media (min-width: 1440px) {
  html[data-variant="v4"] body::before,
  html[data-variant="v4"] body::after {
    width: 800px;
    max-width: 800px;
  }
}
/* Auf Mobile: kleinere Kreise, damit sie nicht dominieren */
@media (max-width: 720px) {
  html[data-variant="v4"] body::before,
  html[data-variant="v4"] body::after {
    width: 90vw;
    filter: blur(90px);
    opacity: 0.15;
  }
  html[data-variant="v4"] body::after { opacity: 0.13; }
}
/* Übrige v4-Sektions-Backgrounds werden entfernt (überschrieben durch Globale) */
html[data-variant="v4"] #apartments,
html[data-variant="v4"] #extras,
html[data-variant="v4"] #reviews,
html[data-variant="v4"] main > section:first-of-type,
html[data-variant="v4"] main {
  background: transparent !important;
}

/* Detail-Hero (Apartment-Seiten): Farbe wird noch dezenter — der große Neon-Gelb-Kasten
   war zu dominant/streifenartig. Jetzt weicher, integriert in den Body-Verlauf. */
html[data-variant="v4"] .detail-hero::before {
  opacity: 0.18;
  filter: blur(120px);
  width: 70%;
  height: 80%;
  top: -30%;
  left: -20%;
}

/* Link „Alle Bewertungen auf Booking.com" — dezenter Text-Link in Review-Cards */
.apt-review-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur, 380ms) var(--ease, ease);
}
.apt-review-link:hover { color: var(--accent-2, #FF3D9A); }

/* CTA-Karte für Appartements ohne konkrete Score (nur Link zu Booking.com) */
.apt-review-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
}
.apt-review-cta-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
  margin: 8px 0 6px 0;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.apt-review-cta-body {
  color: var(--ink-70);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 8px 0;
}
html[data-variant="v4"] .apt-review-cta { background: linear-gradient(135deg, #FFFFFF 0%, #FFFCE0 100%) !important; }

/* Sanfter Portal-Verlauf oben auf Apartment-Review-Cards (Detail-Seiten) — harmonisch zu Homepage */
html[data-variant="v4"] .apt-review-card {
  position: relative;
  overflow: hidden;
}
html[data-variant="v4"] .apt-review-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 50px;
  background: linear-gradient(180deg, rgba(222, 255, 0, 0.30) 0%, rgba(222, 255, 0, 0.08) 60%, transparent 100%);
  pointer-events: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
html[data-variant="v4"] .apt-review-card[data-portal="booking"]::before {
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.22) 0%, rgba(222, 255, 0, 0.10) 60%, transparent 100%);
}
html[data-variant="v4"] .apt-review-card[data-portal="airbnb"]::before {
  background: linear-gradient(180deg, rgba(255, 61, 154, 0.20) 0%, rgba(222, 255, 0, 0.10) 60%, transparent 100%);
}
html[data-variant="v4"] .apt-review-card > * {
  position: relative;
  z-index: 1;
}

/* Cards und Karten bleiben mit hellcremiger Füllung, damit sie sich vom Verlauf abheben */
html[data-variant="v4"] .apt-card,
html[data-variant="v4"] .info-card,
html[data-variant="v4"] .review-portal-card,
html[data-variant="v4"] .testimonial-card,
html[data-variant="v4"] .apt-review-card,
html[data-variant="v4"] .apt-quote-card,
html[data-variant="v4"] .contact-block,
html[data-variant="v4"] .parking-card,
html[data-variant="v4"] .arrive-mode,
html[data-variant="v4"] .faq-item,
html[data-variant="v4"] .prose-card,
html[data-variant="v4"] .sj-card,
html[data-variant="v4"] .sj-home-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(35,27,59,0.14) !important;
  backdrop-filter: blur(4px);
}

/* Bewertungs-Portalkarten (Detailseiten): sanfter Verlauf oben, harmonisch zur Homepage */
html[data-variant="v4"] .apt-review-card {
  position: relative;
  overflow: hidden;
}
html[data-variant="v4"] .apt-review-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(222, 255, 0, 0.28) 0%, rgba(222, 255, 0, 0.08) 60%, transparent 100%);
  border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
  pointer-events: none;
  z-index: 0;
}
html[data-variant="v4"] .apt-review-card[data-portal="booking"]::before {
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.18) 0%, rgba(222, 255, 0, 0.10) 60%, transparent 100%);
}
html[data-variant="v4"] .apt-review-card[data-portal="airbnb"]::before {
  background: linear-gradient(180deg, rgba(255, 61, 154, 0.16) 0%, rgba(222, 255, 0, 0.08) 60%, transparent 100%);
}
html[data-variant="v4"] .apt-review-card > * {
  position: relative;
  z-index: 1;
}

/* ================ VERFÜGBARKEITS-WIDGET (unter dem Hero, verbindet mit Mews) ================
   Kleine Buchungsmaske: Anreise · Abreise · Gäste · Prüfen-Button
   Öffnet beim Absenden das Mews Booking Engine Widget mit vorausgewählten Daten. */
#availability {
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
  position: relative;
  z-index: 3;
}
@media (max-width: 720px) {
  #availability { padding: 28px 0 48px; }
}
}
.availability-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFCE0 100%);
  border: 1px solid var(--line);
  border-radius: clamp(24px, 3vw, 32px);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 30px 60px -30px rgba(35, 27, 59, 0.20), 0 8px 20px -10px rgba(35, 27, 59, 0.10);
  position: relative;
  overflow: hidden;
}
.availability-card::before {
  /* subtiler Neon-Gelb Glow oben rechts */
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(222, 255, 0, 0.35), transparent 65%);
  pointer-events: none;
}
.availability-head { margin-bottom: 20px; position: relative; }
.availability-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  margin-bottom: 8px;
}
.availability-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  max-width: 30ch;
}
.availability-title .italic-serif {
  font-style: italic;
  color: var(--accent-2);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.availability-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
  position: relative;
}
@media (min-width: 720px) {
  .availability-form { grid-template-columns: 1.1fr 1.1fr 0.8fr auto; }
}
.availability-field { display: flex; flex-direction: column; gap: 6px; }
.availability-field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-70);
}
.availability-field input,
.availability-field select {
  padding: 14px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur, 380ms) var(--ease, ease), box-shadow var(--dur, 380ms) var(--ease, ease);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.availability-field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23231B3B' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
/* Fokus-Look für die runden Felder: Ring statt harter Outline */
.availability-field input:focus,
.availability-field select:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(255, 61, 154, 0.18);
}
.availability-field input:hover,
.availability-field select:hover { border-color: var(--support-violet, #6F658C); }
.availability-submit .btn-primary {
  width: 100%;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  white-space: nowrap;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.availability-submit .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}
.availability-note {
  margin: 16px 0 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-50);
  position: relative;
}

/* v4 verstärkt Neon-Gelb: dickerer Glow */
html[data-variant="v4"] .availability-card::before {
  background: radial-gradient(circle, rgba(222, 255, 0, 0.45), transparent 65%);
}
html[data-variant="v4"] .availability-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFBD1 100%);
}

/* ================ APT-CARD-BADGE (Appartement/Zimmer-Kennung oben rechts) ================
   Klar erkennbar auf einen Blick — Icon (Küche/Bett) + Kurztext. */
.apt-card-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.22);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.apt-card-badge svg { flex-shrink: 0; opacity: 0.95; }
.apt-card-badge.is-apt {
  /* Appartement = mit Küche · dominante Farbe */
  background: rgba(255,61,154,0.90);
  border-color: rgba(255,255,255,0.35);
}
.apt-card-badge.is-room {
  /* Zimmer · dezenter, gebrochen */
  background: rgba(15,14,18,0.72);
  border-color: rgba(255,255,255,0.28);
}
/* v4 · badges passen zu Sunny-Yellow-Farbwelt */
html[data-variant="v4"] .apt-card-badge.is-apt {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--ink);
}
html[data-variant="v4"] .apt-card-badge.is-room {
  background: var(--support-violet, #6F658C);
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.apt-card:hover .apt-card-badge {
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .apt-card-badge { top: 12px; right: 12px; font-size: 9.5px; padding: 4px 8px 4px 7px; }
  .apt-card-badge svg { width: 11px; height: 11px; }
}

/* ================ EXTRAS-GRID · 3-Karten-Zeile auf Homepage ================ */
.extras-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}
@media (min-width: 720px) { .extras-grid { grid-template-columns: repeat(3, 1fr); } }
.extras-card {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-lg, 20px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  text-decoration: none;
  color: var(--ink);
  min-height: 220px;
}
.extras-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 24px 40px -20px rgba(0,0,0,0.2);
}
/* Icon-Pille sitzt rechts oben in der Karte, auf gleicher Höhe wie die H3-Überschrift.
   Über absolute Positionierung, damit die alte flex-column-Reihenfolge nicht bricht. */
.extras-card { position: relative; padding-right: 76px; }
.extras-icon {
  position: absolute;
  top: clamp(24px, 3vw, 32px);
  right: clamp(24px, 3vw, 32px);
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: background var(--dur, 380ms) var(--ease, ease),
              color var(--dur, 380ms) var(--ease, ease),
              border-color var(--dur, 380ms) var(--ease, ease),
              transform var(--dur, 380ms) var(--ease, ease);
}
.extras-icon svg { width: 24px; height: 24px; }
.extras-card:hover .extras-icon {
  background: var(--accent);
  color: var(--accent-ink, var(--ink));
  border-color: var(--accent);
  transform: rotate(-3deg);
}
html[data-variant="v4"] .extras-card:hover .extras-icon {
  background: var(--support-pink);
  color: #FFFFFF;
  border-color: var(--support-pink);
}
.extras-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  margin-bottom: 4px;
}
.extras-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin: 0;
}
.extras-body {
  color: var(--ink-70);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 4px 0 0 0;
  flex: 1;
}
.extras-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-top: 12px;
  transition: transform var(--dur) var(--ease);
  display: inline-block;
}
.extras-card:hover .extras-cta { transform: translateX(4px); }

/* ================ SOPHIE & JASON · Nachbarschafts-Kooperation ================
   Größer als vorher, aber optisch klar als Zusatzangebot lesbar.
   Foto links · Text mit mehreren Absätzen rechts · Meta-Facts unten. */
.sj-home-section {
  padding: clamp(48px, 7vw, 96px) 0;
}
.sj-home-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: color-mix(in oklab, var(--bg-2) 42%, transparent);
  max-width: 1200px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .sj-home-card {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
    gap: clamp(32px, 4vw, 56px);
  }
}
.sj-home-visual {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--bg-3);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px var(--line);
}
@media (min-width: 900px) {
  .sj-home-visual { aspect-ratio: auto; height: 100%; min-height: 420px; }
}
.sj-home-visual img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease);
}
.sj-home-card:hover .sj-home-visual img { transform: scale(1.02); }

/* Logo-Variante: helle Fläche, Logo zentriert und contained, kein Hover-Zoom */
.sj-home-visual-logo {
  background: #F5EFE4;              /* warm-cream als Sophie&Jason Markenfarbe */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.4), 0 0 0 1px var(--line);
}
.sj-home-visual-logo img {
  width: 100%;
  height: auto;
  max-width: 380px;
  max-height: 100%;
  object-fit: contain;
  transition: none;
}
.sj-home-card:hover .sj-home-visual-logo img { transform: none; }
:root[data-concept="cream"] .sj-home-visual-logo {
  background: #F5EFE4;
  box-shadow: 0 10px 30px -12px rgba(27,27,26,0.15), 0 0 0 1px var(--line);
}

.sj-home-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}
.sj-home-body .eyebrow {
  margin-bottom: 4px;
  color: var(--ink-70);
}
.sj-home-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin: 0 0 8px 0;
  max-width: 22ch;
}
.sj-home-text {
  color: var(--ink-70);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.sj-home-text strong { color: var(--ink); font-weight: 600; }
.sj-home-text-quiet {
  color: var(--ink-50);
  font-style: italic;
  font-size: 14.5px;
  padding-top: 4px;
}

/* Meta-Zeile: horizontale Auflistung unter dem Text */
.sj-home-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 16px 0 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
@media (min-width: 560px) {
  .sj-home-meta { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.sj-home-meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sj-home-meta-row dt {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  margin: 0;
}
.sj-home-meta-row dd {
  font-family: var(--font-body, "Inter Tight", -apple-system, sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}

/* ================ DETAIL-SEITEN: Content-Sektion nach dem Hero ================
   Neue Klasse .apt-detail-content ersetzt .prose auf Detailseiten.
   ALLE strukturierten Blöcke (Ausstattung, Galerie, Reviews, Kontakt) nutzen
   die volle Container-Breite. Nur reine Text-Absätze (falls vorhanden) bekommen
   Reading-Breite über eine explizite Klasse `.prose-block`. */
.apt-detail-section {
  /* Padding bündig zum Hero (gleicher Seiten-Rand) */
  padding: clamp(8px, 1.5vw, 20px) clamp(24px, 6vw, 96px) clamp(40px, 6vw, 80px) !important;
}
.apt-detail-content {
  max-width: var(--max);
  margin-inline: auto;
  width: 100%;
}
/* Alle direkten Kinder bekommen volle Breite — Fließtext-Ausnahme über .prose-block */
.apt-detail-content > * {
  max-width: 100%;
}
/* Fließtext-Absätze innerhalb der Detail-Content-Sektion bekommen Reading-Breite */
.apt-detail-content .prose-block {
  max-width: 72ch;
}
.apt-detail-content .prose-block p {
  color: var(--ink-70);
  font-size: var(--step-0);
  line-height: 1.6;
  margin: 0 0 1.2em 0;
}
/* Amenities-Grid nutzt volle Breite → mehr Spalten auf Desktop */
.apt-amen-groups {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
}
@media (min-width: 1200px) {
  .apt-amen-groups {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
/* Galerie-Grid nutzt volle Breite → mehr Spalten */
.gallery-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 20px;
}
.apt-detail-content .gallery-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
  .gallery-grid,
  .apt-detail-content .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .gallery-grid,
  .apt-detail-content .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1400px) {
  .gallery-grid,
  .apt-detail-content .gallery-grid { grid-template-columns: repeat(5, 1fr); }
}
.gallery-tile {
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  position: relative;
  box-shadow: 0 0 0 1px var(--line);
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow, 600ms) var(--ease);
}
.gallery-tile:hover img {
  transform: scale(1.04);
}
.gallery-tile.is-large {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: 4/5;
}
@media (max-width: 500px) {
  .gallery-tile.is-large {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 4/5;
  }
}

/* Kontakt-Block auf Detailseiten: 3-Spalten Grid nutzt volle Breite */
.apt-detail-content .contact-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 24px clamp(20px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-2) 55%, transparent);
  margin-top: 16px;
}
@media (min-width: 720px) {
  .apt-detail-content .contact-block {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
.detail-hero::before {
  content: ""; position: absolute; top: -20%; left: -10%; width: 55%; height: 60%;
  background: radial-gradient(circle at center, var(--detail-color, var(--accent)) 0%, transparent 60%);
  opacity: 0.28; filter: blur(90px); z-index: 0; pointer-events: none;
}
.detail-hero > * { position: relative; z-index: 1; }
.detail-hero h1 { font-family: var(--font-display); font-size: var(--step-5); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 80; color: var(--ink); }
.detail-hero .detail-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); margin-bottom: 20px; color: var(--ink-70); }
.detail-hero .detail-visual { aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-3); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--line); position: relative; }
.detail-hero .detail-visual img { width: 100%; height: 100%; object-fit: cover; }

/* Landing-page prose */
.prose { max-width: 72ch; }
/* .prose-full nutzt die volle Breite (Cards, Grids etc) */
.prose-full { max-width: none; }
/* Zwei-Spalten-Layout in .prose-full für lange Fließtexte, sodass sie nicht in einer Spalte übersehen aussehen */
.prose-two-col {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: 1fr;
  margin: 40px 0;
}
@media (min-width: 900px) {
  .prose-two-col { grid-template-columns: 1fr 1fr; }
}
.prose-two-col > * { max-width: 60ch; }

/* .prose-grid: Karten-Grid für Content-Sektionen (Restaurants, Sights etc) */
.prose-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin: 32px 0;
}
@media (min-width: 720px) { .prose-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .prose-grid { grid-template-columns: repeat(3, 1fr); } }

/* Content-Card innerhalb .prose-grid */
.prose-card {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius-lg, 20px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 10px;
  transition: transform var(--dur, 380ms) var(--ease, ease), border-color var(--dur, 380ms) var(--ease, ease);
}
.prose-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.prose-card h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.prose-card .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-50);
}
.prose-card p {
  color: var(--ink-70);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
}
.prose-card a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-card .tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.prose-card .tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-70);
}
.prose h2 { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.05; letter-spacing: -0.015em; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 40; margin-top: 60px; margin-bottom: 20px; color: var(--ink); }
.prose h3 { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.12; letter-spacing: -0.01em; font-weight: 500; margin-top: 40px; margin-bottom: 14px; color: var(--ink); }
.prose p { color: var(--ink-70); margin: 0 0 1.2em 0; font-size: var(--step-0); line-height: 1.6; }
.prose ul { color: var(--ink-70); padding-left: 1.2em; margin: 0 0 1.2em 0; }
.prose ul li { padding: 4px 0; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* Breadcrumb — start below fixed nav (nav height ~74px), give visual breathing room */
.breadcrumb { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-50); padding: 96px var(--gutter) 12px; max-width: var(--max); margin-inline: auto; box-sizing: border-box; }
.breadcrumb a { color: var(--ink-70); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 8px; color: var(--ink-30); }

/* Landing shell */
.landing-shell { padding: 40px var(--gutter) 120px; max-width: var(--max); margin-inline: auto; }
.landing-shell .lead-block { margin-bottom: 60px; }
.landing-shell .lead-block .eyebrow { margin-bottom: 20px; }
.landing-shell h1 { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; letter-spacing: -0.025em; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 50; color: var(--ink); text-wrap: balance; max-width: 20ch; }
.landing-shell h1 em { font-style: italic; color: var(--accent); font-variation-settings: "opsz" 144, "SOFT" 100; }

/* Info card grid (used on landing pages instead of decorative fluff) */
.info-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 40px; }
@media (min-width: 720px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
.info-card { background: var(--bg-2); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 180px; }
.info-card .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.info-card h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 40; letter-spacing: -0.01em; color: var(--ink); }
.info-card p { color: var(--ink-70); font-size: var(--step--1); line-height: 1.55; }

/* Contact block */
.contact-block {
  display: grid; gap: 24px; grid-template-columns: 1fr;
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-2);
  margin-top: 40px;
}
@media (min-width: 720px) { .contact-block { grid-template-columns: repeat(3, 1fr); } }
.contact-block .c-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-50); margin-bottom: 8px; }
.contact-block .c-value { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; color: var(--ink); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 40; }
.contact-block .c-value a { color: var(--ink); }
.contact-block .c-value a:hover { color: var(--accent); }
.contact-block .c-value small { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: none; letter-spacing: 0.02em; color: var(--ink-50); margin-top: 6px; font-weight: 400; }

/* Review-source strip (no fake numbers, real links) */
.review-sources { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.review-sources a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink);
}
.review-sources a:hover { border-color: var(--accent); color: var(--accent); }
.review-sources a::after { content: "↗"; margin-left: 4px; opacity: 0.7; }

/* CTA row (landing page) */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Reduce hero size on landing pages */
.landing-shell .lead-block p.lead { max-width: 60ch; margin-top: 20px; }

/* Utility */
.mt-8 { margin-top: 32px; }
.mt-16 { margin-top: 64px; }

/* Apartment-Detailseite · dezente Telefon-Zeile unter dem CTA */
.phone-line {
  margin: 16px 0 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink-50);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
}
.phone-line-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10.5px;
}
.phone-line-num {
  color: var(--ink-70);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.phone-line-num:hover { color: var(--accent); }
.phone-line-sep {
  color: var(--ink-30, rgba(245,241,232,0.28));
}

/* ================ ÜBER SLEEPART · Editorial-Section ================ */
.about-section .about-body {
  margin-top: 48px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  max-width: 62ch;
}
@media (min-width: 900px) {
  .about-section .about-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 48px;
    max-width: none;
  }
  .about-section .about-body .about-paragraph:first-child {
    grid-column: 1 / -1;
    max-width: 62ch;
  }
}
.about-section .about-paragraph {
  font-family: var(--font-body, "Inter Tight", -apple-system, system-ui, sans-serif);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.6;
  color: var(--ink-70);
  margin: 0;
}
.about-section .about-paragraph em {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: 1.08em;
  letter-spacing: -0.005em;
}
.about-signature {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.about-signature-name {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.about-signature-role {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-50);
}

/* ================ SPRACH-UMSCHALTER (Nav) ================ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: color-mix(in oklab, var(--bg-2) 70%, transparent);
  border: 1.5px solid var(--line-strong, rgba(245,241,232,0.28));
  border-radius: 999px;
  transition: border-color var(--dur) var(--ease);
}
.lang-switch:hover { border-color: var(--accent); }
.lang-btn {
  border: 0;
  background: transparent;
  color: var(--ink-50);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 2px 4px;
  border-radius: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active {
  color: var(--accent);
}
.lang-sep {
  color: var(--ink-30, rgba(245,241,232,0.28));
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
}
@media (max-width: 720px) {
  .lang-switch { padding: 5px 10px; gap: 4px; }
  .lang-btn { font-size: 12px; }
  .lang-sep { font-size: 12px; }
}

/* ================ REVIEWS ================ */

/* Portal-Aggregate-Zeile (Google / Booking / Airbnb) */
.review-portals {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
}
.review-portal {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-2) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  position: relative;
}
.review-portal::before {
  /* Sanfter Neon-Gelb-Schleier oben — statt harter 3px-Strich ein weicher Farbverlauf,
     der elegant in die Karte übergeht. */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(222, 255, 0, 0.35) 0%, rgba(222, 255, 0, 0.10) 60%, transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}
/* Bei Portalen mit anderer Marken-Assoziation (Pink für Airbnb, Blau für Booking):
   subtile Nuance durch Portal-Farbe im Verlauf, aber Neon-Gelb bleibt Basis */
.review-portal[data-portal="google"]::before {
  background: linear-gradient(180deg, rgba(222, 255, 0, 0.35) 0%, rgba(222, 255, 0, 0.10) 60%, transparent 100%);
}
.review-portal[data-portal="booking"]::before {
  background: linear-gradient(180deg, rgba(61, 139, 255, 0.22) 0%, rgba(222, 255, 0, 0.12) 60%, transparent 100%);
}
.review-portal[data-portal="airbnb"]::before {
  background: linear-gradient(180deg, rgba(255, 61, 154, 0.20) 0%, rgba(222, 255, 0, 0.10) 60%, transparent 100%);
}
.review-portal:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); transform: translateY(-2px); }
.review-portal-name {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-70);
  margin-top: 4px;
}
.review-portal-score {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.review-portal-max {
  font-size: 0.4em;
  color: var(--ink-50);
  margin-left: 4px;
  font-weight: 400;
}
.review-portal-stars {
  color: var(--accent);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
}
.review-portal-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* --- Testimonials-Grid: eigene, deutliche Karten --- */
.testimonial-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px;
}
figure.testimonial {
  margin: 0;
  padding: 28px 28px 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
figure.testimonial::before {
  /* Große dekorative Anführungszeichen im Hintergrund */
  content: "„";
  position: absolute;
  top: -8px; left: 16px;
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.18;
  pointer-events: none;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-style: italic;
}
figure.testimonial:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--line));
  box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--accent) 40%, transparent);
}
.testimonial .stars {
  color: var(--accent);
  font-size: 17px;
  letter-spacing: 3px;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.testimonial-quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  flex: 1;
  position: relative;
  z-index: 1;
}
/* keine automatischen Quotes mehr – wir haben das dekorative "„" oben */
.testimonial-quote::before,
.testimonial-quote::after { content: none; }

.testimonial-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  gap: 12px;
  flex-wrap: wrap;
}
.testimonial-meta strong {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--font-body, "Inter Tight", -apple-system, system-ui, sans-serif);
  font-size: 14px;
  letter-spacing: 0.005em;
}
.testimonial-meta small {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-50);
}

/* Fußnote unter den Zitaten */
.review-footnote {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-50);
  max-width: 68ch;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ================ FAQ · Karten-System mit klarer visueller Differenzierung ================
   - Geschlossen: schlanke, dezente Karte (--bg-2 Hintergrund, dünne Linie)
   - Offen: farbig hervorgehoben mit --accent Border + Farb-Vertikallinie links
   - Antwort-Bereich hat eigene Hintergrundfarbe (--bg-3) und ist visuell abgegrenzt
   - Zoll-Toggle rechts wechselt von grauem "+" zu pinkem "×" (rotiert 45°)
*/
.faq-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Jedes Item ist eine eigenständige Karte, kein durchgehender Trenner */
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-2) 55%, transparent);
  overflow: hidden;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  position: relative;
}
.faq-item:hover:not(.open) {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  background: var(--bg-2);
}

/* Offener Zustand: deutlich farbig markiert */
.faq-item.open {
  background: var(--bg-2);
  border-color: var(--accent);
  box-shadow: 0 12px 40px -20px color-mix(in oklab, var(--accent) 60%, transparent),
              inset 3px 0 0 0 var(--accent);
}

/* --- Frage (Button) --- */
.faq-q {
  width: 100%;
  text-align: left;
  padding: 22px clamp(16px, 3vw, 26px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(15px, 2.4vw, 22px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 40;
  hyphens: auto;
  overflow-wrap: break-word;
  transition: color var(--dur) var(--ease);
}
.faq-q > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
}
/* Offen: Frage bekommt Akzent-Farbe */
.faq-item.open .faq-q { color: var(--accent); }

/* --- Toggle-Button (rechts) --- */
.faq-toggle {
  width: 34px; height: 34px;
  border: 1.5px solid var(--line-strong, rgba(245,241,232,0.28));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  font-family: var(--font-mono);
  font-size: 20px;
  line-height: 1;
  font-weight: 400;
  color: var(--ink-70);
  background: transparent;
  transition: transform var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.faq-item:hover:not(.open) .faq-toggle {
  border-color: var(--accent);
  color: var(--accent);
}
.faq-item.open .faq-toggle {
  background: var(--accent);
  color: var(--accent-ink, var(--bg));
  border-color: var(--accent);
  transform: rotate(45deg);
}

/* --- Antwort (aufklappbarer Container) --- */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms var(--ease);
}
.faq-a > div {
  padding: 4px clamp(16px, 3vw, 26px) 24px;
  max-width: 72ch;
  color: var(--ink-70);
  font-family: var(--font-body, "Inter Tight", -apple-system, system-ui, sans-serif);
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.65;
  border-top: 1px dashed color-mix(in oklab, var(--accent) 30%, var(--line));
  margin-top: 4px;
  padding-top: 20px;
}
.faq-item.open .faq-a {
  max-height: 1200px;
}

/* Größere Breiten */
@media (min-width: 720px) {
  .faq-q { padding: 26px 28px; gap: 24px; }
  .faq-toggle { width: 38px; height: 38px; flex-basis: 38px; font-size: 22px; }
  .faq-a > div { padding: 24px 28px 28px; }
}

/* ================ ANFAHRT & PARKEN (Standalone-Seite Hero) ================ */
.arrive-hero {
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.arrive-hero::before,
.arrive-hero::after {
  content: "";
  position: absolute;
  width: 60vw; max-width: 720px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  z-index: 0;
  pointer-events: none;
}
.arrive-hero::before {
  background: var(--accent);
  top: -20%; left: -10%;
}
.arrive-hero::after {
  background: var(--accent-2);
  bottom: -25%; right: -12%;
  opacity: 0.18;
}
.arrive-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .arrive-hero-inner { grid-template-columns: 1.15fr 1fr; }
}
.arrive-hero-h1 {
  margin-top: 24px;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.arrive-hero-meta {
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.arrive-hero-visual {
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-3);
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px var(--line);
}
.arrive-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.arrive-hero-visual::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent);
  mix-blend-mode: overlay; pointer-events: none;
}
:root[data-concept="cream"] .arrive-hero-visual::after { display: none; }

/* Standalone-Section (ohne Section-Head oben, weil der Hero das schon liefert) */
.arrive-section-solo { padding-top: 0; }

/* ================ ANFAHRT & PARKEN ================ */
.arrive-section .arrive-modes {
  margin-top: 48px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.arrive-mode {
  padding: 28px 28px 24px;
  background: color-mix(in oklab, var(--bg-2) 55%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.arrive-mode:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
}
.arrive-mode-icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 4px;
}
.arrive-mode-icon svg { width: 22px; height: 22px; }
.arrive-mode-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  line-height: 1.15;
}
.arrive-mode-summary {
  margin: 0;
  color: var(--ink-70);
  font-size: 14.5px;
  line-height: 1.5;
}
.arrive-steps {
  margin: 6px 0 0;
  padding-left: 1.2em;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  list-style: decimal;
}
.arrive-steps li { margin-bottom: 4px; }
.arrive-steps li::marker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.arrive-mode-note {
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-50);
  line-height: 1.5;
}

/* Ladezone-Highlight */
.arrive-loading {
  margin-top: 32px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    color-mix(in oklab, var(--bg-2) 70%, transparent);
  padding: 32px clamp(24px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.arrive-loading-inner { position: relative; z-index: 1; max-width: 68ch; }
.arrive-loading-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.arrive-loading-tag::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--accent);
}
.arrive-loading-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.arrive-loading-body { margin: 0 0 16px; color: var(--ink); font-size: 15px; line-height: 1.55; }
.arrive-loading-map { margin-top: 4px; }

/* Parkplätze-Grid */
.parking-header {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.parking-grid {
  margin-top: 24px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.parking-card {
  padding: 22px 24px;
  background: color-mix(in oklab, var(--bg-2) 55%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.parking-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
}
.parking-card.is-recommended {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 55%),
    color-mix(in oklab, var(--bg-2) 65%, transparent);
}
.parking-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-70);
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.parking-card.is-recommended .parking-card-tag { border-color: var(--accent); color: var(--accent); }
.parking-card.is-free .parking-card-tag { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); color: var(--accent); }
.parking-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
  font-variation-settings: "opsz" 144, "SOFT" 40;
}
.parking-card-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
}
.parking-card-facts dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-50);
  white-space: nowrap;
  padding-top: 2px;
}
.parking-card-facts dd { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.parking-card-note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  color: var(--ink-70);
  font-size: 13px;
  line-height: 1.5;
}

/* Zeitbegrenzt-gratis Tag (Hafenstraße) */
.parking-card.is-timeCapped .parking-card-tag {
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
  color: var(--accent);
}

/* ================ ANFAHRT-Seite · Text-Hero (kein Foto mehr) ================ */
.arrive-textHero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 4vw, 40px);
  position: relative;
  overflow: hidden;
}
.arrive-textHero::before,
.arrive-textHero::after {
  content: "";
  position: absolute;
  width: 50vw; max-width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
.arrive-textHero::before { background: var(--accent); top: -25%; left: -10%; }
.arrive-textHero::after  { background: var(--accent-2); bottom: -30%; right: -10%; opacity: 0.14; }
.arrive-textHero > .wrap {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.arrive-textHero .arrive-hero-h1 {
  margin-top: 20px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.arrive-textHero .arrive-hero-meta {
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* ================ LADEZONE-SEKTION (illustrierte Karte + Downloads) ================ */
.loading-zone {
  margin-top: clamp(48px, 7vw, 80px);
  padding: clamp(28px, 4vw, 44px);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-xl, 32px);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%),
    radial-gradient(circle at 90% 90%, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 55%),
    color-mix(in oklab, var(--bg-2) 65%, transparent);
  position: relative;
  overflow: hidden;
}
.loading-zone-head {
  max-width: 64ch;
}
.loading-zone-head .eyebrow {
  color: var(--accent);
  margin-bottom: 8px;
}
.loading-zone-h {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 40;
  margin: 0;
}
.loading-zone-map-wrap {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .loading-zone-map-wrap {
    grid-template-columns: minmax(300px, 420px) 1fr;
    align-items: start;
  }
}
.loading-zone-map-card {
  aspect-ratio: 3 / 4;
  background: var(--map-land);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px var(--line);
  position: relative;
  max-width: 100%;
}
.lz-svg { display: block; width: 100%; height: 100%; }

/* Kompass */
.lz-compass {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(30,30,30,0.14);
  border-radius: 999px;
  width: 36px; height: 36px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-mono);
  gap: 1px;
}
.lz-compass-n { color: var(--accent); font-weight: 700; font-size: 11px; line-height: 1; }
.lz-compass-arrow { color: rgba(30,30,30,0.6); font-size: 8px; line-height: 1; }

/* Legende */
.lz-legend {
  position: absolute;
  bottom: 12px; left: 12px;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 6px;
}
.lz-legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(30,30,30,0.14);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(30,30,30,0.82);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.lz-badge {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 11px;
}
.lz-badge.two { background: var(--accent-2); }

/* SVG-Karten-Animationen */
@keyframes lz-pulse {
  0%, 100% { opacity: 0.28; transform: scale(1); }
  50%      { opacity: 0.5;  transform: scale(1.04); }
}
.lz-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: lz-pulse 2.6s var(--ease) infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -24; } }
.path-flow {
  stroke-dasharray: 6 6;
  animation: dash-flow 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .lz-pulse, .path-flow { animation: none; }
}

/* Info-Rows rechts der Karte (bei ≥900px) */
.lz-info {
  margin: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
.lz-info-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-2) 40%, transparent);
}
.lz-info-row.is-highlight {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.lz-info-row dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-50);
  flex-shrink: 0;
}
.lz-info-row dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  text-align: right;
}
.lz-info-row dd strong {
  color: var(--ink);
  font-weight: 600;
}
.lz-info-row.is-highlight dd strong { color: var(--accent); }

/* Download-Aktionen unter der Karte */
.lz-actions {
  margin-top: clamp(24px, 3vw, 32px);
  display: flex; flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.lz-download-hint {
  margin: 12px 0 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-50);
  line-height: 1.5;
}