:root {
  --bg: #f7f3ee;
  --surface: rgba(255, 252, 248, 0.9);
  --surface-strong: #f7efe6;
  --surface-alt: #fbf6f1;
  --surface-soft: #f3e9df;
  --text: #1e1610;
  --muted: #5a4a3f;
  --muted-soft: #7d6a5c;
  --primary: #8f5f45;
  --primary-dark: #5f3f2d;
  --border: rgba(143, 95, 69, 0.17);
  --shadow: 0 26px 70px rgba(41, 28, 18, 0.13);
  --shadow-soft: 0 16px 40px rgba(41, 28, 18, 0.09);

  --radius: 28px;
  --radius-sm: 18px;

  /* Kraeftiges ease-out: die eingebauten CSS-Kurven wirken zu weich.
     Enter-States (Hover, Einblenden) starten damit sofort sichtbar. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --content: 1160px;

  --space-xxs: 10px;
  --space-xs: 16px;
  --space-sm: 22px;
  --space-md: 28px;
  --space-lg: 40px;
  --space-xl: 56px;
  --space-xxl: 80px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg) 0%, #f1e9df 100%);
  color: var(--text);
  line-height: 1.75;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* ACCESSIBILITY: Links mit Unterstreichung und starkem Fokus-Indikator (WCAG 1.4.1, 2.4.7) */
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, outline 180ms ease;
}

a:hover {
  color: var(--primary-dark);
}

/* ACCESSIBILITY: Sichtbarer Fokusrahmen für Tastaturbedienung (WCAG 2.4.7) */
a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  color: var(--primary-dark);
}

/* ACCESSIBILITY: Button-Links (Buttons sind Links) sollten Unterstreichung nicht anzeigen */
button,
a.button {
  text-decoration: none;
}

a.button:focus-visible {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

.container {
  width: min(var(--content), calc(100% - 48px));
  margin: 0 auto;
  padding-inline: 24px;
}

.narrow {
  max-width: 800px;
}

main {
  padding-bottom: var(--space-xxl);
}

.section,
.section-block {
  padding: var(--space-xxl) 0 0;
}

/* Abschnitt, der optisch an den vorigen anschliesst, statt einen neuen Block
   aufzumachen. Die Seite hat damit drei Abstufungen: 40px zwischen Karten im
   selben Raster, 80px zwischen zusammengehoerenden Kartenbloecken, 120px
   zwischen eigenstaendigen Abschnitten. Zusammengesetzter Selektor, damit die
   Regel auch die 60px aus der 820px-Media-Query schlaegt. */
.section.section-tight {
  padding-top: var(--space-lg);
}

.page-stack {
  display: grid;
  gap: var(--space-lg);
}

/* ACCESSIBILITY: Cards mit verbesserter Sichtbarkeit (Border statt 1px) */
.card {
  background: linear-gradient(135deg, rgba(255, 252, 248, 0.95) 0%, rgba(255, 248, 242, 0.92) 100%);
  border: 2px solid rgba(143, 95, 69, 0.2);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(41, 28, 18, 0.08);
  backdrop-filter: blur(10px);
}

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-top: var(--space-sm);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  background: none;
  text-decoration: none;
  transition: transform 200ms ease, opacity 200ms ease;
}

.brand-logo {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
}

.brand:hover {
  transform: scale(1.06);
  opacity: 0.85;
}

.brand:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
}

/* ACCESSIBILITY: Navigation Links mit WCAG AA Touch-Target-Größe (mind. 44×44px) */
.main-nav a {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.96rem;
  font-weight: 500;
  padding: 12px 16px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.current {
  background: rgba(255, 250, 244, 0.2);
  color: #fff;
}

.main-nav a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

/* ── Die eine Aktion in der Navigation ───────────────────────────────────────
 * Genau eine Pille, am Ende der Zeile. Zwei Aktionen nebeneinander –
 * gefuellt plus Umriss – erzeugten keine Hierarchie, sondern Unruhe: vier
 * verschiedene Behandlungen in einer Zeile. Der Foto-Upload ist eine Seite
 * und wird deshalb wie eine behandelt.
 *
 * Ohne Unterstreichung: Die globale Regel a { text-decoration: underline }
 * schlaegt sonst bis hier durch, und eine Unterstreichung mitten in einem
 * gefuellten Button sieht unfertig aus. a.button loest das im selben
 * Stylesheet bereits genauso.
 */
.main-nav .nav-cta {
  background: rgba(255, 250, 244, 0.92);
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(36, 20, 12, 0.12);
}

.main-nav .nav-cta:hover,
.main-nav .nav-cta:focus-visible {
  background: #fff;
  color: var(--primary-dark);
  text-decoration: none;
}

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

/* WebP, wo der Browser image-set() mit type() versteht (QA N-7). Nur in
   @supports: Eine ungueltige Variable liesse den Hintergrund sonst ganz
   leer, statt auf das JPEG aus --hero-image zurueckzufallen. */
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero {
    background-image: var(--hero-image-set, var(--hero-image));
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.48) 0%, rgba(20, 14, 10, 0.58) 100%);
  z-index: -1;
}

.hero-inner {
  width: 100%;
  padding-top: calc(var(--space-xxl) + 84px);
  padding-bottom: var(--space-xxl);
}

.hero-copy {
  max-width: 720px;
  padding: clamp(32px, 5vw, 54px);
}

.hero-copy-card {
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.9) 0%, rgba(255, 248, 242, 0.84) 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--shadow);
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#hero-title,
h1,
h2,
h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

#hero-title,
h1 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3.25rem, 6vw, 5.2rem);
  font-weight: 600;
  text-wrap: balance;
}

