/* Platz sichern, Unterkunft, Sponsoren und Grußwort. */

/*
 * V3 hat die beiden gerahmten Flächen GETAUSCHT: „Platz sichern" steht auf
 * Hellgrau, „Unterkunft" auf Dunkelgrün. Deshalb wandern Rahmen- und
 * Titelfarbe mit der Sektion und stehen nicht mehr auf `currentcolor` —
 * der Rahmen auf Grau ist #565656 und nicht Schwarz.
 */
.invitation-tickets {
  padding: 38px 13px 34px;
  background: #e5e5e5;
  color: #000;
}

.invitation-framed {
  padding: 0 24px 31px;
  border: 1px solid currentcolor;
  text-align: center;
}

/*
 * Aus dem Entwurf abgelesen: Poppins Bold, Sperrung 6,6 px auf 22 px (mobil)
 * und 9 px auf 30 px (Desktop) — beide 0,3 em —, Durchschuss 75 px. Der
 * negative obere Rand hängt am Durchschuss, nicht an der Schriftgröße: Die
 * Tinte soll auf der oberen Rahmenlinie liegen, also muss der Kasten seine
 * halbe Zeilenhöhe darüber beginnen.
 *
 * Der rechte Innenabstand ist um die Sperrung kleiner, weil CSS sie auch
 * HINTER das letzte Zeichen setzt: ohne den Ausgleich stünde die Tinte im
 * zentrierten Kasten um die halbe Sperrung nach links versetzt. `nowrap`
 * gehört dazu — Chromium rechnet die Sperrung hinter dem letzten Zeichen bei
 * `max-content` NICHT mit, beim Umbruch aber schon, und „Platz sichern" fiel
 * damit mobil um zwei Pixel in die zweite Zeile.
 */
.invitation-framed__title {
  width: max-content;
  max-width: calc(100% - 39px);
  margin: -38px auto 14px;
  padding-inline: 11px calc(11px - 0.3em);
  font-size: 22px;
  letter-spacing: 0.3em;
  line-height: 75px;
  white-space: nowrap;
}

.invitation-tickets__frame { border-color: #565656; }

/*
 * Die Lücke in der oberen Rahmenlinie ist im Entwurf HANDGEZEICHNET (zwei
 * Liniensegmente) und deshalb nicht aus der Titelbreite ableitbar: 267 px
 * mobil, 400 px auf dem Desktop beim Ticketblock, 227 bzw. 364 bei der
 * Unterkunft. `min-width` setzt genau diese Maße und lässt einen längeren
 * Titel trotzdem wachsen; die Tinte bleibt in beiden Fällen mittig.
 */
.invitation-tickets .invitation-framed__title {
  min-width: 267px;
  margin-bottom: 14px;
  background: #e5e5e5;
  color: #000;
}

/*
 * 660 statt der 734 des breitesten Figma-Textkastens: Der Entwurf setzt
 * Kartenpreis und Hinweis auf 660 und nur „Im Preis enthalten" auf 734.
 * Eine Spaltenbreite je Angabe wäre eine Regel über die Position; 660 für
 * alle trifft die Zeilenzahl des Entwurfs und bleibt eine Regel.
 */
.invitation-tickets__facts {
  display: grid;
  gap: 35px;
  max-width: 660px;
  margin: 0 auto;
}

.invitation-tickets__notice {
  max-width: 660px;
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.5;
}

.invitation-tickets__notice .notice { margin: 0; }

.invitation-info {
  padding: 48px 13px 35px;
  background: var(--invitation-green);
  color: #fff;
}

/*
 * Die Rahmenhöhe steht im Entwurf (393 px auf dem Telefon). Unsere
 * Kontaktzeile passt in eine Zeile, wo der Entwurf zwei bricht — ohne das
 * Mindestmaß fiele die Fläche 26 px niedriger aus als gezeichnet.
 */
.invitation-info__frame {
  min-height: 393px;
  padding-bottom: 25px;
  border-color: rgb(255 255 255 / 60%);
}

.invitation-info .invitation-framed__title {
  min-width: 227px;
  margin-bottom: 12px;
  background: var(--invitation-green);
  color: #fff;
}

.invitation-info__content { display: grid; }

.invitation-info__image {
  display: block;
  width: 100%;
  max-height: 357px;
  margin-bottom: 30px;
  object-fit: cover;
}

.invitation-info__text {
  font-size: 15px;
  line-height: 27px;
}

.invitation-info__facts {
  display: grid;
  gap: 23px;
  max-width: 660px;
  margin: 24px auto 0;
}

.invitation-tickets .invitation-button {
  width: 171px;
  margin-top: 31px;
}

.invitation-info .invitation-button { margin-top: 32px; }

@media (min-width: 800px) {
  .invitation-tickets { padding: 75px 32px 37px; }

  .invitation-framed { padding: 0 60px 42px; }

  .invitation-framed__title {
    padding-inline: 32px calc(32px - 0.3em);
    font-size: 30px;
  }

  .invitation-tickets .invitation-framed__title {
    min-width: 400px;
    margin-bottom: 29px;
  }

  .invitation-tickets__facts { gap: 47px; }

  .invitation-tickets .invitation-button {
    width: 200px;
    margin-top: 23px;
    padding-inline: 6px;
  }

  .invitation-info { padding: 77px 32px 42px; }

  /* Desktop hat seinen eigenen Rahmen aus dem Entwurf — sonst schlüge das
     Mindestmaß der Telefonfassung (393) hier mit +29 px durch. Der untere
     Innenabstand ist im Entwurf 41 statt 42 px. */
  .invitation-info__frame {
    min-height: 364px;
    padding-bottom: 40px;
  }

  .invitation-info .invitation-framed__title {
    min-width: 364px;
    margin-bottom: 50px;
  }

  .invitation-info__image {
    max-width: 489px;
    margin-inline: auto;
  }

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

  /*
   * Zwei Spalten für die ersten beiden Angaben, alles Weitere über die volle
   * Breite. Der Entwurf setzt Zimmerpreise und Stichwort nebeneinander und
   * die Kontaktzeile darunter quer — als Regel über die Position statt über
   * einen dritten Sektionstyp, damit eine vierte Angabe nicht bricht.
   */
  .invitation-info__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 43px 23px;
    max-width: 660px;
    margin-top: 37px;
  }

  .invitation-info__facts > :nth-child(n + 3) { grid-column: 1 / -1; }

  .invitation-info .invitation-button { margin-top: 43px; }

}