/* ═══════════════════════════════════════════════════════════════════════
   habs*gut · X-Mas-Funnel

   Typografie 1:1 wie habsgut.at:
     Überschriften  Instrument Serif 400, line-height ~1.0, letter-spacing -.5px
     Fließtext      Inter 400, 20/32, letter-spacing -.2px
     Labels         Inter 600, versal, letter-spacing 1px
   Grundfläche wie dort: #EFEBEA. Weihnachtlich wird es über Wärme (Gold,
   Kerzenlicht), Tiefe (dunkelgrüne Nachtflächen) und Schnee — nicht über
   zusätzliche Schriften.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #efebea;   /* Grundton der Website */
  --paper-warm: #f4efe7;   /* eine Spur wärmer für Weihnachtsflächen */
  --ink:        #0b1211;
  --ink-2:      #101a18;
  --forest:     #004645;
  --forest-d:   #002e2d;
  --red:        #ff4546;
  --red-d:      #e13233;
  --cream:      #f6f1e7;
  --sand:       #cfc8b6;
  --gold:       #e8b165;

  --txt:        #000;
  --txt-mute:   #555;
  --txt-light:  rgba(246, 241, 231, .78);
  --line:       rgba(0, 0, 0, .12);

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1220px;
  --pad:  clamp(1.15rem, 4vw, 2.5rem);
  --r:    16px;
  --r-sm: 10px;

  --sec-y: clamp(5rem, 12vw, 10rem);
  --shadow: 0 30px 70px -34px rgba(0, 25, 24, .5);
}

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--txt);
  font-family: var(--sans);
  font-size: clamp(1.06rem, 1rem + .28vw, 1.25rem);   /* bis 20px wie habsgut.at */
  line-height: 1.6;
  letter-spacing: -.2px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.5px; }
p  { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--red); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--red); color: #fff; padding: .8rem 1.2rem; border-radius: 8px;
  text-decoration: none; font-weight: 600;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }
section[id], article[id] { scroll-margin-top: 5.5rem; }

/* ─── Typo-Bausteine ────────────────────────────────────────────────── */
.eyebrow {
  font-size: .8rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--red);
  margin: 0 0 1.15rem;
}
.eyebrow--light { color: var(--sand); }

.h2 {
  font-size: clamp(2.4rem, 1.3rem + 4.4vw, 4.4rem);
  line-height: 1.0;
  color: var(--txt);
  margin: 0 0 1.15rem;
  text-wrap: balance;
}
.h2 em { font-style: italic; color: var(--forest); }
.h2--light { color: var(--cream); }
.h2--light em { color: var(--sand); }

