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

@font-face {
  font-family: 'The Nautigal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/the-nautigal-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: 'The Nautigal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/the-nautigal-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: 'Castoro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/castoro-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: 'Castoro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/castoro-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: 'Castoro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/castoro-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: 'Castoro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/castoro-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;
}

/* 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 (nur mit "dunkelmodus": true) */

/* 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-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 „boho“ · digital
   Wie das gedruckte Set 3 (papeterie/set3-boho, Richtung A „Aquarell“): Eukalyptus als
   Aquarell-Girlande über der Startansicht und auf der Karte im Umschlag, ein kleiner Zweig
   als Trenner. Namen und Überschriften in The Nautigal (lockere Pinselschrift, nie unter
   24 px), alles andere in Castoro. Zentrierte Achse, keine Rahmen. Aufgebaut auf dem Stil
   „klassisch“ (gleicher Umschlag mit Siegel), Farben in Salbei und Eukalyptus.
   Die Aquarelle liegen in stile/boho/bilder (stil.json „bilder“), gemalt mit
   papeterie/set3-boho/ornament/malen.mjs.

   Kontraste auf Papier #f7f2ea (WCAG): Schrift 9,3:1, --sand nur für große Glyphen wie
   das & und für Linien (3,5:1), --sand-schrift für kleine Schrift in Eukalyptus (5,5:1).
   Im Countdown-Band (#3e5249) Creme 6,9:1, Etiketten 5,3:1. */

:root {
  --papier: #f7f2ea;
  --grund: var(--papier);
  --schrift: #34443b;            /* 9,3:1 auf Papier */
  --schrift-hover: #26332c;
  --sand: #6d887d;
  --sand-linie: #6d887d;
  --sand-schrift: #4f675d;
  --feld: #eee9de;
  --feld-aktiv: #e5dfd1;
  --fokus: #34443b;
  --fehler: #9b3a26;
  --fehler-grund: #f5e4dc;
  --fehler-schrift: #5e2114;
  --leiste-grund: rgb(247 242 234 / 0.88);
  --qr-grund: #fbf9f4;

  /* Tonbänder: Countdown in tiefem Salbei, Antwort auf etwas tieferem Papier */
  --band-gruen: #3e5249;
  --band-papier: #ebe5d8;
  --band-feld: #faf7f1;
  --band-feld-aktiv: #fffdf8;

  /* Umschlagszene in beiden Designs in tiefem Salbei, Schrift und Knopf in Creme */
  --szene: #3e5249;
  --szene-schrift: #efe9dd;

  /* Umschlag: Papier bleibt in beiden Designs creme */
  --u-papier: #efe8da;
  --u-papier-hell: #f6f0e5;
  --u-papier-tief: #e2d9c6;
  --u-futter: #3e5249;
  --u-futter-linie: #4d655b;
  --u-falz: rgb(122 98 60 / 0.3);
  --karte-papier: #fbf9f3;
  --u-futter-rand: #a3b6ab;      /* feine Linie und Punkte im Futter */
  --u-fokus: #34443b;            /* Fokusring am Siegel, auf dem Creme des Umschlags */
  /* Papierkorn der Karte: feines Rauschen als kleines SVG (feTurbulence), selbst erzeugt */
  --u-korn-bild: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27150%27 height=%27150%27%3E%3Cfilter id=%27k%27 x=%270%27 y=%270%27 width=%27100%25%27 height=%27100%25%27 color-interpolation-filters=%27sRGB%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.75%27 numOctaves=%273%27 seed=%2711%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .17 .28 0 0 0 -.09%27/%3E%3C/filter%3E%3Crect width=%27150%27 height=%27150%27 filter=%27url(%23k)%27/%3E%3C/svg%3E");

  /* Siegel: Wachs mit Licht und Tiefe, Prägung, Monogramm (farben.mjs rechnet sie aus der Akzentfarbe) */
  --siegel-wachs: #6d8a7f;
  --siegel-licht: #8ba699;
  --siegel-tief: #56716a;
  --siegel-praegung: #4d675e;
  --siegel-fein: #a9bdb2;
  --siegel-schrift: #3e564d;
  --siegel-dunkel: #22312b;      /* dunkle Kante am Riss */
  --siegel-bruch: #d6e0d9;       /* helle Bruchfläche des Wachses */
  --siegel-ring: var(--siegel-wachs);   /* Lichtschein beim Puls */

  /* Licht, Schatten und Korn auf dem Umschlag im Ton des Papiers (farben.mjs leitet sie für
     jedes Paar aus dem Papier ab) */
  --u-ton: #2a1d08;
  --u-ton-mittel: #5a4320;
  --u-ton-tief: #140d03;
  --u-ton-hell: #fffaf0;
  --u-korn-farbe: #5c4a2b;
  --u-schatten-nah: rgb(50 32 8 / 0.3);
  --u-schatten-weich: rgb(50 32 8 / 0.18);
  --u-schatten-fein: rgb(70 52 22 / 0.22);
  --u-schatten-hauch: rgb(40 28 10 / 0.05);
  --u-schein: rgb(255 250 238 / 0.85);
  --u-schein-mitte: rgb(255 250 238 / 0.32);

  --titel: 'The Nautigal', 'Castoro', cursive;
  --text: 'Castoro', Georgia, serif;
  --schreibschrift: 'The Nautigal', 'Castoro', 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);
}


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 tiefem Salbei (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: #efe9dd;
  --sand-schrift: #c2d1c8;
  --fokus: #efe9dd;
  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; }

