/* =========================================================
   Dana Living — Löningstraße 30, Bremen
   Designsystem im Stil der Dana-Investment-Website
   (Graustufen-UI, Cormorant Garamond + Inter Tight)
   ========================================================= */

@import url('../fonts/fonts.css');

:root {
  --ink:    #4A4034;   /* dunkles Umbra-Braun (aus Logo) */
  --white:  #F2EADB;   /* helles Cremebeige — Text auf dunklen Flächen */
  --cream:  #E9DECC;   /* warmes Sandbeige (aus Logo) — helle Sektionen */

  --gray-10: #EFE6D6;
  --gray-20: #E2D7C3;
  --gray-30: #CDC0A9;
  --gray-40: #B6A88F;
  --gray-50: #9C8E76;
  --gray-60: #7E715C;
  --gray-70: #665B49;
  --gray-80: #4A4135;
  --gray-90: #322C23;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1280px;
  --pad-section: clamp(80px, 12vw, 170px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; }
/* Anker-Ziele nicht unter der fixierten Navi verstecken */
section[id], header[id] { scroll-margin-top: 78px; }

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ---------- Typografie-Helfer ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gray-60);
}
.serif { font-family: var(--serif); font-weight: 300; }
.italic { font-style: italic; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.04; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 64px);
  transition: background .5s ease, padding .4s ease, border-color .5s ease;
  border-bottom: 1px solid transparent;
  justify-content: flex-end;
}
.nav.scrolled {
  background: rgba(45,38,30,.74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: 16px; padding-bottom: 16px;
  border-color: rgba(242,234,219,.10);
}
.nav.light.scrolled {
  background: rgba(233,222,204,.86);
  border-color: rgba(74,64,52,.12);
}
.nav__brand { display: flex; align-items: center; gap: 9px;
  position: absolute; left: 50%; transform: translateX(-50%); }
.nav__brand .sub { display: none; }
.nav__brand .logo-mark { display: flex; width: 21px; flex-shrink: 0; color: var(--white); transition: color .5s ease; }
.nav__brand .logo-mark svg { shape-rendering: geometricPrecision; }
.nav.light .nav__brand .logo-mark { color: var(--ink); }
.nav__brand .brand-text { display: flex; align-items: baseline; gap: 12px; }
.nav__brand .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--white);
  transition: color .5s ease;
  text-shadow: 0 1px 3px rgba(18,13,8,.8);
}
.nav.light .nav__brand .mark { text-shadow: none; }
.nav__brand .sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gray-50);
}
.nav.light .nav__brand .mark { color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gray-20);
  transition: color .3s ease;
  text-shadow: 0 1px 3px rgba(18,13,8,.8);
}
.nav.light .nav__links a { color: var(--gray-80); text-shadow: none; }
.nav__links a:hover { color: var(--white); }
.nav.light .nav__links a:hover { color: var(--ink); }

.nav__cta {
  border: 1px solid var(--gray-50);
  padding: 11px 22px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  transition: all .3s ease;
}
.nav.light .nav__cta { color: var(--ink); border-color: var(--gray-40); }
.nav__cta:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.nav.light .nav__cta:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: 0; }
.nav__burger span { width: 24px; height: 1.5px; background: var(--white); transition: background .4s; }
.nav.light .nav__burger span { background: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 28px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: all .35s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--light { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn--light:hover { background: transparent; color: var(--white); }
.btn--light-ghost { border-color: var(--gray-50); background: transparent; color: var(--white); }
.btn--light-ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }
.rv-stagger > * { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.rv-stagger.in > * { opacity: 1; transform: none; }
.rv-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.rv-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.rv-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.rv-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.rv-stagger.in > *:nth-child(6) { transition-delay: .40s; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #241c16;
}
/* Verdunklung nur lokal hinter dem Text (unten links) – Video bleibt sonst hell */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 82% 70% at 17% 90%,
    rgba(26,21,16,.82) 0%, rgba(26,21,16,.55) 30%, rgba(26,21,16,0) 64%);
}
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,15,10,.55) 0%, rgba(20,15,10,0) 100%);
}
/* Voll-Abdunklung: erscheint erst am Ende des Videos */
.hero__darken { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(18,14,10,.64); opacity: 0; transition: opacity 1.2s ease; }
.hero.ended .hero__darken { opacity: 1; }

