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

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('schriften/hanken-grotesk-latin-300-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('schriften/hanken-grotesk-latin-ext-300-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/hanken-grotesk-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/hanken-grotesk-latin-500-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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('schriften/hanken-grotesk-latin-ext-500-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 „modern“ · digital
   Wie das gedruckte Set 2 (papeterie/set2-modern/stil.css): eine Grotesk in drei Schnitten,
   Hanken Grotesk 300 für Ziffern, Uhrzeiten und das blaue &, 400 für Text, Köpfe und Namen
   (nicht fett), 500 für Etiketten und die Kopflinie. Keine zweite Schrift, kein Kursiv.
   Papier #f3f0ea, Tinte #1d1c1a für alle Schrift und Linien, Tintenblau #22356b nur für das
   & ab 24 pt (am Bildschirm ab 32 px), dort im Schnitt 300. Keine weiteren Farben, keine
   Flächen außer den Knöpfen.

   Raster: sechs Spalten mit Steg, Seitenrand im Verhältnis der Karte (12 mm bei 148 mm).
   Ab 600 px Breite zwei Achsen: die Satzkante für Großes (Namen, Ziffern, Köpfe, Stichworte,
   Uhrzeiten), die zweite Achse am Beginn von Spalte 4 für Angaben und Texte. Auf dem Handy
   nur die Satzkante. Alles linksbündig, flatternd.

   Linien: 1 px, beginnen an einer Achse und laufen rechts aus dem Bild (die Abschnitte
   schneiden sie ab). Text hängt darunter mit --haengen bis zur Versalhöhe.

   Größen im Verhältnis des Drucks, Text : Kopf : Groß : Namen = 1 : 1,47 : 2,53 : 3,58,
   mit Lesetext 17 px auf dem Handy und 18 px ab 600 px.

   Kontrast auf Papier: Tinte 15:1, Blau 10:1. Dunkel: Papier auf Tinte 15:1, das & in einem
   hellen Tintenblau #8fa3dc (6,8:1). */

:root {
  --papier: #f3f0ea;
  --tinte: #1d1c1a;
  --blau: #22356b;

  --grund: var(--papier);
  --schrift: var(--tinte);
  --schrift-hover: #000000;
  --linie: var(--tinte);
  --und: var(--blau);
  --fokus: var(--tinte);
  --fehler: var(--tinte);
  --fehler-grund: transparent;
  --fehler-schrift: var(--tinte);
  --feld: transparent;
  --feld-aktiv: transparent;
  --sand-linie: var(--linie);
  --sand-schrift: var(--schrift);
  --leiste-grund: rgb(243 240 234 / 0.92);
  --qr-grund: #f3f0ea;
  --qr-zug: 1;                               /* Ruhezone des QR-Codes in den Rand ziehen (nur hell) */
  --szene: var(--grund);

  --grotesk: 'Hanken Grotesk', system-ui, sans-serif;
  /* Maße von Hanken Grotesk für den Ersatz von text-box: Versalhöhe 0,697 em,
     (Oberlänge 1,0 em − Unterlänge 0,3 em) / 2 = 0,35 em */
  --versal: 0.697;
  --mitte: 0.35;

  /* Größen */
  --text: 17px;                              /* Lesetext, Etiketten, Kopflinie, Frist */
  --zeile: 1.42;
  --kopf: calc(var(--text) * 1.47);          /* Einleitung, Angaben, Programmpunkte, Köpfe */
  --gross: calc(var(--text) * 2.53);         /* Uhrzeiten in Light */
  /* Namen: Wunschgröße 3,58 × Text, randausgleich.js verkleinert in 1-px-Schritten, bis jede
     Namenszeile in eine Zeile passt. Untergrenze 2,53 × Text (wie die Tischkarte, 24 zu
     9,5 pt), darunter brechen lange Namen ausgeglichen zwischen den Namensteilen um.
     Ohne JavaScript gilt der Wert aus vw. */
  --namen-max: calc(var(--text) * 3.58);
  --namen-min: calc(var(--text) * 2.53);
  --namen-groesse: clamp(var(--namen-min), 12.4vw, var(--namen-max));

  /* Abstände im Verhältnis zum Text (Druck: 9,5 pt = 3,35 mm) */
  --haengen: calc(var(--text) * 0.955);      /* 3,2 mm: von der Linie zur Versalhöhe */
  --haengen-tafel: calc(var(--text) * 1.34); /* 4,5 mm: Ziffern unter ihrer Linie */
  --reihe-unten: calc(var(--text) * 2.09);   /* 7 mm: unter einer Reihe der Tafel */
  --kopf-abstand: calc(var(--text) * 1.79);  /* 6 mm: Kopf bis Inhalt, ab Grundlinie */

  /* Raster */
  --rand: max(16px, calc(100vw * 12 / 148), env(safe-area-inset-left), env(safe-area-inset-right));
  --spalte: 60rem;                           /* Satzbreite höchstens 960 px */
  --satz: min(100vw - 2 * var(--rand), var(--spalte));
  --steg: calc(var(--satz) * 4 / 124);
  --innen: max(var(--rand), (100% - var(--spalte)) / 2);   /* in Abschnitten: Abstand zur Satzkante */
  --achse: calc(50% + var(--steg) / 2);      /* zweite Achse, von der Satzkante aus */
  --kopf-y: max(72px, calc(env(safe-area-inset-top) + 62px), calc(var(--satz) * 12 / 124));
  --abstand: clamp(88px, 24vw, 144px);

  /* Ziffern, Light: Band auf dem Handy so breit wie der Satz, Tafel 6,74 × Text (64 zu
     9,5 pt), Frist so groß, dass „Eure Antwort“ und die Frist daneben von der Versalhöhe
     bis zur letzten Grundlinie reichen (Kopf × 1,937 / 0,697) */
  --band: min(calc(var(--text) * 5.4), calc((100vw - 2 * var(--rand)) / 3.85));
  --tafel: min(calc(var(--text) * 6.74), 12.5svh);
  --frist-ziffern: calc(var(--kopf) * 1.937 / 0.697);
}
@media (min-width: 600px) {
  :root { --text: 18px; }
}

/* Dunkel: nach Systemeinstellung, außer jemand hat „hell“ gewählt, oder per Umschalter */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #1d1c1a;
    --schrift: #f3f0ea;
    --schrift-hover: #ffffff;
    --linie: #f3f0ea;
    --und: #8fa3dc;
    --fokus: #f3f0ea;
    --fehler: #f3f0ea;
    --fehler-schrift: #f3f0ea;
    --leiste-grund: rgb(29 28 26 / 0.92);
    --qr-zug: 0;
  }
  :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: #1d1c1a;
  --schrift: #f3f0ea;
  --schrift-hover: #ffffff;
  --linie: #f3f0ea;
  --und: #8fa3dc;
  --fokus: #f3f0ea;
  --fehler: #f3f0ea;
  --fehler-schrift: #f3f0ea;
  --leiste-grund: rgb(29 28 26 / 0.92);
  --qr-zug: 0;
  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; }

