/* =========================================================================
   EVENT — eigenes Erscheinungsbild für die Einladungsseiten
   -------------------------------------------------------------------------
   Diese Datei ist der einzige Ort auf der Website, an dem NICHT die
   Markenfarben von Investmentorin gelten.

   WARUM EINE EIGENE PALETTE

   Aus dem Briefing: „Die Seite soll hochwertig, persönlich und
   zurückhaltend wirken und nicht wie ein Finanzseminar oder eine
   klassische Verkaufsseite." Dazu eine feste Farbliste: Espresso, Creme,
   Champagner, Taupe, Salbeigrün. Und ausdrücklich: „kein Rosa, keine
   Girlboss Ästhetik".

   Der Abend wird von zwei Frauen gemeinsam veranstaltet. Eine Seite im
   Orange von Investmentorin würde Christine Hahn zur Gastautorin auf
   Nicolas Seite machen. Die eigene Palette stellt beide gleich.

   WAS TROTZDEM GEERBT WIRD

   style.css und brand.css werden weiter geladen: Schriftarten,
   Grundraster, Knopfmechanik, Formularlogik und die Einwilligungsleiste.
   Nur die Farben und die Typografie der Einladung sind eigen. Die
   Variablen werden deshalb hier auf .event-seite umdefiniert und nicht
   global, damit Kopfzeile und Fußzeile anderer Seiten unberührt bleiben.
   ========================================================================= */

.event-seite {
  --espresso:   #201A17;
  --ev-creme:   #F7F0E6;
  --champagner: #C9A36A;
  --taupe:      #8C7464;
  --salbei:     #6E7566;

  --ev-weiss:   #FCFAF6;
  --ev-linie:   rgba(32, 26, 23, 0.12);
  --ev-text:    #3B322C;

  background: var(--ev-creme);
  color: var(--ev-text);
  font-family: var(--sans);
}

.event-seite .container { width: min(100% - 40px, 1120px); margin-inline: auto; }

/* Die Serifenschrift trägt den Eventnamen und die Abschnittstitel.
   Playfair Display ist bereits geladen, eine zweite Schriftfamilie
   würde die Seite nur langsamer machen. */
.event-seite h1, .event-seite h2, .event-seite h3, .event-seite .ev-name {
  font-family: var(--serif); font-weight: 400; color: var(--espresso);
}

/* =========================================================================
   0 · DER SPRUNGLINK
   -------------------------------------------------------------------------
   „Zum Inhalt springen" stand gut sichtbar über der Seite. Der Link
   gehört dort hin, aber nur für die Tastatur: Wer sich ohne Maus
   bewegt, überspringt damit die Kopfzeile. Für alle anderen ist er ein
   loser Satz über dem Titel.

   Zu dieser Fassung gekommen ist es, weil der Link im HTML stand, die
   dazugehörige Regel aber nie geschrieben wurde. Ohne CSS ist ein
   Sprunglink einfach ein Link, und genau so sah er aus.

   Nicht display:none: Damit wäre er auch für die Tastatur weg und
   hätte gar keinen Zweck mehr. Stattdessen liegt er außerhalb des
   Bildes und kommt beim Anspringen hervor.
   ========================================================================= */

.event-seite .skip-link {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; overflow: hidden;
}
.event-seite .skip-link:focus,
.event-seite .skip-link:focus-visible {
  left: 16px; top: 16px; z-index: 100;
  width: auto; height: auto; overflow: visible;
  background: var(--espresso); color: var(--ev-weiss);
  padding: 12px 20px; border-radius: 999px;
  font-size: 0.9rem; text-decoration: none;
}

/* =========================================================================
   1 · KOPFZEILE
   -------------------------------------------------------------------------
   Aus dem Briefing: „Kein vollständiger Website-Header mit vielen
   Menüpunkten. Nur Logos beziehungsweise Namen der Gastgeberinnen und
   ein gut sichtbarer Anmeldebutton."
   ========================================================================= */

