/* ═══════════════════════════════════════════════════════════════════
   KDS BASE – Unsere Stadtvilla
   Typografie, Buttons, Header, Footer, Utilities.
   Baut auf tokens.css auf – niemals tokens.css direkt verändern.
═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Wrapper ── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--sm { max-width: var(--maxw-sm); margin: 0 auto; padding-inline: var(--gutter); }

/* ── Typografie ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font); font-weight: 700; }
p  { line-height: 1.78; color: var(--text); }

/* Eyebrow – kleines Label über Headlines */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font);
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-d);
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--gold); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 15px 32px;
  border: 1.5px solid var(--accent);
  background: var(--accent); color: #fff;
  cursor: pointer; transition: .25s var(--ease);
  white-space: nowrap; border-radius: 999px;
}
.btn:hover { background: var(--rot-d); border-color: var(--rot-d); }

.btn--ghost {
  background: transparent; color: var(--accent); border-color: var(--accent);
}
.btn--ghost:hover { background: var(--accent); color: #fff; }

.btn--gold {
  background: var(--gold-d); border-color: var(--gold-d); color: #fff;
}
.btn--gold:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

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

/* Booking-Button – Gold, prominent */
.btn--booking {
  background: var(--gold-d); border-color: var(--gold-d); color: #fff;
  font-size: 12px; padding: 12px 26px; letter-spacing: .1em;
}
.btn--booking:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ── Ornamentale Trennlinie ── */

/* ── Sektion-Header ── */
.sec-head { text-align: center; margin-bottom: clamp(36px, 4vw, 64px); }
.sec-head h2 { max-width: 24ch; margin-inline: auto; text-wrap: balance; }
.sec-head p { max-width: 58ch; margin: 16px auto 0; color: var(--muted); font-size: 15.5px; font-weight: 300; line-height: 1.75; text-wrap: balance; }

/* ══════════════════════════════════════════════════════════════════
   HEADER – hell (Fassaden-Creme), klare Kante zum Inhalt
══════════════════════════════════════════════════════════════════ */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.hd__topline { height: 3px; background: var(--rot); }
.hd.is-scrolled {
  background: rgba(250,247,240,.97);
  box-shadow: 0 4px 24px rgba(43,27,20,.09);
  backdrop-filter: blur(6px);
}

.hd__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 84px;
  transition: min-height .35s var(--ease);
}
.hd.is-scrolled .hd__bar { min-height: 64px; }

/* Logo / Wortmarke */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 50px; width: auto; transition: height .35s var(--ease); }
.hd.is-scrolled .logo img { height: 40px; }
.logo-mark { display: flex; flex-direction: column; line-height: 1.15; }
.logo-mark__name {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 700;
  letter-spacing: .015em;
  white-space: nowrap;
}
.logo-mark__sub {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 3px;
  white-space: nowrap;
}

/* Navigation */
.nav {
  display: flex; align-items: center;
  justify-content: center; gap: clamp(18px, 2.2vw, 30px);
  flex: 1 1 auto; margin: 0 12px;
}
.nav a {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink);
  position: relative; padding: 6px 0; white-space: nowrap;
  transition: color .2s;
}
.nav a:hover { color: var(--rot); }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--rot);
  transition: width .25s var(--ease);
}
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
.nav a.is-active { color: var(--rot); }

