/* Warmweiss, Tinte, ein Salbei-Akzent. Schreibschrift nur in der Begruessung. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("/static/fonts/pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #faf7f2;
  --tinte: #2b2a28;
  --akzent: #7d8f7a;
  --gedaempft: #5d5b57;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--grund);
  color: var(--tinte);
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  font-size: 118.75%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

main {
  max-width: 36rem;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 7rem) 1.5rem 4rem;
  text-align: center;
}

p { margin: 0 0 1rem; }

.gruss {
  font-family: "Pinyon Script", "Cormorant Garamond", cursive;
  font-size: 2.3rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

.einleitung {
  font-size: 1.2rem;
  max-width: 22em;
  margin: 0 auto 2.5rem;
}

.kopfzeile {
  font-style: italic;
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.paar {
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  /* Sperrung auch rechts ausgleichen, sonst steht der Name nicht mittig */
  padding-left: 0.32em;
}

.datum, .stadt {
  font-size: 1.2rem;
  margin: 0;
}

.trenner {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.75rem auto;
  max-width: 20rem;
  color: var(--akzent);
}
.trenner span { width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); }
.trenner::before, .trenner::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--akzent);
}

section { text-align: left; max-width: 24rem; margin: 0 auto; }

h2 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 0.25rem;
}

.hinweis { color: var(--gedaempft); font-style: italic; }

.folgt { font-style: italic; font-size: 1.2rem; }