/* ==========================================================
   Joy & Ivan · 15. Mai 2027
   Farben, Schrift und Abstände stehen zentral hier oben.
   ========================================================== */
:root {
  --paper:      #F4EDE1;   /* Grund, beige */
  --paper-2:    #ECE2D0;   /* getönte Abschnitte */
  --card:       #FAF6EE;
  --ink:        #3A2A1F;   /* dunkles Braun, Text */
  --ink-soft:   #6B5646;
  --bronze:     #8B6B45;   /* Ornamente, Linien, Akzente */
  --line:       rgba(58, 42, 31, .16);
  --lavender:   #9F86BF;
  --sage:       #7D8F68;

  /* v2: genau drei Schriften.
     1. Faculty Glyphic – alles Gesetzte (Text, Überschriften, Knöpfe)
     2. Wagner-Schrift  – Ortsnamen und Datum, als Linien gezeichnet (js/main.js, WAGNER_GLYPHEN)
     3. La Belle Aurore – kursive Handschrift, nur auf der Postkarte */
  --serif:   "Faculty Glyphic", "Trebuchet MS", "Segoe UI", sans-serif;
  --display: var(--serif);
  --caps:    var(--serif);
  --hand:    "La Belle Aurore", "Segoe Script", "Bradley Hand", cursive;
  --gold:    #A8823E;   /* Ornamente, Linien, Akzente */
  /* die drei Farben des Logos (final, 15.11.2026) – gemessen aus dem Bild in Design/Logo */
  --logo-gold:  #B37D01;
  --logo-lila:  #A187AE;
  --logo-gruen: #868A63;

  --wrap: 1100px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-arch: 50% 50% 0 0 / 22% 22% 0 0;   /* Otto Wagners flacher Bogen */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(16px, .45vw + 13.5px, 18.5px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.15; margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
h3 { font-weight: 400; letter-spacing: .06em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.15rem; }
h4 { font-family: var(--caps); font-weight: 400; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); margin-bottom: .4rem; }
p { margin: 0 0 1em; }

.kicker {
  font-family: var(--caps);
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 .9rem;
}
.lead { font-size: 1.15em; max-width: 40ch; margin-inline: auto; text-align: center; color: var(--ink-soft); }

.btn {
  display: inline-block;
  font-family: var(--caps);
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: .95em 2.2em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--paper); }
.link { font-family: var(--caps); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); text-decoration: none; border-bottom: 1px solid currentColor; }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ---------------- Sprachknopf (Navigation: siehe v2-Block am Ende) ---------------- */
.lang { background: none; border: 1px solid var(--line); color: var(--ink-soft); font-family: var(--caps); font-size: .72rem; letter-spacing: .12em; padding: .35rem .6rem; cursor: pointer; display: flex; gap: .35rem; }
.lang [data-lang] { opacity: .45; }
html[lang="de"] .lang [data-lang="de"], html[lang="en"] .lang [data-lang="en"] { opacity: 1; color: var(--ink); }

/* ---------------- Hero ---------------- */
/* Text links in der Satzbreite, Foto rechts bis an den Rand, weich ins Beige auslaufend */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(calc(100vh - 56px), 860px);
}
.hero__text {
  align-self: center; text-align: center;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.hero__logo { width: clamp(110px, 14vw, 150px); height: auto; margin: 0 auto 1rem; color: var(--ink); }
.hero__names { font-size: clamp(2.5rem, 5.6vw, 4.8rem); font-weight: 400; letter-spacing: .08em; line-height: 1.1; }
.hero__names em { font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--bronze); font-weight: 400; }
.hero__date { font-family: var(--caps); letter-spacing: .22em; text-transform: uppercase; font-size: .95rem; margin: 1.2rem 0 .3rem; }
.hero__place { color: var(--ink-soft); }

.countdown { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 2.2rem); margin: 1.6rem 0 2rem; }
.countdown div { display: flex; flex-direction: column; align-items: center; min-width: 4.2rem; }
.countdown span { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown small { font-family: var(--caps); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-top: .35rem; }

.hero__photo {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to top, transparent 0, #000 22%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to top, transparent 0, #000 22%);
          mask-composite: intersect;
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__photo {
    order: -1; height: 62vh; min-height: 340px;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
            mask-image: linear-gradient(to bottom, #000 60%, transparent);
  }
  .hero__text { padding-top: 0; margin-top: -3rem; position: relative; }
}

/* ---------------- Save the Date ---------------- */
.std__date { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: .12em; margin: 1rem 0 .2rem; color: var(--bronze); }
.std__note { font-size: 1.2rem; margin: -.4rem 0 1.4rem; }
.std__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.std__sun { width: 84px; margin: 0 auto 1.2rem; }
.hero--std .countdown { margin: 1.4rem 0 1.6rem; }

/* ---------------- Foto-Platzhalter ---------------- */
.photo { position: relative; overflow: hidden; background: var(--paper-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo.is-empty img { display: none; }
/* Mini-Slideshow: Fotos blenden weich ineinander und zoomen dabei ganz leicht zurück */
.photo--wechsel img { opacity: 0; transition: opacity .8s ease; }
.photo--wechsel img.is-on { opacity: 1; animation: wechsel-zoom 3.5s ease-out both; }
.photo--wechsel .photo__next { position: absolute; inset: 0; }
@keyframes wechsel-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
/* „Animationen reduzieren" im System: Fotos wechseln trotzdem, aber nur weich überblendet, ohne Zoom */
@media (prefers-reduced-motion: reduce) {
  .photo--wechsel img.is-on { animation: none; }
  .photo--wechsel img { transition: opacity .8s ease !important; }
}
.photo.is-empty::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem;
  font-family: var(--caps); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(139,107,69,.07) 14px 15px),
    var(--paper-2);
}

/* ---------------- Palmenfries als Band (nahtlos gekachelt) ---------------- */
.band { height: 34px; background: url("../assets/ornamente/w-band-palmetten.svg") center / auto 100% repeat-x; opacity: .8; }

/* ---------------- Abschnitte ---------------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter); }
.section > * { max-width: var(--wrap); margin-inline: auto; }
/* Getönte Abschnitte: das Gitter der philippinischen Capiz-Fenster, ganz leise.
   Es ist zugleich das Quadratraster der Wiener Secession. */
.section--tint {
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%238B6B45' stroke-opacity='.10'%3E%3Cpath d='M0 .5H56M.5 0V56'/%3E%3Crect x='6.5' y='6.5' width='43' height='43' rx='3'/%3E%3Cpath d='M28 14 42 28 28 42 14 28Z'/%3E%3C/g%3E%3C/svg%3E");
}
.section--tint .photo { background: var(--paper); }
.section__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.prose p { max-width: 58ch; }
.signature { font-size: 1.2em; color: var(--bronze); }

/* Geschichte */
.story { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.story__photo {
  aspect-ratio: 4 / 5; width: 100%; max-width: 440px; justify-self: center; background: none;
  /* weicher Rand auf allen vier Seiten, damit das Foto ins Beige übergeht */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-composite: intersect;
}
.story__photo.is-empty::after { background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(139,107,69,.07) 14px 15px), var(--paper-2); }
@media (max-width: 820px) { .story { grid-template-columns: 1fr; } .story__text { text-align: center; } .prose p { margin-inline: auto; } }

/* Ablauf */
.timeline { list-style: none; padding: 0; margin: 0 auto; max-width: 760px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 34px; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 68px 5.2rem 1fr; gap: 0 1.2rem; align-items: start; padding: 1.1rem 0; }
.timeline li > img { width: 68px; height: 68px; object-fit: contain; background: var(--paper); padding: 8px; position: relative; }
.timeline time { font-family: var(--caps); font-size: 1.05rem; letter-spacing: .08em; color: var(--bronze); padding-top: .9rem; }
.timeline h3 { padding-top: .55rem; margin-bottom: .2rem; }
.timeline p { color: var(--ink-soft); margin: 0; }
@media (max-width: 560px) {
  .timeline::before { left: 24px; }
  .timeline li { grid-template-columns: 48px 1fr; }
  .timeline li > img { width: 48px; height: 48px; padding: 5px; grid-row: span 2; }
  .timeline time { padding-top: .2rem; }
  .timeline h3 { padding-top: 0; }
}

/* Orte */
.venues { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); }
.venue { background: var(--card); border: 1px solid var(--line); padding: 0 clamp(1.4rem, 3vw, 2.4rem) 2rem; text-align: center; }
.venue__crest { height: clamp(64px, 8vw, 92px); width: auto; max-width: 80%; margin: 1.8rem auto 1.2rem; }
.venue h3 { margin-bottom: .8rem; }
.venue p:not(.kicker) { color: var(--ink-soft); }
.travel { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: clamp(2rem, 5vw, 3rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.travel p { color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) { .venues, .travel { grid-template-columns: 1fr; } }

/* Dresscode */
.dress { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.dress__card { position: relative; background: var(--card); border: 1px solid var(--line); padding: clamp(2.2rem, 4vw, 3rem); text-align: center; }
.dress__card h3 { margin-bottom: .7rem; }
.dress__card p { color: var(--ink-soft); }
.swatches { list-style: none; display: flex; justify-content: center; gap: .7rem; padding: 0; margin: 1.4rem 0 0; }
.swatches li { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--line), 0 0 0 4px var(--card), 0 0 0 5px var(--line); }
.dress__notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.5rem); margin-top: 2rem; }
.dress__notes p { margin: 0; color: var(--ink-soft); }
.dress__notes strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .dress, .dress__notes { grid-template-columns: 1fr; } }

