/* ====================================================================
   Vorlage „Leinen" · ruhig, warm, textil

   Ein grober, sehr leiser Untergrund, gedeckte Farbe, große
   Zeilenabstände.

   DER UNTERSCHIED ZU PAPIERWEISS ist die Wärme, nicht die Ruhe ·
   die ausführliche Begründung steht im Kopf von vorlagen/leinen.php.
   In einem Satz: Papierweiß ist ruhig wie ein Büro, Leinen ist ruhig
   wie ein Wohnzimmer.

   DIE ZEILENABSTÄNDE SIND GRÖSSER ALS ÜBERALL SONST (1,8 statt
   1,65). Das ist die eine Zahl, die diese Vorlage ausmacht: Sie
   nimmt Tempo aus dem Lesen, und genau darum geht es hier.
   ==================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

.ev--leinen {
  --grund: #f4f1e9;
  --grund-2: #ebe6da;
  --schrift: #2f2b25;
  --schrift-2: #635d52;
  --linie: #d9d2c2;

  --schrift-anzeige: "Fraunces", Georgia, serif;
  --schrift-text: "Manrope", system-ui, sans-serif;

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

  --akzent: #5b6d8c;
  --akzent-text: #3a4a66;
  --auf-akzent: #f4f1e9;

  /* Das Gewebe. Zwei gekreuzte Streifenmuster · siehe die
     Begründung in vorlagen/leinen.php. */
  background-image:
    repeating-linear-gradient(90deg, rgba(88, 74, 48, 0.055) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(88, 74, 48, 0.042) 0 1px, transparent 1px 4px);
}

