/* ==========================================================================
   Grundgerüst
   ========================================================================== */
/* ==========================================================================
   Markenfarben und -schriften an einer Stelle. Gelten für Startseite, Panel
   und Anmeldeseiten. Die Hochzeitsseiten selbst setzen ihre eigenen Farben
   pro Design (`.w-page { --accent: … }`) und bleiben davon unberührt –
   sonst würde eine Kundenseite ihren Charakter verlieren.
   ========================================================================== */
:root {
  --brand: #9b1f66;          /* Beere – kräftiger Hauptton */
  --brand-dark: #7c1751;     /* für Hover */
  --brand-soft: #fdeaf4;     /* Flächen und Chips */
  --brand-tint: #faf3f7;     /* sehr helle Abschnittsflächen */
  --gold: #d9a441;           /* zweiter Akzent, festlich */
  --ink: #1a1220;            /* Überschriften, fast schwarz mit Violettstich */
  --body: #5c5464;           /* Fließtext */
  /* Nebeninfos. War #8d8496 – das erreichte auf Weiß nur 3,6:1, nötig sind
     4,5:1 (WCAG AA); jetzt ≥ 4,6:1 auch auf den zartrosa Flächen. */
  --muted: #6f6779;
  --line: #ece5ee;           /* Trennlinien */
  --surface: #ffffff;
  --bg: #fbf9fc;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Ankerlinks (#preise, #rsvp …) dürfen nicht unter der klebenden Kopfzeile
   bzw. der Demo-Leiste landen. */
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; font-size: 1rem; }
/* Dateiauswahl hat eine feste Eigenbreite (~345 px) und machte schmale
   Handys (360 px) breiter als den Bildschirm; dazu war sie nur 24 px hoch. */