/* Fragen */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; font-size: 1.2rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--bronze); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink-soft); padding-bottom: 1rem; max-width: 60ch; }

/* RSVP */
.rsvp { position: relative; max-width: 820px !important; padding: clamp(4.5rem, 10vw, 7rem) clamp(1.4rem, 8vw, 6rem); background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.rsvp .section__head, .form { position: relative; }
.form { display: grid; gap: 1.3rem; max-width: 460px; margin: 0 auto; }
.field { display: grid; gap: .4rem; border: 0; padding: 0; margin: 0; }
.field > label, .field legend { font-family: var(--caps); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding: 0; }
.field input:not([type="radio"]), .field select, .field textarea {
  font: inherit; font-size: 1.05rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 0;
  padding: .7rem .8rem; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); box-shadow: 0 0 0 3px rgba(139,107,69,.15); }
.field [aria-invalid="true"] { border-color: #A1473A; }
.choice { gap: .6rem; }
.choice legend { margin-bottom: .6rem; }
.field.choice > label { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
.choice label { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-size: 1.1rem; }
.choice input { accent-color: var(--ink); width: 1.1rem; height: 1.1rem; }
.if-yes { display: grid; gap: 1.3rem; }
.if-yes[hidden], [hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn { justify-self: center; margin-top: .6rem; }
.form__status { text-align: center; min-height: 1.6em; margin: 0; }
.form__status.is-error { color: #A1473A; }
.form.is-done > :not(.form__status) { display: none; }
.form.is-done .form__status { font-size: 1.35rem; font-style: normal; }

/* Footer */
.footer { text-align: center; padding: 4rem var(--gutter) 3rem; border-top: 1px solid var(--line); }
.footer__logo { width: 120px; height: auto; margin: 0 auto 1rem; color: var(--ink); }
.footer__thanks { font-size: 1.3rem; margin-bottom: .3rem; }
.footer__small { font-family: var(--caps); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* ==========================================================
   Digitale Karte: das Kuvert vor dem Save the Date
   Ohne JavaScript (html ohne .js) bleibt es unsichtbar.
   ========================================================== */

.envelope {
  --env: #E4D6BE;        /* Kuvertpapier */
  --env-dark: #D8C7AA;   /* Klappe */
  --wax: #6E4A2A;        /* Siegellack, dunkles Bronze */
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 16px;
  background-color: var(--paper);
  transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1), transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
/* weich wegschweben statt hart ausblenden */
.envelope.is-leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }

.envelope__stage { width: min(92vw, 600px); text-align: center; }
.envelope__to { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1.1rem, 4.2vw, 1.6rem); margin: 0 0 1.6rem; transition: opacity .4s; }
.envelope__hint { font-family: var(--caps); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--bronze); margin: 1.8rem 0 0; animation: hint 2.4s ease-in-out infinite; transition: opacity .4s; }
@keyframes hint { 50% { opacity: .35; } }
.envelope.is-open .envelope__to, .envelope.is-open .envelope__hint { opacity: 0; }

.envelope__body {
  position: relative; aspect-ratio: 3 / 2; cursor: pointer;
  perspective: 1400px;
  background: var(--env-dark);           /* Innenseite / Futter */
  box-shadow: 0 18px 40px -18px rgba(58, 42, 31, .45);
}
/* Futter mit Puso-Band, sichtbar sobald die Klappe offen ist */
.envelope__body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  background: url("../assets/ornamente/w-palmettenfries.svg") no-repeat center 12% / 84% auto;
  opacity: .55;
}

.envelope__card {
  position: absolute; left: 6%; right: 6%; top: 7%; height: 86%;
  z-index: 2;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  transition: transform 1.3s cubic-bezier(.22, .8, .3, 1) .75s;
  will-change: transform;
}
.envelope__card svg { width: 22%; color: var(--ink); }
.envelope__card .kicker { margin: 0; font-size: .66rem; }
.envelope__card-date { font-family: var(--display); font-weight: 400; color: var(--bronze); margin: 0; font-size: clamp(1rem, 3.4vw, 1.4rem); letter-spacing: .08em; }

.envelope__pocket {
  position: absolute; inset: 0; z-index: 3;
  background: var(--env);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7%;
}
.envelope__names { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(.9rem, 3.2vw, 1.2rem); color: var(--ink-soft); letter-spacing: .16em; }

.envelope__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4;
  background: var(--env-dark);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .9s cubic-bezier(.45, 0, .25, 1) .2s, z-index 0s linear .65s;
  will-change: transform;
}
.envelope__seal {
  position: absolute; left: 50%; top: 60%; z-index: 5;
  width: clamp(58px, 14vw, 80px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  color: #F1E4CC;
  background: radial-gradient(circle at 35% 30%, #8A6139, var(--wax) 60%, #533519);
  box-shadow: 0 0 0 4px rgba(110, 74, 42, .35), 0 6px 14px -4px rgba(58, 42, 31, .6);
  transition: transform .5s cubic-bezier(.3, 0, .2, 1), opacity .4s ease;
  animation: pulse 2.4s ease-in-out infinite;
}
.envelope__seal svg { position: absolute; inset: 21%; width: 58%; height: 58%; }
/* Wachssiegel (index.html): echtes Siegel als Bild, ohne runden Knopf-Hintergrund */
.envelope__seal--wachs {
  width: clamp(76px, 19vw, 104px); background: none; box-shadow: none; border-radius: 50%;
  filter: drop-shadow(0 5px 7px rgba(58, 42, 31, .5));
  animation: siegel-puls 2.6s ease-in-out infinite;
}
.envelope__seal--wachs .siegel { position: absolute; inset: 0; width: 100%; height: 100%; }
.envelope__seal--wachs:focus { outline: none; }
.envelope__seal--wachs:focus-visible { filter: drop-shadow(0 0 5px rgba(201, 160, 105, .7)) drop-shadow(0 5px 7px rgba(58, 42, 31, .5)); }
@keyframes siegel-puls { 50% { transform: translate(-50%, -50%) scale(1.045); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(110, 74, 42, .12), 0 6px 14px -4px rgba(58, 42, 31, .6); } }

/* Öffnen: Siegel bricht, Klappe klappt auf, Karte fährt heraus */
.envelope.is-open .envelope__seal { transform: translate(-50%, -50%) scale(1.25); opacity: 0; animation: none; }
.envelope.is-open .envelope__flap { transform: rotateX(180deg); z-index: 1; }
.envelope.is-open .envelope__card { transform: translateY(-58%); }

@media (prefers-reduced-motion: reduce) {
  .envelope *, .envelope { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}

/* ==========================================================
   Save the Date: Kleinigkeiten rund um Kuvert und Datum
   ========================================================== */
.lang--float { position: absolute; top: 14px; right: 16px; z-index: 3; background: var(--paper); }
.std__time { font-family: var(--caps); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: -.2rem 0 0; }
.std__replay {
  display: block; margin: 1.6rem auto 0; background: none; border: 0; cursor: pointer; padding: .3rem;
  font-family: var(--serif); font-size: 1rem; color: var(--bronze);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Schrift über dem Umriss-Muster lesbar halten */
.envelope__to, .envelope__hint { text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper), 0 0 22px var(--paper); }

/* ==========================================================
   Wagner-Schrift (Ortsnamen, Datum): js/main.js zeichnet sie als Linien,
   der Text bleibt für Vorleseprogramme stehen.
   ========================================================== */
.wagner-label__svg { height: clamp(22px, 2.6vw, 34px); width: auto; display: block; overflow: visible; }
.wagner-label__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .wagner-label__text { position: static; width: auto; height: auto; clip: auto; font-family: var(--caps); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; line-height: 1.2; }

.ed-credit {
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
  margin-top: clamp(3rem, 8vw, 5rem); color: var(--ink);
}
.ed-credit .kicker { margin-bottom: .2rem; }
.ed-credit img { width: min(260px, 70%); height: auto; transition: opacity .3s ease; }
.ed-credit:hover img { opacity: .7; }
.footer__credit { margin-top: .5rem; }
.footer__credit a { text-decoration: none; border-bottom: 1px solid var(--line); }

/* sanft einblenden, sobald ein Block ins Bild kommt (nur mit JavaScript) */
.js .ed-reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.js .ed-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .ed-reveal { transform: none; transition: opacity .4s ease; }
  .bild img { transition: none; }
}

/* ==========================================================
   Postkarte (index.html, #karte)
   Kommt aus dem Kuvert und steht dann auf einer Bühne, die beim
   Scrollen stehen bleibt. Vorne acht Fotos um das Logo, hinten der
   Brief. Querformat am Computer, Hochformat am Handy (schmaler als
   hoch), damit der Brief lesbar bleibt.
   Schriftgrößen in cqi = Prozent der Kartenbreite.
   ========================================================== */
/* die kleine Karte im Kuvert */
.envelope__card--postkarte { height: auto; aspect-ratio: 3 / 2; top: 6%; padding: 0; background: none; box-shadow: none; display: block; transition: none; }
.envelope__pc { position: absolute; inset: 0; container-type: inline-size; }
.envelope__pc .postcard__face { box-shadow: 0 0 0 1px rgba(58, 42, 31, .08), 0 6px 16px -8px rgba(58, 42, 31, .4); }
/* am Handy ist die große Postkarte hochkant – im Kuvert liegt sie quer gedreht */
@media (max-aspect-ratio: 1 / 1) {
  .envelope__pc { inset: auto; left: 50%; top: 50%; width: 66.667%; aspect-ratio: 2 / 3; transform: translate(-50%, -50%) rotate(-90deg); }
}
/* Herausgleiten mit kleinem Aufbau: kurz herauslugen, innehalten, dann langsam ganz heraus */
.envelope.is-open .envelope__card--postkarte { transform: none; animation: pc-rise 1.9s cubic-bezier(.45, 0, .25, 1) .75s both; }
@keyframes pc-rise {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(-11%); }
  36%  { transform: translateY(-9%); }
  100% { transform: translateY(-82%) rotate(-1deg); }
}
/* während die Karte groß wird, gleitet das Kuvert nach unten weg */
.envelope.is-handing .envelope__stage { opacity: 0; transform: translateY(16%); transition: opacity .9s ease .15s, transform 1.2s cubic-bezier(.4, 0, .6, 1); }

.postcard {
  --w: min(92vw, 900px, calc((100svh - 172px) * 1.5));
  width: var(--w); aspect-ratio: 3 / 2;
  perspective: 2200px;
  container-type: inline-size;
}
.postcard__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.postcard__face {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #FBF7EF;
  box-shadow: 0 1px 2px rgba(58, 42, 31, .14), 0 24px 50px -22px rgba(58, 42, 31, .55);
}

/* Vorderseite: acht Fotos (Holding Hands) um das Logo. Neun gleiche Felder, jedes im
   Format der Karte selbst – deshalb wirken die Fotos trotz ihrer Größe ruhig.
   Welches Foto wo sitzt: grid-template-areas (f1 … f8 = haende-1.jpg … haende-8.jpg, t = Logo). */
.postcard__front { padding: 3.1cqi; }
.pk {
  height: 100%; display: grid; gap: 1.05cqi;
  grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  grid-template-areas: "f1 f3 f2" "t t f4" "f5 f6 f7";
}
.pk__foto { margin: 0; position: relative; overflow: hidden; min-width: 0; min-height: 0; background: var(--paper-2); }
.pk__foto img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) saturate(.9) contrast(1.05); }
.pk__foto--1 { grid-area: f1; } .pk__foto--2 { grid-area: f2; } .pk__foto--3 { grid-area: f3; } .pk__foto--4 { grid-area: f4; }
.pk__foto--5 { grid-area: f5; } .pk__foto--6 { grid-area: f6; } .pk__foto--7 { grid-area: f7; } .pk__foto--8 { grid-area: f8; }
.pk__titel {
  grid-area: t; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.15cqi; text-align: center;
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); outline-offset: -.75cqi;
}
.pk__logo { width: 9.4cqi; height: auto; color: var(--logo-gold); flex: none; }
.pk__text { display: flex; flex-direction: column; align-items: center; gap: .95cqi; }
.pk__gruss { margin: 0; font-family: var(--display); font-size: 1.9cqi; line-height: 1.1; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.pk__datum { color: var(--bronze); line-height: 0; }
.pk__datum .wagner-label__svg { height: 1.7cqi; }
/* Körnung wie auf Film, über der ganzen Vorderseite */
.postcard__front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
}

