/* ==========================================================================
   VitaLounge Sports & Spa Hotel – Stylesheet
   Dunkles, ruhiges Design nach dem Vorbild der Zimmer und des Booking-Auftritts:
   Anthrazit, Gold als Akzent, Cognac aus den Ledersesseln, Original-Wordmark.
   ========================================================================== */

@layer reset, base, layout, components, utilities;

/* Schriften – selbst gehostet (SIL Open Font License), keine Verbindung zu Google */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Farben */
  --night: #0f0e12;
  --night-2: #16151b;
  --surface: #1c1b22;
  --surface-2: #24232b;
  --ink: #f3efec;
  --ink-soft: #c9c2bf;
  --ink-mute: #8f8789;
  --line: rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .16);
  --gold: #d4b064;
  --gold-light: #f3dc98;
  --gold-strong: #a98634;
  --gold-soft: rgb(212 176 100 / .16);
  --gold-glow: rgb(212 176 100 / .32);
  --on-gold: #1c1608;
  --cognac: #d39a5c;
  --cognac-soft: rgb(211 154 92 / .16);
  --teal: #4cc4bc;
  --teal-soft: rgb(76 196 188 / .14);
  --success: #5fc98d;

  /* Typografie */
  --font-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Instrument Serif", "Iowan Old Style", Georgia, serif;

  /* Formen & Tiefe */
  --radius-s: .75rem;
  --radius-m: 1.25rem;
  --radius-l: 2rem;
  --radius-full: 999px;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px -12px rgb(0 0 0 / .5);
  --shadow-lift: 0 2px 8px rgb(0 0 0 / .35), 0 30px 60px -24px rgb(0 0 0 / .7);

  /* Raster */
  --container: 76rem;
  --gutter: clamp(1.25rem, .6rem + 3vw, 2.5rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --bar-h: 4.75rem;      /* Navigationsleiste */
  --promo-h: 2.25rem;    /* goldene Direktbucher-Leiste darüber */
  --header-h: calc(var(--bar-h) + var(--promo-h));

  --ease: cubic-bezier(.22, .7, .2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  :root {
    interpolate-size: allow-keywords;
  }
}

::view-transition-group(root) {
  animation-duration: .3s;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

@layer reset {
  :where(html) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, address, fieldset) {
    margin: 0;
  }

  :where(fieldset) {
    padding: 0;
    border: 0;
    min-inline-size: 0;
  }

  :where(legend) {
    padding: 0;
  }

  :where(ul, ol)[role="list"] {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(img, svg, video) {
    display: block;
    max-inline-size: 100%;
  }

  :where(picture) {
    display: contents;
  }

  :where(picture > source) {
    display: none;
  }

  :where(img) {
    block-size: auto;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(button) {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  :where(address) {
    font-style: normal;
  }

  :where(table) {
    border-collapse: collapse;
  }

  :where([hidden]) {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

@layer base {
  html {
    background: var(--night);
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    min-block-size: 100dvh;
    background: var(--night);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-wrap: break-word;
    accent-color: var(--gold);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(h1, h2, h3, h4) {
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5rem);
    letter-spacing: -0.03em;
    line-height: 1.02;
  }

  h2 {
    font-size: clamp(2rem, 1.4rem + 2.3vw, 3.25rem);
    letter-spacing: -0.025em;
  }

  h3 {
    font-size: 1.375rem;
  }

  /* Akzentwort: kursive Serife in Gold (wie die goldene Schreibschrift im Booking-Motiv) */
  :where(h1, h2, h3) em {
    color: var(--gold);
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 1.08em;
    line-height: 1;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--ink);
    text-decoration-color: rgb(255 255 255 / .35);
    text-underline-offset: .18em;
    transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
  }

  a:hover {
    color: var(--gold);
    text-decoration-color: currentColor;
  }

  :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
  }

  ::selection {
    background: var(--gold);
    color: var(--on-gold);
  }

  strong {
    font-weight: 700;
  }

  small {
    font-size: .875em;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  .container.narrow {
    max-inline-size: 46rem;
  }

  .section {
    padding-block: var(--section-space);
    position: relative;
  }

  .section.tint {
    background: var(--night-2);
  }

  .section.flush-top {
    padding-block-start: 0;
  }

  .section.flush-bottom {
    padding-block-end: 0;
  }

  .section-head {
    max-inline-size: 44rem;
    margin-block-end: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  }

  .section-head.split {
    display: grid;
    gap: 1.5rem 3rem;
    max-inline-size: none;
    align-items: end;
  }

  @media (min-width: 56em) {
    .section-head.split {
      grid-template-columns: 1.1fr .9fr;
    }
  }

  .section-head .intro {
    color: var(--ink-soft);
    font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    line-height: 1.6;
  }

  .section-head .intro + .intro {
    margin-block-start: .9rem;
  }

  .section-head h2 + .intro {
    margin-block-start: 1.1rem;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-block-end: 1rem;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    inline-size: 1.5rem;
    block-size: 1px;
    background: currentColor;
    opacity: .7;
  }

  /* Unterseiten-Kopf */
  .page-hero {
    padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem)) clamp(2.5rem, 2rem + 3vw, 4.5rem);
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60rem 30rem at 15% -10%, var(--gold-glow), transparent 60%),
      radial-gradient(40rem 20rem at 100% 10%, var(--cognac-soft), transparent 60%);
    opacity: .7;
  }

  .page-hero .lead {
    max-inline-size: 42rem;
    margin-block-start: 1.25rem;
    color: var(--ink-soft);
    font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
    line-height: 1.55;
  }

  .page-hero .actions {
    margin-block-start: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Komponenten
   -------------------------------------------------------------------------- */

@layer components {

  /* ---- Header ---- */

  .skip-link {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 100;
    padding: .6rem 1rem;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: var(--on-gold);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }

  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
  }

  /* Goldene Direktbucher-Leiste über der Navigation – auf jeder Seite sichtbar */
  .promo-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    block-size: var(--promo-h);
    padding-inline: var(--gutter);
    background: linear-gradient(90deg, var(--gold-strong), var(--gold) 50%, var(--gold-strong));
    color: var(--on-gold);
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
  }

  .promo-bar:hover {
    color: var(--on-gold);
    background: linear-gradient(90deg, var(--gold), var(--gold-light) 50%, var(--gold));
  }

  .promo-bar strong {
    font-weight: 800;
  }

  .promo-bar .icon {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .promo-bar .short {
    display: none;
  }

  @media (max-width: 48em) {
    .promo-bar .long {
      display: none;
    }

    .promo-bar .short {
      display: inline;
    }
  }

  .header-bar {
    block-size: var(--bar-h);
    background: linear-gradient(to bottom, rgb(15 14 18 / .75), rgb(15 14 18 / 0));
    transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
    border-block-end: 1px solid transparent;
  }

  .site-header.is-scrolled .header-bar,
  body:not(.has-hero) .header-bar {
    background: rgb(15 14 18 / .82);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }

  .header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    block-size: 100%;
  }

  .brand {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    flex: none;
    color: var(--ink);
    text-decoration: none;
    margin-inline-end: auto;
  }

  .brand:hover {
    color: var(--ink);
  }

  /* Original-Wordmark des Hotels (PNG mit Transparenz), Höhe steuert die Breite */
  .brand-logo {
    block-size: 1.7rem;
    inline-size: auto;
    filter: drop-shadow(0 0 14px rgb(212 176 100 / .22));
  }

  .site-footer .brand-logo {
    block-size: 2rem;
  }

  .brand-kicker {
    padding-inline-start: .15rem;
    color: var(--ink-mute);
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .nav ul {
    display: flex;
    gap: .25rem;
  }

  .nav a {
    display: inline-block;
    padding: .55rem .85rem;
    border-radius: var(--radius-full);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s var(--ease), color .2s var(--ease);
  }

  .nav a:hover,
  .nav a[aria-current="page"] {
    background: rgb(255 255 255 / .07);
    color: var(--ink);
  }

  .nav a[aria-current="page"] {
    color: var(--gold);
  }

  .menu-btn {
    display: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    place-items: center;
  }

  .menu-btn .icon {
    inline-size: 1.4rem;
    block-size: 1.4rem;
  }

  .menu-btn .icon-close {
    display: none;
  }

  .site-header:has(#mobile-nav:popover-open) .menu-btn .icon-menu {
    display: none;
  }

  .site-header:has(#mobile-nav:popover-open) .menu-btn .icon-close {
    display: block;
  }

  @media (max-width: 64em) {
    .site-header .nav,
    .site-header .header-cta {
      display: none;
    }

    .site-header .menu-btn {
      display: grid;
      flex: none;
    }
  }

  @media (max-width: 30em) {
    .brand-kicker {
      display: none;
    }

    .brand-logo {
      block-size: 1.45rem;
    }
  }

  .mobile-nav {
    inset: auto;
    inset-block-start: calc(var(--header-h) + .5rem);
    inset-inline: var(--gutter);
    inline-size: auto;
    max-block-size: calc(100dvh - var(--header-h) - 1.5rem);
    overflow: auto;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: rgb(22 21 27 / .96);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .mobile-nav::backdrop {
    background: rgb(0 0 0 / .5);
  }

  .mobile-nav ul {
    margin-block-end: 1rem;
  }

  .mobile-nav ul a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem .75rem;
    border-block-end: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 500;
    text-decoration: none;
  }

  .mobile-nav ul a .icon {
    color: var(--gold);
  }

  .mobile-nav .btn {
    inline-size: 100%;
    margin-block-start: .5rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .mobile-nav {
      transition: opacity .25s var(--ease), transform .25s var(--ease), display .25s allow-discrete, overlay .25s allow-discrete;
      opacity: 0;
      transform: translateY(-.5rem);
    }

    .mobile-nav:popover-open {
      opacity: 1;
      transform: none;
    }

    @starting-style {
      .mobile-nav:popover-open {
        opacity: 0;
        transform: translateY(-.5rem);
      }
    }
  }

  /* ---- Buttons ---- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  }

  .btn .icon {
    inline-size: 1.15rem;
    block-size: 1.15rem;
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn-primary {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-strong));
    color: var(--on-gold);
    box-shadow: 0 8px 24px -8px var(--gold-glow);
  }

  .btn-primary:hover {
    color: var(--on-gold);
    box-shadow: 0 12px 32px -8px var(--gold-glow);
  }

  .btn-ghost {
    border-color: var(--line-strong);
    background: rgb(255 255 255 / .04);
    color: var(--ink);
  }

  .btn-ghost:hover {
    border-color: var(--ink-soft);
    background: rgb(255 255 255 / .08);
    color: var(--ink);
  }

  .btn-light {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-strong));
    color: var(--on-gold);
    box-shadow: 0 8px 24px -8px var(--gold-glow);
  }

  .btn-light:hover {
    color: var(--on-gold);
  }

  .btn-outline-light {
    border-color: rgb(255 255 255 / .55);
    color: #fff;
  }

  .btn-outline-light:hover {
    border-color: #fff;
    background: rgb(255 255 255 / .12);
    color: #fff;
  }

  .btn-sm {
    padding: .7rem 1.1rem;
    font-size: .92rem;
  }

  .btn-whatsapp {
    background: #25d366;
    color: #05240f;
  }

  .btn-whatsapp:hover {
    background: #3ee07a;
    color: #05240f;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
  }

  .icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
  }

  /* ---- Hero ---- */

  .hero {
    position: relative;
    isolation: isolate;
    /* Bewusst flacher als der Viewport, damit das Direktbucher-Band darunter
       ohne Scrollen sichtbar ist. */
    min-block-size: max(34rem, 78svh);
    display: grid;
    align-items: end;
    /* Unten mindestens 4rem: das Direktbucher-Band ragt 2.5rem hinein, es bleibt ≥ 1.5rem Luft zu den Kennzahlen */
    padding-block: calc(var(--header-h) + 2rem) clamp(4rem, 3rem + 2.5vw, 5rem);
    overflow: hidden;
  }

  .hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  .hero-media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 60% 50%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-media img {
      animation: hero-zoom 14s var(--ease) both;
    }

    @keyframes hero-zoom {
      from { transform: scale(1.08); }
      to { transform: scale(1); }
    }
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, rgb(15 14 18 / .96) 0%, rgb(15 14 18 / .72) 35%, rgb(15 14 18 / .25) 70%, rgb(15 14 18 / .35) 100%),
      linear-gradient(to right, rgb(15 14 18 / .55), transparent 60%);
  }

  .hero-inner {
    display: grid;
    gap: 2rem;
  }

  .hero-copy {
    max-inline-size: 50rem;
  }

  .hero h1 {
    margin-block-start: .25rem;
    font-size: clamp(2.6rem, 1.3rem + 4.2vw, 4.5rem);
  }

  .hero .lead {
    max-inline-size: 36rem;
    margin-block-start: 1.25rem;
    color: var(--ink-soft);
    font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
    line-height: 1.55;
  }

  .hero .actions {
    margin-block-start: 1.5rem;
  }

  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--line-strong);
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  @media (min-width: 64em) {
    .hero-facts {
      grid-template-columns: repeat(4, 1fr);
    }

    .hero-facts:has(> :nth-child(3):last-child) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .hero-facts li {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: 1.1rem 1.25rem;
    background: rgb(15 14 18 / .6);
  }

  .hero-facts strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .hero-facts span {
    color: var(--ink-soft);
    font-size: .9rem;
  }

  /* Rabatt-Pille */
  .promo-pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem .5rem .6rem;
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: var(--radius-full);
    background: rgb(15 14 18 / .55);
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .promo-pill:hover {
    border-color: var(--gold);
    color: var(--ink);
  }

  @media (max-width: 30em) {
    .promo-pill {
      font-size: .82rem;
      gap: .5rem;
    }
  }

  .promo-pill .badge {
    white-space: nowrap;
    padding: .3rem .6rem;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: var(--on-gold);
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .promo-pill code {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--gold-light);
  }

  /* ---- Direktbucher-Band (direkt unter dem Hero) ---- */

  .direct {
    position: relative;
    z-index: 1;
    margin-block-start: -2.5rem;
    padding-block: 0 var(--section-space);
  }

  .direct-band {
    display: grid;
    gap: 2rem;
    padding: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
    border-radius: var(--radius-l);
    background:
      radial-gradient(40rem 20rem at 0% 0%, rgb(255 255 255 / .35), transparent 60%),
      linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-strong) 100%);
    color: var(--on-gold);
    box-shadow: 0 30px 80px -30px var(--gold-glow), var(--shadow-lift);
  }

  @media (min-width: 56em) {
    .direct-band {
      grid-template-columns: 1.2fr .8fr;
      align-items: center;
    }
  }

  .direct-band .eyebrow,
  .direct-band h2,
  .direct-band h2 em,
  .direct-band p {
    color: var(--on-gold);
  }

  .direct-band .eyebrow {
    opacity: .75;
  }

  .direct-band h2 {
    font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem);
    font-weight: 600;
  }

  .direct-band h2 em {
    color: #fff;
  }

  .direct-band p {
    margin-block-start: 1rem;
    max-inline-size: 36rem;
    font-size: 1.05rem;
    opacity: .9;
  }

  .code-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-block-start: 1.25rem;
  }

  .code-chip {
    display: inline-block;
    padding: .55rem 1.1rem;
    border: 2px dashed rgb(28 22 8 / .45);
    border-radius: var(--radius-s);
    background: rgb(255 255 255 / .35);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
  }

  .direct-actions {
    display: grid;
    gap: .75rem;
  }

  .direct-actions .btn {
    inline-size: 100%;
    padding-block: 1.05rem;
    font-size: 1.05rem;
  }

  .direct-actions .form-note {
    color: var(--on-gold);
    opacity: .75;
    text-align: center;
  }

  .btn-dark {
    background: var(--night);
    color: #fff;
  }

  .btn-dark:hover {
    background: #26232b;
    color: #fff;
  }

  .btn-outline-dark {
    border-color: rgb(28 22 8 / .45);
    color: var(--on-gold);
  }

  .btn-outline-dark:hover {
    border-color: var(--on-gold);
    background: rgb(255 255 255 / .2);
    color: var(--on-gold);
  }

  /* ---- Karten ---- */

  .card {
    padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }

  /* Zimmer */
  .rooms {
    display: grid;
    gap: 1.5rem;
  }

  @media (min-width: 48em) {
    .rooms {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .room-card {
    position: relative; /* Bezug für den gestreckten Details-Link (ganze Karte klickbar) */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  }

  .room-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-lift);
  }

  .room-card picture,
  .room-card img {
    aspect-ratio: 4 / 3;
    inline-size: 100%;
    object-fit: cover;
    display: block;
  }

  .room-card picture {
    display: block;
    overflow: hidden;
  }

  .room-card img {
    transition: transform .6s var(--ease);
  }

  .room-card:hover img {
    transform: scale(1.04);
  }

  .room-body {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    flex: 1;
    padding: 1.5rem;
  }

  .room-body h3 {
    font-size: 1.5rem;
  }

  .room-body p {
    color: var(--ink-soft);
  }

  .room-features {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }

  .room-features li {
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    background: rgb(255 255 255 / .04);
    color: var(--ink-soft);
    font-size: .82rem;
  }

  /* Preiszeile („ab 75 €“) in Zimmerkarten, Kategorien und Hero */
  .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
    font-family: var(--font-display);
    font-weight: 600;
  }

  .price strong {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.1;
  }

  .price small {
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink-soft);
  }

  .room-body .link {
    margin-block-start: auto;
    padding-block-start: .5rem;
  }

  /* Der Details-Link deckt die ganze Karte ab: Bild, Titel und Text sind klickbar,
     das Markup bleibt ein einziger Link (kein doppeltes Tab-Ziel). */
  .room-body .link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .room-card:hover .link {
    color: var(--gold-light);
  }

  .room-card:hover .link .icon {
    transform: translateX(3px);
  }

  .room-card:focus-within {
    border-color: var(--gold);
    box-shadow: var(--shadow-lift), 0 0 0 3px rgb(212 176 100 / .35);
  }

  .room-card .link:focus-visible {
    outline: none; /* Fokus wird über die Karte selbst angezeigt (:focus-within) */
  }

  .link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--gold);
    font-family: var(--font-display);
    font-weight: 600;
    text-decoration: none;
  }

  .link .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    transition: transform .2s var(--ease);
  }

  .link:hover .icon {
    transform: translateX(3px);
  }

  /* Bild-Text-Blöcke */
  .feature {
    display: grid;
    gap: 2rem;
    align-items: center;
  }

  @media (min-width: 56em) {
    .feature {
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(2.5rem, 2rem + 4vw, 5rem);
    }

    .feature.flip .feature-media {
      order: 2;
    }
  }

  .feature-media {
    position: relative;
  }

  .feature-media picture,
  .feature-media img {
    display: block;
    inline-size: 100%;
    border-radius: var(--radius-m);
    object-fit: cover;
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-lift);
  }

  .feature-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-m);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
    pointer-events: none;
  }

  .feature-copy h2 {
    margin-block-end: 1rem;
  }

  .feature-copy p {
    color: var(--ink-soft);
  }

  .feature-copy p + p {
    margin-block-start: .9rem;
  }

  .feature-copy .actions {
    margin-block-start: 1.75rem;
  }

  /* Checkliste */
  .checklist {
    display: grid;
    gap: .6rem;
    margin-block-start: 1.5rem;
  }

  .checklist li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    color: var(--ink-soft);
  }

  .checklist .icon {
    margin-block-start: .2rem;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    color: var(--gold);
  }

  /* Ausstattung-Raster: feste Spaltenzahl, damit keine verwaisten Kacheln entstehen
     (6 Kacheln → 3 × 2, 4 Kacheln → 4 in einer Reihe, 3 Kacheln → 3) */
  .amenities {
    display: grid;
    gap: 1rem;
  }

  @media (min-width: 40em) {
    .amenities {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 64em) {
    .amenities {
      grid-template-columns: repeat(3, 1fr);
    }

    .amenities:has(> :nth-child(4):last-child) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .amenity {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }

  .amenity h3 {
    font-size: 1.05rem;
    margin-block-end: .25rem;
  }

  .amenity p {
    color: var(--ink-soft);
    font-size: .95rem;
  }

  .icon-badge {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-s);
    background: var(--gold-soft);
    color: var(--gold);
  }

  .icon-badge.teal {
    background: var(--gold-soft);
    color: var(--gold-light);
  }

  .icon-badge.cognac {
    background: var(--cognac-soft);
    color: var(--cognac);
  }

  .icon-badge .icon {
    inline-size: 1.35rem;
    block-size: 1.35rem;
  }

  /* Leistungen (FixByte-Seite) */
  .services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
  }

  .service {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }

  .service h3 {
    margin-block: 1rem .4rem;
    font-size: 1.15rem;
  }

  .service p {
    color: var(--ink-soft);
    font-size: .95rem;
  }

  @media (min-width: 48em) {
    .service-wide {
      grid-column: span 2;
    }
  }

  /* Zeiten / Öffnungsstatus */
  .hours {
    display: grid;
    gap: 1rem;
    align-items: start; /* Karten nur so hoch wie ihr Inhalt – kein Leerraum unten */
  }

  /* Zwei Spalten nur, wenn der umgebende Block breit genug ist (nicht in schmalen Bild-Text-Spalten) */
  .section-head,
  .feature-copy {
    container-type: inline-size;
  }

  @container (min-width: 34rem) {
    .hours {
      grid-template-columns: 1fr 1fr;
    }
  }

  .hours-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1.5rem;
    margin-block-start: 1rem;
  }

  .hours-card dt {
    color: var(--ink-mute);
  }

  .hours-card dd {
    font-family: var(--font-display);
    font-weight: 600;
  }

  .hours-note {
    margin-block-start: 1rem;
    font-family: var(--font-display);
    font-weight: 600;
  }

  /* Distanzen / Lage */
  .distances {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
  }

  .distances li {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }

  .distances strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--cognac);
  }

  .distances span {
    color: var(--ink-soft);
    font-size: .95rem;
  }

  /* Adressblock */
  .contact-grid {
    display: grid;
    gap: 1.5rem;
    align-items: start; /* Karten nur so hoch wie ihr Inhalt (z. B. neben der Adresse mit Karte) */
  }

  @media (min-width: 56em) {
    .contact-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  .contact-list {
    display: grid;
    gap: .9rem;
  }

  .contact-list li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
  }

  .contact-list .icon {
    margin-block-start: .2rem;
    color: var(--gold);
  }

  .contact-list a {
    text-decoration: none;
  }

  .contact-list a:hover {
    text-decoration: underline;
  }

  .contact-list small {
    display: block;
    color: var(--ink-mute);
  }

  /* Karte (Zwei-Klick-Einbindung) */
  .map-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    max-block-size: 30rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background:
      radial-gradient(30rem 15rem at 50% 50%, var(--gold-soft), transparent 70%),
      repeating-linear-gradient(0deg, transparent 0 39px, rgb(255 255 255 / .04) 39px 40px),
      repeating-linear-gradient(90deg, transparent 0 39px, rgb(255 255 255 / .04) 39px 40px),
      var(--surface);
    overflow: hidden;
  }

  /* Karte innerhalb einer Karte (Adresse auf der Startseite) */
  .card .map-embed {
    aspect-ratio: 4 / 3;
    max-block-size: 22rem;
    border-radius: var(--radius-s);
  }

  .map-embed iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    filter: saturate(.85) contrast(1.05);
  }

  /* Galerie + Lightbox */
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  @media (min-width: 48em) {
    .gallery {
      grid-template-columns: repeat(4, 1fr);
    }

    .gallery > :first-child {
      grid-column: span 2;
      grid-row: span 2;
    }
  }

  .gallery button {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--radius-s);
    overflow: hidden;
    border: 1px solid var(--line);
  }

  .gallery button img {
    inline-size: 100%;
    block-size: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s var(--ease), opacity .3s var(--ease);
  }

  .gallery button:hover img {
    transform: scale(1.04);
    opacity: .9;
  }

  .lightbox {
    max-inline-size: min(96vw, 90rem);
    max-block-size: 96dvh;
    padding: 0;
    border: 0;
    border-radius: var(--radius-m);
    background: var(--night);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
  }

  .lightbox::backdrop {
    background: rgb(0 0 0 / .85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .lightbox img {
    inline-size: 100%;
    max-block-size: 88dvh;
    object-fit: contain;
  }

  .lightbox-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    color: var(--ink-soft);
    font-size: .9rem;
  }

  .lightbox-bar .btn {
    padding: .5rem .9rem;
  }

  /* Bewertungen */
  .rating-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    justify-self: start;
  }

  @media (min-width: 56em) {
    .rating-badge {
      justify-self: end;
    }
  }

  .rating-badge > strong {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--gold);
  }

  .rating-badge > div {
    display: grid;
    gap: .2rem;
  }

  .rating-meta {
    color: var(--ink-soft);
    font-size: .9rem;
  }

  .rating-badge .link {
    font-size: .9rem;
  }

  .stars {
    display: inline-flex;
    gap: .1rem;
  }

  .stars .icon {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    color: rgb(255 255 255 / .18);
  }

  .stars .icon.is-on {
    color: var(--gold);
  }

  .reviews {
    display: grid;
    gap: 1rem;
  }

  @media (min-width: 40em) {
    .reviews {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 64em) {
    .reviews {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .review {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }

  .review blockquote {
    flex: 1;
    color: var(--ink);
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.45;
    text-wrap: pretty;
  }

  .review footer {
    color: var(--ink-mute);
    font-size: .85rem;
  }

  /* FAQ */
  .faq {
    max-inline-size: 50rem;
  }

  .faq-list {
    display: grid;
    gap: .75rem;
  }

  .faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface);
    overflow: hidden;
  }

  .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.35rem;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    list-style: none;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item summary::after {
    content: "";
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background: var(--gold-soft) center / 60% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b064' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    transition: transform .3s var(--ease);
  }

  .faq-item[open] summary::after {
    transform: rotate(45deg);
  }

  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .35s var(--ease), content-visibility .35s allow-discrete;
  }

  .faq-item[open]::details-content {
    block-size: auto;
  }

  .faq-answer {
    padding: 0 1.35rem 1.25rem;
    color: var(--ink-soft);
  }

  .faq-answer p + p {
    margin-block-start: .75rem;
  }

  /* CTA-Band */
  .cta-band {
    display: grid;
    gap: 1.5rem;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
    border-radius: var(--radius-l);
    border: 1px solid rgb(212 176 100 / .35);
    background:
      radial-gradient(50rem 25rem at 100% 0%, rgb(212 176 100 / .28), transparent 60%),
      radial-gradient(30rem 20rem at 0% 100%, rgb(212 176 100 / .12), transparent 60%),
      linear-gradient(135deg, #2b2216 0%, #1a1611 55%, #121013 100%);
    color: #fff;
    box-shadow: 0 30px 80px -30px var(--gold-glow);
  }

  .cta-band .eyebrow,
  .cta-band h2 em {
    color: var(--gold-light);
  }

  .cta-band h2 {
    color: #fff;
  }

  .cta-band p {
    max-inline-size: 36rem;
    color: rgb(255 255 255 / .85);
    margin-block-start: .75rem;
  }

  .cta-contact {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
  }

  .cta-contact a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
    text-decoration: none;
  }

  .cta-contact a:hover {
    text-decoration: underline;
  }

  @media (min-width: 56em) {
    .cta-band {
      grid-template-columns: 1.2fr .8fr;
      align-items: center;
    }

    .cta-band .actions {
      justify-content: flex-end;
    }

    .cta-band .cta-contact {
      grid-column: 1 / -1;
    }
  }

  /* Zahlen / Steckbrief */
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
  }

  .stats li {
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
  }

  .stats strong {
    display: block;
    margin-block-end: .3rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--gold);
  }

  .stats span {
    color: var(--ink-soft);
    font-size: .92rem;
  }

  .stats-note {
    margin-block-start: 1rem;
    color: var(--ink-mute);
    font-size: .85rem;
  }

  .project {
    display: grid;
    gap: 1.5rem;
    margin-block-end: 3rem;
  }

  @media (min-width: 56em) {
    .project {
      grid-template-columns: 1fr 1fr;
    }
  }

  .project-title {
    margin-block-end: 1rem;
    font-size: 1.25rem;
  }

  .project-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem 1.5rem;
  }

  .project-facts dt {
    color: var(--ink-mute);
    font-size: .9rem;
    padding-block-start: .1rem;
  }

  .project-facts dd {
    color: var(--ink);
  }

  @media (max-width: 30em) {
    .project-facts {
      grid-template-columns: 1fr;
      gap: .15rem;
    }

    .project-facts dd {
      margin-block-end: .6rem;
    }
  }

  /* Formular (Anfrage) */
  .form {
    display: grid;
    gap: 1.25rem;
    align-content: start; /* Karte darf höher sein als der Inhalt, ohne die Zeilen zu strecken */
  }

  .form-grid {
    display: grid;
    gap: 1rem;
  }

  @media (min-width: 40em) {
    .form-grid {
      grid-template-columns: 1fr 1fr;
    }

    .form-grid .span-2 {
      grid-column: span 2;
    }
  }

  .field {
    display: grid;
    gap: .4rem;
  }

  .field label,
  .field legend {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 600;
  }

  .field .hint {
    color: var(--ink-mute);
    font-size: .85rem;
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
  }

  .field input:user-invalid {
    border-color: #e07a5f;
  }

  .field textarea {
    min-block-size: 7rem;
    resize: vertical;
  }

  .field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c2bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1.1rem;
    padding-inline-end: 2.6rem;
  }

  .form-note {
    color: var(--ink-mute);
    font-size: .88rem;
  }

  .form-preview {
    padding: 1.25rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-s);
    background: rgb(255 255 255 / .03);
    color: var(--ink-soft);
    font-size: .95rem;
    white-space: pre-wrap;
  }

  /* Hinweis-Box */
  .notice {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cognac);
    border-radius: var(--radius-m);
    background: var(--cognac-soft);
    color: var(--ink);
  }

  .notice .icon {
    flex: none;
    margin-block-start: .2rem;
    color: var(--cognac);
  }

  .notice p + p {
    margin-block-start: .5rem;
  }

  /* Fließtext (Rechtliches) */
  .prose {
    max-inline-size: 46rem;
  }

  .prose h2 {
    margin-block: 2.75rem 1rem;
    font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
  }

  .prose h3 {
    margin-block: 2rem .6rem;
    font-size: 1.2rem;
  }

  .prose p,
  .prose ul,
  .prose ol,
  .prose address,
  .prose dl {
    margin-block-end: 1rem;
    color: var(--ink-soft);
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.4rem;
  }

  .prose li + li {
    margin-block-start: .35rem;
  }

  .prose strong {
    color: var(--ink);
  }

  .prose address {
    padding: 1rem 1.25rem;
    border-inline-start: 3px solid var(--gold);
    background: var(--surface);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
  }

  .prose .meta {
    color: var(--ink-mute);
    font-size: .9rem;
  }

  /* Breadcrumb */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-block-end: 1.25rem;
    color: var(--ink-mute);
    font-size: .88rem;
  }

  .breadcrumb a {
    color: var(--ink-soft);
    text-decoration: none;
  }

  .breadcrumb li + li::before {
    content: "/";
    margin-inline-end: .4rem;
    opacity: .5;
  }

  /* Consent-Banner (nur wenn Tracking konfiguriert ist) */
  .consent {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline: 1rem;
    z-index: 60;
    max-inline-size: 34rem;
    margin-inline-start: auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: rgb(28 27 34 / .96);
    box-shadow: var(--shadow-lift);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .consent h2 {
    font-size: 1.1rem;
    margin-block-end: .4rem;
  }

  .consent p {
    color: var(--ink-soft);
    font-size: .92rem;
  }

  .consent .actions {
    margin-block-start: 1rem;
  }

  .consent .btn {
    padding: .7rem 1.1rem;
    font-size: .92rem;
  }

  /* ---- Footer ---- */

  .site-footer {
    padding-block: clamp(3rem, 2rem + 4vw, 5rem) 2rem;
    border-block-start: 1px solid var(--line);
    background: var(--night-2);
  }

  .footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  @media (min-width: 72em) {
    .footer-grid {
      grid-template-columns: 1.3fr 1fr 1.15fr 1fr 1fr;
    }

    .footer-brand {
      grid-column: auto;
    }
  }

  .footer-claim {
    max-inline-size: 22rem;
    margin-block-start: 1.25rem;
    color: var(--ink-soft);
    font-size: .95rem;
  }

  .footer-title {
    margin-block-end: .9rem;
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }

  .footer-list {
    display: grid;
    gap: .5rem;
    font-size: .95rem;
  }

  .footer-list a,
  .site-footer address {
    color: var(--ink-soft);
    text-decoration: none;
  }

  .footer-list a:hover {
    color: var(--gold);
  }

  .footer-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    color: var(--ink-soft);
  }

  .footer-hours dt {
    color: var(--ink-mute);
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-block-start: 3rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    color: var(--ink-mute);
    font-size: .88rem;
  }

  .footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
  }

  .footer-bottom a {
    color: var(--ink-mute);
    text-decoration: none;
  }

  .footer-bottom a:hover,
  .footer-bottom a[aria-current="page"] {
    color: var(--ink);
  }

  /* 404 */
  .error-page {
    min-block-size: 70dvh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: calc(var(--header-h) + 4rem) 4rem;
  }

  .error-page .code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--cognac));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Utilities & Bewegung
   -------------------------------------------------------------------------- */

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nowrap {
    white-space: nowrap;
  }

  .muted {
    color: var(--ink-mute);
  }

  .mt-1 { margin-block-start: 1rem; }
  .mt-2 { margin-block-start: 2rem; }
  .mt-3 { margin-block-start: 3rem; }

  /* Einblenden beim Scrollen – rein per CSS (Scroll-driven Animations),
     Browser ohne Unterstützung zeigen die Inhalte einfach sofort. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .reveal {
        animation: reveal .8s var(--ease) both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }

      @keyframes reveal {
        from {
          opacity: 0;
          transform: translateY(1.25rem);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
    }
  }
}