/* Gastseiten (Block 140, #355): Teil von anmeldung.css – Startseite und Eventkopf (Abschnitte 4 und 5).
   Wird auf allen Gastseiten unmittelbar nach den Vorgängerteilen geladen (anmeldung.css, anmeldung-eventkopf.css, anmeldung-schritte.css,
   anmeldung-bestaetigung.css – in dieser Reihenfolge); die Kaskade ist die der früheren einen Datei. */

/* --- 4 Startseite ------------------------------------------------------------------------------------------------- */
.gast-seite--start .gast-titel { margin-bottom: 18px; line-height: 1.1; }
.gast-seite--start .gast-lead { margin-bottom: 28px; }
#code {
  height: 60px;
  padding: 0 0 0 12px; /* gleicht den Zeichenabstand am Ende aus, damit die Eingabe mittig sitzt */
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 12px;
  text-align: center;
  text-transform: uppercase;
}
#code::placeholder { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gast-gedaempft); }
.gast-karte #code-feedback { margin: 8px 0 0; min-height: 0; text-align: center; }
#submit-btn { width: 100%; margin-top: 14px; }

/* --- 5 Eventkopf (Anmeldung und Teilnehmerliste) ------------------------------------------------------------------ */
.gast-karte .event-hero-logo { display: block; max-width: 240px; max-height: 72px; width: auto; height: auto; margin: 0 0 20px; object-fit: contain; }
.gast-karte .event-hero { margin: 0 0 4px; padding: 0; border: 0; }
.gast-karte .event-hero-description { margin: 0 0 8px; font-size: 17px; line-height: 1.55; color: var(--gast-text-2); }
.gast-karte .event-hero-description p { margin: 0 0 10px; }
.gast-karte .event-hero-description p:last-child { margin-bottom: 0; }
.gast-karte .event-facts {
  margin: 18px 0 0;
  padding: 0;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  background: none;
  border: 0;
  border-radius: 0;
}
.gast-karte .fact {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--gast-trenner);
}
.gast-karte .fact:last-child { border-bottom: 1px solid var(--gast-trenner); }
.gast-karte .fact dt { display: contents; margin: 0; font-weight: 400; color: var(--gast-gedaempft); }
.gast-karte .fact dt svg { grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; color: var(--gast-gedaempft); }
.gast-karte .fact-label { grid-column: 2; grid-row: 1; font-size: 13px; line-height: 1.3; color: var(--gast-gedaempft); }
.gast-karte .fact dd { grid-column: 2; grid-row: 2; margin: 0; color: var(--gast-text); overflow-wrap: anywhere; }
.gast-karte .fact dd.fact-fett { font-weight: 700; }
.gast-karte .event-facts a { color: var(--gast-text); text-decoration: underline; }
.gast-karte #event-veranstalter { margin: 16px 0 0; font-size: 13px; color: var(--gast-gedaempft); }

/* Kurzzeile (Eventname · Datum) – nur am Handy ab Schritt 2; aufklappbar, weiß mit Haarlinie */
.eckdaten-kurz { display: none; }
@media (max-width: 600px) {
  .gast-karte form.kompakt .eckdaten-kurz:not(.ohne-inhalt) {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin: 0 0 16px;
    padding: 8px 14px;
    background: var(--gast-karte);
    border: 1px solid var(--gast-rand);
    border-radius: var(--ecke);
    box-shadow: none;
    color: var(--gast-text);
    font-size: 15px;
    font-weight: 400;
    text-align: left;
  }
  .gast-karte form.kompakt .eckdaten-kurz:hover:not(:disabled) { background: var(--gast-karte); }
  .gast-karte form.kompakt .eckdaten-kurz-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gast-karte form.kompakt .eckdaten-kurz-text strong { font-weight: 700; }
  .gast-karte form.kompakt .eckdaten-kurz-text span { font-size: 13px; color: var(--gast-gedaempft); }
  .gast-karte form.kompakt .eckdaten-kurz-pfeil { flex: none; color: var(--gast-gedaempft); }
  .gast-karte form.kompakt.eckdaten-offen .eckdaten-kurz-pfeil { transform: rotate(180deg); }
  /* Zugeklappt: Logo, Überzeile und Eckdaten weg; die Überschrift bleibt für Screenreader erhalten. */
  .gast-karte form.kompakt .event-hero-logo,
  .gast-karte form.kompakt .anmeldung-dachzeile { display: none !important; }
  .gast-karte form.kompakt:not(.eckdaten-offen) .event-hero { display: none !important; }
  .gast-karte form.kompakt .anmeldung-titel {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .gast-karte form.kompakt .schritt-kopf { margin-top: 4px; padding-top: 0; border-top: 0; }
}