/* Platz für die Scrollleiste immer freihalten: Solange das Deckblatt deckt, hat die Seite
   keine (body overflow: hidden). Ohne Rinne spränge das Raster nach dem Öffnen um ihre Breite. */
html { scrollbar-gutter: stable; }

body {
  font-family: var(--grotesk);
  font-weight: 400;
  font-size: var(--text);
  line-height: var(--zeile);
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  font-synthesis: none;              /* kein nachgemachtes Kursiv oder Fett */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--schrift); color: var(--grund); }

/* ---------------------------------------------------------------------------
   Typografie: Klassen der Vorlage auf Set 2 umgesetzt */

.titel { font-weight: 400; line-height: 1.24; text-wrap: balance; }
.kursiv { font-style: normal; }
.z { font-size: 1em; }
/* Versalzeilen der Vorlage sind hier Etiketten: Medium, Textgröße, keine Versalien */
.versal {
  font-size: var(--text);
  font-weight: 500;
  line-height: var(--zeile);
  letter-spacing: 0.01em;
  text-transform: none;
}
.versal.zeile { display: block; }
.etikett { font-weight: 500; }
.kopf, .gross {
  font-size: var(--kopf);
  line-height: 1.24;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
/* Das & unter 24 pt steht in Tinte im Schnitt des Textes, nur in den Namen ist es blau */
.und { color: inherit; font-weight: inherit; }
.namen .und { color: var(--und); font-weight: 300; }
.sinn { display: inline-block; }

/* Text ohne Leerraum über der Versalhöhe und unter der Grundlinie, damit Linien, Ziffern
   und Text genau zueinander stehen. Abstände an diese Elemente nur als padding oder an die
   Nachbarn, nie als margin oben oder unten, sonst überschreiben sie den Ersatz unten.
   In der Tafel trimmen nur die Textabsätze, nicht der Behälter der dritten Angabe: Nach der
   Frist ist dort „Zur Antwort“ das erste Element, und ein getrimmter Behälter schluckte dann
   den Abstand darüber. */
.kopflinie > *, .tafel .angabe.kopf, .tafel .angabe > .frist { text-box: trim-start cap alphabetic; }
.einleitung, .start-raster > .paar, .ziffer, .u-ueber, .u-namen, .u-band > span, .frist-ziffern,
.abschnitt > h2, .ablauf .etikett, .ablauf .was, .cd-zahl, .schluss, .fuss-paar,
.antwort > .frist, .unterseite .rechtstext > h1 {
  text-box: trim-both cap alphabetic;
}
/* Ersatz für Browser ohne text-box (Firefox, ältere Safari): dieselben Beträge als
   negative Ränder. lh ist die Zeilenhöhe des Elements, die Werte gelten für jede Größe. */
@supports not (text-box: trim-both cap alphabetic) {
  @media (min-width: 600px) {
    .muster > .muster-text { margin-top: calc(-0.5lh + (var(--versal) - var(--mitte)) * 1em); }
  }
  .kopflinie > *, .tafel .angabe.kopf, .tafel .angabe > .frist, .muster > h2,
  .einleitung, .start-raster > .paar, .ziffer, .u-ueber, .u-namen, .u-band > span, .frist-ziffern,
  .abschnitt > h2, .ablauf .etikett, .ablauf .was, .cd-zahl, .schluss, .fuss-paar,
  .antwort > .frist, .unterseite .rechtstext > h1 {
    margin-top: calc(-0.5lh + (var(--versal) - var(--mitte)) * 1em);
  }
  .einleitung, .start-raster > .paar, .ziffer, .u-ueber, .u-namen, .u-band > span, .frist-ziffern,
  .abschnitt > h2, .ablauf .etikett, .ablauf .was, .cd-zahl, .schluss, .fuss-paar,
  .antwort > .frist, .unterseite .rechtstext > h1 {
    margin-bottom: calc(-0.5lh + var(--mitte) * 1em);
  }
  /* Trägt ein Element seine Linie selbst (::before), hebt der Rand oben sie mit an. Sie rückt
     um denselben Betrag zurück, so bleibt --haengen zwischen Linie und Versalhöhe. */
  .abschnitt > h2::before, .antwort > .frist-ziffern::before {
    top: calc(0.5lh - (var(--versal) - var(--mitte)) * 1em);
  }
}

/* Linie über einem Element: beginnt an seiner linken Kante (einer Achse) und läuft rechts
   aus dem Bild. Die Abschnitte schneiden sie am Rand ab (overflow-x: clip). */
.kopflinie, .abschnitt > h2, .tafel, .u-band, .muster > .linie, .unterseite .rechtstext > .linie {
  position: relative;
}
.kopflinie::before, .abschnitt > h2::before, .tafel::before, .u-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  border-top: 1px solid var(--linie);
  transform-origin: 0 0;
}
.start, .abschnitt, .fuss, .unterseite { overflow-x: clip; }