/* ---------------------------------------------------------------------------
   Runde Formen: Knöpfe und Zähler als Pille, Auswahlfelder, Eingabefelder und Kästen mit
   weichen, großen Radien, passend zum runden Siegel und zum Bogen des Fotos. Statt einer
   Linie unten eine feine Kontur rundherum. Der Fokusring folgt dem Radius (outline zeichnet
   die Rundung mit). Der Stil „modern“ bleibt eckig, er lebt vom Raster. */

:root {
  --pille: 999px;
  --radius-feld: 20px;          /* einzeilige Eingabefelder, 52 px hoch */
  --radius-wahl: 28px;          /* Auswahlfelder: einzeilig eine Pille, zweizeilig weich gerundet */
  --radius-kasten: 24px;        /* Karte, QR-Code, Hinweise */
  /* Trennstriche im Zähler: die Linienfarbe, halb durchscheinend (ohne color-mix keine Striche) */
  --linie-zart: color-mix(in srgb, var(--sand-linie) 50%, transparent);
}

/* Die Rundung beginnt erst außerhalb der Schrift (bei 52 px Höhe und 24 px Innenabstand),
   deshalb bleibt der Innenabstand der Vorlage. So passen die Beschriftungen auch auf 360 px. */
.knopf { border-radius: var(--pille); }

/* Links und Textknöpfe: rund nur für den Fokusring */
a { border-radius: 6px; }
.textlink, .adresse-link a, .eintrag .mehr a, .recht a { border-radius: var(--pille); }

/* Eingabefelder */
.formular input[type="text"] {
  border: 1px solid var(--sand-linie);
  border-radius: var(--radius-feld);
  padding-inline: 20px;
}
.formular input[type="text"][aria-invalid="true"] {
  border: 1px solid var(--fehler);
  box-shadow: inset 0 0 0 1px var(--fehler);
}

/* Zusage oder Absage. Der Kreis steht konzentrisch im runden Ende der Pille. */
.feld > .option, .option {
  border-radius: var(--radius-wahl);
  padding: 12px 22px 12px 17px;
  box-shadow: inset 0 0 0 1px var(--sand-linie);
}
.option:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--schrift); }
.wahl[aria-invalid="true"] .option, .option:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1.5px var(--fehler); }

