/* ====================================================================
   Vorlage „Goldschnitt" · festlich und streng

   Tiefes Nachtblau, ein doppelter Rahmen mit abgeschrägten Ecken,
   gesperrte Versalien. Die zweite dunkle Vorlage · und das Gegenteil
   der Lichterkette: dort ist alles warm, weich und geschwungen, hier
   ist alles kühl, gerade und gesetzt.

   ES GIBT GENAU EINE ZIERFORM, den abgeschrägten Doppelrahmen. Alles
   andere entsteht aus Sperrung, Linienstärke und dem Gegensatz von
   Gold auf Blau · die Begründung steht ausführlich im Kopf von
   vorlagen/goldschnitt.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: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.ev--goldschnitt {
  --grund: #101828;
  --grund-2: #162034;
  --schrift: #eae6dc;
  --schrift-2: #a3a9b8;
  --linie: #2c3a55;

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

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

  --akzent: #d9b64a;
  --akzent-text: #e8cd77;
  --auf-akzent: #101828;
}

.ev--goldschnitt.akzent-gold      { --akzent: #d9b64a; --akzent-text: #e8cd77; --auf-akzent: #101828; }
.ev--goldschnitt.akzent-bernstein { --akzent: #c79a4a; --akzent-text: #e8c073; --auf-akzent: #101828; }
.ev--goldschnitt.akzent-rosenholz { --akzent: #c08578; --akzent-text: #e5a99b; --auf-akzent: #101828; }
.ev--goldschnitt.akzent-salbei    { --akzent: #8ca081; --akzent-text: #b3c7a8; --auf-akzent: #101828; }
.ev--goldschnitt.akzent-lagune    { --akzent: #2aa3ac; --akzent-text: #6ecbd4; --auf-akzent: #101828; }

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

/* == Der Rahmen =====================================================

   Zwei Linien: die äußere ist der Rand des Kastens mit
   abgeschrägten Ecken, die innere ein Pseudoelement in gleichem
   Abstand. clip-path schneidet beide Ecken gleich ab · deshalb
   sitzen sie parallel, was mit einem Hintergrundbild nur bei einer
   festen Höhe geklappt hätte. */

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

.gs-rahmen {
  position: relative;
  padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem);
  background: var(--akzent);
  text-align: center;
  clip-path: polygon(
    1.5rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem,
    100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%,
    1.5rem 100%, 0 calc(100% - 1.5rem), 0 1.5rem);
}
.gs-rahmen::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--grund);
  clip-path: polygon(
    1.4rem 0, calc(100% - 1.4rem) 0, 100% 1.4rem,
    100% calc(100% - 1.4rem), calc(100% - 1.4rem) 100%,
    1.4rem 100%, 0 calc(100% - 1.4rem), 0 1.4rem);
}
.gs-rahmen::after {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border: 1px solid color-mix(in oklab, var(--akzent) 55%, transparent);
  clip-path: polygon(
    1rem 0, calc(100% - 1rem) 0, 100% 1rem,
    100% calc(100% - 1rem), calc(100% - 1rem) 100%,
    1rem 100%, 0 calc(100% - 1rem), 0 1rem);
  pointer-events: none;
}
.gs-rahmen > * { position: relative; }