.lead {
  margin: 24px 0 0;
  max-width: 58ch;
  font-size: 1.08rem;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero-actions-compact {
  margin-top: 24px;
}

/* ACCESSIBILITY: Buttons benötigen sichtbare Fokus-States (WCAG 2.4.7) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 0.98rem;
  font-weight: 600;
  border: 2px solid transparent;
}

.button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Druckfeedback: auf Touch der einzige Hinweis, dass der Tap ankam */
.button {
  transition: transform 160ms var(--ease-out), background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button:active {
  transform: scale(0.97);
}

.button.primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 16px 34px rgba(95, 63, 45, 0.2);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ACCESSIBILITY: Secondary Button mit besserer Kontrast (WCAG 1.4.3 - min 3:1 für UI-Komponenten) */
.button.secondary {
  background: rgba(143, 95, 69, 0.12);
  color: var(--primary-dark);
  border-color: var(--primary);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: rgba(143, 95, 69, 0.2);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* Ausgegraut, solange die Aktion gesperrt ist – etwa "Hochladen" und
   "Auswahl verwerfen" waehrend eines Uploads. Ohne diese Regel sah ein
   deaktivierter Button genauso aus wie ein aktiver und der Tipp lief ins
   Leere. Die :hover/:active-Varianten heben Anheben und Druckfeedback auf. */
.button:disabled,
.button:disabled:hover,
.button:disabled:active {
  opacity: 0.45;
  filter: grayscale(1);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.countdown-band {
  margin-top: calc(var(--space-xl) * -0.65);
  position: relative;
  z-index: 4;
}

.countdown-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: var(--space-lg);
  align-items: center;
  padding: 30px 34px;
}

/* Nach der Hochzeit (index.html, ab 17.05.2027): Dank statt Countdown. Nur
   eine Spalte – die rechte fuer die Zahlenkaesten entfaellt. */
.countdown-shell--danke {
  grid-template-columns: minmax(0, 1fr);
}

.countdown-copy h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}

/* Button "Zum Kalender hinzufuegen" (index.html, infos.html), oeffnet den
   Kalender-Dialog. <button> erbt die Schrift sonst nicht. */
.kalender-oeffnen {
  gap: 10px;
  font-family: inherit;
  cursor: pointer;
}

.countdown-copy .kalender-oeffnen {
  margin-top: 28px;
}

.kalender-oeffnen svg,
.kalender-dialog-schliessen svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* Kalender-Dialog (kalender_dialog.php). Modal: Die Seite liegt abgedunkelt
   und leicht unscharf dahinter, Esc oder ein Klick daneben schliessen. Am
   Handy faehrt er als Blatt von unten herein. [open] traegt die Zeit fuer
   das Oeffnen, die Grundregel die kuerzere fuers Schliessen. */
html:has(.kalender-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.kalender-dialog {
  width: min(440px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 28px;
  border: 2px solid rgba(143, 95, 69, 0.2);
  border-radius: var(--radius);
  background: #fffaf5;
  color: var(--text);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition-property: opacity, transform, display, overlay;
  transition-duration: 160ms;
  transition-timing-function: ease-in;
  transition-behavior: allow-discrete;
}

.kalender-dialog[open] {
  opacity: 1;
  transform: none;
  transition-duration: 260ms;
  transition-timing-function: var(--ease-out);
}

@starting-style {
  .kalender-dialog[open] {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}

.kalender-dialog::backdrop {
  background-color: rgba(30, 22, 16, 0);
  backdrop-filter: blur(0);
  transition:
    display 160ms allow-discrete,
    overlay 160ms allow-discrete,
    background-color 160ms ease-in,
    backdrop-filter 160ms ease-in;
}

.kalender-dialog[open]::backdrop {
  background-color: rgba(30, 22, 16, 0.5);
  backdrop-filter: blur(4px);
  transition-duration: 260ms;
  transition-timing-function: var(--ease-out);
}

@starting-style {
  .kalender-dialog[open]::backdrop {
    background-color: rgba(30, 22, 16, 0);
    backdrop-filter: blur(0);
  }
}

.kalender-dialog-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.kalender-dialog .section-kicker {
  margin-bottom: 8px;
}

.kalender-dialog h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.2rem);
}

.kalender-dialog-text {
  margin: 12px 0 0;
  color: var(--muted);
}

.kalender-dialog-schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(143, 95, 69, 0.1);
  color: var(--primary-dark);
  cursor: pointer;
  transition: background 180ms ease;
}

.kalender-dialog-schliessen:hover {
  background: rgba(143, 95, 69, 0.2);
}

.kalender-dialog-schliessen:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.kalender-auswahl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.kalender-auswahl .button {
  justify-content: flex-start;
  padding: 0 22px;
}

@media (max-width: 560px) {
  .kalender-dialog {
    width: 100%;
    max-height: calc(100dvh - 40px);
    margin: auto 0 0;
    padding: 24px 20px max(24px, env(safe-area-inset-bottom));
    border-width: 2px 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(100%);
  }

  .kalender-dialog[open] {
    transform: none;
  }

  @starting-style {
    .kalender-dialog[open] {
      transform: translateY(100%);
    }
  }
}

/* Bewegung reduzieren: nur noch Ein- und Ausblenden */
@media (prefers-reduced-motion: reduce) {
  .kalender-dialog,
  .kalender-dialog[open] {
    transform: none;
  }

  @starting-style {
    .kalender-dialog[open] {
      transform: none;
    }
  }
}

.countdown-text {
  margin: 14px 0 0;
  color: var(--muted);
  max-width: 42ch;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.countdown-item {
  padding: 22px 16px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf9 0%, var(--surface-alt) 100%);
  border: 1px solid rgba(143, 95, 69, 0.12);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.countdown-value {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  display: block;
  margin-top: 10px;
  color: var(--primary);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quickfacts-section {
  padding-top: 34px;
}

.quickfacts-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: rgba(255, 250, 245, 0.72);
  overflow: hidden;
}

.quickfacts-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px 28px;
}

.quickfacts-item + .quickfacts-item {
  border-left: 1px solid var(--border);
}

.quickfacts-item--ort {
  flex: 2;
}

.quickfacts-label {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.quickfacts-item strong {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--text);
}

.intro-band .intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: var(--space-lg);
  align-items: start;
}

.intro-band h2,
#card-rsvp-title {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
}