/* Ziffern des Datums, das Motiv: Light, Sperrung −0,02 em */
.ziffer, .u-band > span, .frist-ziffern, .cd-zahl {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: lining-nums proportional-nums;
}

/* ---------------------------------------------------------------------------
   Seite: Satzkante links, Linien laufen rechts hinaus */

.start, .abschnitt, .fuss {
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--innen);
  align-items: stretch;
  text-align: left;
}
.abschnitt { padding-top: var(--abstand); }

/* Kopflinie: Linie ab der Satzkante, darunter links das Paar, rechts das Datum.
   Bei langen Namen bricht das Paar ausgeglichen um, das Datum bleibt rechts. */
.kopflinie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 20px;
  padding-top: var(--haengen);
  font-size: var(--text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.kopflinie .paar { flex: 0 1 auto; min-width: 0; text-wrap: balance; }
.kopflinie .datum { flex: none; letter-spacing: 0.04em; margin-right: -0.04em; }

/* ---------------------------------------------------------------------------
   Start: die Vorderseite der Einladung. Kopflinie, Einleitung, Namen, Tafel.
   Freier Raum verteilt sich über die Luft (Verhältnis und Mindestmaß). */

.start-raster {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  justify-content: flex-start;
  padding-block: var(--kopf-y) 72px;
}
.start-raster > .luft { flex: 1 1 0; }
/* Einleitung und Namen stehen nie enger als eine Kopfgröße (Grundlinie bis Versalhöhe), sonst
   läse sich die Einleitung wie die erste Zeile der Namen. Wird es knapp, geben zuerst die Luft
   unter der Kopflinie (a) und die über der Tafel (c) nach. */
.start-raster > .luft.a { flex-grow: 0.85; min-height: 24px; }
.start-raster > .luft.b { flex-grow: 0.4; min-height: var(--kopf); }
.start-raster > .luft.c { flex-grow: 1; min-height: 26px; }
.start-raster > .luft.d { flex-grow: 0.25; min-height: 0; }

.start-raster .einleitung { max-width: 22em; }
.start-raster > .paar {
  font-size: var(--namen-groesse);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 100%;
}
.namen .zeile { display: block; text-wrap: balance; }
.namen .name { display: inline-block; }

/* Tafel auf dem Handy: die drei Paare als Band über die volle Breite, außen bündig mit der
   Satzkante (randausgleich.js gleicht links und rechts aus), darunter die Angaben */
.tafel {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: start;
  padding-top: var(--haengen-tafel);
}
.tafel .reihe { display: contents; }
.tafel .ziffer { grid-row: 1; font-size: var(--band); }
.tafel .reihe:nth-child(1) .ziffer { grid-column: 1; }
.tafel .reihe:nth-child(2) .ziffer { grid-column: 3; }
.tafel .reihe:nth-child(3) .ziffer { grid-column: 5; }
.tafel .angabe { grid-column: 1 / -1; padding-top: 14px; }
.tafel .reihe:nth-child(1) .angabe { grid-row: 2; padding-top: var(--kopf-abstand); }
.tafel .reihe:nth-child(2) .angabe { grid-row: 3; }
.tafel .reihe:nth-child(3) .angabe { grid-row: 4; padding-top: 22px; }
.tafel .frist { font-size: var(--text); line-height: var(--zeile); text-wrap: balance; }
.tafel .zur-antwort { margin-top: 16px; }
/* Nach der Frist fehlt sie, „Zur Antwort“ bleibt bis zur Hochzeit (das Formular auch) und
   rückt an ihren Platz: auf dem Handy mit ihrem Abstand unter den Ort, ab 600 px mit der
   Oberkante auf die Versalhöhe der „27“. */
.nach-frist .tafel .zur-antwort { margin-top: 0; }

/* Die Pfeilspitze steht an der Satzkante: Knopf 44 px, Symbol 26 px, die Kontur beginnt bei
   5,9 von 24 (mit runder Kappe), zusammen 15,4 px vom Rand des Knopfs */
.start-raster .weiter {
  left: calc(var(--innen) - 15.4px);
  translate: none;
  bottom: max(8px, env(safe-area-inset-bottom));
}
.start-raster .weiter .sym { width: 26px; height: 26px; stroke-width: 1.2; }

/* Niedrige Handys (360 × 640 bis 360 × 740, 414 × 736, iPhone mit eingeblendeten Leisten):
   etwas enger, damit die Startansicht bis „Zur Antwort“ auf den ersten Blick passt. Die Luft
   zwischen Einleitung und Namen bleibt eine (hier kleinere) Kopfgröße. */
@media (max-width: 599px) and (max-height: 740px) {
  :root { --kopf-y: max(64px, calc(env(safe-area-inset-top) + 56px)); --band: min(calc(var(--text) * 4.4), calc((100vw - 2 * var(--rand)) / 3.85)); }
  .start-raster { padding-bottom: 52px; }
  .start-raster > .luft.a { min-height: 16px; }
  .start-raster > .luft.b { min-height: calc(var(--text) * 1.3); }
  .start-raster > .luft.c { min-height: 16px; }
  .start-raster .einleitung, .tafel .angabe.kopf { font-size: calc(var(--text) * 1.3); }
  .tafel .reihe:nth-child(1) .angabe { padding-top: 18px; }
  .tafel .angabe { padding-top: 8px; }
  .tafel .reihe:nth-child(3) .angabe { padding-top: 12px; }
  .tafel .zur-antwort { margin-top: 10px; min-height: 46px; padding-block: 9px; }
}
/* Standbild für Pinterest (?standbild=start): ohne Pfeil nach unten, die Luft geht an die Seite */
.standbild .start-raster { padding-bottom: 32px; }
.standbild .start-raster .weiter { display: none; }

/* ---------------------------------------------------------------------------
   Abschnitte: Kopf unter einer Linie an der Satzkante, Inhalt 6 mm unter seiner
   Grundlinie (als padding am Kopf, nie als margin an einem beschnittenen Nachbarn) */

.abschnitt > h2 {
  padding-top: var(--haengen);
  padding-bottom: var(--kopf-abstand);
  font-size: var(--kopf);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.004em;
  text-wrap: balance;
}
.abschnitt > h2 + .linie { display: none; }
.etikett-titel { margin: 0; }
.ablauf-tag + .ablauf-tag { margin-top: 48px; }
.ablauf-tag > .etikett-titel { margin-bottom: 20px; }

/* Countdown: die Zahlen in Light an ihren Spalten, das Stichwort darunter */
.countdown { padding-block: var(--abstand) 0; }
.cd-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--steg);
  justify-content: start;
}
.cd-teil { align-items: flex-start; min-width: 0; }
/* Drei Stellen passen mit Luft in ein Drittel des Satzes */
.cd-zahl { font-size: min(calc(var(--text) * 4.1), calc((100vw - 2 * var(--rand)) / 3 / 2.15)); }
.cd-name { margin-top: 14px; }
.countdown .kursiv { font-size: var(--kopf); line-height: 1.24; max-width: 22em; text-wrap: balance; }

