/* Öffentliche Startseite — saisonale Themes (gesteuert via data-site-theme auf ) */ .theme-banner { margin: 0; padding: 0; border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)); background: rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; } .theme-banner__inner { position: relative; max-width: 1200px; margin: 0 auto; padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); } .theme-banner__art { display: block; width: 100%; height: auto; min-height: 200px; max-height: min(52vw, 340px); object-fit: contain; object-position: center center; background: rgba(0, 0, 0, 0.2); } /* Hochgeladene Fotos / Raster: stärker füllend */ .theme-banner__art--raster { object-fit: cover; object-position: center center; min-height: 220px; max-height: min(48vw, 380px); } @media (min-width: 720px) { .theme-banner__art { min-height: 220px; max-height: 300px; } } /* Ostern: komplettes Motiv inkl. Schrift oben sichtbar */ html[data-site-theme="easter"] .theme-banner__art { min-height: 240px; max-height: min(48vh, 320px); object-fit: contain; } .theme-banner__floats { position: absolute; inset: 0; pointer-events: none; } .theme-banner__mini { position: absolute; width: min(18vw, 100px); height: auto; opacity: 0.55; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); animation: theme-float 5s ease-in-out infinite; } .theme-banner__mini--2 { right: 8%; bottom: 12%; left: auto; animation-delay: -2.5s; width: min(14vw, 80px); } .theme-banner__floats .theme-banner__mini:not(.theme-banner__mini--2) { left: 6%; bottom: 18%; } @keyframes theme-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } html[data-site-theme="silvester"] .theme-banner__art { animation: theme-twinkle 4s ease-in-out infinite; } @keyframes theme-twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.06); } } /* Karten-Inhalt über Motiv-Layer */ html[data-site-theme="easter"] .card, html[data-site-theme="christmas"] .card, html[data-site-theme="silvester"] .card { position: relative; overflow: hidden; isolation: isolate; } html[data-site-theme="easter"] .card > *, html[data-site-theme="christmas"] .card > *, html[data-site-theme="silvester"] .card > * { position: relative; z-index: 1; } html[data-site-theme="easter"] .card::before, html[data-site-theme="christmas"] .card::before, html[data-site-theme="silvester"] .card::before { z-index: 0; } html[data-site-theme="easter"] .card::before { content: ""; position: absolute; right: -12px; bottom: -12px; width: 120px; height: 120px; background: url("../../images/themes/easter-motif.svg") no-repeat center / contain; opacity: 0.2; pointer-events: none; } html[data-site-theme="christmas"] .card::before { content: ""; position: absolute; right: -8px; bottom: -8px; width: 110px; height: 110px; background: url("../../images/themes/christmas-motif.svg") no-repeat center / contain; opacity: 0.22; pointer-events: none; } html[data-site-theme="silvester"] .card::before { content: ""; position: absolute; right: -6px; top: -6px; width: 100px; height: 100px; background: url("../../images/themes/silvester-motif.svg") no-repeat center / contain; opacity: 0.2; pointer-events: none; } html[data-site-theme="easter"] { --bg-deep: #14121c; --bg-panel: #1c1828; --bg-card: #221e30; --bg-elevated: #2a2540; --border: rgba(255, 200, 220, 0.12); --text: #f5f0f8; --muted: #b8a8c9; --accent: #f472b6; --accent-2: #6ee7b7; --danger: #fb7185; --success: #86efac; --shadow: 0 18px 50px rgba(80, 20, 60, 0.35); --bg-glow-1: rgba(244, 114, 182, 0.18); --bg-glow-2: rgba(110, 231, 183, 0.12); } html[data-site-theme="easter"] .site-header { background: linear-gradient(180deg, rgba(20, 18, 28, 0.97), rgba(20, 18, 28, 0.88)); border-bottom-color: rgba(244, 114, 182, 0.2); } html[data-site-theme="easter"] .site-brand span { background: linear-gradient(120deg, #fbcfe8, #a7f3d0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @supports not (background-clip: text) { html[data-site-theme="easter"] .site-brand span { color: #fdf4ff; -webkit-text-fill-color: #fdf4ff; background: none; } } html[data-site-theme="easter"] .btn-primary { background: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(110, 231, 183, 0.2)); border-color: rgba(244, 114, 182, 0.4); } html[data-site-theme="christmas"] { --bg-deep: #0c120f; --bg-panel: #121a16; --bg-card: #18221c; --bg-elevated: #1f2e24; --border: rgba(180, 220, 190, 0.1); --text: #eef8f0; --muted: #8fb3a0; --accent: #ef4444; --accent-2: #22c55e; --danger: #f87171; --success: #4ade80; --shadow: 0 18px 50px rgba(0, 40, 20, 0.45); --bg-glow-1: rgba(239, 68, 68, 0.14); --bg-glow-2: rgba(34, 197, 94, 0.12); } html[data-site-theme="christmas"] .site-brand span { background: linear-gradient(120deg, #fca5a5, #86efac); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-site-theme="christmas"] .btn-primary { background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(34, 197, 94, 0.22)); border-color: rgba(34, 197, 94, 0.35); } html[data-site-theme="christmas"] .maintenance-banner { background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(34, 197, 94, 0.1)); border-color: rgba(250, 204, 21, 0.35); color: #fef3c7; } html[data-site-theme="silvester"] { --bg-deep: #070a12; --bg-panel: #0f1420; --bg-card: #141b2e; --bg-elevated: #1a2440; --border: rgba(200, 210, 255, 0.1); --text: #f0f4ff; --muted: #94a3c8; --accent: #facc15; --accent-2: #a78bfa; --danger: #f87171; --success: #4ade80; --shadow: 0 22px 60px rgba(10, 15, 40, 0.55); --bg-glow-1: rgba(250, 204, 21, 0.14); --bg-glow-2: rgba(167, 139, 250, 0.16); } html[data-site-theme="silvester"] .site-brand span { background: linear-gradient(120deg, #fde047, #c4b5fd); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-site-theme="silvester"] .btn-primary { background: linear-gradient(135deg, rgba(250, 204, 21, 0.22), rgba(167, 139, 250, 0.2)); border-color: rgba(250, 204, 21, 0.35); } html[data-site-theme="silvester"] .badge { background: rgba(250, 204, 21, 0.12); color: #fef08a; border-color: rgba(250, 204, 21, 0.3); } @media (prefers-reduced-motion: reduce) { .theme-banner__mini, html[data-site-theme="silvester"] .theme-banner__art { animation: none; } }