.intro-band p:not(.section-kicker),
#card-rsvp-text,
#intro-note-text {
  margin: 18px 0 0;
  color: var(--muted);
}

.intro-note,
.better-note,
.card-rsvp-emphasis {
  padding: 30px 32px;
}

.intro-note {
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.9) 0%, rgba(250, 242, 234, 0.92) 100%);
}

.card-rsvp-emphasis {
  max-width: 760px;
  background: linear-gradient(180deg, rgba(255, 250, 245, 0.94) 0%, rgba(248, 239, 230, 0.94) 100%);
  box-shadow: var(--shadow);
}

/* Teaser Grid für Content Cards */
.teaser-section {
  padding-top: var(--space-xl);
}

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

/* ACCESSIBILITY: Teaser-Cards mit fokussierten Zuständen */
.teaser-card {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 252, 248, 0.95) 0%, rgba(255, 248, 242, 0.9) 100%);
  border: 2px solid rgba(143, 95, 69, 0.2);
  box-shadow: 0 12px 30px rgba(41, 28, 18, 0.08);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .teaser-card:hover {
    transform: translateY(-4px);
    border-color: rgba(143, 95, 69, 0.35);
    box-shadow: 0 20px 45px rgba(41, 28, 18, 0.12);
  }
}

/* ACCESSIBILITY: Fokus auf Card Links (cascade focus zu Parent) */
.teaser-card .card-link:focus-visible {
  outline: none;
}

.teaser-card:has(.card-link:focus-visible) {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);
}

.teaser-card h3 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--text);
}

.teaser-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.teaser-card p.section-kicker {
  margin: 0 0 8px 0;
  color: var(--primary);
}

/* ACCESSIBILITY: Card-Links mit Unterstreichung und starkem Kontrast (WCAG 1.4.1, 1.4.3) */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-dark);
  background-color: transparent;
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(143, 95, 69, 0.1);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.card-link:hover {
  color: var(--primary);
  text-decoration-thickness: 3px;
}