/* Ablauf: Uhrzeit groß in Light, darunter der Programmpunkt in Kopfgröße */
.ablauf { align-items: stretch; row-gap: 36px; }
.ablauf li { align-items: flex-start; }
.ablauf li + li::before { content: none; }
.ablauf .sym, .eintrag .sym { display: none; }
.ablauf .etikett {
  font-size: var(--gross);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ablauf .was { padding-top: 14px; font-size: var(--kopf); line-height: 1.24; letter-spacing: -0.004em; max-width: none; text-wrap: balance; }
.ablauf .wo { padding-top: 4px; font-size: var(--text); }

/* Einträge (Gut zu wissen, Anfahrt, Übernachtung): Stichwort in Medium, Text darunter */
.eintraege { align-items: stretch; gap: 24px; }
.eintrag { align-items: flex-start; max-width: none; }
.eintrag .etikett { margin: 0 0 2px; }
.eintrag .text { text-wrap: pretty; max-width: 34em; }
.eintrag .mehr { margin-top: 2px; }
.eintrag .mehr a { padding: 10px 0; }

/* Ort */
.ort-name { font-size: var(--kopf); line-height: 1.24; letter-spacing: -0.004em; }
.ort-name .versal { font-size: inherit; font-weight: 400; line-height: inherit; letter-spacing: inherit; }
.ort-name .kursiv { display: block; }
.ort-name .adresse { display: block; margin-top: 8px; font-size: var(--text); line-height: var(--zeile); }
.abschnitt[id$="-ort"] > .etikett-titel { margin-top: 44px; margin-bottom: 18px; }
/* Die Vorlage gibt Karte und Einträgen width: 100 %. Hier füllen sie ihre Spalte über das
   Strecken der Abschnitte, so ragt neben der zweiten Achse (margin-left) nichts über den Rand. */
.karte { width: auto; aspect-ratio: auto; max-width: none; margin-top: 30px; background: none; }
.karte.geladen { aspect-ratio: 4 / 3; max-width: 34rem; }
.eintraege { width: auto; }
.karte-platz { align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 0; text-align: left; font-size: var(--text); line-height: var(--zeile); }
.karte-platz > .sym { display: none; }
.karte-platz p { max-width: 30em; text-wrap: pretty; }
.karte-platz .knopf { min-width: min(16rem, 100%); }

/* Knöpfe: Tinte, gerade Ecken, Satz wie Text. Leise Knöpfe mit feiner Kontur. */
.knopf {
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 12px 22px 12px 18px;
  border-radius: 0;
  font-size: var(--text);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.25;
}
.knopf .sym { width: 20px; height: 20px; stroke-width: 1.3; }
.knopf-leise { border-color: var(--schrift); }
.knopf-leise:hover { background: var(--schrift); color: var(--grund); }
/* Knöpfe einer Gruppe stehen untereinander gleich breit, rechts bündig: Die Gruppe ist so
   breit wie ihr breitester Knopf, mindestens 16rem, höchstens der Platz bis zum Rand
   (--platz, neben der zweiten Achse kleiner). Der Hinweis unter einem Knopf zählt dabei
   nicht mit (contain), er bricht in der Breite der Gruppe um. */
.knoepfe {
  --platz: 100%;
  width: fit-content;
  min-width: min(16rem, var(--platz));
  max-width: var(--platz);
  align-items: stretch;
  gap: 10px;
  margin-top: 26px;
}
.knoepfe .knopf, .knoepfe .mit-hilfe { width: auto; max-width: none; }
.mit-hilfe .hilfe { margin-top: 6px; contain: inline-size; }
.hilfe { font-style: normal; font-size: var(--text); line-height: var(--zeile); color: var(--schrift); }

/* Leiste oben rechts: flach, ohne Schatten, an der rechten Satzkante der Spalte statt am
   Fensterrand. Die Kontur des Mondes endet bei 20,15 von 24 (Linie 1,3), im Knopf von 44 px
   also 13,85 px vor seinem Rand. Die Sonne reicht bis 22,15 und rückt deshalb 2 px ein. */
.leiste { right: calc(var(--innen) - 13.85px); }
.rund .sym.sonne { translate: -2px 0; }
.sprachen, .rund { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sprachen { border-radius: 0; padding: 0; }
.sprachen a { border-radius: 0; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; }
/* Gewählte Sprache: unterstrichen statt als dunkle Fläche, die andere etwas blasser.
   --sprache-gewaehlt ist 1 für die gezeigte Sprache: mit JavaScript über aria-current, ohne
   setzt die Vorlage es nach :target (/#en), damit die Hervorhebung zum Inhalt passt. */
.sprachen a { --sprache-gewaehlt: 0; }
.sprachen a[aria-current="true"] { --sprache-gewaehlt: 1; }
.sprachen a, .sprachen a[aria-current="true"] {
  background: transparent;
  color: var(--schrift);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor calc(var(--sprache-gewaehlt) * 100%), transparent);
  opacity: calc(0.72 + 0.28 * var(--sprache-gewaehlt));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .sprachen a:not([aria-current="true"]) { text-decoration-line: none; }
}
.rund { border-radius: 0; width: 44px; height: 44px; }
.rund .sym { stroke-width: 1.3; }

/* Antwort: Linie, darunter die Frist als Ziffern, „Eure Antwort“ und die Frist in Worten */
.antwort > .linie { display: none; }
.antwort > .frist-ziffern {
  position: relative;
  padding-top: var(--haengen-tafel);
  font-size: min(var(--frist-ziffern), calc((100vw - 2 * var(--rand)) / 3.95));
}
.antwort > .frist-ziffern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  border-top: 1px solid var(--linie);
}
.antwort > .frist-ziffern + h2 { padding-top: var(--kopf-abstand); }
.antwort > .frist-ziffern + h2::before { content: none; }
/* Nach der Frist sind die Ziffern weg (frist-aus), der Nachbarselektor greift aber weiter:
   Dann trägt „Eure Antwort“ die Linie wieder selbst und hängt wie jeder Kopf darunter. */