/* Header rechts */
.hd__right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* Booking-Button im Header: Bordeaux, klarer Kontrast auf Creme */
.hd .btn--booking {
  background: var(--rot); border-color: var(--rot); color: #fff;
}
.hd .btn--booking:hover { background: var(--rot-d); border-color: var(--rot-d); color: #fff; }

/* Burger */
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
}
.burger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); transition: .25s var(--ease);
  border-radius: 2px;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1120px) {
  .hd__bar { min-height: 68px; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg);
    border-bottom: 2px solid var(--line);
    padding: 6px var(--gutter) 20px;
    margin: 0;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: .28s var(--ease);
    box-shadow: 0 16px 32px rgba(43,27,20,.12);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .nav a:last-child { border-bottom: 0; }
  .burger { display: flex; }
  .hd .btn--booking { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════════ */
.ft { background: var(--foot); color: var(--foot-text); font-size: 14.5px; }
.ft .wrap { max-width: none; padding-inline: clamp(28px, 5vw, 96px); }

.ft__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  column-gap: clamp(40px, 7vw, 140px); row-gap: 40px;
  padding-block: 68px 56px;
}

/* Logo & Kontakt */
.ft__logo { margin-bottom: 26px; }
.ft__logo img { height: clamp(120px, 12vw, 170px); width: auto; }
.ft__contact { display: flex; flex-direction: column; gap: 12px; }
.ft__row { display: flex; align-items: flex-start; gap: 12px; line-height: 1.45; }
.ft__row svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: var(--gold); stroke-width: 1.5; margin-top: 2px; }
.ft__row a:hover { color: var(--gold-l); }

/* Spalten – Links kompakt untereinander, als Block mittig zur Markenspalte.
   Zwei Korrekturen stecken hier drin: Mit flex:1 füllten die Links früher die
   gesamte Spaltenhöhe, damit der letzte Eintrag auf einer Linie mit den
   Kontaktdaten endete. Seit die Karte in der Markenspalte steht, ist diese
   Spalte viel höher – die Links wurden dadurch über 100 px auseinandergezogen.
   Mit flex:0 standen sie kompakt, aber oben, und darunter klaffte eine grosse
   leere Fläche. justify-content:center verteilt den Überschuss auf beide
   Seiten, dann wirkt der Block ruhig. */
.ft__col { display: flex; flex-direction: column; justify-content: center; }
.ft__col h4 { flex: 0 0 auto; }
.ft__col a { flex: 0 0 auto; }

.ft__col h4 {
  font-family: var(--font); font-size: 10px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.ft__col a {
  display: block; color: var(--foot-muted); font-size: 14px;
  padding: 5px 0; transition: color .2s;
}
.ft__col a:hover { color: var(--foot-link); }

/* Bottom Bar */
.ft__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px clamp(28px, 5vw, 96px);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--foot-muted);
}
.ft__kds a { color: var(--gold); }
.ft__kds a:hover { color: var(--gold-l); }

@media (max-width: 900px) {
  .ft__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .ft__top { grid-template-columns: 1fr; }
  .ft__bottom { flex-direction: column; text-align: center; }
}

/* ── Accessibility ── */
.skip-link {
  position: absolute; top: -100%; left: 0; z-index: 9999;
  background: var(--accent); color: #fff;
  padding: 8px 16px; font-size: 14px; font-weight: 700;
}
.skip-link:focus { top: 0; }


/* ══ BARRIEREFREIHEIT ══════════════════════════════════════════════ */
/* Sichtbarer Tastatur-Fokus (WCAG 2.4.7) – Gold-Ring, überall konsistent */
:focus-visible {
  outline: 2.5px solid var(--gold-d);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }
.hd :focus-visible, .ft :focus-visible { outline-color: var(--gold-l); }

/* Screenreader-only Text */
.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;
}

/* Reduzierte Bewegung respektieren – global */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mindest-Touchziele 44px (WCAG 2.5.8) */
.nav a, .ft__col a { min-height: 44px; display: inline-flex; align-items: center; }
.ft__col a { display: flex; }

/* ══ SPRACHUMSCHALTER (Dropdown) ══ */
.lang-switch { position: relative; margin-right: 6px; }
.lang-switch summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 999px; transition: color .2s, border-color .2s;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch[open] summary, .lang-switch summary:hover { color: var(--rot); border-color: var(--rot); }
.lang-switch__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 160px; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(44,26,20,.14);
  padding: 6px; display: grid;
}
.lang-switch__menu a {
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
  color: var(--text); transition: background .15s, color .15s;
}
.lang-switch__menu a:hover { background: var(--bg); color: var(--rot); }
.lang-switch__menu a.is-active { color: var(--rot); font-weight: 600; }
@media (max-width: 1120px) { .lang-switch { margin-right: 8px; } }