/* Zähler als eine Pille: Minus, Zahl, Plus. Zwei feine, kurze Trennstriche um die Zahl. */
.zaehler {
  border: 1px solid var(--sand-linie);
  border-radius: var(--pille);
  background: var(--feld);
}
.formular .zaehler input[type="number"], .formular .zaehler .z-knopf {
  min-height: 50px;
  border: 0;
  background-color: transparent;
}
.formular .zaehler input[type="number"] {
  border-radius: var(--pille);
  background-image: linear-gradient(var(--linie-zart), var(--linie-zart)), linear-gradient(var(--linie-zart), var(--linie-zart));
  background-size: 1px 20px;
  /* 6 px nach innen, sonst schneidet die Pillenrundung die Striche zu Klammern ab */
  background-position: left 6px center, right 6px center;
  background-repeat: no-repeat;
}
.formular .zaehler input[type="number"]:focus-visible { outline-offset: -4px; }
/* Minus und Plus: beim Darüberfahren eine runde Fläche, der Fokusring ein Kreis */
.formular .zaehler .z-knopf { border-radius: var(--pille); }
.formular .zaehler .z-knopf:hover { background-color: var(--feld-aktiv); }
.z-knopf:focus-visible { outline-offset: -3px; }
.zaehler:has(input[aria-invalid="true"]) { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
/* Ohne JavaScript nur die Zahl, als Feld wie die anderen */
.ohne-js .zaehler { border-radius: var(--radius-feld); }
.ohne-js .formular .zaehler input[type="number"] { background-image: none; }

/* Kästen */
.karte {
  border-radius: var(--radius-kasten);
  clip-path: inset(0 round var(--radius-kasten));   /* schneidet auch die geladene Karte rund */
}
.qr { border-radius: var(--radius-kasten); padding: 12px; }
.frist-vorbei, .meldung { border-radius: var(--radius-kasten); padding: 16px 22px; }
.frist-vorbei { box-shadow: inset 0 0 0 1px var(--sand-linie); }
.meldung { box-shadow: inset 0 0 0 1px var(--fehler); }

/* ---------------------------------------------------------------------------
   Umschlag. Seitenverhältnis C5 hochkant, alle Teile in Einheiten von 162 × 229.
   Öffnen (umschlag.js): Das Siegel bricht unter dem Monogramm, die Klappe klappt räumlich
   nach hinten auf und zeigt das Futter, die Karte gleitet heraus, der Umschlag sinkt weg,
   die Karte wird groß und geht in die Seite über. Animiert werden nur transform und opacity,
   Schatten und Licht sind eigene Ebenen, deren Deckkraft sich ändert. Licht von oben links. */

/* Szene in tiefem Salbei (wie das Innere des Umschlags), mit weichem Licht von oben links und
   leichter Vignette. 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: #a3b6ab;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: clamp(20px, 3.6vh, 34px);
  padding: 76px 16px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 8% -6%, rgb(255 250 236 / 0.13), rgb(255 250 236 / 0) 64%),
    radial-gradient(130% 60% at 60% 108%, rgb(0 0 0 / 0.2), rgb(0 0 0 / 0) 72%),
    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; }
.u-ueber, .u-hinweis { 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; }

/* Zeile unter dem Umschlag: aufrecht und groß genug für alle Gäste, in der vollen Farbe der
   Szenenschrift. Erscheint kurz nach dem Umschlag. */
.u-hinweis {
  font-size: 17.5px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 22em;
  text-wrap: balance;
  color: var(--schrift);
  animation: u-hinweis-ein 0.9s ease-out 0.5s backwards;
}
@keyframes u-hinweis-ein { from { opacity: 0; } }

/* Persönlicher Umschlag: Platz für einen zweizeiligen Namen über dem Umschlag */
.persoenlich .u-buehne { --uw: max(160px, min(88vw, 380px, calc((100svh - 304px) * 0.7074))); }
.u-buehne {
  --uw: max(180px, min(88vw, 380px, calc((100svh - 224px) * 0.7074)));
  position: relative;
  width: var(--uw);
  aspect-ratio: 162 / 229;
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.u-umschlag { position: absolute; inset: 0; isolation: isolate; }
.u-umschlag > svg, .u-schatten, .u-klappe-innen, .u-klappe { position: absolute; left: 0; width: 100%; }
.u-umschlag svg { overflow: visible; pointer-events: none; }
.u-defs { width: 0 !important; height: 0; overflow: hidden; }

/* Ebenen von hinten nach vorn */
.u-schatten {
  top: 0;
  height: 100%;
  z-index: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 6px 14px rgb(0 0 0 / 0.16), 0 24px 44px rgb(0 0 0 / 0.3);
}
.u-klappe-innen-schatten { bottom: 100%; height: calc(var(--uw) * 106 / 162); z-index: 0; opacity: 0; fill: rgb(0 0 0 / 0.42); }
.u-klappe-innen {
  bottom: calc(100% - var(--uw) * 0.4 / 162);   /* 0,4 Einheiten unter die Rückwand, keine Fuge am Falz */
  height: calc(var(--uw) * 106.4 / 162);
  z-index: 1;
  transform-origin: 50% 99.62%;                  /* genau am Falz */
  visibility: hidden;
}
.u-klappe-innen > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-hinten { top: 0; height: 100%; z-index: 2; }
/* Warmes Licht aus der Öffnung, hinter der herausgleitenden Karte (nur opacity bewegt sich) */
.u-schein {
  position: absolute;
  left: -16%;
  width: 132%;
  top: -42%;
  height: 84%;
  z-index: 3;
  background: radial-gradient(closest-side, var(--u-schein), var(--u-schein-mitte) 46%, rgb(255 250 238 / 0));
  opacity: 0;
  pointer-events: none;
}
.u-karte { z-index: 4; }
.u-vorne { top: 0; height: 100%; z-index: 5; filter: drop-shadow(0 -0.5px 1px var(--u-schatten-fein)); }
.u-siegel-unten { z-index: 6; }
.u-klappe-schatten { top: 0; height: calc(var(--uw) * 106 / 162); z-index: 7; fill: var(--u-ton); transform-origin: 50% 0; }
.u-klappe-schatten-nah { opacity: 0.24; }
.u-klappe-schatten-weit { opacity: 0; }
.u-klappe {
  top: 0;
  height: calc(var(--uw) * 106 / 162);
  z-index: 8;
  transform-origin: 50% 0;
}
.u-klappe > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-licht { opacity: 0; }
.u-licht-dunkel path { fill: url(#u-klappe-dunkel); }
.u-licht-innen path { fill: var(--u-ton-tief); }
.u-licht-glanz path { fill: url(#u-klappe-glanz); }
/* Papierkante der Klappe: breiter Strich, der hochkant (um 90 Grad) zu einer feinen hellen
   Linie zusammengedrückt wird. Nur dann sichtbar (umschlag.js). */
.u-papierkante path { fill: none; stroke: var(--u-ton-hell); stroke-width: 3.4; stroke-linejoin: round; }

/* Papier, Futter, Falze. Korn, Licht und Schatten im Ton des Papiers */
.u-papier { fill: var(--u-papier); }
.u-papier-hell { fill: var(--u-papier-hell); }
.u-papier-tief { fill: var(--u-papier-tief); }
.u-korn { fill: url(#u-korn); }
.u-futter { fill: var(--u-futter); }
.u-futter-muster { fill: url(#u-futter-muster); }
.u-muster-linie { fill: none; stroke: var(--u-futter-linie); stroke-width: 0.3; }
.u-muster-bluete { fill: var(--u-futter-linie); }
.u-muster-punkt { fill: var(--u-futter-rand); opacity: 0.6; }
.u-futter-rand { fill: none; stroke: var(--u-futter-rand); stroke-width: 0.4; opacity: 0.75; }
.u-falz { fill: none; stroke: var(--u-falz); stroke-width: 0.45; }
.u-kante-hell { fill: none; stroke: var(--u-ton-hell); stroke-opacity: 0.75; stroke-width: 0.5; }
.u-boden-schatten { fill: var(--u-ton); fill-opacity: 0.18; }
.u-defs .u-korn-ton { flood-color: var(--u-korn-farbe); }
.u-defs .s-ton { stop-color: var(--u-ton); }
.u-defs .s-ton-mittel { stop-color: var(--u-ton-mittel); }
.u-defs .s-ton-tief { stop-color: var(--u-ton-tief); }
.u-defs .s-ton-hell { stop-color: var(--u-ton-hell); }

/* 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;
  container-type: inline-size;
  background: var(--u-korn-bild) 0 0 / 150px 150px, var(--karte-papier);
  box-shadow: 0 0 0 0.5px rgb(90 70 40 / 0.14), 0 1px 2px rgb(50 36 12 / 0.12);
}
.u-karte.gross { position: fixed; z-index: 70; transform-origin: 0 0; }
.u-karte > span { position: absolute; inset: 0; pointer-events: none; }
.u-karte-schatten { z-index: -1; opacity: 0; box-shadow: 0 2px 4px rgb(30 20 5 / 0.14), 0 24px 56px rgb(20 14 4 / 0.34); }
.u-karte-tiefe { background: linear-gradient(var(--u-schatten-weich), var(--u-schatten-hauch) 45%, rgb(40 28 10 / 0) 70%); }
.u-karte-seite { opacity: 0; background: var(--papier); }
.k-satz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8.5cqw 9cqw 8cqw;
  color: #34443b;
  --sand: #6d887d;
  --sand-linie: #6d887d;
}
/* Monogramm auf der kleinen Karte: in boho ausgeblendet, dort steht die Girlande */
.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 der Akzentfarbe, das Monogramm ist geprägt. Licht von oben links.
   Oben auf der Klappe liegt in Ruhe das ganze Siegel, beim Bruch wird es geteilt (Klasse
   „gebrochen“): Der Riss läuft bogig unter dem Monogramm und an den Seiten dem Prägering nach
   hoch. Das obere Stück mit dem Monogramm geht mit der Klappe, das untere, breite Stück mit
   dem Ring bleibt auf der Tasche (eigener Schatten, helle Bruchfläche). Die Umrisse hier
   gehören zu den Pfaden in umschlag.html. */
.u-siegel {
  position: absolute;
  left: 50%;
  top: calc(99 / 229 * 100%);
  width: 35%;
  aspect-ratio: 1;
  translate: -50% -50%;
  filter: drop-shadow(0 1.2px 1.2px var(--u-schatten-nah)) drop-shadow(0 3.5px 7px var(--u-schatten-weich));
}
.u-klappe .u-siegel-oben { top: calc(99 / 106 * 100%); }
.u-siegel-form { position: absolute; inset: 0; }
.u-siegel-form > svg, .u-spalt { position: absolute; inset: 0; width: 100%; height: 100%; }
.u-siegel-unten { visibility: hidden; }
.gebrochen .u-siegel-unten { visibility: visible; }
/* Riss: das obere Stück reicht 0,6 % über die Bruchkante (keine helle Fuge in Ruhe) */
.gebrochen .u-siegel-oben .u-siegel-form {
  -webkit-clip-path: polygon(-40% -40%, 140% -40%, 140% 52.6%, 99.5% 52.6%, 97.07% 52.16%, 95% 54%, 92.44% 56.25%, 90.5% 56.2%, 89% 56.59%, 87% 59.2%, 85.85% 62.53%, 84.5% 63.4%, 83.28% 62.85%, 82% 63.1%, 80.7% 65.91%, 79.5% 66.2%, 77.58% 67.09%, 76% 67.2%, 73.1% 68.17%, 71% 67.5%, 68.8% 68.04%, 66% 67.6%, 63.65% 68.69%, 61% 67.8%, 58.5% 67.7%, 56% 68%, 53.35% 68.95%, 51% 68.1%, 48.2% 68.44%, 46% 68%, 43.9% 68.97%, 41% 67.7%, 38.75% 67.18%, 36% 67.2%, 33.6% 67.46%, 31% 66.5%, 28.96% 66.94%, 27% 65.6%, 24.84% 64.44%, 23% 64.2%, 20.72% 64.25%, 19% 62%, 17.5% 61.12%, 15.5% 58.1%, 13.89% 55.3%, 12% 53.1%, 10.53% 52.68%, 9% 49.6%, 7.96% 50.72%, 7% 50.6%, 5.35% 48.12%, 4% 48.1%, 1.97% 48.42%, 0.5% 47.1%, -40% 47.1%);
  clip-path: polygon(-40% -40%, 140% -40%, 140% 52.6%, 99.5% 52.6%, 97.07% 52.16%, 95% 54%, 92.44% 56.25%, 90.5% 56.2%, 89% 56.59%, 87% 59.2%, 85.85% 62.53%, 84.5% 63.4%, 83.28% 62.85%, 82% 63.1%, 80.7% 65.91%, 79.5% 66.2%, 77.58% 67.09%, 76% 67.2%, 73.1% 68.17%, 71% 67.5%, 68.8% 68.04%, 66% 67.6%, 63.65% 68.69%, 61% 67.8%, 58.5% 67.7%, 56% 68%, 53.35% 68.95%, 51% 68.1%, 48.2% 68.44%, 46% 68%, 43.9% 68.97%, 41% 67.7%, 38.75% 67.18%, 36% 67.2%, 33.6% 67.46%, 31% 66.5%, 28.96% 66.94%, 27% 65.6%, 24.84% 64.44%, 23% 64.2%, 20.72% 64.25%, 19% 62%, 17.5% 61.12%, 15.5% 58.1%, 13.89% 55.3%, 12% 53.1%, 10.53% 52.68%, 9% 49.6%, 7.96% 50.72%, 7% 50.6%, 5.35% 48.12%, 4% 48.1%, 1.97% 48.42%, 0.5% 47.1%, -40% 47.1%);
}
.u-siegel-unten .u-siegel-form {
  -webkit-clip-path: polygon(-40% 46.5%, 0.5% 46.5%, 1.97% 47.82%, 4% 47.5%, 5.35% 47.52%, 7% 50%, 7.96% 50.12%, 9% 49%, 10.53% 52.08%, 12% 52.5%, 13.89% 54.7%, 15.5% 57.5%, 17.5% 60.52%, 19% 61.4%, 20.72% 63.65%, 23% 63.6%, 24.84% 63.84%, 27% 65%, 28.96% 66.34%, 31% 65.9%, 33.6% 66.86%, 36% 66.6%, 38.75% 66.58%, 41% 67.1%, 43.9% 68.37%, 46% 67.4%, 48.2% 67.84%, 51% 67.5%, 53.35% 68.35%, 56% 67.4%, 58.5% 67.1%, 61% 67.2%, 63.65% 68.09%, 66% 67%, 68.8% 67.44%, 71% 66.9%, 73.1% 67.57%, 76% 66.6%, 77.58% 66.49%, 79.5% 65.6%, 80.7% 65.31%, 82% 62.5%, 83.28% 62.25%, 84.5% 62.8%, 85.85% 61.93%, 87% 58.6%, 89% 55.99%, 90.5% 55.6%, 92.44% 55.65%, 95% 53.4%, 97.07% 51.56%, 99.5% 52%, 140% 52%, 140% 140%, -40% 140%);
  clip-path: polygon(-40% 46.5%, 0.5% 46.5%, 1.97% 47.82%, 4% 47.5%, 5.35% 47.52%, 7% 50%, 7.96% 50.12%, 9% 49%, 10.53% 52.08%, 12% 52.5%, 13.89% 54.7%, 15.5% 57.5%, 17.5% 60.52%, 19% 61.4%, 20.72% 63.65%, 23% 63.6%, 24.84% 63.84%, 27% 65%, 28.96% 66.34%, 31% 65.9%, 33.6% 66.86%, 36% 66.6%, 38.75% 66.58%, 41% 67.1%, 43.9% 68.37%, 46% 67.4%, 48.2% 67.84%, 51% 67.5%, 53.35% 68.35%, 56% 67.4%, 58.5% 67.1%, 61% 67.2%, 63.65% 68.09%, 66% 67%, 68.8% 67.44%, 71% 66.9%, 73.1% 67.57%, 76% 66.6%, 77.58% 66.49%, 79.5% 65.6%, 80.7% 65.31%, 82% 62.5%, 83.28% 62.25%, 84.5% 62.8%, 85.85% 61.93%, 87% 58.6%, 89% 55.99%, 90.5% 55.6%, 92.44% 55.65%, 95% 53.4%, 97.07% 51.56%, 99.5% 52%, 140% 52%, 140% 140%, -40% 140%);
}
.u-riss, .u-spalt { opacity: 0; }
.u-riss path, .u-spalt path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.u-riss-kante { stroke: var(--siegel-dunkel); stroke-width: 1.05; stroke-opacity: 0.9; }
.u-bruch { stroke: var(--siegel-bruch); stroke-width: 1.8; }
.u-spalt path { stroke: var(--u-ton-hell); stroke-width: 1.7; }
#u-siegel-bild .wachs { fill: url(#u-wachs); }
#u-siegel-bild .kante { fill: none; stroke: url(#u-wachs-kante); stroke-width: 1.1; }
#u-siegel-bild .pressung-schatten { fill: none; stroke: var(--siegel-tief); stroke-width: 1.5; opacity: 0.5; }
#u-siegel-bild .pressung-licht { fill: none; stroke: var(--siegel-licht); stroke-width: 1.1; opacity: 0.85; }
#u-siegel-bild .praegung { fill: none; stroke: var(--siegel-praegung); stroke-width: 1.3; }
#u-siegel-bild .praegung.fein { stroke: var(--siegel-fein); stroke-width: 0.7; }
.u-defs .s-licht { stop-color: var(--siegel-licht); }
.u-defs .s-wachs { stop-color: var(--siegel-wachs); }
.u-defs .s-tief { stop-color: var(--siegel-tief); }
.u-defs .s-siegel-dunkel { stop-color: var(--siegel-dunkel); }
.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: var(--siegel-schrift);
  text-shadow: 0 0.8px 0 rgb(255 244 222 / 0.5), 0 -0.6px 0 rgb(40 26 6 / 0.38);
}
.u-siegel-mono .und {
  color: inherit;
  font-size: 1.12em;
  margin: 0 0.02em 0 0.06em;
  position: relative;
  top: 0.1em;
}

/* Puls: das Siegel atmet sanft, beim tiefsten Atemzug läuft ein weicher Lichtschein in der
   Farbe des Wachses nach außen. Sechs Runden alle 2,8 Sekunden (gut 17 Sekunden), danach nur
   noch alle 8,4 Sekunden ein Atemzug mit Schein: ruhiger, aber wer später zurückkommt, sieht
   weiter, wo er tippen soll. Bei „weniger Bewegung“ ruht beides. */
.u-siegel-oben { animation: siegel-atmen 2.8s ease-in-out 1s 6, siegel-atmen-selten 8.4s ease-in-out 17.8s infinite; }
.bricht .u-siegel-oben { animation: none; }
@keyframes siegel-atmen {
  0%, 100% { transform: scale(1); }
  38% { transform: scale(1.04); }
}
@keyframes siegel-atmen-selten {
  0%, 33.33%, 100% { transform: scale(1); }
  12.67% { transform: scale(1.04); }
}

/* Der Auslöser liegt als runder Knopf auf dem Siegel. Die Tippfläche reicht etwas darüber
   hinaus, Antippen auf dem übrigen Umschlag öffnet ebenfalls (data-umschlag-buehne).
   Fokus als runder Ring aus box-shadow (in jedem Browser rund). */
.u-siegel-knopf {
  position: absolute;
  left: 50%;
  top: calc(99 / 229 * 100%);
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 8;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.u-siegel-knopf::before { content: ''; position: absolute; inset: -20%; border-radius: 50%; }
/* Fokusring außerhalb der welligen Wachskante: Der Knopf ist kleiner als das Wachs,
   deshalb ein runder Umriss mit Abstand statt eines Rings direkt am Knopf. */
.u-siegel-knopf:focus-visible {
  outline: 2.5px solid var(--u-fokus);
  outline-offset: 9px;
}
.u-siegel-knopf:focus:not(:focus-visible) { outline: none; }
.u-siegel-knopf::after {
  content: '';
  position: absolute;
  inset: -5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0) 76%, var(--siegel-ring) 88%, rgb(255 255 255 / 0) 99%);
  opacity: 0;
  animation: siegel-ring 2.8s cubic-bezier(.2, .6, .35, 1) 1s 6, siegel-ring-selten 8.4s cubic-bezier(.2, .6, .35, 1) 17.8s infinite;
}
@keyframes siegel-ring {
  0%, 26% { opacity: 0; transform: scale(0.97); }
  34% { opacity: 0.9; transform: scale(1.03); }
  82%, 100% { opacity: 0; transform: scale(1.48); }
}
@keyframes siegel-ring-selten {
  0%, 8.67% { opacity: 0; transform: scale(0.97); }
  11.33% { opacity: 0.9; transform: scale(1.03); }
  27.33%, 100% { opacity: 0; transform: scale(1.48); }
}
@media (prefers-reduced-motion: reduce) {
  .u-siegel-oben, .u-siegel-knopf::after, .u-hinweis { animation: none !important; }
}

.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: #34443b;
    --sand: #6d887d;
    --sand-linie: #6d887d;
    --sand-schrift: #4f675d;
    --feld: #eee9de;
    --qr-grund: #ffffff;
    color-scheme: light;
  }
}

/* ---------------------------------------------------------------------------
   Boho: Aquarell-Girlande, Zweig als Trenner, Pinselschrift
   Steht am Ende, damit es die vom Stil „klassisch“ übernommenen Regeln ersetzt. */

:root {
  /* Girlande über der Startansicht: so breit wie das Handy, auf großen Bildschirmen
     höchstens 640 px. Seitenverhältnis wie bilder/girlande.webp (1280 × 588). */
  --girlande-b: min(100vw, 640px);
  --girlande-h: calc(var(--girlande-b) * 588 / 1280);
  /* Die Pinselschrift wirkt kleiner als eine Antiqua gleicher Größe. Untergrenze 46 px. */
  --namen-groesse: clamp(2.9rem, min(12.4vw, 6.6svh), 5rem);
}

.start { isolation: isolate; padding-top: calc(var(--girlande-h) * 0.84); }
.start::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: var(--girlande-b);
  height: var(--girlande-h);
  translate: -50% 0;
  background: url("bilder/girlande.webp") center top / 100% auto no-repeat;
  pointer-events: none;
}
/* Breiter als 640 px steht die Girlande frei auf der Seite: dort laufen ihre Enden weich aus,
   statt an der Bildkante abzubrechen (auf dem Handy ist die Bildkante der Bildschirmrand). */
@media (min-width: 641px) {
  .start::before {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  }
}
/* Statt Monogramm steht oben die Girlande, wie auf der gedruckten Einladung */
.start .monogramm { display: none; }
.start .einleitung { margin-top: 0; }
.start .paar { margin-top: clamp(10px, 2.4svh, 40px); }
.start .paar .namen { line-height: 1.14; max-width: 9em; }
.start .paar > .und { font-size: 0.82em; margin: 0 0 0.02em; }
/* Zweig als Trenner statt der feinen Linie (Startansicht und Karte im Umschlag) */
.start .linie {
  width: min(42vw, 170px);
  height: calc(min(42vw, 170px) * 192 / 480);
  border: 0;
  background: url("bilder/zweig.webp") center / contain no-repeat;
  margin-block: clamp(10px, 2.4svh, 34px) clamp(10px, 2svh, 26px);
}
@media (max-height: 760px) {
  .start { padding-top: calc(var(--girlande-h) * 0.72); }
  .start .paar { margin-top: clamp(8px, 1.8svh, 40px); }
  .start .paar > .und { font-size: 0.72em; margin: 0; }
  .start .linie { width: min(34vw, 136px); height: calc(min(34vw, 136px) * 192 / 480); margin-block: 8px 6px; }
}

/* Überschriften und Namen im Fuß in der Pinselschrift, Zahlen in Castoro */
.kopf { font-size: clamp(44px, 12.4vw, 58px); line-height: 1.15; }
.fuss-paar { font-size: 46px; line-height: 1.15; }
.fuss-paar .und { font-size: 0.85em; }
.countdown .cd-zahl { font-family: var(--text); font-size: clamp(42px, 12.5vw, 60px); }
.monogramm { --mono: 40px; }

/* Karte im Umschlag: Girlande oben, Zweig als Trenner, Namen in der Pinselschrift */
.k-satz { padding-top: calc(100cqw * 588 / 1280 * 0.8); }
.k-satz::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1280 / 588;
  background: url("bilder/girlande.webp") center top / 100% auto no-repeat;
}
.k-mono { display: none; }
.k-einleitung { margin-top: 0; }
.k-paar .namen { font-size: 10cqw; line-height: 1.12; max-width: 78cqw; }
.k-paar .und { font-size: 7cqw; margin: 0; }
.k-satz .linie {
  width: 26cqw;
  height: calc(26cqw * 192 / 480);
  border: 0;
  background: url("bilder/zweig.webp") center / contain no-repeat;
  margin: auto 0 4cqw;
}

/* Siegel: Monogramm in der Pinselschrift, etwas größer, damit die feinen Striche geprägt wirken */
.u-siegel-mono { font-size: calc(var(--uw) * 0.13); }
.u-siegel-mono .und { font-size: 0.8em; top: 0.02em; }


/* Ohne Dunkelmodus (einladung.json „dunkelmodus“): immer hell, auch Formularfelder und Leisten */
:root { color-scheme: light; }