.card-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ACCESSIBILITY: Text-Links für Inline-Links (z.B. in Hotel-Cards) */
.text-link {
  display: inline;
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.text-link:hover {
  color: var(--primary);
  text-decoration-thickness: 3px;
}

.text-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ACCESSIBILITY: Skip-Link sichtbar bei Focus (WCAG 2.4.1) */
.skip-link:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 10px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: var(--primary);
  color: white;
  border-radius: 4px;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .hero {
    min-height: 85vh;
    background-position: center 20%;
  }

  .countdown-shell,
  .intro-band .intro-grid {
    grid-template-columns: 1fr;
  }

  .teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Ungerade letzte Kachel fuellt die Reihe, statt als kuerzere
     Einzelkachel neben einer Luecke zu stehen. */
  .teaser-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

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

@media (max-width: 820px) {
  .container {
    width: min(var(--content), calc(100% - 28px));
    padding-inline: 14px;
  }

  .site-header {
    padding-top: 14px;
  }

  .nav-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .brand {
    width: 72px;
    height: 72px;
    margin-inline: auto;
  }

  .brand-logo {
    width: 72px;
    height: 72px;
  }

  .main-nav {
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 28px;
    padding: 12px;
  }

  .main-nav a {
    padding: 10px 12px;
  }

  .hero {
    min-height: 90vh;
    background-position: center 20%;
  }

  /* Nur so viel Abstand, wie der Header hoch ist (~235px). Mit 340px lag
     "Jetzt Rückmeldung geben" auf einem 375×812-Handy unterhalb der
     Falz (QA M-4). */
  .hero-inner {
    padding-top: 250px;
    padding-bottom: 72px;
  }

  .hero-copy {
    max-width: 100%;
    padding: 28px 22px;
  }

  #hero-title,
  h1 {
    max-width: 100%;
    font-size: clamp(2.7rem, 12vw, 4rem);
  }

  .lead {
    font-size: 1rem;
  }

  .countdown-band {
    margin-top: -24px;
  }

  .countdown-shell,
  .intro-note,
  .better-note,
  .card-rsvp-emphasis {
    padding: 24px 20px;
  }

  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quickfacts-bar {
    flex-direction: column;
  }

  .quickfacts-item + .quickfacts-item {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .quickfacts-item--ort {
    flex: 1;
  }

  .quickfacts-item--logo {
    display: none;
  }

  .quickfacts-item {
    padding: 16px 20px;
  }

  .section,
  .section-block {
    padding-top: 60px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 15px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .countdown-grid {
    gap: 12px;
  }

  .countdown-item {
    padding: 18px 10px 16px;
    border-radius: 18px;
  }

  .countdown-value {
    font-size: clamp(1.8rem, 10vw, 2.4rem);
  }

  .countdown-label,
  .quickfacts-label,
  .section-kicker,
  .eyebrow {
    letter-spacing: 0.12em;
  }
}

/* =============================================================
   INNER PAGE HEADER
   Pages without a full-height hero (story, infos, faq) use a
   sticky header with a warm-tinted solid background.
   ============================================================= */
.inner-page .site-header {
  position: sticky;
  top: 0;
  background: rgba(247, 243, 238, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding-block: 14px;
}

/* Homepage nav: logo sits over the dark hero overlay — render it white */
body:not(.inner-page) .brand-logo {
  filter: brightness(0) invert(1);
}

/* Inner-page nav: warm light header — natural brown logo fits perfectly; no filter needed */
.inner-page .brand {
  filter: none;
}

.inner-page .brand:hover {
  transform: scale(1.06);
  opacity: 0.85;
}

.inner-page .brand:focus-visible {
  outline-color: var(--primary);
}

.inner-page .main-nav {
  background: rgba(143, 95, 69, 0.07);
  border-color: rgba(143, 95, 69, 0.15);
}

.inner-page .main-nav a {
  color: var(--muted);
}

.inner-page .main-nav a:hover,
.inner-page .main-nav a.current {
  background: rgba(143, 95, 69, 0.13);
  color: var(--primary-dark);
}

.inner-page .main-nav a:focus-visible {
  outline-color: var(--primary);
}

/* Gefuellt: 5,40:1 gegen Weiss. */
.inner-page .main-nav .nav-cta {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(95, 63, 45, 0.18);
}

.inner-page .main-nav .nav-cta:hover,
.inner-page .main-nav .nav-cta:focus-visible {
  background: var(--primary-dark);
  color: #fff;
}

/* =============================================================
   PAGE INTRO
   Shared section header used at the top of story/infos/faq.
   ============================================================= */
/* Kein eigener Abstand nach unten: .page-stack setzt bereits gap:
   var(--space-lg). Beides zusammen ergab 80px – doppelt so viel wie
   jeder andere Abstand auf der Seite, etwa zwischen zwei Kacheln. */
.page-intro {
  padding-bottom: 0;
}

.page-intro h1 {
  margin: 10px 0 0;
  max-width: 22ch;
}

/* =============================================================
   TWO-COLUMN GRID  (story cards, misc)
   ============================================================= */
.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-top: var(--space-xl);
}

.grid-two .card {
  padding: var(--space-lg);
}

/* Soft card surface variant */
.soft-card {
  background: linear-gradient(135deg, rgba(255, 250, 245, 0.88) 0%, rgba(248, 240, 232, 0.94) 100%);
}

/* =============================================================
   STORY TIMELINE
   Two-column alternating layout with a centred connecting line.
   ============================================================= */
.timeline-rich {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-xs) 0 var(--space-xl);
}

/* Centred vertical connecting line */
.timeline-rich::before {
  content: '';
  position: absolute;
  left: 50%;
  top: var(--space-lg);
  bottom: var(--space-lg);
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  /* Entrance animation driven by IntersectionObserver in main.js */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 640ms cubic-bezier(.22, .68, 0, 1.2), transform 640ms cubic-bezier(.22, .68, 0, 1.2);
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Centre dot sitting on the dividing line */
.timeline-item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--primary), 0 0 0 6px rgba(143, 95, 69, 0.15);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Horizontal bridge lines flanking the centre dot */
.timeline-item::after {
  content: '';
  position: absolute;
  left: calc(50% - var(--space-xl) / 2);
  width: var(--space-xl);
  top: 50%;
  height: 1px;
  background: linear-gradient(to right, var(--border), transparent 35%, transparent 65%, var(--border));
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

/* No animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .timeline-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Timeline image bubble */
.timeline-bubble {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

/* <picture> ist inline und haette keine Hoehe – das Bild darin braucht
   aber 100 % der Kachel fuer object-fit: cover (QA N-7). */
.timeline-bubble picture {
  display: block;
  width: 100%;
  height: 100%;
}

.timeline-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

/* Logo-Station am Ende der Timeline. Dieselbe Farbe wie die Rückmelde-Aktion
   in der Navigation, damit die Seite mit einem Ton auskommt statt mit zwei
   aehnlichen. Das helle Logo erreicht darauf 4,60:1 – ueber den 3:1, die
   WCAG fuer grafische Elemente verlangt. */
.timeline-bubble--logo {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Kein Innenabstand: Prozentuale Paddings beziehen sich in CSS auf die
     Breite des UMGEBENDEN Blocks, nicht auf die des Elements. Bei
     gedeckelter Kachel (460px in einer 791px-Spalte) wurden daraus 79px
     statt 46px. Das Groessenverhaeltnis steckt deshalb im Bild selbst. */
  background: var(--primary);
}

.timeline-bubble--logo img {
  /* 80 Prozent der Kachelbreite – gleiches Verhaeltnis auf jedem Geraet.
     Vorher deckelte ein fester Wert von 280px das Logo: auf dem Handy
     waren das 81 Prozent der Kachel, auf dem Desktop nur 51.
     Groesste Kachel ist 552px, das Logo damit 442px; die 1000px der
     Vorlage decken das auch auf 2x-Displays ab. */
  width: 80%;
  max-width: none;
  height: auto;
  object-fit: contain;
}

/* Timeline text card */
.timeline-content {
  padding: var(--space-lg);
}

/* <time> element styled like a section-kicker label */
.timeline-content time {
  display: block;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.timeline-content h2 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

.timeline-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

/* Abstand zwischen mehreren Absätzen in einem Timeline-Eintrag */
.timeline-content p + p {
  margin-top: 14px;
}

/* Alt item: the DOM already has content first, bubble second —
   which naturally places content in col 1 and bubble in col 2. */

/* =============================================================
   MAP CONTAINER
   ============================================================= */
/* Solange die Fassade steht, KEIN festes Seitenverhaeltnis: 16/4.5 laesst
   die Hoehe mit der Breite schrumpfen, den Inhalt aber nicht. Auf einem
   375px-iPhone blieben 259px Breite und damit 73px Hoehe, waehrend Pin,
   Adresse und Button 197px brauchen – overflow: hidden schnitt den Button
   ab. Eine feste min-height waere nur ein Pflaster: Bei groesserer
   Systemschrift schneidet es wieder ab. Stattdessen bestimmt hier der
   Inhalt die Hoehe, und das Format bekommt erst die geladene Karte. */
/* width: 100% ist Pflicht, sobald aspect-ratio gilt: Der Browser rechnet
   min-height sonst ueber das Format in eine Mindestbreite um – 230px bei
   4/3 ergeben 307px, bei 16/4.5 sogar 818px. Die Karte ragte dadurch am
   iPhone ueber die Kachel und die Seite liess sich seitlich verschieben,
   bei 900–990px Fensterbreite stand schon die Fassade ueber (QA M-7). */
.map-container {
  width: 100%;
  margin: var(--space-md) 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 230px;
}

/* Erst wenn wvcLoadMap das iframe eingesetzt hat, gilt ein Format – ohne
   definierte Hoehe haette das iframe naemlich keine. Mobil bewusst nicht
   16/4.5: Das ergaebe auf einem iPhone eine 73px hohe Kartenscheibe.
   Ohne :has()-Unterstuetzung bleibt es bei min-height; die Karte ist dann
   230px hoch statt im Format, aber nutzbar. */
.map-container:has(iframe) {
  aspect-ratio: 4 / 3;
}

/* Ab dieser Breite traegt die Kachel das flache Format, ohne dass der
   Inhalt der Fassade gedraengt wird – der Desktop-Eindruck bleibt damit
   unveraendert. */
@media (min-width: 900px) {
  .map-container,
  .map-container:has(iframe) {
    aspect-ratio: 16 / 4.5;
  }
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Map Facade (Performance: Karte erst bei Klick laden). Gleiche Optik fuer
   den Platzhalter des Rueckmeldeformulars (rueckmelden.html). */
.map-facade,
.rsvp-facade {
  width: 100%;
  /* auto statt 100%: Die Hoehe kommt jetzt vom Inhalt, nicht von einem
     festen Rahmen. Damit kann nichts mehr abgeschnitten werden. */
  height: auto;
  min-height: 230px;
  padding: var(--space-sm) var(--space-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--surface-strong) 0%, var(--surface-soft) 100%);
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  cursor: default;
  padding: var(--space-md);
  text-align: center;
}

.map-facade-pin,
.rsvp-facade-icon {
  width: 40px;
  height: 40px;
  color: var(--primary);
  flex-shrink: 0;
}

.map-facade-address,
.rsvp-facade-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.rsvp-facade-text {
  max-width: 44ch;
}

.map-facade-btn,
.rsvp-facade-btn {
  min-width: 160px;
  margin-top: 4px;
}

/* =============================================================
   RUECKMELDEN-SEITE: Tally-Formular (rueckmelden.html, main.js)
   Die Hoehe des iframes setzt Tallys embed.js. Nur ohne Skript gilt
   die feste Hoehe – gross genug fuer "Ja" mit allen Zusatzfeldern.
   ============================================================= */
/* Volle Containerbreite wie FAQ und Infos. Tally zeichnet seine Felder
   selbst schmal und linksbuendig, die Zeilen werden also nicht lang. */
.rsvp-card {
  padding: var(--space-md);
}

.rsvp-iframe {
  display: block;
  width: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 240ms ease;
}

.rsvp-iframe.is-geladen {
  opacity: 1;
}

.rsvp-iframe--fest {
  height: 1650px;
}

.rsvp-laden {
  margin: 0;
  padding: var(--space-md) 0 0;
  color: var(--muted);
  text-align: center;
}

.rsvp-fallback {
  margin: var(--space-sm) 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

/* Nur auf Spanisch: Hilfe zum deutschen Tally-Formular (lang/es.php) */
.rsvp-sprachhinweis {
  margin-bottom: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: 0.92rem;
  line-height: 1.55;
}

.rsvp-sprachhinweis p {
  margin: 0 0 12px;
  font-weight: 600;
}

.rsvp-glossar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
}

.rsvp-glossar dt {
  font-weight: 600;
  color: var(--primary-dark);
}

.rsvp-glossar dd {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 560px) {
  .rsvp-glossar {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .rsvp-glossar dd {
    margin-bottom: 10px;
  }
}

@media (max-width: 560px) {
  .rsvp-card {
    padding: var(--space-xs);
  }
}

/* =============================================================
   INFO PAGE: Decorative hero banner
   ============================================================= */
.info-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  background-image: var(--info-image);
  background-size: cover;
  background-position: center;
  margin-top: var(--space-lg);
}

.info-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 10, 0.18) 0%, rgba(20, 14, 10, 0.52) 100%);
}

.info-hero-content {
  position: relative;
  z-index: 1;
  margin: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}

/* =============================================================
   INFO PAGE: Info-cards grid
   Location card spans full width; Anreise/Parken/Shuttle below.
   ============================================================= */
.info-cards-section {
  padding-top: var(--space-lg);
}

.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Location card spans both columns */
.info-card-location {
  grid-column: 1 / -1;
}

.info-card {
  padding: var(--space-lg);
}

.info-card h2 {
  margin: 8px 0 14px;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}

.info-card p {
  margin: 0 0 var(--space-md);
  color: var(--muted);
}

.info-card p:last-child {
  margin-bottom: 0;
}

/* Vorab-Hinweis zum Standesamt (infos.html).
   Die Karte laeuft ueber die volle Breite, damit ihre Kanten mit den
   Info-Kacheln darueber fluchten. Der Fliesstext braucht deshalb ein eigenes
   Lesemass - ohne Begrenzung stuenden auf 1440px rund 120 Zeichen in einer
   Zeile. 58ch ist derselbe Wert wie bei .lead. */
#card-standesamt-text {
  max-width: 58ch;
}

/* Datum als eigene Zeile ueber dem Text, gleiche Behandlung wie die Uhrzeiten
   in der Ablauf-Timeline (.day-timeline-item time): Zahlen sollen auf der
   Seite ueberall gleich aussehen. */
.standesamt-datum {
  margin: 0 0 var(--space-md);
}

.standesamt-datum time {
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Adresse wie unter dem Ortsnamen in den Quickfacts der Startseite. */
.standesamt-ort {
  margin: 0 0 var(--space-md);
  font-size: 0.95rem;
}

/* =============================================================
   INFO PAGE: Day timeline
   Left-anchored vertical timeline for the wedding day schedule.
   ============================================================= */
.day-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 68px;
  margin-top: var(--space-lg);
}

/* Vertical connecting line */
.day-timeline::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
}