.nach-frist .antwort > .frist-ziffern + h2 { padding-top: var(--haengen); }
.nach-frist .antwort > .frist-ziffern + h2::before { content: ''; }
/* Die Frist steht eine Zeile unter „Eure Antwort“: Abstand der Grundlinien 1,24 × Kopf */
.antwort > h2 { padding-bottom: calc(var(--kopf) * 0.543); }
.frist-vorbei { margin-top: 28px; max-width: 34em; background: none; box-shadow: inset 2px 0 0 var(--linie); padding: 4px 0 4px 16px; }

/* Formular wie die Antwortkarte: Stichworte in Medium, Schreiblinien statt Kästen */
.formular { max-width: 32rem; margin: 40px 0 0; gap: 30px; }
.nur-zusage { gap: 30px; }
.feld > label, .feld > legend, .essen-teil > label { font-weight: 500; font-size: var(--text); margin-bottom: 4px; }
.feld > .hilfe { margin: 0 0 6px; }
/* Schreiblinie: beginnt an der Kante des Feldes und läuft rechts aus dem Bild wie auf der
   Antwortkarte (border-image mit Überstand, der Abschnitt schneidet sie am Rand ab) */
.formular input[type="text"], .formular input[type="number"] {
  min-height: 48px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  background: transparent;
}
.formular .feld > input[type="text"] {
  border-bottom: 1px solid var(--linie);
  border-image: linear-gradient(var(--linie), var(--linie)) 0 0 1 0 / 0 0 1px 0 / 0 100vw 0 0;
}
/* Fokus als kräftigere Schreiblinie in Tinte statt als Kasten (2 px, Fehler 3 px). Der Umriss
   bleibt durchsichtig stehen, damit ihn der Kontrastmodus von Windows sichtbar macht. */
