/* ==========================================================================
   Hochzeitswebsite – Stylesheet
   Aufbau:  1 Schriften · 2 Tokens · 3 Grundlagen · 4 Kopfbereich · 5 Hero
            6 Sektionen · 7 Zeitstrahl · 8 Locations · 9 Kacheln/Karten
            10 Formulare · 11 FAQ · 12 Fußbereich · 13 Textseiten · 14 Druck
   Farben und Abstände zentral in Abschnitt 2 – dort reicht eine Änderung.
   ========================================================================== */

/* 1 · Schriften ----------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Lato";
  src: url("../fonts/lato-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* 2 · Design-Tokens ------------------------------------------------------- */

:root {
  /* Diese Seite ist bewusst nur hell gestaltet.
     Ohne diese Zeile färben Handy-Browser (Chrome, Samsung Internet) die
     Seite im Dunkelmodus eigenmächtig um: Creme wird fast schwarz, die
     Salbeitöne verwaschen. "only light" schaltet diese Automatik ab und
     sorgt nebenbei dafür, dass Eingabefelder hell bleiben.
     Soll die Seite eines Tages einen echten Dunkelmodus bekommen, gehört
     hier "light dark" hin plus ein @media (prefers-color-scheme: dark). */
  color-scheme: only light;

  /* Farben */
  --c-cream:      #FAF6F0;
  --c-cream-deep: #F1E9DE;
  --c-sage:       #7C8D74;   /* nur für Flächen, nicht für Text          */
  --c-sage-dark:  #63735C;   /* Buttons – weiße Schrift darauf lesbar    */
  --c-sage-deep:  #4F5C4A;   /* kleine Texte und Links auf Creme         */
  --c-sage-soft:  #C7D0C0;
  --c-stone:      #5F5A54;
  --c-stone-dark: #33302C;
  --c-white:      #FFFDFA;
  --c-shadow:     rgba(51, 48, 44, .10);

  /* Schrift */
  --f-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --f-body:    "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Abstände */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 6rem;

  /* Maße */
  --w-page:   72rem;   /* maximale Inhaltsbreite      */
  --w-text:   40rem;   /* angenehme Lesebreite        */
  --r-sm:     4px;
  --r-md:     10px;
  --header-h: 4.5rem;
}

/* 3 · Grundlagen ---------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-stone);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
}

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

/* Ausgeblendetes bleibt ausgeblendet – auch bei display:grid/flex weiter unten */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-stone-dark);
  line-height: 1.15;
  margin: 0 0 var(--s-2);
}

h1 { font-size: clamp(2.75rem, 9vw, 5rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 5vw, 2.85rem); }
h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); }
h4 { font-size: 1.15rem; font-family: var(--f-body); font-weight: 700; }

p { margin: 0 0 var(--s-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-sage-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-stone-dark); }

:focus-visible {
  outline: 2px solid var(--c-sage-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s-2); top: -4rem; z-index: 100;
  background: var(--c-white); color: var(--c-stone-dark);
  padding: var(--s-1) var(--s-2); border-radius: var(--r-sm);
  transition: top .2s ease;
}
.skip-link:focus { top: var(--s-2); }

.wrap {
  width: min(100% - 2.5rem, var(--w-page));
  margin-inline: auto;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.9em;
  font-family: var(--f-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-sage-dark);
  border-radius: var(--r-sm);
  background: var(--c-sage-dark);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--c-sage-deep); border-color: var(--c-sage-deep); color: var(--c-white); }

.btn--ghost { background: transparent; color: var(--c-sage-deep); }
.btn--ghost:hover { background: var(--c-sage-dark); color: var(--c-white); }

.btn--onImage { background: transparent; border-color: rgba(255, 255, 255, .8); color: #fff; }
.btn--onImage:hover { background: rgba(255, 255, 255, .95); border-color: #fff; color: var(--c-stone-dark); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Ornament: feine Linie mit Raute */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  color: var(--c-sage-soft);
  margin: var(--s-2) 0 var(--s-4);
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(6rem, 18vw);
  background: currentColor;
}
.ornament span {
  width: 7px; height: 7px;
  background: var(--c-sage);
  transform: rotate(45deg);
  opacity: .7;
}

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* 4 · Kopfbereich --------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}