.ev-kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(20px, 5vw, 56px);
  background: rgba(247, 240, 230, 0.94);
  border-bottom: 1px solid var(--ev-linie);
}
@supports (backdrop-filter: blur(8px)) {
  /* Nur hier zulässig: Die Kopfzeile der Einladung enthält kein
     position:fixed. Im Hauptmenü der Website hat genau dieses
     backdrop-filter einmal das mobile Menü zerstört, siehe
     css/navigation.css. */
  .ev-kopf { backdrop-filter: blur(8px); }
}
.ev-kopf-namen {
  font-family: var(--serif); font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.08rem);
  color: var(--espresso); letter-spacing: 0.01em;
}
.ev-kopf-namen span { color: var(--taupe); }

/* =========================================================================
   2 · KNÖPFE
   ========================================================================= */

.ev-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  padding: 15px 28px; min-height: 52px;
  border-radius: 100px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.ev-btn-haupt { background: var(--espresso); color: var(--ev-creme); }
.ev-btn-haupt:hover { background: #2E2521; transform: translateY(-1px); }
.ev-btn-linie { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.ev-btn-linie:hover { background: var(--espresso); color: var(--ev-creme); }
.ev-btn-klein { padding: 11px 20px; min-height: 44px; font-size: 0.88rem; }
.ev-btn:focus-visible { outline: 3px solid var(--champagner); outline-offset: 3px; }

/* =========================================================================
   3 · ABSCHNITTE
   -------------------------------------------------------------------------
   Derselbe Abstandsgedanke wie in css/themenwelt.css: drei Stufen, und
   der Abstand entsteht zwischen Geschwistern, nie am Baustein selbst.
   ========================================================================= */

.event-seite {
  --ev-luft-s: clamp(12px, 1.2vw, 18px);
  --ev-luft-m: clamp(22px, 2.2vw, 32px);
  --ev-luft-l: clamp(32px, 3.4vw, 48px);
}

.ev-abschnitt { padding: clamp(56px, 6.5vw, 104px) 0; }
.ev-abschnitt.ist-weiss { background: var(--ev-weiss); }
/* Der ehemals dunkle Abschnitt. Er heißt weiterhin 'ist-dunkel', weil
   die Klasse im Markup steht, ist jetzt aber der wärmste Ton der Seite:
   ein sattes Sandbeige mit Espresso-Schrift. Damit bleibt der
   Abschlussblock deutlich abgesetzt, ohne dass die Seite am Ende
   zuklappt. */
.ev-abschnitt.ist-dunkel {
  background: linear-gradient(170deg, #F2E6D2 0%, #EFE0CB 100%);
  color: var(--ev-text);
}
.ev-abschnitt.ist-dunkel h2, .ev-abschnitt.ist-dunkel h3 { color: var(--espresso); }

.ev-abschnitt .container > * + * { margin-top: var(--ev-luft-l); }
.ev-abschnitt .container > .ev-text + .ev-text { margin-top: var(--ev-luft-s); }
.ev-abschnitt .container > .ev-klein { margin-top: var(--ev-luft-s); }

.ev-kopfzeile { max-width: 640px; margin: 0; }
.ev-kopfzeile h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.3vw, 2.2rem);
  line-height: 1.22; margin: 0 0 var(--ev-luft-s);
}
.ev-kopfzeile p {
  font-size: 1rem; line-height: 1.7; margin: 0; max-width: 58ch; color: var(--taupe);
}

.ev-text { font-size: 1.02rem; line-height: 1.78; max-width: 62ch; margin: 0; }
.ev-klein { font-size: 0.82rem; line-height: 1.6; color: var(--taupe); max-width: 70ch; margin: 0; }

/* Die kleine Auszeichnung über einer Überschrift. */
.ev-label {
  display: inline-block;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagner);
}

/* =========================================================================
   4 · HERO
   ========================================================================= */

/* WARUM DER KOPF HELL IST

   Die erste Fassung hatte einen tiefdunklen Hintergrund mit goldener
   Schrift. Rubens Rückmeldung dazu war eindeutig: „Schwarz-Gold, das
   hat so ein bisschen DVAG-Vibes." Er hat recht. Dunkel plus Gold ist
   die Bildsprache von Finanzvertrieb und Premiumversprechen, und genau
   davon soll dieser Abend sich unterscheiden.

   Eine Einladung zu einem Abend unter Frauen sieht anders aus: hell,
   warm, offen. Hochwertig entsteht hier über Weißraum, eine ruhige
   Serifenschrift und einen einzigen zurückhaltenden Akzent, nicht über
   Kontrast. */
