/* Sponsoren und Grußwort — abgetrennt von `invitation-sections.css`,
   weil die Datei sonst über 300 Zeilen ginge. */

/*
 * Der Entwurf trägt auf dem Telefon die Kurzform „Mehr Infos zu VETO"
 * (`96:1885`), auf dem Desktop die lange Fassung — die Beschriftung kommt
 * aber aus EINEM Feld und kann nicht je Breite wechseln. Mit der langen
 * Fassung misst die Zeile hier 318 px und passt mit den 18 px Innenabstand
 * der übrigen Knöpfe nicht in die 341 px Satzbreite: der Knopf würde über
 * die volle Breite laufen und zweizeilig werden. Ein Grad kleiner und ein
 * schmalerer Innenabstand halten ihn einzeilig und kompakt.
 */
.invitation-closing .invitation-button {
  margin-top: 32px;
  padding-inline: 12px;
  font-size: 14px;
}

.invitation-sponsors {
  padding: 63px 26px 59px;
  background: var(--invitation-light);
  text-align: center;
}

/*
 * Der negative rechte Rand gleicht die Sperrung hinter dem letzten Zeichen
 * aus (siehe `invitation.css`). Hier NICHT über `text-indent`: Der Titel
 * bricht mobil um, und ein Einzug verkürzt die erste Zeile — sie bräche
 * dann eine Silbe früher als im Entwurf.
 */
.invitation-sponsors__title {
  margin-right: -0.3em;
  font-size: 22px;
  letter-spacing: 0.3em;
  line-height: 35px;
}

.invitation-sponsors__text {
  margin-top: 8px;
  font-size: 14px;
}

.invitation-sponsors__logos {
  display: grid;
  gap: 36px;
  justify-items: center;
  margin-top: 45px;
}

/*
 * Die fünf Logos haben je eigene Maße und stehen im Entwurf von Hand, nicht
 * im Raster. Deshalb geben `width`/`height` am Bild die Desktop-Größe vor
 * und das CSS beschränkt sich darauf, sie auf schmalen Schirmen zu deckeln.
 *
 * Mobile Breiten aus Figma dYSup4WMm8KEean54s002D, Frame 96:992
 * (09.09.2026). Die Bildproportionen bleiben erhalten.
 */
.invitation-sponsors__logo {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 799px) {
  .invitation-sponsors__logo:nth-child(1) { width: 163px; }
  .invitation-sponsors__logo:nth-child(2) { width: 115px; }
  .invitation-sponsors__logo:nth-child(3) { width: 83px; }
  .invitation-sponsors__logo:nth-child(4) { width: 123px; }
  .invitation-sponsors__logo:nth-child(5) { width: 161px; }

  .invitation-sponsors__logo:nth-child(2) { margin-top: -3px; }
  .invitation-sponsors__logo:nth-child(3) { margin-top: 3px; }
  .invitation-sponsors__logo:nth-child(4) { margin-top: 31px; }
  .invitation-sponsors__logo:nth-child(5) { margin-top: 27px; }
}

.invitation-closing {
  padding: 33px 26px 53px;
  background: var(--invitation-green);
  color: #fff;
  text-align: center;
}

/*
 * Poppins Medium im Entwurf, nicht Regular; mobil 15 px (`96:1810`).
 *
 * `text-wrap: balance` bildet den HANDGESETZTEN Umbruch des Entwurfs nach:
 * Dort steht „Wir freuen uns, gemeinsam / am 5. November zu feiern!" in zwei
 * gleich langen Zeilen, während der Browser die erste Zeile vollschreibt und
 * „feiern!" allein stehen lässt. Das ist keine Nachbildung EINER Umbruchstelle
 * — die Regel gilt für jeden Text, den das Backend hier einsetzt.
 */
.invitation-closing__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
  text-wrap: balance;
}

.invitation-closing__text p { margin: 0; }

.invitation-closing__signature {
  max-width: 999px;
  margin: 7px auto 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}

.invitation-closing__image {
  display: block;
  width: 100%;
  max-width: 1342px;
  height: 380px;
  margin: 30px auto 0;
  object-fit: cover;
}
@media (min-width: 800px) {
  .invitation-sponsors { padding: 63px 32px 70px; }

  /* Durchschuss 75 wie bei den gerahmten Titeln (mobil bleibt es bei 35). */
  .invitation-sponsors__title {
    font-size: 30px;
    line-height: 75px;
  }
  .invitation-sponsors__text { font-size: 20px; }

  .invitation-sponsors__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 23px 251px;
    max-width: 1448px;
    margin: 9px auto 0;
  }

  .invitation-closing { padding: 68px 32px 61px; }

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

  .invitation-closing__signature {
    margin-top: 12px;
    font-size: 30px;
    line-height: 31px;
  }

  /* Der Entwurf gibt dem Text 401 der 420 px — mit den 18 px Innenabstand
     der übrigen Knöpfe bräche er hier auf zwei Zeilen um. */
  .invitation-closing .invitation-button {
    width: 420px;
    margin-top: 54px;
    padding-inline: 6px;
  }

  .invitation-closing__image { height: 539px; }
}


/*
 * Die fünf Logos stehen im Entwurf von Hand, nicht im Raster: Reihe 1 hat
 * 251 und 324 px Abstand, Reihe 2 steht 74,5 px rechts der Seitenmitte und
 * hat 212 px Abstand. Das ist nachgemessen (Taittinger 123, Hyatt 692, VW
 * 1220, DeconJet 445, Solrosa 900) und keine Ableitung; die Ränder hier
 * bilden genau diese Abweichungen vom gleichmäßigen Abstand ab.
 *
 * Erst ab 1360 px, weil darunter die 1265 px breite erste Reihe ohnehin
 * umbricht — dann gilt der gleichmäßige Abstand von oben.
 */
@media (min-width: 1360px) {
  .invitation-sponsors__logo:nth-child(3) { margin-left: 73px; }
  .invitation-sponsors__logo:nth-child(4) { margin-left: 149px; }
  .invitation-sponsors__logo:nth-child(5) { margin-left: -39px; }
}