.site-header__brand {
  font-family: var(--f-display);
  font-size: 1.4rem;
  letter-spacing: .1em;
  color: #fff;
  text-decoration: none;
  transition: color .35s ease;
}

.site-nav__list {
  display: none;
  list-style: none; margin: 0; padding: 0;
  gap: var(--s-3);
}
.site-nav__list a {
  color: #fff;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .25s ease;
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"],
.site-nav__list a.is-active { border-bottom-color: currentColor; }

/* Der Admin-Punkt gehört nicht zu den Gästeseiten und steht deshalb
   abgesetzt am Ende, etwas zurückgenommen. */
.site-nav__admin { position: relative; padding-left: var(--s-3); }
.site-nav__admin::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 1em;
  transform: translateY(-50%);
  background: currentColor;
  opacity: .3;
}
.site-nav__list .site-nav__admin a { opacity: .65; }
.site-nav__list .site-nav__admin a:hover { opacity: 1; }

/* Zustand: über dem Foto durchsichtig, danach creme */
.site-header.is-solid {
  background: rgba(250, 246, 240, .96);
  border-bottom-color: var(--c-sage-soft);
  box-shadow: 0 2px 18px var(--c-shadow);
}
.site-header.is-solid .site-header__brand { color: var(--c-stone-dark); }
.site-header.is-solid .site-nav__list a   { color: var(--c-stone-dark); }
.site-header.is-solid .nav-toggle span    { background: var(--c-stone-dark); }

/* Burger */
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; background: transparent; cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 24px;
  background: #fff;
  transition: transform .3s ease, opacity .2s ease, background-color .35s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menü als Overlay auf kleinen Bildschirmen */
.site-nav {
  position: fixed; inset: 0;
  background: var(--c-cream);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.site-nav.is-open { opacity: 1; visibility: visible; }
.site-nav.is-open .site-nav__list {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.site-nav.is-open .site-nav__list a {
  color: var(--c-stone-dark);
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
}
body.nav-open { overflow: hidden; }

/* Umschaltpunkt zum Burger-Menü. Bewusst bei 58rem statt 48rem: mit dem
   Admin-Punkt sind es acht Einträge, die auf einem Tablet sonst zu eng
   stehen. Wird der Wert geändert, muss auch main.js angepasst werden. */
@media (min-width: 58rem) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; background: none;
    opacity: 1; visibility: visible;
    display: block;
  }
  .site-nav__list { display: flex; }
}