/* Rückseite: links der Brief, rechts Marke, Stempel, Adresse */
.postcard__back {
  transform: rotateY(180deg);
  padding: 4.4cqi 4.6cqi;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 4.4cqi;
  background:
    linear-gradient(var(--line), var(--line)) no-repeat 56.5% 12% / 1px 76%,
    #FBF7EF;
}
.postcard__msg { display: flex; flex-direction: column; justify-content: center; text-align: left; min-height: 0; }
.postcard__msg .message__greeting { font-size: 3.3cqi; margin: 0 0 1.4cqi; }
.postcard__msg .message__text { font-size: 2.1cqi; line-height: 1.45; margin: 0 0 1.4cqi; }
.postcard__msg .message__sign { font-size: 2cqi; }
.postcard__msg .message__tag { font-size: 2.2cqi; margin: .3cqi 0 0; }
.postcard__msg .message__bussi { font-family: var(--display); font-size: 2.2cqi; color: var(--bronze); margin: 0 0 .4cqi; }
.postcard__msg .message__ps { font-size: 1.85cqi; color: var(--ink-soft); margin: 1.4cqi 0 0; }
.postcard__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.postcard__head { position: absolute; left: 0; top: 0; margin: 0; font-family: var(--caps); font-size: 1.5cqi; letter-spacing: .32em; text-transform: uppercase; color: var(--bronze); }
.postcard__stamp {
  position: absolute; right: 0; top: 0; width: 13cqi; aspect-ratio: 4 / 5; padding: 1cqi;
  background: #fff; transform: rotate(3deg);
  /* gezähnter Rand wie bei einer Briefmarke */
  -webkit-mask: radial-gradient(circle at center, transparent .55cqi, #000 .6cqi) -0.75cqi -0.75cqi / 1.5cqi 1.5cqi, linear-gradient(#000, #000) center / calc(100% - 1.5cqi) calc(100% - 1.5cqi) no-repeat;
          mask: radial-gradient(circle at center, transparent .55cqi, #000 .6cqi) -0.75cqi -0.75cqi / 1.5cqi 1.5cqi, linear-gradient(#000, #000) center / calc(100% - 1.5cqi) calc(100% - 1.5cqi) no-repeat;
  filter: drop-shadow(0 1px 2px rgba(58, 42, 31, .2));
  display: flex; flex-direction: column; gap: .5cqi;
}
.postcard__stamp img { flex: 1; min-height: 0; width: 100%; object-fit: cover; filter: sepia(.25) saturate(.8); }
.postcard__stamp span { font-family: var(--caps); font-size: 1.3cqi; letter-spacing: .3em; text-transform: uppercase; text-align: center; color: var(--ink); }
.postcard__postmark { position: absolute; right: 7.5cqi; top: 5cqi; width: 21cqi; color: rgba(110, 74, 42, .6); transform: rotate(-12deg); pointer-events: none; }
.postcard__addr { list-style: none; margin: 0; padding: 0; }
.postcard__addr li {
  font-family: var(--serif); font-size: 2.15cqi; line-height: 1.2;
  padding: 1.4cqi .4cqi .5cqi; border-bottom: 1px solid var(--line); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.postcard__addr li:first-child { font-family: var(--display); font-size: 2.6cqi; }


/* Hochformat: Handy und schmale Fenster */
@media (max-aspect-ratio: 1 / 1) {
  .postcard { --w: min(92vw, 460px, calc((100svh - 168px) / 1.5)); aspect-ratio: 2 / 3; }
  /* Hochkant: zwei Spalten, vier Reihen, das Logo als Band in der Mitte */
  .postcard__front { padding: 4.4cqi; }
  .pk {
    gap: 1.4cqi;
    grid-template: repeat(4, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
    grid-template-areas: "f1 f3" "f2 t" "f4 f5" "f6 f7";
  }
  .pk__titel { flex-direction: column; gap: 1.8cqi; }
  .pk__logo { width: 13cqi; }
  .pk__text { align-items: center; gap: 1.7cqi; }
  .pk__gruss { font-size: 3.5cqi; letter-spacing: .16em; white-space: normal; text-align: center; line-height: 1.25; max-width: 9em; }
  .pk__datum .wagner-label__svg { height: 2.9cqi; }
  .postcard__back {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 3cqi 0; padding: 6cqi 6.5cqi;
    background: linear-gradient(var(--line), var(--line)) no-repeat 50% calc(6cqi + 37.5cqi) / 84% 1px, #FBF7EF;
  }
  .postcard__side { order: -1; height: 36cqi; }
  .postcard__head { font-size: 2.6cqi; }
  .postcard__stamp { width: 21cqi; padding: 1.6cqi; }
  .postcard__stamp span { font-size: 2.2cqi; }
  .postcard__postmark { width: 32cqi; right: 13cqi; top: 7cqi; }
  .postcard__addr { width: 60%; }
  .postcard__addr li { font-size: 3.7cqi; padding: 1.6cqi .4cqi .6cqi; }
  .postcard__addr li:first-child { font-size: 4.4cqi; }
  .postcard__msg { justify-content: center; }
  .postcard__msg .message__greeting { font-size: 7cqi; margin-bottom: 3.4cqi; }
  .postcard__msg .message__text { font-size: 5.1cqi; line-height: 1.55; margin-bottom: 4cqi; }
  .postcard__msg .message__sign { font-size: 4.4cqi; }
  .postcard__msg .message__tag { font-size: 4.6cqi; }
  .postcard__msg .message__bussi { font-size: 4.6cqi; margin-bottom: .8cqi; }
  .postcard__msg .message__ps { font-size: 4cqi; margin-top: 2.6cqi; }
  .postcard__msg .message__text { font-size: 4.7cqi; margin-bottom: 3cqi; }
}


/* ==========================================================
   v2 · 14.11.2026
   Ein Logo, drei Schriften, vier Symbole (Sonne, Mond, Sampaguita,
   Palmenblatt). Dazu alles, was beim Scrollen Orientierung gibt:
   Reiter mit Palmenfries, Lesefortschritt, bewegter Hintergrund,
   weiches Einblenden. Die Bewegung steuert js/main.js („Orientierung
   & Bewegung"); wer am Gerät „Bewegung reduzieren" eingestellt hat,
   bekommt alles ohne Bewegung.
   ========================================================== */

/* ---------------- Schrift ---------------- */
h1, h2, h3 { letter-spacing: .06em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.35rem); }
.hero__names { letter-spacing: .05em; }
.hero__names em { font-family: var(--display); color: var(--gold); }
.kicker { letter-spacing: .28em; font-size: .7rem; }
.lead { font-size: 1.08em; max-width: 46ch; }
.signature { font-size: 1.08em; }
.std__date { color: var(--gold); letter-spacing: .1em; }
.std__note { font-size: 1.05rem; color: var(--ink-soft); }
.std__replay { font-size: .9rem; }
.hero__place { color: var(--ink-soft); }
.hero__logo, .footer__logo { color: var(--logo-gold); }
.hero__logo { width: clamp(124px, 15vw, 172px); margin-bottom: 1.4rem; }
.footer__logo { width: 104px; }
.footer__thanks { font-size: 1.15rem; letter-spacing: .04em; }
::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); }

/* ---------------- Reiter mit Palmenfries ----------------
   Oben das Logo, in der Mitte die Reiter, darunter der Palmenfries.
   Im Fries läuft eine Goldlinie mit: so weit ist man auf der Seite. */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  transition: box-shadow .5s ease;
}
.nav.is-scrolled { box-shadow: 0 14px 34px -26px rgba(58, 42, 31, .6); }
.nav__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem 1rem;
  max-width: 1400px; margin: 0 auto; padding: .5rem var(--gutter) .35rem;
}
.nav__brand { justify-self: start; display: flex; align-items: center; gap: .75rem; text-decoration: none; font-family: var(--caps); text-transform: uppercase; letter-spacing: .22em; font-size: .78rem; }
.nav__brand svg { width: 40px; height: 40px; color: var(--logo-gold); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.nav__brand:hover svg { transform: scale(1.06); }
.nav__bar > .lang { justify-self: end; }
.nav__tabs { position: relative; display: flex; gap: clamp(0rem, 1vw, .9rem); }
.nav__tabs a {
  position: relative; padding: .6rem .75rem; white-space: nowrap;
  font-family: var(--caps); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-soft); transition: color .35s ease;
}
.nav__tabs a::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .22rem; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.nav__tabs a:hover, .nav__tabs a.is-active { color: var(--ink); }
.nav__tabs a:hover::after, .nav__tabs a.is-active::after { transform: scaleX(1); }
.nav__tabs .nav__cta { color: var(--bronze); }
.nav__fries {
  position: relative; height: 18px;
  background: url("../assets/ornamente/w-band-palmetten.svg") center / auto 100% repeat-x;
}
.nav__fries::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 28%, transparent); }   /* leichter Schleier; die Punkte in Lavendel und Salbei bleiben erkennbar */
.nav__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
/* Handy und Tablet: eine einzige Zeile – Logo, Reiter zum Wischen, Sprache. So bleibt mehr Platz für den Inhalt. */
@media (max-width: 900px) {
  html { scroll-padding-top: 68px; }
  .nav__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 .35rem; padding: .3rem var(--gutter) .2rem; }
  .nav__brand span { display: none; }
  .nav__brand svg { width: 34px; height: 34px; }
  .nav__tabs {
    min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 22px), transparent);
  }
  .nav__tabs::-webkit-scrollbar { display: none; }
  .nav__tabs a { font-size: .66rem; padding: .7rem .62rem; }
  .nav__tabs a::after { left: .62rem; right: .62rem; bottom: .38rem; }
  .nav__bar > .lang { padding: .32rem .45rem; font-size: .66rem; gap: .25rem; }
  .nav__fries { height: 12px; }
}