.ev-hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px);
  background: var(--ev-creme);
  color: var(--ev-text);
  text-align: center;
  overflow: hidden;
}
/* Ein sehr weicher warmer Schein nach oben, kaum sichtbar. Er gibt dem
   Kopf Tiefe, ohne dass irgendwo eine Kante entsteht. */
.ev-hero::before {
  content: ''; position: absolute; inset: -40% 5% auto; height: 130%;
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 163, 106, 0.2), transparent 64%);
  pointer-events: none;
}
.ev-hero .container { position: relative; }

.ev-name {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  line-height: 1.02; letter-spacing: 0.06em;
  color: var(--espresso); margin: 18px 0 0;
}
.ev-unterzeile {
  font-family: var(--serif-lesbar, var(--serif)); font-style: italic;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.5rem);
  color: var(--taupe); margin: 10px 0 0;
}
.ev-hero .ev-untertitel {
  font-family: var(--sans); font-size: clamp(0.98rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.7; max-width: 46ch; margin: var(--ev-luft-m) auto 0;
  color: var(--ev-text);
}

/* Eine dünne Linie über und unter den Eckdaten statt eines Kastens.
   Trennt, ohne einen Block zu bauen. */
.ev-eckdaten {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin: var(--ev-luft-m) 0 0; padding: 18px 0;
  border-top: 1px solid var(--ev-linie); border-bottom: 1px solid var(--ev-linie);
  font-family: var(--sans); font-size: 0.98rem; color: var(--espresso);
}
.ev-eckdaten span { display: inline-flex; align-items: center; gap: 9px; }
.ev-hero .ev-btn-haupt { margin-top: var(--ev-luft-l); }
.ev-hero .ev-klein { margin: 16px auto 0; text-align: center; }

/* =========================================================================
   5 · ZITAT
   ========================================================================= */

.ev-zitat {
  border-left: 3px solid var(--champagner);
  padding: 6px 0 6px clamp(20px, 3vw, 34px);
  max-width: 54ch;
}
.ev-zitat p {
  font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.7rem);
  line-height: 1.42; color: var(--espresso); margin: 0;
}

/* =========================================================================
   6 · LISTE „DAS ERWARTET DICH"
   ========================================================================= */

.ev-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.ev-liste li {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--ev-weiss); border: 1px solid var(--ev-linie);
  border-radius: 14px; padding: 16px 20px;
  font-size: 1rem; line-height: 1.55;
}
.ev-abschnitt.ist-weiss .ev-liste li { background: var(--ev-creme); }
.ev-liste li span { font-size: 1.2rem; line-height: 1.3; flex: none; }

/* =========================================================================
   7 · ABLAUF
   ========================================================================= */

.ev-ablauf { display: grid; gap: 0; max-width: 780px; }
.ev-ablauf-zeile {
  display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 32px);
  padding: 18px 0;
  border-bottom: 1px solid var(--ev-linie);
}
.ev-ablauf-zeile:last-child { border-bottom: 0; }
.ev-ablauf-zeit {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  color: var(--champagner); letter-spacing: 0.02em; padding-top: 2px;
}
.ev-ablauf-text { font-size: 1rem; line-height: 1.6; }

@media (max-width: 560px) {
  .ev-ablauf-zeile { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

/* =========================================================================
   8 · GASTGEBERINNEN
   -------------------------------------------------------------------------
   Aus dem Briefing: „Die Bilder sollten optisch gleichwertig, ähnlich
   groß und auf Mobilgeräten untereinander dargestellt werden."
   Deshalb ein festes Seitenverhältnis und object-fit: cover. So kann
   kein Bild verzerren, egal welche Datei später geliefert wird.
   ========================================================================= */

.ev-gastgeberinnen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 48px); }
.ev-person { display: flex; flex-direction: column; gap: var(--ev-luft-m); }
.ev-person-bild {
  aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: var(--taupe);
  display: grid; place-items: center;
}
.ev-person-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
/* Solange kein Portrait vorliegt, stehen hier die Initialen auf einer
   ruhigen Fläche. Besser als ein kaputtes Bildsymbol und besser als ein
   Stockfoto. */
