/* Einführung und Programm der Einladung. */
.invitation-intro {
  padding: 18px 26px 35px;
  background: var(--invitation-light);
  text-align: center;
}

.invitation-intro__seal {
  display: block;
  width: 66px;
  height: 66px;
  margin: 0 auto -8px;
}

.invitation-intro__heading {
  position: relative;
}

/*
 * Die Linien liegen auf der Grundlinie des Titels, nicht auf halber Höhe:
 * im Entwurf y 648 (mobil) bzw. y 1112 (Desktop), je 48 bzw. 53 px unter der
 * Oberkante des Titelkastens.
 *
 * Die BREITE ist der Rest, nicht ein fester Wert: In der Mitte bleiben 241 px
 * für den Titel (Tinte 218 plus 12 px Luft je Seite), alles Übrige nehmen die
 * Linien. Mit festen 50 px stimmte das nur auf genau 393 px Fensterbreite —
 * dazwischen klebten zwei kurze Striche am Seitenrand, während der Titel
 * weit entfernt in der Mitte stand.
 */
.invitation-intro__heading::before,
.invitation-intro__heading::after {
  position: absolute;
  top: 48px;
  width: max(0px, calc((100% - 241px) / 2));
  border-top: 1px solid #7b7b7b;
  content: '';
}

.invitation-intro__heading::before { left: 0; }
.invitation-intro__heading::after { right: 0; }

/*
 * Aus dem Entwurf abgelesen: Poppins ExtraBold 30 px (mobil) bzw. 65 px
 * (Desktop) ohne Sperrung, Durchschuss 75 px. Der Durchschuss ist im Entwurf
 * größer als der Textkasten (17 bzw. 62 px) — er entscheidet, wo die Tinte in
 * der Zeile sitzt, und deshalb steht er hier und nicht die Kastenhöhe.
 */
.invitation-intro__title {
  font-size: 30px;
  font-weight: 800;
  line-height: 75px;
}

.invitation-intro__subtitle {
  max-width: 325px;
  margin: -47px auto 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 75px;
  text-indent: 0.09em;
  text-transform: uppercase;
}

.invitation-intro__text {
  max-width: 849px;
  margin: 2px auto 0;
  font-size: 15px;
  line-height: 31px;
}

.invitation-intro__text p { margin: 0; }

.invitation-intro__facts {
  display: grid;
  gap: 35px;
  max-width: 849px;
  margin: 37px auto 0;
}

.invitation-programme {
  padding: 18px 13px 27px;
  background: var(--invitation-green);
  color: #fff;
}

.invitation-programme__frame {
  display: flex;
  flex-direction: column;
  gap: 43px;
  min-height: 820px;
  padding: 33px 12px 37px;
  border: 1px solid rgb(255 255 255 / 60%);
}

/*
 * Aus dem Entwurf abgelesen (`96:944`): 488 × 558 mit 36 px Rand um das
 * quadratische Foto, um 5 Grad gedreht — nicht 4. Die Drehung steckt in den
 * Bounding-Boxen des Entwurfs: 488 × 558 bei 5 Grad ergibt genau die dort
 * angegebenen 534,8 × 598,4.
 */
.invitation-polaroid {
  align-self: center;
  width: min(274px, 86vw);
  padding: 20px 20px 15px;
  background: #fff;
  box-shadow: 0 4px 5px rgb(0 0 0 / 25%);
  color: #000;
  transform: rotate(5deg);
}

.invitation-polaroid__image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.invitation-polaroid__caption {
  display: grid;
  margin-top: 10px;
  font-size: 15px;
  line-height: 17px;
  text-align: center;
}

/* Mobil 15 px mit 0,22 em, im Desktop-Block 18 px mit 0,31 em. */
.invitation-polaroid__caption strong {
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}

.invitation-programme__facts {
  display: grid;
  gap: 35px;
}

@media (min-width: 800px) {
  .invitation-intro { padding: 30px 32px 60px; }

  .invitation-intro__seal {
    width: 108px;
    height: 108px;
    margin-bottom: 16px;
  }

  /* Die Linien liegen im Entwurf auf y 1112, also 53 px unter der Oberkante
     des Titelkastens — nicht auf halber Höhe. */
  .invitation-intro__heading::before,
  .invitation-intro__heading::after {
    top: 53px;
    width: calc((100% - 561px) / 2 - 54px);
  }

  .invitation-intro__heading::before { left: 54px; }
  .invitation-intro__heading::after { right: 54px; }

  .invitation-intro__title { font-size: 65px; }

  .invitation-intro__subtitle {
    max-width: 827px;
    margin-top: -15px;
    font-size: 30px;
    letter-spacing: 0.09em;
  }

  /*
   * 660 statt der 849 des Figma-Textkastens: Der Entwurf bricht nach
   * „heimatloser Tiere" um, und das tut er bei 849 px Satzbreite nicht.
   * Gemessen wird das Ergebnis, nicht die Kastenangabe.
   */
  .invitation-intro__text {
    max-width: 660px;
    margin-top: 24px;
    font-size: 18px;
    line-height: 31px;
  }

  .invitation-intro__facts {
    gap: 60px;
    margin-top: 49px;
  }

  .invitation-programme {
    min-height: 739px;
    padding: 42px 32px;
  }

  /*
   * Zwischen 800 und 1304 px geben die Spalten nach. Die Maße des Entwurfs
   * (405 + 157 + 498 plus 180 px Innenabstand) brauchen 1304 px Fenster;
   * fest gesetzt schöben sie die linke Textspalte darunter aus dem Bild.
   */
  .invitation-programme__frame {
    display: grid;
    grid-template-columns: minmax(0, 405px) minmax(0, 498px);
    gap: 0 6%;
    align-items: center;
    justify-content: center;
    min-height: 655px;
    padding: 25px 60px;
  }

  .invitation-programme__facts {
    grid-column: 1;
    grid-row: 1;
    gap: 53px;
    transform: translateY(8px);
  }

  .invitation-programme .invitation-fact { text-align: left; }
  .invitation-programme .invitation-fact__label { text-indent: 0; }

  .invitation-polaroid {
    grid-column: 2;
    justify-self: start;
    width: 488px;
    max-width: 100%;
    padding: 36px 36px 27px;
  }

  .invitation-polaroid__caption {
    margin-top: 17px;
    font-size: 18px;
    line-height: 31px;
  }

  .invitation-polaroid__caption strong {
    letter-spacing: 0.31em;
    text-indent: 0.31em;
  }
}

/*
 * Ab hier passen die Maße des Entwurfs ohne Stauchung: Angaben 405 breit ab
 * x 256, Polaroid 488 breit ab x 774.
 *
 * Die 775 sind am Bild nachgemessen, nicht aus dem Knoten abgelesen: Figmas
 * `x` für einen GEDREHTEN Knoten ist nicht die linke Kante seiner
 * Bounding-Box (dort steht 798,6, im Bild liegt sie bei 755). Die Breite
 * daneben IST die der Bounding-Box — beide Zahlen zusammen ergeben eine
 * Karte, die es nicht gibt.
 *
 * `padding-left` und `gap` hängen zusammen, weil die Spuren mittig im
 * Rahmen stehen: 76 px links setzen die Angaben auf 256, die 113 px Spalte
 * dazwischen setzen das Polaroid auf 774.
 */
@media (min-width: 1304px) {
  .invitation-programme__frame {
    gap: 0 113px;
    padding-left: 76px;
  }
}