/* getönte Abschnitte lassen den Hintergrund (Kirche und Theater) leicht durchscheinen */
.section--tint { background-color: color-mix(in srgb, var(--paper-2) 80%, transparent); }

/* ---------------- Abschnittskopf: Linie – Symbol – Linie ---------------- */
.orn {
  --sym: url("../assets/ornamente/sonne.svg");
  display: flex; gap: 58px; align-items: center; width: min(300px, 72%); height: 30px; margin: 1.3rem auto 0;
  background: var(--sym) center / auto 100% no-repeat;
}
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold)); transform-origin: right; }
.orn::after { background: linear-gradient(to left, transparent, var(--gold)); transform-origin: left; }
.orn--mond  { --sym: url("../assets/ornamente/w-mondsichel.svg"); }
.orn--blume { --sym: url("../assets/ornamente/sampaguita.svg"); }
.orn--palme { --sym: url("../assets/ornamente/w-palmette.svg"); height: 36px; }
.js .ed-reveal .orn::before, .js .ed-reveal .orn::after { transform: scaleX(0); transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .35s; }
.js .ed-reveal.is-in .orn::before, .js .ed-reveal.is-in .orn::after { transform: none; }

/* gestaffelt einblenden: --i vergibt js/main.js je Geschwister */
.js .ed-reveal { transition-delay: calc(var(--i, 0) * 95ms); }

