/* ====================================================================
   Eventseiten · gemeinsame Grundlage aller Vorlagen

   Hier steht NUR, was jede Vorlage gleich braucht: Zurücksetzen,
   Zugänglichkeit, Formularverhalten, Bildmaße, das Ruhebedürfnis.
   Die Handschrift steht in vorlage-<name>.css.

   DIE TRENNLINIE: Alles hier ist farblos. Kein Farbwert, keine
   Schriftfamilie, keine Rundung. Was eine Vorlage ausmacht, steht in
   ihrer eigenen Datei · sonst sähen am Ende alle drei gleich aus,
   nur mit anderer Grundfarbe.

   Die Vorlagen setzen dafür diese Variablen:
     --grund --grund-2 --schrift --schrift-2 --linie
     --akzent --akzent-text --auf-akzent
     --schrift-anzeige --schrift-text
     --ecke --ecke-gross
   ==================================================================== */

/* == 01 · Zurücksetzen ============================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, address, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--akzent); color: var(--auf-akzent); }

.sprungmarke {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: 0.8rem 1.4rem;
  background: var(--schrift);
  color: var(--grund);
  border-radius: var(--ecke);
}
.sprungmarke:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--akzent-text);
  outline-offset: 3px;
}

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* == 02 · Das Demoband ============================================== */

.demoband {
  padding: 0.65rem var(--rand, 1.25rem);
  background: #141414;
  color: #f5f5f5;
  font-family: system-ui, sans-serif;
  font-size: 0.875rem;
  text-align: center;
}
.demoband a { color: #d9b64a; }

/* == 03 · Countdown ================================================= */

.ev-countdown-satz {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.ev-countdown-zahl {
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 4.5rem);
  line-height: 1;
  color: var(--akzent-text);
  font-variant-numeric: tabular-nums;
}
.ev-countdown-wort { font-size: 1.05rem; color: var(--schrift-2); }
.ev-countdown-fein {
  margin-top: 0.2rem;
  color: var(--schrift-2);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* == 04 · Termin und Ort ============================================ */

.ev-termin-tag { color: var(--schrift-2); }
.ev-termin-datum { font-family: var(--schrift-anzeige); font-size: 1.5rem; line-height: 1.2; }
.ev-termin-zeit { color: var(--schrift-2); }

/* Ein einzelner Ort steht ohne Abstände da wie zuvor · erst ab dem
   zweiten wird gegliedert. Die Trennlinie sitzt VOR jedem Ort ausser
   dem ersten (::before am Geschwisterkind), damit unter dem letzten
   keine Linie ins Leere läuft. */
.ev-orte--mehrere .ev-ort + .ev-ort {
  margin-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  border-top: 1px solid var(--linie);
  padding-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
}

.ev-ort-rolle {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin-bottom: 0.35rem;
}

.ev-ort-name { font-weight: 600; }
.ev-ort-adresse { margin-top: 0.2rem; color: var(--schrift-2); }
.ev-ort-route { margin-top: 0.9rem; }
.ev-ort-route a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--akzent-text);
}

/* == 05 · Ablauf ==================================================== */

.ev-ablauf { list-style: none; padding: 0; }
.ev-ablauf-zeit { font-variant-numeric: tabular-nums; }
.ev-ablauf-titel { font-weight: 600; }
.ev-ablauf-satz { color: var(--schrift-2); }

/* == 06 · Hinweise ================================================== */

.ev-hinweis h3 { font-size: 1.05rem; font-weight: 600; }
.ev-hinweis p { margin-top: 0.35rem; color: var(--schrift-2); }

/* == 07 · Galerie =================================================== */

.ev-galerie-bild img {
  width: 100%;
  background: var(--grund-2);
}
.ev-galerie-bild figcaption {
  margin-top: 0.55rem;
  color: var(--schrift-2);
  font-size: 0.9375rem;
}

/* == 08 · Zu- und Absage ============================================ */

.ev-rsvp-form { display: grid; gap: 0.25rem; }

