/* ====================================================================
   Vorlage „Neonpixel" · für die zehn bis fünfzehn Jahre

   Dunkler Grund, Neonlinien, eine Monospace für Zahlen und Etiketten.
   Kanten statt Rundungen, und ein Raster, das man sieht.

   DAS RASTER IST EIN GRADIENT und kein Bild: zwei
   repeating-linear-gradient über dem Grund, 40 Punkte Abstand, sehr
   schwach. Ein Kachelbild wäre eine Anfrage für zwei Zeilen CSS.

   NEON STEHT IN LINIEN UND NICHT IN SCHRIFT. Auf dunklem Grund ist
   eine Neonfarbe als Fläche schön und als Fließtext grenzwertig ·
   deshalb führt der Akzent hier Rahmen, Linien und Etiketten, und der
   Text bleibt hell. Die Textfassungen im Register sind für diesen
   Grund gerechnet und liegen alle über 8:1.

   KEIN BLINKEN, KEIN LAUFTEXT, KEIN GLITCH. Was sich bewegt, bewegt
   sich einmal beim Öffnen. Der Grund ist derselbe wie überall: Eine
   Einladung wird im Bus gelesen, und was dabei zuckt, wird nicht
   gelesen.

   DER VERSATZ IST EINE ZWEITE KANTE UND KEIN SCHATTEN. box-shadow mit
   0 Weichzeichnung, in der Akzentfarbe · das ist die Anmutung, um die
   es geht, und ein weicher Schatten wäre das Gegenteil davon.
   ==================================================================== */

@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--neonpixel {
  --grund: #121120;
  --grund-2: #1b1a2e;
  --schrift: #e9e8f5;
  --schrift-2: #a4a2c4;
  --linie: #2f2d4a;

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

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

  --akzent: #2aa3ac;
  --akzent-text: #6ecbd4;
  --auf-akzent: #121120;
}