input[type="file"] { max-width: 100%; }
@media (max-width: 720px) { input[type="file"] { width: 100%; font-size: .9rem; padding: .6em 0; } }
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .75em 1.5em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(155,31,102,.75);
}
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-1px); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
/* Dunkle Variante als zweiter Knopf neben dem farbigen – gibt dem Hero
   mehr Kontrast als zwei helle Knöpfe nebeneinander. */
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2c2033; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--body); padding: .5em 1em; }
.btn-ghost:hover { color: var(--ink); }
.btn-danger { background: #fff; color: #b3372c; border-color: #f0d3ce; }
.btn-danger:hover { background: #fdf1ef; }
.btn-block { width: 100%; }
.btn-sm { padding: .5em 1em; font-size: .85rem; }
.btn-lg { padding: .9em 1.9em; font-size: 1rem; }

/* Formulare */
.field { margin-bottom: 1.25rem; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .4em; color: var(--body); }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: .35em; }
/* Hinweise außerhalb eines Feldes (Kundenbereich: Ton, Fragen, Dresscode) */
.form-card > .hint, .ton-teil > .hint, .ton-gruss-knoepfe .hint, .dc-paletten > .hint { font-size: .8rem; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=url], input[type=search], input[type=tel], select, textarea {
  width: 100%; padding: .7em .9em; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink);
}
textarea { resize: vertical; min-height: 6em; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(155,31,102,.14);
}
.address-suggest {
  position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; margin-top: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 20;
  max-height: 220px; overflow-y: auto;
}
.address-suggest-item { padding: .6em .9em; font-size: .88rem; cursor: pointer; }
.address-suggest-item:hover, .address-suggest-item:active { background: #f7f2ea; }
.checkbox-row { display: flex; align-items: center; gap: .6em; font-size: .95rem; }
.checkbox-row input { width: auto; }
/* Auswahl mit Erklärung darunter – für Entscheidungen, bei denen die Folge
   nicht aus dem Namen hervorgeht (z. B. Sichtbarkeit der Seite). */
.radio-row {
  display: flex; align-items: flex-start; gap: .7em; padding: .8em 0;
  border-bottom: 1px solid var(--line);
}
.radio-row:last-of-type { border-bottom: 0; }
.radio-row input { width: auto; margin-top: .25em; }
.radio-row label { display: block; margin: 0; font-weight: 400; cursor: pointer; }
.radio-row label strong { display: block; font-size: .95rem; }
.radio-row label span { display: block; font-size: .82rem; color: var(--muted); margin-top: .2em; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.form-card h3 { font-size: 1.1rem; }
/* Kartenüberschriften im Kundenbereich und in der Verwaltung sind h2 – die
   richtige Gliederung für Screenreader (vorher sprangen sie von h1 auf h3) –,
   sehen aber genauso aus wie vorher als h3. */
h2.h3 { font-size: 1.17em; }
.form-card h2.h3 { font-size: 1.1rem; }
.form-card .desc { color: var(--muted); font-size: .88rem; margin-top: -.4em; margin-bottom: 1.25em; }

.alert { padding: .85em 1.1em; border-radius: 10px; margin-bottom: 1.25rem; font-size: .9rem; }
.alert-error { background: #fdecea; color: #a3291f; }
.alert-success { background: #eef6ec; color: #386a2c; }
/* Hinweis, kein Fehler: etwas fehlt, aber nichts ist kaputt (z. B. eine
   Übersetzung auf einer schon veröffentlichten Seite). */
.alert-warn { background: #fdf3e0; color: #7a5313; }

/* ==========================================================================
   Marketing / Landing
   ========================================================================== */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251,249,252,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  /* Nur oben/unten setzen – der seitliche Abstand kommt von .container und
     würde von einem padding-Kurzschreiber überschrieben. */
  /* Größer seit 11.09.2026 (Mehmetcan: „Logo und Header größer“). */
  padding-top: 22px; padding-bottom: 22px;
}
.nav .logo { font-family: var(--display); font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; }
.nav .logo span { color: var(--brand); }
/* Bildmarke (views/logo.js) vor dem Schriftzug – überall, wo er steht.
   Die Marke zeichnet in der Schriftfarbe, auf der dunklen Seitenleiste also
   von selbst hell. Abstand über margin statt gap: „Fest“ und „ara“ sind zwei
   Flex-Elemente und dürfen nicht auseinanderrücken. */
.logo, .demo-bar-logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo-marke { width: 1.5em; height: auto; margin-right: .38em; flex: none; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a.link { color: var(--body); font-size: 1rem; font-weight: 500; }
.nav-links .btn-sm { padding: .7em 1.35em; font-size: .95rem; }
.nav-links a.link:hover { color: var(--ink); }

.hero {
  padding: 90px 0 100px; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 18% -5%, rgba(155,31,102,.10), transparent 55%),
    radial-gradient(ellipse at 84% 8%, rgba(217,164,65,.14), transparent 50%),
    linear-gradient(180deg, #fdf7fa 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
/* Augenbraue im Stil "FERTIG • GESTALTET • GÜNSTIG": keine Pille, sondern
   durch Punkte getrennte Stichworte – wirkt weniger nach Etikett. */
.hero .eyebrow {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .55em .9em;
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand); font-weight: 800; margin-bottom: 1.4em;
  position: relative; z-index: 1;
}
.hero .eyebrow i { font-style: normal; }
.hero .eyebrow i + i::before { content: "•"; margin-right: .9em; color: var(--gold); }
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 4rem); font-weight: 800; letter-spacing: -.035em;
  max-width: 900px; margin: 0 auto .45em; position: relative; z-index: 1;
}
.hero h1 .accent { color: var(--brand); }
.hero .divider { width: 46px; height: 3px; border-radius: 2px; background: var(--gold); margin: 1.1em auto; position: relative; z-index: 1; }
.hero .sub { font-size: 1.12rem; color: var(--body); max-width: 580px; margin: 0 auto 2.2em; position: relative; z-index: 1; }
.hero-cta { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6em 1.75rem;
  margin: 2.4em 0 0; font-size: .88rem; color: var(--body); position: relative; z-index: 1;
}
.hero-trust li { display: flex; align-items: center; gap: .5em; }
.hero-trust li::before { content: "✓"; color: #6c8756; font-weight: 700; }

/* --------------------------------------------------------------------------
   Hero: zwei endlos laufende Fotostreifen ober- und unterhalb des Textes,
   gegenläufig. Der Track enthält die Bilder mehrfach (siehe
   views/marketing.js), deshalb schiebt die Animation exakt um 50 %.
   -------------------------------------------------------------------------- */
.hero-photo { margin: 0; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* --------------------------------------------------------------------------
   Produkt-Hero: Text links, echtes Gerät rechts. Im Telefon läuft die
   Beispielseite als iframe – kein nachgebautes Bild, sondern das laufende
   Produkt, das damit auch nie veraltet. Drumherum schweben Ausschnitte aus
   dem Kontrollzentrum.
   -------------------------------------------------------------------------- */
.hero-product { padding: 76px 0 88px; text-align: left; }
.hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.5rem; align-items: center; }
.hero-product .eyebrow { justify-content: flex-start; }
/* Im zweispaltigen Hero steht weniger Breite zur Verfügung als bei einer
   zentrierten Überschrift – sonst bricht sie auf vier Zeilen um. */
.hero-product h1 { margin-left: 0; max-width: none; font-size: clamp(2.2rem, 3.5vw, 3.2rem); }
.hero-product .sub { margin-left: 0; max-width: 500px; }
.hero-product .hero-cta { justify-content: flex-start; }
.hero-product .hero-trust { justify-content: flex-start; gap: .5em 1.4rem; }

.hero-visual { position: relative; display: flex; justify-content: center; perspective: 1600px; }
.phone {
  position: relative; width: 300px; height: 610px; flex: 0 0 auto;
  background: #16111c; border-radius: 42px; padding: 11px;
  transform: rotateY(-13deg) rotateX(5deg) rotateZ(1deg);
  box-shadow:
    0 50px 80px -40px rgba(26,18,32,.8),
    0 18px 40px -24px rgba(26,18,32,.5),
    inset 0 0 0 1.5px rgba(255,255,255,.14);
}
.phone-notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 22px; border-radius: 999px; background: #16111c; z-index: 2;
}
.phone-screen {
  position: relative; width: 100%; height: 100%; border-radius: 32px; background: var(--bg);
  overflow: hidden;
  /* overflow:hidden allein reicht nicht: der iframe im Inneren ist skaliert,
     und ein transformiertes Kind wird von der Rundung des Elternteils nicht
     zuverlässig beschnitten – an den Ecken blitzen sonst helle Kanten durch.
     clip-path schneidet auch transformierte Kinder sauber ab. */
  clip-path: inset(0 round 32px);
}
.phone-screen iframe {
  position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0;
  width: 390px; height: 800px;
  /* Reines Schaustück – erkundet wird in der echten Beispielseite. */
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Hero-Animation: Nachricht kommt an, eine Hand tippt darauf, der Umschlag
   öffnet sich, danach bleibt die echte Seite stehen und scrollt zum Ablauf
   und zur Rückmeldung. Ablauf in public/landing.js.
   -------------------------------------------------------------------------- */
.scene {
  position: absolute; inset: 0; z-index: 2;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s;
}
.scene.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }

/* Szene 1: Nachricht ploppt mittig auf dem Sperrbildschirm auf – dort, wo
   der Blick beim Entsperren ohnehin hingeht. */
.scene-msg {
  background: linear-gradient(180deg, #16111c 0%, #241a2e 100%);
  padding: 0 14px;
  display: flex; flex-direction: column; justify-content: center;
}
.msg-top {
  position: absolute; top: 54px; left: 0; right: 0;
  color: #cfc6dd; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-align: center; opacity: .8;
}
.msg-bubble {
  display: flex; flex-direction: column; gap: .18em;
  background: #fff; border-radius: 16px; padding: .8rem .9rem;
  box-shadow: 0 16px 30px -16px rgba(0,0,0,.7);
  transform: translateY(-90px); opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.3,1), opacity .4s ease;
}
.scene-msg.is-in .msg-bubble { transform: translateY(0); opacity: 1; }
.scene-msg.is-tapped .msg-bubble { transform: scale(.95); transition: transform .18s ease; }
.msg-from { font-size: .72rem; font-weight: 800; color: var(--ink); }
.msg-text { font-size: .78rem; color: var(--body); line-height: 1.3; }
.msg-link { font-size: .7rem; color: var(--brand); font-weight: 600; }
.msg-tap {
  position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.85); opacity: 0;
}
.scene-msg.is-tapped .msg-tap { animation: msg-ripple .55s ease-out; }
@keyframes msg-ripple {
  from { opacity: .9; transform: scale(.4); }
  to { opacity: 0; transform: scale(4.2); }
}

/* Szene 2: Umschlag in Telefongröße – erbt Optik und Ablauf vom großen. */
.scene-env { background: radial-gradient(ellipse at 50% 40%, #fdf6ef, #efdfd0); display: flex; align-items: center; justify-content: center; }
.env-overlay.env-mini {
  position: static; inset: auto; z-index: auto; padding: 0; cursor: default;
  background: none; height: auto;
}
.env-mini .envelope { width: 200px; height: 130px; }
.env-mini .env-card { padding: .4em .3em; gap: .1em; }
.env-mini .env-card-eyebrow { font-size: .44rem; letter-spacing: .14em; }
.env-mini .env-card-names { font-size: .95rem; }
.env-mini .env-card-date { font-size: .5rem; }
.env-mini .env-seal { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: .6rem; }

/* Die tippende Hand kommt von unten rechts ins Bild. */
.hero-hand {
  position: absolute; right: -14px; bottom: -30px; z-index: 4;
  opacity: 0; transform: translate(60px, 90px) rotate(-14deg);
  transition: opacity .35s ease, transform .7s cubic-bezier(.25,.75,.3,1);
  pointer-events: none;
  /* Schatten per CSS statt per SVG-Filter: drop-shadow folgt der Kontur der
     Hand, ein SVG-Filter legt stattdessen ein sichtbares Rechteck an. */
  filter: drop-shadow(-5px 12px 11px rgba(42,20,32,.42));
}
/* Die Fingerspitze muss die Nachricht in der Bildschirmmitte erreichen –
   deshalb wandert die Hand beim Hereinkommen weit nach oben. */
.hero-hand.is-in { opacity: 1; transform: translate(-8px, -142px) rotate(-8deg); }
.hero-hand.is-tapping { transform: translate(-10px, -128px) rotate(-8deg); transition-duration: .18s; }

/* Die Karten erscheinen erst, wenn die Animation bei der Gästeliste ist. */
.hero-chip {
  opacity: 0; transform: translateY(10px) scale(.94);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.hero-chip.is-on { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .scene, .hero-hand { display: none; }
  .hero-chip { opacity: 1; transform: none; }
}

.hero-chip {
  position: absolute; display: flex; align-items: center; gap: .65rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: .7rem .95rem; box-shadow: 0 20px 34px -22px rgba(26,18,32,.55);
  white-space: nowrap; animation: chip-float 6s ease-in-out infinite;
}
.hero-chip b { display: block; font-size: .84rem; font-weight: 700; color: var(--ink); }
.hero-chip small { display: block; font-size: .74rem; color: var(--muted); }
.chip-icon {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px;
  background: #e4efdf; color: #3f7030; font-size: .85rem; font-weight: 700;
}
.chip-icon-gold { background: #fbf0d8; color: #96690f; }
.chip-icon-ink { background: var(--brand-soft); color: var(--brand); }
.chip-rsvp { top: 8%; left: -4%; animation-delay: .2s; }
.chip-meal { bottom: 21%; left: -9%; animation-delay: 1.7s; }
.chip-song { bottom: 7%; right: -4%; animation-delay: .9s; }
@keyframes chip-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .hero-chip { animation: none; } }

@media (max-width: 900px) {
  .hero-product { text-align: center; padding-top: 56px; }
  .hero-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-product .eyebrow, .hero-product .hero-cta, .hero-product .hero-trust { justify-content: center; }
  .hero-product .sub { margin-left: auto; margin-right: auto; }
  .phone { transform: none; width: 268px; height: 545px; }
  .chip-rsvp { left: -2%; }
  .chip-meal { left: -4%; }
  .chip-song { right: -2%; }
}
/* Auf dem Handy war der Hero eineinhalb Bildschirme hoch – man musste
   scrollen, bevor überhaupt etwas anderes kam. Alles eine Stufe kleiner,
   und die Merkmalsliste in eine Zeile statt drei. */
@media (max-width: 720px) {
  .hero-product { padding: 40px 0 52px; }
  .hero-split { gap: 1.9rem; }
  .hero-product h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-product .sub { font-size: 1rem; margin-bottom: 1.6em; }
  .hero-product .eyebrow { font-size: .68rem; margin-bottom: 1.1em; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: .7em; }
  .hero-cta .btn { width: 100%; }
  .hero-trust {
    margin-top: 1.5em; gap: .4em .9rem; font-size: .8rem;
  }
  .phone { width: 232px; height: 472px; padding: 9px; border-radius: 34px; }
  .phone-screen { border-radius: 26px; clip-path: inset(0 round 26px); }
  .phone-notch { width: 76px; height: 18px; top: 16px; }
  .hero-hand { width: 92px; right: -6px; bottom: -22px; }
  .hero-hand svg { width: 92px; height: 118px; }
  .env-mini .envelope { width: 168px; height: 110px; }
}
@media (max-width: 520px) {
  .hero-chip { padding: .55rem .7rem; gap: .5rem; }
  .hero-chip small { display: none; }
  .chip-meal { display: none; }
}

.hero-streifen { padding: 0; perspective: 1500px; }
.hero-streifen .container { padding-top: 68px; padding-bottom: 68px; }
/* Die Streifen liegen leicht in den Raum gekippt statt flach auf der Seite –
   der obere neigt sich weg, der untere zum Betrachter. Das erzeugt die
   Tiefe, die eine flache Bilderreihe nicht hat. */
.hero-strip-row { overflow: hidden; padding: 20px 0; }
.hero-strip-row:first-of-type { transform: rotateX(9deg) scale(1.04); transform-origin: 50% 100%; }
.hero-strip-row:last-of-type { transform: rotateX(-9deg) scale(1.04); transform-origin: 50% 0; }
.hero-strip-track { display: flex; gap: 16px; width: max-content; animation: hero-strip 60s linear infinite; }
.hero-strip-track.reverse { animation-direction: reverse; }
.hero-streifen .hero-photo {
  width: 260px; height: 168px; border-radius: 16px; overflow: hidden; flex: 0 0 auto;
  box-shadow: 0 22px 34px -20px rgba(26,18,32,.55), 0 3px 8px -3px rgba(26,18,32,.25);
}
@keyframes hero-strip { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .hero-streifen .hero-photo { width: 176px; height: 114px; }
  .hero-streifen .container { padding-top: 44px; padding-bottom: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hero-strip-track { animation: none; } }

/* Abschnitte kippen beim Hereinscrollen aus der Tiefe nach vorn und richten
   sich auf. Der Drehpunkt liegt unten, dadurch wirkt es, als stünde der
   Abschnitt auf und käme dem Betrachter entgegen. */
.reveal {
  opacity: 0;
  transform: perspective(1200px) rotateX(9deg) translateY(46px) scale(.975);
  transform-origin: 50% 100%;
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.72,.25,1);
}
.reveal.in { opacity: 1; transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1); }

/* Stärkere Fassung für das Vorschaufenster – dort soll der Effekt auffallen. */
.reveal-strong { transform: perspective(1100px) rotateX(17deg) translateY(74px) scale(.94); }
.reveal-strong.in { transform: perspective(1100px) rotateX(0deg) translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-strong { opacity: 1; transform: none; }
}

.section { padding: 80px 0; }
/* Startseite: Abschnitte unterhalb des ersten Bildschirms berechnet der
   Browser erst, wenn sie in die Nähe kommen. Vorher lag er beim Laden über
   eine Sekunde (Handy, CPU 4×) im Layout der ganzen langen Seite.
   „auto 900px“ = Platzhalterhöhe, danach merkt er sich die echte. */
body > .section, body > .cta-band, body > .footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* Sprunglinks (#preise …): Mit Platzhalterhöhen landete der Sprung
   hunderte Pixel daneben, weil sich die Abschnitte beim Durchscrollen erst
   auf ihre echte Höhe ausklappten. public/landing.js setzt deshalb vor
   jedem Sprung diese Klasse – dann ist alles berechnet und das Ziel stimmt. */
html.alles-berechnen body > .section, html.alles-berechnen body > .cta-band, html.alles-berechnen body > .footer { content-visibility: visible; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.section-head .eyebrow { color: var(--brand); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; }
.section-head h2 { margin-top: .3em; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-head p { color: var(--body); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
/* Beispielseite als Live-Vorschau: echte Seite im iframe, per JS (landing.js)
   auf die Rahmenbreite heruntergerechnet. */
.section-demo {
  background: linear-gradient(180deg, #fff 0%, var(--brand-tint) 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.demo-preview { max-width: 940px; margin: 0 auto; }
.demo-tabs { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.demo-tab {
  border: 1px solid var(--line); background: #fff; color: var(--body); border-radius: 999px;
  padding: .55em 1.25em; font-size: .88rem; font-weight: 600; transition: all .15s ease;
}
.demo-tab:hover { border-color: var(--brand); color: var(--brand); }
.demo-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

.browser-frame {
  border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e6ddd0;
  box-shadow: 0 34px 64px -34px rgba(43,36,31,.5), 0 8px 20px -14px rgba(43,36,31,.25);
}
.browser-bar {
  display: flex; align-items: center; gap: 1rem; padding: .7em 1rem;
  background: var(--line); border-bottom: 1px solid #e6ddd0;
}
.browser-dots { display: flex; gap: .4em; flex-shrink: 0; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; background: #dbd2c5; }
.browser-url {
  flex: 1; max-width: 320px; margin: 0 auto; text-align: center; background: #fff;
  border-radius: 999px; padding: .35em 1em; font-size: .78rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-body { position: relative; height: 560px; overflow: hidden; background: var(--bg); }
/* Die Vorschau zeigt nur den Anfang der Seite – der Anschnitt läuft weich aus,
   damit er nach Absicht aussieht und nicht nach abgeschnittenem Inhalt. */
.browser-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%);
  pointer-events: none;
}
.browser-body iframe {
  position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0;
  width: 1280px; height: 1600px;
  /* Nur Schauobjekt – geklickt und gescrollt wird in der echten Seite. */
  pointer-events: none;
}
@media (max-width: 720px) { .browser-body { height: 470px; } .browser-dots { display: none; } }
.demo-actions { text-align: center; margin-top: 1.9rem; }
.demo-note { font-size: .82rem; color: var(--muted); margin: 1em 0 0; }

.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.75rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-3px); border-color: #e8dcc8; box-shadow: 0 16px 32px -24px rgba(43,36,31,.55); }
.feature-card .icon { font-size: 1.6rem; margin-bottom: .6em; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: .35em; }
.feature-card p { color: var(--body); font-size: .92rem; margin: 0; }

.section-steps { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Der Weg des Links: vier Stationen mit durchgehender Linie. Die letzte ist
   farblich abgesetzt, weil sie den eigentlichen Nutzen trägt – das, was
   zurückkommt. */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.flow::before {
  content: ""; position: absolute; top: 19px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, var(--line), var(--brand-soft), var(--line));
}
.flow-step { position: relative; padding-top: 3.5rem; }
.flow-num {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--muted);
}
.flow-step h3 { font-size: 1.02rem; margin-bottom: .35em; }
.flow-step p { color: var(--body); font-size: .9rem; margin: 0; }
.flow-step.is-goal .flow-num { background: var(--brand); border-color: var(--brand); color: #fff; }
.flow-step.is-goal h3 { color: var(--brand); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; }
  .flow::before { display: none; }
}
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
.step { text-align: center; }
.step .num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  margin: 0 auto 1em; font-family: var(--display);
}
.step h3 { font-size: 1rem; }
.step p { color: var(--body); font-size: .9rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 2rem;
  display: flex; flex-direction: column;
}
.price-card.featured { border-color: var(--brand); box-shadow: 0 10px 30px rgba(164,82,58,.12); position: relative; }
.price-card.featured::before {
  content: "Beliebt"; position: absolute; top: -12px; right: 1.5rem; background: var(--brand); color: #fff;
  font-size: .7rem; font-weight: 700; padding: .3em .8em; border-radius: 999px; letter-spacing: .04em;
}
.price-card h3 { font-size: 1.1rem; margin-bottom: .2em; }
.price-card .amount { font-family: var(--display); font-size: 2.4rem; margin: .2em 0; }
.price-card .amount small { font-size: 1rem; font-family: "Inter", sans-serif; color: var(--muted); font-weight: 400; }
.price-card ul { margin: 1.5em 0; display: flex; flex-direction: column; gap: .6em; }
.price-card li { font-size: .9rem; color: var(--body); display: flex; gap: .5em; }
.price-card li::before { content: "✓"; color: #6c8756; font-weight: 700; }
.price-card .btn { margin-top: auto; }

.pricing-single { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.price-card-main .amount { font-size: 2.8rem; }
.addon-card { background: var(--brand-tint); border: 1px solid var(--line); border-radius: 18px; padding: 1.75rem 2rem; }
.addon-head { display: flex; gap: 1rem; align-items: flex-start; }
.addon-head .icon { font-size: 1.6rem; line-height: 1; }
.addon-head h3 { font-size: 1.05rem; margin: 0 0 .3em; }
.addon-head p { margin: 0; color: var(--body); font-size: .9rem; }
.addon-list { list-style: none; margin: 1.2em 0 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.addon-list li { font-size: .88rem; color: var(--body); padding-left: 1.4em; position: relative; }
.addon-list li::before { content: "☁"; position: absolute; left: 0; color: var(--brand); }

/* Vergleichstabelle. Auf schmalen Bildschirmen scrollt sie waagerecht im
   eigenen Container – die Seite selbst darf nie seitlich scrollen. */
.section-compare { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Raster statt Textwand: Die Zeilenbeschriftung trägt die Aussage, die Zelle
   nur ein Symbol. Dadurch bleibt die Tabelle auch auf 375 px ein lesbares
   Raster und muss nicht in Karten aufgelöst werden. */
.compare-scroll { overflow: visible; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.compare-table th, .compare-table td { padding: .8em .55em; vertical-align: middle; }
.compare-table thead th {
  font-family: "Inter", sans-serif; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 700;
  text-align: center; line-height: 1.3; padding-bottom: 1.1em;
}
.compare-table tbody th {
  font-family: "Inter", sans-serif; font-weight: 600; font-size: .9rem;
  color: var(--ink); width: 42%; text-align: left;
  border-top: 1px solid var(--line);
}
.compare-table tbody td { text-align: center; border-top: 1px solid var(--line); }
.compare-table tbody tr:first-child th, .compare-table tbody tr:first-child td { border-top: none; }

/* Häkchen, Kreuz oder Strich – auf einen Blick erkennbar, ohne zu lesen. */
.cmp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .74rem; font-weight: 700; line-height: 1;
}
.cmp-ja { background: #e4efdf; color: #3f7030; }
.cmp-nein { background: #fbe3df; color: #ab3427; }
.cmp-teils { background: #f2ece2; color: #94897a; }
.cmp-text { display: block; font-size: .78rem; color: var(--body); margin-top: .35em; }

/* Die eigene Spalte als durchgehende farbige Säule – sie soll sofort als
   die Antwort lesbar sein, nicht als eine Spalte unter dreien. */
.compare-table .is-us { background: var(--brand); color: #fff; }
.compare-table thead th.is-us {
  color: #fff; border-radius: 14px 14px 0 0; padding-top: .9em;
}
.compare-table tbody tr:last-child td.is-us { border-radius: 0 0 14px 14px; }
.compare-table td.is-us { border-top-color: rgba(255,255,255,.18); }
.compare-table .is-us .cmp-mark { background: rgba(255,255,255,.24); color: #fff; }
.compare-table .is-us .cmp-text { color: #fff; font-weight: 600; }
.compare-note {
  max-width: 680px; margin: 2rem auto 0; text-align: center; color: var(--muted); font-size: .88rem;
}

.section-faq { background: var(--brand-tint); }
.faq-accordion { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 1.4rem; margin-bottom: .75rem; }
.faq-accordion summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.1em 2em 1.1em 0; font-weight: 600; font-size: .98rem;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; line-height: 1; color: var(--brand);
}
.faq-accordion[open] summary::after { content: "−"; }
.faq-accordion p { color: var(--body); font-size: .92rem; margin: 0 0 1.3em; }

.cta-band {
  background: linear-gradient(135deg, #2b2420 0%, #4c2f25 100%);
  color: #f7f0e8; text-align: center; padding: 72px 0;
}
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p { color: #d5c9bd; max-width: 520px; margin: 0 auto 2em; }
.cta-band-btn { background: #fff; color: var(--brand); }
.cta-band-btn:hover { background: #f7efe3; }

.footer { padding: 3.5rem 0 2rem; border-top: 1px solid var(--line); color: var(--body); font-size: .9rem; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand .logo { font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.footer-brand .logo span { color: var(--brand); }
.footer-brand p { margin: .7em 0 0; color: var(--muted); font-size: .87rem; max-width: 280px; }
.footer-col { display: flex; flex-direction: column; gap: .55em; align-items: flex-start; }
.footer-col h3 {
  font-family: "Inter", sans-serif; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 0 0 .3em;
}
.footer-col a { color: var(--body); font-size: .88rem; }
/* Am Handy liegen die Links sonst mit 22 px Höhe dicht übereinander. */
@media (max-width: 720px) { .footer-col { gap: 0; } .footer-col a { padding: .6em 0; } }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  text-align: center; color: var(--muted); font-size: .82rem;
}

/* ==========================================================================
   Auth-Seiten
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: var(--bg); }
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 2.25rem; }
.auth-card h1 { font-size: 1.5rem; text-align: center; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: .9rem; margin-bottom: 1.75rem; }
.auth-switch { text-align: center; margin-top: 1.25rem; font-size: .9rem; color: var(--body); }
.auth-switch a { color: var(--brand); font-weight: 600; }
.auth-back { display: block; text-align: center; margin-bottom: 1.5rem; color: var(--muted); font-size: .85rem; }

/* ==========================================================================
   Kontakt (/kontakt, views/kontakt.js)
   Computer: links Text, rechts Formular. Handy: Überschrift, Formular, dann
   die Tipps – über grid-template-areas, das HTML bleibt gleich.
   ========================================================================== */
.kontakt { padding: 3.5rem 0 4.5rem; }
.kontakt-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  grid-template-areas: "kopf karte" "rest karte"; gap: 0 56px; align-items: start;
  /* Sonst verteilt das hohe Formular seine Höhe auf beide Zeilen und
     zwischen Kopf und Tipps entsteht eine Lücke. */
  grid-template-rows: auto 1fr;
}
.kontakt-kopf { grid-area: kopf; }
.kontakt-karte { grid-area: karte; }
.kontakt-rest { grid-area: rest; }
.kontakt .eyebrow { display: inline-block; color: var(--brand); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .8em; }
.kontakt-kopf h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); letter-spacing: -.03em; }
.kontakt-lead { color: var(--body); font-size: 1.05rem; max-width: 34em; }
.kontakt-zeit {
  display: flex; gap: .9em; align-items: center; margin: 1.6rem 0 2.2rem;
  background: var(--brand-tint); border: 1px solid var(--brand-soft); border-radius: 16px; padding: 1em 1.2em;
}
.kontakt-zeit-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; font-size: 1.35rem; box-shadow: 0 6px 16px -10px rgba(155,31,102,.6);
}
.kontakt-zeit strong { display: block; font-family: var(--display); font-size: 1.12rem; color: var(--ink); }
.kontakt-zeit div > span { display: block; color: var(--body); font-size: .88rem; }
.kontakt-rest h2 { font-size: 1.2rem; }
.kontakt-tipps { display: grid; gap: .8em; margin-bottom: 1.4rem; }
.kontakt-tipps li { display: flex; gap: .75em; align-items: flex-start; color: var(--body); font-size: .93rem; }
.kontakt-tipps li > span:first-child { flex: none; font-size: 1.15rem; line-height: 1.3; }
.kontakt-tipps strong { color: var(--ink); }
.kontakt-aufnahme { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 0 1.1em; margin-bottom: 1.4rem; }
.kontakt-aufnahme summary { cursor: pointer; font-weight: 600; font-size: .92rem; padding: .85em 0; min-height: 44px; }
.kontakt-aufnahme ul { display: grid; gap: .45em; padding-bottom: 1em; font-size: .88rem; color: var(--body); }
.kontakt-schneller { display: flex; flex-wrap: wrap; gap: .4em 1.1em; font-size: .9rem; color: var(--body); }
.kontakt-schneller strong { flex-basis: 100%; color: var(--ink); }
.kontakt-schneller a { color: var(--brand); font-weight: 600; }

.kontakt-form, .kontakt-danke {
  background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 2rem;
  box-shadow: 0 30px 60px -40px rgba(60,20,50,.35);
}
.kontakt-form-titel { font-size: 1.3rem; margin-bottom: 1.1rem; }
.k-opt { font-weight: 400; color: var(--muted); }
.kontakt-label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .4em; color: var(--body); }
.kontakt-konto { background: var(--bg); border-radius: 10px; padding: .75em 1em; font-size: .88rem; color: var(--body); margin-bottom: 1.25rem; overflow-wrap: anywhere; }
.kontakt-gast-hinweis { background: #fff6e0; color: #6e5700 !important; border-radius: 8px; padding: .6em .8em; }
/* Falle für Bots – weit weg geschoben statt display:none, das erkennen manche */
.kontakt-honig { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Anhänge: ohne JavaScript das normale Dateifeld, mit JavaScript die Ablage */
.kontakt-ablage { display: none; }
.kontakt-form.mit-js .kontakt-datei { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.kontakt-form.mit-js .kontakt-ablage {
  display: flex; gap: .9em; align-items: center; cursor: pointer; min-height: 64px;
  border: 1.5px dashed #d9c6d4; border-radius: 14px; padding: .9em 1.1em; background: var(--brand-tint);
  transition: border-color .15s ease, background .15s ease;
}
.kontakt-form.mit-js .kontakt-ablage:hover, .kontakt-ablage.ist-drueber { border-color: var(--brand); background: var(--brand-soft); }
.kontakt-datei:focus-visible + .kontakt-ablage { outline: 3px solid rgba(155,31,102,.35); outline-offset: 2px; }
.kontakt-ablage.ist-voll { opacity: .5; pointer-events: none; }
.kontakt-ablage-icon { font-size: 1.4rem; }
.kontakt-ablage strong { display: block; color: var(--ink); font-size: .92rem; }
.kontakt-ablage-klein { display: block; color: var(--muted); font-size: .8rem; }
.kontakt-dateiliste { display: grid; gap: .45em; margin-top: .6em; }
.kontakt-dateiliste:empty { display: none; }
.kontakt-dateiliste li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; gap: .7em; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: .35em .35em .35em .45em; font-size: .86rem;
}
.kontakt-datei-vorschau { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; display: grid; place-items: center; background: var(--bg); font-size: 1.2rem; }
.kontakt-datei-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.kontakt-datei-groesse { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.kontakt-datei-weg { width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.kontakt-datei-weg:hover { background: #fdecea; color: #a3291f; }
.kontakt-dateimeldung { margin-top: .5em; font-size: .82rem; color: #a3291f; }
.kontakt-datenschutz { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.kontakt-senden { position: relative; overflow: hidden; }
/* Fortschritt beim Hochladen als heller Balken im Knopf */
.kontakt-senden.ist-unterwegs { cursor: progress; }
.kontakt-senden.ist-unterwegs::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fortschritt, 0%);
  background: rgba(255,255,255,.2); transition: width .2s linear;
}
.kontakt-senden-hinweis { text-align: center; font-size: .8rem; color: var(--muted); margin: .7em 0 0; }

.kontakt-danke { text-align: center; }
.kontakt-danke-haken {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center;
  background: #eef6ec; color: #386a2c; font-size: 1.9rem; font-weight: 700;
}
.kontakt-danke p { color: var(--body); }
.kontakt-nummer { font-size: .9rem; }
.kontakt-danke-knoepfe { display: flex; flex-wrap: wrap; gap: .6em; justify-content: center; margin-top: 1.4rem; }
.faq-kontakt { text-align: center; margin-top: 1.6rem; color: var(--body); }
.faq-kontakt a { color: var(--brand); font-weight: 600; }
.anleitung-kontakt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.anleitung-kontakt h3 { margin-bottom: .2em; }
.anleitung-kontakt p { margin: 0; color: var(--body); font-size: .92rem; }

@media (max-width: 860px) {
  .kontakt { padding-top: 2rem; }
  .kontakt-raster { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "karte" "rest"; }
  .kontakt-zeit { margin: 1.2rem 0 1.6rem; }
  .kontakt-rest { margin-top: 2.2rem; }
}
@media (max-width: 480px) {
  .kontakt-form, .kontakt-danke { padding: 1.3rem 1.1rem; border-radius: 16px; }
  .kontakt-danke-knoepfe .btn { width: 100%; }
}

/* Posteingang in der Verwaltung (views/admin-kontakt.js) */
.kontakt-reiter { display: flex; gap: .4em; margin-bottom: 1rem; flex-wrap: wrap; }
.kontakt-reiter a { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .88rem; font-weight: 600; color: var(--body); min-height: 40px; display: inline-flex; align-items: center; }
.kontakt-reiter a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.kontakt-liste { display: grid; gap: .6rem; }
.kontakt-zeile { display: grid; gap: .3em; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; transition: border-color .15s ease; }
.kontakt-zeile:hover { border-color: var(--brand); }
.kontakt-zeile.ist-offen { border-left: 4px solid var(--brand); }
.kontakt-zeile-kopf { display: flex; flex-wrap: wrap; gap: .2em .8em; align-items: baseline; }
.kontakt-zeile-text { color: var(--body); font-size: .9rem; overflow-wrap: anywhere; }
.kontakt-zeile-fuss { display: flex; flex-wrap: wrap; gap: .5em .9em; align-items: center; }
.kontakt-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45em 1.2em; margin: 0 0 1.2rem; font-size: .9rem; }
.kontakt-angaben dt { color: var(--muted); }
.kontakt-angaben dd { margin: 0; overflow-wrap: anywhere; }
.kontakt-angaben a { color: var(--brand); }
.kontakt-nachricht { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border-radius: 12px; padding: 1.1rem 1.2rem; line-height: 1.6; }
.kontakt-anhaenge { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.kontakt-anhang { margin: 0; }
.kontakt-anhang img, .kontakt-anhang video { width: 100%; max-height: 360px; object-fit: contain; background: #111; border-radius: 10px; }
.kontakt-anhang figcaption { font-size: .8rem; margin-top: .35em; overflow-wrap: anywhere; }
.kontakt-anhang figcaption a { color: var(--brand); }
.kontakt-anhang-ohne { padding: 2rem 1rem; text-align: center; background: var(--bg); border-radius: 10px; color: var(--muted); font-size: .85rem; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dash {
  display: grid; grid-template-columns: 250px 1fr; min-height: 100vh;
}
/* Zeilen „auto 1fr“: Sonst verteilt das Raster die Resthöhe (min-height
   100vh) auch auf die Kopfzeile, und die ist auf kurzen Seiten riesig. */
@media (max-width: 860px) { .dash { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }
.dash-sidebar {
  background: var(--ink); color: #ece7e0; padding: 1.75rem 1.25rem; display: flex; flex-direction: column;
}
.dash-sidebar .logo { font-family: var(--display); font-size: 1.2rem; margin-bottom: 2rem; color: #fff; }
.dash-sidebar .logo span { color: #e8b3a0; }
.dash-nav a {
  display: flex; align-items: center; gap: .6em; padding: .65em .8em; border-radius: 10px;
  color: #cfc7bc; font-size: .92rem; margin-bottom: .25em;
}
.dash-nav a:hover { background: #322c27; color: #fff; }
.dash-nav a.active { background: var(--brand); color: #fff; }
.dash-sidebar .spacer { flex: 1; }
.dash-sidebar .wedding-picker { font-size: .78rem; color: #a59caf; /* hell, weil auf dunkler Leiste */ text-transform: uppercase; letter-spacing: .05em; margin: 1.5em 0 .5em; }
/* min-width: 0 – ohne das richtet sich die Rasterspalte nach dem breitesten
   Inhalt (lange Tabellen), und auf dem Handy lässt sich die ganze Seite
   seitlich verschieben, statt dass nur die Tabelle in ihrem Kasten scrollt. */
.dash-main { padding: 2.25rem 2.5rem; max-width: 980px; min-width: 0; }
@media (max-width: 640px) { .dash-main { padding: 1.5rem 1.25rem; } }
.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.dash-header h1 { font-size: 1.6rem; margin: 0; }
.dash-header .sub { color: var(--muted); font-size: .9rem; margin: .2em 0 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem; }
.stat-card .n { font-family: var(--display); font-size: 1.9rem; }
.stat-card .l { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.tab-btn {
  background: none; border: none; padding: .8em 1.1em; font-size: .9rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn.active { color: var(--brand); border-color: var(--brand); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Kopfzeile des Kundenbereichs (views/dashboard-shell.js): Der Menü-Knopf
   gibt es nur am Handy; am Computer steht alles in der Seitenleiste. */
.dash-menue-knopf { display: none; }
.dash-sidebar .dash-konto-link { display: block; color: #cfc7bc; font-size: .88rem; margin-bottom: .6em; }
.dash-sidebar .dash-name { font-size: .82rem; color: #9a9188; margin-bottom: .75em; }
.dash-sidebar .dash-abmelden { color: #cfc7bc; padding-left: 0; }
.dash-sidebar .dash-kontext > a { color: #cfc7bc; font-size: .92rem; }

/* „Änderungen speichern“ gehört zum Hauptformular. Ist ein Reiter mit
   eigenen Formularen offen (Ablauf, Fotos, Fragen), steht er nicht mehr
   verloren herum. */
.speichern-leiste { position: sticky; bottom: 1.5rem; z-index: 5; }
#main-form:not(:has(.tab-panel.active)) .speichern-leiste { display: none; }

.qr-klapp { margin-bottom: 1.75rem; }
/* Auf-/Zuklappen: Innenabstand an der summary selbst, damit die ganze
   Zeile antippbar ist (≥ 44 px), nicht nur die Textzeile. */
.qr-klapp summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--body); padding: .8em 0; }
.qr-klapp[open] summary { margin-bottom: .5em; }

/* Nur für Screenreader (z. B. „erledigt“ neben einem Häkchen-Symbol). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* „Euer nächster Schritt“ oben beim Bearbeiten (views/anleitung.js). */
.schritte-kasten {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.25rem;
}
.schritte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.schritte-titel { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.schritte-zaehler { font-size: .8rem; color: var(--muted); }
.schritte-balken { height: 6px; background: var(--brand-soft); border-radius: 999px; margin: .55rem 0 .85rem; overflow: hidden; }
.schritte-balken span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.schritte-naechster { display: flex; align-items: center; gap: .85rem; }
.schritte-naechster > div { flex: 1; min-width: 0; }
.schritte-naechster strong { font-size: 1rem; }
.schritte-naechster p { margin: .15em 0 0; font-size: .86rem; color: var(--muted); }
.schritte-emoji { font-size: 1.6rem; line-height: 1; }
.schritte-alle { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.schritte-alle summary, .schritte-kasten.ist-komplett summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--body); padding: .6em 0; }
.schritte-kasten.ist-komplett { border-left-color: #6aa55a; padding: .75rem 1.2rem; }
.schritte-mehr { font-weight: 500; color: var(--muted); margin-left: .4em; }
.schritte-liste { list-style: none; margin: .6rem 0 .4rem; padding: 0; display: grid; gap: .15rem; }
.schritte-liste li { display: flex; align-items: center; gap: .6em; font-size: .9rem; padding: .3em 0; }
.schritte-liste li a { color: var(--ink); }
.schritte-liste li.ist-fertig a { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.schritte-liste li.ist-naechster a { font-weight: 700; color: var(--brand); }
.schritt-haken {
  flex: 0 0 1.7em; height: 1.7em; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg); font-size: .85rem;
}
.ist-fertig .schritt-haken { background: #eef6ec; color: #386a2c; font-weight: 700; }
.schritt-optional { font-size: .72rem; font-weight: 500; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .05em .55em; vertical-align: middle; }
.schritte-link { display: inline-block; font-size: .86rem; font-weight: 600; color: var(--brand); margin-top: .2rem; }

/* „So geht's“ – nummerierte Schritte mit großer Zahl links. */
.anleitung { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .9rem; }
.anleitung-schritt {
  display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.3rem;
}
.anleitung-nr {
  flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 1.1rem;
}
.anleitung-schritt.ist-fertig .anleitung-nr { background: #6aa55a; }
.anleitung-text { flex: 1; min-width: 0; }
.anleitung-text h2 { font-size: 1.08rem; margin: .35em 0 .3em; display: flex; flex-wrap: wrap; align-items: center; gap: .45em; }
.anleitung-text p { margin: 0 0 .75em; color: var(--body); font-size: .93rem; line-height: 1.55; }
.anleitung-start { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.anleitung-faq details { border-bottom: 1px solid var(--line); }
.anleitung-faq details:last-child { border-bottom: 0; }
.anleitung-faq summary { cursor: pointer; font-weight: 600; font-size: .95rem; padding: .75em 0; }
.anleitung-faq details[open] { padding-bottom: .6em; }
.anleitung-faq p { margin: .5em 0 .2em; color: var(--body); font-size: .92rem; line-height: 1.55; }
@media (max-width: 720px) {
  .schritte-kasten { padding: .9rem 1rem; }
  .schritte-naechster { flex-wrap: wrap; }
  .schritte-naechster .btn { width: 100%; }
  .anleitung-schritt { padding: 1rem; gap: .8rem; }
  .anleitung-nr { flex-basis: 2rem; height: 2rem; font-size: .95rem; }
}

/* ---- Kundenbereich am Handy ------------------------------------------- */
@media (max-width: 860px) {
  /* Seitenleiste → schmale Kopfzeile: Logo + Menü, darunter die Hauptwege
     zum Wischen. Das Seltene steckt im Menü (.dash-menue-teil). */
  /* min-width: 0 – sonst macht die Wischleiste (.dash-nav) die Rasterspalte
     so breit wie alle Knöpfe nebeneinander, und die ganze Seite wird
     breiter als der Bildschirm (wie bei .dash-main, siehe oben). */
  .dash-sidebar { padding: .7rem 1rem .75rem; gap: .65rem; min-width: 0; }
  .dash-kopf { display: flex; align-items: center; justify-content: space-between; }
  .dash-sidebar .logo { margin-bottom: 0; font-size: 1.15rem; }
  .dash-menue-knopf {
    display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: .4em .9em;
    background: #2a2420; color: #ece7e0; border: 1px solid #3a322c; border-radius: 999px;
    font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  }
  .dash-sidebar.menue-offen .dash-menue-knopf { background: #3a322c; }
  .dash-nav {
    display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
    margin: 0 -1rem; padding: 0 1rem;
  }
  .dash-nav::-webkit-scrollbar { display: none; }
  .dash-nav a {
    flex: 0 0 auto; margin: 0; min-height: 38px; padding: .45em .9em; font-size: .86rem;
    background: #2a2420; border-radius: 999px; white-space: nowrap;
  }
  .dash-sidebar .spacer { display: none; }
  .dash-menue-teil { order: 3; border-top: 1px solid #3a322c; padding-top: .7rem; }
  .dash-menue-teil + .dash-menue-teil { border-top: 0; padding-top: 0; }
  .dash-sidebar .wedding-picker { margin: .6em 0 0; }
  .dash-sidebar .dash-konto-link { display: inline-block; margin: 0 1.2em .5em 0; }
  html.js-an .dash-sidebar:not(.menue-offen) .dash-menue-teil { display: none; }
}
/* Die Ränder unten (-1rem) passen zum Innenabstand von .dash-main am Handy
   (Block „Handy zuerst“ am Ende: 1rem). */
@media (max-width: 720px) {
  /* Speichern als feste Leiste unten, mit dem Daumen erreichbar. */
  .speichern-leiste {
    bottom: 0; margin: 0 -1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(251,249,252,.94); border-top: 1px solid var(--line);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .speichern-leiste .btn { width: 100%; }

  /* Reiter kleben oben, damit man beim langen Formular nicht zurück-
     scrollen muss. Der Verlauf rechts zeigt: hier geht es weiter
     (public/dashboard.js nimmt ihn weg, wenn man am Ende ist). */
  .tabs {
    position: sticky; top: 0; z-index: 6; background: var(--bg); margin: 0 -1rem 1.25rem; padding: 0 1rem;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .tabs.am-ende { -webkit-mask-image: none; mask-image: none; }

  .form-card { padding: 1.15rem 1rem; border-radius: 14px; }
  .dash-header { margin-bottom: 1.25rem; }
  .dash-header h1 { font-size: 1.4rem; }
  .copy-box { flex-wrap: wrap; }
  .copy-box code { flex-basis: calc(100% - 2em); }

  .stat-grid { gap: .6rem; margin-bottom: 1.25rem; }
  .stat-card { padding: .8rem .9rem; border-radius: 12px; }
  .stat-card .n { font-size: 1.5rem; }
  .stat-card .l { font-size: .7rem; }
}

/* Gästeliste als Karten: acht Spalten sind am Handy nicht lesbar, und
   „Bearbeiten“ lag außer Sicht rechts in der Tabelle. Spaltennamen kommen
   aus data-label (views/dashboard-guests.js), leere Angaben fallen weg. */
/* „.dash-main“ davor, weil die Grundregeln der Tabelle weiter unten stehen
   und sonst gewinnen. */
@media (max-width: 720px) {
  .dash-main .form-card:has(> table.rsvp-table) { background: none; border: 0; padding: 0; overflow: visible !important; }
  .dash-main table.rsvp-table, .dash-main table.rsvp-table tbody, .dash-main table.rsvp-table tr, .dash-main table.rsvp-table td { display: block; }
  .dash-main table.rsvp-table thead { display: none; }
  .dash-main table.rsvp-table tr {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: .85rem 1rem .6rem; margin-bottom: .75rem;
  }
  .dash-main table.rsvp-table td { border: 0; padding: .18em 0; display: flex; gap: .75em; }
  .dash-main table.rsvp-table td[data-label]::before {
    content: attr(data-label); flex: 0 0 5.5em; color: var(--muted); font-size: .78rem; padding-top: .1em;
  }
  .dash-main table.rsvp-table td.leer { display: none; }
  .dash-main table.rsvp-table td.gast-name { display: block; padding-right: 6.5rem; margin-bottom: .35em; font-size: 1rem; }
  .dash-main table.rsvp-table td.gast-status { position: absolute; top: .8rem; right: 1rem; padding: 0; }
  .dash-main table.rsvp-table td.gast-status::before { display: none; }
  .dash-main table.rsvp-table td.gast-aktionen { margin-top: .5em; padding-top: .6em; border-top: 1px solid var(--line); gap: .4em; }
}

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid #f1ece3;
}
.list-row:last-child { border-bottom: none; }
.list-row .meta { font-size: .8rem; color: var(--muted); }
.item-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #f1ece3; }
.gallery-grid-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: .75rem; margin-bottom: 1rem; }
.gallery-grid-admin .g-item { position: relative; }
.gallery-grid-admin img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }
.gallery-grid-admin .g-loeschen { position: absolute; top: 6px; right: 6px; }
.gallery-grid-admin .g-loeschen button { background: rgba(33,29,26,.7); color: #fff; border: none; border-radius: 999px; width: 26px; height: 26px; font-size: .8rem; cursor: pointer; }
@media (max-width: 720px) { .gallery-grid-admin .g-loeschen button { width: 36px; height: 36px; font-size: .95rem; } }
/* „Meine Fotos“: größere Kacheln mit Polaroid-Haken, Unterschrift und
   Verschieben (views/dashboard-edit.js). */
.gallery-grid-admin.mit-polaroids { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.mit-polaroids .g-item { border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: #fff; display: flex; flex-direction: column; gap: .5rem; }
.mit-polaroids .g-item.ist-polaroid { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.mit-polaroids .g-bild { position: relative; }
.mit-polaroids .g-bild img, .mit-polaroids .g-bild video { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 8px; }
/* Auswahl pro Person im Kundenbereich (views/dashboard-edit.js auswahlKarte) */
.thema-liste { display: grid; gap: .5em; }
.thema-zeile { display: grid; grid-template-columns: minmax(170px, 13em) 1fr; gap: .4em 1em; align-items: center; padding: .55em .75em; border: 1px solid var(--line, #e6dde9); border-radius: 12px; }
.thema-zeile:has(.thema-schalter input:checked) { border-color: var(--brand); background: #fdf6fa; }
.thema-zeile:not(:has(.thema-schalter input:checked)) .thema-optionen { opacity: .55; }
.thema-schalter { margin: 0; gap: .55em; }
.thema-schalter .thema-name { flex: 1; min-width: 0; padding: .45em .6em; }
.thema-optionen { width: 100%; }
@media (max-width: 560px) { .thema-zeile { grid-template-columns: 1fr; } }

/* Einladung löschen (views/dashboard-list.js) */
.btn-gefahr { color: #b5453f; }
.btn-gefahr:hover { background: #fbeceb; }
.btn-gefahr-voll { background: #b5453f; border-color: #b5453f; }
.btn-gefahr-voll:hover { background: #9a3530; border-color: #9a3530; }
.loeschen-karte ul { margin: .5em 0 0; padding-left: 1.2em; }
.loeschen-karte li { margin-bottom: .35em; }

/* Ton beim Öffnen im Kundenbereich (views/dashboard-edit.js tonKarte) */
.ton-teil { display: none; margin-top: .4em; }
#ton-karte:has(input[name="tonBeimOeffnen"][value="spieluhr"]:checked) .ton-spieluhr { display: block; }
#ton-karte:has(input[name="tonBeimOeffnen"][value="gruss"]:checked) .ton-gruss { display: block; }
.ton-gruss-da { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; margin-bottom: .8em; }
.ton-gruss-da audio { max-width: 100%; height: 40px; }
.ton-gruss-knoepfe { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; margin-bottom: .6em; }
#gruss-aufnehmen.nimmt-auf { background: #c8202f; color: #fff; border-color: #c8202f; }

/* Eigene Fragen im Kundenbereich (views/dashboard-edit.js fragenKarte) */
.fragen-liste { list-style: none; padding: 0; margin: 0 0 1em; }
.fragen-liste li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .6em 0; border-bottom: 1px solid var(--line, #e6dde9); }
.fragen-liste li:first-child { border-top: 1px solid var(--line, #e6dde9); }
.fragen-liste strong { display: block; font-size: .95rem; }
.fragen-liste .meta { font-size: .8rem; color: var(--muted, #7d7486); }
.frage-optionen { display: none; }
.fragen-auswertung { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8em; margin-top: .8em; }
.auswertung { border: 1px solid var(--line, #e6dde9); border-radius: 12px; padding: .8em 1em; }
.auswertung strong { display: block; font-size: .9rem; margin-bottom: .4em; }
.auswertung-werte { display: flex; flex-wrap: wrap; gap: .4em 1.1em; }
.auswertung-werte b { font-family: var(--display); font-size: 1.35rem; color: var(--brand); margin-right: .15em; }
.auswertung ul { margin: 0; padding-left: 1.1em; font-size: .88rem; }
.rsvp-table .antwort { font-size: .85rem; line-height: 1.35; margin-bottom: .3em; }
.rsvp-table .antwort .meta { display: block; font-size: .75rem; }
.frage-neu:has(select option[value="auswahl"]:checked) .frage-optionen { display: block; }

/* Wunschliste im Kundenbereich (views/dashboard-edit.js wunschKarte).
   Nur hier stehen die Namen der Schenkenden – auf der Einladung nie. */
.wunsch-liste { list-style: none; padding: 0; margin: 0 0 1em; }
.wunsch-liste li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: .7em 0; border-bottom: 1px solid var(--line, #e6dde9); }
.wunsch-liste li:first-child { border-top: 1px solid var(--line, #e6dde9); }
.wunsch-liste strong { display: block; font-size: .95rem; }
.wunsch-liste .meta { display: block; font-size: .8rem; color: var(--muted, #7d7486); }
.wunsch-liste .wunsch-wer { color: var(--brand); font-weight: 600; }

/* Dresscode im Kundenbereich (views/dashboard-edit.js dresscodeKarte) */
.dc-stile { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: .5em; }
.dc-stil { position: relative; display: block; cursor: pointer; }
.dc-stil input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dc-stil span { display: block; height: 100%; border: 1.5px solid var(--line, #e6dde9); border-radius: 12px; padding: .65em .8em; background: #fff; transition: border-color .15s, background .15s; }
.dc-stil strong { display: block; font-size: .92rem; }
.dc-stil small { display: block; color: var(--muted, #7d7486); font-size: .78rem; line-height: 1.35; margin-top: .2em; }
.dc-stil input:checked + span { border-color: var(--brand); background: #fdf3f8; box-shadow: 0 0 0 1px var(--brand); }
.dc-stil input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.dc-farben-editor { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: .6em; }
.dc-farbe { position: relative; display: inline-flex; }
.dc-farbe input[type="color"] { width: 48px; height: 48px; padding: 0; border: 1px solid var(--line, #e6dde9); border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.dc-farbe input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dc-farbe input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.dc-farbe input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.dc-farbe-weg { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: #1a1220; color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.dc-farbe-weg::after { content: ""; position: absolute; inset: -8px; } /* größere Tippfläche */
.dc-paletten { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.dc-palette { display: inline-flex; align-items: center; gap: .45em; border: 1px solid var(--line, #e6dde9); background: #fff; border-radius: 999px; padding: .3em .7em .3em .35em; font-size: .8rem; cursor: pointer; min-height: 34px; }
.dc-palette:hover { border-color: var(--brand); }
.dc-palette-punkte { display: inline-flex; }
.dc-palette-punkte i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, inset 0 0 0 1px rgba(0,0,0,.12); margin-left: -4px; }
.dc-palette-punkte i:first-child { margin-left: 0; }
.g-ungueltig { display: grid; place-items: center; height: 150px; border-radius: 8px; background: #f3eef5; color: var(--muted, #7d7486); font-size: .8rem; text-align: center; padding: 1em; }
.g-polaroid-marke {
  position: absolute; left: 6px; top: 6px; background: var(--brand); color: #fff;
  font-size: .72rem; font-weight: 600; padding: .2em .6em; border-radius: 999px;
}
.g-polaroid-schalter { display: flex; align-items: center; gap: .45em; font-size: .85rem; font-weight: 500; cursor: pointer; margin: 0; }
.g-polaroid-schalter input { width: 1.05em; height: 1.05em; accent-color: var(--brand); margin: 0; }
.g-polaroid-text { display: flex; gap: .35rem; margin-top: .4rem; }
.g-polaroid:not(.is-an) .g-polaroid-text { display: none; }
.g-polaroid-text input { flex: 1; min-width: 0; font-size: .85rem; padding: .4em .6em; border: 1px solid var(--line); border-radius: 8px; }
.g-polaroid-text .btn { padding: .35em .8em; }
.g-polaroid-hinweis { font-size: .78rem; color: var(--muted); }
.g-polaroid-zaehler { display: inline-block; margin-left: .3em; font-weight: 600; color: var(--brand); }
.mit-polaroids .g-reihe { display: flex; gap: .25rem; margin-top: auto; }
.mit-polaroids .g-reihe .btn { padding: .2em .7em; font-size: 1rem; }
.mit-polaroids .g-reihe .btn[disabled] { opacity: .3; cursor: default; }

.badge { display: inline-block; padding: .25em .7em; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-yes { background: #eef6ec; color: #386a2c; }
.badge-no { background: #fdecea; color: #a3291f; }
.badge-maybe { background: #fff6e0; color: #8a6d00; }
.badge-live { background: #eef6ec; color: #386a2c; }
.badge-draft { background: #f1ece3; color: var(--body); }

table.rsvp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.rsvp-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .6em .5em; border-bottom: 1px solid var(--line); }
table.rsvp-table td { padding: .7em .5em; border-bottom: 1px solid var(--line); vertical-align: top; }

/* ---------------------------------------------------------------------------
   Verwaltung (/admin)
   --------------------------------------------------------------------------- */

/* Leiste während „Als Kunde ansehen" – klebt oben, damit man nie vergisst,
   in wessen Konto man gerade ist. Bewusst in Warnfarbe statt Markenfarbe. */
.ansicht-leiste {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 1em; flex-wrap: wrap;
  background: #8a6d00; color: #fff; padding: .55em 1em; font-size: .88rem;
}
.ansicht-leiste form { margin: 0; }
.ansicht-leiste .btn { background: #fff; color: #5c4900; border-color: #fff; }

/* Nebeninfo unter Tabellenzellen und als Fußnote. War bisher nur innerhalb
   von .list-row gestaltet und erschien sonst in voller Textgröße. */
.meta { font-size: .8rem; color: var(--muted); }

.knopf-reihe { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; }
.knopf-reihe form { margin: 0; }

.admin-suche { display: flex; gap: .5em; margin: 0 0 1.25rem; }
.admin-suche input { flex: 1; min-width: 0; }

.admin-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.admin-zwei > .form-card { margin-bottom: 1.5rem; min-width: 0; }
@media (max-width: 900px) { .admin-zwei { grid-template-columns: 1fr; } }

.zeile-warnung td { background: #fff8e6; }

.totp-schluessel {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem; letter-spacing: .08em; word-break: break-all;
  background: var(--brand-tint); border: 1px dashed var(--line); border-radius: 10px;
  padding: .8em 1em; margin: .6em 0 .8em; user-select: all;
}

.anbindung-status { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .anbindung-status { grid-template-columns: 1fr; } }

.postausgang-mail { border-bottom: 1px solid var(--line); padding: .7em 1.2em; }
.postausgang-mail:last-child { border-bottom: 0; }
.postausgang-mail summary { cursor: pointer; }
.postausgang-mail pre {
  white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .88rem;
  background: var(--brand-tint); border-radius: 8px; padding: .8em 1em; margin: .6em 0 .2em;
}

.fehler-stack {
  font-size: .75rem; background: #f7f4f8; border-radius: 8px; padding: .6em .8em;
  overflow-x: auto; white-space: pre; margin: .4em 0 0;
}

/* Umsatz pro Monat: eine Reihe, eine Farbe. Säulen höchstens 24 px breit,
   oben 4 px gerundet, unten eckig an der Grundlinie; Raster als Haarlinie.
   Beschriftung in Textfarben, nie in der Säulenfarbe. */
/* --uc-monate: Höhe der Monatszeile. Achse, Raster und Monatszeile rechnen
   alle mit diesem einen Wert, sonst sitzt „0 €" neben statt auf der
   Grundlinie (em-Angaben würden sich je nach Schriftgröße unterscheiden). */
.uc { --uc-monate: 1.6rem; display: grid; grid-template-columns: auto 1fr; gap: .6em; height: 210px; }
.uc-achse {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: .7rem; line-height: 1; color: var(--muted); text-align: right; padding-bottom: var(--uc-monate);
  font-variant-numeric: tabular-nums;
}
/* Oben und unten auf die Linie schieben; die mittlere sitzt durch
   space-between schon genau in der Mitte. */
.uc-achse span:first-child { transform: translateY(-50%); }
.uc-achse span:last-child { transform: translateY(50%); }
.uc-flaeche { position: relative; display: grid; grid-template-rows: 1fr var(--uc-monate); }
.uc-raster { position: absolute; inset: 0 0 var(--uc-monate) 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.uc-raster i { display: block; height: 1px; background: var(--line); }
.uc-saeulen { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; }
.uc-col {
  position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center;
  outline: none; cursor: default;
}
.uc-bar {
  width: min(24px, 70%); background: var(--brand); border-radius: 4px 4px 0 0;
  min-height: 0;
}
.uc-col:hover .uc-bar, .uc-col:focus-visible .uc-bar { background: var(--brand-dark); }
.uc-wert {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .68rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.uc-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: .75rem; line-height: 1.35;
  padding: .45em .7em; border-radius: 8px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5;
}
.uc-col:first-child .uc-tip { left: 0; transform: none; }
.uc-col:last-child .uc-tip { left: auto; right: 0; transform: none; }
.uc-col:hover .uc-tip, .uc-col:focus-visible .uc-tip { opacity: 1; }
.uc-monate {
  display: grid; grid-template-columns: repeat(12, 1fr); text-align: center; align-items: start;
  font-size: .68rem; line-height: 1; color: var(--muted); padding-top: .45rem; box-sizing: border-box;
}
.uc-leer { color: var(--muted); font-size: .9rem; padding: 1.5em 0; }
.uc-tabelle { margin-top: .8em; font-size: .85rem; }
.uc-tabelle summary { color: var(--muted); cursor: pointer; }

/* Trichter: waagerechte Balken, eine Farbe, Zahl rechts daneben. */
.trichter { display: grid; gap: .7em; }
.tr-zeile { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 88px; gap: .7em; align-items: center; }
.tr-zahl .meta { margin-left: .35em; }
.tr-label { font-size: .85rem; color: var(--ink); }
.tr-spur { height: 14px; background: var(--brand-tint); border-radius: 0 4px 4px 0; }
.tr-balken { height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; min-width: 2px; }
.tr-zahl { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) {
  .tr-zeile { grid-template-columns: 1fr 60px; }
  .tr-label { grid-column: 1 / -1; }
}

.qr-actions { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .75rem; }
.copy-box { display: flex; gap: .5em; align-items: center; background: #f7f2ea; border: 1px dashed #dccdbb; border-radius: 10px; padding: .6em .9em; font-size: .85rem; }
.copy-box code { flex: 1; overflow-x: auto; white-space: nowrap; }

.theme-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 860px) { .theme-picker { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .theme-picker { grid-template-columns: repeat(2, 1fr); } }
.theme-option { border: 2px solid var(--line); border-radius: 14px; padding: 1rem; cursor: pointer; font-size: .88rem; }
.theme-option.selected { border-color: var(--brand); }
.theme-swatch { height: 70px; border-radius: 8px; margin-bottom: .6em; }
.theme-swatch.elegant { background: linear-gradient(135deg,#fbf8f2,#b8935a 55%,#8a3b30); }
.theme-swatch.modern { background: linear-gradient(135deg,#0f0e0d,#0f0e0d 55%,#ff5a3c); }
.theme-swatch.boho { background: linear-gradient(135deg,#fdf8f1,#f3c9c0 55%,#bf6b56); }
.theme-swatch.confetti { background: linear-gradient(135deg,#fffaf5,#ffc43d 40%,#e0447c 75%,#40c4b4); }
.theme-swatch.neon { background: linear-gradient(135deg,#0d0a1a,#2a1740 45%,#f637a5 80%,#22d3ee); }
.theme-swatch.retro { background: linear-gradient(135deg,#fdf3e3,#f0b25a 50%,#d2601a 80%,#2f2013); }
.theme-swatch.orient { background: linear-gradient(135deg,#fbf5e9,#b98f2e 45%,#0f5d5a 80%); }
.theme-swatch.botanik { background: linear-gradient(135deg,#fcfdfa,#d6e2c5 45%,#6f8f5f 85%); }
.theme-swatch.minimal { background: linear-gradient(135deg,#fff,#fff 48%,#1a1a1a 52%); }
.theme-swatch.deko { background: linear-gradient(135deg,#0f302a,#14413a 45%,#d9b871 85%); }
.theme-option-soon { cursor: default; opacity: .55; }

/* Design-Vorschau neben der Auswahl (views/dashboard-edit.js, Steuerung in
   public/dashboard.js). Am Computer rechts daneben, am Handy wird die
   Auswahl zur Wischreihe und das Handy steht darunter – so sieht man beim
   Antippen sofort das Ergebnis, ohne zu scrollen. */
.design-wahl:has(.design-vorschau:not([hidden])) {
  display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 1.5rem; align-items: start;
}
.design-wahl:has(.design-vorschau:not([hidden])) .theme-picker { grid-template-columns: repeat(3, 1fr); }
.design-vorschau { display: flex; flex-direction: column; align-items: center; gap: .7rem; position: sticky; top: 1rem; }
.design-vorschau[hidden] { display: none; }
.design-vorschau-umschalter { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.design-vorschau-umschalter button {
  border: 0; background: transparent; border-radius: 999px; padding: .45em 1em; min-height: 36px;
  font-size: .82rem; font-weight: 600; color: var(--body);
}
.design-vorschau-umschalter button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.design-telefon {
  width: 250px; padding: 9px; border-radius: 34px; background: #1a1220;
  box-shadow: 0 24px 50px -28px rgba(26,18,32,.7);
}
.design-telefon-schirm {
  position: relative; height: 470px; border-radius: 26px; overflow: hidden; background: #fff;
  clip-path: inset(0 round 26px); /* sonst blitzt der skalierte iframe an den Ecken */
}
.design-telefon-schirm iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; width: 390px; height: 900px; }
.design-telefon-schirm.laedt iframe { opacity: .35; transition: opacity .2s ease; }
.design-telefon-schirm.laedt::after {
  content: "Lädt …"; position: absolute; inset: auto 0 45% 0; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--body);
}
.design-vorschau-info { font-size: .78rem; color: var(--muted); text-align: center; margin: 0; max-width: 250px; }
@media (max-width: 1100px) {
  .design-wahl:has(.design-vorschau:not([hidden])) .theme-picker { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .design-wahl:has(.design-vorschau:not([hidden])) { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .design-wahl:has(.design-vorschau:not([hidden])) .theme-picker {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; padding-bottom: .4rem;
    margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scrollbar-width: none;
  }
  .design-wahl .theme-picker::-webkit-scrollbar { display: none; }
  .design-wahl:has(.design-vorschau:not([hidden])) .theme-option { flex: 0 0 116px; scroll-snap-align: start; padding: .7rem; font-size: .8rem; }
  .design-wahl:has(.design-vorschau:not([hidden])) .theme-swatch { height: 52px; }
  .design-vorschau { position: static; }
  .design-telefon { width: 220px; }
  .design-telefon-schirm { height: 400px; }
}
.theme-swatch.soon {
  display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25;
  background: repeating-linear-gradient(135deg, var(--line), var(--line) 10px, #ede5d8 10px, #ede5d8 20px);
  color: var(--muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}

/* Gesammelte Musikwünsche im Panel – als Liste zum Weitergeben an den DJ. */
.song-list { counter-reset: song; margin: 0; padding: 0; }
.song-list li {
  display: flex; align-items: baseline; gap: .75em; counter-increment: song;
  padding: .55em 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.song-list li:last-child { border-bottom: none; }
.song-list li::before {
  content: counter(song) "."; flex: 0 0 1.7em; color: var(--muted); font-size: .82rem; text-align: right;
}
.song-title { flex: 1; }
.song-from { color: var(--muted); font-size: .82rem; white-space: nowrap; }

/* Übersicht der Einladungsseiten. Nicht freigeschaltete Seiten sind gedämpft,
   aber weiter bearbeitbar – gestalten kostet nichts, veröffentlichen schon. */
.event-card { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.event-card.is-locked { background: var(--brand-tint); border-style: dashed; }
.event-card.is-locked h3, .event-card.is-locked h2, .event-card.is-locked .meta { opacity: .65; }

.unlock-box {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  background: var(--brand-soft); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem;
}
.unlock-box strong { display: block; font-size: .95rem; }
.unlock-box p { margin: .3em 0 0; font-size: .88rem; color: var(--body); max-width: 42em; }
/* Mit Stripe steht mehr Text in der Box – Knopf unten statt daneben. */
.unlock-box-bezahlen { align-items: flex-end; }
.unlock-box-bezahlen > div { flex: 1 1 22em; }
.unlock-box .sofortbeginn {
  align-items: flex-start; margin-top: .8em; font-size: .85rem; line-height: 1.45; cursor: pointer;
}
.unlock-box .sofortbeginn input { margin-top: .2em; flex-shrink: 0; }

.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state h2 { color: var(--ink); }
.empty-state .btn { margin-top: .5em; }

/* Anlass gleich bei der Erstellung wählen (views/dashboard-list.js neuPage) */
.anlass-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: 640px; }
.anlass-kachel {
  width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35em;
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 2rem 1.2rem; cursor: pointer;
  font-family: inherit; transition: border-color .15s, transform .1s;
}
.anlass-kachel:hover { border-color: var(--brand); transform: translateY(-2px); }
.anlass-kachel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.anlass-icon { font-size: 2.2rem; }
.anlass-kachel strong { font-size: 1.05rem; }
.anlass-kachel .meta { font-size: .85rem; }

/* Umschlag selbst gestalten (views/dashboard-edit.js, lib/umschlag.js) */
.env-gestalten { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.env-gestalten > summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.env-farben { display: flex; flex-wrap: wrap; align-items: end; gap: .9em; margin-top: 1em; }
.env-farbe { display: flex; flex-direction: column; gap: .35em; font-size: .82rem; color: var(--body); }
.env-farbe input[type="color"] {
  width: 64px; height: 42px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.env-paletten { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: .9em; }
.env-palette {
  display: inline-flex; align-items: center; gap: .45em; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .35em .8em .35em .45em;
  font-size: .8rem; color: var(--body);
}
.env-palette:hover { border-color: var(--brand); }
.env-palette i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.env-zeichen-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5em; margin-top: .4em; }
/* Zwei Klassen im Selektor, weil „.field label { display: block }" weiter
   oben sonst gewinnt – die Kacheln stehen in einem .field. */
.env-zeichen-wahl .env-zeichen {
  display: flex; flex-direction: column; align-items: center; gap: .25em; cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: 12px; padding: .6em .4em; font-size: .78rem; color: var(--body);
  font-weight: 400; margin-bottom: 0;
}
.env-zeichen input { position: absolute; opacity: 0; width: 0; height: 0; }
.env-zeichen b { font-size: 1.2rem; line-height: 1.1; }
.env-zeichen:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.label-wie { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3em; }

/* Reiter „Sprachen“ (views/dashboard-sprachen.js): links der deutsche Text,
   rechts das Feld für die Übersetzung. Ein goldener Strich links markiert,
   was noch fehlt. */
/* Sprachen hinzufügen/entfernen (views/dashboard-sprachen.js sprachenAuswahl).
   Ein <select>-Dropdown statt einer wachsenden Kachel-Liste – bei 13
   möglichen Sprachen wäre eine Kachel pro Sprache unübersichtlich geworden. */
.spr-chips { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: .5em; }
.spr-chip {
  display: flex; align-items: center; gap: .5em;
  border: 1px solid var(--line); border-radius: 999px; padding: .35em .4em .35em 1em;
  background: var(--brand-soft);
}
.spr-chip span { display: flex; flex-direction: column; line-height: 1.2; }
.spr-chip small { color: var(--muted); font-size: .75rem; }
.spr-chip form { display: contents; }
.spr-chip button { border-radius: 999px; padding: .3em .6em; }
.spr-hinzufuegen { display: flex; align-items: flex-end; gap: .7em; flex-wrap: wrap; }
.spr-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; }
.spr-kopf h2 { margin-bottom: 0; }
.spr-kopf-rechts { display: inline-flex; align-items: center; gap: .6em; }
.spr-balken { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: .7em 0 .5em; }
.spr-balken span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.spr-gruppe {
  font: 700 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 1.8em 0 .2em;
}
.spr-zeile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1em;
  padding: .9em 0 .9em 1em; border-top: 1px solid var(--line); border-left: 3px solid transparent;
}
.spr-zeile.ist-offen { border-left-color: var(--gold); }
.spr-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .25em; }
.spr-de p { margin: 0; color: var(--body); font-size: .95rem; }
.spr-ziel input, .spr-ziel textarea { width: 100%; }
.spr-uebernehmen { margin-top: .4em; }
.spr-speichern { margin-top: 1.4em; }
@media (max-width: 720px) {
  .spr-zeile { grid-template-columns: 1fr; gap: .5em; padding-left: .8em; }
}

/* ==========================================================================
   Öffentliche Hochzeitsseite
   ========================================================================== */
/* --accent-text: dieselbe Farbe, nur so dunkel, dass kleine Schrift darauf
   lesbar ist (≥ 4,5:1, WCAG AA). Für Flächen, Linien und große Schrift
   bleibt --accent – so behält jedes Design seinen Ton. */
.w-page {
  --accent: #a4523a; --accent-soft: #faeae3; --bg: #fbf9f6; --gold: #b8935a;
  --accent-text: var(--accent);
  --w-heading-font: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  background: var(--bg);
}
.w-page.theme-modern { --accent: #ff5a3c; --accent-text: #b8331a; --accent-soft: #ffe4da; --bg: #f5f3ef; --w-heading-font: "Space Grotesk", system-ui, sans-serif; }
.w-page.theme-boho { --accent: #bf6b56; --accent-text: #9e4f3c; --accent-soft: #fbe8de; --bg: #fdf8f1; --w-heading-font: "Quicksand", system-ui, sans-serif; }
.w-page.theme-confetti { --accent: #e0447c; --accent-text: #b8285e; --accent-soft: #ffe6ef; --bg: #fffaf5; --w-heading-font: "Fredoka", system-ui, sans-serif; }
.w-page.theme-neon { --accent: #f637a5; --accent-soft: #2a1740; --bg: #120e21; --w-heading-font: "Outfit", system-ui, sans-serif; }
.w-page.theme-retro { --accent: #d2601a; --accent-text: #a84a12; --accent-soft: #ffeeda; --bg: #fdf3e3; --w-heading-font: "Alfa Slab One", Georgia, serif; }
.w-page.theme-orient { --accent: #0f5d5a; --accent-text: #0b4543; --accent-soft: #e3efed; --bg: #fbf5e9; --gold: #b98f2e; --w-heading-font: "Playfair Display", "Cormorant Garamond", Georgia, serif; }
.w-page.theme-botanik { --accent: #6f8f5f; --accent-text: #506b42; --accent-soft: #eaf1e4; --bg: #fcfdfa; --gold: #9db98c; --w-heading-font: "Cormorant Garamond", Georgia, serif; }
.w-page.theme-minimal { --accent: #1a1a1a; --accent-text: #1a1a1a; --accent-soft: #f2f2f2; --bg: #ffffff; --gold: #1a1a1a; --w-heading-font: "Inter", system-ui, sans-serif; }
.w-page.theme-deko { --accent: #d9b871; --accent-soft: #14413a; --bg: #0f302a; --gold: #d9b871; --w-heading-font: "Outfit", system-ui, sans-serif; }
.w-page h1, .w-page h2, .w-page h3 { font-family: var(--w-heading-font); }

.w-hero {
  min-height: 66vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 1.5rem; position: relative; background-size: cover; background-position: center;
}
.w-hero .overlay { position: absolute; inset: 0; background: rgba(20,16,13,.38); }
.w-hero.has-image { color: #fff; }
.w-hero .content { position: relative; z-index: 1; }
.w-hero .eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 700; margin-bottom: 1.2em;
  color: var(--accent-text);
}
.w-hero.has-image .eyebrow { color: #f4e3d8; }
.w-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin-bottom: .3em; }
/* Polaroids, die beim Öffnen auf die Seite geworfen werden (Beispielseiten,
   public/polaroids.js). Der Stapel liegt über der Grenze zwischen Kopf und
   nächstem Abschnitt – wie auf einen Tisch geworfen – und kostet so kaum
   zusätzliche Höhe. Lage pro Bild kommt als --x/--y/--r aus views/public.js.
   overflow-x: clip, weil die Bilder von außerhalb des Bildschirms kommen:
   Ohne das ließe sich die Seite am Handy während des Flugs seitlich
   verschieben. Bewegt werden nur transform und opacity – das rechnet der
   Browser flüssig; ein wandernder Schatten würde jedes Bild neu malen. */
/* Der Kopf endet ohne Innenabstand unten; der Stapel hängt mit seiner
   unteren Hälfte über die Kante, der folgende Abschnitt bekommt dafür oben
   entsprechend mehr Luft. */
.w-hero.mit-polaroids { padding-bottom: 0; }
.w-hero.mit-polaroids + * { padding-top: calc(4.5rem + 95px); }
/* 3D: Der Stapel gibt die Perspektive vor (Fluchtpunkt in seiner Mitte),
   jedes Bild kippt darin um --kx/--ky. Ohne preserve-3d, damit sich die
   Bilder weiter in Reihenfolge des HTML überdecken statt sich im Raum zu
   schneiden. --von: Seite, von der ein Bild geworfen wird (1 = rechts). */
.w-polaroids {
  position: relative; z-index: 2; width: 100%; height: 215px; margin: 2rem 0 -95px;
  overflow-x: clip; overflow-y: visible; pointer-events: none;
  perspective: 1200px;
  /* Mausposition über dem Kopf, -1 … 1 (public/polaroids.js). */
  --mx: 0; --my: 0;
}
.w-polaroid {
  --von: 1; --kx: 12deg; --ky: 0deg;
  position: absolute; left: 50%; top: 0; width: 168px; margin: 0 0 0 -84px;
  background: #fff; padding: 9px 9px 0; border-radius: 3px;
  box-shadow:
    0 1px 1px rgba(0,0,0,.1), 0 3px 6px rgba(0,0,0,.08),
    0 22px 38px -16px rgba(30,20,10,.55), 0 42px 70px -34px rgba(30,20,10,.4);
  /* Ruhelage; --mx/--my neigen das Bild leicht zur Maus hin. */
  transform:
    translate3d(calc(var(--x) + var(--mx) * 10px), calc(var(--y) + var(--my) * 8px), 0)
    rotateX(calc(var(--kx) - var(--my) * 8deg)) rotateY(calc(var(--ky) + var(--mx) * 10deg))
    rotate(var(--r)) scale(1);
  opacity: 0;
}
/* Glanz über Bild und Rand – lässt das Papier gewölbt wirken. */
.w-polaroid::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.38), rgba(255,255,255,0) 36%, rgba(0,0,0,0) 68%, rgba(0,0,0,.07));
}
.w-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #ece7e1; }
.w-polaroid figcaption {
  font-family: "Caveat", "Segoe Print", cursive; font-size: 1.2rem; line-height: 1.1;
  /* Linksbündig wie von Hand beschriftet – und weil das nächste Bild im
     Stapel die rechte Ecke verdeckt; zentriert fehlte dort das Wortende. */
  color: #3a342e; text-align: left; padding: .28em .2em .5em .45em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* „backwards“ statt „both“: Nach der Landung gilt wieder die normale
   transform-Regel (gleich dem letzten Schlüsselbild) – nur so kann das
   Anheben unter der Maus überhaupt greifen. */
.w-polaroids.is-geworfen .w-polaroid {
  opacity: 1;
  /* .6 s Vorlauf: erst tritt der Titel auf (Titel-Auftritt unten), dann
     fliegen die Bilder. */
  animation: w-polaroid-wurf 1.3s cubic-bezier(.3,.6,.4,1) calc(.6s + var(--i) * 190ms) backwards;
}
.w-polaroids.is-ruhig .w-polaroid { opacity: 1; }
/* Von der Seite außerhalb, nah vor der Kamera (translateZ) und im Raum
   gekippt. Bei 38 % ist es nur noch 90 px vom Ziel entfernt, aber noch
   deutlich schräg und vergrößert – die seitlichen Bilder landen nah am
   Bildschirmrand, mit einem weiten Anflug passierte die ganze Drehung
   außerhalb und man sah nur ein flaches Bild hereingleiten. Dann legt es sich flach,
   schießt beim Landen ein Stück über das Ziel hinaus und federt zurück.
   Alle Schlüsselbilder haben dieselbe Liste von Transformationen, sonst
   rechnet der Browser über eine Matrix und die Drehung wirkt eckig. */
@keyframes w-polaroid-wurf {
  0%   { opacity: 0; transform: translate3d(calc(var(--x) + var(--von) * 45vw), calc(var(--y) - 120px), 520px) rotateX(55deg) rotateY(calc(var(--von) * -60deg)) rotate(calc(var(--r) + var(--von) * 50deg)) scale(1); }
  8%   { opacity: 1; }
  38%  { transform: translate3d(calc(var(--x) + var(--von) * 90px), calc(var(--y) - 30px), 330px) rotateX(38deg) rotateY(calc(var(--von) * -34deg)) rotate(calc(var(--r) + var(--von) * 20deg)) scale(1); }
  68%  { transform: translate3d(calc(var(--x) - var(--von) * 14px), calc(var(--y) + 4px), 30px) rotateX(calc(var(--kx) - 10deg)) rotateY(calc(var(--ky) + var(--von) * 8deg)) rotate(calc(var(--r) - var(--von) * 4deg)) scale(1); }
  84%  { transform: translate3d(calc(var(--x) + var(--von) * 3px), var(--y), 0) rotateX(calc(var(--kx) + 3deg)) rotateY(var(--ky)) rotate(calc(var(--r) + var(--von) * 1.2deg)) scale(1); }
  /* = Ruhelage der .w-polaroid-Regel, sonst springt das Bild am Ende. */
  100% { opacity: 1; transform: translate3d(calc(var(--x) + var(--mx) * 10px), calc(var(--y) + var(--my) * 8px), 0) rotateX(calc(var(--kx) - var(--my) * 8deg)) rotateY(calc(var(--ky) + var(--mx) * 10deg)) rotate(var(--r)) scale(1); }
}
/* Mit Maus: ein Bild hebt sich an, richtet sich auf und kommt nach vorn.
   Nicht im Handy-Stapel (bis 640 px) – dort käme das gerade weggeschnippte
   Bild unter dem Zeiger sofort wieder nach oben. */
@media (hover: hover) and (min-width: 641px) {
  .w-polaroid { pointer-events: auto; transition: transform .45s cubic-bezier(.2,.8,.3,1); }
  .w-polaroids.is-geworfen .w-polaroid:hover,
  .w-polaroids.is-ruhig .w-polaroid:hover {
    z-index: 5;
    transform: translate3d(var(--x), calc(var(--y) - 14px), 80px) rotateX(0deg) rotateY(0deg) rotate(calc(var(--r) * .4)) scale(1);
  }
}
/* Breite Bildschirme: Die Bilder liegen rund um den Kopf statt als Stapel
   darunter – links oben/unten, rechts oben/unten (unten rechts zwei
   übereinander), größer, und jedes fliegt von seiner Seite herein. Ab 1280 px
   ist neben Überschrift und Begrüßungstext (±260 px) genug Platz. Lage per
   left/top statt --x/--y, deshalb werden die Inline-Werte hier genullt. */
@media (min-width: 1280px) {
  .w-hero.mit-polaroids { padding-bottom: 4rem; }
  .w-hero.mit-polaroids + * { padding-top: 4.5rem; }
  .w-polaroids { position: absolute; inset: 0; height: auto; margin: 0; perspective: 1150px; }
  .w-polaroid { width: 230px; margin-left: -115px; padding: 11px 11px 0; --x: 0px !important; --y: 0px !important; }
  .w-polaroid figcaption { font-size: 1.45rem; }
  .w-polaroid:nth-child(1) { left: max(25% - 170px, 50% - 660px); top: 10%; --r: -7deg !important; --von: -1; --kx: 18deg; --ky: 14deg; }
  .w-polaroid:nth-child(2) { left: max(25% - 110px, 50% - 580px); top: calc(100% - 180px); --r: 5deg !important; --von: -1; --kx: 20deg; --ky: 9deg; }
  .w-polaroid:nth-child(3) { left: min(75% + 110px, 50% + 580px); top: 13%; --r: 6deg !important; --kx: 18deg; --ky: -14deg; }
  /* Unten rechts zwei übereinander: das letzte Bild landet links oberhalb
     und deckt nur eine Bildecke des vorigen ab – dessen Unterschrift bleibt
     frei. */
  .w-polaroid:nth-child(4) { left: min(75% + 180px, 50% + 650px); top: calc(100% - 160px); --r: -5deg !important; --kx: 20deg; --ky: -9deg; }
  .w-polaroid:nth-child(5) { left: min(75% + 60px, 50% + 530px); top: calc(100% - 262px); --r: 7deg !important; --kx: 18deg; --ky: -12deg; }
}
/* Schmaler (Tablet): alle fünf kleiner nebeneinander. Die Lage steht als
   Inline-Style am Bild, deshalb hier mit !important. */
@media (max-width: 760px) {
  .w-polaroid { width: 128px; margin-left: -64px; padding: 7px 7px 0; }
  /* Schmale Bilder: lange Unterschriften dürfen zweizeilig werden */
  .w-polaroid figcaption { font-size: .95rem; white-space: normal; line-height: 1.05; }
  .w-polaroid:nth-child(1) { --x: -236px !important; }
  .w-polaroid:nth-child(2) { --x: -118px !important; }
  .w-polaroid:nth-child(3) { --x: 0px !important; }
  .w-polaroid:nth-child(4) { --x: 118px !important; }
  .w-polaroid:nth-child(5) { --x: 236px !important; }
}
/* Handy: Fotostapel zum Durchblättern (Mehmetcans Wunsch, 14.09.2026 – vorher
   waren es drei 112-px-Bildchen, „die sieht man am Handy eh nicht“). Alle
   fünf fliegen auf einen großen Stapel; Tippen oder Wischen schnippt das
   oberste weg, es schiebt sich unten wieder ein (public/polaroids.js). Die
   Reihenfolge im Stapel steuert --z, nicht das HTML – ein umgehängtes
   Element spielte seine Wurf-Animation noch einmal ab. */
@media (max-width: 640px) {
  .w-polaroids { --gross: min(62vw, 240px); height: calc(var(--gross) + 78px); margin: 1.2rem 0 -120px; pointer-events: none; }
  .w-hero.mit-polaroids + * { padding-top: calc(3rem + 120px); }
  .w-polaroid {
    width: var(--gross); margin-left: calc(var(--gross) / -2); padding: 8px 8px 0;
    z-index: var(--z, auto); pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
  }
  .w-polaroid figcaption { font-size: 1.25rem; white-space: nowrap; line-height: 1.1; }
  .w-polaroid:nth-child(1) { --x: -16px !important; --y: 8px !important; --r: -9deg !important; }
  .w-polaroid:nth-child(2) { --x: 14px !important; --y: 2px !important; --r: 7deg !important; }
  .w-polaroid:nth-child(3) { --x: -8px !important; --y: -4px !important; --r: -4deg !important; }
  .w-polaroid:nth-child(4) { --x: 11px !important; --y: 4px !important; --r: 5deg !important; }
  .w-polaroid:nth-child(5) { --x: 0px !important; --y: 0px !important; --r: -1.5deg !important; }
  .w-polaroid.w-weg { animation: w-polaroid-weg .36s cubic-bezier(.5,0,.9,.4) forwards !important; }
  .w-polaroid.w-zurueck { animation: w-polaroid-zurueck .34s ease-out !important; }
  /* Hinweis unter dem Stapel – nur, wenn es etwas zu blättern gibt */
  .w-polaroids:not([data-anzahl="1"])::after {
    content: "Tippen oder wischen: nächstes Foto"; position: absolute; left: 0; right: 0; bottom: -30px;
    text-align: center; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.15rem; color: var(--w-hinweis, #6e665c); opacity: 0;
    transition: opacity .6s ease 1.2s;
  }
  .w-polaroids.is-ruhig:not([data-anzahl="1"])::after { opacity: .85; }
  .theme-neon .w-polaroids::after, .theme-modern .w-polaroids::after { --w-hinweis: #b3aac9; }
}
@keyframes w-polaroid-weg {
  to { opacity: 0; transform: translate3d(calc(var(--x) + var(--weg, 1) * 110vw), calc(var(--y) - 30px), 0) rotate(calc(var(--r) + var(--weg, 1) * 28deg)); }
}
@keyframes w-polaroid-zurueck {
  from { opacity: 0; transform: translate3d(var(--x), calc(var(--y) + 14px), 0) rotate(var(--r)) scale(.94); }
}

/* Weniger als fünf Bilder (Gastgeber wählen selbst, data-anzahl aus
   views/public.js): mittig verteilen statt die ersten Plätze links zu
   belegen, und rund um den Kopf beide Seiten nutzen. Die Regeln sind durch
   [data-anzahl] spezifischer als die allgemeinen oben und gewinnen. */
@media (min-width: 641px) and (max-width: 760px) {
  .w-polaroids[data-anzahl="1"] .w-polaroid:nth-child(1) { --x: 0px !important; }
  .w-polaroids[data-anzahl="2"] .w-polaroid:nth-child(1) { --x: -70px !important; }
  .w-polaroids[data-anzahl="2"] .w-polaroid:nth-child(2) { --x: 70px !important; }
  .w-polaroids[data-anzahl="3"] .w-polaroid:nth-child(1) { --x: -130px !important; }
  .w-polaroids[data-anzahl="3"] .w-polaroid:nth-child(2) { --x: 0px !important; }
  .w-polaroids[data-anzahl="3"] .w-polaroid:nth-child(3) { --x: 130px !important; }
  .w-polaroids[data-anzahl="4"] .w-polaroid:nth-child(1) { --x: -177px !important; }
  .w-polaroids[data-anzahl="4"] .w-polaroid:nth-child(2) { --x: -59px !important; }
  .w-polaroids[data-anzahl="4"] .w-polaroid:nth-child(3) { --x: 59px !important; }
  .w-polaroids[data-anzahl="4"] .w-polaroid:nth-child(4) { --x: 177px !important; }
}
/* Im Stapel am Handy liegt ein einzelnes Bild gerade in der Mitte */
@media (max-width: 640px) {
  .w-polaroids[data-anzahl="1"] .w-polaroid:nth-child(1) { --x: 0px !important; --y: 0px !important; --r: -2deg !important; }
}
@media (min-width: 1280px) {
  /* 1 Bild: rechts oben · 2: links und rechts oben · 3: dazu rechts unten */
  .w-polaroids[data-anzahl="1"] .w-polaroid:nth-child(1),
  .w-polaroids[data-anzahl="2"] .w-polaroid:nth-child(2),
  .w-polaroids[data-anzahl="3"] .w-polaroid:nth-child(2) {
    left: min(75% + 110px, 50% + 580px); top: 13%; --r: 6deg !important; --von: 1; --kx: 18deg; --ky: -14deg;
  }
  .w-polaroids[data-anzahl="3"] .w-polaroid:nth-child(3) {
    left: min(75% + 180px, 50% + 650px); top: calc(100% - 160px); --r: -5deg !important; --von: 1; --kx: 20deg; --ky: -9deg;
  }
}

/* ==========================================================================
   Titel-Auftritt: Nach dem Öffnen tritt der Titel auf, je Design anders
   (Mehmetcans Wunsch, 11.09.2026). Startet von selbst erst nach dem
   Umschlag – solange er liegt, sind alle Animationen der Seite angehalten
   (body.env-locked). Nur Schlüsselbilder mit „backwards“: Der Endzustand ist
   immer das normale Aussehen; fällt die Animation weg (abbestellt, alter
   Browser), steht der Titel einfach da. Buchstaben (.w-bs) nur dort als
   inline-block, wo sie einzeln bewegt werden – das kostet die
   Unterschneidung, bei den Serifen von Elegant und Boho sähe man das.
   Zerlegt wird der Titel in views/public.js (titelZerlegt).
   ========================================================================== */
.w-titel .w-wort { white-space: nowrap; }

/* Elegant: wie Tinte, die ins Papier zieht – aus der Unschärfe, weit
   gesperrt, rückt zusammen. Danach zieht sich die Goldlinie auf. */
.theme-elegant .w-titel { animation: w-titel-tinte 1.6s cubic-bezier(.2,.7,.2,1) .15s backwards; }
@keyframes w-titel-tinte {
  0%   { opacity: 0; filter: blur(10px); letter-spacing: .32em; transform: translateY(8px); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); letter-spacing: 0em; transform: translateY(0); }
}
.theme-elegant .w-hero .w-divider { animation: w-linie-auf 1s cubic-bezier(.2,.7,.2,1) 1.2s backwards; }
@keyframes w-linie-auf { 0% { opacity: 0; transform: scaleX(0); } }

/* Boho: wie mit dem Stift geschrieben – eine weiche Kante wandert von
   links nach rechts über den Titel. Die Maske gilt nur während der
   Animation (am Ende fällt sie weg, dann ist der Titel längst ganz sichtbar). */
.theme-boho .w-titel { animation: w-titel-schreiben 1.9s cubic-bezier(.45,.1,.35,1) .15s backwards; }
@keyframes w-titel-schreiben {
  0% {
    opacity: .2; transform: translateY(6px);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
  }
  15% { opacity: 1; }
  99% {
    opacity: 1; transform: translateY(0);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
    -webkit-mask-position: 0 0; mask-position: 0 0;
  }
}

/* Modern: Wort für Wort scharf von unten aus einer Kante geschoben. */
.theme-modern .w-titel .w-wort { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em .02em .08em; margin: -.1em 0 -.08em; }
.theme-modern .w-titel .w-wort-in { display: inline-block; animation: w-titel-hoch .85s cubic-bezier(.2,.85,.2,1) calc(.15s + var(--w) * 110ms) backwards; }
@keyframes w-titel-hoch { 0% { transform: translateY(108%); } }

/* Konfetti: Buchstabe für Buchstabe bunt aufploppen, mit Nachwippen. */
.theme-confetti .w-titel .w-bs {
  --farbe: #e0447c; display: inline-block;
  animation: w-titel-plopp .7s cubic-bezier(.34,1.56,.64,1) calc(.15s + min(var(--i), 24) * 55ms) backwards;
}
.theme-confetti .w-titel .w-bs:nth-child(4n+2) { --farbe: #f5a900; }
.theme-confetti .w-titel .w-bs:nth-child(4n+3) { --farbe: #1fb5a3; }
.theme-confetti .w-titel .w-bs:nth-child(4n) { --farbe: #7b5cff; }
@keyframes w-titel-plopp {
  0%   { opacity: 0; color: var(--farbe); transform: translateY(.4em) scale(.2) rotate(-25deg); }
  55%  { opacity: 1; color: var(--farbe); transform: translateY(-.12em) scale(1.18) rotate(8deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* Neon: flackert an wie eine Leuchtröhre – jeder Buchstabe etwas anders,
   einige zucken später nach. Danach flackert die Leuchtlinie auf. */
.theme-neon .w-titel .w-bs {
  display: inline-block;
  animation: w-titel-neon 1.5s linear calc(.2s + min(var(--i), 24) * 60ms + var(--zucken, 0ms)) backwards;
}
.theme-neon .w-titel .w-bs:nth-child(3n+2) { --zucken: 180ms; }
.theme-neon .w-titel .w-bs:nth-child(5n+4) { --zucken: 420ms; }
@keyframes w-titel-neon {
  0%   { opacity: .08; text-shadow: none; }
  6%   { opacity: 1; }
  8%   { opacity: .15; }
  14%  { opacity: .9; }
  16%  { opacity: .2; }
  30%  { opacity: 1; text-shadow: 0 0 26px rgba(246,55,165,.95), 0 0 60px rgba(246,55,165,.6); }
  33%  { opacity: .45; }
  36%  { opacity: 1; }
  100% { opacity: 1; }
}
.theme-neon .w-hero .w-glow { animation: w-glow-an 1.1s linear 1.5s backwards; }
@keyframes w-glow-an {
  0%  { opacity: 0; transform: scaleX(.2); }
  10% { opacity: 1; }
  14% { opacity: .1; }
  22% { opacity: 1; }
  26% { opacity: .3; }
  40% { opacity: 1; transform: scaleX(1); }
}

/* Retro: Buchstaben plumpsen herunter, stauchen sich beim Aufsetzen wie
   Gummi und bekommen dabei ihren harten Schatten. Danach geht die Sonne
   auf. Der Schatten bleibt – harte Schatten ohne Weichzeichner sind das
   Merkmal dieses Designs. */
.theme-retro .w-titel .w-bs {
  display: inline-block; transform-origin: 50% 100%;
  text-shadow: 3px 3px 0 rgba(210,96,26,.85);
  animation: w-titel-plumps .75s cubic-bezier(.3,.7,.4,1) calc(.15s + min(var(--i), 24) * 60ms) backwards;
}
@keyframes w-titel-plumps {
  0%   { opacity: 0; text-shadow: 0 0 0 rgba(210,96,26,0); transform: translateY(-1.1em) scaleY(1.15) scaleX(.9); }
  45%  { opacity: 1; text-shadow: 0 0 0 rgba(210,96,26,.85); transform: translateY(0) scaleY(.72) scaleX(1.18); }
  70%  { transform: translateY(-.14em) scaleY(1.06) scaleX(.96); }
  100% { opacity: 1; transform: translateY(0) scaleY(1) scaleX(1); }
}
.theme-retro .w-hero .w-sun { transform-origin: 50% 100%; animation: w-sonne-auf 1s cubic-bezier(.2,.8,.3,1) 1.3s backwards; }
@keyframes w-sonne-auf { 0% { opacity: 0; transform: scale(.5, 0); } }

/* Orientalisch: der Titel kommt wie ein Vorhang aus der Mitte, danach läuft
   ein Goldschimmer einmal darüber und die Rauten setzen sich. */
.theme-orient .w-titel .w-wort { display: inline-block; animation: w-titel-oeffnen .9s cubic-bezier(.2,.8,.25,1) calc(.15s + var(--w) * 130ms) backwards; }
@keyframes w-titel-oeffnen { 0% { opacity: 0; transform: scaleX(.55); letter-spacing: .3em; } }
.theme-orient .w-titel {
  background-image: linear-gradient(100deg, transparent 38%, rgba(232,200,119,.85) 50%, transparent 62%);
  background-size: 250% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: w-gold-schimmer 1.6s ease-out 1.1s backwards;
}
@keyframes w-gold-schimmer {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}
.theme-orient .w-hero .w-ornament i { animation: w-raute-auf .5s cubic-bezier(.34,1.56,.64,1) calc(1.2s + var(--n, 0) * 90ms) backwards; }
.theme-orient .w-hero .w-ornament i:nth-child(2) { --n: 1; }
.theme-orient .w-hero .w-ornament i:nth-child(3) { --n: 2; }
@keyframes w-raute-auf { 0% { opacity: 0; transform: rotate(45deg) scale(.2); } }

/* Botanisch: die Wörter wachsen sanft aus der Unschärfe, wie Aquarell, das
   ins Papier zieht. Danach wächst der Zweig von der Mitte nach außen. */
.theme-botanik .w-titel .w-wort { display: inline-block; animation: w-titel-aquarell 1.1s ease-out calc(.2s + var(--w) * 160ms) backwards; }
@keyframes w-titel-aquarell {
  0% { opacity: 0; filter: blur(9px); transform: translateY(.14em) scale(.985); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.theme-botanik .w-hero .w-zweig { animation: w-zweig-wachsen .9s cubic-bezier(.2,.8,.3,1) 1.1s backwards; }
@keyframes w-zweig-wachsen { 0% { opacity: 0; transform: scaleX(0); } }

/* Minimal: nichts springt. Die Buchstaben ziehen sich aus weiter Sperrung
   zusammen – die einzige Bewegung, die dieses Design sich erlaubt. */
.theme-minimal .w-titel { animation: w-titel-sperrung 1.2s cubic-bezier(.2,.8,.2,1) .15s backwards; }
@keyframes w-titel-sperrung {
  0% { opacity: 0; letter-spacing: .34em; }
  40% { opacity: 1; }
  100% { opacity: 1; letter-spacing: -.035em; }
}
.theme-minimal .w-hero .w-haarlinie { animation: w-linie-ziehen .8s cubic-bezier(.2,.8,.3,1) 1s backwards; }
@keyframes w-linie-ziehen { 0% { transform: scaleX(0); } }

/* Art déco: Buchstaben klappen abwechselnd von oben und unten herein wie
   Lamellen, danach fährt der Fächer auf. */
.theme-deko .w-titel .w-bs {
  display: inline-block; transform-origin: 50% 50%;
  animation: w-titel-lamelle .6s cubic-bezier(.2,.8,.3,1) calc(.15s + min(var(--i), 24) * 55ms) backwards;
}
.theme-deko .w-titel .w-bs:nth-child(even) { animation-name: w-titel-lamelle-unten; }
@keyframes w-titel-lamelle { 0% { opacity: 0; transform: rotateX(-90deg) translateY(-.2em); } }
@keyframes w-titel-lamelle-unten { 0% { opacity: 0; transform: rotateX(90deg) translateY(.2em); } }
.theme-deko .w-hero .w-faecher { transform-origin: 50% 100%; animation: w-faecher-auf .9s cubic-bezier(.2,.8,.3,1) 1.2s backwards; }
@keyframes w-faecher-auf { 0% { opacity: 0; transform: scale(.2, .1); } }

@media (prefers-reduced-motion: reduce) {
  .w-titel, .w-titel *, .w-hero .w-divider, .w-hero .w-glow, .w-hero .w-sun,
  .w-hero .w-ornament i, .w-hero .w-zweig, .w-hero .w-haarlinie, .w-hero .w-faecher { animation: none !important; }
}

/* Wetter unter dem Countdown. Farben aus der Schrift des Designs abgeleitet
   (currentColor), damit der Kasten ohne eigene Regeln auf hellen wie auf
   dunklen Designs (Neon, Modern) passt. */
.w-wetter {
  display: flex; align-items: center; gap: .8em; text-align: start;
  max-width: 460px; margin: 1.4em auto 0; padding: .75em 1.05em;
  border-radius: 14px; font-size: .92rem; line-height: 1.4;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.w-wetter-symbol { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.w-wetter-inhalt { display: flex; flex-direction: column; gap: .2em; }
.w-wetter-quelle { font-size: .74rem; opacity: .68; }

/* Das Datum ist nach dem Namen die wichtigste Angabe – groß genug, dass man
   es beim ersten Blick aufs Handy liest, ohne zu suchen. */
.w-hero .date {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.6rem); font-weight: 500;
  letter-spacing: .02em; line-height: 1.25; margin-bottom: 1.1em;
}
.countdown { display: flex; gap: 1.4rem; justify-content: center; flex-wrap: wrap; }
.countdown .box { min-width: 64px; }
.countdown .box .n { font-family: "Playfair Display", serif; font-size: 1.9rem; display: block; }
.countdown .box .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

.w-section { padding: 4.5rem 0; border-top: 1px solid rgba(0,0,0,.05); }
.w-section.alt { background: #fff; }
.w-section-head { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; }
.w-section-head .eyebrow { color: var(--accent-text); text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; font-weight: 700; }
.w-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: .3em; }

.w-story { max-width: 680px; margin: 0 auto; text-align: center; font-size: 1.08rem; color: #4a433c; }

.timeline { max-width: 620px; margin: 0 auto; }
.tl-item { display: flex; gap: 1.5rem; padding-bottom: 2rem; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 6px; top: 26px; bottom: -2px; width: 1px; background: #e3ddd4;
}
.tl-item:last-child::before { display: none; }
.tl-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex-shrink: 0; position: relative; z-index: 1; }
.tl-time { font-weight: 700; color: var(--accent-text); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2em; }
.tl-item h3 { font-size: 1.15rem; margin-bottom: .15em; }
.tl-item .loc { color: #6b6258; font-size: .92rem; }
.tl-item .loc a { color: var(--accent-text); text-decoration: underline; }
.tl-item p.desc { color: #6b6258; font-size: .92rem; margin-top: .4em; }
.tl-maps { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .5em; }
.maps-btn {
  display: inline-flex; align-items: center; gap: .35em; font-size: .8rem; font-weight: 600;
  padding: .4em .85em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text);
}
.maps-btn:hover { filter: brightness(0.96); }
.maps-btn-alt { background: #eef0ef; color: #4a433c; }

.w-carousel { max-width: 900px; margin: 0 auto; position: relative; }
.w-carousel-viewport { overflow: hidden; border-radius: 16px; }
.w-carousel-track { display: flex; transition: transform .35s ease; }
.w-carousel-slide { flex: 0 0 100%; min-width: 0; }
.w-carousel-slide img, .w-carousel-slide video {
  width: 100%; height: 460px; object-fit: cover; display: block; background: #211d1a;
}
@media (max-width: 640px) {
  .w-carousel-slide img, .w-carousel-slide video { height: 300px; }
}
.w-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: none; font-size: 1.3rem; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; color: #211d1a;
}
.w-carousel-arrow:hover { background: #fff; }
.w-carousel-arrow.prev { left: 12px; }
.w-carousel-arrow.next { right: 12px; }
.w-carousel-dots { display: flex; justify-content: center; gap: .5em; margin-top: 1.1em; }
.w-carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; background: #ddd3c6; padding: 0; cursor: pointer;
}
.w-carousel-dots button.active { background: var(--accent); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 800px; margin: 0 auto; }
@media (max-width: 640px) { .info-grid { grid-template-columns: 1fr; } }
.info-card { background: var(--accent-soft); border-radius: 16px; padding: 1.75rem; }
.info-card h3 { font-size: 1.05rem; margin-bottom: .5em; }
.info-card p { color: #4a433c; font-size: .93rem; margin: 0; }

/* Eigene Fragen im Rückmeldeformular */
.w-fragen[hidden] { display: none; }
.w-frage-janein { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.w-frage-janein legend { font-size: .85rem; font-weight: 600; margin-bottom: .45em; padding: 0; }
.w-frage-janein label { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; margin-inline-end: 1.4em; font-weight: 500; cursor: pointer; }
.w-frage-janein input { width: auto; accent-color: var(--accent); }

/* „Jetzt antworten“ klebt am Handy unten (public/zusage.js) */
.w-zusage-knopf { display: none; }
@media (max-width: 720px) {
  .w-zusage-knopf {
    display: flex; align-items: center; justify-content: center; gap: .4em;
    position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    min-height: 48px; padding: 0 1.6em; border-radius: 999px; white-space: nowrap;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem; text-decoration: none;
    box-shadow: 0 10px 26px -10px rgba(0,0,0,.45);
    transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s;
  }
  .w-zusage-knopf.is-sichtbar { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  body.env-locked .w-zusage-knopf { display: none; }
  .theme-modern .w-zusage-knopf { border-radius: 3px; }
  .theme-neon .w-zusage-knopf { box-shadow: 0 0 22px rgba(246,55,165,.55); }
  .theme-retro .w-zusage-knopf { border: 2px solid #2f2013; box-shadow: 4px 4px 0 #2f2013; }
}
@media (prefers-reduced-motion: reduce) { .w-zusage-knopf { transition: none; } }

/* Ton beim Öffnen: kleiner Knopf unten rechts (public/spieluhr.js) */
.w-ton-knopf {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 41;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-width: 48px; min-height: 48px; padding: 0 1em; border-radius: 999px; border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92); color: #2b2420; font: 600 .88rem/1 Inter, system-ui, sans-serif;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.4); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.w-ton-knopf[hidden] { display: none; }
.w-ton-knopf.spielt { padding: 0; width: 48px; }
.w-ton-balken { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.w-ton-balken i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: w-ton-balken 1s ease-in-out infinite; }
.w-ton-balken i:nth-child(2) { animation-delay: -.35s; }
.w-ton-balken i:nth-child(3) { animation-delay: -.7s; }
@keyframes w-ton-balken { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .w-ton-balken i { animation: none; transform: scaleY(.7); } }
.w-ton-kurz { display: none; }
@media (max-width: 720px) {
  .w-ton-knopf:not(.spielt) { font-size: .8rem; padding: 0 .85em; }
  .w-ton-lang { display: none; }
  .w-ton-kurz { display: inline; }
  /* Mit Ton-Knopf rechts rückt „Jetzt antworten“ nach links */
  body:has(.w-ton-knopf:not([hidden])) .w-zusage-knopf { left: 14px; transform: translate(0, 140%); }
  body:has(.w-ton-knopf:not([hidden])) .w-zusage-knopf.is-sichtbar { transform: translate(0, 0); }
}
.theme-neon ~ .w-ton-knopf, body:has(.theme-neon) .w-ton-knopf { background: rgba(28,20,48,.9); color: #f4f0ff; border-color: rgba(255,255,255,.15); }

/* Dresscode als Farbkarte (views/public.js dresscodeKarte) */
.info-grid .w-dresscode.mit-farben { grid-column: 1 / -1; }
.w-dresscode .w-dc-stil { font-family: var(--w-heading-font); font-size: 1.3rem; font-weight: 600; color: var(--accent-text); margin: 0 0 .1em; }
.w-dresscode .w-dc-text { margin-bottom: .9em; }
.w-dc-farben { list-style: none; display: flex; flex-wrap: wrap; gap: .9em 1.2em; margin: .2em 0 .9em; padding: 0; }
.w-dc-farben li { display: flex; flex-direction: column; align-items: center; gap: .35em; font-size: .82rem; min-width: 3.4em; }
.w-dc-punkt { display: block; width: 2.6em; height: 2.6em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 4px 10px -6px rgba(0,0,0,.35); }
.w-dc-nicht { display: flex; align-items: center; gap: .6em; margin-bottom: .6em !important; }
.w-dc-nicht .w-dc-punkt { width: 1.5em; height: 1.5em; flex: none; }
.w-dc-weiss { background: #fff; position: relative; overflow: hidden; }
.w-dc-weiss::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 2px; background: #c8202f; transform: rotate(-45deg); }
.w-dc-hinweis { font-style: italic; }
.theme-neon .w-dc-punkt { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 14px -4px rgba(255,255,255,.25); }
.theme-neon .w-dc-farben li { color: #b3aac9; }
.theme-modern .w-dc-punkt { border-radius: 3px; }
.theme-retro .w-dc-punkt { box-shadow: inset 0 0 0 2px #2f2013, 3px 3px 0 #2f2013; }

/* Wunschliste für Geschenke (views/public.js wunschlisteAbschnitt).
   Bewusst ohne feste Farben: Hintergrund aus --accent-soft, Schrift geerbt –
   so passt sie sich jedem Design an, auch den dunklen (Neon, Art déco),
   ohne für jedes Design eine eigene Regel zu brauchen. */
.wl-liste { list-style: none; padding: 0; margin: 0 auto; max-width: 780px; display: grid; gap: .8rem; }
.wl-item {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: var(--accent-soft); border-radius: 16px; padding: 1.1rem 1.3rem;
}
.wl-item.wl-ist-weg { opacity: .62; }
.wl-text { flex: 1 1 15em; min-width: 0; }
.wl-text h3 { font-size: 1.02rem; margin: 0 0 .25em; }
.wl-meta { font-size: .82rem; font-weight: 600; margin: 0 0 .3em; opacity: .8; }
.wl-notiz { font-size: .9rem; margin: 0 0 .4em; opacity: .85; }
/* Optisch eine kleine Textzeile – der Innenabstand macht daraus ein Tippziel
   von 34 px, ohne dass die Schrift größer wird. */
.wl-link {
  display: inline-block; padding: .52em 0; font-size: .85rem;
  color: var(--accent-text, var(--accent)); text-decoration: underline;
}
.wl-tat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .4em; }
.wl-frei, .wl-vergeben, .wl-meins { font-size: .82rem; margin: 0; opacity: .85; }
.wl-meins { font-weight: 600; opacity: 1; }
.wl-meldung { max-width: 780px; margin: 0 auto 1rem; }
/* Der Name steckt in einem <details> – so braucht das Eintragen kein
   JavaScript, und die Liste bleibt trotzdem kurz. */
.wl-form summary { list-style: none; }
.wl-form summary::-webkit-details-marker { display: none; }
.wl-form form { margin-top: .7em; text-align: start; min-width: min(17em, 60vw); }
.wl-form .field { margin-bottom: .6em; }
/* `color: inherit` ist Pflicht: `.field label` weiter oben setzt die dunkle
   Grundfarbe der Marke – auf Neon und Art déco wäre die Beschriftung weg. */
.wl-form label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .25em; color: inherit; }
/* Umriss in der Schriftfarbe statt einer festen Knopffarbe – dieselbe Lösung
   wie beim Kalender-Knopf, damit jedes Design (auch die dunklen) passt. */
.wl-form summary, .wl-tat .btn {
  background: transparent; color: inherit; cursor: pointer;
  border-color: rgba(0,0,0,.18); border-color: color-mix(in srgb, currentColor 32%, transparent);
}
.wl-form summary:hover, .wl-tat .btn:hover { color: var(--accent-text, var(--accent)); border-color: var(--accent); }
.wl-form[open] > summary { opacity: .75; }
/* Am Handy steht alles untereinander und linksbündig – rechtsbündig wirkte
   der Knopf eingerückt und der Hinweis darüber verloren. */
@media (max-width: 560px) {
  .wl-item { flex-direction: column; gap: .7rem; }
  /* Achtung: In einer Spalte ist flex-basis die **Höhe** – die 15em von oben
     hätten hier einen 240 px hohen Leerraum unter dem Text erzeugt. */
  .wl-text { flex: 0 1 auto; }
  .wl-tat { align-items: flex-start; width: 100%; }
  .wl-form form { width: 100%; }
}

.faq-item { max-width: 680px; margin: 0 auto 1rem; border-bottom: 1px solid #eee6db; padding-bottom: 1rem; }
.faq-item h3 { font-size: 1rem; margin-bottom: .3em; }
.faq-item p { color: #6b6258; font-size: .92rem; margin: 0; }

/* Eine Zeile pro angemeldeter Person im RSVP-Formular: Name und/oder
   Menüwunsch. Wächst mit der Personenzahl (public/rsvp.js). */
.guest-row { display: flex; align-items: center; gap: .6em; margin-bottom: .6em; }
.guest-row-label {
  flex: 0 0 5.4em; font-size: .82rem; font-weight: 600; color: #6e665c;
}
.guest-row-name { flex: 1 1 0; min-width: 0; }
.guest-row-meal { flex: 0 1 11em; }
.guest-row-name:only-of-type, .guest-row-meal:only-of-type { flex: 1 1 0; }
/* Mehrere Auswahl-Themen (Essen, Getränke, …): Person oben, Felder darunter
   nebeneinander und bei Bedarf umbrechend */
.guest-row:has(.guest-row-meal ~ .guest-row-meal) { flex-wrap: wrap; }
.guest-row:has(.guest-row-meal ~ .guest-row-meal) .guest-row-label { flex-basis: 100%; margin-bottom: -.2em; }
.guest-row:has(.guest-row-meal ~ .guest-row-meal) .guest-row-name { flex-basis: 100%; }
.guest-row:has(.guest-row-meal ~ .guest-row-meal) .guest-row-meal { flex: 1 1 8.5em; min-width: 0; }
@media (max-width: 480px) {
  .guest-row { flex-wrap: wrap; }
  .guest-row-label { flex-basis: 100%; margin-bottom: -.2em; }
  /* Name und Auswahl untereinander: nebeneinander bekam jedes Feld am Handy
     nur ~105 px, „Vegetarisch“ war abgeschnitten (15.09.2026). Doppelte
     Klasse, weil :only-of-type oben sonst gewinnt. */
  .guest-row .guest-row-name { flex-basis: 100%; }
  .guest-row .guest-row-meal { flex: 1 1 8.5em; min-width: 0; }
}
.rsvp-card { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 2.25rem; box-shadow: 0 10px 40px rgba(0,0,0,.06); }
/* Groß und fett: So reichen 3:1 Kontrast (WCAG „große Schrift“) und die
   Knopffarbe jedes Designs kann bleiben – bei normaler Größe wären 4,5:1
   nötig, das schaffen Boho, Konfetti, Neon, Retro und Modern nicht. */
.rsvp-card .btn-primary { background: var(--accent); font-size: 1.17rem; font-weight: 700; }
/* Kleiner Kalender-Knopf unter dem Absenden: nur Umriss in der Schriftfarbe
   der Karte – passt so ohne eigene Regeln auf helle wie dunkle Designs. */
.rsvp-kalender { text-align: center; margin-top: 1rem; }
.rsvp-kalender .btn {
  font-size: .78rem; font-weight: 500; padding: .38em .95em;
  background: transparent; color: inherit; opacity: .8;
  border-color: rgba(0,0,0,.15); border-color: color-mix(in srgb, currentColor 28%, transparent);
}
.rsvp-kalender .btn:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
/* Am Handy bekommen Knöpfe sonst 44 px Höhe („Handy zuerst“) – hier bleibt
   er optisch klein, die antippbare Fläche wächst unsichtbar mit ::after. */
@media (max-width: 720px) {
  .rsvp-kalender .btn { min-height: 34px; position: relative; }
  .rsvp-kalender .btn::after { content: ""; position: absolute; inset: -5px 0; }
}
.rsvp-thanks { text-align: center; padding: 5rem 1.5rem; }
.rsvp-thanks .icon { font-size: 2.5rem; margin-bottom: .5em; }

.w-footer { text-align: center; padding: 3rem 1rem; color: #6e665c; font-size: .82rem; }
.w-footer a { color: var(--accent-text); font-weight: 600; }

/* ==========================================================================
   Design-Extras: schwebende Deko-Icons (Boho), Laufband (Modern), feiner
   Divider (Elegant) – rein dekorativ, siehe THEME_EXTRAS in views/public.js
   ========================================================================== */
.w-hero { position: relative; }
.w-hero .w-float { position: absolute; font-size: 1.8rem; opacity: .55; animation: w-bob 6s ease-in-out infinite; z-index: 0; pointer-events: none; }
.w-hero .w-float.f1 { top: 12%; left: 8%; animation-delay: .2s; }
.w-hero .w-float.f2 { top: 20%; right: 10%; animation-delay: 1.4s; font-size: 1.4rem; }
.w-hero .w-float.f3 { bottom: 18%; left: 12%; animation-delay: .8s; font-size: 1.5rem; }
.w-hero .w-float.f4 { bottom: 24%; right: 9%; animation-delay: 2s; }
@keyframes w-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@media (max-width: 700px) { .w-hero .w-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .w-hero .w-float { animation: none; } }

.w-marquee { background: #0f0e0d; color: #f5f3ef; overflow: hidden; white-space: nowrap; padding: .6em 0; border-bottom: 3px solid #ff5a3c; }
.w-marquee div { display: inline-block; animation: w-scroll 16s linear infinite; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .8rem; }
.w-marquee span { margin: 0 1.2em; }
.w-marquee span.a { color: #ff5a3c; }
@keyframes w-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .w-marquee div { animation: none; } }

.w-divider { width: 44px; height: 1px; background: var(--gold, #b8935a); margin: 1em auto; }

/* Beim Scrollen sanft einblenden (siehe /static/reveal.js) */
.w-page .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.w-page .reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .w-page .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Theme "Elegant & edel" (Standard) – ruhige Serifen, feine Linien, warmes Gold
   ========================================================================== */
.theme-elegant .w-hero:not(.has-image) {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(184,147,90,.16), transparent 60%),
    linear-gradient(180deg, #fbf8f2 0%, #f7efe3 100%);
}
.theme-elegant .tl-dot { width: 17px; height: 17px; background: #fff; border: 1px solid var(--gold); position: relative; }
.theme-elegant .tl-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.theme-elegant .info-card { background: #fff; border: 1px solid #ecdfcb; }
.theme-elegant .rsvp-card { border: 1px solid #ecdfcb; box-shadow: 0 14px 40px -28px rgba(43,36,31,.4); }

/* ==========================================================================
   Theme "Modern & bold" – große Typografie, scharfe Kanten, ein Akzent
   ========================================================================== */
.theme-modern .w-hero:not(.has-image) {
  background:
    linear-gradient(#242220 1px, transparent 1px) 0 0/100% 64px,
    #0f0e0d;
  color: #f5f3ef;
}
.theme-modern .w-hero:not(.has-image) .eyebrow { color: #ff5a3c; }
.theme-modern .w-hero h1 { text-transform: uppercase; letter-spacing: -.01em; }
.theme-modern .w-section-head h2 { text-transform: uppercase; }
.theme-modern .btn-primary, .theme-modern .rsvp-card .btn-primary { border-radius: 3px; }
.theme-modern .maps-btn { border-radius: 3px; }
.theme-modern .w-carousel-viewport { border-radius: 3px; }
.theme-modern .tl-dot { display: none; }
.theme-modern .tl-item { border-bottom: 1px solid #e4dfd6; padding-bottom: 1.4rem; margin-bottom: 1.4rem; }
.theme-modern .tl-item::before { display: none; }
.theme-modern .tl-item h3 { text-transform: uppercase; }
.theme-modern .info-card { background: #fff; border: 2px solid #211d1a; border-radius: 3px; }
.theme-modern .faq-item h3 { text-transform: uppercase; font-size: 1.02rem; }
.theme-modern .rsvp-card { background: #0f0e0d; color: #f5f3ef; border-radius: 3px; box-shadow: none; }
.theme-modern .rsvp-card .field label { color: #c9c4bc; }
.theme-modern .rsvp-card input, .theme-modern .rsvp-card select, .theme-modern .rsvp-card textarea {
  background: transparent; border: none; border-bottom: 2px solid #45403a; border-radius: 0; color: #f5f3ef; padding-left: 0;
}
.theme-modern .rsvp-card input:focus, .theme-modern .rsvp-card select:focus, .theme-modern .rsvp-card textarea:focus {
  border-color: #ff5a3c; box-shadow: none;
}
/* Siehe Neon: die Einträge im aufgeklappten Menü brauchen eigene Farben. */
.theme-modern .rsvp-card option { background: #0f0e0d; color: #f5f3ef; }
.theme-modern .rsvp-card .hint { color: #918c84; }
.theme-modern .rsvp-card .guest-row-label { color: #b3ada4; } /* helle Karte-Schrift auf Schwarz */
.theme-modern .rsvp-card .companion-name-input { color: #211d1a; background: #fff; border-radius: 3px; padding: .6em .8em; border-bottom: none; }

/* ==========================================================================
   Theme "Boho & warm" – rund, weich, Deko-Icons, viel Schatten
   ========================================================================== */
.theme-boho .w-hero:not(.has-image) {
  background:
    radial-gradient(circle at 15% 20%, rgba(191,107,86,.14), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(191,141,86,.12), transparent 45%),
    #fdf8f1;
}
.theme-boho .tl-item { background: #fff; border-radius: 20px; padding: 1.2rem 1.4rem; box-shadow: 0 10px 24px -18px rgba(74,59,63,.3); margin-bottom: 1rem; }
.theme-boho .tl-item::before { display: none; }
.theme-boho .tl-dot { width: 30px; height: 30px; background: var(--accent-soft); margin-top: 0; }
.theme-boho .info-card { border-radius: 22px; background: #fff; box-shadow: 0 12px 26px -18px rgba(74,59,63,.25); }
.theme-boho .w-carousel-viewport { border-radius: 24px; }
.theme-boho .rsvp-card { border-radius: 28px; }
.theme-boho .faq-item { border-radius: 18px; background: #fff; border-bottom: none; padding: 1.1em 1.3em; box-shadow: 0 8px 20px -16px rgba(74,59,63,.2); }

/* ==========================================================================
   Leiste über der Beispielseite (/beispiel) – erklärt die Demo und lässt
   Besucher das Design wechseln. Im eingebetteten Vorschau-iframe der
   Startseite wird sie weggelassen (siehe views/demo.js).
   ========================================================================== */
.demo-bar {
  position: sticky; top: 0; z-index: 70;
  background: rgba(28,24,21,.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #f2ece4; padding: .65em 0;
}
.demo-bar-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: center; gap: .9rem 1.2rem; flex-wrap: wrap;
}
.demo-bar-intro { display: flex; align-items: center; gap: .8rem; margin-right: auto; }
/* Dieselbe Markenschrift wie oben auf der Startseite (vorher Playfair). */
.demo-bar-logo { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: #fff; }
.demo-bar-logo span { color: #e8b3a0; }
.demo-bar-text { font-size: .84rem; color: #c2b9ae; }
.demo-bar-pills { display: flex; gap: .35em; flex-wrap: wrap; justify-content: center; }
.demo-bar-pill {
  font-size: .8rem; font-weight: 600; padding: .4em .95em; border-radius: 999px;
  color: #cfc7bc; border: 1px solid #46403a;
}
.demo-bar-pill:hover { color: #fff; border-color: #7a7167; }
.demo-bar-pill.active { background: #a4523a; border-color: #a4523a; color: #fff; }
@media (max-width: 860px) {
  .demo-bar-intro { margin-right: 0; }
  .demo-bar-text { display: none; }
}
/* Sechs umbrechende Design-Knöpfe machten die klebende Leiste 182 px hoch –
   fast ein Viertel des Bildschirms. Jetzt eine Reihe zum Wischen. */
@media (max-width: 720px) {
  .demo-bar { padding: .5em 0; }
  /* Zwei Zeilen statt drei: oben Logo und Aktion, darunter die Designs
     zum Wischen. Die Leiste klebt oben, jede Zeile kostet Bildschirm. */
  .demo-bar-inner { gap: .55rem; padding: 0 12px; justify-content: space-between; }
  .demo-bar-intro { flex: 0 0 auto; margin-right: 0; }
  .demo-bar-inner > .btn { flex: 0 0 auto; }
  .demo-bar-pills {
    order: 3; width: 100%;
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .demo-bar-pills::-webkit-scrollbar { display: none; }
  .demo-bar-pill { flex: 0 0 auto; }
}

/* ==========================================================================
   Umschlag-Begrüßung auf der Hochzeitsseite (siehe public/envelope.js).
   Bewusst OHNE transform-style: preserve-3d – die Perspektive sitzt am
   .envelope selbst, damit die Ebenen weiter über z-index gestapelt werden
   können. Mit preserve-3d ignoriert der Browser z-index und die Klappe
   ließe sich nicht hinter die Karte legen.
   ========================================================================== */
body.env-locked { overflow: hidden; }
/* Ohne das verschwindet die Scrollleiste, solange der Umschlag oben liegt,
   und taucht beim Freigeben wieder auf – die ganze Seite ruckte dabei am
   Computer um die Breite der Leiste zur Seite. So bleibt ihr Platz frei. */
html:has(body.env-locked) { scrollbar-gutter: stable; }
/* Die Seite liegt komplett unter dem Umschlag. Ihre Deko-Animationen
   (Konfetti, schwebende Symbole, Laufband) solange anhalten – das spart
   genau die Rechenzeit, die dem Umschlag sonst fehlt. */
body.env-locked .w-page, body.env-locked .w-page * { animation-play-state: paused !important; }
/* Solange der Umschlag oben liegt, den Weichzeichner der klebenden Leiste
   abschalten. Ein backdrop-filter muss bei jeder Bewegung darüber neu
   gerechnet werden – das kostet mehr als die Animation selbst, und zu sehen
   ist die Leiste hinter dem bildschirmfüllenden Umschlag ohnehin nicht. */
body.env-locked .demo-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Farbwelt des Umschlags. Die Vorgabe ist der cremefarbene Umschlag; jedes
   Design bringt über .env-style-* seine eigene mit. Der Umschlag liegt im
   Markup außerhalb von .w-page und erbt dessen Design-Variablen deshalb
   nicht – er bekommt seine Farben über eine eigene Klasse. */
.env-overlay {
  --env-bg: radial-gradient(ellipse at 50% 38%, #fdf6ef 0%, #f3e5d7 58%, #e4d1bf 100%);
  --env-paper: linear-gradient(160deg, #f8ebde, #ecd9c6);
  --env-front: linear-gradient(170deg, #f4e3d2, #e7d1bb);
  --env-flap: linear-gradient(180deg, #f8ebde, #eddbc8);
  --env-card: #fffdf9;
  --env-seal: radial-gradient(circle at 35% 30%, #c26a4f, #8d3c2a);
  --env-seal-ink: #fbe6dd;
  --env-accent: #a4523a;
  --env-ink: #211d1a;
  --env-muted: #6e665c;
  --env-font: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}
.env-style-modern {
  --env-bg: linear-gradient(180deg, #1a1917 0%, #0f0e0d 100%);
  --env-paper: linear-gradient(160deg, #2c2926, #1a1917);
  --env-front: linear-gradient(170deg, #262320, #17150f);
  --env-flap: linear-gradient(180deg, #2c2926, #201d1a);
  --env-card: #f5f3ef;
  --env-seal: radial-gradient(circle at 35% 30%, #ff7a5f, #d93a1c);
  --env-seal-ink: #fff;
  --env-accent: #ff5a3c; --env-accent-text: #b8331a; --env-ink: #17150f; --env-muted: #6e665c;
  --env-font: "Space Grotesk", system-ui, sans-serif;
}
.env-style-boho {
  --env-bg: radial-gradient(ellipse at 50% 38%, #fdf8f1 0%, #f6e3d8 60%, #e8cbbc 100%);
  --env-paper: linear-gradient(160deg, #fbeade, #f0d3c2);
  --env-front: linear-gradient(170deg, #f7e0d2, #ebc9b6);
  --env-flap: linear-gradient(180deg, #fbeade, #f2d8c8);
  --env-card: #fffaf5;
  --env-seal: radial-gradient(circle at 35% 30%, #d98b73, #a9503a);
  --env-seal-ink: #fdeee7;
  --env-accent: #bf6b56; --env-accent-text: #9e4f3c; --env-ink: #3a2b26; --env-muted: #7e6558;
  --env-font: "Quicksand", system-ui, sans-serif;
}
.env-style-confetti {
  --env-bg: radial-gradient(circle at 20% 20%, rgba(224,68,124,.18), transparent 45%),
            radial-gradient(circle at 82% 24%, rgba(255,196,61,.24), transparent 42%),
            radial-gradient(circle at 60% 90%, rgba(64,196,180,.18), transparent 45%), #fffaf5;
  --env-paper: linear-gradient(160deg, #ffe9f0, #ffd4e2);
  --env-front: linear-gradient(170deg, #ffdfe9, #ffc7da);
  --env-flap: linear-gradient(180deg, #ffe9f0, #ffd9e5);
  --env-card: #fffdfa;
  --env-seal: radial-gradient(circle at 35% 30%, #ffd166, #e0447c);
  --env-seal-ink: #fff;
  --env-accent: #e0447c; --env-accent-text: #b8285e; --env-ink: #2c2230; --env-muted: #7a6a80;
  --env-font: "Fredoka", system-ui, sans-serif;
}
.env-style-neon {
  --env-bg: radial-gradient(ellipse at 30% 30%, rgba(246,55,165,.35), transparent 55%),
            radial-gradient(ellipse at 75% 60%, rgba(34,211,238,.28), transparent 55%), #0d0a1a;
  --env-paper: linear-gradient(160deg, #2c1b45, #1a1030);
  --env-front: linear-gradient(170deg, #26173d, #150d27);
  --env-flap: linear-gradient(180deg, #2c1b45, #211440);
  --env-card: #1b1436;
  --env-seal: radial-gradient(circle at 35% 30%, #ff7ac4, #d10f77);
  --env-seal-ink: #fff;
  --env-accent: #f637a5; --env-ink: #f4f0ff; --env-muted: #9187ab;
  --env-font: "Outfit", system-ui, sans-serif;
}
.env-style-retro {
  --env-bg: repeating-conic-gradient(from 0deg at 50% 118%, rgba(210,96,26,.14) 0deg 7deg, transparent 7deg 14deg),
            linear-gradient(180deg, #fdf3e3 0%, #f5dcb8 100%);
  --env-paper: linear-gradient(160deg, #f7d9a8, #e9b978);
  --env-front: linear-gradient(170deg, #f2caa0, #dfa86a);
  --env-flap: linear-gradient(180deg, #f7d9a8, #eec38c);
  --env-card: #fffaf0;
  --env-seal: radial-gradient(circle at 35% 30%, #e8853a, #b04510);
  --env-seal-ink: #fff6e8;
  --env-accent: #d2601a; --env-accent-text: #a84a12; --env-ink: #2f2013; --env-muted: #8b6a48;
  --env-font: "Alfa Slab One", Georgia, serif;
}
.env-style-orient {
  --env-bg: radial-gradient(ellipse at 50% 34%, #14675f 0%, #0d4a47 55%, #08322f 100%);
  --env-paper: linear-gradient(160deg, #f7ecd6, #e9d3ab);
  --env-front: linear-gradient(170deg, #f2e2c4, #dfc79a);
  --env-flap: linear-gradient(180deg, #f7ecd6, #edd9b5);
  --env-card: #fffdf6;
  --env-seal: radial-gradient(circle at 35% 30%, #e3bd6a, #9d7519);
  --env-seal-ink: #fffaec;
  --env-accent: #b98f2e; --env-accent-text: #8a6a1c; --env-ink: #123f3d; --env-muted: #6e6146;
  --env-font: "Playfair Display", Georgia, serif;
}
.env-style-botanik {
  --env-bg: radial-gradient(60% 50% at 20% 22%, rgba(157,185,140,.5), transparent 70%),
            radial-gradient(50% 45% at 82% 70%, rgba(226,235,212,.8), transparent 70%), #fcfdfa;
  --env-paper: linear-gradient(160deg, #f3f7ee, #dfe9d5);
  --env-front: linear-gradient(170deg, #eef3e8, #d7e3ca);
  --env-flap: linear-gradient(180deg, #f3f7ee, #e4edda);
  --env-card: #ffffff;
  --env-seal: radial-gradient(circle at 35% 30%, #9db98c, #5c7a4c);
  --env-seal-ink: #f4f8f0;
  --env-accent: #6f8f5f; --env-accent-text: #506b42; --env-ink: #2f3a2a; --env-muted: #6b7363;
  --env-font: "Cormorant Garamond", Georgia, serif;
}
.env-style-minimal {
  --env-bg: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
  --env-paper: linear-gradient(160deg, #ffffff, #ededed);
  --env-front: linear-gradient(170deg, #fafafa, #e4e4e4);
  --env-flap: linear-gradient(180deg, #ffffff, #efefef);
  --env-card: #ffffff;
  --env-seal: radial-gradient(circle at 35% 30%, #3a3a3a, #101010);
  --env-seal-ink: #ffffff;
  --env-accent: #1a1a1a; --env-accent-text: #1a1a1a; --env-ink: #101010; --env-muted: #6b6b6b;
  --env-font: "Inter", system-ui, sans-serif;
}
.env-style-deko {
  --env-bg: repeating-conic-gradient(from 180deg at 50% 116%, rgba(217,184,113,.14) 0deg 2deg, transparent 2deg 8deg),
            linear-gradient(180deg, #12463c 0%, #0a231e 100%);
  --env-paper: linear-gradient(160deg, #17544a, #0f3a32);
  --env-front: linear-gradient(170deg, #144a41, #0c2f29);
  --env-flap: linear-gradient(180deg, #17544a, #113f37);
  --env-card: #123830;
  --env-seal: radial-gradient(circle at 35% 30%, #efd79c, #b38f3f);
  --env-seal-ink: #0f302a;
  --env-accent: #d9b871; --env-accent-text: #d9b871; --env-ink: #f6ecd4; --env-muted: #a8997a;
  --env-font: "Outfit", system-ui, sans-serif;
}

/* Ablauf nach dem Tippen (Zeiten passen zu public/envelope.js):
     0–300 ms   Siegel verschwindet
    80–800 ms   Klappe klappt auf (Schlüsselbilder env-klappe)
   400–1120 ms  Karte gleitet GANZ aus der Tasche nach oben
  1120–2000 ms  Karte kommt nach vorn vor den Umschlag und wird groß,
                der Umschlag verblasst dahinter (Schlüsselbilder env-karte)
   ab 2500 ms   alles blendet weg, die Seite erscheint
   Bis 14.09.2026 hob sich die Karte nur um 62 % und blieb mit dem unteren
   Teil in der Tasche stecken – Mehmetcans Eindruck: „der Brief bleibt im
   Umschlag, dann ist schlagartig alles weg“. Klappe und Karte überlappen
   sich absichtlich: Die Karte startet, sobald die Klappe über die
   Senkrechte ist. */
.env-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: var(--env-bg);
  transition: opacity .6s ease;
  cursor: pointer;
}
.env-overlay.is-done { opacity: 0; pointer-events: none; }
.env-stage { text-align: center; transition: transform .75s cubic-bezier(.55,0,.35,1); }
/* Zum Schluss zoomt die Karte leicht auf den Betrachter zu, während die
   Ebene wegblendet – wirkt, als ginge man durch die Karte in die Seite. */
.env-overlay.is-done .env-stage { transform: scale(1.08); }

.envelope {
  position: relative; margin: 0 auto;
  width: min(80vw, 360px); height: min(52vw, 234px);
  perspective: 1000px;
  /* Wie groß die Karte vorn wird: am Handy so, dass sie gerade nicht an den
     Rand stößt (Karte = 90 % von 80vw → mal 1,25 ≈ 90vw). */
  --env-karte-gross: 1.4;
}
@media (max-width: 480px) { .envelope { --env-karte-gross: 1.25; } }

.env-back, .env-front, .env-flap, .env-card { position: absolute; }
.env-back {
  inset: 0; z-index: 1; border-radius: 9px;
  background: var(--env-paper);
  box-shadow: 0 30px 55px -28px rgba(60,42,32,.65);
}
.env-card {
  left: 5%; right: 5%; bottom: 6px; height: 88%; z-index: 2;
  background: var(--env-card); border-radius: 6px;
  box-shadow: 0 10px 22px -14px rgba(60,42,32,.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em;
  padding: 1em .8em;
}
/* Erst ganz heraus (hinter der Tasche, z-index 2), oben angekommen wechselt
   sie vor den Umschlag (z-index 6) und sinkt groß in die Mitte. Der Wechsel
   liegt genau am höchsten Punkt, wo nichts sie verdeckt – deshalb
   Schlüsselbilder statt Übergang, wie bei der Klappe. */
.env-overlay.is-open .env-card { animation: env-karte 1.6s .4s both; }
@keyframes env-karte {
  0%    { transform: translateY(0) scale(1); z-index: 2; animation-timing-function: cubic-bezier(.35,.05,.25,1); }
  45%   { transform: translateY(-118%) scale(1); z-index: 2; box-shadow: 0 10px 22px -14px rgba(60,42,32,.55); animation-timing-function: cubic-bezier(.45,0,.2,1); }
  45.1% { z-index: 6; }
  100%  { transform: translateY(-6%) scale(var(--env-karte-gross)); z-index: 6; box-shadow: 0 30px 60px -24px rgba(40,25,15,.55); }
}
/* Der Umschlag verblasst, während die Karte nach vorn kommt. Nur die
   Deckkraft – die Klappe hat ihre Drehung schon in env-klappe. */
.env-overlay.is-open .env-back,
.env-overlay.is-open .env-front { animation: env-verblassen .6s 1.25s both; }
@keyframes env-verblassen { to { opacity: 0; } }
.env-card-eyebrow {
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--env-accent-text, var(--env-accent)); font-weight: 700;
}
.env-card-names {
  font-family: var(--env-font);
  font-size: clamp(1.3rem, 5vw, 1.9rem); line-height: 1.1; color: var(--env-ink);
}
.env-card-date { font-size: .82rem; font-weight: 600; color: var(--env-muted); letter-spacing: .03em; }

.env-front {
  inset: 0; z-index: 3; border-radius: 9px;
  background: var(--env-front);
  /* V-förmige Oberkante wie bei einer echten Umschlagtasche */
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  top: 0; left: 0; right: 0; height: 52%; z-index: 4;
  background: var(--env-flap);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  /* Kein will-change und kein backface-visibility hier: beides hebt das
     Element auf eine eigene Ebene, und dabei ging die Freistellung der
     benachbarten Tasche verloren – die V-Kante des Umschlags verschwand. */
}
/* Schatten auf der Klappe: dunkelt beim Aufklappen nach und bleibt danach
   leicht dunkel – man sieht dann die Innenseite des Umschlags. */
.env-flap::after {
  content: ""; position: absolute; inset: 0;
  background: var(--env-shade, rgba(70,45,30,.22)); opacity: 0;
}
/* Schlüsselbilder statt eines einfachen Übergangs: Nur so fällt der Wechsel
   „Klappe vor der Karte → hinter der Karte" (z-index) genau auf die
   Senkrechte. Vorher lag er wegen der Beschleunigungskurve bei etwa 110°,
   und die Rückseite der Klappe lag kurz sichtbar über der Karte. Erste
   Hälfte beschleunigt, zweite bremst – zusammen eine durchgehende Bewegung. */
.env-overlay.is-open .env-flap { animation: env-klappe .72s .08s both, env-verblassen .6s 1.25s both; }
.env-overlay.is-open .env-flap::after { animation: env-klappe-schatten .72s .08s both; }
@keyframes env-klappe {
  0%    { transform: rotateX(0deg);    z-index: 4; animation-timing-function: cubic-bezier(.5,0,.9,.55); }
  50%   { transform: rotateX(-90deg);  z-index: 4; animation-timing-function: cubic-bezier(.1,.45,.4,1); }
  50.1% { z-index: 0; }
  100%  { transform: rotateX(-180deg); z-index: 0; }
}
@keyframes env-klappe-schatten {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: .55; }
}

.env-seal {
  top: 44%; left: 50%; position: absolute; z-index: 5;
  width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--env-seal);
  color: var(--env-seal-ink); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 12px -4px rgba(60,20,10,.65);
  transition: opacity .25s ease, transform .3s cubic-bezier(.5,0,.75,0);
}
.env-overlay.is-open .env-seal { opacity: 0; transform: scale(.6); }
/* Initialen oder ein längeres Zeichen brauchen etwas weniger Schrift, damit
   sie im runden Siegel bleiben (lib/umschlag.js). */
.env-seal-text { font-size: .8rem; font-weight: 700; letter-spacing: .02em; font-family: var(--env-font); }
.env-mini .env-seal-text { font-size: .5rem; }

.env-open {
  margin-top: 2.4rem; background: none; border: none;
  font-size: .85rem; letter-spacing: .05em; color: var(--env-muted); font-weight: 600;
  animation: env-pulse 2.4s ease-in-out infinite;
}
.env-open::after { content: ""; display: block; height: 1px; background: var(--env-accent); opacity: .5; margin-top: .45em; }
.env-overlay.is-open .env-open { opacity: 0; transition: opacity .3s ease; }
@keyframes env-pulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .env-open { animation: none; }
  .envelope, .env-card, .env-flap, .env-seal { transition: none; }
  .env-overlay.is-open .env-flap, .env-overlay.is-open .env-flap::after,
  .env-overlay.is-open .env-card, .env-overlay.is-open .env-back, .env-overlay.is-open .env-front { animation-duration: 1ms; animation-delay: 0s; }
}

/* Zum Zurücksetzen ohne Rückwärts-Animation (Vorschau im Panel). */
.env-overlay.env-sofort, .env-overlay.env-sofort * { transition: none !important; animation: none !important; }

/* Verkleinerte, wiederholbare Fassung im Panel neben dem Schalter. Erbt die
   gesamte Optik und den Ablauf von oben – überschrieben wird nur, was mit
   "bildschirmfüllend" zu tun hat. Sie blendet am Ende nicht weg, sondern
   klappt wieder zu (siehe public/dashboard.js). */
.env-setting { display: grid; grid-template-columns: 1fr 260px; gap: 1.75rem; align-items: start; }
@media (max-width: 780px) { .env-setting { grid-template-columns: 1fr; } }
.env-setting-preview { text-align: center; }
.env-setting-preview .btn { margin-top: .9rem; }

.env-overlay.env-inline {
  position: static; inset: auto; z-index: auto; overflow: hidden;
  /* Umschlag sitzt unten, darüber bleibt Platz für die herausgleitende
     Karte – sonst würde sie am oberen Rand abgeschnitten. */
  height: 224px; align-items: flex-end; padding: 0 1rem 1.4rem;
  border-radius: 14px; border: 1px solid #eee6db; cursor: pointer;
  transition: none;
}
.env-inline .envelope { width: 190px; height: 124px; }
.env-inline.is-open .envelope { transform: translateY(6px); }
.env-inline .env-card { padding: .5em .4em; gap: .15em; }
.env-inline .env-card-eyebrow { font-size: .5rem; letter-spacing: .16em; }
.env-inline .env-card-names { font-size: 1rem; }
.env-inline .env-card-date { font-size: .55rem; }
.env-inline .env-seal { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: .65rem; }

/* ==========================================================================
   Theme "Konfetti & Farbe" – für Geburtstage. Bunt, rund, verspielt.
   ========================================================================== */
.theme-confetti .w-hero:not(.has-image) {
  background:
    radial-gradient(circle at 12% 18%, rgba(224,68,124,.16), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(255,196,61,.22), transparent 40%),
    radial-gradient(circle at 78% 88%, rgba(64,196,180,.16), transparent 42%),
    #fffaf5;
}
.theme-confetti .w-hero h1 { letter-spacing: -.01em; }
.theme-confetti .w-section-head .eyebrow { letter-spacing: .16em; }
.theme-confetti .tl-item { background: #fff; border-radius: 22px; padding: 1.2rem 1.4rem; margin-bottom: 1rem; box-shadow: 0 12px 26px -20px rgba(60,40,50,.45); }
.theme-confetti .tl-item::before { display: none; }
.theme-confetti .tl-dot { width: 16px; height: 16px; margin-top: 4px; }
.theme-confetti .tl-item:nth-child(3n+1) .tl-dot { background: #e0447c; }
.theme-confetti .tl-item:nth-child(3n+2) .tl-dot { background: #ffc43d; }
.theme-confetti .tl-item:nth-child(3n) .tl-dot { background: #40c4b4; }
.theme-confetti .info-card { background: #fff; border: 2px solid var(--accent-soft); border-radius: 24px; }
.theme-confetti .faq-item { background: #fff; border-radius: 20px; border-bottom: none; padding: 1.1em 1.3em; box-shadow: 0 8px 20px -18px rgba(60,40,50,.4); }
.theme-confetti .w-carousel-viewport { border-radius: 24px; }
.theme-confetti .rsvp-card { border-radius: 28px; box-shadow: 0 18px 44px -26px rgba(224,68,124,.55); }
.theme-confetti .maps-btn { border-radius: 999px; }

/* Konfetti-Schnipsel im Hero – rein dekorativ (THEME_EXTRAS in views/public.js) */
.w-hero .w-confetti { position: absolute; width: 11px; height: 16px; border-radius: 3px; opacity: .85; animation: w-fall 7s ease-in-out infinite; pointer-events: none; }
.w-hero .w-confetti.c1 { top: 14%; left: 9%;  background: #e0447c; transform: rotate(18deg);  animation-delay: .1s; }
.w-hero .w-confetti.c2 { top: 22%; right: 12%; background: #ffc43d; transform: rotate(-24deg); animation-delay: 1.3s; }
.w-hero .w-confetti.c3 { bottom: 24%; left: 15%; background: #40c4b4; transform: rotate(38deg); animation-delay: .7s; }
.w-hero .w-confetti.c4 { bottom: 18%; right: 10%; background: #7b6cf6; transform: rotate(-12deg); animation-delay: 2.1s; }
.w-hero .w-confetti.c5 { top: 44%; left: 5%;  background: #ffc43d; transform: rotate(52deg);  animation-delay: 1.7s; }
.w-hero .w-confetti.c6 { top: 38%; right: 6%; background: #e0447c; transform: rotate(-40deg); animation-delay: .4s; }
@keyframes w-fall { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
@media (max-width: 700px) { .w-hero .w-confetti { display: none; } }
@media (prefers-reduced-motion: reduce) { .w-hero .w-confetti { animation: none; } }

/* ==========================================================================
   Theme "Neon & Nacht" – für runde Geburtstage und Partys. Als einziges
   Design durchgehend dunkel, deshalb müssen hier auch die Textfarben der
   Grundgestaltung überschrieben werden, nicht nur der Hero.
   ========================================================================== */
.theme-neon { color: #e9e4f5; }
.theme-neon .w-hero:not(.has-image) {
  background:
    radial-gradient(ellipse at 22% 20%, rgba(246,55,165,.28), transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(34,211,238,.22), transparent 55%),
    #0d0a1a;
  color: #f4f0ff;
}
.theme-neon .w-hero h1 {
  text-shadow: 0 0 18px rgba(246,55,165,.65), 0 0 42px rgba(246,55,165,.35);
  letter-spacing: -.01em;
}
.theme-neon .w-hero .date, .theme-neon .w-hero .countdown { color: #e9e4f5; }
.theme-neon .w-section { background: #120e21; border-top: 1px solid rgba(255,255,255,.07); }
.theme-neon .w-section.alt { background: #171130; }
.theme-neon .w-section-head h2 { color: #f4f0ff; }
.theme-neon .w-story, .theme-neon .tl-item .loc, .theme-neon .tl-item p.desc,
.theme-neon .faq-item p, .theme-neon .info-card p { color: #b3aac9; }
.theme-neon .tl-item h3, .theme-neon .faq-item h3, .theme-neon .info-card h3 { color: #f4f0ff; }
.theme-neon .tl-item::before { background: rgba(255,255,255,.12); }
.theme-neon .tl-dot { box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(246,55,165,.6); }
.theme-neon .info-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }
.theme-neon .faq-item { border-bottom-color: rgba(255,255,255,.09); }
.theme-neon .maps-btn { background: rgba(246,55,165,.16); color: #ff9ad4; }
.theme-neon .maps-btn-alt { background: rgba(34,211,238,.14); color: #7fe3f3; }
.theme-neon .rsvp-card {
  background: #1b1436; color: #e9e4f5; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 50px -18px rgba(246,55,165,.6);
}
.theme-neon .rsvp-card .field label { color: #b3aac9; }
.theme-neon .rsvp-card .hint, .theme-neon .rsvp-card .guest-row-label { color: #9187ab; }
.theme-neon .rsvp-card input, .theme-neon .rsvp-card select, .theme-neon .rsvp-card textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #f4f0ff;
}
.theme-neon .rsvp-card input:focus, .theme-neon .rsvp-card select:focus, .theme-neon .rsvp-card textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(246,55,165,.22);
}
/* Das aufgeklappte Auswahlmenü zeichnet der Browser selbst und nimmt dafür
   seinen eigenen hellen Hintergrund – die geerbte helle Schrift wäre darauf
   unlesbar. Deshalb bekommen die Einträge eigene Farben. */
.theme-neon .rsvp-card option { background: #1b1436; color: #f4f0ff; }
.theme-neon .rsvp-card .btn-primary { box-shadow: 0 0 26px -6px rgba(246,55,165,.8); }
.theme-neon .w-footer { color: #8f86a8; }
/* Leuchtende Linie unter dem Hero (THEME_EXTRAS in views/public.js) */
.theme-neon .w-glow {
  height: 2px; background: linear-gradient(90deg, transparent, #f637a5, #22d3ee, transparent);
  box-shadow: 0 0 16px rgba(246,55,165,.8);
}

/* ==========================================================================
   Theme "Retro & warm" – 70er-Anmutung: Sonnenstrahlen, fette Slab-Serife,
   harte Schatten ohne Weichzeichner.
   ========================================================================== */
.theme-retro .w-hero:not(.has-image) {
  background:
    repeating-conic-gradient(from 0deg at 50% 118%,
      rgba(210,96,26,.13) 0deg 7deg, transparent 7deg 14deg),
    linear-gradient(180deg, #fdf3e3 0%, #f8e5c8 100%);
}
.theme-retro .w-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.02; }
.theme-retro .w-section-head h2 { font-size: clamp(1.5rem, 2.8vw, 1.95rem); }
.theme-retro .tl-item h3, .theme-retro .info-card h3, .theme-retro .faq-item h3 { font-size: 1.02rem; letter-spacing: .01em; }
.theme-retro .tl-item {
  background: #fffaf0; border: 2px solid #2f2013; border-radius: 14px;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem; box-shadow: 5px 5px 0 #2f2013;
}
.theme-retro .tl-item::before { display: none; }
.theme-retro .tl-dot { width: 15px; height: 15px; border: 2px solid #2f2013; margin-top: 4px; }
.theme-retro .info-card { background: #fffaf0; border: 2px solid #2f2013; border-radius: 14px; box-shadow: 5px 5px 0 #2f2013; }
.theme-retro .faq-item { background: #fffaf0; border: 2px solid #2f2013; border-radius: 14px; border-bottom: 2px solid #2f2013; padding: 1.1em 1.3em; margin-bottom: 1rem; }
.theme-retro .w-carousel-viewport { border-radius: 14px; border: 2px solid #2f2013; }
.theme-retro .rsvp-card { background: #fffaf0; border: 2px solid #2f2013; border-radius: 18px; box-shadow: 7px 7px 0 #2f2013; }
.theme-retro .maps-btn { border: 2px solid #2f2013; border-radius: 999px; }
/* Sonnenstrahlen-Trenner unter dem Hero (THEME_EXTRAS in views/public.js) */
.theme-retro .w-sun {
  width: 120px; height: 26px; margin: 1.2em auto 0;
  background: repeating-conic-gradient(from 180deg at 50% 100%,
    var(--accent) 0deg 9deg, transparent 9deg 18deg);
}

/* ==========================================================================
   Theme „Orientalisch & Gold" – Petrol, Creme und Gold, Bögen und Ornamente.
   Für türkische, arabische und persische Feiern (und alle, die es festlich
   mögen). Alle Ornamente sind mit CSS gezeichnet: nichts nachzuladen, in
   jeder Größe scharf.
   ========================================================================== */
.theme-orient .w-hero:not(.has-image) {
  /* Grundfarbe zusätzlich zum Verlauf: Sie greift, wenn ein Browser den
     Verlauf nicht kennt – und Prüfwerkzeuge rechnen den Kontrast richtig. */
  background-color: #0b4442;
  background-image:
    radial-gradient(circle at 50% 118%, rgba(185,143,46,.22), transparent 62%),
    linear-gradient(180deg, #11605d 0%, #0b4442 100%);
  color: #fdf6e6;
  border-bottom-left-radius: 46% 14%;
  border-bottom-right-radius: 46% 14%;
}
.theme-orient .w-hero:not(.has-image) .eyebrow { color: #e8c877; }
.theme-orient .w-hero:not(.has-image) h1,
.theme-orient .w-hero:not(.has-image) .date { color: #fdf6e6; }
.theme-orient .w-hero:not(.has-image) p { color: #efe2c8; }
.theme-orient .w-hero:not(.has-image) .countdown .n { color: #fdf6e6; }
.theme-orient .w-hero:not(.has-image) .countdown .l { color: #cdb37c; }
/* Goldornament unter dem Titel: drei Rauten zwischen zwei feinen Linien. */
.w-hero .w-ornament { display: flex; align-items: center; justify-content: center; gap: .45em; margin: .1em auto 1.1em; }
.w-hero .w-ornament i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.w-hero .w-ornament i:nth-child(2) { width: 15px; height: 15px; }
.w-hero .w-ornament::before, .w-hero .w-ornament::after { content: ""; width: clamp(40px, 12vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.w-hero .w-ornament::after { background: linear-gradient(90deg, var(--gold), transparent); }
.theme-orient .w-section.alt { background: #f6ecd9; }
.theme-orient .w-section-head .eyebrow { letter-spacing: .24em; }
/* Doppelrahmen in Gold – das Ornamentale steckt im Rahmen, nicht im Muster. */
.theme-orient .info-card, .theme-orient .faq-item {
  background: #fffdf6; border: 1px solid rgba(185,143,46,.5); border-radius: 4px 18px 4px 18px;
  box-shadow: 0 0 0 4px #fffdf6, 0 0 0 5px rgba(185,143,46,.22);
  padding: 1.15em 1.35em; margin-bottom: 1.1rem;
}
.theme-orient .faq-item { border-bottom: 1px solid rgba(185,143,46,.5); }
.theme-orient .tl-item::before { background: linear-gradient(180deg, rgba(185,143,46,.55), rgba(185,143,46,.15)); }
.theme-orient .tl-dot { width: 13px; height: 13px; border-radius: 2px; transform: rotate(45deg); background: var(--gold); margin-top: 5px; }
.theme-orient .maps-btn { background: rgba(15,93,90,.1); color: var(--accent-text); border-radius: 4px 12px 4px 12px; }
.theme-orient .maps-btn-alt { background: rgba(185,143,46,.16); color: #8a6a1c; }
.theme-orient .rsvp-card {
  background: #fffdf6; border-radius: 6px 26px 6px 26px;
  box-shadow: 0 0 0 5px #fffdf6, 0 0 0 6px rgba(185,143,46,.35), 0 20px 50px -30px rgba(11,68,66,.6);
}
.theme-orient .rsvp-card .btn-primary { border-radius: 4px 16px 4px 16px; }
.theme-orient .w-carousel-viewport { border-radius: 6px 26px 6px 26px; }
.theme-orient .w-dc-punkt { box-shadow: 0 0 0 1px rgba(185,143,46,.45); }

/* ==========================================================================
   Theme „Botanisch & Aquarell" – Salbei auf Weiß, weiche Farbwolken,
   kursive Serife. Der ruhigste der zehn Entwürfe.
   ========================================================================== */
.theme-botanik .w-hero:not(.has-image) {
  background-color: #fbfdf9;
  background-image:
    radial-gradient(56% 46% at 12% 6%, rgba(139,171,120,.55), transparent 68%),
    radial-gradient(46% 40% at 90% 18%, rgba(198,216,177,.7), transparent 70%),
    radial-gradient(42% 36% at 74% 94%, rgba(238,228,199,.85), transparent 68%),
    radial-gradient(38% 30% at 30% 88%, rgba(168,195,150,.4), transparent 70%),
    #fbfdf9;
}
.theme-botanik .w-hero h1 { font-style: italic; font-weight: 500; letter-spacing: .005em; }
.theme-botanik .w-section-head h2 { font-style: italic; font-weight: 500; }
.theme-botanik .w-section.alt { background: #f4f7f0; }
/* Zweig unter dem Titel: eine feine Linie mit zwei Blättern an den Enden. */
.w-hero .w-zweig { position: relative; width: 150px; height: 1px; background: var(--accent); margin: .6em auto 1.2em; opacity: .7; }
.w-hero .w-zweig::before, .w-hero .w-zweig::after {
  content: ""; position: absolute; top: -6px; width: 22px; height: 12px;
  background: var(--accent); opacity: .55; border-radius: 0 100% 0 100%;
}
.w-hero .w-zweig::before { left: -14px; transform: rotate(-18deg); }
.w-hero .w-zweig::after { right: -14px; transform: rotate(162deg); }
/* Blätter, die im Kopf schweben – wie bei Boho, nur botanisch. */
.w-hero .w-blatt {
  position: absolute; width: 46px; height: 24px; background: var(--accent); opacity: .16;
  border-radius: 0 100% 0 100%; animation: w-schweben 9s ease-in-out infinite; pointer-events: none;
}
.w-hero .w-blatt.b1 { top: 14%; left: 8%; transform: rotate(-25deg); }
.w-hero .w-blatt.b2 { top: 24%; right: 10%; transform: rotate(160deg); animation-delay: 1.6s; }
.w-hero .w-blatt.b3 { bottom: 22%; left: 13%; transform: rotate(35deg); animation-delay: 3.1s; }
.w-hero .w-blatt.b4 { bottom: 16%; right: 14%; transform: rotate(200deg); animation-delay: 4.4s; }
@keyframes w-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 700px) { .w-hero .w-blatt { display: none; } }
@media (prefers-reduced-motion: reduce) { .w-hero .w-blatt { animation: none; } }
.theme-botanik .info-card, .theme-botanik .faq-item {
  background: #fff; border: 1px solid #e4ebdd; border-radius: 20px; box-shadow: 0 14px 30px -26px rgba(80,107,66,.5);
  padding: 1.15em 1.35em; margin-bottom: 1rem;
}
.theme-botanik .faq-item { border-bottom: 1px solid #e4ebdd; }
.theme-botanik .tl-dot { background: var(--accent); box-shadow: 0 0 0 5px rgba(111,143,95,.14); }
.theme-botanik .maps-btn { background: #eef3e9; color: var(--accent-text); border-radius: 999px; }
.theme-botanik .maps-btn-alt { background: #f4f1e6; color: #6d6242; }
.theme-botanik .rsvp-card { border-radius: 26px; box-shadow: 0 20px 50px -34px rgba(80,107,66,.55); }
.theme-botanik .w-carousel-viewport { border-radius: 22px; }

/* ==========================================================================
   Theme „Minimal & klar" – nur Typografie, Haarlinien, viel Weißraum.
   Keine Schatten, keine Rundungen: alles, was schmückt, ist hier weggelassen.
   ========================================================================== */
.theme-minimal .w-hero:not(.has-image) { background: #fff; }
.theme-minimal .w-hero .eyebrow { letter-spacing: .34em; font-size: .72rem; color: #6b6b6b; }
.theme-minimal .w-hero h1 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(2.6rem, 7.4vw, 5rem); }
.theme-minimal .w-hero .date { letter-spacing: .1em; text-transform: uppercase; font-size: .95rem; }
.w-hero .w-haarlinie { width: 64px; height: 1px; background: #1a1a1a; margin: 1.1em auto; }
.theme-minimal .w-section { border-top: 1px solid #ececec; }
.theme-minimal .w-section.alt { background: #fafafa; }
.theme-minimal .w-section-head .eyebrow { letter-spacing: .3em; font-size: .7rem; color: #6b6b6b; }
.theme-minimal .w-section-head h2 { font-weight: 800; letter-spacing: -.025em; }
.theme-minimal .info-card, .theme-minimal .faq-item, .theme-minimal .rsvp-card, .theme-minimal .w-carousel-viewport {
  background: #fff; border: 1px solid #e6e6e6; border-radius: 0; box-shadow: none;
}
.theme-minimal .info-card, .theme-minimal .faq-item { padding: 1.2em 1.35em; margin-bottom: .9rem; }
.theme-minimal .faq-item { border-bottom: 1px solid #e6e6e6; }
.theme-minimal .tl-item::before { background: #e6e6e6; }
.theme-minimal .tl-dot { width: 9px; height: 9px; border-radius: 0; margin-top: 7px; }
.theme-minimal .tl-time { letter-spacing: .12em; }
.theme-minimal .maps-btn { background: transparent; border: 1px solid #1a1a1a; border-radius: 0; color: #1a1a1a; }
.theme-minimal .maps-btn-alt { border-color: #bdbdbd; color: #4a4a4a; }
.theme-minimal .rsvp-card .btn-primary,
.theme-minimal .wl-item, .theme-minimal .wl-form summary, .theme-minimal .wl-tat .btn,
.theme-minimal .rsvp-kalender .btn { border-radius: 0; }
.theme-minimal .rsvp-card input, .theme-minimal .rsvp-card select, .theme-minimal .rsvp-card textarea { border-radius: 0; }
.theme-minimal .w-dc-punkt { border-radius: 0; }

/* ==========================================================================
   Theme „Art déco & Gold" – Gold auf Dunkelgrün, geometrische Fächer.
   Zweites durchgehend dunkles Design nach Neon: auch hier müssen die
   Textfarben der Grundgestaltung überschrieben werden, nicht nur der Hero.
   ========================================================================== */
.theme-deko { color: #e6dcc2; }
.theme-deko .w-hero:not(.has-image) {
  background-color: #0c2a24;
  background-image:
    repeating-conic-gradient(from 180deg at 50% 100%, rgba(217,184,113,.12) 0deg 2.5deg, transparent 2.5deg 9deg),
    linear-gradient(180deg, #12463c 0%, #0c2a24 100%);
  color: #f6ecd4;
}
.theme-deko .w-hero .eyebrow { color: var(--gold); letter-spacing: .3em; }
.theme-deko .w-hero h1 { color: #f6ecd4; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: clamp(2rem, 5.4vw, 3.6rem); }
.theme-deko .w-hero .date { color: #e6dcc2; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; }
.theme-deko .w-hero p, .theme-deko .w-hero .countdown .n { color: #f0e6cd; }
.theme-deko .w-hero .countdown .l { color: #b8a271; }
/* Fächer: goldene Strahlen wie ein Sonnenaufgang der Zwanziger. */
.w-hero .w-faecher {
  width: 168px; height: 46px; margin: .7em auto 1.3em;
  background: repeating-conic-gradient(from 180deg at 50% 100%, var(--gold) 0deg 2.2deg, transparent 2.2deg 8deg);
  mask-image: radial-gradient(circle at 50% 100%, #000 96%, transparent 97%);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 96%, transparent 97%);
}
.theme-deko .w-section { background: #0f302a; border-top: 1px solid rgba(217,184,113,.18); }
.theme-deko .w-section.alt { background: #123830; }
.theme-deko .w-section-head .eyebrow { color: var(--gold); letter-spacing: .3em; }
.theme-deko .w-section-head h2 { color: #f6ecd4; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.theme-deko .w-story, .theme-deko .tl-item .loc, .theme-deko .tl-item p.desc,
.theme-deko .faq-item p, .theme-deko .info-card p { color: #cfc3a4; }
.theme-deko .tl-item h3, .theme-deko .faq-item h3, .theme-deko .info-card h3 { color: #f6ecd4; letter-spacing: .04em; text-transform: uppercase; font-size: 1rem; }
.theme-deko .tl-item::before { background: rgba(217,184,113,.28); }
.theme-deko .tl-dot { background: var(--gold); border-radius: 0; width: 12px; height: 12px; transform: rotate(45deg); margin-top: 5px; }
.theme-deko .tl-time { color: var(--gold); letter-spacing: .1em; }
.theme-deko .info-card, .theme-deko .faq-item {
  background: rgba(217,184,113,.06); border: 1px solid rgba(217,184,113,.35); border-radius: 0;
  padding: 1.2em 1.35em; margin-bottom: 1rem;
  box-shadow: inset 0 0 0 4px rgba(15,48,42,1), inset 0 0 0 5px rgba(217,184,113,.2);
}
.theme-deko .faq-item { border-bottom: 1px solid rgba(217,184,113,.35); }
.theme-deko .maps-btn { background: rgba(217,184,113,.14); color: #e9d49a; border-radius: 0; }
.theme-deko .maps-btn-alt { background: rgba(255,255,255,.06); color: #cfc3a4; }
.theme-deko .rsvp-card {
  background: #123830; color: #e6dcc2; border: 1px solid rgba(217,184,113,.35); border-radius: 0;
  box-shadow: inset 0 0 0 5px #123830, inset 0 0 0 6px rgba(217,184,113,.25);
}
.theme-deko .rsvp-card .field label { color: #cfc3a4; letter-spacing: .06em; }
.theme-deko .rsvp-card .hint, .theme-deko .rsvp-card .guest-row-label { color: #a8997a; }
.theme-deko .rsvp-card input, .theme-deko .rsvp-card select, .theme-deko .rsvp-card textarea {
  background: #0f302a; color: #f6ecd4; border: 1px solid rgba(217,184,113,.3); border-radius: 0;
}
.theme-deko .rsvp-card input:focus, .theme-deko .rsvp-card select:focus, .theme-deko .rsvp-card textarea:focus {
  border-color: var(--gold); outline: none;
}
/* Wie bei Neon: das aufgeklappte Menü zeichnet der Browser selbst. */
.theme-deko .rsvp-card option { background: #123830; color: #f6ecd4; }
.theme-deko .rsvp-card .btn-primary { color: #0f302a; font-weight: 800; }
.theme-deko .rsvp-kalender .btn { border-color: rgba(217,184,113,.5); color: #e6dcc2; }
.theme-deko .wl-item, .theme-deko .wl-form summary, .theme-deko .wl-tat .btn { border-radius: 0; }
.theme-deko .wl-link { color: #e9d49a; }
.theme-deko .w-footer { color: #a8997a; }
.theme-deko .w-carousel-viewport { border-radius: 0; border: 1px solid rgba(217,184,113,.3); }
.theme-deko .w-dc-farben li { color: #cfc3a4; }
.theme-deko .w-dc-punkt { box-shadow: 0 0 0 1px rgba(217,184,113,.4); }
.theme-deko .w-dc-stil { color: var(--gold); }

.gate-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.gate-card { max-width: 380px; text-align: center; }
.gate-card h1 { font-size: 1.4rem; }

/* ==========================================================================
   Mehrsprachige Einladung (lib/sprachen.js, lib/uebersetzung.js)
   Zwei Teile: die einmalige Frage beim Öffnen und der kleine Umschalter,
   der auf der Seite bleibt. Beide sind reine Links – ohne JavaScript.
   ========================================================================== */

/* Liegt über dem Umschlag (z-index 200), damit ein Gast, der kein Deutsch
   liest, gar nicht erst suchen muss. */
.w-sprachwahl {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(26,18,32,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.w-sprachwahl-karte {
  background: #fff; border-radius: 26px; padding: 2rem 1.8rem 1.8rem;
  text-align: center; max-width: 420px; width: 100%;
  box-shadow: 0 30px 70px -30px rgba(20,8,25,.6);
}
.w-sprachwahl-globus { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: .4rem; }
.w-sprachwahl-titel { display: block; font-family: var(--display); font-size: 1.35rem; color: var(--ink); margin-bottom: .2rem; }
.w-sprachwahl-karte p { color: #6f6779; font-size: .95rem; margin: 0 0 1.3em; }
.w-sprachwahl-knoepfe { display: grid; gap: .6em; }
.w-sprachwahl-knoepfe .btn { min-height: 52px; font-size: 1.05rem; }

/* Umschalter auf der Seite: klein oben rechts, über dem Kopfbild. */
.w-page { position: relative; }
.w-sprachen {
  position: absolute; top: 12px; right: 12px; z-index: 30;
  display: flex; gap: .15em; align-items: center;
  background: rgba(255,255,255,.92); border-radius: 999px; padding: .25em;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
}
.w-sprachen a, .w-sprachen span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 .85em; border-radius: 999px;
  font: 600 .82rem/1 Inter, system-ui, sans-serif; color: #4a4352; text-decoration: none;
}
.w-sprachen a:hover { background: rgba(26,18,32,.07); }
/* Die aktive Sprache in der dunkleren Schriftfassung der Akzentfarbe: weiße
   Schrift darauf ist auf jedem Design lesbar (die helle --accent reicht bei
   Modern, Konfetti und Neon nicht für 4,5:1). */
.w-sprachen .ist-aktiv { background: var(--accent-text, var(--accent)); color: #fff; }
.theme-neon .w-sprachen .ist-aktiv { background: #6b1449; }
/* Auf der Passwort-Tür steht er im Fluss, nicht über dem Bild. */
.w-sprachen.gate-sprachen { position: static; display: inline-flex; margin-bottom: 1.2em; }
@media (max-width: 720px) {
  .w-sprachen { top: 8px; right: 8px; }
  .w-sprachen a, .w-sprachen span { min-height: 40px; padding: 0 .8em; }
}

/* ==========================================================================
   Handy zuerst
   Die meisten Gäste öffnen die Einladung auf dem Telefon, oft direkt aus
   WhatsApp. Dieser Block räumt die drei Dinge auf, die dort weh tun:
   zu kleine Tippziele, ein Hero der eineinhalb Bildschirme füllt, und eine
   Tabelle, die zum Seitwärtsscrollen zwingt.
   ========================================================================== */
@media (max-width: 720px) {
  /* Fingerkuppen brauchen rund 44 px. Alles Antippbare wird darauf gehoben –
     über min-height statt über Innenabstände, das trifft zuverlässiger. */
  .btn { padding: .85em 1.5em; }
  .btn, .btn-sm, .maps-btn, .demo-tab, .demo-bar-pill { min-height: 44px; }
  .btn-sm { padding: .7em 1.1em; font-size: .88rem; }
  .maps-btn { padding: .5em 1.1em; font-size: .84rem; }
  .demo-tab { padding: .5em 1.25em; }
  .demo-bar-pill { display: inline-flex; align-items: center; padding: .5em 1.1em; }
  .nav-links a.link { padding: .7em 0; }
  .env-open, .hero-replay { padding: .8em 1.2em; }
  .faq-accordion summary { padding-top: 1.15em; padding-bottom: 1.15em; }
  .theme-option { padding: 1.1rem .8rem; }

  /* Abschnitte enger setzen – auf dem Handy zählt jeder Bildschirm. */
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 2rem; }
  .cta-band { padding: 56px 0; }

  /* Vergleich: das Raster bleibt, nur enger. Spaltennamen kurz, Zeilen-
     beschriftung schmaler, Symbole etwas kleiner. */
  .compare-table { font-size: .82rem; }
  .compare-table th, .compare-table td { padding: .7em .25em; }
  .compare-table thead th { font-size: .62rem; letter-spacing: .02em; }
  .compare-table thead th span { display: none; }
  .compare-table thead th::after { content: attr(data-short); }
  .compare-table tbody th { width: 46%; font-size: .82rem; padding-left: 0; line-height: 1.3; }
  .cmp-mark { width: 22px; height: 22px; font-size: .68rem; }
  .cmp-text { font-size: .7rem; }  .compare-note { margin-top: 1.5rem; }

  /* Funktionen: neun Karten untereinander waren 2246 px. Zwei Spalten mit
     kompakteren Karten halbieren das, ohne eine Funktion zu verstecken. */
  .feature-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .feature-card { padding: 1rem .9rem; border-radius: 14px; }
  .feature-card .icon { font-size: 1.25rem; margin-bottom: .35em; }
  .feature-card h3 { font-size: .92rem; margin-bottom: .3em; }
  .feature-card p { font-size: .8rem; line-height: 1.4; }

  /* Ablauf: vier Stationen nebeneinander statt untereinander. */
  .flow { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
  .flow-step { padding-top: 3rem; }
  .flow-step p { font-size: .84rem; }

  .price-card { padding: 1.4rem 1.2rem; }
  .price-card li { font-size: .85rem; }

  /* Panel: neun Reiter brachen auf drei Zeilen um und schoben das Formular
     nach unten. Jetzt eine Zeile zum Wischen. */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; }
  .dash-main { padding: 1.25rem 1rem 2rem; }

  /* Galerie: Pfeile und Punkte waren mit 9 bzw. 42 px kaum zu treffen.
     Der Punkt bleibt optisch klein, die antippbare Fläche wächst. */
  .w-carousel-arrow { width: 44px; height: 44px; }
  .w-carousel-dots { gap: 0; margin-top: .6em; }
  .w-carousel-dots button {
    width: 36px; height: 36px; border-radius: 50%; background: none; position: relative;
  }
  .w-carousel-dots button::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
    border-radius: 50%; background: #ddd3c6;
  }
  .w-carousel-dots button.active { background: none; }
  .w-carousel-dots button.active::after { background: var(--accent); }
}

/* Tablet (bis 860 px): Mit der großen Kopfzeile passen die drei Sprunglinks
   nicht mehr neben Logo und Knöpfe – bei 700 px ragte die Zeile 23 px über
   den Rand (Rundumcheck 14.09.2026). */
@media (max-width: 860px) {
  .nav-links .link-hide-mobile { display: none; }
}
@media (max-width: 640px) {
  /* Logo + zwei Aktionen passen sonst nicht nebeneinander und schieben die
     Kopfzeile über den linken Rand hinaus. Die Höhe bleibt trotzdem im
     antippbaren Bereich. */
  /* Seit der Bildmarke ist das Logo ~40 px breiter – ohne diese Stufe klebte
     „Anmelden“ direkt am Schriftzug und der Knopf ragte an den Rand. */
  .nav { gap: .75rem; padding-top: 14px; padding-bottom: 14px; }
  .nav .logo { font-size: 1.3rem; }
  .nav-links { gap: .75rem; }
  .nav-links a.link { font-size: .88rem; }
  .nav-links .btn-sm { padding: .82em .8em; font-size: .8rem; }
}
@media (max-width: 380px) {
  .nav { gap: .5rem; }
  .nav .logo { font-size: 1.05rem; }
  .nav-links { gap: .55rem; }
}

/* ==========================================================================
   Rechts-nach-links (Hocharabisch)
   --------------------------------------------------------------------------
   `dir="rtl"` setzt views/layout.js aus `richtung` des Sprachpakets
   (lib/sprachen.js). Der Fließtext spiegelt sich dadurch von selbst; hier
   stehen nur die Stellen, die eine feste Seite nennen.

   Betrifft ausschließlich die Gästeseite – der Kundenbereich und die
   Verwaltung bleiben deutsch und damit links-nach-rechts.
   ========================================================================== */

/* Sprachumschalter: oben rechts wird oben links. */
[dir="rtl"] .w-sprachen { right: auto; left: 12px; }
@media (max-width: 720px) {
  [dir="rtl"] .w-sprachen { right: auto; left: 8px; }
}

/* Ton-Knopf unten rechts wird unten links … */
[dir="rtl"] .w-ton-knopf { right: auto; left: 14px; }
/* … und „Jetzt antworten“ weicht dann nach rechts aus statt nach links. */
@media (max-width: 720px) {
  [dir="rtl"] body:has(.w-ton-knopf:not([hidden])) .w-zusage-knopf { left: auto; right: 14px; }
}

/* Laufband im Design „Modern“ läuft in Leserichtung mit. */
[dir="rtl"] .w-marquee div { animation-direction: reverse; }

/* Eine Uhrzeit bleibt in sich links-nach-rechts („14:30“, nicht „30:14“).
   `isolate` verhindert, dass die Zahlen mit dem arabischen Text ringsum die
   Plätze tauschen.
   Der Countdown bekommt das bewusst NICHT: Seine vier Felder sind eigene
   Elemente und sollen in Leserichtung stehen – auf Arabisch also Tage rechts
   außen, Sekunden links. Mit `direction: ltr` las man zuerst die Sekunden. */
[dir="rtl"] .tl-time {
  direction: ltr;
  unicode-bidi: isolate;
}
/* Die Zeitleiste ist ein Flexbox-Layout und dreht sich von selbst mit –
   hier ist bewusst nichts zu tun. */

/* Der Umschlag liegt außerhalb von .w-page und bekommt die Richtung deshalb
   über das <html>-Element – die Karte darin ist zentriert, hier ist nichts
   zu spiegeln. Vermerkt, damit niemand danach sucht. */

/* Rechtstexte (Impressum, Datenschutz, AGB, Widerruf) – ruhige Lesespalte. */
.recht-seite { max-width: 760px; padding-top: 3rem; padding-bottom: 4rem; }
.recht-seite h1 { margin-bottom: 1.2rem; }
.recht-seite h2 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
.recht-seite p, .recht-seite li { color: var(--body); line-height: 1.7; }
.recht-seite ul { padding-left: 1.2em; margin: .4em 0 1em; }
.recht-seite li { margin-bottom: .3em; }
.recht-seite code { background: var(--brand-soft, #f4eef5); padding: .1em .4em; border-radius: 5px; font-size: .88em; }
.recht-muster { border-left: 3px solid var(--line); margin: 1em 0; padding: .6em 0 .6em 1.2em; color: var(--muted); }
.recht-muster p { margin: 0 0 .7em; }
.recht-stand { margin-top: 2.5rem; }
.recht-nav { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .9rem; }

/* Gutscheincodes: Einlösen im Reiter „Freigabe“, Liste in der Verwaltung. */
.gs-einloesen { margin: 1rem 0 1.4rem; }
.gs-einloesen summary { cursor: pointer; font-weight: 600; color: var(--brand); min-height: 44px; display: flex; align-items: center; }
.gs-einloesen-feld { display: flex; gap: .6rem; flex-wrap: wrap; margin: .4rem 0; }
.gs-einloesen-feld input { flex: 1 1 14em; }
/* Eingetippte Codes groß und in fester Breite – der Platzhalter bleibt normal. */
.gs-einloesen-feld input, .gs-eingabe { text-transform: uppercase; letter-spacing: .06em; font-family: ui-monospace, Consolas, monospace; }
.gs-einloesen-feld input::placeholder, .gs-eingabe::placeholder { text-transform: none; letter-spacing: normal; font-family: inherit; }
.gs-code { font-family: ui-monospace, Consolas, monospace; font-weight: 700; letter-spacing: .05em; background: var(--brand-soft, #f4eef5); padding: .15em .45em; border-radius: 6px; }
.gs-gross { font-size: 1.2rem; margin: 0 .4em; }
.gs-neu { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.gs-neu .hint { flex-basis: 100%; }
.gs-liste { margin: .4em 0 0; padding-left: 1.1em; font-size: .85rem; }
.gs-einloesen .hint { font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.bald-badge { font-size: .7rem; vertical-align: middle; margin-left: .3em; white-space: nowrap; }
/* Cloud-Karte auf der Startseite, solange die Live-Galerie „bald“ ist
   (lib/funktionen.js): deutlich als „in Arbeit“ markiert, gedämpft. */
.addon-card.addon-bald { position: relative; border-style: dashed; }
.addon-bald .addon-head, .addon-bald .addon-list { opacity: .72; }
.addon-bald-band { display: inline-flex; align-items: center; gap: .4em; margin-bottom: 1rem; padding: .35em .85em; border-radius: 999px; background: #fff4d6; color: #7a5200; font-weight: 700; font-size: .85rem; }

/* Beispiel-Auswahl nach Anlass gruppiert (Startseite + Leiste /beispiel). */
.demo-gruppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin-bottom: 1.75rem; }
.demo-gruppe { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.demo-gruppe .demo-tabs { margin-bottom: 0; }
.demo-gruppe-titel { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.demo-bar-gruppe { font-size: 1.05rem; align-self: center; padding: 0 .15rem 0 .9rem; cursor: default; }
.demo-bar-gruppe:first-child { padding-left: 0; }