/* 5 · Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  color: #fff;
  padding: calc(var(--header-h) + var(--s-4)) var(--s-2) var(--s-6);
  background: var(--c-stone-dark) center / cover no-repeat;
  isolation: isolate;
}
/* Verlauf, damit die Schrift auf jedem Foto lesbar bleibt */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(40,38,34,.48) 0%, rgba(40,38,34,.28) 40%, rgba(40,38,34,.62) 100%);
}
/* Solange noch kein Foto hinterlegt ist: ruhiger Farbverlauf statt Leerstelle */
.hero--noimage {
  background-image:
    radial-gradient(120% 90% at 50% 0%, #9AA893 0%, rgba(154,168,147,0) 60%),
    linear-gradient(160deg, #6E7C68 0%, #4C5548 55%, #33302C 100%);
}
.hero--noimage::after { background: rgba(40, 38, 34, .18); }

.hero__inner { max-width: 46rem; }

.hero__kicker {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase;
  margin-bottom: var(--s-3);
  opacity: .92;
}

.hero__names {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(var(--s-2), 3vw, var(--s-4));
  margin-bottom: var(--s-2);
}
.hero__names h1 { color: #fff; margin: 0; }
.hero__leaf { width: clamp(28px, 6vw, 52px); color: rgba(255,255,255,.75); flex: none; }
.hero__leaf--right { transform: scaleX(-1); }

.hero__meta {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.hero__subline { max-width: 32rem; margin-inline: auto; opacity: .95; }

.countdown {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(var(--s-2), 4vw, var(--s-4));
  margin: var(--s-4) 0;
}
.countdown__item { min-width: 4.25rem; }
.countdown__value {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  opacity: .85; margin-top: .4rem;
}
.countdown__done { font-family: var(--f-display); font-size: 1.5rem; }

.hero .btn-row { justify-content: center; }

.hero__scroll {
  position: absolute; bottom: var(--s-3); left: 50%; transform: translateX(-50%);
  color: #fff; text-decoration: none;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  opacity: .85;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 2.25rem;
  background: currentColor;
  animation: scrollHint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1;  }
}

/* Kopfbereich der Unterseiten */
.page-head {
  padding: calc(var(--header-h) + var(--s-6)) 0 var(--s-5);
  text-align: center;
  background: var(--c-cream-deep);
  border-bottom: 1px solid var(--c-sage-soft);
}
.page-head p { max-width: var(--w-text); margin-inline: auto; }

/* 6 · Sektionen ----------------------------------------------------------- */

.section { padding: var(--s-6) 0; }
.section--alt { background: var(--c-cream-deep); }
.section__head { text-align: center; margin-bottom: var(--s-5); }
.section__head p { max-width: var(--w-text); margin-inline: auto; }
.section__kicker {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-sage-deep);
  margin-bottom: var(--s-1);
}

/* 7 · Zeitstrahl ---------------------------------------------------------- */

.timeline {
  position: relative;
  max-width: 46rem; margin-inline: auto;
  list-style: none; padding: 0 0 0 3.5rem; margin-block: 0;
}
.timeline::before {
  content: ""; position: absolute;
  left: 1.375rem; top: .75rem; bottom: .75rem;
  width: 1px; background: var(--c-sage-soft);
}
.timeline__item { position: relative; padding-bottom: var(--s-5); }
.timeline__item:last-child { padding-bottom: 0; }

.timeline__icon {
  position: absolute; left: -3.5rem; top: 0;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: 50%;
  color: var(--c-sage-dark);
}
.timeline__icon svg { width: 1.25rem; height: 1.25rem; }

.timeline__time {
  font-family: var(--f-display);
  font-size: 1.55rem;
  color: var(--c-sage-dark);
  line-height: 1.2;
}
.timeline__title { margin: .1rem 0 .35rem; }
.timeline__text  { margin: 0; }

@media (min-width: 48rem) {
  .timeline { padding-left: 5rem; }
  .timeline::before { left: 1.875rem; }
  .timeline__icon { left: -5rem; width: 3.75rem; height: 3.75rem; }
  .timeline__icon svg { width: 1.5rem; height: 1.5rem; }
}

/* 8 · Locations ----------------------------------------------------------- */

.locations { display: grid; gap: var(--s-4); }
@media (min-width: 62rem) { .locations { grid-template-columns: 1fr 1fr; } }

.location {
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.location__image {
  aspect-ratio: 16 / 9;
  width: 100%; object-fit: cover;
  background: var(--c-cream-deep);
}
.location__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.location__label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-sage-deep);
}
.location__name { margin: 0; }
.location__meta { margin: 0; }
.location__meta strong { color: var(--c-stone-dark); }
.location__note {
  margin: 0; padding-left: var(--s-2);
  border-left: 2px solid var(--c-sage-soft);
  font-style: italic;
}
.location__map {
  width: 100%; height: 15rem; border: 0;
  border-top: 1px solid var(--c-sage-soft);
  background: var(--c-cream-deep);
}
.location .btn-row { margin-top: auto; padding-top: var(--s-1); }

/* 9 · Kacheln, Karten, Farbtupfer ----------------------------------------- */

.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.tile {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px var(--c-shadow);
  border-color: var(--c-sage);
  color: inherit;
}
.tile svg { width: 1.6rem; height: 1.6rem; color: var(--c-sage-dark); margin-bottom: var(--s-1); }
.tile h3 { margin: 0; }
.tile p  { margin: 0; font-size: .95rem; }
.tile__more {
  margin-top: var(--s-1);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-sage-deep);
}

.card {
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
/* Kein Abstand über Geschwister-Ränder: Karten stehen immer in einem Grid
   (.tiles oder .stack), das den Abstand bereits über "gap" setzt. Ein
   zusätzliches margin-top schöbe die zweite Karte in ihrer Zeile nach unten
   und stauchte sie – nebeneinander sähen die Karten dann ungleich aus. */
.card h3 { margin-top: 0; }

.stack { display: grid; gap: var(--s-3); }
.text-center { text-align: center; }
.prose-narrow { max-width: var(--w-text); margin-inline: auto; }

.swatches { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-3); }
/* Der hellste Ton liegt dicht am Seitenhintergrund – der Rand hält ihn sichtbar */
.swatch {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid rgba(51, 48, 44, .18);
}

