/* Der Splash füllt die Höhe: Maskottchen und Text oben, Ladebalken unten. */
main.app-inhalt {
    padding: var(--space-8) var(--space-6) var(--space-6);
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.splash-kreis {
    width: 220px; height: 220px; border-radius: 50%; margin-top: var(--space-6);
    background: var(--primaer-200);
    display: flex; align-items: center; justify-content: center; flex: none;
}
.splash-kreis img { width: 170px; height: 200px; object-fit: contain; display: block; }

/* `balance` statt fester <br>-Umbruch: jede Uebersetzung ist anders lang. */
.splash-titel { font-size: 38px; line-height: 1.05; margin-top: var(--space-6);
                text-wrap: balance; max-width: 14ch; }
.splash-text { font-size: 17px; color: var(--text-66); max-width: 26ch; margin: var(--space-3) 0 0; }

/* Event-Block (Baustein 2): Titel groß in der Überschriftenschrift, Datum
   und Motto darunter. Nur im Markup, wenn der Betreiber etwas eingetragen hat. */
.event-block { margin-top: var(--space-4); max-width: 24ch; }
.event-titel { font-size: 26px; line-height: 1.15; margin: 0; text-wrap: balance;
               overflow-wrap: anywhere; }
.event-datum { font-size: 16px; font-weight: 600; color: var(--text-66); margin: var(--space-1) 0 0; }
.event-motto { font-size: 16px; font-style: italic; color: var(--text-66); margin: var(--space-1) 0 0;
               text-wrap: balance; overflow-wrap: anywhere; }

.ort-pille {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-6); padding: var(--space-2) var(--space-4);
    border-radius: 999px; background: var(--sage-200); color: var(--sage-800);
    font-size: 15px; font-weight: 600;
}

/* Unterer Rand: auf niedrigen Bildschirmen rückt das Formular (margin-top:auto)
   sonst direkt an die Weltkugel. */
.sprachwahl-mitte { margin: var(--space-3) 0 var(--space-6); }
.splash-hinweis { font-size: 14px; color: var(--text-55); margin: var(--space-2) 0 0; }