/* ---------------- Knöpfe, Links ---------------- */
.btn { font-size: .76rem; letter-spacing: .22em; padding: 1.05em 2.4em; transition: background .35s ease, color .35s ease, box-shadow .35s ease, transform .35s ease; }
.btn:hover { box-shadow: 0 12px 24px -16px rgba(58, 42, 31, .7); transform: translateY(-1px); }
.btn:active { transform: none; }
.link { transition: color .3s ease, letter-spacing .4s ease; }
.link:hover { color: var(--ink); letter-spacing: .2em; }

/* Countdown als drei Felder mit Haarlinien */
.countdown { gap: 0; }
.countdown div { min-width: 0; padding: 0 clamp(1rem, 3vw, 2.2rem); }
.countdown div + div { border-left: 1px solid var(--line); }
.countdown span { font-size: clamp(2rem, 4.4vw, 2.7rem); }
.countdown small { letter-spacing: .24em; }

/* „weiter unten geht es weiter" */
.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: .6rem; width: max-content; margin: 2.2rem auto 0;
  font-family: var(--caps); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--bronze);
}
.scroll-hint i { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: faden 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes faden { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* nach oben */
.to-top {
  position: fixed; right: clamp(12px, 2.4vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 15;
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 0 0 1px var(--line), 0 10px 24px -14px rgba(58, 42, 31, .6);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s ease, transform .4s ease, color .3s ease;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--gold); }

/* ---------------- Hauptseite ---------------- */
.story { gap: clamp(2rem, 6vw, 5.5rem); }
.story__text .signature { color: var(--bronze); }

/* Galerie: Fotos unter Wagners flachem Bogen, Ortsname in Wagner-Schrift */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.4rem) clamp(1.2rem, 3vw, 2.6rem); align-items: start; padding: 8px 8px 1rem; }
.shot { margin: 0; }
.shot:nth-child(3n + 2) { margin-top: clamp(1.6rem, 4.5vw, 3.6rem); }
.shot__photo {
  aspect-ratio: 3 / 4; border-radius: 50% 50% 0 0 / 17% 17% 0 0;
  outline: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 7px;
  box-shadow: 0 34px 50px -38px rgba(58, 42, 31, .7);
}
.shot__photo img { filter: sepia(.14) saturate(.9) contrast(1.05); transition: transform 1.6s cubic-bezier(.2, .7, .3, 1); }
.shot:hover .shot__photo img { transform: scale(1.05); }
.shot figcaption { display: flex; justify-content: center; margin-top: 1.5rem; color: var(--bronze); line-height: 0; }
.shot .wagner-label__svg { height: clamp(14px, 1.45vw, 19px); max-width: 100%; }
@media (max-width: 700px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot:nth-child(3n + 2) { margin-top: 0; }
  .shot:nth-child(2n) { margin-top: 2rem; }
  .shot .wagner-label__svg { height: 12px; }
}

