/* Gemeinsames Gerüst der langen Einladungsseite; mobil zuerst. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.invitation-page {
  --invitation-green: #13372d;
  --invitation-light: #f6f6f6;
  color: #000;
  font-family: var(--schrift);
}

/* `margin-block` allein lässt die 40 px seitlichen Ränder stehen, die der
   Browser einem `<figure>` gibt — das Polaroid stand damit 40 px zu weit
   rechts im Programmrahmen. */
:where(.invitation-page) p,
:where(.invitation-page) dl,
:where(.invitation-page) figure {
  margin: 0;
}

/*
 * ZUR SPERRUNG, für alles Gesperrte auf dieser Seite: CSS setzt sie auch
 * HINTER das letzte Zeichen und zählt sie zur Zeilenbreite, Figma nicht.
 * Zentrierter Text steht damit um die halbe Sperrung zu weit links (4,5 px
 * bei 0,3 em auf 30 px). Ausgeglichen wird das je nach Kasten verschieden —
 * `text-indent` bei einzeiligem Text (unten bei der Beschriftung), ein
 * negativer rechter Rand beim mehrzeiligen Sponsorentitel, ein kleinerer
 * rechter Innenabstand bei den Rahmentiteln mit `max-content`-Breite. Wer
 * eine vierte gesperrte Stelle anlegt, braucht eine davon.
 */
.invitation-title,
.invitation-framed__title,
.invitation-sponsors__title {
  margin: 0;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.invitation-facts {
  margin: 0;
}

.invitation-fact {
  text-align: center;
}

/*
 * Eine Angabe OHNE Beschriftung — im Entwurf die Zimmerpreise unter
 * „Unterkunft". Das `<dt>` bleibt im Markup stehen, weil ein `<div>` in einer
 * `<dl>` ohne `<dt>` kein gültiges HTML wäre; sichtbar ist es nicht.
 */
.invitation-fact__label:empty { display: none; }

/*
 * Aus dem Entwurf abgelesen, nicht aus Tintenbreiten gelöst: Poppins Bold,
 * Sperrung 5,27 px auf 17 px (mobil) und 5,58 px auf 18 px (Desktop) — beide
 * 0,31 em —, Zeilenhöhe 31 px. Nur der Wert darunter wird mobil kleiner.
 */
.invitation-fact__label {
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.31em;
  line-height: 31px;
  text-indent: 0.31em;
  text-transform: uppercase;
}

.invitation-fact__value {
  margin: 0;
  font-size: 15px;
  line-height: 27px;
}

.invitation-fact__value p,
.invitation-fact__value ul,
.invitation-fact__value ol {
  margin: 0;
}

.invitation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  margin-top: 24px;
  padding: 3px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 31px;
  max-width: 100%;
  text-decoration: none;
  white-space: nowrap;
}

/*
 * Die längste Beschriftung der Seite („Mehr Infos zu VETO und unseren
 * Projekten") passt auf einem 360er Gerät nicht in eine Zeile — sie darf
 * umbrechen, statt die Seite waagerecht zu schieben.
 */
.invitation-closing .invitation-button {
  text-align: center;
  white-space: normal;
}

/* Nachgemessen: Der Knopf auf der grünen Fläche ist #E5E5E5, nicht weiß. */
.invitation-button--light {
  background: #e5e5e5;
  color: #000;
}

.invitation-button--dark {
  background: var(--invitation-green);
  color: #fff;
}

.invitation-page + .site-footer {
  padding: 20px 20px 28px;
  border-top: 0;
  background: #13372d;
  font-size: 11px;
}

.invitation-page + .site-footer .site-footer__inner {
  gap: 12px;
}

.invitation-page + .site-footer .site-footer__logo {
  display: none;
}

.invitation-page :focus-visible {
  outline-color: var(--limette);
}

@media (min-width: 800px) {
  /*
   * Gemessen am V3-Frame: 18 px Fließtext auf einem 31-px-Raster. Die
   * Zeilenhöhe steht als PIXEL da, nicht als Faktor — das Raster hängt an
   * den Kastenhöhen des Entwurfs (Label 31, Wertzeile 31) und darf sich
   * nicht mit der Schriftgröße verschieben.
   */
  .invitation-fact__label {
    font-size: 18px;
    letter-spacing: 0.31em;
  }

  .invitation-fact__value {
    font-size: 18px;
    line-height: 31px;
  }

  /* 15 px mobil (`96:1873`), 18 px auf dem Desktop (`96:965`) — mit 18 px
     läuft „Jetzt Platz sichern" aus dem 171 px breiten Knopf heraus. */
  .invitation-button {
    min-height: 41px;
    font-size: 18px;
  }
}