/* Hero-Inhalt (Logo + Text) – nur am Schluss sichtbar */
.hero__inner { position: relative; z-index: 2; width: 100%; text-align: center; padding: 90px 0;
  text-shadow: 0 2px 26px rgba(18,14,10,.65); }
/* weicher Schatten hinter Text + Buttons während des Videos */
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 72% 58% at 50% 52%, rgba(18,14,10,.62) 0%, rgba(18,14,10,.28) 45%, rgba(18,14,10,0) 72%); }
/* Logo blendet erst am Videoende ein */
.hero__endlogo { margin: 0 auto clamp(20px,3.4vw,34px); display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity 1.1s ease, transform 1.1s ease; }
.hero.ended .hero__endlogo { opacity: 1; transform: none; }
.hero__endlogo .logo-mark { width: clamp(44px,6vw,68px); color: var(--white); }
.hero__endlogo .wm { font-family: var(--serif); font-weight: 400; font-size: clamp(20px,2.4vw,28px);
  letter-spacing: 0.22em; color: var(--white); padding-left: 0.22em; }
.hero__line { color: var(--white); font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px,4.2vw,54px); line-height: 1.2; max-width: 22ch; margin: 0 auto; }
.hero__line em { font-style: italic; }
.hero__actions { display: flex; gap: 16px; margin-top: clamp(30px,4vw,44px); flex-wrap: wrap; justify-content: center; }
.hero__scroll {
  position: absolute; bottom: 28px; right: clamp(20px, 5vw, 64px);
  z-index: 2; color: var(--white); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 10px rgba(18,14,10,.6);
}
.hero__scroll .line { width: 40px; height: 1px; background: var(--gray-60); position: relative; overflow: hidden; }
.hero__scroll .line::after { content:''; position:absolute; inset:0; background: var(--white); animation: scrollLine 2.4s ease-in-out infinite; }
@keyframes scrollLine { 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* =========================================================
   Generische Sektionen
   ========================================================= */
.section { padding: var(--pad-section) 0; }
.section--dark { background: var(--ink); color: var(--white); }
.section--cream { background: var(--cream); }
.section__head { max-width: 760px; margin-bottom: clamp(48px, 7vw, 96px); }
.section__head .eyebrow { margin-bottom: 22px; }
.section__head h2 { font-size: clamp(34px, 5vw, 72px); }
.section__head h2 em { font-style: italic; }
.section__head p { margin-top: 26px; font-size: 17px; color: var(--gray-70); max-width: 60ch; }
.section--dark .section__head p { color: var(--gray-30); }

/* ---------- Konzept / Zahlen ---------- */
.lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 1.28;
  max-width: 22ch;
}
.lead em { font-style: italic; }
.concept-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.concept-text p { color: var(--gray-70); margin-top: 22px; max-width: 46ch; }
.concept-figure { position: relative; }
.concept-figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(8%); aspect-ratio: 4/5; }

.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--gray-20); border: 1px solid var(--gray-20); margin-top: clamp(60px,8vw,100px); }
.section--dark .stats { background: var(--gray-90); border-color: var(--gray-90); }
.stat { background: var(--white); padding: 38px 26px; }
.section--dark .stat { background: var(--ink); }
.stat .num { font-family: var(--serif); font-style: italic; font-size: clamp(40px,5vw,58px); line-height: 1; }
.stat .lbl { margin-top: 12px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-60); }

/* =========================================================
   ZIMMER-GRID (Übersicht)
   ========================================================= */
.floor-block { margin-bottom: clamp(60px, 8vw, 110px); }
.floor-block:last-child { margin-bottom: 0; }
.floor-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--gray-20); }
.floor-head .ot { font-family: var(--serif); font-style: italic; font-size: clamp(26px,3vw,38px); }
.floor-head .ct { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-60); }

.rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 30px); }
.room-card { position: relative; display: block; background: var(--gray-10); overflow: hidden; }
.room-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--gray-30); }
.room-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease; filter: grayscale(6%); }
.room-card:hover .room-card__media img { transform: scale(1.06); }
.room-card__media::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(40,34,27,.58), transparent 55%); opacity:.85; }
.room-card__no { position: absolute; top: 16px; left: 16px; z-index:2; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--white); }
.room-card__body { position: absolute; bottom: 0; left: 0; right: 0; z-index:2; padding: 20px 22px; display:flex; align-items: flex-end; justify-content: space-between; }
.room-card__city { font-family: var(--serif); font-size: clamp(24px,2.4vw,30px); color: var(--white); line-height: 1; }
.room-card__hint { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray-30); display:flex; align-items:center; gap:8px; transition: gap .3s; }
.room-card:hover .room-card__hint { gap: 14px; color: var(--white); }
.room-card--soon .room-card__media { display:flex; align-items:center; justify-content:center; background: var(--gray-20); }
.room-card--soon .room-card__media::after { background: linear-gradient(to top, rgba(40,34,27,.38), transparent 60%); }
.room-card--soon .soon-tag { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-60); }

/* =========================================================
   AUSSTATTUNG
   ========================================================= */
.amen-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gray-20); border:1px solid var(--gray-20); }
.amen { background: var(--white); padding: 34px 30px; }
.amen .ic { font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--gray-50); }
.amen h4 { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; margin-top: 16px; }
.amen p { font-size: 14px; color: var(--gray-60); margin-top: 8px; }

/* =========================================================
   LAGE / KONTAKT
   ========================================================= */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items:center; }
.split--media img { width:100%; aspect-ratio: 5/6; object-fit: cover; filter: grayscale(14%); }
.contact-list { margin-top: 30px; }
.contact-list .row { display:flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--gray-80); }
.contact-list .row:last-child { border-bottom: 1px solid var(--gray-80); }
.contact-list .k { width: 130px; flex-shrink:0; font-size: 12px; letter-spacing:0.16em; text-transform:uppercase; color: var(--gray-50); padding-top: 3px; }
.contact-list .v { font-size: 16px; }
.contact-list .v a:hover { text-decoration: underline; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta-final { text-align:center; }
.cta-final h2 { font-size: clamp(38px,6vw,86px); }
.cta-final h2 em { font-style: italic; }
.cta-final p { color: var(--gray-30); margin: 24px auto 0; max-width: 48ch; font-size: 17px; }
.cta-final .hero__actions { justify-content:center; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--ink); color: var(--gray-40); padding: clamp(60px,8vw,100px) 0 40px; border-top: 1px solid var(--gray-90); }
.footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { width: 190px; filter: brightness(0) invert(1); opacity:.92; }
.footer-logo { width: 244px; max-width: 80%; height: auto; color: var(--white); }
.footer__brand p { margin-top: 22px; font-size: 14px; color: var(--gray-60); max-width: 34ch; }
.footer__col h5 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray-50); margin-bottom: 18px; }
.footer__col a, .footer__col p { display:block; font-size: 14px; color: var(--gray-40); margin-bottom: 10px; }
.footer__col a:hover { color: var(--white); }
.footer__bottom { display:flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: clamp(48px,7vw,80px); padding-top: 28px; border-top: 1px solid var(--gray-90); font-size: 12px; color: var(--gray-60); }
.footer__bottom a { margin-left: 22px; }
.footer__bottom a:hover { color: var(--white); }

/* =========================================================
   ZIMMER-DETAILSEITE
   ========================================================= */
.detail-hero { position: relative; min-height: 78vh; display:flex; align-items:flex-end; background: var(--ink); overflow:hidden; }
.detail-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; filter: grayscale(14%) brightness(.6); }
.detail-hero::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(40,34,27,.9), rgba(40,34,27,.16) 55%, rgba(40,34,27,.5)); }
.detail-hero__inner { position:relative; z-index:2; width:100%; padding-bottom: clamp(40px,6vw,80px); }
.detail-hero .back { display:inline-flex; align-items:center; gap:10px; color: var(--gray-30); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; margin-bottom: 28px; }
.detail-hero .back:hover { color: var(--white); }
.detail-hero .no { font-family: var(--serif); font-style: italic; font-size: clamp(18px,2vw,24px); color: var(--gray-40); }
.detail-hero h1 { color: var(--white); font-size: clamp(52px,9vw,120px); margin-top: 6px; }
.detail-hero .tagline { color: var(--gray-30); font-size: clamp(16px,1.6vw,20px); font-family: var(--serif); font-style: italic; margin-top: 14px; }