.formular input[type="text"]:focus-visible, .formular input[type="number"]:focus-visible { outline: 2px solid transparent; outline-offset: 0; }
.formular .feld > input[type="text"]:focus-visible:not([aria-invalid="true"]) {
  border-bottom-width: 2px;
  border-image: linear-gradient(var(--fokus), var(--fokus)) 0 0 1 0 / 0 0 2px 0 / 0 100vw 0 0;
}
.formular .feld > input[aria-invalid="true"] {
  border-bottom-width: 3px;
  border-image: linear-gradient(var(--fehler), var(--fehler)) 0 0 1 0 / 0 0 3px 0 / 0 100vw 0 0;
}
/* Zähler wie „Anzahl Personen: ___“ auf der Antwortkarte: Minus und Plus neben einer kurzen
   Schreiblinie unter der Zahl. Leer steht darauf eine blasse 0 (Platzhalter aus stil.json):
   Tinte zu 64 % auf dem Grund, hell 4,9 : 1, dunkel 6,8 : 1, und doch erkennbar ungetippt.
   Fokus und Fehler machen die kurze Linie dicker (innerer Schatten, ohne Sprung im Satz). */
.zaehler .z-knopf { border-bottom: 0; }
/* Das Minus steht an der Kante des Stichworts darüber: Knopf 48 px, Symbol 20 px, die Kontur
   beginnt bei 4,8 von 24, zusammen 18 px. Ohne JavaScript fehlen die Knöpfe, dann ohne Versatz. */