.ev--neonpixel.akzent-lagune   { --akzent: #2aa3ac; --akzent-text: #6ecbd4; --auf-akzent: #121120; }
.ev--neonpixel.akzent-flieder  { --akzent: #9b7bd4; --akzent-text: #c1acef; --auf-akzent: #121120; }
.ev--neonpixel.akzent-himbeere { --akzent: #e0526f; --akzent-text: #f2909f; --auf-akzent: #121120; }
.ev--neonpixel.akzent-sonne    { --akzent: #f0a92b; --akzent-text: #f2bd63; --auf-akzent: #121120; }
.ev--neonpixel.akzent-wiese    { --akzent: #63ad3c; --akzent-text: #96d474; --auf-akzent: #121120; }

.np-innen {
  max-width: 66rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.np-innen--schmal { max-width: 44rem; }

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

.np-kopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}

.np-raster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,
      color-mix(in oklab, var(--akzent) 22%, transparent) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom,
      color-mix(in oklab, var(--akzent) 22%, transparent) 0 1px, transparent 1px 40px);
  /* Nach unten auslaufen · ein Raster, das an einer Kante endet, sieht
     aus wie ein halb geladenes Bild. */
  mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
}

.np-kopfinnen {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 54rem) {
  .np-kopfinnen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; }
}

.np-anlass {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.np-titel {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 1.3rem + 5.4vw, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.np-name {
  margin-top: 0.6rem;
  font-family: var(--schrift-mono);
  font-size: clamp(1rem, 0.9rem + 0.8vw, 1.3rem);
  color: var(--akzent-text);
}

.np-kopftext .ev-termin { margin-top: 1.5rem; }
.np-kopftext .ev-termin-datum {
  font-family: var(--schrift-mono);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
}
.np-kopftext .ev-termin-tag,
.np-kopftext .ev-termin-zeit { color: var(--schrift-2); font-family: var(--schrift-mono); }

.np-kopftext .ev-countdown { margin-top: 1.25rem; }
.np-kopftext .ev-countdown-zahl {
  font-family: var(--schrift-mono);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  color: var(--akzent-text);
}
.np-kopftext .ev-countdown-wort,
.np-kopftext .ev-countdown-satz {
  font-family: var(--schrift-mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-2);
}

/* Das Bild mit zweiter Kante · kein Schatten, siehe den Kopf. */
.np-kopfbild {
  border: 1px solid var(--linie);
  box-shadow: 10px 10px 0 0 color-mix(in oklab, var(--akzent) 55%, transparent);
}
.np-kopfbild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

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

.np-abschnitt { padding-block: clamp(2.25rem, 5vw, 3.5rem); }

.np-ueberschrift {
  font-family: var(--schrift-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--akzent-text);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linie);
}

.np-gruss { background: var(--grund-2); }
.np-grusstext {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.85rem);
  line-height: 1.35;
  font-weight: 600;
  text-wrap: pretty;
}

.np-fliess { color: var(--schrift-2); line-height: 1.65; max-width: 56ch; }

.np-kachel {
  padding: clamp(1.25rem, 3vw, 1.9rem);
  background: var(--grund-2);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
}
.np-kachel .ev-ort-name { font-size: 1.25rem; font-weight: 700; }
.np-kachel .ev-ort-adresse { color: var(--schrift-2); font-family: var(--schrift-mono); font-size: 0.9375rem; }

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

.np-ablaufblock .ev-ablauf { display: grid; gap: 0; }
.np-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 1.25rem;
  padding: 0.85rem 0.9rem;
  border-left: 3px solid var(--linie);
}
.np-ablaufblock .ev-ablauf-punkt:hover { border-left-color: var(--akzent); background: var(--grund-2); }
.np-ablaufblock .ev-ablauf-zeit {
  grid-row: 1 / span 2;
  font-family: var(--schrift-mono);
  font-size: 1rem;
  color: var(--akzent-text);
  align-self: start;
}
.np-ablaufblock .ev-ablauf-titel { font-size: 1.1rem; font-weight: 700; }
.np-ablaufblock .ev-ablauf-satz { color: var(--schrift-2); }

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

.np-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
}
.np-hinweisblock .ev-hinweis {
  padding: 1.25rem 1.4rem;
  background: var(--grund-2);
}
.np-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

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

.np-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.np-galerieblock .ev-galerie-bild img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--linie);
}
.np-galerieblock figcaption {
  color: var(--schrift-2);
  font-family: var(--schrift-mono);
  font-size: 0.875rem;
}

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

.np-rsvpblock { background: var(--grund-2); }
.np-rsvpblock .ev-feld input,
.np-rsvpblock .ev-feld textarea {
  background: var(--grund);
  border-color: var(--linie);
  color: var(--schrift);
  border-radius: 0;
  font-family: var(--schrift-mono);
}
.np-rsvpblock .ev-antwort-wahl label {
  background: var(--grund);
  border-color: var(--linie);
  border-radius: 0;
}
.np-rsvpblock .ev-knopf { border-radius: 0; font-weight: 700; letter-spacing: 0.04em; }

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

.np-kontaktblock .ev-kontakt {
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
}
.np-kontaktblock .ev-kontakt-weg { font-family: var(--schrift-mono); }

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

@media (prefers-reduced-motion: no-preference) {
  .np-anlass,
  .np-titel,
  .np-name,
  .np-kopfbild {
    animation: np-auf 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .np-titel { animation-delay: 0.05s; }
  .np-name { animation-delay: 0.1s; }
  .np-kopfbild { animation-delay: 0.16s; animation-name: np-auf-bild; }
}

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

/* Das Bild kommt aus der Richtung, in die sein Versatz zeigt · dann
   liest sich die zweite Kante als das, was sie ist. */
@keyframes np-auf-bild {
  from { opacity: 0; transform: translate(-0.6rem, -0.6rem); }
  to   { opacity: 1; transform: none; }
}