.day-timeline-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-sm) 0;
  position: relative;
}

/* Piktogramm-Medaillon auf der Linie (ersetzt den frueheren Punkt).
   left: -68px entspricht 0px bezogen auf .day-timeline, damit sitzt die
   Mitte des 44px-Kreises exakt auf der Linie bei 22px. */
.day-timeline-icon {
  position: absolute;
  left: -68px;
  top: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--primary);
}

.day-timeline-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}

.day-timeline-item time {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  padding-top: 3px;
  line-height: 1.5;
}

.day-timeline-item h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.day-timeline-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* =============================================================
   INFO PAGE: Contact grid + WhatsApp links
   ============================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Flaeche, Rahmen und Schatten kommen aus .card (REQ-KACHEL): eine Kachel,
   ein Aussehen. Hier steht nur noch, was die Groessenstufe ausmacht -
   Listenkacheln sind enger und runden schwaecher als die grossen Info-Kacheln. */
.contact-card {
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.contact-card .role {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.contact-card h3 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}

.phone-link {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

.phone-link:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

/* WhatsApp link stays within the warm palette but uses a bold label */
.whatsapp-link,
.mail-link,
.web-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.whatsapp-link:hover,
.mail-link:hover,
.web-link:hover {
  color: var(--primary);
}

/* DJ-Karte: "E-Mail" und "Website" sind kurz und landeten als inline-flex
   nebeneinander – untereinander liest sich die Karte wie die anderen.
   fit-content haelt Unterstreichung und Klickflaeche auf Textbreite. */
.contact-card .mail-link,
.contact-card .web-link {
  display: flex;
  width: fit-content;
}

/* WhatsApp-Auswahl am Computer (main.js): App oder Web. Untereinander und
   etwas kleiner als normale Buttons, damit beide in die schmale
   Kontaktkarte passen. Versteckt wird ueber das hidden-Attribut. */
.whatsapp-auswahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.whatsapp-auswahl .button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.85rem;
  text-decoration: none;
}

/* =============================================================
   INFO PAGE: Hotel grid
   ============================================================= */
.hotel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Wie .contact-card: Flaeche, Rahmen und Schatten kommen aus .card. */
.hotel-card {
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}

/* Hotelnamen auf einer Hoehe: Per subgrid teilen sich die Karten einer
   Reihe die Zeilen fuer Label, Name, Text und Links. Bricht ein Label auf
   zwei Zeilen um, rutscht der Name in allen Karten der Reihe gleich weit
   nach unten statt nur in der eigenen. Ohne subgrid bleibt es beim
   Flex-Layout darueber. */
@supports (grid-template-rows: subgrid) {
  .hotel-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.hotel-label {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.hotel-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.hotel-card > p {
  color: var(--muted);
  font-size: 0.93rem;
  margin: 0 0 var(--space-md);
  line-height: 1.65;
}

.hotel-links {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: auto;
}

/* =============================================================
   FAQ GRID
   Two-column responsive grid; cards align to their own height.
   ============================================================= */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  padding-top: var(--space-lg);
}

/* align-self: start prevents cards from stretching to row height */
.faq-item {
  padding: var(--space-lg);
  align-self: start;
}

.faq-item h2 {
  /* Kein Unterboden-Abstand – der Accordion-Button übernimmt das Spacing */
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.35;
}

.faq-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.72;
}

/* =============================================================
   FAQ: ACCORDION TOGGLE
   Klick auf Frage → Antwort klappt auf.
   ============================================================= */
.faq-question-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  gap: 16px;
}