.gs-anlass {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

.gs-titel {
  margin-top: 1.4rem;
  font-family: var(--schrift-anzeige);
  font-size: clamp(2.4rem, 1rem + 6vw, 5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Der einzige Strich in der Mitte · gleichzeitig die Stelle, an der
   der Akzent als Fläche vorkommt. */
.gs-strich {
  display: block;
  width: 5.5rem;
  height: 2px;
  margin: 1.5rem auto;
  background: var(--akzent);
}

.gs-name {
  font-size: clamp(0.9rem, 0.85rem + 0.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--schrift-2);
}

.gs-rahmen .ev-termin { margin-top: 1.75rem; }
.gs-rahmen .ev-termin-tag {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.gs-rahmen .ev-termin-datum {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 400;
  color: var(--akzent-text);
}
.gs-rahmen .ev-termin-zeit { font-size: 0.9375rem; letter-spacing: 0.08em; }

.gs-countdown { margin-top: 2rem; text-align: center; }
.gs-countdown .ev-countdown-satz { justify-content: center; }
.gs-countdown .ev-countdown-zahl { font-family: var(--schrift-anzeige); font-weight: 400; }
.gs-countdown .ev-countdown-wort,
.gs-countdown .ev-countdown-fein {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.gs-countdown .ev-countdown-fein { text-align: center; }

.gs-kopfbild {
  max-width: 66rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-inline: var(--rand);
}
.gs-kopfbild img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  /* Nur eine Goldlinie · der Doppelrahmen gehört dem Kopf allein. */
  border: 1px solid var(--akzent);
}

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

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

.gs-ueberschrift {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--akzent-text);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1.25rem;
}
.gs-ueberschrift--mitte { text-align: center; }

.gs-gruss { text-align: center; }
.gs-grusstext {
  font-family: var(--schrift-anzeige);
  font-size: clamp(1.35rem, 1.05rem + 1.7vw, 2.1rem);
  font-weight: 300;
  line-height: 1.4;
  text-wrap: pretty;
}

.gs-paar { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .gs-paar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(2rem, 5vw, 3.5rem);
  }
  /* Die senkrechte Goldlinie zwischen den Spalten · sehr leise, denn
     sie trennt und betont nicht. */
  .gs-paar .gs-spalte + .gs-spalte {
    border-left: 1px solid var(--linie);
    padding-left: clamp(2rem, 5vw, 3.5rem);
  }
}
.gs-fliess { color: var(--schrift-2); }
.gs-spalte .ev-ort-name {
  font-family: var(--schrift-anzeige);
  font-size: 1.45rem;
  font-weight: 400;
}

/* == Ablauf =========================================================
   Wie ein Menü: Uhrzeit links, Titel rechts, dazwischen eine
   Punktreihe. Sie kommt aus einem Pseudoelement mit wiederholtem
   Verlauf · Punkte als Zeichen im Markup wären für ein
   Vorleseprogramm eine Folge von Punkten. */

.gs-ablaufblock .ev-ablauf-punkt { padding-block: 1rem; }
.gs-ablaufblock .ev-ablauf-punkt + .ev-ablauf-punkt { border-top: 1px solid var(--linie); }

.gs-ablaufblock .ev-ablauf-zeit {
  float: left;
  min-width: 4.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--akzent-text);
  padding-top: 0.35rem;
}
.gs-ablaufblock .ev-ablauf-text { overflow: hidden; }
.gs-ablaufblock .ev-ablauf-titel {
  font-family: var(--schrift-anzeige);
  font-size: 1.35rem;
  font-weight: 400;
}
.gs-ablaufblock .ev-ablauf-satz { margin-top: 0.15rem; }

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

.gs-hinweisblock .ev-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}
.gs-hinweisblock .ev-hinweis {
  padding: 1.4rem;
  border: 1px solid var(--linie);
}
.gs-hinweisblock .ev-hinweis h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent-text);
}

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

.gs-galerieblock .ev-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.25rem;
}
.gs-galerieblock .ev-galerie-bild img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--akzent);
}
.gs-galerieblock figcaption { text-align: center; font-size: 0.8125rem; letter-spacing: 0.05em; }

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

.gs-rsvpblock { background: var(--grund-2); }
.gs-rsvpblock .ev-feld input,
.gs-rsvpblock .ev-feld textarea {
  background: var(--grund);
  border-color: var(--linie);
  color: var(--schrift);
}
.gs-rsvpblock .ev-feld input::placeholder,
.gs-rsvpblock .ev-feld textarea::placeholder { color: #6d7488; }
.gs-rsvpblock .ev-feld label,
.gs-rsvpblock .ev-antwort legend {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--schrift-2);
}
.gs-rsvpblock .ev-antwort-wahl label {
  background: var(--grund);
  border-color: var(--linie);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}
.gs-rsvpblock .ev-knopf { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.875rem; }
.gs-rsvpblock .ev-rsvp-danke { background: var(--grund); border-color: var(--linie); }
.gs-rsvpblock .ev-rsvp-danke-gross { font-family: var(--schrift-anzeige); font-weight: 400; }

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

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

.gs-kontaktblock { text-align: center; }
.gs-kontaktblock .ev-kontakt h3 {
  font-family: var(--schrift-anzeige);
  font-size: 1.5rem;
  color: var(--akzent-text);
}

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

@media (prefers-reduced-motion: no-preference) {
  .gs-rahmen { animation: gs-auf 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .gs-strich { animation: gs-strich 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
  .gs-countdown { animation: gs-auf 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
}

@keyframes gs-auf {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes gs-strich {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

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

@media print {
  .gs-rahmen { background: #fff; border: 2px solid #000; clip-path: none; }
  .gs-rahmen::before, .gs-rahmen::after { display: none; }
  .gs-anlass, .gs-ueberschrift, .gs-rahmen .ev-termin-datum,
  .gs-hinweisblock .ev-hinweis h3, .gs-ablaufblock .ev-ablauf-zeit { color: #000; }
  .gs-strich { background: #000; }
}