.sec-head { max-width: 46rem; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__lead { color: var(--txt-mute); margin: 0; }
.sec-head__lead--light { color: var(--txt-light); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem; color: var(--red); text-decoration: none;
  border: 0; background: none; padding: 0; cursor: pointer;
  border-bottom: 2px solid currentColor; line-height: 1.5;
}
.link-arrow::after { content: '→'; transition: transform .25s; }
.link-arrow:hover::after { transform: translateX(5px); }

/* Häkchenliste — ein Listenstil für die ganze Seite, nicht drei */
.ticks { display: grid; gap: .6rem; margin: 0 0 2rem; }
.ticks li {
  position: relative; padding-left: 1.9rem;
  font-size: .97rem; color: var(--txt-mute); line-height: 1.55;
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
.ticks--light li { color: var(--txt-light); }

/* ─── Buttons ───────────────────────────────────────────────────────── */
.btn {
  --bg: var(--red); --fg: #fff; --bd: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bd);
  padding: .92rem 1.7rem;
  border-radius: 999px;
  font-weight: 600; font-size: .97rem; letter-spacing: 0;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(255, 69, 70, .7); }
.btn:active { transform: translateY(0); }
.btn--red:hover { --bg: var(--red-d); --bd: var(--red-d); }
.btn--outline { --bg: transparent; --fg: var(--forest); --bd: rgba(0, 70, 69, .45); }
.btn--outline:hover { --bg: var(--forest); --fg: var(--cream); --bd: var(--forest); box-shadow: 0 14px 28px -16px rgba(0, 70, 69, .7); }
.btn--ghost   { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .6); }
.btn--ghost:hover { --bg: #fff; --fg: var(--forest); --bd: #fff; box-shadow: none; }
.btn--lg { padding: 1.14rem 2.1rem; font-size: 1.02rem; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* ─── Schneefall über der ganzen Seite ──────────────────────────────── */
.snow {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background-image:
    radial-gradient(2.5px 2.5px at 12% 8%,  rgba(255,255,255,.95) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 22%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(2px 2px   at 58% 12%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 77% 30%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(2.5px 2.5px at 91% 16%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 46%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(2px 2px   at 66% 52%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 68%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(2px 2px   at 8%  78%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 88%, rgba(255,255,255,.6) 50%, transparent 51%);
  background-size: 560px 560px;
  animation: snow 26s linear infinite;
  opacity: .42;
  mix-blend-mode: screen;
}
@keyframes snow {
  to { background-position: -70px 560px, 50px 560px, -25px 560px, 80px 560px, -60px 560px,
                            30px 560px, -40px 560px, 65px 560px, -15px 560px, 45px 560px; }
}
@media (prefers-reduced-motion: reduce) { .snow { animation: none; opacity: .22; } }

/* ═══ HEADER ════════════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: .95rem 0;
  transition: background-color .3s, backdrop-filter .3s, box-shadow .3s, padding .3s;
}
.nav__in {
  width: min(100% - var(--pad) * 2, 1340px); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
/* Die Wortmarke ist mit 8,66:1 sehr breit und flach — bei der alten Breite
   (136 px) waere sie nur 16 px hoch. Die Breite ist deshalb so gewaehlt, dass
   die Versalhoehe der frueheren habs*gut-Wortmarke entspricht (rund 25 px am
   Desktop): 25 x 8,66 = 216 px. */
.nav__logo img { width: clamp(180px, 15vw, 216px); }
.nav__links { display: flex; gap: 1.35rem; margin-left: auto; }
.nav__links a {
  font-size: .87rem; font-weight: 500; color: rgba(255, 255, 255, .88);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 1.5px solid transparent; transition: .2s;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}
.nav__links a:hover { color: #fff; border-bottom-color: var(--red); }
.nav__cta { padding: .62rem 1.25rem; font-size: .9rem; margin-left: auto; }
.nav__links + .nav__cta { margin-left: 0; }

.nav.is-stuck {
  background: rgba(11, 18, 17, .9);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  padding: .6rem 0;
}
.nav.is-stuck .nav__links a { text-shadow: none; }
/* ── Klappmenü (Hamburger) ──────────────────────────────────────────
   Am Desktop unsichtbar; ab 1180 px abwärts ersetzt es die Linkzeile, die
   dort zu lang wäre. Das Panel liegt unter der Leiste und bekommt immer einen
   dunklen Grund — die Leiste selbst ist über dem Hero transparent. */
.nav__burger { display: none; }
.nav__links-cta { display: none; }

@media (max-width: 1180px) {
  .nav__links { display: none; }
  /* `.nav__links + .nav__cta` nimmt dem Knopf oben den auto-Rand, damit er bei
     sichtbaren Links nicht ein zweites Mal nach rechts geschoben wird. Der
     Nachbarschafts-Selektor greift aber weiter, wenn die Links bloß
     display:none sind — der Knopf klebte dadurch zwischen 520 und 1180 px am
     Logo statt rechts zu stehen. Hier bekommt er den Rand zurück. */
  .nav__links + .nav__cta { margin-left: auto; }

  .nav__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: .6rem; padding: 0 10px;
    background: rgba(11, 18, 17, .35); border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: 999px; cursor: pointer; flex: 0 0 auto;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .nav__burger-bar {
    display: block; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav.is-open .nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger-bar:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Offen: die Leiste wird dunkel wie im gescrollten Zustand, das Panel hängt
     direkt darunter über die volle Breite. */
  .nav.is-open {
    background: rgba(11, 18, 17, .985); /* .96 liess die Hero-Zeile durchscheinen */
    -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
  }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: .4rem var(--pad) 1.4rem;
    /* Deckend, ohne backdrop-filter: ein Filter im Panel UND einer in der
       Leiste darueber liessen die Hero-Zeile durchs Panel scheinen — auch bei
       98,5 % Deckung. Volle Deckung beendet das unabhaengig von der Ursache. */
    background: rgb(11, 18, 17);
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8);
  }
  .nav.is-open .nav__links a:not(.btn) {
    font-size: 1.15rem; padding: .95rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    text-shadow: none;
  }
  .nav.is-open .nav__links a:not(.btn):hover { border-bottom-color: var(--red); }
  .nav.is-open .nav__links-cta { display: inline-flex; align-self: flex-start; margin-top: 1.1rem; }
}
@media (max-width: 520px) {
  .nav__cta { display: none; }
  .nav__burger { margin-left: auto; }
}

/* ═══ HERO ══════════════════════════════════════════════════════════ */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; align-items: end;
  padding: clamp(8rem, 18vh, 12rem) 0 clamp(4rem, 8vh, 6rem);
  background: var(--ink);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* Das Foto soll leuchten. Nur so viel Verlauf, wie die Schrift zum Lesen
   braucht — unten kräftig, oben fast nichts. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(11, 18, 17, .52) 0%,
      rgba(11, 18, 17, .22) 20%,
      rgba(11, 18, 17, .18) 38%,
      rgba(11, 18, 17, .58) 66%,
      rgba(11, 18, 17, .90) 100%);
}
.hero__in {
  position: relative;
  width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto;
  max-width: 47rem;
}

/* Trägt die Marke über der Überschrift — etwas größer und heller als die
   übrigen Eyebrows. Die Wortmarke steht seit 2026-09-02 als Logo in der Zeile
   und nicht mehr ausgeschrieben. */
.hero__eyebrow {
  font-size: clamp(1rem, .85rem + .5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: clamp(.9rem, 2vw, 1.4rem);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .75);
  /* Flex statt vertical-align: „middle“ richtet sich an der x-Höhe aus und
     sitzt neben Versalien sichtbar zu tief. align-items:center trifft die
     Mitte der Versalhöhe. wrap, damit am schmalen Schirm umbrochen wird
     statt zu überlaufen. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: .5em;
  row-gap: .2em;
  line-height: 1;
}

/* „ADVENTHOCHBURG BEI ⟨Logo⟩“ — die Wortmarke steht statt des ausgeschriebenen
   Namens, sonst sagte die Zeile zweimal dasselbe. Sie ist bewusst größer als
   die Versalien daneben: auf Textgröße geschrumpft verlöre das geschriebene
   „gut“ seine Schwünge und würde zum Fleck. Gleiche Datei wie in der
   Navigation, also derselbe Request. */
.hero__eyebrow-logo {
  /* Exakt dieselbe Breitenformel wie .nav__logo img — das Logo soll hier so
     groß stehen wie oben links. */
  width: clamp(104px, 10vw, 136px);
  height: auto;
  /* align-items:center zentriert die SVG-Box. Die reicht unten weiter hinaus
     als oben, weil der Schwung des „gut“ unter die Grundlinie läuft — „habs“
     säße damit merklich unter der Mittellinie der Versalien. Der Wert ist
     nicht geschätzt: gemessen wurde die x-Höhe von „habs“ gegen die
     Versalienmitte über 360–1440 px; −8 % hält die Abweichung überall unter
     0,9 px. Prozent, damit es mit der Logohöhe mitskaliert. */
  transform: translateY(-8%);
  /* Der Schriftzug hat keinen eigenen Schatten — er steht auf demselben
     dunklen Bild wie der Text und braucht denselben Halt. */
  filter: drop-shadow(0 1px 16px rgba(0, 0, 0, .75));
}

/* Die Überschrift trägt jetzt das Hauptkeyword und ist damit deutlich länger
   als „Euer Weihnachtsmarkt." — entsprechend kleiner gesetzt, damit Lead und
   Buttons im ersten Bildschirm bleiben. Dort entstehen die Anfragen. */
.hero__h1 {
  font-size: clamp(2.55rem, 1.2rem + 5.1vw, 5.1rem);
  line-height: .96;
  color: #fff;
  margin: 0 0 1.2rem;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .35);
}
/* Heller als --sand: die Zeile steht über dem hellsten Teil des Fotos. */
.hero__h1 em { font-style: italic; color: #f1eadd; }
.hero__lead {
  font-size: clamp(1.08rem, 1rem + .55vw, 1.36rem);
  color: rgba(255, 255, 255, .94);
  max-width: 34rem; margin-bottom: 2.2rem;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__meta {
  margin: 1.4rem 0 0;
  font-size: .82rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}


/* ═══ KEY VISUAL — die Adventhochburg, volle Breite ═════════════════ */
.kv {
  padding: var(--sec-y) 0;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(232, 177, 101, .24) 0%, transparent 65%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
}
/* Die Illustration ist das Herzstück des Abschnitts und bekommt entsprechend
   Platz. Das Original hat 1684 px (Fassung 2026), der Deckel bei 1440 px ist
   also kein Hochskalier-Limit mehr, sondern Gestaltung — er hält das Bild in
   der Flucht der übrigen Abschnitte. Retina bleibt knapp (~1,17x), siehe
   OPEN-TOPICS I-10. */
.kv__fig {
  margin: clamp(2rem, 4vw, 3.4rem) auto 0;
  width: min(100% - var(--pad) * 2, 1440px);
}
.kv__fig picture {
  display: block; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow); background: #fff;
}
.kv__fig img { width: 100%; }

/* Die fünf Bereiche unter dem Lageplan — sie erklären, was auf der
   Illustration zu sehen ist, statt Zahlen zu wiederholen. */
.areas {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 0;
  text-align: center;
}
.areas li {
  display: grid; justify-items: center; gap: .1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.areas__i {
  width: 34px; height: 34px; margin-bottom: .7rem;
  fill: none; stroke: var(--red); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s, transform .25s;
}
.areas li:hover .areas__i { stroke: var(--forest); transform: translateY(-3px); }
.areas b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, .95rem + .6vw, 1.5rem); line-height: 1.15;
  color: var(--forest); text-wrap: balance;
}
.areas span { font-size: .84rem; color: var(--txt-mute); margin-top: .25rem; }

@media (max-width: 860px) { .areas { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; } }
@media (max-width: 520px) { .areas { grid-template-columns: repeat(2, 1fr); } }

/* ═══ Dezente Handlungsaufforderung — ein Satz, kein Knopf ══════════ */
.cta-quiet {
  margin: clamp(1.8rem, 4vw, 2.8rem) 0 0;
  font-size: .98rem; color: var(--txt-mute);
}
.cta-quiet--center { text-align: center; }
.cta-quiet--light { color: var(--txt-light); }
.cta-quiet .link-arrow { margin-left: .4rem; }

/* ═══ ZWEI ARTEN ZU FEIERN — Abend und Brunch, gleichgewichtig ══════ */
.duo { padding: var(--sec-y) 0; background: var(--paper-warm); }
.duo__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.duo__col { display: flex; flex-direction: column; }
.duo__fig { position: relative; margin: 0 0 1.6rem; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.duo__fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.duo__col:hover .duo__fig img { transform: scale(1.04); }
.duo__cap {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(11, 18, 17, .74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border-radius: 999px; padding: .42rem .95rem;
  font-size: .78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.duo__h {
  font-size: clamp(1.9rem, 1.35rem + 1.9vw, 2.8rem);
  line-height: 1.03; color: var(--forest); margin: 0 0 .8rem;
}
.duo__col > p { color: var(--txt-mute); }
.duo__col .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) { .duo__grid { grid-template-columns: 1fr; } }


/* ═══ BEREICHE — ein einziges, gleichförmiges Raster ════════════════ */
.bereiche { padding: var(--sec-y) 0; background: var(--paper); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.8rem); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .04);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.card__media { position: relative; overflow: hidden; }
.card__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.card:hover .card__media img { transform: scale(1.05); }
.card__cap {
  position: absolute; left: .85rem; bottom: .85rem;
  background: rgba(11, 18, 17, .74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border-radius: 999px;
  padding: .38rem .85rem;
  font-size: .78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}

.card__body { padding: clamp(1.4rem, 2.2vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.card__h {
  font-size: clamp(1.6rem, 1.3rem + .9vw, 2.05rem);
  line-height: 1.05; color: var(--forest); margin: 0 0 .7rem;
}
.card__body p { color: var(--txt-mute); font-size: .97rem; }
.card__body .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1000px) { .cards, .cards--3, .cards--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .cards, .cards--3, .cards--2 { grid-template-columns: 1fr; } }

/* ═══ FAQ ══════════════════════════════════════════════════════════ */
.faq { padding: var(--sec-y) 0; background: var(--paper-warm); }
.faq__grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start;
}
.faq__head { position: sticky; top: 6rem; }
.faq__head .cta-quiet { margin-top: 1.4rem; }

.faq__list details {
  border-top: 1px solid var(--line);
  padding: .2rem 0;
}
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem 0;
  font-weight: 600; font-size: 1.02rem; color: var(--forest);
  transition: color .18s;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: '+'; margin-left: auto; flex: 0 0 auto;
  font-family: var(--sans); font-weight: 400; font-size: 1.5rem; line-height: 1;
  color: var(--red); transition: transform .25s;
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:hover { color: var(--red); }
.faq__list details p {
  margin: -.35rem 0 1.35rem; padding-right: 2.5rem;
  color: var(--txt-mute); font-size: .98rem;
}
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

/* ═══ DUNKLE NACHTFLÄCHE — „Alles an einem Ort" ════════════════════
   Das Foto der Burgmauer zur blauen Stunde trägt die ganze Fläche;
   darüber ein Verlauf, der die Schrift lesbar hält. */
.dark {
  position: relative; isolation: isolate;
  background: var(--ink); color: var(--cream);
}
.dark .h2 { color: var(--cream); }
.dark__bg { position: absolute; inset: 0; z-index: -2; }
.dark__bg img { width: 100%; height: 100%; object-fit: cover; }
.dark::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(11, 18, 17, .74) 0%, rgba(0, 46, 45, .80) 40%, rgba(11, 18, 17, .97) 100%);
}

.alles { padding: var(--sec-y) 0; }
.feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px; background: rgba(246, 241, 231, .13);
  border: 1px solid rgba(246, 241, 231, .13); border-radius: var(--r); overflow: hidden;
}
.feats li {
  background: var(--ink); padding: 1.7rem 1.6rem;
  display: grid; gap: .3rem;
  font-size: .93rem; color: rgba(246, 241, 231, .6); line-height: 1.55;
  transition: background-color .25s;
}
.feats li:hover { background: var(--ink-2); }
.feats__i {
  width: 30px; height: 30px; margin-bottom: .55rem;
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s, transform .25s;
}
.feats li:hover .feats__i { stroke: var(--red); transform: translateY(-2px); }
.feats li b { font-family: var(--sans); font-weight: 600; font-size: 1.03rem; color: var(--cream); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═══ WEIHNACHTSZAUBER — Essen und Deko groß ═══════════════════════ */
.zauber {
  padding: var(--sec-y) 0;
  background:
    radial-gradient(55% 45% at 85% 75%, rgba(232, 177, 101, .24) 0%, transparent 62%),
    var(--paper-warm);
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  width: min(100% - var(--pad) * 2, 1480px); margin-inline: auto;
}
.mosaic li { margin: 0; }
.mosaic figure { margin: 0; height: 100%; }
.mosaic picture { display: block; height: 100%; border-radius: var(--r-sm); overflow: hidden; }
.mosaic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.mosaic figure:hover img { transform: scale(1.06); }
.mosaic li:not(.mosaic__big):not(.mosaic__wide) img { aspect-ratio: 4/5; }

/* Bewegtes Bild im Mosaik: Eisstockbahn. Videos sind keine <img>, deshalb
   dieselben Regeln noch einmal — und eine Bildunterschrift, die sagt, was
   man sieht. */
.mosaic__video { position: relative; border-radius: var(--r-sm); overflow: hidden; height: 100%; }
.mosaic__video video {
  display: block; width: 100%; height: 100%; min-height: 100%;
  object-fit: cover; background: var(--ink);
}
.mosaic figcaption {
  position: absolute; left: .85rem; bottom: .85rem;
  background: rgba(11, 18, 17, .74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border-radius: 999px; padding: .38rem .9rem;
  font-size: .76rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.mosaic figure { position: relative; }
.mosaic__big  { grid-column: span 2; grid-row: span 2; }
.mosaic__big img  { aspect-ratio: auto; min-height: 100%; }
.mosaic__wide { grid-column: span 2; }
.mosaic__wide img { aspect-ratio: 3/2; }
@media (max-width: 800px) {
  .mosaic { grid-template-columns: 1fr 1fr; }
  .mosaic__big, .mosaic__wide { grid-column: span 2; grid-row: auto; }
  .mosaic__big img { aspect-ratio: 4/3; min-height: 0; }
}

/* ═══ ANFAHRT ══════════════════════════════════════════════════════ */
.loc { padding: var(--sec-y) 0; background: var(--paper); }
.loc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
.loc__text p { color: var(--txt-mute); }
.loc__addr { font-style: normal; color: var(--forest); line-height: 1.75; margin: 1.5rem 0; font-size: 1.05rem; }
.loc__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.loc__img { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.loc__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
@media (max-width: 900px) { .loc__grid { grid-template-columns: 1fr; } .loc__img { order: 2; } }

/* ═══ FORMULAR ═════════════════════════════════════════════════════ */
.form-sec {
  background: var(--forest);
  padding: var(--sec-y) 0;
  background-image: radial-gradient(70% 60% at 15% 0%, rgba(0, 30, 29, .75) 0%, transparent 65%);
}
.form-sec__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.2rem, 5vw, 4.5rem); align-items: start; }

.form-side { position: relative; color: var(--cream); padding-top: .5rem; }
.form-side__tree { position: absolute; top: -3rem; right: 1rem; width: 78px; opacity: .16; }
.form-side__lead { color: var(--txt-light); }
.form-side .ticks { margin-top: 1.9rem; }
.form-side__alt { font-size: .95rem; color: rgba(246, 241, 231, .62); margin-top: 2rem; }
.form-side__alt a { color: var(--cream); }

.form {
  background: var(--cream);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3.2vw, 2.8rem);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .6);
  font-size: 1rem;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fs { border: 0; padding: 0; margin: 0 0 2rem; }
.fs:last-of-type { margin-bottom: 1.2rem; }
.fs__legend {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--serif); font-size: 1.55rem; color: var(--forest);
  margin-bottom: 1.05rem; padding: 0; width: 100%;
}
.fs__legend span {
  flex: 0 0 auto;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 999px; background: var(--red); color: #fff;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
}

.radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: .6rem; }
.radio { position: relative; cursor: pointer; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio span {
  display: block; padding: .85rem 1rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; font-size: .93rem; font-weight: 600; color: var(--forest);
  transition: .18s; line-height: 1.3;
}
.radio small { display: block; font-weight: 400; font-size: .79rem; color: var(--txt-mute); margin-top: .2rem; }
.radio:hover span { border-color: var(--forest); }
.radio input:checked + span { border-color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.radio input:checked + span small { color: var(--red); }
.radio input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .5rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; font-size: .94rem; }
.check input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .12rem;
  border: 1.5px solid var(--line); border-radius: 5px; background: #fff;
  cursor: pointer; transition: .15s;
}
.check input:checked { background: var(--red); border-color: var(--red); }
.check input:checked::after { content: '✓'; display: grid; place-items: center; color: #fff; font-size: .8rem; line-height: 1.1rem; }
.check--consent { font-size: .88rem; color: var(--txt-mute); }
.check--consent a { color: var(--red); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem 1.1rem; }
@media (max-width: 620px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

/* ⛔ `align-content: start` ist hier kein Feinschliff, sondern der Unterschied
   zwischen gleich hohen und ungleich hohen Eingabefeldern. Die Voreinstellung
   von Grid ist `stretch`: Ist eine Zeile hoeher als noetig — beim Telefon,
   weil darunter noch ein Hinweis steht —, verteilt sich die Mehrhoehe auf die
   Zeilen DIESES Feldes, und das Eingabefeld daneben waechst mit. Das E-Mail-
   Feld war dadurch sichtbar hoeher als das Telefonfeld (Befund Markus,
   2026-09-03). Mit `start` behalten Beschriftung, Feld und Hinweis ihre
   natuerliche Hoehe; die Mehrhoehe bleibt unten stehen, und die Felder einer
   Zeile liegen auf gleicher Linie. */
.fld { margin: 0 0 .9rem; display: grid; gap: .35rem; align-content: start; }
.fld label {
  font-size: .76rem; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--txt-mute);
}
.fld label i { color: var(--red); font-style: normal; }
.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 1rem; letter-spacing: -.2px;
  width: 100%; padding: .8rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--txt);
  transition: border-color .18s, box-shadow .18s;
}
.fld textarea { resize: vertical; min-height: 6.4rem; }
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: rgba(0, 70, 69, .35); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: 0; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(0, 70, 69, .13);
}
.fld input::placeholder, .fld textarea::placeholder { color: #9aa3a0; }
.fld.is-bad input, .fld.is-bad select, .fld.is-bad textarea { border-color: var(--red); }

.err { display: block; margin: 0; font-size: .82rem; color: var(--red); }
.err:empty { display: none; }

/* Telefon mit Landesvorwahl. Die Flagge sagt, welche Nummer erwartet wird,
   sperrt ausländische aber nicht aus — wer mit + oder 00 beginnt, überschreibt
   die Vorwahl, und das Feld blendet sie ab. Bewusst KEIN intl-tel-input:
   das wären rund 100 KB plus Flaggen-Sprite, und die Seite lädt nichts von
   fremden Servern (siehe README, Abschnitt Datenschutz). Zusammengesetzt wird
   serverseitig in api/anfrage.php, damit es auch ohne JavaScript stimmt. */
.tel { display: flex; align-items: stretch; }
.tel__land {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: 0 .75rem;
  border: 1.5px solid var(--line); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--paper);
  font-size: .95rem; color: var(--txt-mute);
  white-space: nowrap;
  transition: opacity .18s, border-color .18s;
}
/* 27x18 statt der ersten 21x14: darunter liest sich das Rot-Weiß-Rot nicht
   mehr als Flagge, sondern als Strich. Die Haarlinie trennt das Weiß in der
   Mitte vom hellen Feld darunter. */
.tel__flagge {
  display: block; width: 27px; height: 18px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 70, 69, .18);
}
.tel__code { font-weight: 600; }
.tel input { flex: 1 1 auto; min-width: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.tel.is-intl .tel__land { opacity: .4; }
.fld.is-bad .tel__land { border-color: var(--red); }
.fld__hint { font-size: .78rem; line-height: 1.45; color: var(--txt-mute); }

.consent { margin: 0 0 1.6rem; }
.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form__hint { font-size: .78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-mute); }
.form__hint i { color: var(--red); font-style: normal; }