.ev-person-platzhalter {
  font-family: var(--serif); font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  color: rgba(247, 240, 230, 0.72); letter-spacing: 0.08em;
}
.ev-person h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); margin: 0 0 6px; }
.ev-person-rolle { font-family: var(--sans); font-size: 0.9rem; color: var(--champagner); margin: 0 0 var(--ev-luft-s); }
.ev-person p { font-size: 0.98rem; line-height: 1.72; margin: 0; }
.ev-person-link {
  display: inline-block; margin-top: var(--ev-luft-s);
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  color: var(--espresso); text-decoration: none;
  border-bottom: 1.5px solid var(--champagner); padding-bottom: 2px;
}
.ev-person-link:hover { color: var(--taupe); }

@media (max-width: 720px) { .ev-gastgeberinnen { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   8b · EIN HERVORGEHOBENER ABSATZ
   -------------------------------------------------------------------------
   Für den einen Satz, auf den es in einem Abschnitt ankommt. Hier: dass
   der Abend nach den Impulsen erst richtig anfängt.
   ========================================================================= */

.ev-gross {
  font-family: var(--serif); font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.65rem);
  line-height: 1.45; color: var(--espresso); max-width: 34ch; margin: 0;
}

/* =========================================================================
   8c · BILDER DER LOCATION
   -------------------------------------------------------------------------
   Eines groß, zwei klein. Feste Seitenverhältnisse, damit nichts
   verzerrt und die Plätze auch ohne Fotos stehen.
   ========================================================================= */

.ev-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.ev-bild { margin: 0; border-radius: 16px; overflow: hidden; position: relative; background: #E7D9C6; }
.ev-bild.ist-gross { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ev-bild:not(.ist-gross) { aspect-ratio: 4 / 3; }
.ev-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ev-bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: var(--sans); font-size: 0.82rem; line-height: 1.45;
  color: var(--ev-creme); padding: 28px 16px 14px;
  background: linear-gradient(to top, rgba(32, 26, 23, 0.72), transparent);
}
/* Ohne Foto: ruhige Fläche, Text mittig und dunkel statt auf Verlauf. */
.ev-bild.ist-leer { background: linear-gradient(145deg, #F1E4D1 0%, #E4D2B8 100%); display: grid; place-items: center; }
.ev-bild.ist-leer::after {
  content: ''; position: absolute; inset: 12px; border: 1px solid rgba(32, 26, 23, 0.14); border-radius: 10px;
}
.ev-bild.ist-leer figcaption {
  position: static; background: none; color: var(--taupe); text-align: center;
  padding: 20px; max-width: 24ch;
}

@media (max-width: 560px) {
  .ev-bilder { grid-template-columns: minmax(0, 1fr); }
  .ev-bild.ist-gross { grid-column: auto; }
}

/* =========================================================================
   8d · DIE KARTE
   -------------------------------------------------------------------------
   Vor dem Klick eine Fläche mit Hinweis und Knopf, danach der Rahmen.
   Beides in derselben Hülle, damit die Seite beim Laden nicht springt.
   ========================================================================= */

.ev-karte {
  aspect-ratio: 16 / 9; max-width: 900px;
  border: 1.5px solid var(--ev-linie); border-radius: 16px; overflow: hidden;
  background: linear-gradient(145deg, #F1E4D1 0%, #E4D2B8 100%);
}
.ev-karte-vorschau {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: clamp(20px, 3vw, 40px);
}
.ev-karte-vorschau p { margin: 0; max-width: 42ch; }
.ev-karte-vorschau strong { font-family: var(--serif); font-size: 1.1rem; color: var(--espresso); }
.ev-karte-vorschau .ev-btn { margin-top: 6px; }
.ev-karte.ist-geladen { background: none; }
.ev-karte iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================================
   9 · ORT
   ========================================================================= */

.ev-ort { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 44px); align-items: center; }
.ev-ort-adresse { font-style: normal; font-size: 1.02rem; line-height: 1.7; }
.ev-ort-adresse strong { display: block; font-family: var(--serif); font-size: 1.25rem; color: var(--espresso); margin-bottom: 4px; }
@media (max-width: 720px) { .ev-ort { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   10 · FAQ
   -------------------------------------------------------------------------
   Als <details>, damit es ohne JavaScript funktioniert und per Tastatur
   bedienbar ist.
   ========================================================================= */

.ev-faq { display: grid; gap: 10px; max-width: 820px; }
.ev-faq details {
  background: var(--ev-weiss); border: 1px solid var(--ev-linie); border-radius: 14px;
}
.ev-abschnitt.ist-weiss .ev-faq details { background: var(--ev-creme); }
.ev-faq summary {
  cursor: pointer; list-style: none; padding: 17px 22px; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600; color: var(--espresso);
}
.ev-faq summary::-webkit-details-marker { display: none; }
.ev-faq summary::after { content: '+'; font-size: 1.3rem; color: var(--champagner); flex: none; line-height: 1; }
.ev-faq details[open] summary::after { content: '–'; }
.ev-faq summary:focus-visible { outline: 3px solid var(--champagner); outline-offset: -3px; border-radius: 14px; }
.ev-faq-antwort { padding: 0 22px 19px; font-size: 0.97rem; line-height: 1.7; margin: 0; }

/* =========================================================================
   11 · FORMULAR
   -------------------------------------------------------------------------
   Einspaltig, große Felder, sichtbare Beschriftungen. Aus dem Briefing:
   „barrierearme Kontraste, beschriftete Formularfelder, sichtbare
   Fehlermeldungen und Bedienbarkeit per Tastatur".
   ========================================================================= */

.ev-formular { max-width: 640px; display: grid; gap: var(--ev-luft-m); }
.ev-feld { display: grid; gap: 7px; }
.ev-feld label { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; color: var(--espresso); }
.ev-feld .ev-pflicht { color: var(--champagner); }
.ev-feld input, .ev-feld select, .ev-feld textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ev-text);
  background: var(--ev-weiss); border: 1.5px solid var(--ev-linie);
  border-radius: 12px; padding: 14px 16px; min-height: 52px; width: 100%;
  transition: border-color 0.2s ease;
}
.ev-feld textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.ev-feld input:focus, .ev-feld select:focus, .ev-feld textarea:focus {
  outline: none; border-color: var(--champagner); box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.22);
}
.ev-feld .ev-hinweis { font-size: 0.82rem; color: var(--taupe); }

/* Die Teilnahmeauswahl. Zwei große Flächen statt zweier kleiner
   Radiopunkte: Das ist die wichtigste Entscheidung auf der Seite. */
.ev-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ev-wahl label {
  display: flex; align-items: center; gap: 12px;
  background: var(--ev-weiss); border: 1.5px solid var(--ev-linie);
  border-radius: 14px; padding: 17px 20px; min-height: 60px;
  cursor: pointer; font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ev-wahl input { width: 20px; height: 20px; min-height: 0; flex: none; accent-color: var(--espresso); }
.ev-wahl label:has(input:checked) { border-color: var(--espresso); background: var(--ev-creme); }
.ev-wahl label:focus-within { outline: 3px solid var(--champagner); outline-offset: 2px; }
@media (max-width: 560px) { .ev-wahl { grid-template-columns: minmax(0, 1fr); } }

/* Einwilligungen. Pflicht und Freiwilliges sind optisch getrennt,
   damit niemand das eine für das andere hält. */
.ev-einwilligung { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9rem; line-height: 1.6; }
.ev-einwilligung input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--espresso); }
.ev-einwilligung a { color: var(--espresso); text-decoration: underline; }

/* Fehlermeldungen. Nicht nur rot: Farbe allein ist keine Information. */
.ev-fehler {
  display: none; align-items: flex-start; gap: 9px;
  font-size: 0.88rem; line-height: 1.5; color: #8C2F1D;
}
.ev-fehler.ist-sichtbar { display: flex; }
.ev-feld.hat-fehler input, .ev-feld.hat-fehler select, .ev-feld.hat-fehler textarea { border-color: #8C2F1D; }

/* Der Honigtopf. Menschen sehen ihn nicht, Formularroboter füllen ihn
   aus. Datensparsamer als ein Captcha eines Drittanbieters, so wie im
   Briefing gewünscht. */
.ev-honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.ev-status {
  display: none; border-radius: 14px; padding: 18px 22px;
  font-size: 0.95rem; line-height: 1.6;
}
.ev-status.ist-sichtbar { display: block; }
.ev-status.ist-fehler { background: rgba(140, 47, 29, 0.08); border: 1px solid rgba(140, 47, 29, 0.3); color: #7A2818; }
.ev-status.ist-hinweis { background: rgba(201, 163, 106, 0.14); border: 1px solid rgba(201, 163, 106, 0.4); }

/* =========================================================================
   12 · ABSCHLUSS UND FUSSZEILE
   ========================================================================= */

.ev-abschluss { text-align: center; }
.ev-abschluss .ev-claim {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  line-height: 1.3; color: var(--espresso); margin: 0 auto; max-width: 20ch;
}
.ev-abschluss p { margin: var(--ev-luft-m) auto 0; max-width: 40ch; }
.ev-signatur { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--taupe); }

.ev-fuss {
  background: var(--ev-weiss); color: var(--taupe);
  border-top: 1px solid var(--ev-linie);
  padding: 32px 0; font-size: 0.85rem;
}
.ev-fuss .container { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.ev-fuss a { color: var(--espresso); text-decoration: none; border-bottom: 1px solid var(--ev-linie); }
.ev-fuss a:hover { color: var(--taupe); border-bottom-color: var(--champagner); }

/* =========================================================================
   13 · DANKESEITEN
   ========================================================================= */

.ev-danke { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: clamp(80px, 12vw, 160px) 0; }
.ev-danke h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); line-height: 1.16; margin: var(--ev-luft-m) 0 0; }
.ev-danke p { max-width: 46ch; margin: var(--ev-luft-m) auto 0; line-height: 1.75; }
.ev-danke .ev-btn { margin-top: var(--ev-luft-l); }
.ev-danke-eckdaten {
  margin: var(--ev-luft-l) auto 0; max-width: 420px;
  background: var(--ev-weiss); border: 1px solid var(--ev-linie); border-radius: 18px;
  padding: 24px 28px; text-align: left; display: grid; gap: 10px;
}
.ev-danke-eckdaten div { display: flex; gap: 12px; font-size: 0.96rem; line-height: 1.5; }
.ev-danke-eckdaten span:first-child { flex: none; }

/* =========================================================================
   14 · DIE ÖFFENTLICHE ÜBERSICHT
   -------------------------------------------------------------------------
   Diese Seite trägt die normale Kopf- und Fußzeile der Website und
   deshalb auch die Markenfarben. Sie bekommt hier nur ihre eigenen
   Bausteine, nicht die Eventpalette.
   ========================================================================= */

/* -------------------------------------------------------------------------
   KACHELN FÜR KOMMENDE ABENDE
   -------------------------------------------------------------------------
   Ruben: „Kommende Abende, da kannst du dann so Kacheln einfügen, also
   zum Beispiel den von Stuttgart. Und dann würde ich oben so ein Bild
   reinmachen, zum Beispiel im Lennarts Stuttgart am 3.11., dann das
   Thema darunter."

   Die Bildfläche hat ein festes Seitenverhältnis. Damit kann kein Foto
   verzerren, egal welche Datei später kommt, und die Kacheln stehen
   auch dann auf einer Linie, wenn eine noch ohne Bild ist.
   ------------------------------------------------------------------------- */

.ev-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); }
@media (max-width: 760px) { .ev-kacheln { grid-template-columns: minmax(0, 1fr); } }

