/* =========================================================================
   MUC Apartments — Stylesheet
   Ruhiges, hochwertiges Single-Property-Design.
   Farbpalette abgeleitet aus den Apartmentfotos (gedecktes Grün der
   Wohnküche) und dem Grundton des Logos (dunkles Marineblau) für die
   Textfarbe. Bewusst reduziert: ein Akzentton, wenige Bausteine.
   ========================================================================= */

/* ---------- Custom Properties -------------------------------------- */
:root {
  /* Farben */
  --color-bg: #F7F3EC;            /* warmes Off-White */
  --color-bg-alt: #EFE7D8;        /* etwas dunkleres Warmweiß für Wechsel */
  --color-surface: #FFFFFF;
  --color-ink: #1E2A33;           /* Anthrazit mit Marineblau-Unterton (Logo) */
  --color-ink-soft: #4A535C;
  --color-muted: #655D4E;         /* warmes Grau für Fließtext/Meta (AA-Kontrast geprüft) */
  --color-line: #DED4BF;          /* dezente Trennlinie */
  --color-accent: #33473D;        /* gedecktes Grün aus der Wohnküche */
  --color-accent-dark: #263630;
  --color-accent-tint: #E7E9E1;   /* sehr helle Grün-Beimischung */
  --color-overlay: rgba(20, 24, 22, 0.38);

  /* Typografie */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
    Roboto, Helvetica, Arial, sans-serif;
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.8rem + 2.6vw, 3.75rem);

  /* Layout */
  --max-width: 1240px;
  --content-width: 640px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(4rem, 9vw, 8rem);
  --radius-s: 3px;
  --radius-m: 6px;

  /* Bewegung */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 320ms;
}

/* ---------- Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-ink);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; padding: 0; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

input, select, textarea { font: inherit; }

/* Sichtbarer Fokus-State für Tastaturnavigation */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Sr-only / Skip-Link ---------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--color-ink);
  color: var(--color-bg);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-s);
  z-index: 200;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout-Hilfen ---------------------------------------------- */
.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-space); }
section.is-alt { background: var(--color-bg-alt); }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); }

h2 { font-size: var(--step-3); line-height: 1.15; }
h3 { font-size: var(--step-1); line-height: 1.3; }

.section-lede {
  margin-top: 1rem;
  color: var(--color-ink-soft);
  font-size: var(--step-1);
  max-width: 38rem;
  line-height: 1.55;
}

.lead {
  font-size: var(--step-1);
  color: var(--color-ink-soft);
  max-width: 42rem;
}

/* ---------- Buttons ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  min-height: 48px;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-ghost:hover { background: var(--color-ink); color: var(--color-bg); }

.btn-on-dark {
  background: #fff;
  color: var(--color-accent-dark);
}
.btn-on-dark:hover { background: var(--color-bg-alt); }

.btn-ghost-on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn-ghost-on-dark:hover { background: rgba(255,255,255,0.12); border-color:#fff; }

/* ======================================================================
   Header
   ====================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 243, 236, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  box-shadow: 0 6px 24px rgba(30, 26, 18, 0.05);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 76px;
}

.logo {
  display: flex;
  align-items: center;
  color: var(--color-ink);
}
.logo img { height: 38px; width: auto; }

.main-nav { display: none; }

@media (min-width: 900px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2.4vw, 2.4rem);
  }
  .main-nav a {
    font-size: 0.95rem;
    color: var(--color-ink-soft);
    padding: 0.4rem 0.1rem;
    position: relative;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .main-nav a:hover { color: var(--color-ink); }
  .main-nav a:hover::after { transform: scaleX(1); }
}

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.header-actions .btn-primary {
  padding: 0.65rem 1.4rem;
  min-height: 42px;
  font-size: 0.9rem;
}

/* ---------- Sprachumschalter DE / EN --------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.lang-switch button {
  background: none;
  border: none;
  padding: 0.3rem 0.15rem;
  font: inherit;
  font-size: inherit;
  color: var(--color-ink-soft);
  cursor: pointer;
  min-height: 32px;
}
.lang-switch button:hover { color: var(--color-ink); }
.lang-switch button[aria-pressed="true"] {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lang-switch-sep { color: var(--color-line); }

.lang-switch--mobile {
  margin-top: 1.5rem;
  font-size: 0.95rem;
}
.lang-switch--mobile button { min-height: 40px; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-s);
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 1.5px;
  background: var(--color-ink);
  position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 900px) { .menu-toggle { display: none; } }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--color-bg);
  z-index: 99;
  padding: 1.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; }
.mobile-nav a {
  display: block;
  padding: 1.05rem 0;
  font-size: 1.3rem;
  border-bottom: 1px solid var(--color-line);
}
.mobile-nav .btn { margin-top: 1.75rem; width: 100%; }

@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* ======================================================================
   Hero
   ====================================================================== */
