/* ===================================================================
   FEIERN
   Bausteine für /feiern, /hochzeit und /weihnachtsfeier.

   Wie regionsseiten.css: hier steht nur, was es noch nicht gibt.
   Farben, Abstände und Schriften aus tokens.css, Abschnitte und
   Knöpfe aus layout.css und components.css, der Antwortblock, die
   Fließtextspalte, die Fragen und die Routenknöpfe aus
   regionsseiten.css und anfahrt.css.

   ⚠️ WELCHE SEKTION IST DUNKEL, GEMESSEN AM 02.09.2026
   In der ersten Fassung stand hier helle Schrift für .section-tief.
   Das war falsch und machte die Buffetliste unlesbar, Creme auf
   Creme. Die Wahrheit steht in layout.css Zeile 42 bis 46:

       .section-creme     #F8F2E4   hell
       .section-papier    #FBF7EE   hell
       .section-tief      #EFE6D2   hell, "tief" meint den Cremeton
       .section-burgund   #6E1A24   DUNKEL
       .section-anthrazit #1A1410   DUNKEL

   Nur burgund und anthrazit tragen helle Schrift. Nichts sonst.

   Kein Breakpoint, wo auto-fit reicht. Die Raster ordnen sich selbst
   nach verfügbarer Breite, damit auf 320 Pixel nichts aus dem Rahmen
   läuft und auf 1440 nichts verloren steht.
   =================================================================== */


/* ---------- Die Zahlen ----------
   Platz, Garten, Apartments. Die Zahl ist das Argument, deshalb steht
   sie groß und die Beschriftung klein darunter. */
.feier-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--vr-space-md);
  max-width: 68ch;
  margin-inline: auto;
}

.feier-zahl {
  text-align: center;
  padding: var(--vr-space-lg) var(--vr-space-md);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--vr-linie-soft);
  border-radius: var(--vr-radius-md);
}

.feier-zahl__num {
  display: block;
  font-family: var(--vr-font-display);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--vr-burgund);
  font-variant-numeric: tabular-nums;
}

.feier-zahl__label {
  display: block;
  margin-top: var(--vr-space-xs);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Nicht --vr-text-muted: das ergibt auf Creme 4,1 zu 1 und reißt die
     AA-Schwelle von 4,5. Gemessen, nicht geschätzt. */
  color: var(--vr-anthrazit-soft);
}


/* ---------- Anlässe als Bildkacheln ----------
   Sieben Anlässe als reine Textspalten waren eine Textwüste, und in
   einem 4er-Raster blieb die letzte Reihe halb leer. Mit Foto trägt
   jede Kachel für sich, und das Auge findet den Anlass schneller als
   über die Überschrift.

   Die Kachel ist ganzflächig anklickbar, wo es eine Zielseite gibt.
   Wo nicht, ist sie bewusst kein Link und sieht auch nicht so aus. */
.feier-anlaesse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--vr-space-lg);
}

.feier-anlass {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--vr-radius-md);
  background: var(--vr-papier);
  border: 1px solid var(--vr-linie-soft);
  /* Kein transform beim Schweben: das würde position: fixed in
     Kindelementen kapern. Siehe die Lightbox-Falle vom 29.08. */
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.feier-anlass--link:hover,
.feier-anlass--link:focus-within {
  border-color: var(--vr-gold);
  box-shadow: 0 8px 26px rgba(26, 20, 16, 0.16);
}

.feier-anlass__bild {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--vr-creme-tief);
}

.feier-anlass__bild img,
.feier-anlass__bild picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feier-anlass__body {
  padding: var(--vr-space-md) var(--vr-space-lg) var(--vr-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--vr-space-xs);
  flex: 1;
}

.feier-anlass__titel {
  margin: 0;
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: 600;
  color: var(--vr-burgund);
}

