/* ====================================================================
   Vorlage „Werkhalle" · sachlich und laut in der Sache

   Sichtbares Raster, Monoschrift für die Zahlen, eine Signalfarbe
   und sonst Grau.

   DAS RASTER IST DER SCHMUCK. Papierweiß lässt Linien weg, wo es
   geht; hier stehen sie sichtbar da, und das ist der ganze
   Unterschied zwischen den beiden sachlichen Vorlagen. Die Linien
   sind 1px und in einem Grau, das auf hellem Grund gerade noch als
   Linie durchgeht · zwei Pixel wären ein Rahmen.

   DIE MONOSCHRIFT LÄUFT NUR AUF ZAHLEN UND ETIKETTEN. Ganze Absätze
   in Fragment Mono lesen sich messbar langsamer, und eine Einladung
   soll gelesen und nicht entziffert werden.
   ==================================================================== */

@font-face {
  font-family: "Fragment Mono";
  src: url("../fonts/fragment-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.ev--werkhalle {
  --grund: #f6f6f4;
  --grund-2: #ffffff;
  --schrift: #1c1c1a;
  --schrift-2: #5a5a56;
  --linie: #d5d5cf;

  --schrift-anzeige: "Hanken Grotesk", system-ui, sans-serif;
  --schrift-text: "Hanken Grotesk", system-ui, sans-serif;
  --schrift-zahl: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace;

  --ecke: 0px;
  --ecke-gross: 0px;
  --rand: clamp(1.25rem, 5vw, 3rem);

  --akzent: #c2542c;
  --akzent-text: #9a4020;
  --auf-akzent: #ffffff;
}

.ev--werkhalle.akzent-terrakota { --akzent: #c2542c; --akzent-text: #9a4020; --auf-akzent: #ffffff; }
.ev--werkhalle.akzent-kobalt    { --akzent: #2f5ecb; --akzent-text: #28499c; --auf-akzent: #ffffff; }
.ev--werkhalle.akzent-moos      { --akzent: #2f7a52; --akzent-text: #256040; --auf-akzent: #ffffff; }
.ev--werkhalle.akzent-gold      { --akzent: #d9b64a; --akzent-text: #7a6010; --auf-akzent: #1c1c1a; }
.ev--werkhalle.akzent-tinte     { --akzent: #1b1b1b; --akzent-text: #1b1b1b; --auf-akzent: #ffffff; }

.wh-innen {
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Alles, was eine Zahl ist, in gleicher Breite. */
.ev--werkhalle .ev-termin-datum,
.ev--werkhalle .ev-termin-zeit,
.ev--werkhalle .ev-ablauf-zeit,
.ev--werkhalle .ev-countdown-zahl,
.ev--werkhalle .ev-countdown-fein,
.wh-daten dd,
.wh-marke {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
}

/* == Kopfbereich ==================================================== */

.wh-kopf {
  padding-top: clamp(2rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}

.wh-schild { padding-bottom: clamp(1.5rem, 4vw, 2.25rem); }

.wh-marke {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wh-titel {
  margin-top: 1.1rem;
  font-size: clamp(2.2rem, 1.1rem + 4.8vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.wh-name {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--schrift-2);
}

/* Das Typenschild · Felder nebeneinander, jedes mit sichtbarer
   Trennlinie. Auf schmalen Fenstern untereinander, dann trennt die
   Linie oben statt links. */
.wh-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--linie);
  margin: 0;
}
.wh-datenfeld {
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 40rem) {
  .wh-datenfeld { border-bottom: 0; padding-inline: 1.25rem; border-left: 1px solid var(--linie); }
  .wh-datenfeld:first-child { padding-left: 0; border-left: 0; }
}
.wh-daten dt {
  font-family: var(--schrift-zahl);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--schrift-2);
}
.wh-daten dd { margin: 0.3rem 0 0; font-size: 0.9375rem; }

.wh-countdown {
  padding-block: 1.25rem 1.75rem;
  border-top: 1px solid var(--linie);
}
.wh-countdown .ev-countdown-zahl { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); font-weight: 400; }
.wh-countdown .ev-countdown-wort,
.wh-countdown .ev-countdown-fein { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

.wh-kopfbild img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* == Abschnitte ===================================================== */

.wh-abschnitt { padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.wh-abschnitt + .wh-abschnitt { border-top: 1px solid var(--linie); }

.wh-ueberschrift {
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin-bottom: 1.1rem;
}

.wh-gruss .wh-grusstext {
  max-width: 40ch;
  font-size: clamp(1.3rem, 1.05rem + 1.4vw, 2rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.wh-fliess { color: var(--schrift-2); max-width: 52ch; }

.wh-paar { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .wh-paar {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0 clamp(2rem, 5vw, 3.5rem);
  }
  .wh-paar .wh-spalte + .wh-spalte {
    border-left: 1px solid var(--linie);
    padding-left: clamp(2rem, 5vw, 3.5rem);
  }
}
.wh-spalte .ev-ort-name { font-weight: 700; }

/* == Ablauf =========================================================
   Als Tabelle gesetzt: gleiche Spaltenbreite, eine Linie unter jeder
   Zeile, die Uhrzeit in Monoschrift. */

.wh-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--linie);
}
.wh-ablaufblock .ev-ablauf-punkt:last-child { border-bottom: 1px solid var(--linie); }
.wh-ablaufblock .ev-ablauf-zeit { font-size: 0.9375rem; color: var(--akzent-text); }
.wh-ablaufblock .ev-ablauf-text { grid-column: 2; }
.wh-ablaufblock .ev-ablauf-titel { font-weight: 700; }
.wh-ablaufblock .ev-ablauf-satz { margin-top: 0.15rem; font-size: 0.9375rem; }

/* == Hinweise ======================================================= */

.wh-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.wh-hinweisblock .ev-hinweis {
  padding: 1.25rem 0;
  border-top: 1px solid var(--linie);
}
@media (min-width: 40rem) {
  .wh-hinweisblock .ev-hinweis { padding-inline: 1.5rem; border-left: 1px solid var(--linie); }
  .wh-hinweisblock .ev-hinweis:first-child { padding-left: 0; border-left: 0; }
}
.wh-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-zahl);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

/* == Galerie ======================================================== */

.wh-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.wh-galerieblock .ev-galerie-bild { background: var(--grund-2); }
.wh-galerieblock .ev-galerie-bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.wh-galerieblock figcaption {
  padding: 0.6rem 0.75rem 0.75rem;
  margin-top: 0;
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
}

/* == Zu- und Absage ================================================= */

.wh-rsvpblock { background: var(--grund-2); }

/* Das Formular bleibt im linken Teil des Rasters stehen und wird
   nicht zentriert · in dieser Vorlage fängt jede Zeile links an, und
   ein mittig gesetzter Block wäre der einzige Bruch darin. Begrenzt
   wird das Formular selbst und nicht der Kasten darum: Sonst
   verlöre der Kasten die Randbreite, die alle Abschnitte teilen. */
.wh-rsvpblock .ev-rsvp { max-width: 44rem; }
.wh-rsvpblock .ev-feld input,
.wh-rsvpblock .ev-feld textarea { background: var(--grund); border-color: var(--linie); }
.wh-rsvpblock .ev-feld label,
.wh-rsvpblock .ev-antwort legend {
  font-family: var(--schrift-zahl);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--schrift-2);
}
.wh-rsvpblock .ev-antwort-wahl label {
  font-family: var(--schrift-text);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  background: var(--grund);
  color: var(--schrift);
}
.wh-rsvpblock .ev-antwort-wahl input:checked + label { color: var(--auf-akzent); }
.wh-rsvpblock .ev-knopf {
  font-family: var(--schrift-zahl);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wh-rsvpblock .ev-rsvp-danke { background: var(--grund); }

/* == Kontakt ======================================================== */

.wh-kontaktblock .ev-kontakt h3 {
  font-family: var(--schrift-zahl);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

/* == Auftritt =======================================================
   Nur die Linien zeichnen sich, der Text steht sofort. Eine
   sachliche Vorlage, deren Inhalt erst eingeblendet wird, ist ein
   Widerspruch in sich. */

@media (prefers-reduced-motion: no-preference) {
  .wh-daten, .wh-countdown { animation: wh-linie 0.7s ease-out both; }
  .wh-countdown { animation-delay: 0.1s; }
}

@keyframes wh-linie {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}