.hero {
  position: relative;
  min-height: min(90vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ink);
}

.hero-media {
  position: absolute;
  inset: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,24,20,0.12) 0%, rgba(18,22,18,0.08) 45%, rgba(14,17,15,0.72) 100%);
}

.hero-content {
  position: relative;
  color: #fff;
  padding-top: clamp(3rem, 9vw, 5.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
  max-width: none;
}

.hero-content h1 {
  color: #fff;
  font-size: min(var(--step-4), 5.8vw);
  white-space: nowrap;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.hero-content p {
  margin-top: 1.25rem;
  font-size: var(--step-1);
  color: rgba(255,255,255,0.88);
  max-width: 34rem;
}

/* Handy: wie am Desktop zweizeilig (Ankommen. Wohnen. / München.) statt
   drei einzelne Wortzeilen – Schriftgröße schrumpft per vw passend zur
   Breite, damit "Ankommen. Wohnen." immer in eine Zeile passt. */
@media (max-width: 640px) {
  .hero-content h1 {
    font-size: min(var(--step-4), 9.2vw);
    white-space: nowrap;
  }

  /* Bildausschnitt auf schmalen Viewports: zeigt bewusst die Bilderrahmen-Wand
     (wie am Desktop) statt sie wegzuschneiden. Zusätzlicher Zoom (scale) von
     oben verankert schiebt die Rahmen etwas weiter nach unten im Bild, damit
     oben mehr ruhige Wandfläche für die Überschrift entsteht. */
  .hero-media img {
    object-position: center 58%;
    transform: scale(1.8);
    transform-origin: 50% 0%;
  }

  /* Dezente zusätzliche Abdunklung links/unten, wo der Text liegt. */
  .hero-media::after {
    background:
      linear-gradient(105deg, rgba(10,14,12,0.38) 0%, rgba(10,14,12,0.24) 38%, rgba(10,14,12,0.08) 62%, rgba(10,14,12,0) 78%),
      linear-gradient(180deg, rgba(10,13,11,0) 0%, rgba(10,13,11,0.08) 32%, rgba(8,11,9,0.42) 100%);
  }

  /* Textblock (Überschrift + Fließtext) als Ganzes etwas nach oben schieben
     (transform, damit das Buchungs-Widget darunter unbeeinflusst an seiner
     Position bleibt – der Hero-Inhalt ist über align-items:flex-end am
     unteren Rand verankert). Zusätzlich wird NUR der Abstand vor dem
     Fließtext vergrößert: das schiebt – bedingt durch die Bottom-Verankerung
     – ausschließlich die Überschrift weiter nach oben (in den Wandbereich
     über den Rahmen), während der Fließtext an seiner Position zwischen
     Rahmen und Sofa bleibt. Zeilenabstand beim Fließtext reduziert, damit
     er dort kompakt hineinpasst. Diese Werte sind an genau dieses Foto
     und seinen Bildausschnitt angepasst (empirisch kalibriert). */
  .hero-content {
    transform: translateY(-3rem);
  }
  .hero-content p {
    margin-top: 8.625rem;
    line-height: 1.3;
  }
}

.hero { padding-bottom: 0; }
.hero > .wrap { width: 100%; position: relative; }

/* Suchwidget im Hero */
.hero-booking {
  position: relative;
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius-m);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 980px;
  min-height: 88px;
  margin-bottom: clamp(1.25rem, 4vw, 2.75rem);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45);
}
.hero-booking booking-likemagic { display: block; width: 100%; }
.hero-booking .btn { width: 100%; }

/* ======================================================================
   Kurzüberblick
   ====================================================================== */
.overview .wrap {
  display: grid;
  gap: clamp(1.75rem, 4vw, 1rem);
}

@media (min-width: 760px) {
  .overview .wrap {
    grid-template-columns: repeat(4, 1fr);
  }
}

.overview-item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}
.overview-item .num {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
}
.overview-item h3 { font-size: var(--step-0); font-weight: 600; }
.overview-item p { margin-top: 0.5rem; color: var(--color-muted); font-size: 0.95rem; }

/* ======================================================================
   Das Apartment
   ====================================================================== */
.apartment-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 980px) {
  .apartment-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
  .apartment-grid.is-reverse .apartment-media { order: 2; }
}

.apartment-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-m);
}

