*{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%}html{touch-action:manipulation}:root{--primary:#5b6abf;--primary-dark:#4c5aa8;--primary-light:#eef0fb;--success:#3d9a6e;--success-dark:#348760;--success-light:#edf8f3;--success-border:#b0ddc6;--danger:#d45454;--danger-light:#fdf0f0;--danger-border:#f0b8b8;--warning:#c07d28;--warning-light:#fdf6ec;--bg:#f5f6f8;--card:#ffffff;--text:#1a1a2e;--text-secondary:#4a5568;--text-muted:#6b7684;--border:#e4e7ec;--gray:#767f8c;--gray-light:#edf0f2;--shadow-sm:0 1px 3px rgba(0,0,0,0.06);--shadow-md:0 4px 14px rgba(0,0,0,0.08);--shadow-lg:0 8px 32px rgba(0,0,0,0.12);--accent-warm:#d4a056;--accent-warm-dark:#b8893f;--accent-warm-light:#fbf3e2;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-display:var(--font-body)}@media (prefers-color-scheme:dark){:root{--primary:#7b8ad4;--primary-dark:#6a79c8;--primary-light:#2a2d45;--success:#4db881;--success-dark:#3da36e;--success-light:#1a2e22;--success-border:#2d5a3e;--danger:#e06b6b;--danger-light:#2e1a1a;--danger-border:#5a2d2d;--warning:#d4963a;--warning-light:#2e2518;--bg:#121318;--card:#1a1b23;--text:#e4e6ee;--text-secondary:#a0a8b8;--text-muted:#6b7588;--border:#2a2d3a;--gray:#555d6e;--gray-light:#22242e;--shadow-sm:0 1px 3px rgba(0,0,0,0.2);--shadow-md:0 4px 14px rgba(0,0,0,0.25);--shadow-lg:0 8px 32px rgba(0,0,0,0.35);--accent-warm:#e0b46a;--accent-warm-dark:#c89a4d;--accent-warm-light:#2e2618;color-scheme:dark}.modal-content{box-shadow:0 16px 48px rgba(0,0,0,0.4)}}body{font-family:var(--font-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);background:var(--bg);color:var(--text);min-height:100vh;padding:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column}a{color:var(--primary)}input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.6rem 1.25rem;border-radius:var(--radius-md);font-size:0.925rem;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:background 0.15s,box-shadow 0.15s,transform 0.15s;white-space:nowrap;color:white;background:var(--primary)}@media (hover:hover){.btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}}.btn:active{transform:translateY(0);box-shadow:none}.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.btn:disabled{background:var(--gray);cursor:not-allowed;transform:none;box-shadow:none;opacity:0.7}.btn-primary{background:var(--primary)}.btn-success{background:var(--success)}.btn-danger{background:var(--danger)}@media (hover:hover){.btn-primary:hover{background:var(--primary-dark)}.btn-success:hover{background:var(--success-dark)}.btn-danger:hover{background:#c24545}}.btn-secondary{background:var(--card);color:var(--text-secondary);border:1px solid var(--border)}@media (hover:hover){.btn-secondary:hover{background:var(--bg);border-color:var(--gray);transform:none;box-shadow:none}}.btn-sm{padding:0.4rem 0.85rem;font-size:0.82rem}.btn-lg{padding:0.8rem 1.75rem;font-size:1rem}.toast-container{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column-reverse;align-items:center;gap:0.5rem;pointer-events:none;width:max-content;max-width:calc(100% - 2rem)}.toast{display:flex;align-items:center;gap:0.5rem;padding:0.7rem 1.25rem;border-radius:12px;font-size:0.9rem;font-weight:500;line-height:1.4;pointer-events:auto;box-shadow:var(--shadow-lg);animation:toastIn 0.35s cubic-bezier(0.21,1.02,0.73,1) forwards;max-width:100%;text-align:left;position:relative;overflow:hidden}.toast-icon{flex-shrink:0;width:18px;height:18px}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,0.35);border-radius:0 0 12px 12px;animation:toastProgress var(--toast-duration,2.5s) linear forwards}@keyframes toastProgress{from{width:100%}to{width:0%}}.toast.hiding{animation:toastOut 0.25s ease forwards}.toast.success{background:var(--success);color:#fff}.toast.error{background:var(--danger);color:#fff}.toast.warning{background:var(--warning);color:#fff}.toast.info{background:var(--primary);color:#fff}@keyframes toastIn{from{opacity:0;transform:translateY(0.75rem) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(0.75rem) scale(0.95)}}.form-group{display:flex;flex-direction:column;gap:0.4rem}.form-group label{font-weight:500;color:var(--text);font-size:0.875rem}.form-input{padding:0.6rem 0.75rem;border:1px solid var(--border);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;width:100%;color:var(--text);background:var(--card);transition:border-color 0.15s,box-shadow 0.15s}.form-control.input-error,.form-input.input-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(212,84,84,0.12)}.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,106,191,0.1)}.form-input:focus-visible{outline:2px solid var(--primary);outline-offset:-1px}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.4);animation:fadeIn 0.2s ease}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{background-color:var(--card);border-radius:12px;width:90%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 16px 48px rgba(0,0,0,0.16);animation:slideIn 0.25s ease}.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.15rem;font-weight:600;margin:0}.modal-close,.close{font-size:1.5rem;cursor:pointer;color:var(--gray);line-height:1;padding:0.25rem;border:none;background:none;font-family:inherit}@media (hover:hover){.modal-close:hover,.close:hover{color:var(--text)}}.modal-body{padding:1.25rem 1.5rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:0.5rem}@keyframes spin{to{transform:rotate(360deg)}}.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite;vertical-align:middle;margin-right:4px}.footer{text-align:center;padding:1.5rem 1rem;margin-top:2rem;font-size:0.8rem;color:var(--gray)}.footer a{color:inherit;text-decoration:none}@media (hover:hover){.footer a:hover{color:var(--text-muted)}}.text-muted{color:var(--text-muted)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}body.page-loading>*:not(.topbar){opacity:0;animation:pageRevealFallback 0s ease forwards;animation-delay:2s}body.page-loading .topbar{opacity:1}body.page-ready>*{animation:fadeIn 0.25s ease forwards}@keyframes pageRevealFallback{to{opacity:1}}.skeleton{background:linear-gradient(90deg,var(--gray-light) 25%,#e8ebee 50%,var(--gray-light) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px}@media (prefers-color-scheme:dark){.skeleton{background:linear-gradient(90deg,var(--gray-light) 25%,#2a2d38 50%,var(--gray-light) 75%);background-size:200% 100%}}.skeleton-text{height:0.9rem;width:60%;margin-bottom:0.4rem}.skeleton-text-sm{height:0.75rem;width:40%}.gallery-skeleton{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.gallery-skeleton-item{aspect-ratio:1;background:linear-gradient(90deg,var(--gray-light) 25%,#e8ebee 50%,var(--gray-light) 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:6px}@media (prefers-color-scheme:dark){.gallery-skeleton-item{background:linear-gradient(90deg,var(--gray-light) 25%,#2a2d38 50%,var(--gray-light) 75%);background-size:200% 100%}}@keyframes cardEntry{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:cardEntry 0.35s cubic-bezier(0.21,1.02,0.73,1) both}.animate-in:nth-child(1){animation-delay:0ms}.animate-in:nth-child(2){animation-delay:50ms}.animate-in:nth-child(3){animation-delay:100ms}.animate-in:nth-child(4){animation-delay:150ms}.animate-in:nth-child(5){animation-delay:200ms}.animate-in:nth-child(6){animation-delay:250ms}.animate-in:nth-child(7){animation-delay:300ms}.animate-in:nth-child(8){animation-delay:350ms}@keyframes galleryItemIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}.gallery-item{animation:galleryItemIn 0.3s ease both}.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 1.25rem;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);box-shadow:0 1px 3px rgba(0,0,0,0.12)}/* Wortmarke: Montserrat Regular wie im Druck (Visitenkarte, Tischkarte, OG-Bild) — lokal ausgeliefert, nur der Latin-Schnitt 400 (38 KB), font-display swap. Vorher lief sie in der Systemschrift (SF/Segoe/Roboto) und sah auf jedem Gerät anders aus als auf dem Gedruckten daneben (Befund 2026-09-12). */@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/Montserrat-400-latin.woff2) format('woff2')}.topbar-brand{font-family:'Montserrat',var(--font-body);font-size:1.15rem;font-weight:400;color:white;text-decoration:none;letter-spacing:0.02em;display:flex;align-items:center;gap:0.4rem}.brand-logo{height:1.2em;width:auto;filter:brightness(0) invert(1)}.brand-logo-dark{filter:none;opacity:0.55}.brand-logo-lg{height:1.2em}@media (hover:hover){.topbar-brand:hover{color:white}}.topbar-greeting{margin-left:auto;font-size:0.9rem;font-weight:500;color:rgba(255,255,255,0.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-greeting-center{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}.event-heading{font-size:1.5rem;font-weight:700;color:var(--text);margin:0.5rem 0 0.25rem 0;word-break:break-word;letter-spacing:-0.02em;line-height:1.3}.topbar-back{display:flex;align-items:center;gap:0.25rem;font-size:0.9rem;font-weight:500;color:rgba(255,255,255,0.9);text-decoration:none;cursor:pointer;border:none;background:none;padding:0;font-family:inherit;transition:color 0.15s}@media (hover:hover){.topbar-back:hover{color:white}}.topbar-back svg{width:18px;height:18px}.topbar-actions{display:flex;align-items:center;gap:0.5rem;margin-left:auto;flex-shrink:1;min-width:0}.topbar-email{font-size:0.8rem;color:rgba(255,255,255,0.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.topbar-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);border:none;background:transparent;color:rgba(255,255,255,0.9);cursor:pointer;transition:color 0.15s;padding:0}@media (hover:hover){.topbar-btn:hover{color:white}}.topbar-btn svg{width:20px;height:20px}.topbar-detail-label,.topbar-title{margin-left:auto;font-size:0.95rem;color:rgba(255,255,255,0.9);font-weight:500;letter-spacing:0.03em}.page-hero-title{font-size:1.75rem;font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--text);margin-bottom:0.5rem}.topbar-link{display:inline-flex;align-items:center;gap:0.35rem;font-size:0.9rem;font-weight:500;color:rgba(255,255,255,0.9);text-decoration:none;padding:0.35rem 0.75rem;border-radius:6px;transition:background 0.15s,color 0.15s}.topbar-link-access{line-height:1}.topbar-link-access svg{display:block;flex-shrink:0}.topbar-link .topbar-link-label{text-box-trim:trim-both;text-box-edge:cap alphabetic}/* Topbar-Link-Label: Text-Box auf Grossbuchstabenhoehe/Grundlinie getrimmt, damit die Flex-Mitte die optische Textmitte trifft - schriftneutral (Systemschrift-Kette: Segoe/SF/Roboto haben verschiedene Ober-/Unterlaengen). Ersetzt den festen top:-1px, der nur auf Windows stimmte und Text auf Mac/iOS/Android ~1 px zu hoch setzte (Befund 2026-09-08). Safari 18.2+/Chrome 133+; andere Browser ignorieren die Zeile und zentrieren die volle Zeilenbox. */@media (hover:hover){.topbar-link:hover{background:rgba(255,255,255,0.15);color:white}}.content{padding:1.5rem}a:focus-visible,.topbar-btn:focus-visible,.topbar-brand:focus-visible,.topbar-back:focus-visible,.topbar-link:focus-visible{outline:2px solid rgba(255,255,255,0.9);outline-offset:2px;border-radius:4px}.gallery-section{margin-top:1.5rem;margin-bottom:1.5rem}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.gallery-item{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--gray-light);border-radius:6px}@media (hover:hover){.gallery-item:hover{opacity:0.85}}.gallery-item img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.3s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none}.gallery-item img.loaded{opacity:1}.gallery-item-name{position:absolute;bottom:0;left:0;right:0;padding:16px 6px 4px;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 100%);color:rgba(255,255,255,0.85);font-size:clamp(0.65rem,1.8vw,0.95rem);font-weight:500;white-space:nowrap;overflow:hidden;mask-image:linear-gradient(to right,black 80%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 80%,transparent 100%);pointer-events:none;line-height:1}.btn-download-zip{background:var(--primary);color:white;border:none;padding:0.4rem 0.85rem;border-radius:var(--radius-md);cursor:pointer;font-size:0.82rem;font-weight:500;font-family:inherit;transition:background 0.15s}@media (hover:hover){.btn-download-zip:hover{background:var(--primary-dark)}}.btn-download-zip:disabled{opacity:0.6;cursor:progress}.btn-download-zip.is-locked{opacity:0.5}@media (hover:hover){.btn-download-zip.is-locked:hover{background:var(--primary)}}.zip-btn-wrap{position:relative;display:inline-block}.zip-locked-popover{display:none;position:absolute;top:calc(100% + 0.5rem);right:0;width:240px;padding:0.75rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,0.10);font-size:0.82rem;color:var(--text-muted);line-height:1.5;z-index:20;text-align:left}.zip-locked-popover.open{display:block}.btn-download-zip.uploading{display:inline-flex;align-items:center;justify-content:center}.btn-download-zip.uploading .btn-spinner{vertical-align:baseline;margin-top:0}@media (max-width:768px){body{padding:0}.content{padding:1.25rem}}.landing-footer{border-top:1px solid var(--border);padding:1.5rem;margin-top:auto}.footer-row{max-width:880px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem}.footer-brand{font-family:'Montserrat',var(--font-body);font-weight:400;font-size:0.85rem;letter-spacing:0.02em;color:var(--text-secondary);display:flex;align-items:center;gap:0.35rem}.footer-nav{display:flex;gap:1.25rem}.footer-nav a{font-size:0.8rem;color:var(--text-muted);text-decoration:none}@media (hover:hover){.footer-nav a:hover{color:var(--text)}}.footer-copy{font-size:0.75rem;color:var(--gray)}@media (max-width:768px){.footer-row{flex-direction:column;text-align:center}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}.btn-spinner{animation:spin 0.6s linear infinite !important}.spinner{animation:spin 1s ease-in-out infinite !important}.pending-spinner{animation:pending-spin 0.9s linear infinite !important}.pending-ring-wrap::after{animation:pending-spin 0.9s linear infinite !important}.lightbox-slide-spinner{animation:lightbox-spin 0.7s linear infinite !important}.skeleton,.gallery-skeleton-item{animation:shimmer 1.5s ease-in-out infinite !important}}
/* ===== Quick-Win additions ===== */
.font-display{font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-0.015em}
.event-heading{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);box-shadow:var(--shadow-sm)}
.card-quiet{background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)}
.card-feature{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md)}
.card-hero{position:relative;background:var(--card);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-lg);overflow:hidden}
.hero-gradient-overlay{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(to top,rgba(0,0,0,0.62) 0%,rgba(0,0,0,0.25) 55%,transparent 100%);pointer-events:none;z-index:1}
.hero-content-on-image{position:relative;z-index:2;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.3)}
/* Status pills: bigger, more padding */
.status-pill{font-size:0.8rem !important;padding:0.4rem 0.85rem !important;letter-spacing:0.015em}
/* Editable inputs: replace dashed with quiet hover-edit affordance */
.hero-title-input,.hero-desc-input,.detail-stat-input{border:1.5px solid transparent !important;background:transparent;transition:border-color 0.15s,background 0.15s,box-shadow 0.15s}
.hero-title-input:hover,.hero-desc-input:hover,.detail-stat-input:hover{border-color:var(--border) !important;background:color-mix(in srgb,var(--gray-light) 60%,transparent)}
.hero-title-input:focus,.hero-desc-input:focus,.detail-stat-input:focus{border-color:var(--primary) !important;background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);outline:none}
.editable-field{position:relative}
.editable-field::after{content:"";position:absolute;top:0.55rem;right:0.55rem;width:14px;height:14px;background:url("data:image/svg+xml;utf8,") no-repeat center/contain;opacity:0;transition:opacity 0.15s;pointer-events:none}
.editable-field:hover::after,.editable-field:focus-within::after{opacity:0.7}
/* Display-Font auf prominente Headlines */
.hero-title,.event-hero-title,.hero-title-input{font-family:var(--font-display);font-weight:600;letter-spacing:-0.022em;font-optical-sizing:auto}
.hero-title{font-size:2.6rem;line-height:1.05}
/* ===== Phase 2: globale Verfeinerung ===== */
/* Headlines durchgehend Display-Font (Fraunces) */
h1,h2,h3,.section-title,.event-list-heading,.modal-header h2,.empty-state h3,.standby-section h3{font-family:var(--font-display);font-optical-sizing:auto;letter-spacing:-0.018em}
.section-title::after{content:"";display:block;width:36px;height:2px;background:var(--accent-warm);margin:0.6rem auto 0;border-radius:2px;opacity:0.85}
.event-heading{font-weight:600}
/* Topbar-Brand mit Display-Font (subtil) */
/* Body-Hintergrund mit dezentem warmen Glow oben */
body{background:radial-gradient(ellipse 1200px 600px at 50% -200px,color-mix(in srgb,var(--accent-warm) 8%,transparent) 0%,transparent 60%),var(--bg)}
@media (prefers-color-scheme:dark){body{background:radial-gradient(ellipse 1200px 600px at 50% -200px,color-mix(in srgb,var(--accent-warm) 5%,transparent) 0%,transparent 60%),var(--bg)}}
/* Landing CTA-Banner: solider Brand-Farbton ohne Gradient */
.cta-banner{background:var(--primary) !important}
/* Step-Numbers: bei .current oder .completed schon ok; default leicht aufwerten */
.step-num{font-family:var(--font-display);font-size:1.05rem !important;font-weight:600 !important}
/* Status-Pills .active in warmer Akzent-Variante (optional opt-in) */
.status-pill.warm-active{background:var(--accent-warm-light);color:var(--accent-warm-dark)}
/* Auth/Status-Seiten: einheitliche Card-Hierarchie */
.message-card,.error-wrap,.not-found-content,.success-container,.cancel-container{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md);max-width:480px;margin:2.5rem auto;text-align:center}
.message-card h1,.error-wrap h1,.not-found-content h1,.success-container h1,.cancel-container h1{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;font-size:1.75rem;margin-bottom:0.5rem}
/* Empty-State Icon warm akzentuieren */
.empty-state-icon{color:var(--primary);opacity:0.45}
/* Tasks count badge: alle erledigt → warm gold statt grün-only */
.tasks-count-badge.all-done{background:linear-gradient(135deg,var(--success) 0%,var(--success-dark) 100%)}
/* Hero-Title Landing: subtle Italic-Akzent möglich (nicht aktiviert, nur vorbereitet) */
.hero-title em,.event-hero-title em{font-style:italic;font-variation-settings:"opsz" 144;color:var(--accent-warm-dark)}
/* Border-radius Konsistenz (sanft) */
.modal-content{border-radius:var(--radius-lg)}
.toast{border-radius:var(--radius-md)}
/* Unified .btn-warm Variante */
.btn-warm{background:var(--accent-warm);color:#fff}
.btn-warm:hover{background:var(--accent-warm-dark)}
/* Subtle grain auf Hero-Bildern für Foto-Charakter */
.event-hero-image::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,");pointer-events:none;z-index:1;mix-blend-mode:overlay;opacity:0.55}
.event-hero-image.loading::before{display:none}
.event-hero-image.loading::after{display:none}
/* ===== REVERT: Schriftart wie vorher, aber Trennstriche behalten ===== */
.event-heading{font-weight:700 !important;font-family:inherit !important;letter-spacing:-0.02em}
.hero-title{font-size:2.25rem;line-height:1.2;font-family:inherit !important;font-weight:700 !important;overflow-wrap:break-word}
.section-title{font-size:1.15rem !important;font-weight:600 !important;font-family:inherit !important;letter-spacing:normal !important}
.event-list-heading,.modal-header h2,.empty-state h3,.standby-section h3,.detail-card-header,.event-hero-title,.hero-title-input,.detail-stat-value,.detail-stat-input,.join-card-header h3{font-family:inherit !important;letter-spacing:-0.02em}
h1,h2,h3{font-family:inherit !important}
.step-num{font-family:inherit !important;font-size:0.95rem !important;font-weight:700 !important}
.message-card h1,.error-wrap h1,.not-found-content h1,.success-container h1,.cancel-container h1{font-family:inherit !important;font-weight:700 !important;font-size:1.5rem !important}
/* ===== Edit-Affordance: Stift-Icon + dezente Underline ===== */
.hero-title-input,.hero-desc-input{
border:1.5px solid transparent !important;
border-bottom:1.5px dotted color-mix(in srgb,var(--text-muted) 55%,transparent) !important;
background-color:transparent;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right 0.55rem top 0.55rem;
background-size:14px 14px;
padding-right:1.85rem !important;
transition:border-color 0.15s,background-color 0.15s,box-shadow 0.15s;
cursor:text;
}
.hero-desc-input{background-position:right 0.55rem top 0.5rem}
.hero-title-input:hover,.hero-desc-input:hover{
border-color:var(--border) !important;
border-bottom-color:var(--text-muted) !important;
border-bottom-style:solid !important;
background-color:color-mix(in srgb,var(--gray-light) 50%,transparent);
}
.hero-title-input:focus,.hero-desc-input:focus{
border:1.5px solid var(--primary) !important;
background-color:var(--card);
box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
outline:none;
background-image:none;
padding-right:0.5rem !important;
}
/* Detail-Stat (Zahlenfeld): nur dotted Underline, kein Icon (zu eng) */
.detail-stat-input{
border:1.5px solid transparent !important;
border-bottom:1.5px dotted color-mix(in srgb,var(--text-muted) 55%,transparent) !important;
background:transparent;
border-radius:6px;
transition:border-color 0.15s,background 0.15s,box-shadow 0.15s;
}
.detail-stat-input:hover{
border-bottom-color:var(--text-muted) !important;
border-bottom-style:solid !important;
background:color-mix(in srgb,var(--gray-light) 50%,transparent);
}
.detail-stat-input:focus{
border:1.5px solid var(--primary) !important;
background:var(--card);
box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 18%,transparent);
outline:none;
}
@media (prefers-color-scheme:dark){
.hero-title-input,.hero-desc-input{
background-image:url("data:image/svg+xml;utf8,");
}
}
/* Footer: 3-Spalten-Grid statt space-between, damit die Nav immer mittig sitzt
(brand und copyright haben unterschiedliche Breiten → flex space-between zentriert nicht) */
.footer-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
flex-wrap: unset;
justify-content: unset;
}
.footer-copy {
text-align: right;
justify-self: end;
}
@media (max-width: 768px) {
.footer-row {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-copy {
text-align: center;
justify-self: unset;
}
.footer-nav {
justify-content: center;
flex-wrap: wrap;
}
}
/* Defensive: Bilder dürfen ihre Container nicht in der Breite über den Viewport hinaus pushen.
Ohne max-width:100% setzen Bilder ohne explizite HTML-Dimensionen die min-content-Breite ihres
Grid-/Flex-Items auf ihre intrinsische Pixel-Breite, und der gesamte Body wächst mit. */
img{max-width:100%}
/* ===== A11y: durchgängiger Tastatur-Fokus für klickbare Elemente auf hellem Grund =====
.btn/.form-input/Topbar haben eigene focus-visible-Regeln (oben). Hier die restlichen
interaktiven Elemente, die zuvor keinen sichtbaren Fokus hatten — primary-Outline,
damit Keyboard-Navigation überall erkennbar ist (Touch/Maus bleibt über :focus-visible unberührt). */
.modal-close:focus-visible,.close:focus-visible,.btn-download-zip:focus-visible,.qr-download-btn:focus-visible,.gallery-item:focus-visible,.event-item:focus-visible,.event-card:focus-visible,.scroll-arrow:focus-visible,.faq-item summary:focus-visible,.step:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.scroll-to-top{position:fixed;bottom:1.5rem;right:1.5rem;z-index:900;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:none;background:var(--primary);color:#fff;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px) scale(0.9);pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease,background 0.15s;animation:none !important}.scroll-to-top.visible{opacity:0.92;transform:translateY(0) scale(1);pointer-events:auto}@media (hover:hover){.scroll-to-top:hover{background:var(--primary-dark);opacity:1;transform:translateY(-2px) scale(1)}}.scroll-to-top:active{transform:translateY(0) scale(0.94)}.scroll-to-top:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.scroll-to-top svg{display:block}@media (max-width:768px){.scroll-to-top{bottom:1rem;right:1rem;width:42px;height:42px}}@media (prefers-reduced-motion:reduce){.scroll-to-top{transition:opacity 0.2s ease}.scroll-to-top.visible{transform:none}}
/* Melde-Dialog */
.report-reasons{display:flex;flex-direction:column;gap:.5rem}
.report-reason{font-family:inherit;font-size:.92rem;text-align:left;padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover){.report-reason:hover{border-color:var(--primary);background:var(--primary-light)}}
.report-reason:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.zip-parts{flex-basis:100%;width:100%;margin-top:0.5rem;padding:0.85rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);font-size:0.85rem;color:var(--text-secondary);line-height:1.5;text-align:left}.zip-parts[hidden]{display:none}.zip-parts-intro{margin:0 0 0.65rem;font-size:0.8rem;color:var(--text-muted)}.zip-parts-list{display:flex;flex-direction:column;gap:0.5rem}.zip-part-btn{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.75rem 1rem;border:none;border-radius:var(--radius-md);background:var(--primary);color:#fff;font-family:inherit;font-size:0.95rem;font-weight:600;cursor:pointer;text-align:left;transition:background 0.15s,transform 0.15s}.zip-part-btn svg{width:18px;height:18px;flex-shrink:0}.zip-part-label{flex:1}.zip-part-meta{font-size:0.8rem;font-weight:500;opacity:0.85;white-space:nowrap}@media (hover:hover){.zip-part-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}}.zip-part-btn:active{transform:scale(0.99)}.zip-part-btn:disabled{background:var(--gray);cursor:progress;transform:none}.zip-part-btn.is-rebuilding{background:var(--gray-light);color:var(--text-muted);cursor:default;opacity:1}.zip-part-btn.is-rebuilding .btn-spinner{border-color:rgba(0,0,0,0.15);border-top-color:var(--text-muted);margin-right:0}.btn-download-zip.zip-ready,.btn-upload.zip-ready{background:var(--success)}@media (hover:hover){.btn-download-zip.zip-ready:hover,.btn-upload.zip-ready:hover{background:var(--success-dark)}}.btn-download-zip.zip-ready{display:inline-flex;align-items:center;gap:0.4rem}.btn-download-zip.zip-ready svg{width:16px;height:16px}.zip-chevron{width:16px;height:16px;margin-left:auto;flex-shrink:0;transition:transform 0.2s}.zip-main-collapsed .zip-chevron{transform:rotate(180deg)}.btn-upload .zip-chevron{position:absolute;right:1rem;margin-left:0}.btn-upload.zip-main-open,.btn-download-zip.zip-main-open{background:var(--card);color:var(--text-secondary);border:1px solid var(--border);box-shadow:none}@media (hover:hover){.btn-upload.zip-main-open:hover,.btn-download-zip.zip-main-open:hover{background:var(--bg);color:var(--text);transform:none;box-shadow:none}}.btn-download-zip.zip-main-open,.btn-download-zip.zip-main-collapsed{display:inline-flex;align-items:center;gap:0.4rem}
/* ── Freunde-Code ──────────────────────────────────────────────────────
Hier statt in guest.css, weil BEIDE Seiten die Klassen brauchen: das
Banner auf der Gast-Seite und die Zeile in „Gäste einladen" im
Host-Detail (host.html lädt guest.css nicht). Wer eins ändert, prüft
das andere. */
/* Freunde-Code-Banner (gestopptes Event, über dem Event-Bild).
Baugleich mit dem Freischalt-Banner des Hosts (.event-info-banner /
.event-info-locked in host.css): flaches --warning-light, --warning-Rand,
goldener Gradient-Button. Kein Icon-Kreis, kein Verlauf, kein Schatten — ein
zweites Gestaltungsmuster für dieselbe Sache verwirrt nur.
ABWEICHUNG mit Absicht: Der Text bleibt --text/--text-secondary statt
--warning. Das Host-Banner ist eine Warnung („Fotos gesperrt"), hier ist es
ein Geschenk — und gold auf hellgold liest sich schlechter. Die Signalfarbe
trägt nur der kurze Kicker. */
.referral-banner{display:flex;flex-flow:row wrap;align-items:center;gap:0.5rem 0.9rem;padding:0.7rem 0.9rem;margin:0.75rem 0 0;border-radius:8px;font-size:0.88rem;background:var(--warning-light);border:1px solid color-mix(in srgb,var(--warning) 35%,transparent);color:var(--text)}
.referral-banner-text{flex:1 1 16rem;display:flex;flex-direction:column;gap:2px;min-width:0}
.referral-banner-text strong{font-size:1.15rem;color:var(--warning)}
/* Zusatz haengt kleiner am Betrag — inherit statt eigener Farbe, damit die
Ueberschrift eine Einheit bleibt (Gold, eine Zeile, zwei Groessen). */
.referral-banner-suffix{font-size:0.85rem;font-weight:500;margin-left:0.35rem}
.referral-banner-text>span{font-size:0.8rem;color:var(--text-secondary);line-height:1.3}
.referral-banner-actions{display:flex;flex-flow:row wrap;align-items:center;gap:0.5rem;margin-right:auto;flex-shrink:0}
.referral-code-chip{display:inline-flex;align-items:center;gap:0.45rem;padding:0.4rem 0.7rem;border-radius:6px;border:1px dashed color-mix(in srgb,var(--warning) 55%,transparent);background:var(--card);color:var(--text);cursor:pointer;font-family:inherit;transition:border-color 0.15s,background 0.15s}
.referral-code-label{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)}
.referral-code-value{font-family:SFMono-Regular,Menlo,Consolas,monospace;font-size:0.95rem;font-weight:700;letter-spacing:0.12em}
.referral-code-copy{color:var(--text-muted)}
@media (hover:hover){.referral-code-chip:hover{border-style:solid;background:var(--warning-light)}}
.referral-code-chip.is-copied{border-style:solid;border-color:var(--success);background:var(--success-light)}
.referral-code-chip.is-copied .referral-code-copy{color:var(--success)}
/* Identisch mit .btn-unlock-cta (host.css) */
.referral-cta{display:inline-flex;align-items:center;line-height:1.4;background:linear-gradient(135deg,var(--accent-warm),var(--accent-warm-dark));color:#fff;border:none;border-radius:6px;padding:0.45rem 0.85rem;font-size:0.85rem;font-weight:600;font-family:inherit;text-decoration:none;white-space:nowrap;flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}
@media (hover:hover){.referral-cta:hover{opacity:0.88;color:#fff}}
@media (max-width:768px){.referral-banner{margin:0.5rem 0 0}.referral-banner-actions{width:100%}.referral-cta{margin-left:auto}}
/* Footer-Logo: die schwarze SVG-Variante (.brand-logo-dark) ist im Dark Mode unsichtbar — invertieren. */
@media (prefers-color-scheme:dark){.brand-logo-dark{filter:brightness(0) invert(1);opacity:0.45}}
/* Schlichte Meldungsseiten (error.html, event_not_found.html): Icon, Ueberschrift, Satz, Knopf — zentriert,
ohne Karte. Vorher lag die 404 in einer leeren weissen Karte bis zum Footer (Befund 2026-09-08). */
.plain-page{max-width:640px;width:100%;margin:0 auto;flex:1;text-align:center;padding:3rem 1.5rem}.plain-page-icon{display:inline-flex;margin-bottom:1rem;color:var(--text-muted);opacity:0.6}.plain-page h2{color:var(--text);margin:0 0 0.75rem;font-size:1.4rem}.plain-page p{color:var(--text-muted);font-size:1rem;line-height:1.6;max-width:400px;margin:0 auto 2rem}
/* KI-Badge auf Bildern („AI GENERATED"): Landing (Screenshots, KI-Fotos) und Demo-Titelbild (guest.html, is_demo) teilen die Regel; der Stempel in den Demo-Anzeigegroessen (tools/demo-event/build.py) ist ihr Nachbau in Pixeln - wer hier etwas aendert, zieht ihn mit. */.ai-badge{position:absolute;left:0.5rem;bottom:0.5rem;z-index:2;pointer-events:none;display:inline-flex;align-items:center;gap:0.28em;font-size:0.6rem;line-height:1;font-weight:500;letter-spacing:0.02em;padding:0.25rem 0.4rem;border-radius:5px;color:rgba(255,255,255,0.92);background:rgba(0,0,0,0.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);text-shadow:0 1px 2px rgba(0,0,0,0.35)}.ai-badge-gen{font-size:0.82em;line-height:1;letter-spacing:0.04em;opacity:0.9}