.hotel__name { margin: 0 0 .2rem; }
.hotel__distance {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-sage-deep);
  margin-bottom: var(--s-1);
}

/* Foto-Upload */
.upload {
  display: grid; gap: var(--s-4); align-items: center;
  text-align: center;
}
@media (min-width: 48rem) {
  .upload { grid-template-columns: 1fr auto; text-align: left; }
}
.upload__qr {
  width: 11rem; height: 11rem;
  padding: var(--s-2);
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: var(--r-md);
  object-fit: contain;
  margin-inline: auto;
}
.notice {
  padding: var(--s-2) var(--s-3);
  background: var(--c-cream-deep);
  border-left: 3px solid var(--c-sage);
  border-radius: var(--r-sm);
  font-size: .95rem;
}
.notice--warn { border-left-color: #B4794F; }
.notice[hidden] { display: none !important; }

/* 10 · Formulare ---------------------------------------------------------- */

/* Formular und alles, was darüber steht, teilen sich dieselbe Breite */
.form, .form-width { max-width: 42rem; margin-inline: auto; }
.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field > label, .fieldset__legend {
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-stone-dark);
}
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: 1rem; color: var(--c-stone-dark);
  padding: .75rem .9rem;
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: var(--r-sm);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--c-sage); outline-offset: 1px;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field__hint { font-size: .85rem; color: var(--c-stone); }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.1rem;
  background: var(--c-white);
  border: 1px solid var(--c-sage-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--c-sage); background: var(--c-cream-deep); }
.choice input { accent-color: var(--c-sage); }

/* Honeypot gegen automatische Einträge – für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-weight: 700; }
.form__status--ok    { color: var(--c-sage-deep); }
.form__status--error { color: #A8442A; }

/* 11 · FAQ ---------------------------------------------------------------- */

.faq { max-width: var(--w-text); margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--c-sage-soft);
}
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: var(--s-3) 2.5rem var(--s-3) 0;
  position: relative;
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--c-stone-dark);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--c-sage-dark);
  border-bottom: 1.5px solid var(--c-sage-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq__answer { padding: 0 0 var(--s-3); margin: 0; }

/* 12 · Fußbereich --------------------------------------------------------- */

.site-footer {
  background: var(--c-stone-dark);
  color: rgba(255,255,255,.82);
  padding: var(--s-6) 0 var(--s-4);
  text-align: center;
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: #fff; }
.site-footer .ornament { color: rgba(255,255,255,.3); }
.site-footer .ornament span { background: rgba(255,255,255,.6); }

.footer__hashtag {
  font-family: var(--f-display);
  font-size: 1.75rem; letter-spacing: .08em;
  color: #fff;
  margin-bottom: var(--s-4);
}
.contacts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-4);
  list-style: none; padding: 0; margin: 0 0 var(--s-4);
}
.contacts li { min-width: 12rem; }
.contacts .role {
  display: block;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-sage-soft);
}
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: var(--s-3);
  font-size: .85rem;
}
.footer__legal a { margin: 0 .5rem; }

/* 13 · Textseiten (Impressum, Datenschutz) -------------------------------- */

.prose { max-width: var(--w-text); margin-inline: auto; }
.prose h2 { margin-top: var(--s-5); font-size: 1.7rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .35rem; }

/* 14 · Bewegung & Druck --------------------------------------------------- */

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

@media print {
  .site-header, .nav-toggle, .site-nav, .hero__scroll,
  .location__map, .btn, .btn-row, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .hero {
    min-height: auto; color: #000; background: none; padding: 0 0 1.5rem;
  }
  .hero::after { display: none; }
  .hero__names h1, .hero__meta, .hero__kicker { color: #000; }
  .countdown { display: none; }
  .section { padding: 1rem 0; page-break-inside: avoid; }
  .section--alt, .card, .location, .tile { background: none; border-color: #999; }
  .site-footer { background: none; color: #000; }
  .site-footer h2, .site-footer h3, .site-footer a, .footer__hashtag { color: #000; }
  .timeline__item { page-break-inside: avoid; }
  .faq__item[open] .faq__answer, .faq__answer { display: block; }
  .reveal { opacity: 1 !important; transform: none !important; }
}