/* ══ LIGHTBOX (Zimmer-Galerien) ══ */
.kds-lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28,14,10,.92);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.kds-lb.is-open { display: flex; }
.kds-lb__fig { max-width: min(1100px, 92vw); margin: 0; text-align: center; }
.kds-lb__img {
  max-width: 100%; max-height: 82vh;
  border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.kds-lb__cap { color: rgba(255,255,255,.75); font-size: 13px; margin-top: 14px; letter-spacing: .04em; }
.kds-lb__close, .kds-lb__nav {
  position: fixed; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; border-radius: 50%;
  width: 48px; height: 48px; font-size: 26px; line-height: 1;
  display: grid; place-items: center; transition: background .2s;
}
.kds-lb__close:hover, .kds-lb__nav:hover { background: rgba(255,255,255,.18); }
.kds-lb__close { top: 22px; right: 22px; }
.kds-lb__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.kds-lb__next { right: 22px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .kds-lb__prev { left: 8px; } .kds-lb__next { right: 8px; }
}
/* Karten klickbar */
.room-detail__img[data-kds-gallery] { cursor: zoom-in; position: relative; }
.room-detail__img[data-kds-gallery]::after {
  content: attr(data-kds-count);
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(28,14,10,.72); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  padding: 6px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ══ SPLIT-LAYOUTS (Text|Bild) – stapeln unter 860px ══ */
.kds-split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.kds-split--57 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.kds-split--75 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.kds-split--65 { grid-template-columns: minmax(0,6fr) minmax(0,5fr); }
@media (max-width: 860px) {
  .kds-split--57, .kds-split--75, .kds-split--65 { grid-template-columns: 1fr; }
  /* Bild jeweils zuerst */
  .kds-split > .kds-split__img { order: -1; }
}
/* Buttons dürfen mobil umbrechen statt aus dem Viewport zu laufen */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* ── Anfahrtskarte (Zwei-Klick) ───────────────────────────────────────
   Steht in base.css statt pages.css: Die kleine Variante sitzt im Footer
   und damit auch auf der Startseite, wo pages.css nicht geladen wird.
   Die Vorschau hat dieselbe Höhe wie die spätere Karte, damit beim Laden
   nichts springt. */
.kds-map {
  position: relative;
  min-height: clamp(320px, 42vw, 460px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-soft);
}
.kds-map iframe { display: block; width: 100%; height: clamp(320px, 42vw, 460px); border: 0; }
.kds-map__ask {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 28px 20px;
}
/* flex:0 0 auto ist nötig: In der Spalte schrumpft das SVG sonst auf
   wenige Pixel zusammen, sobald der Inhalt höher wird als der Kasten. */
.kds-map__pin { flex: 0 0 auto; width: 38px; height: 38px; color: var(--rot); margin-bottom: 4px; }
.kds-map__addr {
  font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 21px);
  color: var(--ink); margin: 0;
}
.kds-map__note {
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
  max-width: 46ch; margin: 4px 0 14px;
}
.kds-map__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0; }

/* Kleine Variante im Footer: dunkler Grund, knappere Höhe, kompakte Knöpfe. */
.kds-map--sm {
  min-height: 196px;
  margin-top: 20px;
  border-color: rgba(250,247,240,.16);
  background: rgba(250,247,240,.06);
  border-radius: 12px;
}
.kds-map--sm iframe { height: 196px; }
.kds-map--sm .kds-map__ask { padding: 16px 14px; gap: 4px; }
.kds-map--sm .kds-map__pin { width: 24px; height: 24px; color: var(--gold); margin-bottom: 2px; }
.kds-map--sm .kds-map__note {
  font-size: 11.5px; color: var(--foot-muted); line-height: 1.5;
  max-width: 34ch; margin: 2px 0 10px;
}
.kds-map--sm .kds-map__btns { gap: 8px; }

/* Kompakte Knopfgröße – nur im Footer verwendet. */
.btn--sm {
  padding: 8px 16px;
  font-size: 11.5px;
  letter-spacing: .08em;
}
.kds-map--sm .btn--ghost { color: var(--foot-text); border-color: rgba(250,247,240,.38); }
.kds-map--sm .btn--ghost:hover { background: rgba(250,247,240,.10); }