.apartment-media.is-wide img { aspect-ratio: 3/2; }

.apartment-text > p { color: var(--color-ink-soft); }
.apartment-text .lead { margin-bottom: 1.5rem; }

.facts-list {
  margin-top: 2.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.25rem 1.5rem;
  border-top: 1px solid var(--color-line);
  padding-top: 1.75rem;
}

.facts-list div { }
.facts-list dt {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.3rem;
}
.facts-list dd { font-size: 1.02rem; color: var(--color-ink); }
.facts-list .placeholder { color: var(--color-muted); font-style: italic; }

/* ======================================================================
   Galerie
   ====================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.6rem, 1.6vw, 1rem);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  grid-column: span 6;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.gallery-item:hover img { transform: scale(1.035); }

.gallery-item .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(10,12,10,0.62), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover .cap,
.gallery-item:focus-within .cap { opacity: 1; }

/* Ab Tablet-Breite: feste Zeilenhöhe statt eigenem Seitenverhältnis pro
   Kachel. So sind alle Fotos innerhalb einer Zeile immer exakt gleich hoch,
   unabhängig von Spalten- oder Zeilen-Spanne. */
@media (min-width: 640px) {
  .gallery-grid { grid-auto-rows: clamp(170px, 17vw, 260px); }
  .gallery-item { aspect-ratio: auto; }
  .gallery-item.r2 { grid-row: span 2; }

  .gallery-item.span-3 { grid-column: span 3; }
  .gallery-item.span-4 { grid-column: span 4; }
  .gallery-item.span-2 { grid-column: span 2; }
}