.detail-meta { display:flex; flex-wrap:wrap; gap: clamp(28px,5vw,70px); padding: clamp(40px,5vw,70px) 0; border-bottom:1px solid var(--gray-20); }
.detail-meta .item .k { font-size: 11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--gray-60); }
.detail-meta .item .v { font-family: var(--serif); font-style:italic; font-size: 28px; margin-top: 6px; }

.detail-body { padding: clamp(50px,7vw,90px) 0; }
.detail-body .lead { margin-bottom: 30px; }
.detail-body p { color: var(--gray-70); max-width: 64ch; margin-bottom: 18px; font-size: 16px; }
.detail-feats { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 34px; }
.detail-feats span { font-size: 12px; letter-spacing: 0.08em; padding: 8px 16px; border: 1px solid var(--gray-30); border-radius: 2px; color: var(--gray-70); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.5vw,22px); padding-bottom: clamp(60px,8vw,110px); }
.gallery img { width:100%; height:100%; aspect-ratio: 4/3; object-fit: cover; display:block; cursor: zoom-in; filter: grayscale(5%); transition: filter .5s, opacity .5s; }
.gallery img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1/1; }
.gallery img:hover { filter: grayscale(0%); }

.other-rooms { background: var(--cream); padding: var(--pad-section) 0; }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset:0; z-index: 300; background: rgba(40,34,27,.96); display:none; align-items:center; justify-content:center; }
.lb.open { display:flex; }
.lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lb__close, .lb__nav { position:absolute; background:none; border:0; color: var(--gray-30); cursor:pointer; font-family: var(--serif); }
.lb__close { top: 26px; right: 34px; font-size: 34px; }
.lb__close:hover { color: var(--white); }
.lb__nav { top:50%; transform: translateY(-50%); font-size: 50px; padding: 0 26px; }
.lb__nav:hover { color: var(--white); }
.lb__prev { left: 8px; } .lb__next { right: 8px; }
.lb__count { position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.2em; color: var(--gray-50); }

/* =========================================================
   PARKEN
   ========================================================= */
.park { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: clamp(40px,6vw,90px); align-items: center; }
.park__badge { background: var(--ink); color: var(--white); border-radius: 3px; padding: clamp(34px,5vw,58px); text-align: center; }
.park__badge .time { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(56px,9vw,116px); line-height: .88; }
.park__badge .lbl { display: block; margin-top: 14px; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray-40); }
@media (max-width: 1080px) { .park { grid-template-columns: 1fr; } }

/* =========================================================
   BUCHUNG (Smoobu)
   ========================================================= */
#d-booking { padding: var(--pad-section) 0; }
.booking { max-width: 880px; }
.booking__body { margin-top: 32px; }
.booking-note { color: var(--gray-30); font-size: 16px; max-width: 52ch; }
.smoobu-frame { width: 100%; height: 178px; min-height: 178px; border: 0; background: var(--white); border-radius: 6px; box-shadow: 0 14px 36px rgba(0,0,0,.2); transition: height .35s ease; }
@media (max-width: 900px) { .smoobu-frame { height: 260px; min-height: 260px; } }
@media (max-width: 540px) { .smoobu-frame { height: 410px; min-height: 410px; } }
#buchen-widget .smoobu-frame { min-height: 640px; }
#buchen-widget .booking-note { color: var(--gray-30); margin: 0 auto; text-align: center; }
#buchen-widget .hero__actions { justify-content: center; }

/* =========================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ========================================================= */
.legal-hero { background: var(--ink); color: var(--white); padding: clamp(118px,16vw,176px) 0 clamp(34px,6vw,60px); }
.legal-hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(38px,6vw,72px); }
.legal-hero h1 em { font-style: italic; }
.legal-hero p { color: var(--gray-40); margin-top: 10px; font-size: 13px; letter-spacing: .04em; }
.legal { padding: clamp(48px,7vw,84px) 0; }
.legal .doc { max-width: 820px; }
.legal h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(22px,3vw,32px); margin: 40px 0 12px; }
.legal h3 { font-size: 15px; font-weight: 500; margin: 22px 0 6px; letter-spacing: .02em; }
.legal p, .legal li { color: var(--gray-80); font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.legal ul { padding-left: 20px; margin-bottom: 14px; }
.legal a { text-decoration: underline; }
.legal strong { font-weight: 500; }
.legal .todo { background: var(--gray-10); border-radius: 3px; padding: 15px 18px; font-size: 13.5px; color: var(--gray-70); margin: 16px 0; }

/* =========================================================
   COOKIE-CONSENT
   ========================================================= */
.cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; display: none;
  background: var(--ink); color: var(--white); padding: 22px clamp(20px,5vw,48px);
  box-shadow: 0 -14px 44px rgba(0,0,0,.32); }