.ev-kachel {
  display: flex; flex-direction: column;
  background: var(--white); border: 1.5px solid rgba(90, 60, 35, 0.1);
  border-radius: var(--r, 18px); overflow: hidden;
}
.ev-kachel.ist-vergangen { opacity: 0.72; }

.evk-bild { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: #EFE3D2; }
.evk-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Der Platzhalter. Warme Fläche, Stadtname groß, Datum darunter.
   Sieht gestaltet aus statt nach fehlendem Bild, und er verschwindet,
   sobald in inhalte/events.js ein 'bild' eingetragen wird. */
.evk-bild.ist-platzhalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(145deg, #F4E7D4 0%, #E9D6BC 55%, #DFC7A9 100%);
  text-align: center; padding: 20px;
}
.evk-bild.ist-platzhalter::after {
  content: ''; position: absolute; inset: 14px; border: 1px solid rgba(32, 26, 23, 0.16); border-radius: 10px;
  pointer-events: none;
}
.evk-stadt {
  font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  letter-spacing: 0.08em; color: #201A17; line-height: 1.1;
}
.evk-datum {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #6B5847;
}

.evk-inhalt { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 28px); flex: 1 1 auto; }
.evk-zeile {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-dark); margin: 0;
}
.ev-kachel h3 { font-family: var(--serif); font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem); color: var(--charcoal); margin: 0; line-height: 1.3; }
.evk-ort { font-family: var(--sans); font-size: 0.88rem; color: var(--warm-grey); margin: 0; }
.evk-text { font-family: var(--sans); font-size: 0.94rem; line-height: 1.65; color: #5F4E42; margin: 0; flex: 1 1 auto; }

.evk-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding-top: 12px; margin-top: 4px; border-top: 1px solid rgba(90, 60, 35, 0.1);
}
.evk-hinweis { font-family: var(--sans); font-size: 0.84rem; color: var(--warm-grey); display: inline-flex; align-items: center; gap: 7px; }
.evk-link {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
  color: var(--orange-dark); text-decoration: none;
}
.evk-link:hover { text-decoration: underline; }

