/* ====================================================================
   Vorlage „Kreidetafel" · angeschrieben statt gedruckt

   Die dritte dunkle Vorlage und wieder eine andere: Lichterkette ist
   warm und weich, Goldschnitt kühl und streng, diese hier ist
   staubig und mit der Hand gemacht.

   KREIDE IST NICHT WEISS. Die Schriftfarbe hier ist ein sehr helles
   Grau mit einem Stich ins Warme, und selbst die Überschriften gehen
   nicht auf reines Weiß · siehe die Begründung im Kopf von
   vorlagen/kreidetafel.php.

   DER STAUB ist ein Verlauf und kein Bild: zwei sehr weite radiale
   Verläufe an den Stellen, an denen eine echte Tafel nach dem
   Wischen heller ist. Als Bild wären das 40 kB für einen Effekt, den
   niemand benennen können soll.
   ==================================================================== */

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  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--kreidetafel {
  --grund: #22312b;
  --grund-2: #2a3b34;
  --schrift: #e8e6dd;
  --schrift-2: #b0b6ac;
  --linie: #46584f;

  --schrift-anzeige: "Caveat", "Segoe Script", cursive;
  --schrift-text: "Hanken Grotesk", system-ui, sans-serif;

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

  --akzent: #f0a92b;
  --akzent-text: #f5c469;
  --auf-akzent: #22312b;
}

.ev--kreidetafel.akzent-sonne    { --akzent: #f0a92b; --akzent-text: #f5c469; --auf-akzent: #22312b; }
.ev--kreidetafel.akzent-himbeere { --akzent: #e0526f; --akzent-text: #f28fa3; --auf-akzent: #22312b; }
.ev--kreidetafel.akzent-lagune   { --akzent: #2aa3ac; --akzent-text: #6ecbd4; --auf-akzent: #22312b; }
.ev--kreidetafel.akzent-wiese    { --akzent: #63ad3c; --akzent-text: #9fd47f; --auf-akzent: #22312b; }
.ev--kreidetafel.akzent-flieder  { --akzent: #9b7bd4; --akzent-text: #c1acef; --auf-akzent: #22312b; }

/* Der Staub · zwei weite Wischspuren, kaum wahrnehmbar. */
.ev--kreidetafel {
  background-image:
    radial-gradient(ellipse 70% 30% at 25% 18%, rgba(255, 255, 255, 0.045), transparent 70%),
    radial-gradient(ellipse 60% 26% at 78% 62%, rgba(255, 255, 255, 0.035), transparent 70%);
  background-attachment: fixed;
}

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

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

.kt-kopf { padding-top: clamp(2.5rem, 7vw, 4.5rem); }

.kt-tafel {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3.25rem);
  text-align: center;
}

/* Der gezogene Rahmen liegt hinter dem Text und wird auf die Höhe
   des Kastens gestreckt · preserveAspectRatio="none" im Markup. Die
   Ecken schließen absichtlich nicht. */
.kt-rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--schrift-2);
}
.kt-tafel > *:not(.kt-rahmen) { position: relative; }

.kt-anlass {
  font-family: var(--schrift-anzeige);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--akzent-text);
}

.kt-titel {
  margin-top: 0.7rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.6rem, 1.2rem + 6vw, 4.8rem);
  font-weight: 700;
  line-height: 1.02;
  text-wrap: balance;
}
.kt-name {
  margin-top: 0.4rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--schrift-2);
}

.kt-tafel .ev-termin-datum { font-family: var(--schrift-anzeige); font-size: 2rem; font-weight: 700; }
.kt-tafel .ev-countdown { margin-top: 1.1rem; }
.kt-tafel .ev-countdown-satz { justify-content: center; }
.kt-tafel .ev-countdown-zahl { font-family: var(--schrift-anzeige); font-weight: 700; }
.kt-tafel .ev-countdown-fein { text-align: center; }

.kt-kopfbild {
  max-width: 66rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-inline: var(--rand);
}
.kt-kopfbild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--ecke);
  /* Der weiße Rand ist der Kreidestrich um ein aufgehängtes Bild ·
     eine Tafel hat keine Bilderrahmen. */
  box-shadow: 0 0 0 3px var(--linie);
}

/* == Der Strich ===================================================== */

.kt-strich {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: 0.75rem;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  color: var(--schrift-2);
}
.kt-kopf .kt-strich { margin-block: 1.25rem; }

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

.kt-abschnitt { padding-block: clamp(2rem, 4.5vw, 3rem); }

