/* ====================================================================
   Vorlage „Papierweiß" · modern und minimalistisch

   Viel Weiß, eine Grotesk, sehr große Zahlen. Die Ordnung kommt aus
   dem Abstand und aus Haarlinien.

   DIE GEFAHR BEI MINIMAL IST DIE KÜHLE. Weiß plus Linien plus
   Systemschrift ergibt ein Behördenformular. Drei Dinge halten
   dagegen, und alle drei sind Absicht:

   1. Der Schleier hinter dem Kopf. Ein weicher, außermittiger
      Farbverlauf aus dem Akzent · gerechnet, nicht als Bild. Er ist
      das einzige Weiche auf der Seite und macht den Unterschied
      zwischen "reduziert" und "leer".

   2. Die Tageszahl ist absichtlich zu groß. Sie geht über die
      Zeilenhöhe hinaus und schneidet oben knapp an. Eine Zahl in
      Fließtextgröße wäre eine Angabe; diese ist ein Bild.

   3. Das Kopfbild läuft über die Feldbreite hinaus, in voller
      Fensterbreite. Ohne diesen Bruch stünde alles in derselben
      Spalte und die Seite hätte einen einzigen Rhythmus.

   KEIN SCHATTEN, KEINE RUNDUNG ausser am Knopf.
   ==================================================================== */

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

.ev--papierweiss {
  --grund: #ffffff;
  --grund-2: #f4f4f3;
  --schrift: #131313;
  --schrift-2: #61615e;
  --linie: #e2e2df;

  --schrift-anzeige: "Hanken Grotesk", system-ui, sans-serif;
  --schrift-text: "Hanken Grotesk", system-ui, sans-serif;

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

  --akzent: #1b1b1b;
  --akzent-text: #1b1b1b;
  --auf-akzent: #ffffff;

  font-weight: 420;
  letter-spacing: -0.008em;
}

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

.pw-innen {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.pw-innen--schmal { max-width: 46rem; }

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

.pw-kopf {
  position: relative;
  padding-top: clamp(3.5rem, 9vw, 7rem);
  overflow: clip;
}

/* Der Schleier. color-mix, damit er in jeder Akzentfarbe stimmt ·
   ein festes rgba() müsste je Akzent neu gesetzt werden und wäre
   nach der ersten neuen Farbe falsch. */
.pw-schleier {
  position: absolute;
  inset: -18rem -10rem auto -10rem;
  height: 40rem;
  pointer-events: none;
  background:
    radial-gradient(45% 40% at 22% 62%,
      color-mix(in oklab, var(--akzent) 22%, transparent) 0%,
      transparent 70%),
    radial-gradient(38% 34% at 78% 38%,
      color-mix(in oklab, var(--akzent) 13%, transparent) 0%,
      transparent 72%);
}

.pw-kopfraster {
  position: relative;
  display: grid;
  gap: 1.5rem 3.5rem;
  align-items: end;
}

@media (min-width: 820px) {
  .pw-kopfraster { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.pw-tagzahl {
  font-size: clamp(6rem, 3rem + 16vw, 15rem);
  font-weight: 300;
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--akzent-text);
}
.pw-monat {
  margin-top: 0.5rem;
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.pw-uhrzeit { margin-top: 0.2rem; color: var(--schrift-2); }

.pw-anlass {
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--schrift-2);
}
.pw-titel {
  margin-top: 0.7rem;
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.pw-name {
  margin-top: 0.6rem;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem);
  color: var(--schrift-2);
}
.pw-namensblock .ev-countdown { margin-top: 1.75rem; }
.pw-namensblock .ev-countdown-zahl { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 400; }

/* Der Bruch: das Bild geht über die volle Fensterbreite. */
.pw-kopfbild {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--grund-2);
}
.pw-kopfbild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 640px) {
  .pw-kopfbild img { aspect-ratio: 4 / 3; }
}

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

.pw-abschnitt { padding-block: clamp(3rem, 7vw, 5.5rem); }

.pw-ueberschrift {
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--schrift-2);
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--linie);
}

.pw-gruss { padding-top: clamp(3.5rem, 8vw, 6rem); }
.pw-grusstext {
  max-width: 26ch;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

.pw-paar { display: grid; gap: 2.5rem; }
@media (min-width: 820px) {
  .pw-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  /* Die Trennlinie steht links am zweiten Element · dann braucht nur
     das erste eine Ausnahme, und die gilt in jeder Spaltenzahl. */
  .pw-paar .pw-spalte + .pw-spalte { padding-left: 4rem; border-left: 1px solid var(--linie); }
  .pw-paar { gap: 0; }
}
.pw-fliess { color: var(--schrift-2); max-width: 46ch; }

/* == Ablauf ========================================================= */

.pw-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0 2rem;
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--linie);
}
.pw-ablaufblock .ev-ablauf-punkt:first-child { border-top: 1px solid var(--linie); }
.pw-ablaufblock .ev-ablauf-zeit {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--akzent-text);
}
.pw-ablaufblock .ev-ablauf-titel { font-size: 1.15rem; font-weight: 560; letter-spacing: -0.02em; }
.pw-ablaufblock .ev-ablauf-satz { margin-top: 0.2rem; max-width: 52ch; }

@media (max-width: 520px) {
  .pw-ablaufblock .ev-ablauf-punkt { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

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

.pw-hinweisblock .ev-hinweise { display: grid; gap: 0; }
.pw-hinweisblock .ev-hinweis {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.3rem 2rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--linie);
}
.pw-hinweisblock .ev-hinweis:first-child { border-top: 1px solid var(--linie); }
.pw-hinweisblock .ev-hinweis h3 { font-size: 1rem; font-weight: 560; }
.pw-hinweisblock .ev-hinweis p { margin: 0; max-width: 56ch; }

@media (max-width: 640px) {
  .pw-hinweisblock .ev-hinweis { grid-template-columns: minmax(0, 1fr); }
}

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

.pw-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--linie);
}
.pw-galerieblock .ev-galerie-bild { background: var(--grund); }
.pw-galerieblock .ev-galerie-bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.pw-galerieblock figcaption { padding: 0.65rem 0.2rem 0.9rem; }

/* == Ort ============================================================ */

.pw-abschnitt .ev-ort-name { font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; }

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

.pw-rsvpblock { background: var(--grund-2); }
.pw-rsvpblock .ev-feld input,
.pw-rsvpblock .ev-feld textarea,
.pw-rsvpblock .ev-antwort-wahl label { background: var(--grund); }
.pw-rsvpblock .ev-antwort-wahl label { border-radius: var(--ecke-gross); }

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

.pw-kontaktblock { padding-block: clamp(2.5rem, 5vw, 4rem); }
.pw-kontaktblock .ev-kontakt h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.025em; }

/* == Auftritt ======================================================= */

/* Anfangszustand nur innerhalb der Ruhe-Abfrage · siehe die
   ausführliche Begründung in vorlage-abendlicht.css. */
@media (prefers-reduced-motion: no-preference) {
  .pw-tagzahl,
  .pw-namensblock > * {
    animation: pw-auf 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .pw-namensblock > *:nth-child(2) { animation-delay: 0.07s; }
  .pw-namensblock > *:nth-child(3) { animation-delay: 0.14s; }
  .pw-namensblock > *:nth-child(4) { animation-delay: 0.21s; }
}

@keyframes pw-auf {
  from { opacity: 0; transform: translateY(1.1rem); }
  to   { opacity: 1; transform: none; }
}