/* Ablauf: die Linie füllt sich beim Scrollen mit Gold (--fill aus js/main.js) */
.timeline::after { content: ""; position: absolute; left: 34px; top: 20px; width: 1px; height: calc((100% - 40px) * var(--fill, 0)); background: var(--gold); }
.timeline li > img { border-radius: 50%; padding: 15px; box-shadow: 0 0 0 1px var(--line); z-index: 1; }
.timeline time { color: var(--gold); letter-spacing: .1em; }
@media (max-width: 560px) { .timeline::after { left: 24px; } .timeline li > img { padding: 10px; } }

/* Orte: die Umrisse der beiden Gebäude */
.venue { padding-bottom: 2.2rem; transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; }
.venue:hover { transform: translateY(-4px); box-shadow: 0 30px 44px -36px rgba(58, 42, 31, .7); }
.venue__crest { height: clamp(96px, 12vw, 140px); max-width: 86%; margin: 2rem auto 1.4rem; }
.dress__card { transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s ease; }
.dress__card:hover { transform: translateY(-4px); box-shadow: 0 30px 44px -36px rgba(58, 42, 31, .7); }
.swatches li { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.swatches li:hover { transform: scale(1.14); }

/* Fragen */
.faq { margin-inline: auto; }
.faq summary { font-size: 1.08rem; transition: color .3s ease; padding-right: 2.6rem; }
.faq summary:hover { color: var(--bronze); }
.faq summary::after { content: ""; width: 13px; height: 13px; right: .4rem; font-size: 0;
  background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1px 100% no-repeat;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq details[open] p { animation: auf .5s ease both; }
@keyframes auf { from { opacity: 0; transform: translateY(-6px); } }

/* Zu- und Absage */
.rsvp { box-shadow: 0 0 0 1px var(--line), 0 50px 70px -60px rgba(58, 42, 31, .7); outline: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline-offset: -12px; }
.field > label, .field legend { letter-spacing: .2em; font-size: .68rem; }
.field input:not([type="radio"]), .field select, .field textarea { font-size: 1rem; padding: .8rem .9rem; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.field input:not([type="radio"]):hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); background: var(--card); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8823E' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px; }
.choice label { border: 1px solid var(--line); background: var(--paper); padding: .9rem 1rem; transition: border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.field.choice > label { font-size: 1rem; }
.choice label:hover { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.choice label:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--card); }
.choice input { accent-color: var(--gold); }
.form.is-done .form__status { font-size: 1.2rem; line-height: 1.5; padding: 1rem 0; }

/* Fuß */
.footer { border-top: 0; padding-top: 3.2rem; }

/* ---------------- Save the Date ---------------- */
.romcom .section__head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }

/* Kuvert (Seite 1) */
.envelope__to { letter-spacing: .16em; }
.envelope__names { letter-spacing: .2em; }
.envelope__seal--wachs { width: clamp(84px, 21vw, 112px); }

/* Postkarte, Rückseite: der Brief in Handschrift. Alles gleich groß,
   nur die Anrede und die Unterschrift sind größer. */
.postcard__msg { --brief: 2.5cqi; font-family: var(--hand); color: #33271E; }
.postcard__msg .message__greeting,
.postcard__msg .message__sign { font-family: var(--hand); font-size: 4.3cqi; line-height: 1.1; text-transform: none; letter-spacing: 0; color: inherit; }
.postcard__msg .message__greeting { margin: 0 0 1.6cqi; }
.postcard__msg .message__sign { margin: .5cqi 0 .4cqi; }
.postcard__msg .message__text,
.postcard__msg .message__bussi,
.postcard__msg .message__tag,
.postcard__msg .message__ps { font-family: var(--hand); font-size: var(--brief); line-height: 1.38; color: inherit; }
.postcard__msg .message__text { margin: 0 0 1.5cqi; }
.postcard__msg .message__bussi { margin: 0; }
.postcard__msg .message__tag { margin: 0; }
.postcard__msg .message__ps { margin: 1.5cqi 0 0; }
/* Adressfeld: linksbündig, oben „AN EUCH / TO YOU" */
.postcard__addr li { text-align: left; font-family: var(--serif); font-size: 1.95cqi; padding: 1.5cqi .2cqi .55cqi; }
.postcard__addr li:first-child { font-family: var(--caps); font-size: 2.2cqi; letter-spacing: .22em; text-transform: uppercase; }
@media (max-aspect-ratio: 1 / 1) {
  .postcard__msg { --brief: 4.75cqi; }
  .postcard__msg .message__greeting, .postcard__msg .message__sign { font-size: 7.6cqi; }
  .postcard__msg .message__greeting { margin-bottom: 2.4cqi; }
  .postcard__msg .message__text, .postcard__msg .message__bussi, .postcard__msg .message__tag, .postcard__msg .message__ps { font-size: var(--brief); line-height: 1.4; }
  .postcard__msg .message__text { margin-bottom: 2.4cqi; }
  .postcard__msg .message__ps { margin-top: 2.4cqi; }
  .postcard__addr li { font-size: 3.5cqi; }
  .postcard__addr li:first-child { font-size: 3.7cqi; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint i { animation: none; }
  .js .ed-reveal .orn::before, .js .ed-reveal .orn::after { transform: none; }
  .faq details[open] p { animation: none; }
}
.hero__names em { margin: 0 .14em 0 -.04em; }
/* niedrige Bildschirme (Laptop): die Eckdaten samt Knöpfen passen ohne Scrollen ins Bild */
@media (min-width: 821px) and (max-height: 900px) {
  .hero__text { padding-block: 1.6rem; }
  .hero__logo { width: clamp(96px, 13vh, 132px); margin-bottom: .8rem; }
  .hero__names { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
  .std__date { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: .6rem; }
  .hero--std .countdown, .countdown { margin: 1rem 0 1.1rem; }
  .countdown span { font-size: 2rem; }
  .std__replay { margin-top: 1rem; }
  .scroll-hint { margin-top: 1.2rem; }
  .scroll-hint i { height: 30px; }
}


/* ==========================================================
   v2 · 15.11.2026
   Nach dem Siegel wird nur noch gescrollt: Die Postkarte steht auf
   einer Bühne, die stehen bleibt und sich beim Scrollen umdreht,
   danach kommen Datum und Fotos. Im Hintergrund bauen sich Kirche
   und Jugendstiltheater mit dem Scrollen auf.
   Gesteuert in js/main.js: „Save the Date" (Kuvert, Bühne),
   „Mosaik" (Fotos), „Orientierung" (Reiter, Areal).
   ========================================================== */

/* ---------------- Kirche und Jugendstiltheater im Hintergrund ----------------
   Die Zeichnung steht dauerhaft und vollständig am unteren Bildrand. Beim Scrollen
   bewegt sie sich nur ganz leicht: --zug (0 bis 1, aus js/main.js) = wie weit man auf
   der Seite ist; damit hebt sie sich um ein paar Pixel und wird eine Spur größer.
   Stärker oder schwächer: die beiden Zahlen bei „transform" ändern. */
:root {
  --areal-b: min(calc(100vw - 2 * var(--gutter)), 1100px);   /* Breite der Zeichnung */
  --areal-h: calc(var(--areal-b) * 270 / 920);               /* ihre Höhe */
}
.areal {
  position: fixed; left: 50%; bottom: 0; z-index: -1; width: var(--areal-b);
  transform: translateX(-50%) translateY(calc(var(--hub, 0px) * -1)) scale(calc(1 + var(--zug, 0) * .04));
  transform-origin: 50% 100%; will-change: transform;
  pointer-events: none; line-height: 0; color: var(--bronze); opacity: 0; transition: opacity .8s ease;
}
.areal.is-da { opacity: .4; }
.areal svg { display: block; width: 100%; height: auto; overflow: visible; stroke-width: 1.3; }
@media (max-width: 700px) { .areal svg { stroke-width: 2.4; } }
/* Fuß: darunter bleibt Platz, damit die Zeichnung am Ende frei steht */

/* ---------------- Kuvert: Sperre, bis das Siegel gebrochen ist ----------------
   html.is-kuvert setzt das kleine Skript im Kopf von index.html (erster Besuch in diesem Tab).
   Solange gilt: nichts scrollt, von der Seite ist nur der Hintergrund zu sehen.
   Das Kuvert öffnet sich nur durch Antippen (Siegel oder Kuvert). */
html { overflow-y: scroll; }   /* der Rollbalken hat immer seinen Platz: nichts springt, wenn das Kuvert aufgeht */
/* Solange das Kuvert zu ist, gibt es nichts zu scrollen: nur die Bühne, genau einen Bildschirm hoch. */
html.is-kuvert .karte { height: 100vh; height: 100svh; }
html.is-kuvert .nav, html.is-kuvert main, html.is-kuvert .band, html.is-kuvert .footer { display: none; }
html:not(.is-kuvert) .envelope:not(.is-leaving) { display: none; }
html.is-kuvert .karte__stage > * { visibility: hidden; }
html.is-kuvert .to-top { display: none; }
/* Übergabe: die große Karte fliegt über dem Kuvert aus der kleinen heraus */
html.is-kuvert.is-handoff .karte { z-index: 110; }
html.is-kuvert.is-handoff .karte__stage > .postcard { visibility: visible; }
.envelope { background-color: transparent; }

/* ---------------- Postkarte: Bühne, die beim Scrollen stehen bleibt ----------------
   .karte ist höher als der Bildschirm; die Differenz (90vh) ist der Weg, auf dem
   die Karte sich umdreht und dann noch ein Stück stehen bleibt.
   --kt (0 bis 1) = wie weit man auf diesem Weg ist, aus js/main.js. */
html:not(.js) .karte { display: none; }
.karte { position: relative; height: 190vh; height: calc(100svh + 90vh); }
.karte__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.8rem, 2.4vh, 1.5rem); padding: 52px 16px 20px;
}
.postcard { flex: none; transform: translateY(calc(var(--kt, 0) * -2.2vh)) rotate(calc(-1.2deg + var(--kt, 0) * 1.9deg)); }
.postcard__inner { will-change: transform; }
/* ohne Bewegung (Gerät: „Bewegung reduzieren"): die Karte wechselt die Seite, ohne zu kippen */
@media (prefers-reduced-motion: reduce) { .postcard { transform: none; } }

.karte__hint {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  margin: 0; padding: .2rem 1rem 0; line-height: 1.4;
  font-family: var(--caps); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--bronze);
  text-shadow: 0 0 6px var(--paper), 0 0 14px var(--paper), 0 0 22px var(--paper);
  opacity: 0; transition: opacity .8s ease .3s;
}
.karte__hint i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: faden 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
/* sichtbar, sobald das Kuvert offen ist; kurz vor dem Ende der Bühne blendet er aus */
html:not(.is-kuvert) .karte__hint { opacity: clamp(0, calc((.94 - var(--kt, 0)) * 7), 1); }
@media (prefers-reduced-motion: reduce) { .karte__hint i { animation: none; } }
@media (max-height: 560px) { .karte__hint i { height: 18px; } .karte__stage { padding-top: 46px; } }

/* ---------------- Datum: eine Spalte, kein Foto mehr ---------------- */
.hero--std { grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 78px); min-height: calc(100svh - 78px); }
.hero--std .hero__text { width: 100%; max-width: 46rem; margin: 0 auto; padding: clamp(3rem, 9vh, 5.5rem) var(--gutter); position: relative; }
@media (max-width: 820px) { .hero--std .hero__text { margin-top: 0; padding-top: 3rem; } }

