/* V2040 · Bausteine im früheren Design.
   Diese Elemente kamen erst nach dem früheren Design dazu und waren bisher nur im (abgeschalteten) Abzug-Design gestaltet.
   Hier in der Formensprache des früheren Designs: feine 1-px-Linien, schlanke Tasten, kleine Radien, Theme-Farben.
   :root:not(#v2040) hebt nur dort die Spezifität an, wo allgemeine Tastenregeln der Eventthemes (html[data-event-theme] button …) sonst gewinnen. */

/* ---------- Allgemein ---------- */
.v2-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ======================================================================
   Event-App (index.html)
   ====================================================================== */

/* Freigabe: schlanke Pillen im App-Stil (Markus 13.10.2026: „Schlank und hochwertige Knöpfe“).
   Sichtbar 34 px (Liste), 32 px (enge Rasterkachel, nur Symbol), 38 px (Großansicht); 1-px-Kontur, keine Vollfläche, kein Schatten.
   Fingerfläche 44 px über unsichtbaren Rand (::before), nicht über eine dickere Fläche. Farben nur aus Theme-Token. */
.staff-decide:empty{display:none}
.staff-decide{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0;padding:0}
:root:not(#v2040) .staff-decide button{position:relative;flex:none;min-width:0;width:auto;height:34px;min-height:34px;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px 0 12px;border-radius:999px;font-size:13px;font-weight:500;line-height:1;letter-spacing:.01em;white-space:nowrap;box-shadow:none;transform:none;background:transparent;transition:background-color .15s ease,border-color .15s ease}
:root:not(#v2040) .staff-decide button::before{content:'';position:absolute;inset:-5px -2px}
:root:not(#v2040) .staff-decide button svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root:not(#v2040) .staff-decide .staff-decide-approve{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 70%,transparent)}
:root:not(#v2040) .staff-decide .staff-decide-approve svg{color:var(--accent)}
:root:not(#v2040) .staff-decide .staff-decide-reject{background:transparent;color:color-mix(in srgb,var(--ink) 78%,transparent);border:1px solid var(--line);font-weight:400}
@media (hover:hover){:root:not(#v2040) .staff-decide .staff-decide-approve:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}:root:not(#v2040) .staff-decide .staff-decide-reject:hover{border-color:color-mix(in srgb,var(--ink) 40%,transparent)}}
:root:not(#v2040) .staff-decide button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Rasteransicht (3 Spalten): zwei kleine Pillen nebeneinander, nur Symbol – der Text bleibt für Screenreader, title zeigt ihn beim Zeigen */
html.experience-v2[data-staff-shell=ready] #gallery.gallery:not(.album-list) .media:has(.staff-decide:not(:empty)){grid-template-rows:auto auto}
html.experience-v2[data-staff-shell=ready] #gallery.gallery:not(.album-list) .media:has(.staff-decide:not(:empty)) .media-body{height:auto;min-height:44px}
html.experience-v2[data-staff-shell=ready] #gallery.gallery:not(.album-list) .media:has(.staff-decide:not(:empty)) .photo-social{display:none}
:root:not(#v2040) #gallery.gallery:not(.album-list) .staff-decide{flex-wrap:nowrap;justify-content:center;gap:6px;margin:6px 0 0}
:root:not(#v2040) #gallery.gallery:not(.album-list) .staff-decide button{flex:1 1 0;max-width:52px;height:32px;min-height:32px;padding:0}
:root:not(#v2040) #gallery.gallery:not(.album-list) .staff-decide button::before{inset:-6px -3px}
:root:not(#v2040) #gallery.gallery:not(.album-list) .staff-decide button svg{width:15px;height:15px}
#gallery.gallery:not(.album-list) .staff-decide button>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Fotoansicht (Veranstalter/Helfer): etwas höher, weiterhin nur textbreit */
dialog.photo-composer .staff-review-sheet{padding:4px 0 6px}
dialog.photo-composer .staff-review-sheet>p{margin:0 0 10px;color:var(--ink);font-size:14px;line-height:1.45}
:root:not(#v2040) dialog.photo-composer .staff-review-sheet .staff-decide button{height:38px;min-height:38px;padding:0 16px 0 14px}
:root:not(#v2040) dialog.photo-composer .staff-review-sheet .staff-decide button::before{inset:-3px -2px}
/* „Mehr“ unter einem Foto in der Liste (Ablehnen / Zurück in die Prüfung bei schon entschiedenen Fotos): dieselben schlanken Pillen */
html.experience-v2[data-event-theme][data-staff-shell=ready] .staff-photo-options .buttons{gap:8px}
html.experience-v2[data-event-theme][data-staff-shell=ready]:not(#v2040) .staff-photo-options .buttons>button{position:relative;width:auto;height:34px;min-height:34px;margin:5px 0;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;box-shadow:none;color:var(--ink);font-size:12px;font-weight:400;line-height:1;white-space:nowrap}
html.experience-v2[data-event-theme][data-staff-shell=ready]:not(#v2040) .staff-photo-options .buttons>button::before{content:'';position:absolute;inset:-5px -2px}
/* Schließen-Kreuz der Fotoansicht auch für Veranstalter und Helfer (für Gäste in guest-shell.css) */
:root:not(#v2040) dialog.photo-composer .photo-composer-dismiss{position:sticky;top:0;z-index:5;float:right;display:grid;place-items:center;width:36px;height:36px;min-height:36px;margin:-8px -8px 0 4px;padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:none;cursor:pointer}
dialog.photo-composer .photo-composer-dismiss svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
:root:not(#v2040) dialog.photo-composer>a.photo-download-secondary{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:transparent;box-shadow:none;color:var(--ink);font-size:13px;font-weight:400;text-decoration:underline;text-underline-offset:3px}

/* Hinweis mit „Rückgängig“ */
#message.social-notice.has-action:not(:empty){display:flex;align-items:center;gap:12px;padding-top:6px;padding-bottom:6px;padding-right:6px;text-align:left}
:root:not(#v2040) #message .message-undo{flex:none;min-height:44px;margin:0;padding:6px 12px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:none}

/* Upload-Liste: erfolgreiche Zeile */
#event>.upload-queue li.upload-success{font-weight:600}
#event>.upload-queue li.upload-success::before{content:"✓ ";color:var(--accent)}

/* Zähler wartender Fotos an „Galerie“ in der Helfer-/Veranstalter-Navigation */
.staff-bottom-nav [data-view=photos]{position:relative}
.staff-nav-count[hidden]{display:none}
.staff-nav-count:not([hidden]){position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:#b72238;color:#fff;font-size:10px;font-weight:700;line-height:1;letter-spacing:0;box-shadow:0 0 0 2px var(--paper,#fff)}

/* Hinweis „N Fotos warten auf dein Okay“: Beschriftung kam nach dem früheren Design dazu (dort war span ein runder Zähler) */
:root:not(#v2040)[data-staff-shell=ready] .staff-pending-badge:not([hidden]){display:flex;flex-direction:row;align-items:center;gap:6px;width:auto;height:auto;min-height:36px;padding:4px 10px;border:1px solid #e98b98a1;border-radius:18px;background:#b72238e6;color:#fff;font:600 12px/1.2 var(--app-font,inherit);white-space:nowrap}
:root:not(#v2040)[data-staff-shell=ready] .staff-pending-badge span{display:inline;width:auto;height:auto;border:0;border-radius:0;font:inherit}
:root:not(#v2040)[data-staff-shell=ready] .staff-pending-badge b{font-size:12px}
:root:not(#v2040)[data-staff-shell=ready] .staff-pending-badge svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Gestaltete Dateiauswahl: echtes Eingabefeld bleibt im Formular, nur unsichtbar */
:root:not(#v2040) input.file-picker-native{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0;max-width:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none;overflow:hidden;clip-path:inset(50%)}
label:has(>.file-picker-native){position:relative}
.file-picker{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 4px}
:root:not(#v2040) .file-picker-button{width:auto;min-height:44px;margin:0;padding:6px 14px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:13px;font-weight:400;box-shadow:none}
.file-picker-name{flex:1;min-width:0;font-size:12px;font-weight:400;color:var(--muted,currentColor);overflow-wrap:anywhere}

/* Paket-/Speicherdialog: Schließen oben rechts (wie beim QR-Dialog) */
:root:not(#v2040) dialog .dialog-dismiss{position:sticky;top:0;z-index:2;float:right;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:-9px -9px 0 4px;padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:none;cursor:pointer}
dialog .dialog-dismiss svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
/* Speicherdialog (ohne eigene Klasse) wie der Paketdialog .upgrade-dialog */
dialog:not([class]):has(>.dialog-dismiss){width:min(680px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink)}
dialog:not([class]):has(>.dialog-dismiss)::backdrop{background:#251c1980}

/* Challenge-Auswahl beim Hochladen: Tasten umbrechen sauber, „Mit Challenge“ wie die Haupttaste */

/* Sprache im Mehr-/Einstellungsbereich */
.language-setting-label{font-size:13px;font-weight:600;color:var(--ink)}

/* Gästebuch: Rückmeldung direkt unter dem Formular */
.guestbook-feedback:empty{display:none}
.guestbook-feedback:not(:empty){margin:8px 0 18px;padding:8px 12px;border-left:3px solid var(--accent);color:var(--ink);font-size:14px;line-height:1.45;scroll-margin:120px}

/* Helfer-QR-Dialog: Status mit reserviertem Platz, Schließen als ganze Zeile */
.staff-qr-dialog .staff-qr-status{min-height:1.4em;margin:8px 0 0;text-align:center;font-size:12px;color:var(--ink)}
.staff-qr-dialog .staff-qr-status:empty{display:block}
:root:not(#v2040) .staff-qr-dialog .staff-qr-close{display:flex;width:100%;min-height:44px;margin:8px 0 0;justify-content:center;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-size:12px;font-weight:400;box-shadow:none}

/* Gästeliste (Veranstalter, unter „Fotoarchiv & Pflege“) */
.guest-list-panel{margin:6px 0 14px}
.guest-list-panel>summary{min-height:44px;padding:10px 0;cursor:pointer}
.guest-list-count:empty{display:none}
.guest-list-count{display:inline-grid;vertical-align:2px;margin-left:8px;place-items:center;min-width:22px;height:20px;padding:0 6px;border:1px solid var(--line);border-radius:999px;color:var(--muted,currentColor);font-size:11px;font-weight:600;line-height:1}
.guest-list-status{margin:2px 0 8px;font-size:12px;line-height:1.45;color:var(--muted,currentColor)}
.guest-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.guest-list-row{display:flex;align-items:center;gap:10px;margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.guest-list-avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:13px;font-weight:600;line-height:1}
.guest-list-body{display:grid;gap:1px;min-width:0}
.guest-list-body strong{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.guest-list-meta{font-size:12px;line-height:1.35;color:var(--muted,currentColor)}

/* Kurze Einleitungen über Fotos */
.guest-photos-intro{margin:0;font-size:13px;line-height:1.45;color:var(--muted,currentColor)}
:root[data-guest-shell=ready] .guest-photos-head{flex-wrap:wrap;row-gap:2px}
.guest-photos-head>.guest-photos-intro{order:3;flex:1 0 100%}
.album-view-controls>.album-review-intro{align-self:center;min-width:0;margin:0;font-size:13px;line-height:1.4;color:var(--muted,currentColor)}

/* Einstieg: Hinweis nach abgelehnten Hinweisen */
#welcome .notice-declined{display:grid;gap:12px;margin-top:16px}
#welcome .notice-declined p{margin:0}

/* Herz-Like: Herz springt, Funken, Zähler-Bump, großes Herz beim Doppeltipp */
.photo-like{position:relative;overflow:visible}
.photo-like span{display:inline-block}
.photo-like.is-pop svg{animation:v2040-like-pop .6s cubic-bezier(.34,1.56,.64,1)}
.photo-like span.is-bump{animation:v2040-like-bump .45s cubic-bezier(.34,1.56,.64,1)}
.like-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);pointer-events:none;transform:rotate(var(--a,0deg)) translateY(0);animation:v2040-like-spark .7s cubic-bezier(.2,.7,.3,1) forwards}
.like-spark:nth-child(even){width:4px;height:4px;margin:-2px 0 0 -2px;background:color-mix(in srgb,var(--accent) 55%,#fff)}
#gallery .media{position:relative}
.like-flash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:6}
.like-flash svg{width:min(40%,120px);height:auto;fill:#fff;stroke:#fff;filter:drop-shadow(0 6px 18px rgb(0 0 0/.45));animation:v2040-like-flash .9s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes v2040-like-pop{0%{transform:scale(1)}30%{transform:scale(1.45) rotate(-8deg)}55%{transform:scale(.9) rotate(4deg)}100%{transform:scale(1)}}
@keyframes v2040-like-bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes v2040-like-spark{0%{opacity:1;transform:rotate(var(--a,0deg)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a,0deg)) translateY(calc(-1 * var(--d,20px))) scale(.3)}}
@keyframes v2040-like-flash{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.1)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.photo-like.is-pop svg,.photo-like span.is-bump,.like-spark,.like-flash svg{animation:none}.like-spark,.like-flash{display:none}}

/* ======================================================================
   Öffentliche Seiten
   ====================================================================== */

/* Kaufen: kompakte Paketwahl über dem Formular */
.checkout-quickpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0 0;max-width:520px}
.checkout-quickpick-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;padding:6px 4px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;text-align:center;font-size:12px;font-weight:600;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
.checkout-quickpick-option strong{font-size:12px;font-weight:400;color:var(--muted,currentColor)}
.checkout-quickpick-option:hover{border-color:var(--accent)}
.checkout-quickpick-option.is-selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--ink)}
.checkout-quickpick-option.is-selected strong{color:var(--accent)}
.checkout-quickpick-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:360px){.checkout-quickpick{gap:4px}.checkout-quickpick-option{padding:6px 2px;font-size:11px;letter-spacing:-.01em}}
.purchase-package:has(>.purchase-package-change){display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 10px;max-width:100%}
.purchase-package .purchase-package-change{display:inline-flex;align-items:center;min-height:24px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Kaufen: Event-Anlass zeigt nur eine Paketkarte */
.checkout-grid.checkout-grid-single{grid-template-columns:minmax(0,420px);justify-content:center;margin-inline:auto}

/* Kaufen mobil: fünf Kernleistungen, Rest über „Alle Leistungen“; breit immer alles */
.checkout-plan .plan-more{display:none}
@media (max-width:900px){
 .checkout-plan[data-collapsed="true"] li.plan-extra{display:none}
 .checkout-plan .plan-more:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:flex-start;width:auto;min-height:44px;margin:-16px 0 20px;padding:6px 16px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--ink);font-size:13px;font-weight:400;box-shadow:none;cursor:pointer}
 .checkout-plan .plan-more::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
 .checkout-plan .plan-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
 .checkout-plan .plan-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
}

/* Pakete: nicht buchbar (Event-Anlass) und „Demnächst“ */
.plan-unavailable-note,#start .v2-package-hint,.v2-package-hint{display:flex;gap:7px;align-items:flex-start;margin:auto 0 4px;font-size:13px;line-height:1.45;color:var(--muted,var(--home-muted,currentColor))}
.plan-unavailable-note::before,.v2-package-hint::before{content:"i";flex:none;display:grid;place-items:center;width:17px;height:17px;margin-top:1px;border:1px solid currentColor;border-radius:50%;font-size:10px;font-weight:700;font-style:normal;line-height:1}
.plan-unavailable-note+.button.disabled{margin-top:10px}
.price-card.upcoming-package{border-style:dashed;background:transparent;box-shadow:none}
.v2-package-note{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--home-muted,var(--muted,currentColor))}
.v2-package-after{max-width:36rem;margin:16px auto 0;text-align:center;font-size:15px;line-height:1.5;color:var(--home-muted,var(--muted,currentColor))}

/* Tipps & Tricks: Zugänge und „Hier findest du …“ */
.tips-page :is(.tips-roles,.tips-areas){max-width:1100px;margin:clamp(28px,5vw,52px) auto 0}
.tips-page :is(.tips-roles,.tips-areas)>h2{margin:0 0 6px;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.025em}
.tips-page .tips-section-lead{max-width:60ch;margin:0 0 18px;color:var(--muted,#68616a);font-size:15px;line-height:1.55}
.tips-roles-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tips-role{min-width:0;padding:clamp(18px,2.5vw,26px);border:1px solid var(--line,#ded8d3);border-radius:18px;background:var(--paper,#fff);color:var(--ink,#29252b)}
.tips-role header{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:auto;min-height:0;margin:0 0 12px;padding:0;border:0}
.tips-role-badge{color:var(--accent,#78665d);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tips-page .tips-role h3{margin:0;color:var(--ink,#29252b);font-size:clamp(18px,2vw,22px);line-height:1.25}
.tips-role ul{margin:0;padding-left:19px;font-size:14px;line-height:1.55}
.tips-role li+li{margin-top:6px}
.tip-shot-placeholder{display:block;margin:16px 0 0}
.tip-shot-placeholder[hidden]{display:none}
.tip-shot-phone{position:relative;display:grid;place-items:center;width:84px;aspect-ratio:9/19;border:1px solid var(--line,#ded8d3);border-radius:16px;background:color-mix(in srgb,var(--ink,#29252b) 4%,transparent);text-align:center}
.tip-shot-notch{position:absolute;top:6px;left:50%;width:26px;height:5px;margin-left:-13px;border-radius:999px;background:var(--line,#ded8d3)}
.tip-shot-label{padding:0 6px;color:var(--muted,#68616a);font-size:10px;line-height:1.3}
.tip-shot-label strong{display:block;margin-top:2px;color:var(--ink,#29252b);font-size:11px}
@media (min-width:681px){.tips-page :is(.tips-roles,.tips-areas)>h2,.tips-page .tips-section-lead{text-align:center;margin-left:auto;margin-right:auto}}
@media (max-width:900px){.tips-roles-list{grid-template-columns:minmax(0,1fr);gap:11px}}
@media (max-width:680px){.tips-role{padding:19px;border-radius:15px}}

/* ======================================================================
   Betreiberverwaltung (admin.html)
   ====================================================================== */
.theme-hint{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted,currentColor)}

/* V2040 Kontrolle: Helfer/Veranstalter – die abgerundete Kopf-Ecke (ohne Innenabstand) schnitt das erste Zeichen von „Du bist dabei …“ ab. */
html.experience-v2[data-event-theme][data-staff-shell=ready] .event-heading{border-radius:0}
/* Albumfilter steht in einer eigenen vollen Zeile statt in der 44px-Spalte der Ansichtsknöpfe („A ⌄“). */
html.experience-v2[data-event-theme][data-staff-shell=ready] .album-view-controls #albumFilter{grid-column:1/-1}
/* Kaufseite: Im Event-Thema fehlt die Paketnummer, der Name rutschte sonst in die 28-px-Spalte und brach Buchstabe für Buchstabe um. */
html.sales-page[data-marketing="true"] .checkout-package-overview summary:not(:has(.package-overview-index)){grid-template-columns:minmax(0,1fr) auto}
html.sales-page[data-marketing="true"] .package-overview-name{overflow-wrap:break-word}
/* „ändern“ neben dem gewählten Paket: Fingerfläche mindestens 44 px. */
.purchase-package-change{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
/* Tabellenkopf der Eventliste lesbar. */
body .event-table th{color:var(--ink)}
/* Anlassseiten (Hochzeit, Party …): Das Foto der Heldenkarte kam über --theme-image, das nie gesetzt wurde – die Karte blieb leer. */
.hero-theme-hochzeit .hero-photo{--theme-image:url('/scenes/v2030/hochzeit-photo-wide-20260927.webp');--theme-image-position:center 30%}
.hero-theme-party .hero-photo{--theme-image:url('/scenes/v2030/party-photo-wide-20260927.webp')}
.hero-theme-jga .hero-photo{--theme-image:url('/scenes/v2030/jga-photo-wide-20260927.webp')}
.hero-theme-event .hero-photo{--theme-image:url('/scenes/v2030/event-photo-wide-20260927.webp')}
/* Sticker sitzt am unteren Bildrand statt über Gesichtern. */
.hero-moment .hero-photo .moment-sticker{top:auto;bottom:12px;left:12px;max-width:calc(100% - 24px)}
/* Unterseiten am Handy: Der Kopf ist dort über 230 px hoch (Anlasswahl, Navigation, zwei Knöpfe). Mitlaufend verdeckte er ein Viertel des Bildschirms samt Überschrift. */
@media(max-width:760px){html.sales-page body>header{position:relative}}

/* V2040 Gegenprüfung: „ändern“ neben dem gewählten Paket war trotz Regel oben nur 24 px hoch (die Regel .purchase-package .purchase-package-change gewann). */
.purchase-package .purchase-package-change{min-height:44px}
/* Öffentliche Seiten am Handy: Das Paketkarussell lässt Nachbarpakete bewusst seitlich hervorlugen; auf /de/hochzeit ragte das 17 px über den Rand und die Seite ließ sich waagerecht verschieben. clip erzeugt keinen Scrollbereich (sticky bleibt). */
html.sales-page[data-marketing="true"] body{overflow-x:clip}
/* Feinschliff Tippflächen (mindestens 44 px, Designregel Handy). Optik bleibt schlank, nur die Trefferfläche wächst. */
html.experience-v2[data-guest-shell=ready] .event-heading .guest-name-button{position:relative}
html.experience-v2[data-guest-shell=ready] .event-heading .guest-name-button::after{content:'';position:absolute;inset:-7px -4px}
html.experience-v2[data-event-theme][data-staff-shell=ready] details>summary{min-height:44px;box-sizing:border-box;padding-block:10px}
.photo-comment button{min-height:44px}
body>footer a,.contact-footer a,.legal-footer-links a{display:inline-block;padding-block:12px}
/* Fotoansicht: Querformate standen in einem hohen festen Rahmen mit dicken Balken; der Rahmen folgt jetzt dem Foto (Hochformate weiter begrenzt). */
html.experience-v2 dialog.photo-composer>img{height:auto;max-height:min(56svh,520px);object-fit:contain}

/* Betreiberverwaltung am Handy: Reiter als eine wischbare Zeile statt 165 px hohem Block; Eventliste als Karten statt 9-spaltiger Tabelle. */
html.operator-workspace .event-table th{background:var(--card)}
@media(max-width:760px){
  #dashboard nav[aria-label="Verwaltungsbereiche"]{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px;-webkit-overflow-scrolling:touch}
  #dashboard nav[aria-label="Verwaltungsbereiche"]::-webkit-scrollbar{display:none}
  #dashboard nav[aria-label="Verwaltungsbereiche"] .tab{flex:0 0 auto;white-space:nowrap;min-height:44px}
  html.operator-workspace .event-table-scroll{overflow:visible}
  html.operator-workspace .event-table,html.operator-workspace .event-table tbody,html.operator-workspace .event-table tr,html.operator-workspace .event-table td{display:block;width:100%;box-sizing:border-box}
  html.operator-workspace .event-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.operator-workspace .event-table tr{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:6px 0;background:var(--card)}
  html.operator-workspace .event-table td{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:8px;padding:5px 12px;border:0;min-width:0}
  html.operator-workspace .event-table td:first-child{min-width:0;font-weight:600;font-size:1rem}
  html.operator-workspace .event-table td::before{content:attr(data-label);color:var(--muted);font-weight:400;font-size:.78rem}
  html.operator-workspace .event-table td:first-child,html.operator-workspace .event-table td:last-child{grid-template-columns:minmax(0,1fr)}
  html.operator-workspace .event-table td:first-child::before,html.operator-workspace .event-table td:last-child::before{display:none}
  html.operator-workspace .event-table td .status{justify-self:start}
  html.operator-workspace .event-table tr td:last-child{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:10px}
  html.operator-workspace .event-table td:last-child .actions{justify-content:flex-start}
  html.operator-workspace .event-table td:last-child details>summary{min-height:44px;display:flex;align-items:center}
  html.operator-workspace .event-table details>div{min-width:0;max-width:none}
  html.operator-workspace .event-table button,html.operator-workspace .event-table a{min-height:44px}
}
/* Theme-Vorschau in der Verwaltung am Handy: etwas höher, damit Kopf und Überschrift sichtbar sind; „Groß ansehen“ bleibt für die volle Ansicht. */
@media(max-width:760px){#themes .theme-preview iframe:not([data-width=desktop]){height:clamp(220px,34svh,300px)}}
/* Herz zur Leinwand: liegt im Live-Rahmen (Gäste und Team). Ohne eigene Regel war das Symbol 0 px groß bzw. das Team-Herz verdeckte den Text oben links. */
html[data-guest-shell=ready] .guest-live-frame .guest-heart-action{position:absolute;right:12px;bottom:12px;z-index:4;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%}
html[data-guest-shell=ready] .guest-live-frame .guest-heart-action svg{width:24px;height:24px}
.staff-live-frame .staff-heart{position:absolute;right:12px;bottom:12px;z-index:4}
/* Ersteinrichtung: Auswahlkreise bleiben bei langen Anlassnamen gleich groß. */
.owner-setup-dialog input{flex:none}
/* Design-Editor: Mit eigenem Eventdesign zeigt die App die Deko (Motive, Funken, Feuerwerk) auch über der Anlass-Szene. Vorher blendete die Szene sie aus, der Deko-Regler wirkte bei Gästen nicht. Stufe 0 bleibt aus. */
html[data-own-design=true][data-event-theme][data-ambient-theme] body>.wedding-art{display:block;position:fixed;inset:0;z-index:-1}
html[data-own-design=true][data-event-theme][data-ambient-theme] body>.ambient-scene{z-index:-2}
html[data-own-design=true][data-event-theme][data-ambient-theme][data-decor-level="0"] body>.wedding-art{display:none}
/* 07.10.2026: QR-Dialog springt beim Kopieren nicht mehr (Platz für die Rückmeldung bleibt reserviert) */
.staff-qr-dialog>.staff-qr-status,.staff-qr-dialog>.staff-qr-status:empty{display:block;min-height:1.4em;margin:6px 0 0;font-size:13px;line-height:1.4}
/* 07.10.2026: ein Speichern-Knopf für die Veranstalter-Einstellungen (settings-save.js) */
html[data-settings-bar=true] #ownerTools [data-settings-save]{display:none!important}
.settings-save-bar[hidden]{display:none!important}
.settings-save-bar{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 86px);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px)}
.settings-save-bar p{margin:0;font-size:13px;line-height:1.35;color:var(--muted)}
.settings-save-bar.is-dirty p{color:var(--ink)}
.settings-save-bar button{flex:none;min-height:44px;margin:0;padding:8px 16px;border-radius:999px;background:var(--accent);color:var(--onaccent);border:0;font-weight:600}
.settings-save-bar button:disabled{opacity:.45}
@media(min-width:821px){.settings-save-bar{bottom:16px}}
/* Leinwand: das aktuelle Foto füllt den Rahmen zusätzlich als ruhiger, unscharfer Hintergrund (event-app.js wallBackdrop) */
.wall-stage[data-backdrop]{position:relative;isolation:isolate;overflow:hidden}
.wall-stage[data-backdrop]::before{content:"";position:absolute;inset:-48px;z-index:0;background:var(--wall-backdrop) center/cover no-repeat;filter:blur(30px) saturate(1.15) brightness(.62);pointer-events:none}
.wall-stage[data-backdrop]>img,.wall-stage[data-backdrop]>video{position:relative;z-index:1}
/* Veranstalter-/Helfer-Navigation wie bei Gästen auf ruhiger Leiste, damit Inhalt nicht zwischen den Knöpfen durchscheint */
html.experience-v2[data-event-theme][data-staff-shell=ready] body .staff-bottom-nav{padding:4px 5px;border:1px solid color-mix(in srgb,var(--staff-ink) 14%,transparent);border-radius:22px;background:color-mix(in srgb,var(--staff-paper) 92%,transparent);box-shadow:0 8px 30px #0000002e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* Paketzeile in den Einstellungen: Abstand zwischen Paketname und Knöpfen */
html.experience-v2[data-event-theme][data-staff-shell=ready][data-staff-view=settings] body #ownerTools>.owner-package-status{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px}
html.experience-v2[data-event-theme][data-staff-shell=ready][data-staff-view=settings] body #ownerTools>.owner-package-status strong{flex:1 1 100%}

/* ======================================================================
   Kaufseite (08.10.2026): Pakete als 3D-Handy-Karussell, schlanke Knöpfe im App-Stil
   (Markus: keine dicken Knöpfe; DESIGN.md „Schlanke Knöpfe im App-Stil“)
   ====================================================================== */
html.sales-page[data-marketing="true"] .buy-page{display:block;padding:clamp(14px,3vw,36px) 0 0}
.buy-intro{max-width:640px;margin:0 auto;text-align:center}
.buy-intro h1{margin:4px 0 8px;font-weight:400;font-size:clamp(28px,6.8vw,42px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.buy-intro .purchase-lead{margin:0 auto;max-width:34rem;font-size:14px;line-height:1.55;color:var(--muted)}
/* Karussell läuft über die volle Fensterbreite, die Mitte bleibt auf das Handy ausgerichtet */
.buy-carousel{position:relative;margin:6px calc(50% - 50vw) 0;perspective:1100px}
.buy-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 0 22px;outline:none}
.buy-track::-webkit-scrollbar{display:none}
.buy-track:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.buy-slide{flex:0 0 min(66vw,300px);scroll-snap-align:center;display:flex;justify-content:center;transform-style:preserve-3d;transition:transform .35s ease,opacity .35s ease}
.buy-slide:first-child{margin-left:calc(50vw - min(33vw,150px))}
.buy-slide:last-child{margin-right:calc(50vw - min(33vw,150px))}
.buy-phone{width:100%;aspect-ratio:9/16;max-width:100%;border-radius:clamp(30px,10vw,44px);padding:8px;background:linear-gradient(145deg,#4a4f63,#1b1f2c 40%,#3a3f52);box-shadow:0 26px 50px -22px #000c,inset 0 0 0 1px #ffffff14}
.buy-screen{position:relative;height:100%;border-radius:clamp(24px,8.6vw,36px);overflow:hidden;display:flex;flex-direction:column;background:var(--paper,#0e1428);color:var(--ink)}
.buy-screen::before{content:"";position:absolute;z-index:3;top:8px;left:50%;width:32%;height:20px;border-radius:20px;background:#000;transform:translateX(-50%)}
.buy-screen::after{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(115deg,transparent 40%,#ffffff26 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.buy-slide.is-active .buy-screen::after{animation:buy-sheen 1.4s ease .2s 1}
@keyframes buy-sheen{to{transform:translateX(120%)}}
.buy-shot{display:block;width:100%;height:27%;flex:none;object-fit:cover;object-position:center 58%;-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.buy-card{flex:1;display:flex;flex-direction:column;gap:0;min-height:0;margin-top:-26px;padding:0 16px 16px;position:relative;z-index:1}
.buy-tag{align-self:flex-start;margin:0 0 6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--paper,transparent)}
.buy-tag.is-on{background:var(--accent);border-color:var(--accent);color:var(--onaccent,#111)}
html.sales-page[data-marketing="true"] .buy-card h2{margin:0;font-weight:400;font-size:clamp(22px,6.2vw,28px);line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.buy-price{display:flex;align-items:baseline;gap:6px;margin:4px 0 10px}
.buy-price strong{font-weight:500;font-size:clamp(22px,6.4vw,28px);font-variant-numeric:tabular-nums;color:var(--ink)}
.buy-price span{font-size:12px;color:var(--muted)}
.buy-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.buy-facts li{min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:10px}
.buy-slide[data-buy-plan="business"] .buy-facts li{grid-column:span 2}
.buy-facts b{display:block;font-weight:500;font-size:clamp(15px,4.2vw,18px);line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}
.buy-facts small{display:block;font-size:11px;line-height:1.3;color:var(--muted)}
.buy-plus{display:flex;gap:6px;margin:8px 0 10px;font-size:12.5px;line-height:1.4;color:var(--ink)}
.buy-plus::before{content:"";flex:none;width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--accent)}
/* Schlanker Knopf: sichtbar 36 px, nur textbreit, dünne Kontur; 44 px Fingerfläche über den Rand */
html.sales-page[data-marketing="true"]:not(#v2040):not(#v2040b) .buy-pick{align-self:center;display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin-top:auto;padding:0 20px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--ink);font-size:13px;font-weight:500;text-decoration:none;box-shadow:none;position:relative}
html.sales-page[data-marketing="true"] .buy-pick::before{content:"";position:absolute;inset:-4px 0}
html.sales-page[data-marketing="true"] .buy-slide.is-active .buy-pick{background:var(--accent);color:var(--onaccent,#111)}
/* F1: Seitliche Handys sind skaliert – der Knopf wird gegen-skaliert, bleibt sichtbar 36 px hoch. */
html.sales-page[data-marketing="true"] .buy-slide .buy-pick:not(#x){transform:scale(calc(1 / var(--buy-s,1)));transform-origin:center bottom}
html.sales-page[data-marketing="true"] .buy-pick:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.buy-nav{display:flex;align-items:center;justify-content:center;gap:14px}
html.sales-page[data-marketing="true"]:not(#v2040):not(#v2040b) .buy-arrow{display:inline-grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;box-shadow:none;position:relative}
html.sales-page[data-marketing="true"] .buy-arrow::before{content:"";position:absolute;inset:-5px}
html.sales-page[data-marketing="true"] .buy-arrow:hover{border-color:var(--accent)}
.buy-count{min-width:42px;text-align:center;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.buy-trial{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted)}
.buy-trial a{color:var(--accent);text-underline-offset:3px}
.buy-after{max-width:560px;margin:22px auto 0}
/* Kaufseite: Tabelle offen (auch am Handy), ausführliche Liste unter dem Kauf, eingeklappt mit transparentem Auslauf */
.buy-after{max-width:560px}
html.sales-page .buy-table .package-comparison{display:block;margin:0 0 6px;border-radius:14px}
.buy-table .package-comparison table{min-width:0;font-size:12px;line-height:1.35}
.buy-table .package-comparison{overflow-x:hidden}
.buy-table .package-comparison th,.buy-table .package-comparison td{padding:7px 4px;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:manual}
.buy-table .package-comparison th:first-child,.buy-table .package-comparison td:first-child{padding-left:10px;width:34%}
.buy-table .package-comparison th:first-child,.buy-table .package-comparison td:first-child{text-align:left}
.buy-table .package-comparison thead th{font-size:10.5px;font-weight:500;overflow-wrap:normal}
.buy-table .package-comparison td{font-size:11.5px}
.buy-table .package-comparison tbody th{font-weight:400}
.buy-table .package-comparison td:nth-child(3){font-weight:400}
.buy-table-body{position:relative}
.buy-table.is-enhanced .buy-table-body{max-height:var(--buy-table-closed,320px);overflow:hidden;cursor:pointer;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);transition:max-height .45s ease}
.buy-table.is-enhanced.is-open .buy-table-body{max-height:var(--buy-table-open,2000px);cursor:auto;-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){.buy-table.is-enhanced .buy-table-body{transition:none}}
.buy-more{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.buy-more>h2{margin:0 0 8px;font-size:16px;font-weight:500}
.buy-more-body{position:relative}
.buy-more.is-enhanced .buy-more-body{max-height:160px;overflow:hidden;cursor:pointer;-webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent);transition:max-height .45s ease}
.buy-more.is-enhanced.is-open .buy-more-body{max-height:var(--buy-more-h,4000px);cursor:auto;-webkit-mask-image:none;mask-image:none}
.buy-more-toggle{display:flex;align-items:center;justify-content:center;position:relative;min-height:36px;margin:8px auto 0;padding:0 20px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.buy-more-toggle::before{content:"";position:absolute;inset:-4px 0}
.buy-more-toggle[hidden]{display:none}
.buy-more-toggle:hover{border-color:var(--accent)}
.buy-more-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.buy-more.is-enhanced .buy-more-body{transition:none}}
.buy-detail-plans{display:grid;gap:14px;padding:0 0 16px}
.buy-detail-plan h3{margin:0 0 4px;font-size:14px;font-weight:500}
.buy-after>.buy-table{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.buy-table-title{margin:0 0 10px;font-size:16px;font-weight:500}.buy-table-details{padding:18px 0 4px}.buy-table-details>h2{margin:0;font-size:16px;font-weight:500}
.buy-detail-plan ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.buy-order{margin-top:22px}
.buy-order .purchase-package{margin:0 0 10px;font-size:13px}
html.sales-page[data-marketing="true"] .buy-order .manual-order{margin:0;padding:18px 16px;border-radius:16px;box-shadow:none}
html.sales-page[data-marketing="true"] .buy-order .manual-order h2{font-size:22px;margin:2px 0 6px}
html.sales-page[data-marketing="true"] .buy-order .manual-order>p:not(.eyebrow){font-size:13px;line-height:1.5}
html.sales-page[data-marketing="true"] .buy-order .manual-order form{gap:10px;margin-top:12px}
html.sales-page[data-marketing="true"] .buy-order .manual-order label{font-weight:400;gap:4px}
html.sales-page[data-marketing="true"] .buy-order .manual-order input:not([type=checkbox]){min-height:40px;padding:8px 12px;border-radius:10px}
html.sales-page[data-marketing="true"]:not(#v2040):not(#v2040b) .buy-order .manual-order .button{justify-self:center;min-height:38px;padding:0 24px;font-size:13.5px;font-weight:500;box-shadow:none}
.buy-contact{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}
html.sales-page[data-marketing="true"] .buy-legal{max-width:560px;margin:28px auto 36px;padding:0;border:0;background:none;box-shadow:none}
html.sales-page[data-marketing="true"] .buy-legal h2{font-size:15px;font-weight:500;margin:0 0 6px}
html.sales-page[data-marketing="true"] .buy-legal p{font-size:12.5px;line-height:1.55;color:var(--muted)}
html.sales-page[data-marketing="true"] .buy-legal .checkout-links{display:flex;flex-wrap:wrap;gap:2px 14px}
html.sales-page[data-marketing="true"] .buy-legal .checkout-links a{display:inline-flex;align-items:center;min-height:32px;font-size:12.5px}
@media (min-width:900px){.buy-slide{flex-basis:300px}.buy-slide:first-child{margin-left:calc(50vw - 150px)}.buy-slide:last-child{margin-right:calc(50vw - 150px)}}
@media (prefers-reduced-motion:reduce){.buy-slide{transition:none}.buy-slide.is-active .buy-screen::after{animation:none}}

/* Abgebrochener Upload (Markus 11.10.2026): sieht nur der Hochlader, als ruhige gestrichelte Kachel mit „Wiederholen“ und „Entfernen“. */
#gallery .media.media-failed{display:flex!important;flex-direction:column;justify-content:center;align-items:center;width:auto!important;min-width:0!important;min-height:0!important;aspect-ratio:1;padding:8px!important;border:1px dashed color-mix(in srgb,var(--ink,#2b2420) 30%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,var(--paper,#fff) 40%,transparent)!important;box-shadow:none!important}
#gallery .media.media-failed>:is(img,video){display:none!important}
#gallery .media.media-failed .media-body{position:static!important;display:flex!important;flex-direction:column;align-items:center;gap:4px;margin:0;padding:0!important;background:none!important;text-align:center}
#gallery .media.media-failed .media-body>:not(p):not(.media-retry):not(.media-discard){display:none!important}
#gallery .media.media-failed .media-body>p{display:block!important;position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:normal!important;hyphens:auto;margin:0 0 2px;font-size:10.5px;line-height:1.3;color:var(--muted,#7a6e66)}
#gallery .media.media-failed .media-body>:is(.media-retry,.media-discard){display:inline-flex!important;align-items:center;justify-content:center;width:auto;min-width:0;min-height:36px;margin:0;padding:0 14px;border:1px solid var(--line,#d9cfc5);border-radius:999px;background:transparent;color:var(--ink,#2b2420);font:500 12px/1 var(--app-font,inherit);box-shadow:none}
#gallery .media.media-failed .media-body>.media-discard{min-height:24px!important;padding:0 6px!important;border-color:transparent;color:var(--muted,#7a6e66);text-decoration:underline;text-underline-offset:3px}
#gallery .media.media-failed .media-body>[hidden]{display:none!important}

/* Leeres Album, Variante A (Markus 11.10.2026): drei Polaroid-Rahmen im Eventthema. Nur CSS, keine Bilder. */
#empty .empty-frames{display:flex;justify-content:center;align-items:flex-end;max-width:380px;margin:4px auto 18px;padding:10px 6% 0}
#empty .empty-frame{appearance:none;position:relative;display:block!important;flex:0 0 31%;width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;margin:0 -1%!important;padding:7px 7px 0!important;border:0!important;border-radius:3px!important;background:#fbf9f6!important;color:#2b2420!important;box-shadow:0 1px 2px rgba(0,0,0,.1),0 14px 28px -14px rgba(0,0,0,.45)!important;font:inherit;text-align:center;white-space:normal;cursor:pointer;transform:rotate(-6deg);transition:transform .25s ease}
#empty .empty-frame:nth-child(2){z-index:1;flex-basis:37%;transform:translateY(-8px) rotate(1.5deg)}
#empty .empty-frame:nth-child(3){transform:rotate(5deg)}
#empty .empty-frame:focus-visible{outline:2px solid var(--accent,#9c6b4e);outline-offset:3px}
@media (hover:hover){#empty .empty-frame:hover{transform:translateY(-4px) rotate(0)}#empty .empty-frame:nth-child(2):hover{transform:translateY(-12px) rotate(0)}}
#empty .empty-frame-photo{display:flex;width:100%;box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:5px;aspect-ratio:1;padding:8px;border-radius:2px;background:color-mix(in srgb,var(--accent,#9c6b4e) 10%,#f4efe9);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink,#2b2420) 7%,transparent);text-align:center;overflow:hidden}
#empty .empty-frame-photo strong{display:block;max-width:100%;font:500 clamp(13px,4vw,17px)/1.12 Georgia,'Times New Roman',serif;letter-spacing:-.01em;color:#2b2420;overflow-wrap:anywhere}
#empty .empty-frame-photo strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;min-height:0;overflow:hidden}
#empty .empty-frame-photo[data-long] strong{font-size:clamp(11px,3.3vw,14px)}
#empty .empty-frame-photo[data-fit]{overflow:hidden}#empty .empty-frame-photo[data-fit] strong{display:block;overflow:visible;-webkit-line-clamp:unset;overflow-wrap:normal;word-break:normal}#empty .empty-frame-photo small{white-space:nowrap}
#empty .empty-frame-photo small{display:block;flex:none;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#7a6e66}
#empty .empty-frame-camera{display:block;width:24px;height:24px;color:color-mix(in srgb,var(--accent,#9c6b4e) 65%,#2b2420);opacity:.6}
#empty .empty-frame-camera svg{display:block;width:100%;height:100%}
#empty .empty-frame-caption{display:block;padding:7px 2px 10px;font:italic 11px/1.2 Georgia,'Times New Roman',serif;color:#6f645c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#empty[data-frames] h2,#empty[data-frames] p{text-align:center}
@media (prefers-reduced-motion:reduce){#empty .empty-frame{transition:none}}

/* Verwaltung · Marketing-QR (12.10.2026): kompakte Zeilen wie die Eventliste, schlanke Knöpfe, keine Kästen. */
#campaigns .campaign-form{display:grid;gap:14px;margin:0 0 24px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#campaigns .campaign-form h3{margin:0;font-size:20px}
#campaigns .campaign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:start}
#campaigns .campaign-grid label{align-content:start}
#campaigns .campaign-grid input,#campaigns .campaign-grid select{min-height:44px;height:44px;padding:8px 12px}
#campaigns .campaign-grid[hidden]{display:none}
#campaigns .campaign-grid small{font-weight:400}
#campaigns .campaign-discount{border:0;border-top:1px solid var(--line);padding:12px 0 0;margin:0;display:grid;gap:10px}
#campaigns .campaign-discount legend{font-size:13px;font-weight:700;padding:0}
#campaigns .campaign-check{display:flex;align-items:center;gap:8px;font-weight:400}
#campaigns .campaign-check input{width:18px;min-height:18px;height:18px}
#campaigns .campaign-range{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0 0 14px}
#campaigns .campaign-range label{min-width:150px}
#campaigns .campaign-totals{font-size:14px;color:var(--ink);margin:0 0 10px}
#campaigns .campaign-row{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(260px,1.4fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
#campaigns .campaign-row.is-paused{opacity:.6}
#campaigns .campaign-info{display:grid;gap:3px;min-width:0}
#campaigns .campaign-info .tiny{margin:0}
#campaigns .campaign-link{font-size:13px;overflow-wrap:anywhere}
#campaigns .campaign-numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0}
#campaigns .campaign-numbers div{display:grid;gap:2px}
#campaigns .campaign-numbers dt{font-size:11px;color:var(--muted)}
#campaigns .campaign-numbers dd{margin:0;font-size:16px;color:var(--ink)}
#campaigns .campaign-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
#campaigns .campaign-actions button,#campaigns .campaign-actions .campaign-pdf,#campaigns .campaign-range button{min-height:36px;padding:6px 12px;border-radius:100px;font-size:13px}
#campaigns .campaign-actions .campaign-pdf{display:inline-flex;align-items:center;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
#campaigns .campaign-actions .qr-mini{width:40px;height:40px;min-height:40px;padding:3px;border-radius:8px}
@media(max-width:820px){
 #campaigns .campaign-row{grid-template-columns:1fr}
 #campaigns .campaign-actions{justify-content:flex-start}
 #campaigns .campaign-numbers{grid-template-columns:repeat(3,minmax(0,1fr))}
}
#campaigns .campaign-actions .qr-mini svg{display:block;width:100%;height:100%}

/* Kritik 13.10. Nr 6: Produktgeschichte („So sieht's aus“, „So geht's“, Anlassseiten) als 3D-Handy-Karussell der Startseite.
   Gleiche Bausteine wie #start (homepage-v2.css/-motion.js), am Handy fast bildschirmfüllend. */
.product-story{--home-ink:var(--ink);--home-muted:var(--muted);--home-accent:var(--accent);--home-line:var(--line)}
.product-story .product-story-carousel:not(#x){container-type:inline-size;width:100%;max-width:none;margin:22px auto 18px}
.product-story .product-story-carousel .v2-story-track:not(#x){--story-w:min(34cqw,300px);gap:4px;padding:22px calc(50% - var(--story-w) / 2) 14px;scroll-padding-inline:0;perspective:1100px}
.product-story .product-story-carousel .v2-story-track::after{display:none}
.product-story .product-story-carousel .v2-story-device:not(#x){flex:0 0 var(--story-w);width:var(--story-w);margin:0;scroll-snap-align:center;scroll-snap-stop:always;transform:translateY(12px) scale(.86) rotateY(var(--story-ry,0deg));opacity:.55;filter:saturate(.8);transform-style:preserve-3d;cursor:pointer;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s ease,filter .55s ease}
.product-story .product-story-carousel .v2-story-device[aria-current="true"]:not(#x){transform:translateY(0) scale(1) rotateY(var(--story-ry,0deg));opacity:1;filter:none;cursor:default}
.product-story .product-story-carousel .v2-story-device-body:not(#x){max-width:none;width:100%;padding:0;border:0;background:none;box-shadow:none}
.product-story .product-story-carousel .v2-device:not(#x){width:100%}
.product-story .product-story-carousel .v2-real-screen{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:inherit}
.product-story .product-story-carousel figcaption:not(#x){display:grid;gap:4px;margin:14px auto 0;max-width:min(100%,320px);text-align:center;opacity:0;transform:translateY(6px);transition:opacity .45s .1s ease,transform .45s .1s cubic-bezier(.16,1,.3,1)}
.product-story .product-story-carousel .v2-story-device[aria-current="true"] figcaption:not(#x){opacity:1;transform:none}
.product-story .product-story-carousel figcaption strong{color:var(--ink);font-size:14px;font-weight:500;letter-spacing:.02em}
.product-story .product-story-carousel figcaption span{color:var(--muted);font-size:14px;line-height:1.45}
.product-story .product-story-carousel .v2-device-screen{isolation:isolate}
.product-story .product-story-carousel .v2-device-screen::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;z-index:3;pointer-events:none;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .42),transparent);transform:skewX(-14deg)}
.product-story .product-story-carousel .v2-story-device[aria-current="true"] .v2-device-screen::after{animation:s-sheen 4.2s cubic-bezier(.2,.8,.2,1) .6s infinite}
.product-story .product-story-carousel .v2-story-controls button:not(#x){width:36px;height:36px;min-width:36px;min-height:36px;margin:4px;padding:0;border-radius:50%;font-size:19px}
@media (max-width:620px){.product-story .product-story-carousel .v2-story-track:not(#x){--story-w:min(78cqw,340px);padding-top:14px}.product-story .product-story-carousel:not(#x){margin-top:14px}}
@media (prefers-reduced-motion:reduce){.product-story .product-story-carousel .v2-device-screen::after{animation:none;display:none}.product-story .product-story-carousel .v2-story-device{transition:none}}
/* Kritik 13.10. Nr 9: Kontaktblock mit zweitem, schmalem Textlink zu Business Branding */
.contact-invite .contact-invite-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:14px 0 0}
.contact-invite .contact-invite-actions .button{margin:0}
/* Kritik 13.10. Nr 10: Absender „MaJeMiLu Design“ als dezenter Link (Footer, App-Fußzeile) */
.brand-credit a:not(#x),a.brand-credit:not(#x){display:inline;min-height:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.brand-credit a:hover,a.brand-credit:hover{color:var(--accent,currentColor)}
/* Kritik 13.10. Nr 12 (Nachtrag 13.10.: alle Unterseiten außer der Startseite, nicht nur die Kaufseite): Unterseiten am Handy mit kompaktem Kopf (Marke + Sprache, eine schmale Anlasszeile, Code/Einladung als kleine Pillen).
   „So funktioniert’s“ und „Pakete“ stehen weiter im Footer und im Seiteninhalt; Fingerfläche 44 px über unsichtbaren Rand. */
@media (max-width:620px){
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header:not(#x){display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 10px;padding-block:8px 10px!important;margin-bottom:6px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.brand:not(#x){grid-column:1;grid-row:1;min-height:40px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .brand-refresh>img:not(#x){width:28px;height:28px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .brand-refresh .brand-name:not(#x){font-size:18px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-language:not(#x){grid-column:2;grid-row:1;margin:0;padding:2px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-language a:not(#x){position:relative;min-width:36px;min-height:32px;padding:0 8px;font-size:12px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher:not(#x){grid-column:1/-1;grid-row:2;display:flex;width:auto;max-width:100%;gap:4px;margin:0;padding:0;border:0;background:none;overflow-x:auto;scrollbar-width:none}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher .site-occasion-option:not(#x){position:relative;flex:0 0 auto;min-height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;line-height:28px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher .site-occasion-option.is-selected:not(#x){border-color:var(--accent)}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav:not(#x){grid-column:1/-1;grid-row:3;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin:0;padding:0;border:0}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav>a:not(#x){display:none}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav>.public-nav-actions:not(#x){display:flex;flex-wrap:wrap;width:auto;margin:0;gap:6px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav .public-nav-actions a:not(#x){position:relative;min-height:34px;min-width:0;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;line-height:32px;white-space:nowrap;box-shadow:none}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header :is(.public-language a,.site-occasion-option,.public-nav-actions a)::after{content:"";position:absolute;inset:-6px -2px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header+main .buy-intro:not(#x){padding-top:6px}
 /* Seitenkopf darunter ebenso knapp: Überschrift rückt nach oben, kein doppelter Abstand zum ersten Abschnitt */
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header+main>:is(.page-heading,.contact-section):not(#x),html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header+main .tips-intro:not(#x){padding-top:12px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav .public-nav-actions:not(#x){flex:0 1 auto}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav .public-nav-actions a:not(#x){flex:0 0 auto}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header+main>.page-heading:not(#x){padding-bottom:16px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header+main>.page-heading+.sales-section:not(#x){padding-top:20px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header+main>.page-heading+.faq-section>h2:not(#x){margin-top:8px}
 html.sales-page[data-marketing="true"][data-public-page="business"] body>header>.site-occasion-switcher:not(#x){background:none!important;border:0!important}
 html.sales-page[data-marketing="true"][data-public-page="business"] body>header>.site-occasion-switcher .site-occasion-option:not(#x){border-color:var(--business-line)}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-hero:not(#x){padding-top:14px}
}
/* Nachtrag 13.10.: Kontaktblock der Startseite auch auf den deutschen Unterseiten – schlank, ohne Kasten, mit feiner Linie abgesetzt. */
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) main .contact-invite:not(#x){max-width:820px;margin:12px 0 0;padding:24px 0 8px;border-top:1px solid var(--line);background:none;box-shadow:none}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) main .contact-invite h2:not(#x){max-width:30ch;margin:0 0 10px;font-size:clamp(22px,2.6vw,28px);font-weight:500;line-height:1.18}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) main .contact-invite>p:not(.contact-invite-actions):not(#x){max-width:66ch;margin:0;color:var(--muted);font-size:14px;line-height:1.6}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) main .contact-invite .button:not(#x){position:relative;display:inline-flex;align-items:center;width:auto;min-width:0;min-height:38px;height:38px;padding:0 18px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--ink);font-size:14px;font-weight:500;box-shadow:none}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) main .contact-invite .button::after{content:"";position:absolute;inset:-3px 0}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) main .contact-invite .contact-invite-business:not(#x){font-weight:500}
/* Kritik 13.10. Nr 11: Desktop im Stil der Handy-Seite – nur ab 1024 px, Handy und Tablet bleiben unverändert.
   Produktgeschichte als ruhiger Zweispalter (Text links, 3D-Handy-Karussell rechts); Karussells laufen weich aus. */
@media (min-width:1024px){
 .product-story:has(>.product-story-carousel):not(#x){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(32px,4vw,64px)}
 .product-story:has(>.product-story-carousel)>.section-intro:not(#x){grid-column:1;grid-row:2;margin:0}
 .product-story:has(>.product-story-carousel)>.section-intro h2:not(#x){max-width:16ch}
 .product-story>.product-story-carousel:not(#x){grid-column:2;grid-row:1/-1;margin:0}
 .product-story:has(>.product-story-carousel)>:is(a,.button):not(#x){grid-column:1;grid-row:3;justify-self:start;align-self:start;margin:20px 0 0}
 .product-story .product-story-carousel .v2-story-track:not(#x){--story-w:min(46cqw,300px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
 /* Verwaltung: Kontakt/FAQ-Fußzeile bündig unter der Kopfzeile statt am linken Fensterrand */
 html.operator-workspace body>footer:not(#x){box-sizing:border-box;max-width:1280px;margin-inline:auto;padding-inline:24px}
 .buy-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
}
/* Nachtrag 13.10. zu Kritik Nr 11: Business- und FAQ-Seite am Desktop ruhig und bündig wie die Startseite – nur ab 1024 px,
   Handy und Tablet bleiben unverändert. FAQ als feine Zeilen (wie #start), Lesebreite 820 px, schlanke Knöpfe 38 px. */
@media (min-width:1024px){
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.page-heading:not(#x){max-width:820px;padding-bottom:14px}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section:not(#x){max-width:820px;margin-inline:0;padding-top:18px}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section :is(h3,h2.faq-group):not(#x){margin:26px 0 4px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section details:not(#x){margin:0;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section summary:not(#x){display:list-item;box-sizing:border-box;min-height:44px;padding:11px 2px;font-size:14px;font-weight:500;line-height:1.5}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section details p:not(#x){max-width:68ch;margin:0 0 14px 20px}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.sales-actions:not(#x){max-width:820px;gap:10px}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.sales-actions .button:not(#x){position:relative;min-height:38px;height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:none}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.sales-actions .button::after{content:"";position:absolute;inset:-3px 0}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-hero:not(#x){padding:44px 0 60px}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-page-content h1:not(#x){font-size:clamp(44px,4.4vw,58px)}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-page-content h2:not(#x){font-size:clamp(26px,2.4vw,32px)}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-story:not(#x){padding:52px 0}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-story-copy:not(#x){max-width:440px}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-branding:not(#x){padding:48px 0}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-branding p:not(#x){max-width:58ch;font-size:16px}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-future:not(#x){padding:44px 0}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-future p:not(#x){max-width:62ch}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-final:not(#x){justify-items:start;gap:14px;padding:52px 0 64px;text-align:left}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-final>*:not(#x){max-width:820px}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-final h2:not(#x){max-width:30ch}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-primary-action:not(#x){position:relative;width:auto;min-height:38px;height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500}
 html.sales-page[data-marketing="true"][data-public-page="business"] .business-primary-action::after{content:"";position:absolute;inset:-3px 0}
}

/* Markus 13.10.: Knopfreihen der Unterseiten (Pakete ansehen / So sieht's aus …) überall schlank – auch am Handy textbreit statt halbbreit, 38 px sichtbar, 44 px Fingerfläche. */
html.sales-page .sales-actions:not(#x){display:flex;flex-wrap:wrap;align-items:center;gap:10px}
html.sales-page .sales-actions .button:not(#x){position:relative;width:auto;min-height:38px;height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;line-height:1;box-shadow:none}
html.sales-page .sales-actions .button::after{content:"";position:absolute;inset:-3px 0}

/* Leinwand-QR (Markus 17.10.2026): kleiner Code unten rechts, alle 2 Minuten 8 Sekunden Mitmach-Folie. Nur role=wall, alle Themen gleich aufgebaut. */
.wall-join-corner{position:absolute;right:14px;bottom:14px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 8px 6px;background:#fff;color:#2b2b2b;border:1px solid color-mix(in srgb,var(--line,#ddd) 80%,transparent);border-radius:12px;font-size:clamp(11px,1vw,15px);font-weight:500;line-height:1.2;box-shadow:0 6px 18px #0002}
.wall-join-corner .wall-join-code{width:clamp(88px,11vmin,150px)}
.wall-join-code svg{display:block;width:100%;height:auto}
.wall-join-slide{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:4vmin;background:color-mix(in srgb,var(--paper,#fffaf1) 94%,transparent);color:var(--ink,#402d23);animation:wall-join-in .6s ease both}
.wall-join-card{display:flex;align-items:center;gap:5vmin;max-width:min(92%,1200px)}
.wall-join-slide .wall-join-code{flex:none;width:min(46vmin,520px);padding:2vmin;background:#fff;border:1px solid var(--line,#ddd);border-radius:18px}
.wall-join-text{max-width:30em}
.wall-join-title{margin:0 0 .5em;font-size:clamp(24px,4.4vmin,58px);font-weight:600;line-height:1.12}
.wall-join-hint{margin:0;font-size:clamp(15px,2.2vmin,28px);line-height:1.4;opacity:.82}
.wall-join-password{margin:1.1em 0 0;font-size:clamp(16px,2.6vmin,32px)}
.wall-join-password strong{padding:.1em .45em;border:1px solid var(--line,#ddd);border-radius:8px;letter-spacing:.04em}
@keyframes wall-join-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.wall-join-slide{animation:none}}
@media(max-width:700px),(orientation:portrait){.wall-join-card{flex-direction:column;text-align:center;gap:3vmin}.wall-join-slide .wall-join-code{width:min(60vmin,360px)}}
.wall-settings .wall-join-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.wall-settings .wall-join-toggle input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--accent)}
.wall-settings .wall-join-toggle+.fine{margin-top:0}
.wall-link-hint{flex-basis:100%;margin:2px 0 0;font-size:12px;line-height:1.4;color:var(--muted,inherit)}
/* Kaufformular in zwei Schritten (Online-Zahlung): Daten, dann Übersicht mit Preis, Zahlart und Bestellknopf */
.manual-order .order-step{display:grid;gap:10px}
.manual-order .order-step[hidden],.manual-order .checkline[hidden],.manual-order [data-sum-row][hidden],.manual-order .pay-methods[hidden]{display:none}
.manual-order .order-step-label{margin:0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.manual-order .order-summary{display:grid;gap:6px;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:13.5px}
.manual-order .order-summary>div{display:flex;justify-content:space-between;gap:12px}
.manual-order .order-summary dt{color:var(--muted)}
.manual-order .order-summary dd{margin:0;text-align:right;overflow-wrap:anywhere}
.manual-order .order-summary .order-total{margin-top:4px;padding-top:8px;border-top:1px solid var(--line);align-items:baseline}
.manual-order .order-summary .order-total dt{color:var(--ink);font-weight:600}
.manual-order .order-summary .order-total strong{font-size:17px}
.manual-order .order-summary .order-total small{display:block;font-size:11.5px;color:var(--muted)}
html.sales-page[data-marketing="true"] .buy-order .manual-order .order-back,.manual-order .order-back{justify-self:start;min-height:32px;padding:0;border:0;background:none;color:var(--accent);font:500 13px/1.3 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.manual-order .pay-methods{margin:0;padding:0;border:0;min-width:0}
.manual-order .pay-methods legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:600}
.manual-order .pay-method-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
.manual-order .pay-method{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-height:52px;padding:6px 4px;border:1px solid var(--line);border-radius:10px;font-size:10.5px;line-height:1.2;font-weight:400;text-align:center;color:var(--muted);cursor:pointer}
.manual-order .pay-method img{display:block;width:32px;height:24px}
.manual-order .pay-method span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.manual-order .pay-method input{position:absolute;opacity:0;width:1px;height:1px}
.manual-order .pay-method:has(input:checked){border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)}
.manual-order .pay-method:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.manual-order .order-pay-hint{margin:0;font-size:12px;color:var(--muted)}
/* Website-Prüfung 30.10.2026 (W2, P2 Hero): höchstens zwei Hero-Knöpfe – die Bedienzeile „Entdeckt euer Album“ (mit Strich wie ein
   Textcursor) entfällt im Hero; die Handys rücken dadurch tiefer und verdecken auch bei 320 px keinen Knopf mehr. */
html.sales-page[data-marketing="true"][data-home-theme] #start .homepage-hero-v2 .ambient-scroll:not(#x){display:none}
.ambient-scroll::before{content:none!important}
@media (max-width:760px){
 html.sales-page[data-marketing="true"][data-home-theme] #start .homepage-hero-v2 .v2-phone-anchor:not(#x){bottom:18px}
}
@media (max-width:380px){
 html.sales-page[data-marketing="true"][data-home-theme] #start .homepage-hero-v2 .v2-phone-anchor:not(#x){right:6px;bottom:10px;transform:scale(.8);transform-origin:bottom right}
}
/* Tablet hochkant (alle Anlässe, auch Hochzeit): Hero höher, Handys unten rechts statt mittig neben den Knöpfen. */
@media (min-width:761px) and (max-width:1023px){
 html.sales-page[data-marketing="true"][data-home-theme] #start .homepage-hero-v2.ambient-host:not(#x){height:540px!important;min-height:540px!important}
 html.sales-page[data-marketing="true"][data-home-theme] #start .homepage-hero-v2 .v2-phone-anchor:not(#x){top:auto;bottom:16px;transform:none}
 html.sales-page[data-marketing="true"][data-home-theme] #start .homepage-hero-v2 .v2-hero-copy:not(#x){left:24px;width:min(50%,420px)}
}
/* W4/W5: Unterseitenkopf wie die Startseite – ruhige Textlinks; einzig „Pakete“ ist hervorgehoben, „Ich bin eingeladen“ ist ein
   leiser Textlink. Am Handy kompakt (≤ 140 px): Marke + Sprache, eine Navigationszeile, eine schmale Anlasszeile (beide wischbar). */
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .public-nav .invited-button:not(#x){min-height:36px;padding:0 4px;border:0;border-radius:0;background:none!important;color:var(--business-ink,var(--ink))!important;font-size:13px;font-weight:400;box-shadow:none;text-decoration:none}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .public-nav .invited-button:hover{text-decoration:underline;text-underline-offset:3px}
/* RW7: Ein Kopf für alle Seiten – „Pakete“ ist wie auf der Startseite ein ruhiger Textlink (keine Pille mehr). */
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .public-nav>a[data-theme-shell-field]:not(#x){position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 4px;border:0;border-radius:0;background:none!important;color:var(--business-ink,var(--ink))!important;font-weight:400;text-decoration:none;box-shadow:none}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .public-nav>a[data-theme-shell-field]:hover{text-decoration:underline;text-underline-offset:3px}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .public-nav :is(.public-nav>a,.public-nav-actions a):not(#x){font-size:13px}
html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header .public-nav>a[data-theme-shell-field="packages"]::after{content:"";position:absolute;inset:-4px 0}
@media (max-width:620px){
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header:not(#x){gap:6px 10px;padding-block:6px 8px!important;margin-bottom:4px}
 /* RW6: Wie die Startseite: alle vier Links in vier Spalten, Text bricht um statt abgeschnitten zu werden. */
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav:not(#x){grid-row:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:0 8px;max-width:100%;overflow:visible;padding-block:0;-webkit-mask-image:none;mask-image:none}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav::-webkit-scrollbar{display:none}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav>.public-nav-actions:not(#x){display:contents}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav :is(.public-nav>a,.public-nav-actions a):not(#x){display:flex;align-items:center;justify-content:center;min-width:0;min-height:36px;padding:0;border:0;border-radius:0;background:none!important;color:var(--business-ink,var(--ink))!important;font-size:12px;font-weight:400;line-height:1.25;text-align:center;white-space:normal;overflow-wrap:normal}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher:not(#x){grid-row:3}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher .site-occasion-option:not(#x){min-height:28px;padding:0 11px;line-height:26px}
}
/* W6/W7: Formularmeldungen lesbar auf den dunklen Anlass-Hintergründen (≥ 8:1), Fehler direkt am Feld. */
html.sales-page[data-marketing="true"]:not([data-public-page="business"]) :is(.form-feedback,.discount-status,.contact-feedback)[data-state=error]:not(#x){color:#ffa3a3}
html.sales-page[data-marketing="true"]:not([data-public-page="business"]) :is(.form-feedback,.contact-feedback)[data-state=success]:not(#x){color:#9fe0b8}
html.sales-page[data-marketing="true"] .manual-order .field-error,html.sales-page[data-marketing="true"] .contact-form .field-error{display:block;margin:6px 0 0;color:#ffa3a3;font-size:13px;font-weight:400;line-height:1.35}
html.sales-page[data-marketing="true"] .manual-order input[aria-invalid="true"]:not([type="checkbox"]):not(#x){border-color:#ffa3a3}
html.sales-page[data-marketing="true"] .manual-order .checkline .field-error{flex-basis:100%;margin-left:36px}
/* P3: Zustimmungs-Kästchen 24 px in 40 px Tippfläche. */
html.sales-page[data-marketing="true"] .manual-order .checkline:not(#x){position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;min-height:40px}
html.sales-page[data-marketing="true"] .manual-order .checkline input[type="checkbox"]:not(#x){flex:0 0 24px;width:24px;height:24px;min-height:24px;margin:0;accent-color:var(--accent)}
html.sales-page[data-marketing="true"] .manual-order .checkline>:not(input):not(.field-error){flex:1 1 0;min-width:0}
@media (max-width:380px){
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav:not(#x){gap:0 4px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher:not(#x){gap:4px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher .site-occasion-option:not(#x){padding:0 8px;font-size:12px}
}
/* W10: Vertrauenszeile nahe am Preis – nur Text, klein und ruhig, mittig unter dem Paket-Karussell. */
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;max-width:760px;margin:14px auto 0;padding:0;list-style:none;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}
.trust-row li{display:inline-block;margin:0;padding:0}
.trust-row li+li::before{content:"·";margin:0 8px;color:var(--accent);opacity:.8}
.trust-row a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.trust-row a:hover{color:var(--ink)}
@media (max-width:620px){.trust-row{justify-content:flex-start;max-width:none;margin-inline:0;text-align:left;font-size:12px}}
/* W11/P2 Kaufseite: nur aktives Handy und die direkten Nachbarn sichtbar (vorher Business Branding am rechten Rand
   abgeschnitten); Empfehlungs-Etikett sitzt unter dem Screenshot statt darauf. */
.buy-slide.is-far{visibility:hidden}
.buy-shot:not(#x){height:24%}
.buy-card:not(#x){margin-top:6px}
/* R5 W1 Kaufseite 320/360: Das Handy behält 9:16 als Mindesthöhe, wächst aber mit dem Inhalt – der Paketknopf wird nie
   vom abgerundeten Bildschirm (overflow:hidden) abgeschnitten. Bildhöhe über Containerbreite statt Prozent der Höhe. */
.buy-slide{container-type:inline-size}
.buy-phone:not(#x){display:flex;flex-direction:column;aspect-ratio:auto;min-height:calc(100cqw * 16 / 9)}
.buy-screen:not(#x){height:auto;flex:1 0 auto}
.buy-shot:not(#x){height:calc(42cqw - 4px)}
/* P2 Kontakt: Formular ist die Hauptaktion; der Mail-Link darüber ist ein leiser Textlink, keine Themen-Etiketten mehr. */
html.sales-page[data-marketing="true"] .contact-section .contact-direct-link:not(#x){display:inline-flex;align-items:center;min-height:32px;margin:6px 0 0;color:var(--muted);font-size:13px;font-weight:400;text-decoration:underline;text-underline-offset:2px}
html.sales-page[data-marketing="true"] .contact-section .contact-direct-link+.contact-direct-note:not(#x){margin-top:2px}
/* P3: „by MaJeMiLu Design“ mit ausreichender Tippfläche (24 px sichtbar, 44 px über unsichtbaren Rand). */
.brand-credit a:not(#x){position:relative;display:inline-block;min-height:24px;line-height:24px}
.brand-credit a::after{content:"";position:absolute;inset:-10px -4px}

/* RW8: Gefüllte Knöpfe überall sichtbar 38 px wie auf /kaufen (Hero, Paketkarten, Kontaktblock, Kontaktformular); 44 px Tippfläche über unsichtbaren Rand. */
html.sales-page[data-marketing="true"] :is(#start .v2-hero-link,.v2-package-action,main .contact-invite .button,.contact-form-actions button):not(#x):not(#y){position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:38px;height:38px;padding-block:0;box-sizing:border-box}
html.sales-page[data-marketing="true"] :is(#start .v2-hero-link,.v2-package-action,main .contact-invite .button,.contact-form-actions button)::after{content:"";position:absolute;inset:-3px 0}
/* RW14: Paketfakten am Handy ohne doppelten Paketnamen; „Gäste, Speicher & Aufbewahrung“ als schlanker Textlink statt Kasten. */
@media (max-width:760px){html.sales-page[data-marketing="true"] #start .v2-package-facts-head strong:not(#x){display:none}}
html.sales-page[data-marketing="true"] #start .v2-pricing .package-boundaries:not(#x):not(#y){margin:12px auto 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:center}
html.sales-page[data-marketing="true"] #start .v2-pricing .package-boundaries summary:not(#x):not(#y){display:inline-flex;align-items:center;min-height:32px;padding:0;border:0;background:none;color:var(--home-ink,var(--ink));font-size:13px;font-weight:400;text-decoration:underline;text-underline-offset:3px;list-style:none;cursor:pointer}
html.sales-page[data-marketing="true"] #start .v2-pricing .package-boundaries summary::-webkit-details-marker{display:none}
html.sales-page[data-marketing="true"] #start .v2-pricing .package-boundaries[open] p:not(#x){max-width:560px;margin:6px auto 0;text-align:left}
/* RW21: Aufklapper wie „Rabattcode?“ mindestens 32 px hoch (Tippfläche 44 px). */
html.sales-page[data-marketing="true"] .manual-order .discount-entry summary:not(#x){position:relative;box-sizing:border-box;min-height:32px;padding-block:6px;line-height:20px}
html.sales-page[data-marketing="true"] .manual-order .discount-entry summary::after{content:"";position:absolute;inset:-6px 0}
/* F6: FAQ-Fragen ohne native Dreiecke, kleiner Pfeil wie bei den anderen Aufklappern. */
html.sales-page[data-marketing="true"] .faq-section summary:not(#x):not(#y){display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}
html.sales-page[data-marketing="true"] .faq-section summary:not(#x):not(#y)::marker{content:none}
html.sales-page[data-marketing="true"] .faq-section summary:not(#x):not(#y)::-webkit-details-marker{display:none}
html.sales-page[data-marketing="true"] .faq-section summary:not(#x):not(#y)::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;opacity:.7;transform:translateY(-2px) rotate(45deg)}
html.sales-page[data-marketing="true"] .faq-section details[open]>summary:not(#x):not(#y)::after{transform:translateY(2px) rotate(-135deg)}
/* F8: „Einlösen“/„Toepassen“ und „Alles klar“ sichtbar 38 px, Tippfläche 44 px über unsichtbaren Rand. */
html.sales-page[data-marketing="true"] :is(.manual-order .discount-apply,dialog.entry-help>button):not(#x):not(#y){position:relative;box-sizing:border-box;min-height:38px;padding-block:0}
html.sales-page[data-marketing="true"] dialog.entry-help>button:not(#x):not(#y){padding:0 16px}
html.sales-page[data-marketing="true"] :is(.manual-order .discount-apply,dialog.entry-help>button):not(#x):not(#y)::after{content:"";position:absolute;inset:-3px 0}
/* R4 Website: Paket-Überschrift mittig über dem mittigen Karussell (vorher nur im 850-px-Kasten zentriert, also links versetzt). */
@media (min-width:721px){html.sales-page[data-marketing="true"] #start .v2-pricing .section-intro h2:not(#x){margin-inline:auto}}
/* R4: Paketfakten ohne doppelte Linie (Zählerbalken + Rahmen); Balken stehen bündig unten, auch bei zweizeiliger Beschriftung. */
html.sales-page[data-marketing="true"] #start .v2-fact:not(#x){display:flex;flex-direction:column;border-bottom:0;padding-bottom:6px}
html.sales-page[data-marketing="true"] #start .v2-fact-label:not(#x){margin-bottom:8px}
html.sales-page[data-marketing="true"] #start .v2-fact-bar:not(#x){margin-top:auto}
/* R4: Vertrauenszeile – Trennpunkte nie am Zeilenanfang (der Punkt vor dem ersten Eintrag jeder Zeile liegt außerhalb des Ausschnitts). */
.trust-row:not(#x){justify-content:flex-start;max-width:none;margin:14px 0 0 -17px;clip-path:inset(-6px -6px -6px 17px);text-align:left}
.trust-row li::before,.trust-row li+li::before{content:"·";display:inline-block;width:17px;margin:0;text-align:center}
@media (min-width:1024px){.trust-row:not(#x){justify-content:center;margin:14px auto 0;clip-path:none}.trust-row li:first-child::before{content:none}}
/* R4: Aufklapper „Meine Feier freischalten“ und „Rabattcode?“ mit kleinem Pfeil wie die FAQ statt nativem Dreieck. */
html.sales-page[data-marketing="true"] :is(#start .setup-section .clarity-setup,.manual-order .discount-entry)>summary:not(#x):not(#y){display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer}
html.sales-page[data-marketing="true"] #start .setup-section .clarity-setup>summary:not(#x):not(#y){justify-content:space-between}
html.sales-page[data-marketing="true"] :is(#start .setup-section .clarity-setup,.manual-order .discount-entry)>summary::-webkit-details-marker{display:none}
html.sales-page[data-marketing="true"] :is(#start .setup-section .clarity-setup,.manual-order .discount-entry)>summary::marker{content:none}
html.sales-page[data-marketing="true"] #start .setup-section .clarity-setup>summary::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;opacity:.7;transform:translateY(-2px) rotate(45deg)}
html.sales-page[data-marketing="true"] #start .setup-section .clarity-setup[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
html.sales-page[data-marketing="true"] .manual-order .discount-entry>summary::before{content:"";flex:none;width:6px;height:6px;border:solid var(--accent,currentColor);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .15s ease}
html.sales-page[data-marketing="true"] .manual-order .discount-entry[open]>summary::before{transform:translateY(-2px) rotate(45deg)}
/* R4: Rabattcode-Feld ohne Formular-Außenabstand, damit „Einlösen“ mittig daneben steht. */
html.sales-page[data-marketing="true"] .manual-order .discount-row input:not(#x){margin:0}
/* R4 FAQ-Seite: auch am Handy und Tablet feine Zeilen wie die Fragen auf der Startseite (vorher fette Karten mit 4 px Innenrand). */
@media (max-width:1023px){
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section :is(h3,h2.faq-group):not(#x){margin:24px 0 2px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section details:not(#x){margin:0;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section summary:not(#x):not(#y){box-sizing:border-box;min-height:44px;padding:11px 2px;font-size:14px;font-weight:500;line-height:1.5}
 html.sales-page[data-marketing="true"][data-public-page="faq"] main>.faq-section details p:not(#x){margin:0 0 14px 2px}
}
/* R4 Unterseiten: Schrittnummern bündig mit der Überschrift (vorher mittig in einer unsichtbaren 38-px-Kachel, also eingerückt);
   Pfeil hinter Textlinks mit kleinem Abstand (im inline-flex fiel das Leerzeichen weg: „an↗“). */
html.sales-page[data-marketing="true"] main .step-symbol:not(#x){width:auto;height:auto;min-height:24px;place-items:center start;border-radius:0}
html.sales-page[data-marketing="true"] main a.text-link{column-gap:.35em}
/* R4 Kontakt: Einwilligungs-Kästchen 24 px wie auf der Kaufseite; „oder E-Mail-Programm öffnen“ bündig mit dem Formular. */
html.sales-page[data-marketing="true"] .contact-consent input[type="checkbox"]:not(#x){flex:0 0 24px;width:24px;height:24px;min-height:24px;margin:0;accent-color:var(--accent)}
html.sales-page[data-marketing="true"] .contact-form-actions .contact-mail-link:not(#x){padding-inline:0}
/* R4 Kaufseite: „Ausgewählt: … ändern“ so breit wie das Bestellformular darunter (vorher textbreit, rechte Kante sprang). */
html.sales-page[data-marketing="true"] .buy-order .purchase-package:has(>.purchase-package-change):not(#x){display:flex;justify-content:space-between;width:100%;box-sizing:border-box}
/* R4 Kaufseite: Kontaktblock und „Wichtige Informationen“ in derselben 560-px-Spalte wie Formular und Vergleich. */
html.sales-page[data-marketing="true"][data-public-page="purchase"] main>.contact-invite:not(#x):not(#y){max-width:560px;margin-inline:auto}
html.sales-page[data-marketing="true"][data-public-page="purchase"] main>.buy-legal:not(#x):not(#y){padding:0}
/* R4 Fußzeile: Links nur textbreit (vorher 44 px Mindestbreite, „AGB“ stand dadurch mit größerer Lücke). */
.sales-page body>footer nav a:not(#x){min-width:0}
/* R4: Pfeile unter den App-Ansichten wie beim Paket-Karussell: kleine runde Knöpfe (36 px, Tippfläche 44 px). */
html.sales-page[data-marketing="true"] #start .v2-story-controls button:not(#x):not(#y){position:relative;width:36px;height:36px;min-width:36px;min-height:36px;border-radius:50%;background:transparent;font-size:19px}
html.sales-page[data-marketing="true"] #start .v2-story-controls button::after{content:"";position:absolute;inset:-4px}
/* R4: Paket-Karussell am Handy randlos und symmetrisch (vorher links 10 px, rechts 30 px Rand – die Nachbarhandys waren ungleich abgeschnitten). */
@media (max-width:620px){html.sales-page[data-marketing="true"] #start .v2-package-carousel:not(#x){max-width:none;margin-inline:-16px;overflow:clip}html.sales-page[data-marketing="true"] #start .v2-package-carousel .v2-carousel-controls:not(#x){left:12px;right:12px}}
/* R4: Bei 320 px stand „2 ·“ allein über dem Paketnamen – Name etwas kleiner, damit Nummer und Name eine Zeile bleiben. */
@media (max-width:360px){html.sales-page[data-marketing="true"] #start .v2-package-info h3:not(#x){font-size:23px}}
/* R4: Handys mit echter (dunkler) App-Ansicht zeigen beim Nachladen dunklen statt cremefarbenen Grund – kein heller Blitz beim Scrollen. */
html.sales-page[data-marketing="true"] #start .v2-device-screen:has(>.v2-real-screen){background:var(--home-bg,#0b1020)}
/* R4 Event-Startseite: Das einzelne Paket (Unvergesslich) nutzt die volle Breite. Vorher stand es in einem Drittel des
   dreispaltigen Rasters – ab 768 px brach die Beschreibung Wort für Wort um („Für / Messen, / …“). */
html.sales-page[data-marketing="true"] #start .v2-package-carousel.is-single .v2-package-track:not(#x){display:block}
html.sales-page[data-marketing="true"] #start .v2-package-carousel.is-single .v2-package-slide:not(#x){width:100%;box-sizing:border-box}
/* R4: Paketpunkte im Handy auf ruhigem, fast deckendem Grund (vorher schien die App-Liste durch die Überschrift). */
.v2-package-display:not(#x){padding-top:30px;background:linear-gradient(transparent,#07111df2 22%,#07111dfa 100%)}
/* R5 W6: Eine Formularsprache für Code-Eingabe (Start), Kontakt und Kaufen – gleicher schlanker Hauptknopf (.button.primary,
   sichtbar 40 px, Pille, Akzentfläche; am Handy der eine volle Absendeknopf), gleiche Beschriftung und Feldhöhe. */
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) .button.primary{display:inline-flex;align-items:center;justify-content:center;justify-self:start;align-self:flex-start;width:auto;min-height:40px;height:auto;margin-top:4px;padding:0 24px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--onaccent,#1c1712);font-size:14px;font-weight:500;line-height:1.2;letter-spacing:0;text-transform:none;box-shadow:none}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) .button.primary:hover{filter:brightness(1.06)}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) .button.primary:disabled{opacity:.6;cursor:wait}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) .button.primary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) label:not(.checkline,.contact-consent){display:grid;gap:6px;font-size:13px;font-weight:500;line-height:1.35;color:var(--ink)}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) :is(input:not([type=checkbox],[type=radio],[type=hidden]),select){box-sizing:border-box;height:44px;min-height:44px;margin:0;padding:0 12px;border-radius:10px;font-size:16px;font-weight:400}
/* Audit F1 31.10.: Feldraster ohne Abstand zum Nachrichtenfeld (Feldern fehlt seit W6 ihr Außenabstand) – gleicher Abstand wie im Raster. */
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) #contact-form .contact-form-grid{margin-bottom:12px}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) textarea{border-radius:10px;font-size:16px;font-weight:400}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) ::placeholder{font-weight:400}
@media (max-width:620px){html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c) :is(#activate,#contact-form,#order-form) .button.primary{justify-self:stretch;align-self:stretch;width:100%}}
/* R5 W5: Bestellanfrage eingegangen – ruhige Erfolgskarte statt kleiner grüner Zeile. */
html.sales-page[data-marketing="true"] .order-success{margin:4px 0 0;padding:18px 18px 14px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--ink)}
html.sales-page[data-marketing="true"] .order-success h3{margin:0 0 6px;font-size:18px;font-weight:500;line-height:1.3;letter-spacing:-.01em;outline:none}
html.sales-page[data-marketing="true"] .order-success-number{margin:0 0 12px;font-size:14px;color:var(--muted)}
html.sales-page[data-marketing="true"] .order-success-number strong{font-family:inherit;font-weight:600;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums}
html.sales-page[data-marketing="true"] .order-success-next{margin:0 0 4px;font-size:13px;font-weight:500}
html.sales-page[data-marketing="true"] .order-success ol{margin:0 0 12px;padding-left:20px;font-size:13.5px;line-height:1.5;color:var(--muted)}
html.sales-page[data-marketing="true"] .order-success ol li+li{margin-top:4px}
html.sales-page[data-marketing="true"] .order-success-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin:0}
html.sales-page[data-marketing="true"] .order-success-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--accent);font-size:13.5px;text-underline-offset:3px}
html.sales-page[data-marketing="true"]:not(#v2040):not(#v2040b) .order-success-again{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;box-shadow:none;color:var(--muted);font-size:13px;font-weight:400;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
html.sales-page[data-marketing="true"] .order-success-local{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* R5 W9 Start ≤360 px: Hero-Knöpfe enger (kein 16-px-Abstand je Knopf, passen am 320er nebeneinander) und der
   Umriss-Knopf „Gratis ausprobieren“ bekommt einen dunklen Schleier, damit er auf hellen Fotostellen lesbar bleibt. */
@media (max-width:620px){html.sales-page[data-marketing="true"][data-home-theme]:not(#r5a) #start .homepage-hero-v2 .v2-hero-actions>.v2-demo-link{background-color:#0b0d14a6!important;border-color:color-mix(in srgb,var(--home-accent,var(--accent)) 60%,#fff 10%)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
@media (max-width:360px){html.sales-page[data-marketing="true"][data-home-theme]:not(#r5a) #start .homepage-hero-v2 .v2-hero-actions{gap:8px!important;margin-top:14px!important}
 html.sales-page[data-marketing="true"][data-home-theme]:not(#r5a) #start .homepage-hero-v2 .v2-hero-actions>.v2-hero-link{margin:0!important}}
/* F12: Trenner und zweiter Link bleiben zusammen – kein einzelner Punkt am Zeilenende (/kopen 360). */
.nowrap-pair{white-space:nowrap}
/* R8 W5: Sprachpille überall gleich schlank (36x32 sichtbar, 44 px Tippfläche über den Rand) – auch auf der Startseite. */
html.sales-page[data-marketing="true"][data-public-page="home"] body>header>.public-language:not(#x){padding:2px}
html.sales-page[data-marketing="true"][data-public-page="home"] body>header>.public-language a:not(#x){position:relative;min-width:36px;min-height:32px;padding:0 8px;font-size:12px}
html.sales-page[data-marketing="true"][data-public-page="home"] body>header>.public-language a::after{content:"";position:absolute;inset:-6px -2px}
/* R8 W5: Unterseitenkopf am Handy knapper (ca. 105 statt 131 px): engere Zeilenabstände, Links ohne Extrapolster. */
@media (max-width:620px){
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header:not(#x){gap:2px 10px;padding-block:4px 6px!important;margin-bottom:0}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.brand:not(#x){min-height:36px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav :is(.public-nav>a,.public-nav-actions a):not(#x){min-height:32px;line-height:1.2}
}
/* R8 W2: Code-Formular (#einrichten) mit demselben Feldabstand wie das Bestellformular. */
html.sales-page[data-marketing="true"] #activate.panel:not(#x){display:grid;gap:14px}
html.sales-page[data-marketing="true"][data-public-page] body>header>.public-language:not(#x){padding:2px}
html.sales-page[data-marketing="true"][data-public-page] body>header>.public-language a:not(#x){position:relative;min-width:36px;min-height:32px;padding:0 8px;font-size:12px}
html.sales-page[data-marketing="true"][data-public-page] body>header>.public-language a::after{content:"";position:absolute;inset:-6px -2px}
@media (min-width:621px) and (max-width:1050px){
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header:not(#x){gap:0 10px;padding-block:6px 4px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.site-occasion-switcher .site-occasion-option:not(#x){min-height:32px;padding-block:0;line-height:30px}
 html.sales-page[data-marketing="true"][data-public-page]:not([data-public-page="home"]) body>header>.public-nav a:not(#x){min-height:36px}
}
/* R8 W12: Rechtstexte mit 16 px Fließtext (alle Anlässe; Audit F4 31.10.: auch am Desktop, dort überschrieben die
   Anlass-Stile mit 14 px); Drucken-Knopf wie die übrigen schlanken Website-Knöpfe. */
html.sales-page[data-marketing="true"] :is(.legal-page,.legal-document):not(#x) :is(p,li,address,.legal-lead):not(.legal-version,.legal-date,.eyebrow){font-size:16px;line-height:1.65}
html.sales-page[data-marketing="true"] :is(.legal-page,.legal-document):not(#x) :is(.legal-provider,.legal-contact,.legal-toc,.legal-contents) :is(p,li,address,strong,a){font-size:16px}
html.sales-page[data-marketing="true"] .legal-print:not(#x){position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-top:8px;padding:0 18px;border:1px solid var(--accent);border-radius:100px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer}
html.sales-page[data-marketing="true"] .legal-print:not(#x)::after{content:"";position:absolute;inset:-2px 0}
html.sales-page[data-marketing="true"] .legal-print:not(#x):hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* Prüfung 31.10.2026 F7: „Worum geht’s?“ wie die Eingabefelder – ohne Browser-Innenabstand, gleiche Schrift; Pfeil per CSS (CSP erlaubt keine data:-Bilder). */
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c):not(#r10) #contact-form label:has(>select){position:relative}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c):not(#r10) #contact-form label>select{appearance:none;-webkit-appearance:none;padding:0 36px 0 12px;font:inherit;font-size:16px;font-weight:400;line-height:normal;cursor:pointer}
html.sales-page[data-marketing="true"]:not(#r5a):not(#r5b):not(#r5c):not(#r10) #contact-form label:has(>select)::after{content:"";position:absolute;right:16px;bottom:19px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.75;pointer-events:none}