.mit-js .zaehler { margin-left: -18px; }
.zaehler input[type="number"] { border-bottom: 1px solid var(--linie); }
.zaehler input[type="number"]::placeholder { color: #6a6865; color: color-mix(in srgb, var(--schrift) 64%, var(--grund)); opacity: 1; }
.zaehler input[type="number"]:focus-visible:not([aria-invalid="true"]) { box-shadow: inset 0 -1px 0 var(--fokus); }
.zaehler input[aria-invalid="true"] { box-shadow: inset 0 -2px 0 var(--fehler); }
.feld > .option, .option { padding: 10px 0; min-height: 50px; background: transparent; }
.option + .option { margin-top: 2px; }
/* Kästchen als gezeichnete Quadrate wie auf der Antwortkarte */
.option input { border-radius: 0; border: 1px solid var(--schrift); width: 22px; height: 22px; }
.option input::before { border-radius: 0; width: 12px; height: 12px; }
.option:has(input:checked) { background: transparent; box-shadow: none; }
.wahl[aria-invalid="true"] .option, .option:has(input[aria-invalid="true"]) { box-shadow: inset 2px 0 0 var(--fehler); padding-left: 14px; }
.zaehler input[type="number"] { padding-inline: 0; }
.z-knopf { background: transparent; }
.z-knopf:hover { background: transparent; }
.zaehler input + .z-knopf, .zaehler .z-knopf + input { border-left: 0; }
.fehler { font-weight: 500; }
.datenschutz { text-align: left; font-style: normal; text-wrap: pretty; color: var(--schrift); max-width: 32em; }
.meldung { background: none; box-shadow: inset 2px 0 0 var(--fehler); padding: 4px 0 4px 16px; font-weight: 500; }
.senden-zeile { justify-content: flex-start; }
.senden-zeile .knopf { width: auto; min-width: min(16rem, 100%); }
.danke { align-items: flex-start; margin: 40px 0 0; gap: 16px; }
.danke > .sym { display: none; }
.danke-titel { font-size: var(--kopf); line-height: 1.24; }

/* Kalender und Teilen. „Teilen …“ ist leise, kräftig sind nur Öffnen und Senden. */
.teilen .knopf:not(.knopf-leise) { background: transparent; color: var(--schrift); }
.teilen .knopf:not(.knopf-leise):hover { background: var(--schrift); color: var(--grund); }
/* Datum mit geschützten Leerzeichen nie mitten im Wort oder vor dem Komma umbrechen */
.kalender > .gross { text-wrap: pretty; overflow-wrap: normal; }
.teilen-text { font-size: var(--text); line-height: var(--zeile); }
.qr-block { align-items: flex-start; }
.qr { width: 188px; padding: 0; border-radius: 0; background: var(--qr-grund); }
/* Im Hellen ist die Ruhezone so hell wie das Papier: Der Code rückt um ihre Breite nach links,
   die Module stehen an der Satzkante, die Ruhezone liegt im Rand (--qr-ruhe misst
   randausgleich.js). Im Dunkeln steht die helle Fläche selbst bündig. */
.qr { margin-left: calc(-1 * var(--qr-zug) * var(--qr-ruhe, 0px)); }
.qr .qr-punkte { fill: #1d1c1a; }
.qr-zeigen { font-style: normal; font-weight: 500; color: var(--schrift); }
.adresse-link a { padding-inline: 0; }
.textlink { padding: 0; }
.status { color: var(--schrift); }

/* ---------------------------------------------------------------------------
   Fuß: Linie, darunter der Schlusssatz und das Paar in Kopfgröße wie auf der Rückseite
   der Einladung, dann das Datum. Danach die Musterseite mit Etikettenspalte. */

.fuss {
  position: relative;
  gap: 0;
  padding-top: calc(var(--abstand) + var(--haengen));
}
.fuss::before {
  content: '';
  position: absolute;
  top: var(--abstand);
  left: var(--innen);
  width: 100vw;
  border-top: 1px solid var(--linie);
}
.schluss, .fuss-paar { font-size: var(--kopf); line-height: 1.24; letter-spacing: -0.004em; }
.schluss + .fuss-paar { padding-top: calc(var(--kopf) * 0.543); }
.fuss > .versal { margin-top: 18px; }
.muster { align-items: stretch; gap: 0; margin-top: calc(var(--abstand) * 0.75); }
.muster > .linie { width: 100vw; height: 0; margin: 0; border-top: 1px solid var(--linie); }
.muster > h2 { padding-top: var(--haengen); text-box: trim-start cap alphabetic; }
.muster-text { padding-top: 14px; max-width: 32em; font-size: var(--text); line-height: var(--zeile); text-wrap: pretty; }
.muster .knoepfe { margin-top: 22px; }
.gestaltet { margin-top: 48px; font-size: 15px; letter-spacing: 0.01em; }
.gestaltet.nennung { margin-top: 4px; }
.recht { font-size: 15px; }
.recht a { padding: 12px 0; }
.recht a + .punkt + a, .recht .punkt { margin-left: 2px; }

/* Unterseiten: Impressum, Datenschutz, Dank */
.unterseite { justify-content: flex-start; padding-top: var(--kopf-y); padding-bottom: 64px; }
.unterseite > .kopflinie { margin-bottom: 56px; }
.unterseite .rechtstext { max-width: 36rem; }
.unterseite .rechtstext > h1, .unterseite .kopf { text-align: left; font-size: var(--kopf); }
.unterseite .rechtstext > .linie, .unterseite .kopf + .linie { display: none; }
.rechtstext h2 { margin: 36px 0 4px; }
.rechtstext p { font-size: var(--text); line-height: 1.5; }
.rechtstext h1 + .linie + h2 { margin-top: 32px; }
/* Eine Zeile direkt unter dem Kopf („Stand: November 2026“) als Unterzeile mit etwas Luft */
.rechtstext h1 + .linie + p { margin-top: 12px; }
.recht-seite .knoepfe { margin-top: 44px; }

/* ---------------------------------------------------------------------------
   Ab 600 px: zwei Achsen. Großes an der Satzkante, Angaben und Texte an der zweiten. */

@media (min-width: 600px) {
  .start-raster .einleitung, .u-ueber { margin-left: var(--achse); }

  .tafel { display: block; padding-top: 0; }
  .tafel::before { content: none; }
  .tafel .reihe {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--steg);
    align-items: start;
    padding-block: var(--haengen-tafel) var(--reihe-unten);
  }
  .tafel .reihe:last-child { padding-bottom: 0; }
  .tafel .reihe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    border-top: 1px solid var(--linie);
    transform-origin: 0 0;
  }
  .tafel .ziffer { grid-row: auto; grid-column: 1 / 4 !important; font-size: var(--tafel); }
  .tafel .angabe, .tafel .reihe:nth-child(n) .angabe { grid-row: auto; grid-column: 4 / 7; padding-top: 0; }

  /* Ablauf und Einträge: Etikettenspalte, Zeilen auf gemeinsamer Grundlinie */
  /* Zeilenabstand wie im Druck: 2,2 mm zwischen Zeilen zu 24 pt × 1,1 */
  .ablauf { row-gap: calc(var(--gross) * 0.68); }
  .ablauf li, .eintrag {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--steg);
    align-items: baseline;
  }
  .ablauf .etikett, .eintrag .etikett { grid-column: 1 / 4; }
  .eintrag .etikett { margin: 0; }
  .ablauf .was, .ablauf .wo, .eintrag .text, .eintrag .mehr { grid-column: 4 / 7; padding-top: 0; }
  .eintraege { gap: 22px; }

  /* Countdown im Raster: Tage an der Satzkante, Stunden an der zweiten Achse, Minuten in der
     letzten Spalte. Fällt ein Teil weg (letzter Tag), rücken die übrigen nach. Zwei Ziffern
     passen in die letzte Spalte (schmal bei 600 px). */
  .cd-zahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cd-teil { grid-column: span 2; }
  .cd-teil:nth-child(1 of :not([hidden])) { grid-column: 1 / 4; }
  .cd-teil:nth-child(2 of :not([hidden])) { grid-column: 4 / 6; }
  .cd-teil:nth-child(3 of :not([hidden])) { grid-column: 6 / 7; }
  .cd-zahl { font-size: min(calc(var(--text) * 4.1), calc((var(--satz) - 5 * var(--steg)) / 6 / 1.12)); }

  /* Angaben und Texte an der zweiten Achse */
  .ort-name, .karte, .abschnitt[id$="-ort"] > .knoepfe, .abschnitt[id$="-ort"] > .etikett-titel, .abschnitt[id$="-ort"] > .eintraege,
  .kalender > .gross, .kalender > .knoepfe,
  .teilen > :not(h2):not(.linie),
  .antwort > .formular, .antwort > .danke, .antwort > .frist-vorbei,
  .countdown > .kursiv,
  .schluss, .fuss-paar, .fuss > .versal {
    margin-left: var(--achse);
  }
  /* Neben der Achse bleibt für Knopfgruppen nur die rechte Hälfte */
  .abschnitt[id$="-ort"] > .knoepfe, .kalender > .knoepfe, .teilen > .knoepfe { --platz: calc(100% - var(--achse)); }
  .abschnitt[id$="-ort"] > .eintraege .eintrag { display: flex; }

  /* Antwort: Ziffern an der Satzkante, „Eure Antwort“ und die Frist daneben an der zweiten
     Achse, Versalhöhe und letzte Grundlinie bündig */
  .antwort {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--steg);
    align-items: start;
  }
  .antwort > * { grid-column: 1 / -1; }
  .antwort > .sprung { grid-row: 1; }
  /* „15 07 27“ ist gut 3,5 em breit und muss mit einem Steg Luft in die Spalten 1 bis 3 passen
     ((Satz − Steg) / 2). Bis etwa 700 px Fensterbreite werden die Ziffern deshalb kleiner. */
  .antwort > .frist-ziffern {
    grid-column: 1 / 4;
    grid-row: 2 / span 2;
    font-size: min(var(--frist-ziffern), calc((var(--satz) - var(--steg)) / 2 / 3.8));
  }
  .antwort > h2 { grid-column: 4 / -1; grid-row: 2; }
  .antwort > .frist { grid-column: 4 / -1; grid-row: 3; }
  .antwort > .frist-ziffern + h2 { padding-top: var(--haengen-tafel); }
  .antwort > .frist-ziffern + h2::before { content: ''; left: calc(-100% - var(--steg)); }
  .antwort > .frist-ziffern::before { content: none; }
  .antwort > .formular, .antwort > .danke, .antwort > .frist-vorbei { grid-column: 4 / -1; margin-left: 0; }
  .antwort > .formular { margin-top: 56px; }

  /* Musterseite: Stichwort an der Satzkante, Text an der zweiten Achse */
  .muster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--steg); align-items: baseline; }
  .muster > .linie { grid-column: 1 / -1; }
  .muster > h2 { grid-column: 1 / 4; }
  .muster > .muster-text, .muster > .knoepfe { grid-column: 4 / -1; }
  .muster > .muster-text { padding-top: var(--haengen); text-box: trim-start cap alphabetic; }
  .gestaltet, .recht { margin-left: var(--achse); }
}