.form__status { margin: 1.2rem 0 0; padding: .9rem 1.1rem; border-radius: var(--r-sm); font-size: .95rem; }
.form__status:empty { display: none; }
.form__status.is-ok  { background: rgba(0, 70, 69, .09); color: #0e5a5a; border: 1px solid rgba(0, 70, 69, .3); }
.form__status.is-err { background: rgba(255, 69, 70, .1); color: #b52c2d; border: 1px solid rgba(255, 69, 70, .35); }
.form__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .9rem 0 0; font-size: .93rem; color: var(--txt-mute); }

.thanks { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.thanks__tree { width: 64px; margin: 0 auto 1.4rem; }
.thanks h3 { font-size: clamp(2rem, 1.4rem + 1.9vw, 2.9rem); color: var(--forest); margin-bottom: .7rem; }
.thanks p { color: var(--txt-mute); max-width: 30rem; margin-inline: auto; }

@media (max-width: 900px) { .form-sec__grid { grid-template-columns: 1fr; } .form-side__tree { display: none; } }

/* ═══ VIDEOS ═══════════════════════════════════════════════════════ */
.films { padding: var(--sec-y) 0; background: var(--paper-warm); }
.films__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); }

.film { position: relative; margin: 0; }
.film picture {
  display: block; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--shadow); background: var(--ink);
}
.film img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .3s; }
.film iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* Deckt genau das Vorschaubild ab — aspect-ratio statt padding-bottom, sonst
   bleibt die Box 0 hoch und der Knopf rutscht über das Bild. */