/* ---------------- Fotos: ein Block pro Ort ----------------
   Über jedem Block der Ortsname in Wagner-Schrift (Name des Foto-Ordners).
   Die Fotos stehen unbeschnitten in Zeilen gleicher Höhe; die Zeilen rechnet
   js/main.js aus („Mosaik"). Ohne JavaScript füllt Flexbox die Zeilen. */
.romcom { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem); position: relative; }
.romcom .section__head { padding: 0 var(--gutter); }
.ort { margin-top: clamp(3.4rem, 8vw, 6.5rem); }
.romcom .section__head + .ort { margin-top: 0; }
.ort__name {
  display: flex; align-items: center; justify-content: center; gap: clamp(.9rem, 3vw, 2.2rem);
  max-width: 1320px; margin: 0 auto clamp(1.3rem, 3vw, 2.1rem); padding: 0 var(--gutter);
  color: var(--bronze); line-height: 0; letter-spacing: 0;
}
.ort__name::before, .ort__name::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gold) 85%, transparent)); }
.ort__name::after { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--gold) 85%, transparent)); }
.ort__name .wagner-label__svg { flex: 0 1 auto; min-width: 0; max-width: 80%; height: clamp(17px, 2.2vw, 27px); }

.mosaik {
  --h: clamp(150px, 24vw, 320px);
  position: relative; display: flex; flex-wrap: wrap; gap: 4px; max-width: 1320px; margin: 0 auto;
}
.bild {
  margin: 0; position: relative; overflow: hidden; background: var(--paper-2); cursor: zoom-in;
  flex: var(--a) 1 calc(var(--a) * var(--h)); aspect-ratio: var(--a);
}
.mosaik.is-gesetzt { display: block; }
.mosaik.is-gesetzt .bild { position: absolute; aspect-ratio: auto; }
.bild img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.16) saturate(.86) contrast(1.06) brightness(1.02);   /* warmer, leicht ausgeblichener Filmlook */
  transition: transform 1.4s cubic-bezier(.2, .7, .3, 1);
}
.bild:hover img, .bild:focus-visible img { transform: scale(1.04); }
.bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(40, 25, 10, .2); }
.bild:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; z-index: 1; }