.cc-banner.show { display: block; }
.cc-inner { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.cc-text { flex: 1; min-width: 260px; font-size: 14px; color: var(--gray-30); line-height: 1.6; }
.cc-text a { color: var(--white); text-decoration: underline; }
.cc-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cc-btn { cursor: pointer; border: 1px solid var(--gray-50); background: transparent; color: var(--white);
  font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 13px 22px; border-radius: 2px; transition: all .3s ease; }
.cc-btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.cc-btn--primary { background: var(--white); color: var(--ink); border-color: var(--white); }
.cc-btn--primary:hover { background: transparent; color: var(--white); border-color: var(--gray-50); }
.cc-settings { display: none; max-width: var(--maxw); margin: 18px auto 0; border-top: 1px solid var(--gray-90); padding-top: 16px; }
.cc-settings.show { display: block; }
.cc-opt { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; }
.cc-opt input { margin-top: 4px; flex-shrink: 0; }
.cc-opt .h { font-size: 14px; font-weight: 500; }
.cc-opt .d { font-size: 13px; color: var(--gray-40); margin-top: 2px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .rooms-grid { grid-template-columns: repeat(2,1fr); }
  .concept-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .nav__links { position: fixed; inset: 0; background: var(--ink); flex-direction: column; justify-content: center; gap: 30px; transform: translateX(100%); transition: transform .5s cubic-bezier(.16,1,.3,1); }
  .nav__links.open { transform: none; }
  .nav__links a { color: var(--white); font-size: 18px; }
  .nav__burger { display: flex; z-index: 110; }
  .nav__cta { display: none; }
  .rooms-grid { grid-template-columns: 1fr; }
  .amen-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery img:first-child { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
  .detail-meta { gap: 26px; }
  .footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rv, .rv-stagger > * { opacity: 1 !important; transform: none !important; }
  .hero__bg { transform: none; }
  .hero__inner, .hero__darken, .hero__endlogo { opacity: 1 !important; transform: none !important; }
}

/* Sichtbarer Fokus für Tastaturnavigation (A11y) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gray-60); outline-offset: 3px; }

/* Smoobu-Verfügbarkeitskalender auf dunkler Buchungssektion */
.smoobu-cal-wrap { background: var(--white); border-radius: 6px; padding: clamp(12px,2vw,22px); box-shadow: 0 14px 36px rgba(0,0,0,.2); }
.smoobu-cal-wrap .calendarWidget { max-width: 100%; }

.booking-sub { color: var(--gray-40); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; margin: 30px 0 12px; }

/* ===== Buchungs-Modal ===== */
.bk-modal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center;
  padding: clamp(12px,3vw,28px); background: rgba(18,14,10,.72); }
.bk-modal.open { display: flex; }
.bk-modal__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1060px;
  height: 88vh; max-height: 900px; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.bk-modal__head { padding: 16px 22px; padding-right: 54px; font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gray-70); border-bottom: 1px solid var(--gray-20); }
.bk-modal__close { position: absolute; top: 4px; right: 14px; z-index: 2; background: none; border: 0; cursor: pointer;
  font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--gray-60); }
.bk-modal__close:hover { color: var(--ink); }
.bk-modal__frame { flex: 1; width: 100%; border: 0; background: var(--white); }

/* Apartments-Auswahl im Buchungs-Modal */
.bk-modal__body { flex: 1; overflow: auto; padding: clamp(16px,3vw,28px); background: var(--cream); }
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.5vw,18px); }
@media (max-width: 760px) { .bk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-modal__body .room-card__media { aspect-ratio: 4/3; }