.kt-ueberschrift {
  font-family: var(--schrift-anzeige);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.9rem;
  color: var(--akzent-text);
}

.kt-gruss { text-align: center; }
.kt-grusstext {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.28;
  text-wrap: pretty;
}

.kt-fliess { color: var(--schrift-2); }
.kt-abschnitt .ev-ort-name { font-size: 1.3rem; font-weight: 600; }

/* == Ablauf =========================================================
   Vor jeder Uhrzeit ein kurzer schräger Kreidestrich statt eines
   Punktes · geschrieben, nicht gesetzt. */

.kt-ablaufblock .ev-ablauf-punkt {
  position: relative;
  padding-left: 2.75rem;
  padding-block: 0.7rem;
}
.kt-ablaufblock .ev-ablauf-punkt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 1.6rem;
  height: 2px;
  background: var(--akzent-text);
  rotate: -8deg;
  opacity: 0.8;
}
.kt-ablaufblock .ev-ablauf-punkt:nth-child(even)::before { rotate: 6deg; width: 1.35rem; }

.kt-ablaufblock .ev-ablauf-zeit {
  font-family: var(--schrift-anzeige);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--akzent-text);
}
.kt-ablaufblock .ev-ablauf-titel { margin-top: 0.2rem; font-weight: 600; }
.kt-ablaufblock .ev-ablauf-satz { margin-top: 0.1rem; }

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

.kt-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
}
.kt-hinweisblock .ev-hinweis {
  padding: 1.25rem 1.4rem;
  border: 2px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund-2);
}
.kt-hinweisblock .ev-hinweis h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--akzent-text);
}

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

.kt-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.kt-galerieblock .ev-galerie-bild img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ecke);
  box-shadow: 0 0 0 3px var(--linie);
}
.kt-galerieblock figcaption { font-family: var(--schrift-anzeige); font-size: 1.25rem; text-align: center; }

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

.kt-rsvpblock { background: var(--grund-2); }
.kt-rsvpblock .ev-feld input,
.kt-rsvpblock .ev-feld textarea {
  background: var(--grund);
  border-color: var(--linie);
  border-width: 2px;
  color: var(--schrift);
}
.kt-rsvpblock .ev-feld input::placeholder,
.kt-rsvpblock .ev-feld textarea::placeholder { color: #7e8a82; }
.kt-rsvpblock .ev-antwort-wahl label { background: var(--grund); border-color: var(--linie); border-width: 2px; }
.kt-rsvpblock .ev-rsvp-danke { background: var(--grund); border-color: var(--linie); }
.kt-rsvpblock .ev-rsvp-danke-gross { font-family: var(--schrift-anzeige); font-size: 2.2rem; font-weight: 700; }

/* Fehlerrot für dunklen Grund · siehe vorlage-lichterkette.css. */
.ev--kreidetafel .ev-feld--fehler input,
.ev--kreidetafel .ev-feld--fehler textarea { border-color: #e8836c; }
.ev--kreidetafel .ev-feld-fehler,
.ev--kreidetafel .ev-rsvp-meldung { color: #e8836c; border-color: #e8836c; }

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

.kt-kontaktblock .ev-kontakt h3 {
  font-family: var(--schrift-anzeige);
  font-size: 2rem;
  font-weight: 700;
  color: var(--akzent-text);
}

/* == Auftritt =======================================================
   Angeschrieben wird von links nach rechts · deshalb kommt der
   Kopftext von dort und nicht von unten. */

@media (prefers-reduced-motion: no-preference) {
  .kt-anlass, .kt-titel, .kt-name { animation: kt-schreiben 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .kt-titel { animation-delay: 0.07s; }
  .kt-name { animation-delay: 0.15s; }
  .kt-kopf .kt-strich { animation: kt-ziehen 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
}

@keyframes kt-schreiben {
  from { opacity: 0; transform: translateX(-0.9rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes kt-ziehen {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* == Druck ========================================================== */

@media print {
  .ev--kreidetafel { background-image: none; }
  .kt-rahmen { color: #000; }
  .kt-strich { color: #999; }
  .kt-anlass, .kt-ueberschrift, .kt-ablaufblock .ev-ablauf-zeit,
  .kt-hinweisblock .ev-hinweis h3 { color: #000; }
  .kt-hinweisblock .ev-hinweis { background: #fff; border-color: #999; }
  .kt-kopfbild img, .kt-galerieblock .ev-galerie-bild img { box-shadow: none; }
}