.faq-question-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Plus/Minus-Icon */
.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(143, 95, 69, 0.1);
  border: 1.5px solid rgba(143, 95, 69, 0.25);
  position: relative;
  transition: background 220ms ease, transform 300ms ease;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--primary);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}

/* Horizontaler Strich */
.faq-icon::before { width: 10px; height: 1.5px; }

/* Vertikaler Strich – dreht sich beim Öffnen weg */
.faq-icon::after {
  width: 1.5px;
  height: 10px;
  transition: transform 300ms ease, opacity 300ms ease;
}

.faq-item.is-open .faq-icon {
  background: rgba(143, 95, 69, 0.18);
  transform: rotate(45deg); /* + wird zu × */
}

/* Ausklappbarer Antwort-Bereich */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  /* Zugeklappt zusaetzlich unsichtbar – erst nach der Animation, damit das
     Zuklappen sichtbar bleibt. Sonst waren Links darin per Tab erreichbar
     und Screenreader lasen alle Antworten vor (QA N-3). */
  visibility: hidden;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 320ms;
}

.faq-item.is-open .faq-answer {
  visibility: visible;
  transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.faq-answer p {
  padding-top: 16px; /* Abstand zwischen Frage und Antwort */
}

/* =============================================================
   INDEX: RSVP-Nudge + Adresse im Quickfacts
   ============================================================= */

/* Hervorgehobener Hinweistext in der Nähe des RSVP-Buttons */
.rsvp-nudge {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(143, 95, 69, 0.08);
  border: 1px solid rgba(143, 95, 69, 0.22);
  font-size: 0.9rem;
  color: var(--primary-dark);
  font-weight: 500;
  line-height: 1.55;
}

/* Adresszeile unterhalb des Ortsnamens im Quickfacts */
/* Location link – fuegt sich in den Fliesstext ein, bleibt aber als Link
   erkennbar: seit der Ort auf Google Maps verweist, waere ein Hover-only-
   Hinweis auf Touch-Geraeten unsichtbar (WCAG 1.4.1). */
.location-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(143, 95, 69, 0.45);
  text-underline-offset: 3px;
}