.ev-feld { margin-block: 0.9rem; }
.ev-feld label,
.ev-antwort legend {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.ev-feld input, .ev-feld textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund-2);
  color: var(--schrift);
  font: inherit;
  font-size: 1rem;
}
.ev-feld textarea { resize: vertical; line-height: 1.55; }
.ev-feld input:focus-visible, .ev-feld textarea:focus-visible {
  border-color: var(--akzent-text);
  outline: 2px solid var(--akzent-text);
  outline-offset: 2px;
}
.ev-feld-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 1.25rem;
}
.ev-feld--fehler input, .ev-feld--fehler textarea { border-color: #a8331a; }
.ev-feld-fehler { margin-top: 0.35rem; color: #a8331a; font-size: 0.9375rem; font-weight: 500; }

.ev-antwort { margin-block: 1.25rem; }
.ev-antwort-paar { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ev-antwort-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.ev-antwort-wahl label {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--ecke-gross);
  background: var(--grund-2);
  cursor: pointer;
  font-weight: 600;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.ev-antwort-wahl label:hover { border-color: var(--akzent-text); }
.ev-antwort-wahl input:checked + label {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.ev-antwort-wahl input:focus-visible + label {
  outline: 2px solid var(--akzent-text);
  outline-offset: 3px;
}

.ev-haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 0.75rem;
  align-items: start;
  margin-block: 1.25rem;
}
.ev-haken input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--akzent-text); }
.ev-haken label { font-size: 0.9375rem; line-height: 1.5; color: var(--schrift-2); }
.ev-haken .ev-feld-fehler { grid-column: 2; }

/*
 * Am Daumen gemessen, nicht an der Fensterbreite.
 *
 * Alles, was auf einer Eventseite angetippt wird, kommt auf
 * mindestens 44 Punkte Höhe. Gemessen am 17.08.2026 auf 375 Punkten:
 * Der Verweis im Kontaktblock war 22 hoch, der auf Studio Siemering
 * 34 und der auf die Datenschutzhinweise im Antwortformular 20. Mit
 * der Maus wären diese Abstände unnötig groß · deshalb hängt die
 * Regel am Zeiger und nicht an der Breite.
 *
 * inline-flex und nicht nur padding: Ein senkrechtes Polster an
 * einem Verweis im Fließsatz vergrößert die anklickbare Fläche zwar,
 * aber die Zeilen darüber und darunter überlappen dann · gemessen
 * wird die Höhe des Kastens, und die stimmt erst mit align-items.
 */
@media (pointer: coarse) {
  .ev-haken input { width: 1.45rem; height: 1.45rem; }
  .ev-haken label { padding-block: 0.25rem; }

  .ev-ort-route a,
  .ev-signatur a,
  .ev-kontakt-weg a,
  .ev-haken label a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.25rem;
  }
}

.ev-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  margin-top: 0.75rem;
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: var(--ecke-gross);
  background: var(--akzent);
  color: var(--auf-akzent);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms ease, filter 180ms ease;
}
.ev-knopf:hover { filter: brightness(0.94); }
.ev-knopf:active { transform: scale(0.98); }

.ev-rsvp-danke {
  padding: 1.5rem 1.75rem;
  border-radius: var(--ecke-gross);
  background: var(--grund-2);
  border: 1px solid var(--linie);
}
.ev-rsvp-danke-gross { font-family: var(--schrift-anzeige); font-size: 1.5rem; line-height: 1.2; }
.ev-rsvp-danke p + p { margin-top: 0.6rem; color: var(--schrift-2); }
.ev-rsvp-meldung {
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--ecke);
  border: 1px solid #a8331a;
  color: #a8331a;
}

/* Die Zusatzfelder erscheinen erst bei einer Zusage · das Skript
   setzt data-aus. Ohne Skript stehen sie da, und eine Absage mit
   ausgefüllten Essenswünschen ist kein Schaden. */
[data-nur-bei-zusage][data-aus] { display: none; }

/* == 09 · Kontakt und Fuß =========================================== */

.ev-kontakt h3 { font-family: var(--schrift-anzeige); font-size: 1.4rem; font-weight: 400; }
.ev-kontakt-wer { margin-top: 0.4rem; font-weight: 600; }
.ev-kontakt-weg { color: var(--schrift-2); }
.ev-kontakt-weg a { color: var(--akzent-text); }

.ev-signatur {
  padding: 2.5rem var(--rand, 1.25rem) 3rem;
  border-top: 1px solid var(--linie);
  text-align: center;
  color: var(--schrift-2);
  font-size: 0.875rem;
}
.ev-signatur-studio { margin-top: 0.5rem; }
.ev-signatur a { color: var(--akzent-text); font-weight: 600; }

/* Die Pflichtangaben.

   Sie stehen zuletzt und leiser als alles darüber. Sie müssen
   erreichbar sein, nicht auffallen · zwei akzentfarbene, fette Links
   am Ende einer Einladung sehen aus wie eine Aufforderung, und die
   letzte Aufforderung dieser Seite soll nicht "Datenschutz" heißen.
   Deshalb erben sie die Schriftfarbe und tragen nur die Unter-
   streichung, an der ein Verweis trotzdem erkennbar bleibt. */
.ev-signatur-recht {
  margin-top: 0.9rem;
  font-size: 0.8125rem;

  /* flex und nicht Fließtext wegen der Tippflächenregel weiter oben:
     Auf Touch wird jeder Verweis zu inline-flex mit 2,75rem Höhe. Ein
     Trennzeichen im Fließtext säße dann auf der Schriftlinie, während
     die beiden Verweise um ihre eigene Mitte zentriert sind · und
     stünde sichtbar zu tief. Mit align-items macht es die Bewegung
     mit. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 0.5rem;
}
.ev-signatur-recht a {
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* == 10 · Ruhe ====================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* == 11 · Druck ===================================================== */

/* Eine Einladung wird ausgedruckt und an den Kühlschrank gehängt.
   Dann gehören Formular, Galerie und Demoband nicht aufs Papier ·
   Datum, Ort und Ablauf schon. */
@media print {
  .ev-rsvp, .demoband, .sprungmarke, .ev-galerie { display: none; }
  body { background: #fff; color: #000; }
  .ev-signatur { border-top: 1px solid #999; }
}