.film__play {
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 16/9;
  display: grid; place-content: center; justify-items: center; gap: .85rem;
  background: none; border: 0; cursor: pointer; color: #fff;
}
.film__icon {
  width: 74px; height: 74px; border-radius: 999px;
  background: var(--red);
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7);
  transition: transform .25s, background-color .25s;
}
.film__icon::after {
  content: ''; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.film__label {
  font-size: .82rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
.js-film:hover .film__icon { transform: scale(1.08); background: var(--red-d); }
.js-film:hover img { filter: brightness(.85); }
.film__play:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: var(--r); }

.film__soon {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(11, 18, 17, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; border-radius: 999px; padding: .42rem .95rem;
  font-size: .76rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.film--placeholder img { filter: grayscale(.35) brightness(.7); }

.film figcaption { display: grid; gap: .2rem; margin-top: 1.1rem; }
.film figcaption b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); line-height: 1.1; color: var(--forest);
}
.film figcaption span { font-size: .95rem; color: var(--txt-mute); }
.film__note { margin: .5rem 0 0; font-size: .8rem; color: #7a807e; }

@media (max-width: 900px) { .films__grid { grid-template-columns: 1fr; } }

/* ═══ SILVESTER ════════════════════════════════════════════════════ */
.sil {
  position: relative; isolation: isolate;
  padding: clamp(4.5rem, 10vw, 7rem) 0;
  text-align: center; color: var(--cream); background: var(--ink);
}
.sil__bg { position: absolute; inset: 0; z-index: -2; }
.sil__bg img { width: 100%; height: 100%; object-fit: cover; }
.sil::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 18, 17, .72) 0%, rgba(0, 46, 45, .78) 100%);
}
.sil__in { max-width: 40rem; }
.sil__h { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.05; margin: 0 0 .7rem; }
.sil__lead { color: rgba(246, 241, 231, .82); margin-bottom: 1.9rem; }