.location-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.location-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.quickfacts-address {
  font-size: 0.8rem;
  color: var(--muted-soft);
  line-height: 1.5;
  margin-top: 2px;
}

.quickfacts-item--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
}

.quickfacts-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.88;
}

/* =============================================================
   UPLOAD-SEITE
   ============================================================= */
/* Die Kachel nimmt die volle Containerbreite ein, wie Story, Infos und FAQ.
   Damit sie nicht zu zwei Dritteln leer bleibt, stehen die Hinweise am
   Laptop in einer eigenen Spalte rechts neben dem Formular. Am Handy
   folgen sie darunter (siehe @media unten). */
.upload-card {
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

.upload-main,
.upload-hints {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.upload-hints {
  padding-inline-start: var(--space-lg);
  border-inline-start: 1px solid var(--border);
}

/* Die Textzeilen folgen der Spaltenbreite nicht beliebig: angenehm lesbar
   sind 60 bis 75 Zeichen. Deshalb der Deckel in ch – der Wert haengt an der
   Schriftgroesse und bleibt damit auch bei geaenderter Typografie richtig.

   56ch statt der oft genannten 65: Die Einheit ch misst die Breite der
   Ziffer "0", nicht die eines Durchschnittszeichens. Bei Inter ist "0"
   spuerbar breiter als der Schnitt, 68ch ergaben gemessene 86 Zeichen
   je Zeile. 56ch landen bei rund 70. */
.upload-main > *,
.upload-hints > * {
  max-width: 56ch;
}

/* Nicht erst bei 820px: Bei 821px blieben je Spalte nur rund 30 Zeichen
   Hinweistext. Unter 1100px liest sich die Kachel einspaltig besser. */
@media (max-width: 1100px) {
  .upload-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .upload-hints {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* Ein Namensfeld ueber die volle Lesebreite waere unverhaeltnismaessig. */
.upload-name-input {
  max-width: 420px;
}

.upload-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

/* Das hidden-Attribut setzt display: none nur ueber das Browser-Stylesheet.
   Jede Autoren-Regel mit display schlaegt das – .upload-actions { display:
   flex } machte die Schaltflaechen dauerhaft sichtbar, obwohl hidden
   gesetzt war. Damit fehlte die Rueckmeldung, dass eine Auswahl
   angekommen ist. */
[hidden] {
  display: none !important;
}

.upload-actions--send {
  padding-top: var(--space-xxs);
  border-top: 1px solid var(--border);
}

/* Das Dateifeld selbst ist visuell versteckt; das Label traegt die
   Button-Optik. cursor: pointer, weil ein Label sonst keinen zeigt. */
.upload-pick {
  cursor: pointer;
  gap: 10px;
}

/* Wartezustand, solange iOS die ausgewaehlten Fotos vorbereitet (siehe
   upload.js). Nicht erneut antippbar: ein zweiter Auswahldialog wuerde die
   erste Auswahl ueberholen. */
.upload-pick.is-busy {
  pointer-events: none;
  opacity: 0.85;
}

.upload-pick-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: upload-spin 0.7s linear infinite;
}

.upload-pick.is-busy .upload-pick-spinner {
  display: inline-block;
}

@keyframes upload-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .upload-pick-spinner {
    animation-duration: 2.4s;
  }
}

/* Tastaturfokus: Den Fokus bekommt das versteckte Dateifeld, sichtbar ist
   aber das Label. Deshalb steht das Feld im HTML direkt davor (QA N-4). */
#upload-input:focus-visible + .upload-pick {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* Namensfeld: gleiche Optik wie das Eingabefeld der Gaestesperre, damit
   die Seite mit einer Formularsprache auskommt. */
.upload-name-feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-name-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.upload-name-input {
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  color: var(--text);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  outline: none;
  -webkit-appearance: none;
}

.upload-name-input::placeholder {
  color: var(--muted-soft);
}

.upload-name-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(143, 95, 69, 0.15);
}

.upload-name-input:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.upload-name-hinweis {
  margin: 0;
  color: var(--muted-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Hinweis, wenn ein Video abgelehnt wurde – bewusst auffaelliger als die
   Statuszeile, weil der Gast hier etwas tun muss. */
.upload-video-notice {
  margin: 0;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  background: rgba(176, 50, 30, 0.07);
  border: 1px solid rgba(176, 50, 30, 0.22);
  color: #7a2312;
  font-size: 0.93rem;
  line-height: 1.55;
}

.upload-status {
  margin: 0;
  min-height: 1.5em;
  color: var(--primary-dark);
  font-size: 0.92rem;
  font-weight: 600;
}

.upload-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-list:empty {
  display: none;
}

.upload-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xxs);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(143, 95, 69, 0.06);
  font-size: 0.88rem;
}

.upload-item-name {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-item-state {
  flex-shrink: 0;
  color: var(--muted-soft);
  font-variant-numeric: tabular-nums;
}

.upload-item.is-done {
  background: rgba(93, 122, 74, 0.1);
}

.upload-item.is-done .upload-item-state {
  color: #40632f;
  font-weight: 600;
}

.upload-item.is-failed {
  background: rgba(176, 50, 30, 0.08);
}

.upload-item.is-failed .upload-item-state {
  color: #7a2312;
  font-weight: 600;
}

/* Hinweis waehrend des Uploads (QA M-6) – ruhiger Ton, kein Fehler. */
.upload-keep-open {
  margin: 0;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  background: rgba(143, 95, 69, 0.08);
  border: 1px solid rgba(143, 95, 69, 0.22);
  color: var(--primary-dark);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Erneute Anmeldung mitten im Upload (QA H-3). Gleiche Formularsprache
   wie Namensfeld und Gaestesperre. */
.upload-relogin {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-sm);
  background: rgba(143, 95, 69, 0.06);
  border: 1px solid rgba(143, 95, 69, 0.22);
}

.upload-relogin-text {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =============================================================
   RESPONSIVE: new components
   ============================================================= */
@media (max-width: 1100px) {
  .hotel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Gleiche Regel wie bei .teaser-grid: eine ungerade letzte Kachel
     fuellt die Reihe, statt schmaler neben einer Luecke zu stehen. */
  .hotel-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  /* Einspaltig nimmt die Logo-Kachel sonst die volle Breite ein: bei
     819px waeren das 791px, also 97 Prozent der Bildschirmbreite als
     einfarbiger Block – und das Logo braeuchte dort 1266 Bildpunkte,
     mehr als die Vorlage hergibt. Ein Foto darf so breit sein, ein
     Logo nicht. */
  .timeline-bubble--logo {
    /* width: 100% ist noetig, nicht nur max-width: margin-inline: auto
       hebt das Strecken des Grid-Elements auf, worauf es sich an seinem
       Inhalt ausrichtet – und der ist ein noch nicht geladenes Bild.
       Ohne die Breitenangabe kollabiert die Kachel auf 158px. */
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }

  /* Stack story timeline to single column */
  .timeline-rich::before {
    display: none;
  }

  /* Single-column stack, same gap as desktop items */
  .timeline-item {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Text first on mobile */
  .timeline-item .timeline-content {
    order: -1;
  }

  /* Image second – keep original aspect ratio */
  .timeline-item .timeline-bubble {
    order: 1;
  }

  /* Hide centre dot and bridge arms – no room on mobile */
  .timeline-item::before,
  .timeline-item::after {
    display: none;
  }

  /* Collapse all multi-column grids to 1 column.
     minmax(0, 1fr) wie am Desktop statt 1fr: 1fr waechst mit der
     Mindestbreite des Inhalts. Die geladene Karte meldet 307px und schob
     die Spalte am iPhone ueber den Bildschirmrand (QA M-7, siehe auch
     .map-container). */
  .grid-two,
  .info-cards-grid,
  .faq-list,
  .contact-grid,
  .hotel-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Unset location card full-width span */
  .info-card-location {
    grid-column: auto;
  }

  .day-timeline {
    padding-left: 56px;
  }

  .day-timeline::before {
    left: 17px;
  }

  .day-timeline-item {
    grid-template-columns: 72px 1fr;
  }

  .day-timeline-icon {
    left: -56px;
    top: 16px;
    width: 36px;
    height: 36px;
  }

  .day-timeline-icon svg {
    width: 21px;
    height: 21px;
  }

  /* Mobil nicht mitscrollen: Logo plus zweizeilige Navigation belegten
     als sticky Leiste 30 % des Bildschirms (QA M-3). Wer wechseln will,
     scrollt nach oben. Dazu ein kleineres Logo, damit auch der erste
     Bildschirm mehr Inhalt zeigt. */
  .inner-page .site-header {
    position: static;
    padding-block: 12px;
  }

  .inner-page .brand,
  .inner-page .brand-logo {
    width: 56px;
    height: 56px;
  }
}

/* Unter 380px (iPhone SE 1. Gen) wuchs die Leiste sonst auf drei Zeilen
   und damit auf ein Drittel der Bildschirmhoehe. */
@media (max-width: 380px) {
  .main-nav {
    gap: 8px;
    padding: 10px;
  }

  .main-nav a {
    padding: 10px;
    font-size: 0.9rem;
  }
}

/* Sehr schmale Geraete (iPhone SE 1. Gen, 320px): "Foto-Upload" und
   "Rückmelden" rutschten sonst auf getrennte Zeilen und die Leiste auf ein
   Drittel der Bildschirmhoehe. */
@media (max-width: 340px) {
  .main-nav {
    gap: 6px;
    padding: 8px;
  }

  .main-nav a {
    padding: 9px 8px;
    font-size: 0.85rem;
  }
}

@media (max-width: 560px) {
  .timeline-bubble {
    aspect-ratio: 3 / 4;
  }

  /* Die Logo-Station bleibt quadratisch: im 3/4-Format entstuenden
     breite Taupe-Baender ober- und unterhalb des Logos. */
  .timeline-bubble--logo {
    aspect-ratio: 1 / 1;
  }

  /* .upload-card: Mit dem Desktop-Abstand blieb am iPhone nur rund 235px
     Textbreite, die Kachel wurde entsprechend lang (QA M-9). */
  .faq-item,
  .info-card,
  .hotel-card,
  .contact-card,
  .upload-card {
    padding: var(--space-md);
  }

  /* Schmalere Zeitspalte, damit neben dem Piktogramm genug Text passt */
  .day-timeline {
    padding-left: 50px;
  }

  .day-timeline::before {
    left: 15px;
  }

  .day-timeline-item {
    grid-template-columns: 66px 1fr;
    gap: var(--space-xs);
  }

  .day-timeline-icon {
    left: -50px;
    top: 17px;
    width: 32px;
    height: 32px;
  }

  .day-timeline-icon svg {
    width: 19px;
    height: 19px;
  }
}

/* =============================================================
   FEHLERSEITE (404.html, QA N-10) – gleiche Karte wie die Gaestesperre
   ============================================================= */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-xs);
  background: linear-gradient(160deg, var(--bg) 0%, #ede3d9 100%);
}

.error-card {
  width: min(480px, 100%);
  padding: clamp(36px, 7vw, 60px) clamp(28px, 6vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.error-card h1 {
  max-width: none;
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 2.8rem);
}

.error-card .lead {
  margin: 0 0 var(--space-md);
}

.error-logo {
  width: 104px;
  height: 104px;
  margin-bottom: var(--space-md);
  border-radius: 0;
}