/* Der ganze Kachelkopf ist der Klickbereich, nicht nur die Wortbreite.
   Das Pseudoelement legt sich über die Kachel, deshalb braucht die
   Kachel position: relative. */
.feier-anlass--link { position: relative; }

.feier-anlass__titel a {
  color: inherit;
  text-decoration: none;
}

.feier-anlass__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.feier-anlass--link:hover .feier-anlass__titel,
.feier-anlass--link:focus-within .feier-anlass__titel {
  color: var(--vr-burgund-tief);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.feier-anlass__text {
  margin: 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
}

/* Ein kleiner Hinweis, wo es weitergeht. Nur bei den Kacheln mit Seite. */
.feier-anlass__mehr {
  margin-top: auto;
  padding-top: var(--vr-space-sm);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--vr-gold-tief);
}

/* Auf dunklem Grund kehren sich die Farben um. Nur burgund und
   anthrazit sind dunkel, siehe Kopf dieser Datei. */
.section-burgund .feier-anlass,
.section-anthrazit .feier-anlass {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 176, 112, 0.35);
}

.section-burgund .feier-anlass__titel,
.section-anthrazit .feier-anlass__titel {
  color: var(--vr-gold-hell);
}

.section-burgund .feier-anlass__text,
.section-anthrazit .feier-anlass__text {
  color: rgba(248, 242, 228, 0.88);
}

.section-burgund .feier-anlass__mehr,
.section-anthrazit .feier-anlass__mehr {
  color: var(--vr-gold-hell);
}


/* ---------- Ablauf in Schritten ----------
   Eine echte <ol>, damit ein Screenreader die Reihenfolge ansagt.
   Die Nummer ist Dekoration und deshalb aria-hidden. Hier trägt sie
   echte Information: die Schritte passieren wirklich nacheinander. */
.feier-ablauf {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 68ch;
  display: grid;
  gap: var(--vr-space-lg);
}

.feier-ablauf__schritt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--vr-space-md);
  align-items: start;
}

.feier-ablauf__nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  border-radius: 50%;
  background: var(--vr-burgund);
  color: var(--vr-creme);
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.feier-ablauf__titel {
  margin: 0 0 var(--vr-space-xs) 0;
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: 600;
  color: var(--vr-text-primary);
}

.feier-ablauf__schritt p {
  margin: 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
}

.section-burgund .feier-ablauf__nr,
.section-anthrazit .feier-ablauf__nr {
  background: var(--vr-gold);
  color: var(--vr-anthrazit);
}

.section-burgund .feier-ablauf__titel,
.section-anthrazit .feier-ablauf__titel {
  color: var(--vr-creme);
}

.section-burgund .feier-ablauf__schritt p,
.section-anthrazit .feier-ablauf__schritt p {
  color: rgba(248, 242, 228, 0.88);
}


/* ---------- Aufzählung im Buffetblock ----------
   Kein Aufzählungspunkt, sondern ein goldener Strich. */
.feier-liste {
  list-style: none;
  margin: var(--vr-space-md) 0;
  padding: 0;
  display: grid;
  gap: var(--vr-space-sm);
}

.feier-liste li {
  position: relative;
  padding-left: 1.35rem;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
}

.feier-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 2px;
  background: var(--vr-gold);
}

.section-burgund .feier-liste li,
.section-anthrazit .feier-liste li {
  color: rgba(248, 242, 228, 0.88);
}


/* ---------- Knopfleiste ----------
   Immer mittig, immer gleich breit, nie zweizeilig. Der zweizeilige
   Knopf im Kopf der Seite wechselt seine Beschriftung mit dem
   Öffnungsstatus, das ergibt hier keinen Sinn und sah nur groß aus.

   Mindestgröße 44 mal 44 Pixel, das ist die Tippfläche, nicht die
   Schriftgröße. */
.feier-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--vr-space-md);
  margin-top: var(--vr-space-xl);
}

.feier-aktionen .btn {
  min-height: 44px;
  min-width: 15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .feier-anlass {
    transition: none !important;
  }
}


