/* Sophie & Jakob · gebaut mit papeterie/digital/vorlage, Stil „klassisch“.
   Schriften: SIL Open Font License, siehe schriften/OFL-*.txt */

@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/libre-caslon-display-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/libre-caslon-display-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/libre-caslon-text-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/libre-caslon-text-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/libre-caslon-text-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/libre-caslon-text-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Petit Formal Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/petit-formal-script-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Petit Formal Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/petit-formal-script-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Vorlage für digitale Einladungen: Aufbau, Leiste, Knöpfe, Formular, Teilen.
   Farben, Schriften und Umschlag setzt der Stil (stile/<stil>/stil.css), er steht
   in stil.css hinter diesem Teil und darf alles überschreiben.

   Gebaut für Handys ab 360 px, auf dem Desktop eine ruhige, zentrierte Spalte.
   Lesetext mindestens 17 px, Tippflächen mindestens 44 px, Kontrast nach WCAG AA. */

:root {
  --grund: #ffffff;
  --schrift: #222222;
  --spalte: 36rem;
  --rand: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --abstand: clamp(72px, 18vw, 120px);
  --lese: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background: var(--grund);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--schrift);
  font-size: var(--lese);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}

p, h1, h2, h3, ol, ul, figure, fieldset { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ol, ul { padding: 0; list-style: none; }
img, svg, iframe { display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Nur für Screenreader */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sprungziele für die Sprachwahl ohne JavaScript (#de, #en) */
.anker { position: absolute; top: 0; left: 0; width: 0; height: 0; }
/* Sprungziel an Ort und Stelle, etwa #en-antwort vor dem gemeinsamen Formular */
.sprung { display: block; width: 100%; height: 0; }

:focus-visible {
  outline: 2px solid var(--fokus, currentColor);
  outline-offset: 3px;
}
main:focus, [tabindex="-1"]:focus { outline: none; }

/* Liniensymbole */
.sym {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sym.gross { width: 40px; height: 40px; stroke-width: 1.1; }

/* ---------------------------------------------------------------------------
   Spalte und Abschnitte */

.start, .abschnitt, .fuss {
  width: 100%;
  max-width: calc(var(--spalte) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.abschnitt { padding-top: var(--abstand); }

/* Die Startansicht passt auch auf kleine sichtbare Flächen (360 × 640, iPhone mit
   eingeblendeten Leisten), deshalb hängen die senkrechten Maße an svh. */
.start {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: center;
  padding-block: clamp(52px, 9svh, 76px) clamp(56px, 8svh, 68px);
}

.weiter {
  position: absolute;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  translate: -50% 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   Leiste oben rechts: Sprache, Musik, Dunkelmodus */

/* Beim Lesen nach unten verschwindet sie, beim Zurückscrollen und ganz oben ist sie da
   (Klasse leiste-weg setzt einladung.js). So deckt sie keine Überschrift und keinen Knopf ab. */
.leiste {
  position: fixed;
  z-index: 60;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.leiste-weg .leiste { transform: translateY(calc(-100% - 20px)); opacity: 0; }
.standbild .leiste { display: none; }
.sprachen, .rund {
  background: var(--leiste-grund, var(--grund));
  box-shadow: inset 0 0 0 1px var(--leiste-kontur, transparent), 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 10px rgb(0 0 0 / 0.07);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sprachen { display: flex; border-radius: 24px; padding: 2px; }
.sprachen a {
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-decoration: none;
}
.sprachen a { --sprache-gewaehlt: 0; }
.sprachen a[aria-current="true"] { --sprache-gewaehlt: 1; background: var(--schrift); color: var(--grund); }
/* Die Hervorhebung folgt --sprache-gewaehlt: Mit JavaScript ist es aria-current, ohne setzt die
   Seite es nach :target (sprachCss in seite.mjs), damit bei /#en die Pille auf EN steht und
   nicht fest auf der ersten Sprache. Bei 0 und 1 ergibt das genau die Farben von oben. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .sprachen a, .sprachen a[aria-current="true"] {
    background: color-mix(in srgb, var(--schrift) calc(var(--sprache-gewaehlt) * 100%), transparent);
    color: color-mix(in srgb, var(--grund) calc(var(--sprache-gewaehlt) * 100%), var(--schrift));
  }
}
.rund {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--schrift);
}
.rund .sym { grid-area: 1 / 1; }
.ohne-js .rund { display: none; }
[data-thema-knopf] .sonne, [data-musik] .aus { display: none; }
[data-musik][aria-pressed="true"] .an { display: none; }
[data-musik][aria-pressed="true"] .aus { display: block; }

/* ---------------------------------------------------------------------------
   Umschlag: nur mit JavaScript. Ohne läuft die Seite direkt.
   Fällt das Skript aus, führt der Knopf als Link zu #inhalt und blendet die Szene aus. */

.umschlag-szene { display: none; }
.mit-js:not(.offen) .umschlag-szene { display: flex; }
html:has(#inhalt:target) .umschlag-szene { display: none !important; }
html.mit-js:not(.offen):not(:has(#inhalt:target)) body { overflow: hidden; }
.u-persoenlich, .persoenlich .u-allgemein { display: none; }
.persoenlich .u-persoenlich { display: inline; }

/* Nach dem Umschlag: Die Karte hat den Bildschirm in der Farbe der Seite bedeckt,
   jetzt erscheint nur noch der Text der Seite. */
.einblenden main, .einblenden .fuss { animation: seite-ein 0.35s ease-out both; }
@keyframes seite-ein { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------------
   Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid var(--schrift);
  border-radius: 2px;
  background: var(--schrift);
  color: var(--grund);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.knopf .sym { width: 20px; height: 20px; }
.knopf > span { text-wrap: balance; }
.knopf:hover { background: var(--schrift-hover, var(--schrift)); }
.knopf-leise {
  background: transparent;
  color: var(--schrift);
  border-color: var(--sand-linie, currentColor);
}
.knopf-leise:hover { background: var(--feld); }
.knopf[disabled] { opacity: 0.6; cursor: progress; }

.knoepfe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
}
.knoepfe .knopf, .knoepfe .mit-hilfe { width: 100%; max-width: 21rem; }
.mit-hilfe { display: flex; flex-direction: column; }
.mit-hilfe .hilfe { margin-top: 8px; font-size: 17px; }

.hilfe {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.45;
  text-wrap: pretty;
  font-style: italic;
  color: var(--sand-schrift, inherit);
}

/* ---------------------------------------------------------------------------
   Countdown */

.cd-zahlen {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 7vw, 56px);
}
.cd-teil { display: flex; flex-direction: column; align-items: center; min-width: 4.6rem; }
.cd-zahl { line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.cd-name { margin-top: 12px; }
.cd-teil .cd-eins, .cd-teil[data-eins] .cd-viele { display: none; }
.cd-teil[data-eins] .cd-eins { display: inline; }
.ohne-js .cd-zahlen, .mit-js .cd-ohne-js { display: none; }

/* ---------------------------------------------------------------------------
   Ablauf und Einträge (Übernachtung, Gut zu wissen, Anfahrt) */

.ablauf { display: flex; flex-direction: column; align-items: center; }
.ablauf li { display: flex; flex-direction: column; align-items: center; }
.ablauf li + li::before {
  content: '';
  display: block;
  width: 0;
  height: 32px;
  margin: 18px auto;
  border-left: 1px solid var(--sand-linie, currentColor);
}
.ablauf .sym { width: 30px; height: 30px; margin-bottom: 12px; color: var(--sand-schrift, inherit); }

.eintraege { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.eintrag { display: flex; flex-direction: column; align-items: center; max-width: 30em; }
.eintrag .sym { width: 28px; height: 28px; margin-bottom: 12px; color: var(--sand-schrift, inherit); }
.eintrag .text { text-wrap: balance; }
.eintrag .mehr { margin-top: 8px; }
.eintrag .mehr a { display: inline-block; padding: 10px 4px; }

/* ---------------------------------------------------------------------------
   Karte: erst nach Zustimmung von Google laden */

/* So breit wie die Knöpfe darunter. Der Hinweis bestimmt die Mindesthöhe, damit nichts
   abgeschnitten wird; geladen gilt das Seitenverhältnis. */
.karte {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 21rem;
  aspect-ratio: 4 / 3;
  margin-top: 32px;
  background: var(--feld);
}
@media (min-width: 768px) { .karte { aspect-ratio: 3 / 2; } }
.karte-platz {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  font-size: 17px;
  line-height: 1.5;
}
.karte-platz p { max-width: 24em; text-wrap: balance; }
.karte-platz > .sym { color: var(--sand-schrift, inherit); }
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte.geladen .karte-platz { display: none; }
.ohne-js .karte { display: none; }

/* ---------------------------------------------------------------------------
   Formular */

.formular {
  width: 100%;
  max-width: 30rem;
  margin: 36px auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
fieldset { border: 0; padding: 0; min-width: 0; }
.nur-zusage { display: flex; flex-direction: column; gap: 30px; }
.feld > label, .feld > legend, .essen-teil > label {
  display: block;
  padding: 0;
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 1.4;
  text-wrap: balance;
}
.feld > .hilfe { margin: -4px 0 10px; }

.formular input[type="text"], .formular input[type="number"] {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--sand-linie, currentColor);
  border-radius: 0;
  background: var(--feld);
  font-size: 18px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}
.formular input:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.formular input[aria-invalid="true"] { border-bottom: 2px solid var(--fehler); }

/* Zusage oder Absage: große Flächen statt kleiner Punkte */
.feld > .option, .option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--feld);
  cursor: pointer;
  line-height: 1.35;
}
.feld > .option { margin-bottom: 0; font-size: 18px; }
.option + .option { margin-top: 8px; }
.option > span { text-wrap: balance; }
.option input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--schrift);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
}
.option input::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--schrift);
  transform: scale(0);
  transition: transform 0.15s;
}
.option input:checked::before { transform: scale(1); }
.option input:focus-visible { outline: none; }
.option:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.option:has(input:checked) { background: var(--feld-aktiv); box-shadow: inset 0 0 0 1px var(--schrift); }
.wahl[aria-invalid="true"] .option, .option:has(input[aria-invalid="true"]) { box-shadow: inset 3px 0 0 var(--fehler); }

/* Zähler mit Minus und Plus */
.zaehler { display: flex; width: max-content; max-width: 100%; }
.zaehler input[type="number"] {
  width: 56px;
  text-align: center;
  -moz-appearance: textfield;
}
.zaehler input::-webkit-inner-spin-button, .zaehler input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.z-knopf {
  flex: none;
  width: 48px;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--sand-linie, currentColor);
  background: var(--feld);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.z-knopf:hover { background: var(--feld-aktiv); }
.z-knopf .sym { width: 20px; height: 20px; }
.zaehler input + .z-knopf, .zaehler .z-knopf + input { border-left: 1px solid var(--grund); }
.ohne-js .z-knopf { display: none; }
.ohne-js .zaehler, .ohne-js .zaehler input[type="number"] { width: 100%; }

.essen { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.essen-teil { flex: 1 1 152px; }

.fehler {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--fehler);
  text-wrap: pretty;
}
.fehler .sym { width: 20px; height: 20px; margin-top: 1px; }

.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.datenschutz {
  font-size: 17px;
  line-height: 1.5;
  font-style: italic;
  text-align: center;
  text-wrap: balance;
  color: var(--sand-schrift, inherit);
}
.meldung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fehler-grund);
  color: var(--fehler-schrift);
  box-shadow: inset 3px 0 0 var(--fehler);
  font-size: 17px;
  line-height: 1.5;
  text-wrap: pretty;
}
.meldung .sym { margin-top: 1px; color: var(--fehler); }
.senden-zeile { display: flex; justify-content: center; }
.senden-zeile .knopf { width: 100%; max-width: 21rem; }

.danke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 30rem;
  margin: 36px auto 0;
}
.danke > .sym { color: var(--sand-schrift, inherit); }
.danke-text { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.danke-titel { text-wrap: balance; }

/* Nach der Antwortfrist und nach der Hochzeit (Klassen setzt einladung.js) */
.frist-vorbei {
  display: none;
  align-items: flex-start;
  gap: 12px;
  max-width: 30rem;
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--feld);
  box-shadow: inset 3px 0 0 var(--sand-linie, currentColor);
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.frist-vorbei .sym { margin-top: 1px; color: var(--sand-schrift, inherit); }
.nach-frist .frist-vorbei { display: flex; }
.nach-frist .frist-aus, .vorbei .ende-aus { display: none !important; }
.cd-titel-heute, .cd-titel-danach, .vorbei .cd-titel { display: none; }
.vorbei .cd-titel-danach { display: inline; }
/* Am Tag selbst und danach passt die Überschrift zum Text darunter. Die Klassen setzt
   countdown() im selben Schritt wie den Text, deshalb an der Sektion. */
.countdown.heute .cd-titel, .countdown.danach .cd-titel { display: none; }
.countdown.heute .cd-titel-heute, .countdown.danach .cd-titel-danach { display: inline; }

/* ---------------------------------------------------------------------------
   Teilen */

.teilen-text { text-wrap: pretty; }
.qr-block { display: flex; flex-direction: column; align-items: center; margin-top: 28px; }
.qr {
  width: 216px;
  padding: 10px;
  background: var(--qr-grund, #fbf8f2);
  border-radius: 4px;
}
.qr svg { width: 100%; height: auto; }
.qr .qr-grund { fill: var(--qr-grund, #fbf8f2); }
.qr-zeigen { display: none; margin-bottom: 12px; font-size: 17px; font-style: italic; text-wrap: balance; color: var(--sand-schrift, inherit); }
.adresse-link { margin-top: 14px; font-size: 17px; word-break: break-all; }
.adresse-link a { display: inline-block; padding: 11px 4px; }
.kopieren-zeile { margin-top: -4px; }
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-size: 17px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  color: inherit;
  cursor: pointer;
}
.textlink .sym { width: 18px; height: 18px; }
.ohne-js .kopieren-zeile { display: none; }
.status { min-height: 1.6em; margin-top: 2px; font-size: 17px; color: var(--sand-schrift, inherit); }
/* Auf dem Handy kann man den eigenen Bildschirm nicht scannen: erst teilen, der QR-Code
   steht darunter zum Zeigen. Auf breiten Bildschirmen (Tablet am Messestand) bleibt er oben. */
@media (max-width: 599px) {
  .teilen .qr-block { order: 1; margin-top: 40px; }
  .qr-zeigen { display: block; }
}
.status .ok { display: inline-flex; align-items: center; gap: 8px; }
.status .sym { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   Fuß */

.fuss {
  gap: 12px;
  padding-block: calc(var(--abstand) * 1.15) max(48px, env(safe-area-inset-bottom));
}
.fuss .knoepfe { margin-top: 10px; }
.muster { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: 40px; }
.muster > .linie { margin-bottom: 18px; }
.muster-text { max-width: 24em; font-size: 18px; line-height: 1.5; text-wrap: balance; }
.recht { margin-top: 4px; font-size: 15px; }
.recht a { display: inline-block; padding: 12px 6px; }

/* Unterseiten: Dank, Impressum, Datenschutz */
.unterseite > .monogramm { margin-bottom: 36px; }
.unterseite .kopf + .linie { margin: 16px auto 28px; }
.recht-seite { justify-content: flex-start; padding-top: 64px; }
.rechtstext { width: 100%; max-width: 34rem; text-align: left; }
.rechtstext .kopf { text-align: center; }
.rechtstext .kopf + .linie { margin: 16px auto 32px; }
.rechtstext h2 { margin: 32px 0 6px; }
.rechtstext p { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.rechtstext p + p { margin-top: 12px; }
.recht-seite .knoepfe { margin-top: 44px; }

/* ---------------------------------------------------------------------------
   Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Drucken: nur die Einladung, ohne Bedienelemente.
   Weg bleibt alles, was auf Papier nichts nützt: Countdown (stimmt morgen nicht mehr),
   „Zur Antwort“, der Antwortblock samt Formular und der Kalender (nur Knöpfe).
   Die Frist steht weiter auf der Startseite, der QR-Code führt zurück zur Seite.
   Farben für den Druck setzt der Stil (immer die helle Fassung). */

@media print {
  .leiste, .umschlag-szene, .weiter, .karte, .knoepfe, .formular, .danke, .status, .kopieren-zeile, .muster,
  .countdown, .zur-antwort, .antwort, .kalender { display: none !important; }
  /* Tonbänder: Fläche und Schatten über die ganze Breite druckt der Browser sonst als Balken */
  .band { background: none !important; box-shadow: none !important; clip-path: none !important; }
  html, body { background: #fff !important; }
  .start { min-height: auto; padding-block: 0 24px; }
  .abschnitt { padding-top: 56px; break-inside: avoid; }
  .kopf, .kopf + .linie, .etikett-titel { break-after: avoid; }
}


/* Stil „klassisch“ · digital
   Wie das gedruckte Set 1 (papeterie/set1-klassisch/stil.css): Buchtypografie mit
   Libre Caslon Display für Namen und Überschriften (nie unter 24 px), Libre Caslon Text
   für Lesetext, Petit Formal Script nur für das &. Zentrierte Achse, viel Ruhe, keine
   Rahmen, keine Goldeffekte. Dunkelmodus: tiefes Grün als Grund, Creme als Schrift.

   Sandtöne wie im Druck, für den Bildschirm nach WCAG geprüft (Kontrast auf Papier):
   --sand nur für große Glyphen wie das & (3,3:1, für den Bildschirm etwas dunkler als
   im Druck, dort #ab9068), --sand-linie für Linien (3,8:1), --sand-schrift für kleine
   Schrift in Sand (5,4:1). */

:root {
  --papier: #f6f1e7;
  --grund: var(--papier);
  --schrift: #24392f;            /* 11:1 auf Papier */
  --schrift-hover: #1a2b23;
  --sand: #9c8159;
  --sand-linie: #8f7650;
  --sand-schrift: #725d3e;
  --feld: #eee7d8;
  --feld-aktiv: #e6dccb;
  --fokus: #24392f;
  --fehler: #9b3a26;
  --fehler-grund: #f5e4dc;
  --fehler-schrift: #5e2114;
  --leiste-grund: rgb(246 241 231 / 0.88);
  --qr-grund: #fbf8f2;

  /* Tonbänder: Countdown in Futtergrün, Antwort auf etwas tieferem Papier */
  --band-gruen: #24392f;
  --band-papier: #ede5d4;
  --band-feld: #f9f6ef;
  --band-feld-aktiv: #fffdf8;

  /* Umschlagszene in beiden Designs in Futtergrün, Schrift und Knopf in Creme */
  --szene: #24392f;
  --szene-schrift: #efe7d6;

  /* Umschlag: Papier bleibt in beiden Designs creme */
  --u-papier: #efe6d4;
  --u-papier-hell: #f6efe2;
  --u-papier-tief: #e3d6bf;
  --u-futter: #24392f;
  --u-futter-linie: #2f4a3d;
  --u-falz: rgb(122 98 60 / 0.3);
  --karte-papier: #fbf8f1;

  --titel: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --text: 'Libre Caslon Text', Georgia, serif;
  --schreibschrift: 'Petit Formal Script', 'Libre Caslon Text', cursive;
  --sperrung: 0.17em;

  /* Namen des Paares. Untergrenze 40 px (Display nie unter 24 px). Auf niedrigen
     Bildschirmen richtet sich die Größe auch nach der Höhe (svh), damit die Startansicht
     ganz passt. Lange Namen brechen ausgeglichen um, statt zu schrumpfen. */
  --namen-groesse: clamp(2.5rem, min(10.6vw, 6.2svh), 4.4rem);
}

/* Dunkel: nach Systemeinstellung, außer jemand hat „hell“ gewählt, oder per Umschalter */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #1d2b24;
    --schrift: #efe7d6;          /* 12:1 auf Grün */
    --schrift-hover: #fffaf0;
    --sand: #c9b08a;
    --sand-linie: #a8916b;
    --sand-schrift: #cdb68f;     /* 7:1 */
    --feld: #253830;
    --feld-aktiv: #2e4439;
    --fokus: #efe7d6;
    --fehler: #f2a48f;
    --fehler-grund: #3b2b25;
    --fehler-schrift: #f8dcd2;
    --szene: #16231d;
    --leiste-grund: rgb(37 56 48 / 0.92);
    --leiste-kontur: #a8916b;
    --qr-grund: #efe7d6;
    --band-gruen: #16231d;
    --band-papier: #23362c;
    --band-feld: #1a2721;
    --band-feld-aktiv: #2e4439;
    --u-futter-linie: #2b4538;
  }
  :root:not([data-thema="hell"]) [data-thema-knopf] .mond { display: none; }
  :root:not([data-thema="hell"]) [data-thema-knopf] .sonne { display: block; }
}
:root[data-thema="dunkel"] {
  --grund: #1d2b24;
  --schrift: #efe7d6;
  --schrift-hover: #fffaf0;
  --sand: #c9b08a;
  --sand-linie: #a8916b;
  --sand-schrift: #cdb68f;
  --feld: #253830;
  --feld-aktiv: #2e4439;
  --fokus: #efe7d6;
  --fehler: #f2a48f;
  --fehler-grund: #3b2b25;
  --fehler-schrift: #f8dcd2;
  --szene: #16231d;
  --leiste-grund: rgb(37 56 48 / 0.92);
  --leiste-kontur: #a8916b;
  --qr-grund: #efe7d6;
  --band-gruen: #16231d;
  --band-papier: #23362c;
  --band-feld: #1a2721;
  --band-feld-aktiv: #2e4439;
  --u-futter-linie: #2b4538;
  color-scheme: dark;
}
:root[data-thema="dunkel"] [data-thema-knopf] .mond { display: none; }
:root[data-thema="dunkel"] [data-thema-knopf] .sonne { display: block; }
:root[data-thema="hell"] { color-scheme: light; }

body {
  font-family: var(--text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
   Typografie aus dem gedruckten Set */

.titel {
  font-family: var(--titel);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}
.namen .name { display: inline-block; }

.versal {
  font-family: var(--text);
  font-style: normal;
  font-size: 15px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  font-variant-ligatures: none;
}
/* Versalzeile als Block, die Sperrung nach dem letzten Buchstaben wird ausgeglichen */
.versal.zeile { display: block; margin-right: calc(-1 * var(--sperrung)); }

.kursiv { font-style: italic; }
.gross { font-size: 20px; line-height: 1.5; }
.z { font-size: 0.9em; }

.und {
  font-family: var(--schreibschrift);
  font-weight: 400;
  font-style: normal;
  color: var(--sand);
  line-height: 1;
}

.linie {
  width: 56px;
  height: 0;
  border-top: 1px solid var(--sand-linie);
}

.monogramm {
  --mono: 32px;                 /* Display, nie unter 24 px */
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--titel);
  font-size: var(--mono);
  line-height: 1;
}
.monogramm .und {
  font-size: 1.12em;
  margin: 0 0.02em 0 0.06em;
  position: relative;
  top: 0.1em;
}

/* ---------------------------------------------------------------------------
   Start: die Vorderseite der Einladung für den Bildschirm */

.start .monogramm { --mono: 34px; }
.start .einleitung {
  margin-top: clamp(14px, 3svh, 44px);
  font-size: 19.5px;
  line-height: 1.5;
}
.start .paar {
  margin-top: clamp(18px, 4svh, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--namen-groesse);
  max-width: 100%;
}
.start .paar .namen { display: block; max-width: 8.5em; line-height: 1.08; }
.start .paar > .und { font-size: 1.62em; margin: 0.14em 0 0.04em; }
.start .linie { margin-block: clamp(18px, 3.6svh, 44px) clamp(16px, 2.8svh, 32px); }
.angaben p + p { margin-top: clamp(12px, 2.2svh, 20px); }
.angaben .kursiv { display: block; font-size: 21px; line-height: 1.35; }
.start .frist { margin-top: clamp(16px, 3svh, 40px); font-size: 18px; text-wrap: balance; }
.start .knopf { margin-top: clamp(10px, 1.8svh, 16px); }
/* Niedrige Bildschirme (360 × 640, iPhone mit eingeblendeten Leisten bei 390 × 664):
   Monogramm bis „Zur Antwort“ samt Pfeil passen auf den ersten Blick. */
@media (max-height: 760px) {
  .start { padding-top: clamp(52px, 8svh, 76px); }
  .start .monogramm { --mono: 28px; }
  .start .einleitung { margin-top: clamp(12px, 2.2svh, 44px); font-size: 17.5px; line-height: 1.4; }
  .start .paar { margin-top: clamp(14px, 3svh, 60px); }
  .start .paar .namen { line-height: 1.04; }
  .start .paar > .und { font-size: 1.3em; margin: 0.08em 0 0; }
  .start .linie { margin-block: clamp(14px, 2.6svh, 44px) clamp(12px, 2.2svh, 32px); }
  .angaben p + p { margin-top: clamp(8px, 1.6svh, 20px); }
  .angaben .versal { line-height: 1.35; }
  .angaben .kursiv { font-size: 18.5px; line-height: 1.3; }
  .start .frist { margin-top: clamp(12px, 2.2svh, 40px); font-size: 17px; line-height: 1.4; }
  .start .knopf { margin-top: 8px; min-height: 46px; padding-block: 10px; }
}
.start .weiter { color: var(--sand-schrift); }
.start .weiter .sym { width: 26px; height: 26px; }

/* ---------------------------------------------------------------------------
   Abschnitte: Überschrift, feine Linie, Etikett über Text */

.kopf { font-size: clamp(34px, 9.4vw, 44px); }
.kopf + .linie { margin: 16px auto 36px; }
.etikett-titel { margin-bottom: 26px; }
.etikett { margin-bottom: 4px; }

.countdown .cd-zahl { font-family: var(--titel); font-size: clamp(46px, 14vw, 68px); }
.countdown .cd-name { font-size: 15px; color: var(--sand-schrift); }
.countdown .kursiv { font-size: 21px; line-height: 1.45; max-width: 22em; }

/* Tonbänder ohne Rahmen über die ganze Breite: der Countdown in Futtergrün (wie das
   Innere des Umschlags), die Antwort auf tieferem Papier als Handlungsblock. */
.band {
  background: var(--band);
  box-shadow: 0 0 0 100vmax var(--band);
  clip-path: inset(0 -100vmax);
}
.countdown.band {
  --band: var(--band-gruen);
  --schrift: #efe7d6;
  --sand-schrift: #cdb68f;
  --fokus: #efe7d6;
  color: var(--schrift);
  padding-block: clamp(56px, 14vw, 88px);
}
.antwort.band {
  --band: var(--band-papier);
  --feld: var(--band-feld);
  --feld-aktiv: var(--band-feld-aktiv);
  margin-top: calc(var(--abstand) * 1.15);
  padding-block: clamp(64px, 16vw, 104px);
}
.antwort.band .zaehler input + .z-knopf, .antwort.band .zaehler .z-knopf + input { border-left-color: var(--band); }

.ablauf .was { font-size: 21px; line-height: 1.35; max-width: 17em; text-wrap: balance; }
.ablauf .wo { font-size: 17px; font-style: italic; color: var(--sand-schrift); }
.ablauf-tag + .ablauf-tag { margin-top: 56px; }

.ort-name .kursiv { display: block; font-size: 21px; line-height: 1.35; }
.ort-name .adresse { display: block; margin-top: 6px; }
.ornament {
  display: block;
  width: 58px;
  height: 58px;
  margin: -6px auto 22px;
  background: var(--schrift);
  -webkit-mask: var(--ornament) center / contain no-repeat;
  mask: var(--ornament) center / contain no-repeat;
}

.antwort .frist { margin-top: -12px; }
.danke-titel { font-size: 23px; line-height: 1.4; }

/* ---------------------------------------------------------------------------
   Fuß */

.fuss-paar { font-size: 36px; }
.fuss-paar .und { font-size: 1.25em; }
.fuss .versal { color: var(--schrift); }
.gestaltet { margin-top: 26px; font-size: 15px; letter-spacing: 0.02em; color: var(--sand-schrift); }
.muster .versal { color: var(--sand-schrift); }
.gestaltet.nennung { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Umschlag. Seitenverhältnis C5 hochkant, alle Teile in Einheiten von 162 × 229. */

/* Szene in Futtergrün (wie das Innere des Umschlags), auch im hellen Design: Der cremefarbene
   Umschlag hebt sich ab, auf dem Messe-Tablet wie als kleines Bild auf Pinterest.
   Reicht die Höhe nicht (langer Name in ?fuer=, kleines Handy), lässt sich die Szene
   scrollen, statt oben und unten abzuschneiden. Oben bleiben mindestens 64 px für die Leiste. */
.umschlag-szene {
  --schrift: var(--szene-schrift);
  --schrift-hover: #fffaf0;
  --grund: var(--szene);
  --fokus: var(--szene-schrift);
  --sand-linie: #a8916b;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: clamp(22px, 4.2vh, 40px);
  padding: 76px 16px max(28px, env(safe-area-inset-bottom));
  background: var(--szene);
  color: var(--schrift);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 0.6s ease;
}
.umschlag-szene.oeffnet { overflow: hidden; }
.umschlag-szene.blende { opacity: 0; }
/* Über dem Schatten des Umschlags, sonst färbt er den Knopf grau */
.u-ueber, .u-knopf { position: relative; z-index: 1; }
.u-ueber { color: var(--schrift); font-size: 15px; text-align: center; max-width: 22em; text-wrap: balance; }
.u-ueber .fuer-name {
  display: block;
  margin: 6px calc(-1 * var(--sperrung)) 0 0;
  font-size: clamp(19px, 6vw, 26px);
  line-height: 1.25;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.u-ueber .fuer-name .einheit { display: inline-block; }

/* Persönlicher Umschlag: Platz für einen zweizeiligen Namen über dem Umschlag */
.persoenlich .u-buehne { --uw: max(160px, min(88vw, 380px, calc((100svh - 330px) * 0.7074))); }
.u-buehne {
  --uw: max(180px, min(88vw, 380px, calc((100svh - 250px) * 0.7074)));
  position: relative;
  width: var(--uw);
  aspect-ratio: 162 / 229;
  cursor: pointer;
  flex: none;
}
.u-umschlag {
  position: absolute;
  inset: 0;
  isolation: isolate;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.28)) drop-shadow(0 20px 34px rgb(0 0 0 / 0.38));
}
.u-umschlag > svg { position: absolute; left: 0; width: 100%; overflow: visible; }
.u-hinten { top: 0; height: 100%; z-index: 1; }
.u-vorne { top: 0; height: 100%; z-index: 3; filter: drop-shadow(0 -0.5px 1px rgb(70 52 22 / 0.22)); }
.u-klappe {
  top: 0;
  height: calc(var(--uw) * 106 / 162);
  z-index: 4;
  transform-origin: 50% 0;
  filter: drop-shadow(0 1.5px 1.5px rgb(70 52 22 / 0.2));
}
.u-klappe-innen {
  bottom: 100%;
  height: calc(var(--uw) * 106 / 162);
  z-index: 0;
  transform-origin: 50% 100%;
  visibility: hidden;
}

.u-papier { fill: var(--u-papier); }
.u-papier-hell { fill: var(--u-papier-hell); }
.u-papier-tief { fill: var(--u-papier-tief); }
.u-futter { fill: var(--u-futter); }
.u-futter-muster { fill: url(#u-muster); }
.u-muster-linie { fill: none; stroke: var(--u-futter-linie); stroke-width: 0.5; }
.u-falz { fill: none; stroke: var(--u-falz); stroke-width: 0.45; }

/* Die Karte im Umschlag. Schriftgrößen in cqw, damit sie klein im Umschlag und groß
   in der Mitte gleich aussieht. Verhältnisse wie auf der gedruckten A5-Karte. */
.u-karte {
  position: absolute;
  left: calc(11 / 162 * 100%);
  top: calc(16 / 229 * 100%);
  width: calc(140 / 162 * 100%);
  aspect-ratio: 148 / 210;
  z-index: 2;
  container-type: inline-size;
  background: var(--karte-papier);
  box-shadow: 0 0 0 0.5px rgb(90 70 40 / 0.12), 0 1px 2px rgb(50 36 12 / 0.1);
}
.u-karte.vorn { z-index: 6; }
.u-karte.gross {
  position: fixed;
  z-index: 70;
  transform-origin: 0 0;
  box-shadow: 0 1px 2px rgb(50 36 12 / 0.12), 0 18px 50px rgb(50 36 12 / 0.22);
}
.k-satz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8.5cqw 9cqw 8cqw;
  color: #24392f;
  --sand: #9c8159;
  --sand-linie: #8f7650;
}
/* Auf der kleinen Karte wäre das Monogramm unter 24 px: Versalien dann aus Libre Caslon Text */
.k-mono { --mono: 6.2cqw; font-family: var(--text); }
.k-einleitung { margin-top: 5cqw; font-size: 3.15cqw; line-height: 1.55; }
.k-paar { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
.k-paar .namen { font-size: 8.4cqw; line-height: 1.1; max-width: 70cqw; }
.k-paar .und { font-size: 14cqw; margin: 1.2cqw 0 0.4cqw; }
.k-satz .linie { width: 10cqw; margin: auto 0 5cqw; border-top-width: max(1px, 0.2cqw); }
.k-angaben .versal { font-size: 2.45cqw; }
.k-angaben .kursiv { display: block; font-size: 3.1cqw; line-height: 1.35; }
.k-angaben p + p { margin-top: 3cqw; }
.k-antwort { margin-top: auto; font-size: 2.6cqw; }

/* Siegel aus Wachs in Sand, das Monogramm ist geprägt */
.u-siegel {
  position: absolute;
  left: 50%;
  top: calc(99 / 229 * 100%);
  width: 35%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 5;
  filter: drop-shadow(0 1.5px 1.5px rgb(60 40 10 / 0.28)) drop-shadow(0 4px 8px rgb(60 40 10 / 0.16));
}
.u-siegel svg { width: 100%; height: 100%; }
/* Ein Ton dunkler als der Sand der Karten, damit es auf dem Creme des Umschlags trägt */
.u-siegel .wachs { fill: #a88b60; }
.u-siegel .praegung { fill: none; stroke: #7f6640; stroke-width: 1.3; }
.u-siegel .praegung.fein { stroke: #c9b38d; stroke-width: 0.7; }
.u-siegel-mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 5%;
  font-family: var(--titel);
  font-size: calc(var(--uw) * 0.112);
  line-height: 1;
  color: #6f5634;
  text-shadow: 0 1px 0 rgb(255 240 212 / 0.6), 0 -0.5px 0 rgb(50 34 12 / 0.4);
}
.u-siegel-mono .und {
  color: inherit;
  font-size: 1.12em;
  margin: 0 0.02em 0 0.06em;
  position: relative;
  top: 0.1em;
}
/* Leiser Hinweis zum Antippen */
.u-siegel::after {
  content: '';
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  border: 1px solid var(--sand-linie);
  opacity: 0;
  animation: siegel-puls 2.8s ease-out 1.4s 3;   /* dreimal, dann Ruhe (WCAG 2.2.2) */
}
.umschlag-szene.oeffnet .u-siegel::after { animation: none; opacity: 0; }
@keyframes siegel-puls {
  0% { opacity: 0.8; transform: scale(0.94); }
  100% { opacity: 0; transform: scale(1.28); }
}

.u-knopf { min-width: 15rem; }
.umschlag-laeuft .leiste { opacity: 0; pointer-events: none; transition: opacity 0.3s; }

/* ---------------------------------------------------------------------------
   Drucken: immer die helle Fassung auf weißem Papier, auch wenn am Bildschirm das dunkle
   Design gewählt ist (sonst käme cremefarbene Schrift auf weißes Papier). Die Selektoren
   sind so stark wie die des Dunkelmodus und stehen danach. */

@media print {
  :root, :root[data-thema], :root:not([data-thema]) {
    --grund: #ffffff;
    --schrift: #24392f;
    --sand: #9c8159;
    --sand-linie: #8f7650;
    --sand-schrift: #725d3e;
    --feld: #eee7d8;
    --qr-grund: #ffffff;
    color-scheme: light;
  }
}


:root { --ornament: url("ornament.svg"); }