/* ====================================================================
   Vorlage „Stilles Blatt" · zurückgenommen bis fast auf nichts

   Ein Zweig, eine Linie, viel Weiß. Gebaut für Abschied und
   Gedenken.

   HIER STEHT WENIGER ALS IN JEDER ANDEREN VORLAGE, und das ist die
   ganze Arbeit. Keine Fläche in Akzentfarbe, keine Kästen, keine
   Rundungen, keine Schatten, kein Auftritt, kein Countdown. Was
   bleibt, sind drei Dinge: Schriftgröße, Abstand und eine einzige
   Haarlinie.

   DIE SPALTE IST SCHMAL, 34rem statt der üblichen 40 bis 44. Bei
   dieser Vorlage steht oft ein langer, ruhiger Text, und der liest
   sich in 60 Zeichen besser als in 75.

   DER KNOPF IST NICHT BUNT. Das Antwortformular einer Trauerfeier
   endet nicht mit einer Signalfläche · siehe die Begründung im Kopf
   von vorlagen/stilleblatt.php.
   ==================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-latin.woff2") format("woff2");
  font-weight: 300 700;
  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--stilleblatt {
  --grund: #fcfcfa;
  --grund-2: #f4f4f0;
  --schrift: #26261f;
  --schrift-2: #5c5c53;
  --linie: #e2e2da;

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

  --ecke: 3px;
  --ecke-gross: 3px;
  --rand: clamp(1.5rem, 6vw, 3rem);

  --akzent: #8ca081;
  --akzent-text: #4d6042;
  --auf-akzent: #fcfcfa;

  line-height: 1.75;
}

.ev--stilleblatt.akzent-salbei    { --akzent: #8ca081; --akzent-text: #4d6042; }
.ev--stilleblatt.akzent-tinte     { --akzent: #1b1b1b; --akzent-text: #1b1b1b; }
.ev--stilleblatt.akzent-nachtblau { --akzent: #5b6d8c; --akzent-text: #3a4a66; }
.ev--stilleblatt.akzent-rosenholz { --akzent: #c08578; --akzent-text: #8c4b3d; }
.ev--stilleblatt.akzent-bernstein { --akzent: #c79a4a; --akzent-text: #856012; }

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

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

.sb-kopf {
  padding-top: clamp(3.5rem, 10vw, 6.5rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.sb-zweig {
  display: block;
  width: 11rem;
  height: auto;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  color: var(--akzent);
}

.sb-anlass {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--schrift-2);
  line-height: 1.5;
}

.sb-name {
  margin-top: 1.25rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
  text-wrap: balance;
}
.sb-titel {
  margin-top: 0.9rem;
  font-size: 1rem;
  color: var(--schrift-2);
}

.sb-kopf .ev-termin {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
  line-height: 1.6;
}
.sb-kopf .ev-termin-datum {
  font-family: var(--schrift-anzeige);
  font-size: 1.5rem;
  font-weight: 400;
}

/* == Das Bild =======================================================
   In Textbreite und nicht darüber hinaus · die Begründung steht im
   Markup. */

.sb-bild {
  max-width: 34rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-inline: var(--rand);
}
.sb-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* == Abschnitte =====================================================
   Kein Kasten, keine Fläche, kein Wechsel · nur Abstand und, wo es
   sein muss, eine Haarlinie. */

.sb-abschnitt { padding-block: clamp(1.75rem, 4vw, 2.5rem); }

.sb-ueberschrift {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--schrift-2);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.sb-grusstext {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.6;
  text-wrap: pretty;
}

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

/* == Ablauf =========================================================
   Uhrzeit und Punkt in einer Zeile, ohne Linie dazwischen. Bei drei
   bis fünf Punkten braucht es keine Gliederung. */

.sb-ablaufblock .ev-ablauf-punkt {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding-block: 0.6rem;
}
.sb-ablaufblock .ev-ablauf-zeit { color: var(--schrift-2); font-size: 0.9375rem; }
.sb-ablaufblock .ev-ablauf-text { grid-column: 2; }
.sb-ablaufblock .ev-ablauf-titel { font-weight: 600; }

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

.sb-hinweisblock .ev-hinweis { padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.sb-hinweisblock .ev-hinweis + .ev-hinweis { margin-top: 1.5rem; }
.sb-hinweisblock .ev-hinweis h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--schrift-2);
  line-height: 1.5;
}

/* == Galerie ========================================================
   Untereinander und nicht nebeneinander. Ein Raster aus drei
   Bildern ist eine Sammlung; hier soll jedes für sich stehen. */

.sb-galerieblock .ev-galerie { display: grid; gap: 2rem; }
.sb-galerieblock .ev-galerie-bild img { aspect-ratio: 4 / 5; object-fit: cover; }

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

.sb-rsvpblock .ev-feld input,
.sb-rsvpblock .ev-feld textarea { background: var(--grund); border-radius: var(--ecke); }
.sb-rsvpblock .ev-antwort-wahl label { background: var(--grund); border-radius: var(--ecke); }
.sb-rsvpblock .ev-antwort-wahl input:checked + label {
  background: var(--grund-2);
  border-color: var(--schrift);
  color: var(--schrift);
}

/* Der Knopf trägt die Schriftfarbe und nicht den Akzent. */
.sb-rsvpblock .ev-knopf {
  background: var(--schrift);
  color: var(--grund);
  border-radius: var(--ecke);
  font-weight: 600;
}
.sb-rsvpblock .ev-rsvp-danke { background: var(--grund-2); border-radius: var(--ecke); }
.sb-rsvpblock .ev-rsvp-danke-gross { font-family: var(--schrift-anzeige); font-weight: 400; }

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

.sb-kontaktblock { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.sb-kontaktblock .ev-kontakt { padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.sb-kontaktblock .ev-kontakt h3 { font-family: var(--schrift-anzeige); font-weight: 400; }

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

   Hier steht absichtlich keine @keyframes-Regel und keine
   prefers-reduced-motion-Abfrage. Die anderen elf Vorlagen lassen
   ihren Kopf einblenden · diese nicht. Wer die Datei erweitert,
   soll das hier lesen, bevor er einen Auftritt nachrüstet. */

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

@media print {
  .sb-zweig { color: #666; }
}