/* Breite Bildschirme: QR-Code bleibt oben (Vorlage), hier an der zweiten Achse */
@media (min-width: 600px) {
  .teilen .qr-block { margin-top: 28px; }
}

/* ---------------------------------------------------------------------------
   Deckblatt statt Umschlag: das Papier der Karte mit Kopflinie, „Eine Einladung für euch“
   und dem Datum als Ziffernband. Kopflinie und Satzkante stehen genau wie auf der
   Startseite, so kann umschlag.js die Ziffern an ihren Platz wandern lassen. */

.umschlag-szene {
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: 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.3s ease;
}
.umschlag-szene.blende { opacity: 0; }
.u-satz {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--kopf-y) var(--innen) 0;
  cursor: pointer;
}
.u-satz > .luft { flex: 1 1 0; }
.u-satz > .luft.a { flex-grow: 1; min-height: 40px; }
.u-satz > .luft.c { flex-grow: 0.9; min-height: 40px; }
.u-ueber { max-width: 20em; }
.u-namen {
  padding-top: calc(var(--text) * 1.3);
  font-size: var(--namen-groesse);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.u-band { margin-top: calc(var(--text) * 1.9); }
.u-ueber .fuer-name { display: block; padding-top: calc(var(--kopf) * 0.24); text-wrap: balance; }
.u-ueber .fuer-name .einheit { display: inline-block; }
.u-band {
  display: flex;
  justify-content: space-between;
  padding-top: var(--haengen-tafel);
  font-size: min(calc((100vw - 2 * var(--rand)) / 3.85), calc(var(--spalte) / 3.85), 28svh);
}
.u-knopf {
  position: relative;
  align-self: flex-start;
  margin: 28px 0 0 var(--innen);
  min-width: min(16rem, calc(100% - 2 * var(--rand)));
}
.u-knopf .sym { width: 20px; height: 20px; }
/* Standbild für Pinterest (?standbild=offen): das Deckblatt als Gestaltung, ohne Bedienknopf */
.standbild .u-knopf { display: none; }

/* Handy quer (844 × 390, 740 × 360): Deckblatt kompakter, damit Ziffernband und Knopf ohne
   Scrollen in die erste Ansicht passen. Die Kopflinie bleibt unter der Leiste. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --kopf-y: max(60px, calc(env(safe-area-inset-top) + 50px)); }
  .umschlag-szene { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .u-satz > .luft.a, .u-satz > .luft.c { min-height: 12px; }
  .u-namen { padding-top: 10px; font-size: min(var(--namen-groesse), 14svh); }
  .u-band { margin-top: 14px; padding-top: 14px; font-size: min(calc((100vw - 2 * var(--rand)) / 3.85), 19svh); }
  .u-knopf { margin-top: 14px; }
}

/* ---------------------------------------------------------------------------
   Drucken: immer die helle Fassung auf weißem Papier */

@media print {
  :root, :root[data-thema], :root:not([data-thema]) {
    --grund: #ffffff;
    --schrift: #1d1c1a;
    --linie: #1d1c1a;
    --und: #22356b;
    --qr-grund: #ffffff;
    --qr-zug: 1;
    color-scheme: light;
  }
  .start-raster { min-height: auto; padding-bottom: 24px; }
}