/* ═══ FOOTER ═══════════════════════════════════════════════════════ */
.foot { background: var(--ink); color: rgba(246, 241, 231, .68); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .95rem; }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.2rem; }
/* Das Logo ist ein Link auf habsgut.at. inline-block, damit der untere Rand
   des Bildes weiter wirkt; kein Unterstrich, kein Rahmen wie bei Textlinks. */
.foot__brand { display: inline-block; border: 0; }
.foot__brand:hover { border: 0; }
.foot__logo { width: 118px; margin-bottom: 1.2rem; }
.foot__addr { font-style: normal; line-height: 1.8; }
.foot a { color: rgba(246, 241, 231, .8); text-decoration: none; border-bottom: 1px solid rgba(246, 241, 231, .2); }
.foot a:hover { color: #fff; border-bottom-color: var(--red); }
.foot__h { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--sand); margin: 0 0 .9rem; }
.foot__p { line-height: 1.8; }
.foot__p small { color: rgba(246, 241, 231, .45); }
.foot__list { display: grid; gap: .5rem; }
.foot__list a { border: 0; }
.foot__list a:hover { border-bottom: 1px solid var(--red); }
.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  margin-top: 2.8rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(246, 241, 231, .13);
  font-size: .82rem; color: rgba(246, 241, 231, .42);
}
.foot__bottom p { margin: 0; }
@media (max-width: 780px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .foot__grid { grid-template-columns: 1fr; } }