/* Das Formular der Einladungsliste steht auf einer Seite mit normaler
   Kopfzeile, also außerhalb von .event-seite. Es braucht die
   Formularvariablen deshalb hier noch einmal. */
#evListeFormular {
  --espresso: #3A2C22;
  --ev-weiss: var(--white);
  --ev-linie: rgba(90, 60, 35, 0.14);
  --ev-text: #5F4E42;
  --taupe: var(--warm-grey);
  --champagner: var(--orange);
  --ev-luft-s: 12px; --ev-luft-m: 24px; --ev-luft-l: 36px;
}

.ev-uebersicht { display: grid; gap: 14px; }
.ev-karte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
  background: var(--white); border: 1.5px solid rgba(90, 60, 35, 0.1);
  border-radius: var(--r, 18px); padding: clamp(20px, 2.6vw, 30px);
}
.ev-karte-datum { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange-dark); }
.ev-karte h3 { font-family: var(--serif); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); margin: 6px 0 8px; color: var(--charcoal); }
.ev-karte p { font-family: var(--sans); font-size: 0.94rem; line-height: 1.65; color: #5F4E42; margin: 0; max-width: 62ch; }
.ev-karte.ist-vergangen { background: var(--offwhite); opacity: 0.78; }
@media (max-width: 640px) { .ev-karte { grid-template-columns: minmax(0, 1fr); } }

.ev-leer {
  background: var(--cream); border-radius: var(--r, 18px);
  padding: clamp(28px, 3.4vw, 44px); text-align: center;
}
.ev-leer strong { display: block; font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + 0.6vw, 1.45rem); color: var(--charcoal); margin-bottom: 10px; }
.ev-leer p { font-family: var(--sans); font-size: 0.98rem; line-height: 1.7; color: #5F4E42; margin: 0 auto; max-width: 52ch; }

/* =========================================================================
   15 · BEWEGUNG
   -------------------------------------------------------------------------
   Aus dem Briefing: „Nur dezente Einblendungen; keine Autoplay Videos
   und keine ablenkenden Effekte."
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .event-seite *, .event-seite *::before, .event-seite *::after {
    animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
  }
}