/* ---------- Orte aus der Region ----------
   Die Ortsseiten sind dafür da, in ihren Orten gefunden zu werden.
   Bis zum 02.09.2026 hingen sie nur im Fuß, in einer Liste aus zehn
   kleinen Links, die niemand anklickt.

   Hier stehen sie als eigene Kacheln: Ortsname groß, Entfernung als
   Zahl darunter. Die Entfernung ist das, was ein Gast wissen will,
   und sie ist bei uns ein Argument, kein Problem.

   Kein Foto je Kachel: dreizehn Fotos derselben Villa nebeneinander
   sagen nichts über dreizehn verschiedene Orte. Die Typografie trägt. */
.orte-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--vr-space-md);
}

.orte-block__ort {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--vr-space-sm);
  /* Tippfläche deutlich über den 44 Pixeln, hier tippt man mit dem Daumen. */
  min-height: 6.5rem;
  padding: var(--vr-space-md) var(--vr-space-lg);
  border-radius: var(--vr-radius-md);
  background: var(--vr-papier);
  border: 1px solid var(--vr-linie-soft);
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.orte-block__ort:hover,
.orte-block__ort:focus-visible {
  background: var(--vr-creme);
  border-color: var(--vr-gold);
  box-shadow: 0 6px 20px rgba(26, 20, 16, 0.14);
}

.orte-block__name {
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--vr-burgund);
}

.orte-block__km {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  letter-spacing: 0.03em;
  color: var(--vr-anthrazit-soft);
  font-variant-numeric: tabular-nums;
}

/* Der Pfeil erscheint erst beim Schweben. Auf einem Gerät ohne Zeiger
   ist er dauerhaft da, sonst wüsste niemand, dass es weitergeht. */
.orte-block__pfeil {
  color: var(--vr-gold-tief);
  font-weight: 600;
  opacity: 0;
  transition: opacity 200ms ease;
}

.orte-block__ort:hover .orte-block__pfeil,
.orte-block__ort:focus-visible .orte-block__pfeil {
  opacity: 1;
}

@media (hover: none) {
  .orte-block__pfeil { opacity: 1; }
}

.section-burgund .orte-block__ort,
.section-anthrazit .orte-block__ort {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 176, 112, 0.35);
}

.section-burgund .orte-block__name,
.section-anthrazit .orte-block__name {
  color: var(--vr-gold-hell);
}

.section-burgund .orte-block__km,
.section-anthrazit .orte-block__km {
  color: rgba(248, 242, 228, 0.82);
}

@media (prefers-reduced-motion: reduce) {
  .orte-block__ort,
  .orte-block__pfeil { transition: none !important; }
}


/* ---------- Der stille Anlass ----------
   Der Trauerkaffee steht nicht im Kachelraster der Anlässe. Sieben
   Kacheln lassen eine halbe Reihe leer, und wichtiger: wer einen
   Trauerkaffee sucht, sucht ihn nicht zwischen Jubiläum und
   Jugendweihe. Eigener Absatz, ruhiger, ohne Pfeil und ohne Klickruf. */
.feier-still {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr);
  gap: var(--vr-space-xl);
  align-items: center;
  max-width: 68ch;
  margin-inline: auto;
  padding-top: var(--vr-space-xl);
  border-top: 1px solid var(--vr-linie-soft);
}

.feier-still__bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--vr-radius-md);
}

.feier-still__bild img,
.feier-still__bild picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feier-still__text h3 {
  margin: 0 0 var(--vr-space-sm) 0;
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-lg);
  font-weight: 600;
  color: var(--vr-burgund);
}

.feier-still__text p {
  margin: 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
}

/* Auf schmalen Geräten untereinander, Bild zuerst. */
@media (max-width: 640px) {
  .feier-still { grid-template-columns: 1fr; gap: var(--vr-space-lg); }
}