/* ---------------- Foto groß (Antippen eines Fotos) ---------------- */
.lupe {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  background: rgba(27, 19, 13, .95); opacity: 0; transition: opacity .35s ease; touch-action: none;
}
.lupe[hidden] { display: none; }
.lupe.is-on { opacity: 1; }
.lupe__bild { grid-column: 2; margin: 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 58px 0 24px; }
.lupe__bild img { max-width: 100%; max-height: calc(100vh - 136px); max-height: calc(100svh - 136px); width: auto; height: auto; box-shadow: 0 30px 80px -30px #000; }
.lupe__bild figcaption { font-family: var(--caps); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: #E4D6BE; text-align: center; line-height: 1.6; }
.lupe button {
  width: 56px; height: 56px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer;
  color: #F4EDE1; opacity: .75; transition: opacity .3s ease, transform .3s ease;
}
.lupe button:hover, .lupe button:focus-visible { opacity: 1; }
.lupe button:focus-visible { outline: 1px solid var(--gold); outline-offset: -8px; }
.lupe svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lupe__zu { position: absolute; top: 6px; right: 6px; z-index: 1; }
.lupe__pfeil--z:hover { transform: translateX(-3px); }
.lupe__pfeil--v:hover { transform: translateX(3px); }
@media (max-width: 700px) {
  .lupe { grid-template-columns: minmax(0, 1fr); }
  .lupe__bild { grid-column: 1; padding: 58px 0 76px; }
  .lupe__bild img { max-height: calc(100vh - 190px); max-height: calc(100svh - 190px); }
  .lupe__pfeil { position: absolute; bottom: 12px; }
  .lupe__pfeil--z { left: calc(50% - 86px); }
  .lupe__pfeil--v { right: calc(50% - 86px); }
}
@media (prefers-reduced-motion: reduce) { .lupe { transition: none; } }

/* Datum: ein heller Schein um die Schrift, damit sie vor den Linien des Hintergrunds ruhig lesbar bleibt */
.hero--std .hero__text { text-shadow: 0 0 5px var(--paper), 0 0 12px var(--paper), 0 0 20px var(--paper); }
.hero--std .btn { text-shadow: none; }
/* Reiter am Save the Date: sieben Stück – unter 1380 px Breite steht links nur das Logo */
.nav__brand span { white-space: nowrap; }
/* Save the Date: viele Reiter (Karte, Datum und ein Reiter je Ort). Reicht der Platz nicht,
   lässt sich die Leiste seitlich wischen; der aktive Reiter rutscht von selbst in die Mitte. */
.std .nav__bar { grid-template-columns: auto minmax(0, 1fr) auto; }
.std .nav__tabs {
  min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; gap: clamp(0rem, .5vw, .6rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 22px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 22px), transparent);
}
.std .nav__tabs::-webkit-scrollbar { display: none; }
.std .nav__tabs a:first-child { margin-left: auto; }
.std .nav__tabs a:last-child { margin-right: auto; }
@media (max-width: 1560px) { .std .nav__brand span { display: none; } }
/* Ortsnamen: heller Schein, falls gerade Linien des Hintergrunds dahinter stehen */
.ort__name .wagner-label__svg { filter: drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 7px var(--paper)); }

/* Handy-App mit Statusleiste oben (z. B. die Vorschau in der Claude-App): Reiter, Sprachknopf,
   Kreuz und „nach oben" halten Abstand zum Rand des Geräts. Im normalen Browser sind die Werte 0. */
.nav { top: env(safe-area-inset-top, 0px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.lang--float { top: calc(14px + env(safe-area-inset-top, 0px)); }
.lupe__zu { top: calc(6px + env(safe-area-inset-top, 0px)); }
.to-top { bottom: calc(clamp(12px, 2.4vw, 28px) + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================
   16.11.2026
   ========================================================== */
/* Palmenfriese: oben (unter den Reitern) und unten (vor dem Fuß) gleich groß, am Handy wie am Computer.
   Der obere steht auf dem Kopf. Dazwischen, und nur dort, stehen die Gebäude (js/main.js, „Areal"). */
:root { --fries: 30px; }
html { scroll-padding-top: 98px; }
.band { height: var(--fries); opacity: .85; }
.nav__fries { height: var(--fries); background: none; }
.nav__fries::before { background: url("../assets/ornamente/w-band-palmetten.svg") center / auto 100% repeat-x; transform: scaleY(-1); opacity: .85; }
@media (max-width: 900px) { html { scroll-padding-top: 86px; } .nav__fries { height: var(--fries); } }
.hero--std { min-height: calc(100vh - 92px); min-height: calc(100svh - 92px); }
/* Postkarte vorne, quer: sieben Fotos, das Schriftfeld über zwei Felder – Logo links, Schrift rechts */
.pk__titel { flex-direction: row; gap: 3.4cqi; padding: 0 2cqi; }
.pk__logo { width: 13.5cqi; }
.pk__text { align-items: flex-start; gap: 1.5cqi; }
.pk__gruss { font-size: 3.15cqi; letter-spacing: .14em; }
.pk__datum .wagner-label__svg { height: 2.5cqi; }
@media (max-aspect-ratio: 1 / 1) {
  .pk__titel { flex-direction: column; gap: 1.8cqi; padding: 0; }
  .pk__logo { width: 13cqi; }
  .pk__text { align-items: center; gap: 1.7cqi; }
  .pk__gruss { font-size: 3.5cqi; }
  .pk__datum .wagner-label__svg { height: 2.9cqi; }
}
/* Platz über dem unteren Fries, damit die Gebäude dort am Ende frei stehen */
main { padding-bottom: calc(var(--areal-h) + 1.5rem); }
.romcom { padding-bottom: 1rem; }

/* 17.11.2026 · Die kleine Karte im Kuvert sieht genauso aus wie die große: Logo in Farbe und in
   derselben Größe (eine alte Regel für das frühere Kärtchen hatte es dunkel und zu groß gemacht).
   Dadurch gibt es beim Wechsel von der kleinen zur großen Karte keinen Sprung mehr. */
.envelope__card--postkarte svg { width: auto; color: inherit; }
.envelope__card--postkarte .pk__logo { width: 13.5cqi; color: var(--logo-gold); }
.envelope__card--postkarte .pk__datum { color: var(--bronze); }
@media (max-aspect-ratio: 1 / 1) { .envelope__card--postkarte .pk__logo { width: 13cqi; } }
.envelope__pc .postcard__face { box-shadow: 0 1px 2px rgba(58, 42, 31, .14), 0 10px 22px -12px rgba(58, 42, 31, .5); }
/* 17.11.2026 · Vorderseite des Kuverts mit V-förmiger Öffnung, aus Farbflächen gebaut statt
   ausgeschnitten: So ist die Karte beim Herausgleiten in der Öffnung zu sehen. */
.envelope__pocket {
  clip-path: none; background:
    linear-gradient(to top right, var(--env) 50%, transparent calc(50% + 1px)) left top / 50% 54% no-repeat,
    linear-gradient(to top left, var(--env) 50%, transparent calc(50% + 1px)) right top / 50% 54% no-repeat,
    linear-gradient(var(--env), var(--env)) left bottom / 100% 46.2% no-repeat;
}

/* ---------------- Passwort-Tor (Save the Date) ----------------
   Solange html.is-tor gesetzt ist, sieht man nur das Logo und darunter das Feld für das Passwort. */
html:not(.is-tor) .tor { display: none; }
html.is-tor body > *:not(.tor) { display: none !important; }
.tor {
  position: fixed; inset: 0; z-index: 300; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.6rem, 5vh, 2.6rem);
  padding: 24px; margin: 0;
}
.tor__logo { width: min(56vw, 250px); height: auto; color: var(--logo-gold); }
.tor__feld {
  width: min(64vw, 230px); padding: .5rem .2rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 0; background: none; text-align: center; color: var(--ink);
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: .3em; outline: none;
}
.tor__feld:focus { border-bottom-color: var(--logo-gold); }
.tor.is-falsch .tor__feld { animation: tor-nein .4s ease; }
@keyframes tor-nein { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-4px); } }