@media (min-width: 980px) {
  .gallery-item.lg-span-2 { grid-column: span 2; }
  .gallery-item.lg-span-3 { grid-column: span 3; }
  .gallery-item.lg-span-4 { grid-column: span 4; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(14, 16, 14, 0.94);
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { display: flex; }
.lightbox figure { max-width: min(1100px, 92vw); max-height: 86vh; margin: 0; }
.lightbox img { max-height: 86vh; width: auto; margin-inline: auto; border-radius: var(--radius-s); }
.lightbox figcaption { color: rgba(255,255,255,0.75); text-align: center; margin-top: 0.9rem; font-size: 0.9rem; }

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  color: #fff;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transition: background var(--dur) var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.18); }
.lightbox-close { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lightbox-prev { left: clamp(0.5rem,2vw,1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(0.5rem,2vw,1.5rem); top: 50%; transform: translateY(-50%); }

/* ======================================================================
   Ausstattung
   ====================================================================== */
.amenities-grid {
  display: grid;
  gap: 2.25rem 2rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) { .amenities-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .amenities-grid { grid-template-columns: repeat(4, 1fr); } }

.amenity-group h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1rem;
}
.amenity-group ul li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.98rem;
  color: var(--color-ink-soft);
}
.amenity-group ul li:last-child { border-bottom: none; }
.amenity-group .note { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.6rem; font-style: italic; }

/* ======================================================================
   Booking
   ====================================================================== */
.booking-section {
  background: var(--color-ink);
  color: #fff;
}
.booking-section .section-head h2 { color: #fff; }
.booking-section .section-lede { color: rgba(255,255,255,0.72); }
.booking-section .eyebrow { color: #C9D6CC; }

/* Container für das LikeMagic-Suchwidget (rendert im eigenen Shadow-DOM;
   Feinanpassungen werden per js/main.js in das Widget eingefügt). */
.booking-widget-frame {
  background: #fff;
  color: var(--color-ink);
  border-radius: var(--radius-m);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-height: 96px;
}
.booking-widget-frame booking-likemagic { display: block; width: 100%; }

.booking-note a,
.faq-item .a a { text-decoration: underline; text-underline-offset: 2px; }
.booking-note {
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  max-width: 40rem;
}

/* ======================================================================
   Lage
   ====================================================================== */
.location-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 980px) { .location-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.distance-list { margin-top: 2rem; }
.distance-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.98rem;
}
.distance-list li:last-of-type { border-bottom: 1px solid var(--color-line); }
.distance-list .place { color: var(--color-ink); }
.distance-list .value { color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.location-note {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.location-media img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-m);
}

.reach-columns {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.reach-columns h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 0.6rem;
  font-weight: 600;
}
.reach-columns p { color: var(--color-ink-soft); font-size: 0.95rem; }

/* ======================================================================
   Business & Long Stay
   ====================================================================== */
.longstay {
  background: var(--color-accent);
  color: #fff;
}
.longstay h2 { color: #fff; }
.longstay .section-lede,
.longstay .lead { color: rgba(255,255,255,0.82); }
.longstay .eyebrow { color: #CFE0D3; }

.longstay-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 980px) { .longstay-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

.longstay-list {
  margin-top: 1.75rem;
  display: grid;
  gap: 0.75rem;
}
.longstay-list li {
  padding-left: 1.4rem;
  position: relative;
  color: rgba(255,255,255,0.92);
}
.longstay-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 6px; height: 1px;
  background: rgba(255,255,255,0.7);
}

.longstay .btn { margin-top: 2rem; }

/* ======================================================================
   FAQ
   ====================================================================== */
.faq-list { max-width: 46rem; border-top: 1px solid var(--color-line); }

.faq-item { border-bottom: 1px solid var(--color-line); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  font-size: 1.02rem;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item .icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.faq-item .icon::before,
.faq-item .icon::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-item .icon::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-item .icon::after { top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }
.faq-item[open] .icon::after { opacity: 0; }

.faq-item .a {
  padding-bottom: 1.4rem;
  color: var(--color-ink-soft);
  max-width: 40rem;
}
.faq-item .a .flag {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-style: italic;
}

/* ======================================================================
   Kontakt
   ====================================================================== */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1.1fr 0.9fr; } }

.contact-list { margin-top: 2rem; display: grid; gap: 1.4rem; }
.contact-list dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.contact-list dd { font-size: 1.15rem; margin-top: 0.25rem; }
.contact-list a:hover { color: var(--color-accent); }

/* ======================================================================
   Rechtsseiten (Impressum / Datenschutz / AGB)
   ====================================================================== */
.legal-page-header {
  padding-block: clamp(2.5rem, 6vw, 4rem) 0;
}
.legal-page-header h1 {
  font-size: var(--step-3);
  line-height: 1.15;
  margin-top: 0.75rem;
}

.legal-back-link {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--color-muted);
  font-size: 0.92rem;
}
.legal-back-link:hover { color: var(--color-accent); }

.legal-updated {
  margin-top: 0.75rem;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* Hinweis: Diese englische Fassung ist eine Übersetzung zur Orientierung;
   maßgeblich ist die deutsche Version. Nur im Englischen sichtbar. */
.translation-note {
  display: none;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-accent-tint);
  border-radius: var(--radius-s);
  color: var(--color-ink-soft);
  font-size: 0.88rem;
  max-width: 42rem;
}
html[lang="en"] .translation-note { display: block; }

.legal-body { padding-block: 0; }

.legal-content {
  max-width: 46rem;
  padding-block: clamp(2rem, 5vw, 3rem) clamp(4rem, 9vw, 7rem);
}

.legal-content h2 {
  font-size: var(--step-2);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content p {
  color: var(--color-ink-soft);
  margin-bottom: 1.1rem;
  line-height: 1.6;
}
.legal-content p:last-child { margin-bottom: 0; }

.legal-content p a,
.legal-content li a,
.legal-content table a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--color-accent); }

.legal-content ul {
  list-style: disc;
  padding-left: 1.3rem;
  margin: 0 0 1.4rem;
  color: var(--color-ink-soft);
}
.legal-content li { margin-bottom: 0.6rem; line-height: 1.6; }
.legal-content li:last-child { margin-bottom: 0; }

.legal-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.6rem;
  -webkit-overflow-scrolling: touch;
}
.legal-content table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.legal-content th,
.legal-content td {
  text-align: left;
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.legal-content thead th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-line);
}
.legal-content tbody td:first-child { color: var(--color-ink); font-weight: 600; }

/* ======================================================================
   Footer
   ====================================================================== */
.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.72);
  padding-block: 2.75rem;
  font-size: 0.88rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer-brand { color: #fff; font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-links a:hover { color: #fff; }
.footer-copy { width: 100%; margin-top: 1.75rem; color: rgba(255,255,255,0.55); font-size: 0.8rem; }

/* ======================================================================
   Sticky Mobile-Buchen-Button
   ====================================================================== */
.mobile-book-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0.75rem var(--gutter);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-line);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
}
.mobile-book-bar.is-visible { transform: translateY(0); }
.mobile-book-bar .btn { width: 100%; }

@media (min-width: 900px) { .mobile-book-bar { display: none; } }

/* ======================================================================
   Reveal-on-scroll (subtil)
   ====================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ======================================================================
   Utilities
   ====================================================================== */
.visually-hide-small { }
@media (max-width: 640px) { .hide-mobile { display: none; } }
@media (min-width: 641px) { .hide-desktop { display: none; } }