.ev--leinen.akzent-nachtblau { --akzent: #5b6d8c; --akzent-text: #3a4a66; --auf-akzent: #f4f1e9; }
.ev--leinen.akzent-salbei    { --akzent: #8ca081; --akzent-text: #4d6042; --auf-akzent: #2f2b25; }
.ev--leinen.akzent-rosenholz { --akzent: #c08578; --akzent-text: #8c4b3d; --auf-akzent: #2f2b25; }
.ev--leinen.akzent-bernstein { --akzent: #c79a4a; --akzent-text: #856012; --auf-akzent: #2f2b25; }
.ev--leinen.akzent-pflaume   { --akzent: #8d6480; --akzent-text: #6a4160; --auf-akzent: #f4f1e9; }

/* Die eine Zahl, die diese Vorlage ausmacht. */
.ev--leinen { line-height: 1.8; }

.ln-innen {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}
.ln-innen--schmal { max-width: 40rem; }

/* == Kopfbereich ====================================================
   Das Band oben, die Tafel darüber und in es hinein · negativer
   Rand statt absoluter Lage, damit die Tafel wachsen darf, ohne aus
   dem Fluss zu fallen. */

.ln-band img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

.ln-tafel {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  margin-top: clamp(-5rem, -8vw, -3rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  text-align: center;
}

/* Ohne Bild steht die Tafel nicht im Nichts · dann fängt der Kopf
   mit Abstand an. Der Nachbarschaftswähler greift, weil das Band im
   Markup vor der Tafel steht und bei fehlendem Bild gar nicht
   ausgegeben wird. */
.ln-kopf > .ln-innen:first-child .ln-tafel { margin-top: clamp(2.5rem, 7vw, 4.5rem); }

.ln-anlass {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent-text);
  line-height: 1.4;
}

.ln-name {
  margin-top: 1rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 3.8rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.ln-titel {
  margin-top: 0.7rem;
  font-size: 1.05rem;
  color: var(--schrift-2);
  line-height: 1.6;
}

.ln-tafel .ev-termin {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  line-height: 1.5;
}
.ln-tafel .ev-termin-datum { font-family: var(--schrift-anzeige); font-size: 1.6rem; font-weight: 400; }
.ln-tafel .ev-countdown { margin-top: 1.1rem; }
.ln-tafel .ev-countdown-satz { justify-content: center; }
.ln-tafel .ev-countdown-zahl { font-family: var(--schrift-anzeige); font-weight: 400; }
.ln-tafel .ev-countdown-fein { text-align: center; }

/* == Abschnitte =====================================================
   Jeder Abschnitt eine Zeile mit einer Haarlinie darüber. Keine
   Kästen · in dieser Vorlage ordnet der Abstand. */

.ln-abschnitt { padding-block: clamp(2.5rem, 6vw, 3.75rem); }
.ln-zeile + .ln-zeile { border-top: 1px solid var(--linie); }

.ln-ueberschrift {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent-text);
  line-height: 1.4;
  margin-bottom: 1.1rem;
}

.ln-gruss { background: var(--grund-2); text-align: center; }
.ln-grusstext {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.85rem);
  font-weight: 400;
  font-variation-settings: "SOFT" 40;
  line-height: 1.55;
  text-wrap: pretty;
}

.ln-fliess { color: var(--schrift-2); }
.ln-abschnitt .ev-ort-name { font-family: var(--schrift-anzeige); font-size: 1.35rem; font-weight: 400; }

/* == Ablauf =========================================================
   Uhrzeit über dem Punkt und nicht daneben. Zwei Spalten wären auf
   einer Vorlage, die vom Zeilenabstand lebt, eine Enge · hier darf
   jeder Punkt seine eigene Zeile haben. */

.ln-ablaufblock .ev-ablauf-punkt { padding-block: 1.1rem; }
.ln-ablaufblock .ev-ablauf-punkt + .ev-ablauf-punkt { border-top: 1px solid var(--linie); }
.ln-ablaufblock .ev-ablauf-zeit {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--akzent-text);
  line-height: 1.4;
}
.ln-ablaufblock .ev-ablauf-titel {
  margin-top: 0.25rem;
  font-family: var(--schrift-anzeige);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

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

.ln-hinweisblock .ev-hinweis + .ev-hinweis { margin-top: 1.75rem; }
.ln-hinweisblock .ev-hinweis h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--akzent-text);
  line-height: 1.4;
}

/* == Galerie ========================================================
   Nebeneinander in einer Reihe, ohne Rundung und ohne Rahmen · das
   Gewebe ringsum ist Rahmen genug. */

.ln-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.ln-galerieblock .ev-galerie-bild img { aspect-ratio: 3 / 4; object-fit: cover; }
.ln-galerieblock figcaption { line-height: 1.5; }

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

.ln-rsvpblock { background: var(--grund-2); }
.ln-rsvpblock .ev-feld input,
.ln-rsvpblock .ev-feld textarea { background: var(--grund); }
.ln-rsvpblock .ev-feld label,
.ln-rsvpblock .ev-antwort legend { line-height: 1.5; }
.ln-rsvpblock .ev-antwort-wahl label { background: var(--grund); }
.ln-rsvpblock .ev-rsvp-danke { background: var(--grund); }
.ln-rsvpblock .ev-rsvp-danke-gross { font-family: var(--schrift-anzeige); font-weight: 400; }

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

.ln-kontaktblock { border-top: 1px solid var(--linie); }
.ln-kontaktblock .ev-kontakt h3 { font-family: var(--schrift-anzeige); }

/* == Auftritt =======================================================
   Sehr langsam und sehr wenig · eine Vorlage, die Tempo herausnimmt,
   darf nicht mit einem Sprung anfangen. */

@media (prefers-reduced-motion: no-preference) {
  .ln-band img { animation: ln-auf 1.4s ease-out both; }
  .ln-tafel { animation: ln-auf-tafel 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
}

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

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

@media print {
  .ev--leinen { background-image: none; }
  .ln-tafel { margin-top: 1rem; border-color: #999; }
  .ln-anlass, .ln-ueberschrift, .ln-ablaufblock .ev-ablauf-zeit,
  .ln-hinweisblock .ev-hinweis h3 { color: #000; }
}