/* ═══ MOBILE STICKY CTA ════════════════════════════════════════════ */
.mcta {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  padding: .7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(11, 18, 17, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(246, 241, 231, .12);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
  display: none;
}
.mcta .btn { width: 100%; }
.mcta.is-on { transform: translateY(0); }
@media (max-width: 640px) { .mcta { display: block; } }

/* ═══ MOBIL ════════════════════════════════════════════════════════
   Kein eigenes Layout, sondern Korrekturen an den Stellen, wo die
   Desktop-Werte am kleinen Schirm nicht mehr aufgehen: Kontrast im Hero,
   Abstände und der Platz unter dem fixen CTA-Band.                     */
@media (max-width: 700px) {
  /* Abschnittsabstände: 10 rem oben und unten sind am Handy eine halbe
     Bildschirmhöhe Leere. */
  :root { --sec-y: clamp(3.2rem, 9vw, 5rem); }

  /* Der Hero liegt über einer hell erleuchteten Holzhütte — die kursive
     Zeile war dort kaum zu lesen. Mehr Verlauf im mittleren Band, hellere
     Kursive, kräftigerer Schatten. */
  .hero { min-height: 100svh; padding-top: 7rem; padding-bottom: 3rem; }
  .hero::after {
    background: linear-gradient(to bottom,
      rgba(11, 18, 17, .60) 0%,
      rgba(11, 18, 17, .30) 16%,
      rgba(11, 18, 17, .46) 34%,
      rgba(11, 18, 17, .78) 60%,
      rgba(11, 18, 17, .96) 100%);
  }
  .hero__h1 {
    font-size: clamp(2.15rem, 8.4vw, 2.9rem);
    max-width: none;
    text-shadow: 0 2px 22px rgba(0, 0, 0, .8), 0 1px 4px rgba(0, 0, 0, .6);
  }
  .hero__lead { font-size: 1.04rem; text-shadow: 0 1px 16px rgba(0, 0, 0, .85); }

  /* Die Begrenzung auf 60 % stammt aus der Zeit, als rechts im Hero das
     HO-HO-HOT-Motiv stand — das gibt es dort nicht mehr. Mit dem Logo in der
     Zeile braucht sie die volle Breite, sonst steht die Wortmarke allein auf
     einer dritten Zeile. Laufweite eine Spur enger, damit Text und Logo bis
     hinunter zu 360 px nebeneinander bleiben. */
  .hero__eyebrow { font-size: 1rem; letter-spacing: 2px; }
  .hero__meta { font-size: .72rem; letter-spacing: .6px; }

  /* Die Knöpfe wirkten am Handy klobig — flacher, aber weiterhin über
     44 px hoch, sonst wird das Tippen unsicher. */
  .btn     { padding: .74rem 1.4rem; font-size: .94rem; }
  .btn--lg { padding: .86rem 1.6rem; font-size: .97rem; }
  .mcta    { padding-top: .55rem; }
  .mcta .btn { padding: .82rem 1.4rem; }

  /* Zentrierte Fließtexte lesen sich am schmalen Schirm schlechter als
     linksbündige — die Überschriften bleiben mittig. */
  .sec-head--center .sec-head__lead { text-align: left; }

  /* Das fixe CTA-Band verdeckt sonst die letzten Zeilen des Footers. */
  .foot { padding-bottom: 6.5rem; }

  
  .areas__i { width: 30px; height: 30px; }
  .film__icon { width: 60px; height: 60px; }
  .film__icon::after { border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
}

/* 360 px ist die Breite vieler Android-Geräte, kein Randfall. Dort reicht der
   Platz für „ADVENTHOCHBURG BEI“ plus Wortmarke nur mit enger Laufweite. */
@media (max-width: 400px) {
  .hero__eyebrow { letter-spacing: 1px; column-gap: .4em; }
}


/* ═══ SCROLL-REVEAL ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}