:root { --liquid-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6); --smooth-zoom: cubic-bezier(0.25, 0.46, 0.45, 0.94); --glass-border: 1px solid rgba(255, 255, 255, 0.8); --glass-shadow: 0 2px 12px rgba(26, 32, 44, 0.04), 0 6px 24px -2px rgba(26, 32, 44, 0.06), 0 0 0 1px rgba(26, 32, 44, 0.02); --glass-bg: rgba(255, 255, 255, 0.65); --amina-blue: #48A0D6; --amina-pink: #D55A92; --amina-green: #7FB14E; --amina-yellow: #F59E0B; --amina-dark: #1E293B; --noise-subtle: url('/images/noise-subtle.svg'); --noise-medium: url('/images/noise-medium.svg'); --noise-intense: url('/images/noise-intense.svg'); } p, .content-layer li, .text-slate-500 { font-weight: 400; line-height: 1.7; } .font-medium { font-weight: 450; } /* feinere Abstufung */ * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; } body, p, span, div, a, button, li, h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; } :focus-visible { outline: 3px solid var(--amina-blue); outline-offset: 2px; border-radius: 4px; } /* ── EYEBROW BADGE ── */ .eyebrow-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.8); color: var(--amina-blue); padding: 0.5rem 1.4rem; border-radius: 9999px; font-weight: 800; font-size: clamp(0.65rem, 1.2vw, 0.75rem); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(72,160,214,0.15); } /* ── GLASS MORPH ── */ .glass-morph { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: var(--glass-border); box-shadow: var(--glass-shadow), 0 0 12px -2px rgba(72, 160, 214, 0.08); /* permanenter Glow kombiniert */ border-radius: 24px; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), background 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1), border-color 0.5s cubic-bezier(0.34,1.56,0.64,1), border-radius 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; z-index: 1; padding: 16px; } @media (min-width: 1024px) { .glass-morph { padding: 24px; } } .glass-morph::after { content: ""; position: absolute; inset: 0; background-image: var(--noise-subtle); background-size: 200px 200px; opacity: 0.015; pointer-events: none; z-index: 1; mix-blend-mode: overlay; } .glass-morph { box-shadow: 0 2px 8px -2px rgba(26,32,44,0.04), 0 4px 16px -4px rgba(26,32,44,0.03), 0 0 0 1px rgba(26,32,44,0.02), inset 0 1px 4px rgba(255,255,255,0.6), inset 0 -1px 3px rgba(0,0,0,0.02); background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3), transparent 70%), var(--glass-bg); } .glass-morph:not(.no-hover):hover { border-radius: 32px 16px 32px 16px; transform: translateY(-6px) scale(1.015); background: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.95); box-shadow: 0 8px 24px -4px rgba(26,32,44,0.08), 0 16px 48px -8px rgba(26,32,44,0.06), 0 0 0 1px rgba(255,255,255,0.4) inset; } .glass-morph.allow-overflow { overflow: visible !important; } .glass-morph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%), rgba(255,255,255,0.3), transparent 40%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 2; will-change: auto; } .glass-morph:hover::before { will-change: opacity; } .glass-morph:hover::before { opacity: 1; } .glass-morph.hover-blue:hover { border-color: var(--amina-blue); background: rgba(72,160,214,0.08); box-shadow: 0 10px 40px rgba(72,160,214,0.2); } .glass-morph.hover-pink:hover { border-color: var(--amina-pink); background: rgba(213,90,146,0.08); box-shadow: 0 10px 40px rgba(213,90,146,0.2); } .glass-morph.hover-green:hover { border-color: var(--amina-green); background: rgba(127,177,78,0.08); box-shadow: 0 10px 40px rgba(127,177,78,0.2); } .glass-morph.hover-yellow:hover{ border-color: var(--amina-yellow); background: rgba(245,158,11,0.08); box-shadow: 0 10px 40px rgba(245,158,11,0.2); } /* ── TEXT GRADIENT ── */ .text-gradient-flow { background: linear-gradient(to right, var(--amina-blue) 0%, var(--amina-pink) 50%, var(--amina-blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: textShine 6s ease-in-out infinite alternate; } @keyframes textShine { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ⏸️ GPU-PAUSE: textShine stoppen wenn Element off-screen */ .js-paused.text-gradient-flow { animation-play-state: paused !important; } /* ── OZ-Gradient: nur in Öffnungszeiten-Sektion ── */ #oeffnung-section .text-gradient-flow { background: linear-gradient(to right, #FFDCE6 0%, #FFC4DE 35%, #EEB0D8 65%, #CEC4FD 100%); background-size: 200% auto; } /* ── PARALLAX CLOUDS ── */ @keyframes cloud-drift-fast { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px) scale(1.1); } } @keyframes cloud-drift-slow { 0%,100%{transform:translate(0,0)} 50%{transform:translate(80px,-30px)} } @keyframes oz-cloud-gentle { 0% { transform: translate(0, 0); } 28% { transform: translate(14px, -6px); } 55% { transform: translate(8px, -11px); } 80% { transform: translate(-4px, -6px); } 100% { transform: translate(0, 0); } } /* oz-cloud-gentle: GPU-Optimierung */ .js-paused .parallax-cloud { animation-play-state: paused !important; } #oeffnung-section:not(.js-running) .parallax-cloud { animation-play-state: paused !important; will-change: auto; } #oeffnung-section.js-running .parallax-cloud { will-change: transform; } @media (prefers-reduced-motion: reduce) { .parallax-cloud[style*="oz-cloud-gentle"] { animation: none !important; } } @keyframes cloud-drift-medium { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-100px,40px)} } @keyframes cloud-drift-float { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(50px,30px) scale(1.15)} } @keyframes cloud-drift-zigzag { 0% { transform:translate(0,0) scale(1); } 25% { transform:translate(30px,-20px) scale(1.04); } 50% { transform:translate(-20px,25px) scale(1.02); } 75% { transform:translate(40px,10px) scale(1.06); } 100% { transform:translate(0,0) scale(1); } } .parallax-slow { animation: cloud-drift-slow 30s ease-in-out infinite; } .parallax-medium { animation: cloud-drift-medium 22s ease-in-out infinite; } .parallax-float { animation: cloud-drift-float 15s ease-in-out infinite; } .parallax-zigzag { animation: cloud-drift-zigzag 24s ease-in-out infinite; } .parallax-cloud { will-change: auto; } .parallax-cloud.js-running { will-change: transform; } /* ── REVEAL ── */ .reveal { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16,1,0.3,1); } .reveal.active { opacity: 1; transform: translateY(0); } /* ── BUTTONS (GLASSMORPHISM PURE) ── */ .btn-liquid { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.2rem 2.8rem; border-radius: 20px; font-weight: 800; border: none; transition: transform 0.5s var(--liquid-bounce), background 0.5s var(--liquid-bounce), box-shadow 0.5s var(--liquid-bounce), border-radius 0.5s var(--liquid-bounce); background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; cursor: pointer; box-shadow: 0 4px 16px -4px rgba(26,32,44,0.05), inset 0 1px 4px rgba(255,255,255,0.8); text-decoration: none; } .btn-liquid::before { content:""; position:absolute; inset:0; background-image:var(--noise-medium); background-size:150px 150px; opacity:0.05; pointer-events:none; z-index:1; mix-blend-mode:overlay; } .btn-liquid:hover { border-radius: 30px 10px 30px 10px; transform: translateY(-6px); background: rgba(255, 255, 255, 0.9); box-shadow: 0 12px 32px -8px rgba(26,32,44,0.1), inset 0 1px 4px rgba(255,255,255,1); } .btn-liquid .cta-text { display: inline-block; transition: transform 0.4s var(--liquid-bounce); } .btn-liquid:hover .cta-text { transform: translateY(-2px); } .btn-liquid .cta-icon { transition: transform 0.4s var(--liquid-bounce) 0.05s; } .btn-liquid:hover .cta-icon { transform: translateX(4px) translateY(-2px); } .btn-pink { color: var(--amina-pink); } .btn-blue { color: var(--amina-blue); } .btn-green { color: var(--amina-green); } /* ── SUPER CTA (GLASSMORPHISM & LIQUID SNAKE ENGINE) ── */ .btn-super-cta { position: relative; display: inline-flex; justify-content: center; align-items: center; border-radius: 26px; background: transparent; border: none; box-shadow: none; cursor: pointer; z-index: 10; transition: transform 0.6s var(--liquid-bounce); text-decoration: none; -webkit-tap-highlight-color: transparent; overflow: hidden; } .btn-super-cta:hover { transform: translateY(-6px) scale(1.04); } .btn-super-cta::before { content: ""; position: absolute; width: 300%; aspect-ratio: 1; top: 50%; left: 50%; z-index: 0; background: conic-gradient( transparent 0deg, transparent 110deg, var(--amina-blue) 250deg, var(--amina-pink) 360deg ); transform: translate(-50%, -50%) rotate(0deg); animation: snake-spin 4s linear infinite; } .btn-super-cta:hover::before { will-change: transform; animation: snake-spin 0.8s linear infinite; } @keyframes snake-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .btn-super-cta::after { content: ""; position: absolute; inset: 2px; background: rgba(255, 255, 255, 0.9); border-radius: 24px; z-index: 1; transition: background 0.5s var(--liquid-bounce); } .btn-super-cta:hover::after { background: rgba(255, 255, 255, 0.98); } .cta-content { display: flex; align-items: center; justify-content: center; padding: 1.4rem 3.5rem; font-size: 1rem; letter-spacing: 0.15em; font-weight: 900; color: var(--amina-pink); text-transform: uppercase; position: relative; z-index: 2; width: 100%; height: 100%; transition: color 0.5s var(--liquid-bounce); } .cta-content::after { content:''; position:absolute; inset:0; background-image:var(--noise-subtle); background-size:200px 200px; opacity:0.1; pointer-events:none; z-index:1; mix-blend-mode:overlay; border-radius: inherit; } .btn-super-cta .icon-arrow { margin-left:10px; transition:transform 0.4s var(--liquid-bounce); color: var(--amina-pink); } .btn-super-cta:hover .icon-arrow { animation:arrow-loop 1s ease-in-out infinite; } @keyframes arrow-loop { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} } /* ── HERO ZOOM IMG ── */ .hero-zoom-img { transition:transform 1.5s var(--smooth-zoom); width:100%; height:100%; object-fit:cover; } .glass-morph:hover .hero-zoom-img { transform: scale(1.1); } .image-shine { position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient(to right,transparent,rgba(255,255,255,0.4),transparent); transform:skewX(-25deg); pointer-events:none; z-index:10; } .glass-morph:hover .image-shine { animation: shine-slide 1.5s ease-in-out forwards; } @keyframes shine-slide { 0%{left:-100%} 100%{left:200%} } /* ── WAVE ENGINE ── */ .wave-container { position:relative; width:100%; height:80px; overflow:hidden; line-height:0; transform:translateZ(0); margin-top:-2px; margin-bottom:-2px; z-index:2; pointer-events:none; } /* Mathematischer Wave-Ausgleich für Sektionsgrenzen ohne Wave-Divider. Netto-Wave-Höhe: Desktop 76px (80-2-2), Mobile 46px (50-2-2). */ .wave-height-compensate { height: 46px; background: #f8fafc; pointer-events: none; } @media (min-width: 1024px) { .wave-height-compensate { height: 76px; } } .wave-parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .wave-parallax > use:nth-child(1) { animation-delay:-2s; animation-duration:7s; opacity:0.3; } .wave-parallax > use:nth-child(2) { animation-delay:-3s; animation-duration:10s; opacity:0.6; } .wave-parallax > use:nth-child(3) { animation-delay:-4s; animation-duration:13s; opacity:1; } @keyframes move-forever { 0%{transform:translate3d(-90px,0,0)} 100%{transform:translate3d(85px,0,0)} } @media (max-width:768px) { .wave-container { height:50px; } } /* ── HEARTBEAT & PULSE EFFEKTE ── */ @keyframes realistic-heartbeat { 0%,100%{transform:scale(1)} 15%{transform:scale(1.25)} 30%{transform:scale(1.1)} 45%{transform:scale(1.3)} } .animate-heartbeat { animation: realistic-heartbeat 1.4s infinite cubic-bezier(0.215,0.61,0.355,1); display:inline-block; transform-origin:center; } /* ── ROTATING BORDER (PROMISE BOX) ── */ .promise-box { position: relative; padding: 2px; border-radius: 26px; overflow: hidden; background: rgba(255, 255, 255, 0.4); box-shadow: 0 4px 16px -4px rgba(26,32,44,0.03); } .promise-box::before { content: ''; position: absolute; top: 50%; left: 50%; width: 200vmax; height: 200vmax; background: conic-gradient(from 0deg, transparent 0%, transparent 50%, rgba(127,177,78,0.15) 65%, rgba(127,177,78,0.6) 85%, rgba(127,177,78,1) 100%); animation: promise-spin 4s linear infinite; will-change: transform; z-index: 1; pointer-events: none; } .promise-inner { position: relative; background: rgba(255, 255, 255, 0.95); border-radius: 24px; z-index: 2; padding: 1.25rem; height: 100%; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } @keyframes promise-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes icon-pulse-sync { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes icon-fill-sync { 0%, 100% { fill: transparent; } 50% { fill: rgba(127,177,78,0.25); } } @keyframes icon-bg-sync { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .animate-icon-sync { animation: icon-pulse-sync 4s ease-in-out infinite; will-change: transform; } .animate-fill-sync { animation: icon-fill-sync 4s ease-in-out infinite; } .animate-bg-sync { animation: icon-bg-sync 4s ease-in-out infinite; will-change: opacity; } /* Performance Guard: Stoppt alle synchronisierten Animationen, wenn Element off-screen ist */ .js-paused.promise-box::before, .js-paused .animate-icon-sync, .js-paused .animate-fill-sync, .js-paused .animate-bg-sync { animation-play-state: paused !important; will-change: auto !important; } @media (prefers-reduced-motion: reduce) { .promise-box::before, .animate-icon-sync, .animate-fill-sync, .animate-bg-sync { animation: none !important; } } /* ── PERFORMANCE ── */ .js-paused, .js-paused::before, .js-paused::after { animation-play-state:paused !important; will-change:auto !important; } .js-paused .kosten-ribbon::after { animation-play-state: paused !important; } .js-paused .wave-parallax > use { animation-play-state: paused !important; } .js-paused .swipe-hint__hand, .js-paused .swipe-hint__dot { animation-play-state: paused !important; } .js-running { will-change: transform, opacity; } .render-lazy { content-visibility: auto; contain-intrinsic-size: auto 800px; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } .parallax-slow, .parallax-medium, .parallax-float, .parallax-zigzag { animation: none !important; } } /* ── SKIP LINK ── */ .skip-link { position:absolute; top:0; left:0; transform:translateY(-100%); background:var(--amina-blue); color:white; padding:12px 24px; font-weight:800; text-decoration:none; border-radius:0 0 8px 8px; z-index:9999; transition:transform 0.2s ease; } .skip-link:focus-visible { transform:translateY(0); } /* ── SCROLL PROGRESS ── */ .scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--amina-blue), var(--amina-pink), var(--amina-green), var(--amina-yellow)); background-size: 300% 100%; z-index: 10000; pointer-events: none; border-radius: 0 2px 2px 0; transform-origin: left center; transform: scaleX(0); opacity: 0; animation: progressShimmer 4s ease infinite, scrollProgress both; animation-timeline: auto, scroll(root block); } @supports not (animation-timeline: scroll()) { .scroll-progress-bar { transition: transform 0.1s linear, opacity 0.3s ease; width: 0%; transform: none; } } @keyframes progressShimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes scrollProgress { 0% { transform: scaleX(0); opacity: 0; } 5% { opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } } /* ── VALUE LENS ── */ .value-lens { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.6s var(--liquid-bounce), background 0.6s var(--liquid-bounce), box-shadow 0.6s var(--liquid-bounce); } .glass-morph:hover .value-lens { transform:scale(1.15) rotate(6deg); background:white; box-shadow: 0 0 24px rgba(0,0,0,0.08); } .value-lens svg { width:30px; height:30px; position:relative; z-index:2; } @media (min-width:768px) { .value-lens { width:72px; height:72px; } .value-lens svg { width:34px; height:34px; } } /* ════════════════════════════════════════════════ 💎 KOMMUNIKATION – ANIMATED SVG ICONS ════════════════════════════════════════════════ */ /* SVG shared: transform-box for correct transform-origin in SVG */ .value-lens svg * { transform-box: fill-box; } /* ── 1. CHAT BUBBLES (Tür-&-Angel) ── */ .komm-chat .bubble-main { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); } .komm-chat:hover .bubble-main { transform: translateY(-2px); } .komm-chat .dot-1,.komm-chat .dot-2,.komm-chat .dot-3 { transform-origin: center; } .komm-chat:hover .dot-1 { animation: dot-hop 1.2s ease-in-out infinite 0s; } .komm-chat:hover .dot-2 { animation: dot-hop 1.2s ease-in-out infinite 0.15s; } .komm-chat:hover .dot-3 { animation: dot-hop 1.2s ease-in-out infinite 0.3s; } @keyframes dot-hop { 0%,60%,100%{transform:scaleY(1)} 30%{transform:scaleY(0.2)} } .komm-chat .bubble-reply { transform: scale(0.5) translate(4px, 4px); opacity: 0; transform-origin: bottom left; transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.05s; } .komm-chat:hover .bubble-reply { transform: scale(1) translate(0,0); opacity: 1; } /* ── 2. CALENDAR (Entwicklungsgespräche) ── */ .komm-calendar .cal-body { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); } .komm-calendar:hover .cal-body { transform: translateY(-1px); } .komm-calendar .cal-ring-l, .komm-calendar .cal-ring-r { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); transform-origin: center bottom; } .komm-calendar:hover .cal-ring-l { transform: scaleY(1.3) translateY(-1px); } .komm-calendar:hover .cal-ring-r { transform: scaleY(1.3) translateY(-1px); transition-delay: 0.05s; } .komm-calendar .cal-dot-1,.komm-calendar .cal-dot-2,.komm-calendar .cal-dot-3 { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-origin: center; } .komm-calendar:hover .cal-dot-1 { transform: scale(1.5); } .komm-calendar:hover .cal-dot-2 { transform: scale(1.5); transition-delay: 0.07s; } .komm-calendar:hover .cal-dot-3 { transform: scale(1.5); transition-delay: 0.14s; } .komm-calendar .cal-star { transform: scale(0) rotate(-30deg); transform-origin: center; transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.1s; } .komm-calendar:hover .cal-star { transform: scale(1) rotate(0deg); } /* ── 3. PEOPLE GROUP (Elternabende) ── */ .komm-people .person-a { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-origin: bottom center; } .komm-people .person-b { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.04s; transform-origin: bottom center; } .komm-people .person-c { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.08s; transform-origin: bottom center; } .komm-people:hover .person-a { transform: translateY(-3px) translateX(-1px); } .komm-people:hover .person-b { transform: translateY(-4px); } .komm-people:hover .person-c { transform: translateY(-3px) translateX(1px); } .komm-people .arc { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 0.5s cubic-bezier(0.16,1,0.3,1) 0.2s; } .komm-people:hover .arc { stroke-dashoffset: 0; } /* ── 5. PINBOARD (Infoboard & Aushänge) ── */ .komm-pin .pin-head { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); transform-origin: center bottom; } .komm-pin:hover .pin-head { animation: pin-wobble 0.6s cubic-bezier(0.34,1.56,0.64,1); } @keyframes pin-wobble { 0%{transform:rotate(0)} 25%{transform:rotate(-12deg) translateY(-2px)} 50%{transform:rotate(8deg) translateY(-1px)} 75%{transform:rotate(-4deg)} 100%{transform:rotate(0)} } .komm-pin .ripple-ring { r: 3; transform-origin: center; opacity: 0; } .komm-pin:hover .ripple-ring { animation: ripple-out 1s ease-out 0.15s infinite; } @keyframes ripple-out { 0%{r:3;opacity:0.7;stroke-width:1.5} 100%{r:10;opacity:0;stroke-width:0.3} } .komm-pin .board-line { stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset 0.35s ease; } .komm-pin:hover .board-line:nth-child(1) { stroke-dashoffset: 0; } .komm-pin:hover .board-line:nth-child(2) { stroke-dashoffset: 0; transition-delay: 0.08s; } .komm-pin:hover .board-line:nth-child(3) { stroke-dashoffset: 0; transition-delay: 0.16s; } /* ── 4. KAMERA (Foto-Dokumentation) ── */ .komm-photo .cam-body { transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1); } .komm-photo:hover .cam-body { transform: translateY(-2px) scale(1.04); } .komm-photo .cam-lens { transform-origin: 16px 17px; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); } .komm-photo:hover .cam-lens { transform: scale(1.18); } .komm-photo .cam-inner { transform-origin: 16px 17px; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.05s; } .komm-photo:hover .cam-inner { transform: scale(1.25); } .komm-photo .cam-flash { opacity: 0; } .komm-photo:hover .cam-flash { animation: cam-flash-pop 1.8s ease-in-out 0.08s infinite; } @keyframes cam-flash-pop { 0%,55%,100% { opacity: 0; } 8%, 18% { opacity: 1; } } .komm-photo .cam-heart { transform-origin: 25px 7px; transform: scale(0) rotate(-20deg); opacity: 0; transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.18s, opacity 0.35s ease 0.18s; } .komm-photo:hover .cam-heart { transform: scale(1) rotate(0deg); opacity: 1; } .komm-photo .cam-line-1, .komm-photo .cam-line-2, .komm-photo .cam-line-3 { stroke-dasharray: 6; stroke-dashoffset: 6; transition: stroke-dashoffset 0.3s ease; } .komm-photo:hover .cam-line-1 { stroke-dashoffset: 0; transition-delay: 0.22s; } .komm-photo:hover .cam-line-2 { stroke-dashoffset: 0; transition-delay: 0.30s; } .komm-photo:hover .cam-line-3 { stroke-dashoffset: 0; transition-delay: 0.38s; } /* ── FEATURE TEXT ANIM ── */ .feature-text-anim { transition: transform 0.5s var(--liquid-bounce); opacity: 0.92; } .glass-morph:hover .feature-text-anim { transform: translateX(4px); opacity: 1; } /* ── STAGGER DELAYS ── */ .stagger-1 { transition-delay: 0ms; } .stagger-2 { transition-delay: 80ms; } .stagger-3 { transition-delay: 160ms; } .stagger-4 { transition-delay: 240ms; } .stagger-5 { transition-delay: 320ms; } .stagger-6 { transition-delay: 400ms; } /* ══════════════════════════════════════════════════════ 🆕 FÜR ELTERN – PAGE-SPECIFIC STYLES ══════════════════════════════════════════════════════ */ /* ── HERO ── */ .eltern-hero-title { font-size: clamp(2.8rem, 5vw + 1rem, 5rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 900; } @media (max-width: 640px) { .eltern-hero-title { font-size: clamp(2.2rem, 10vw, 3.5rem); } } /* ── HERO ENTRANCE ── */ .hero-line { display:block; opacity:0; transform:translateY(24px); filter:blur(6px); transition:all 0.9s cubic-bezier(0.16,1,0.3,1); } .hero-line.is-visible { opacity:1; transform:translateY(0); filter:blur(0); } .hero-line:nth-child(2) { transition-delay:0.15s; } .hero-line:nth-child(3) { transition-delay:0.3s; } .hero-badge-entrance { opacity:0; transform:translateY(12px) scale(0.9); transition:all 0.7s cubic-bezier(0.16,1,0.3,1); } .hero-badge-entrance.is-visible { opacity:1; transform:translateY(0) scale(1); } .hero-sub-entrance { opacity:0; transform:translateY(18px); filter:blur(4px); transition:all 0.8s cubic-bezier(0.16,1,0.3,1) 0.5s; } .hero-sub-entrance.is-visible { opacity:1; transform:translateY(0); filter:blur(0); } .hero-bento-entrance { opacity:0; transform:translateY(20px) scale(0.98); transition:opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.16,1,0.3,1); } .hero-bento-entrance.is-visible { opacity:1; transform:translateY(0) scale(1); } /* ── BENTO GRID ── */ .bento-eltern { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:260px 180px; gap:16px; } @media (min-width: 768px) { .bento-eltern { grid-template-columns:1.4fr 1fr 0.9fr; grid-template-rows:220px 220px; gap:20px; } } .bento-item { border-radius:24px; overflow:hidden; position:relative; background:#f1f5f9; } .bento-item img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--smooth-zoom); } .bento-item:hover img { transform: scale(1.12); } .bento-span-2 { grid-column: span 2; } @media (min-width: 768px) { .bento-tall { grid-row: span 2; } .bento-span-2 { grid-column: span 1; } } .bento-overlay { position: absolute; bottom: 16px; left: 16px; right: 16px; padding: 14px 20px; background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.8); border-radius: 16px; transform: translateY(120%) scale(0.95); opacity: 0; transition: all 0.6s var(--liquid-bounce); z-index: 5; } .bento-item:hover .bento-overlay { transform: translateY(0) scale(1); opacity: 1; } .bento-overlay span { color: var(--amina-dark); font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 10px; } .bento-overlay span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--amina-pink); flex-shrink: 0; box-shadow: 0 0 10px var(--amina-pink); } /* ── EINGEWÖHNUNG PHASES ── */ .eingewoehnung-phase { position:relative; padding:28px 28px 28px 85px; border-radius:28px; background:rgba(255,255,255,0.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.8); box-shadow:0 2px 8px -2px rgba(26,32,44,0.04), 0 4px 16px -4px rgba(26,32,44,0.03); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1), border-color 0.5s cubic-bezier(0.34,1.56,0.64,1); overflow:hidden; } .eingewoehnung-phase:hover { transform: translateX(8px) translateY(-4px); border-color: currentColor; box-shadow: 0 12px 40px -8px rgba(26,32,44,0.12), 0 0 15px -3px currentColor; } .phase-svg-wrapper { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:56px; height:56px; z-index:10; color:currentColor; } .phase-svg-wrapper svg { width:100%; height:100%; overflow:visible; } .svg-bg-circle, .svg-solid-ring, .svg-dash-ring, .svg-num-text { transform-origin: 30px 30px; } .svg-bg-circle { transition:all 0.6s var(--liquid-bounce); } .eingewoehnung-phase:hover .svg-bg-circle { transform:scale(1.15); opacity:0.25; } .svg-solid-ring { transition:stroke-dashoffset 0.8s cubic-bezier(0.22,1,0.36,1); transform:rotate(-90deg); } .eingewoehnung-phase:hover .svg-solid-ring { stroke-dashoffset:0; } .svg-dash-ring { transition:opacity 0.4s ease; } .eingewoehnung-phase:hover .svg-dash-ring { opacity:0.6; animation:spin-ring 8s linear infinite; } .svg-num-text { transition:all 0.6s var(--liquid-bounce); } .eingewoehnung-phase:hover .svg-num-text { transform:scale(1.18); } .svg-orbit-dot { transform-origin:30px 30px; transition:opacity 0.5s ease; } .eingewoehnung-phase:hover .svg-orbit-dot { opacity:1; animation:orbit-dot 3s linear infinite; } @keyframes spin-ring { 100% { transform:rotate(360deg); } } @keyframes orbit-dot { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } .phase-watermark { position:absolute; right:-12px; bottom:-28px; font-size:100px; font-weight:900; line-height:1; opacity:0.05; user-select:none; pointer-events:none; color:currentColor; } .phase-tag { display:inline-flex; align-items:center; gap:6px; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; padding:4px 12px; border-radius:9999px; margin-bottom:10px; } .phase-connector { width:2px; height:28px; margin:4px 0 4px 43px; border-radius:2px; background:currentColor; opacity:0.2; } @media (max-width: 640px) { .eingewoehnung-phase { padding: 24px 20px 24px 72px; } .phase-svg-wrapper { left: 12px; width: 48px; height: 48px; } .phase-svg-wrapper svg { transform: scale(0.85); transform-origin: left center; } .phase-connector { margin: 4px 0 4px 35px; height: 20px; } } /* ── FAQ ACCORDION ── */ .faq-item { border-radius:20px; background:rgba(255,255,255,0.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.8); box-shadow:0 2px 8px rgba(26,32,44,0.04); overflow:hidden; transition: background 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s cubic-bezier(0.34,1.56,0.64,1); position:relative; } .faq-item.is-open { background:rgba(255,255,255,0.92); border-color:var(--faq-glow, rgba(255,255,255,0.95)); box-shadow:0 8px 32px -8px rgba(26,32,44,0.1), 0 0 15px -3px var(--faq-glow, transparent); } .faq-trigger { width:100%; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; background:none; border:none; text-align:left; } .faq-trigger:focus-visible { outline:3px solid var(--faq-glow, var(--amina-blue)); outline-offset:-3px; } .faq-question { font-size:1rem; font-weight:800; color:var(--amina-dark); line-height:1.3; } .faq-chevron { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: var(--amina-dark); transition: transform 0.5s var(--liquid-bounce), background 0.5s var(--liquid-bounce), color 0.5s var(--liquid-bounce), box-shadow 0.5s var(--liquid-bounce); box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 2px rgba(255,255,255,1); } .faq-item.is-open .faq-chevron { background: var(--faq-glow, var(--amina-blue)); color: white; transform: rotate(180deg) scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease; opacity: 0; } .faq-item.is-open .faq-body { grid-template-rows: 1fr; opacity: 1; } .faq-body-inner { min-height: 0; overflow: hidden; padding: 0 24px; font-size: 0.95rem; line-height: 1.75; color: #475569; font-weight: 500; } .faq-body-inner::before { content: ""; display: block; border-top: 1px solid rgba(0,0,0,0.05); margin-bottom: 16px; } .faq-body-inner::after { content: ""; display: block; height: 24px; } .faq-category-label { display:flex; align-items:center; gap:10px; margin-bottom:16px; } .faq-cat-dot { width:8px; height:8px; border-radius:50%; } /* ── DOKUMENT DOWNLOAD CARD ── */ .doc-card { display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:20px; background:rgba(255,255,255,0.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,0.8); box-shadow:0 2px 8px rgba(26,32,44,0.04); text-decoration:none; color:inherit; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s cubic-bezier(0.34,1.56,0.64,1); position:relative; overflow:hidden; } .doc-card:hover { transform:translateY(-4px) scale(1.01); background:rgba(255,255,255,0.92); box-shadow:0 12px 32px -8px rgba(26,32,44,0.1); } .doc-icon { width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.7); box-shadow:inset 0 2px 8px rgba(255,255,255,0.6), 0 4px 12px rgba(0,0,0,0.06); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); } .doc-card:hover .doc-icon { transform:scale(1.1) rotate(-4deg); } .doc-arrow { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: var(--amina-dark); transition: transform 0.5s var(--liquid-bounce), background 0.5s var(--liquid-bounce), color 0.5s var(--liquid-bounce), box-shadow 0.5s var(--liquid-bounce); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 2px rgba(255,255,255,1); } @media (hover: hover) { .doc-card:hover .doc-arrow { background: var(--amina-dark); color: white; transform: translateX(4px) translateY(-2px) scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } } .doc-card:hover .doc-arrow svg { animation: arrow-bounce 0.5s ease infinite alternate; } @keyframes arrow-bounce { 0% { transform: translateY(0); } 100% { transform: translateY(2px); } } /* ── KOSTEN CARDS ── */ .kosten-card { padding:32px 28px; border-radius:28px; position:relative; overflow:hidden; text-align:left; display:flex; flex-direction:column; } .kosten-badge { display:inline-flex; align-items:center; font-size:0.65rem; font-weight:900; text-transform:uppercase; letter-spacing:0.1em; padding:4px 12px; border-radius:9999px; background:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.8); margin-bottom:16px; align-self:flex-start; } .kosten-price { font-size:clamp(2.2rem,4vw,3rem); font-weight:900; letter-spacing:-0.04em; line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums; color:var(--amina-dark); } .kosten-divider { height:1px; background:rgba(0,0,0,0.05); margin:20px 0; } .kosten-feature { display:flex; align-items:center; gap:10px; font-size:0.82rem; font-weight:700; margin-bottom:8px; color:#475569; } .kosten-feature::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; } .kosten-card.hover-blue .kosten-feature::before { background:var(--amina-blue); } .kosten-card.hover-pink .kosten-feature::before { background:var(--amina-pink); } .kosten-card.hover-green .kosten-feature::before { background:var(--amina-green); } /* ── KOSTEN CARD 2026: FARBIGER TOP-ACCENT ── */ .kosten-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 28px 28px 0 0; background: var(--card-accent, rgba(200,200,200,0.3)); z-index: 3; transition: height 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease; } .kosten-card:hover::before { height: 6px; } .kosten-card.hover-blue { --card-accent: var(--amina-blue); } .kosten-card.hover-pink { --card-accent: var(--amina-pink); } .kosten-card.hover-green { --card-accent: var(--amina-green); } /* ── KOSTEN CARD: PERMANENTER FARBIGER HINTERGRUND-HAUCH ── */ .kosten-card.hover-blue { background: linear-gradient(160deg, rgba(72,160,214,0.06) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.75) !important; } .kosten-card.hover-pink { background: linear-gradient(160deg, rgba(213,90,146,0.05) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.75) !important; } .kosten-card.hover-green { background: linear-gradient(160deg, rgba(127,177,78,0.05) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.75) !important; } /* ── KOSTEN BADGE: FARBIG ── */ .kosten-card.hover-blue .kosten-badge { color: var(--amina-blue); background: rgba(72,160,214,0.10); border-color: rgba(72,160,214,0.25); } .kosten-card.hover-pink .kosten-badge { color: var(--amina-pink); background: rgba(213,90,146,0.10); border-color: rgba(213,90,146,0.25); } .kosten-card.hover-green .kosten-badge { color: var(--amina-green); background: rgba(127,177,78,0.10); border-color: rgba(127,177,78,0.25); } /* ── STAT COUNTERS ── */ .stat-number { font-size:clamp(2.5rem,4vw,3.5rem); font-weight:900; line-height:1; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; } /* Suffix für Statistik-Zahlen – kleiner und leichter */ .stat-suffix { font-size: 0.5em; font-weight: 700; opacity: 0.6; margin-left: 2px; white-space: nowrap; display: inline-block; } /* 💎 PREMIUM GLAS-EFFEKT FÜR STATISTIK-BOXEN (WIE HERO-BOXEN) */ .stat-premium-glass { background: rgba(255,255,255,0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 10px 25px -8px rgba(0, 20, 40, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.5) !important; position: relative; overflow: hidden; } .stat-premium-glass::after { content: ""; position: absolute; inset: 0; opacity: 0.25 !important; background-image: var(--noise-intense); background-size: 200px 200px; mix-blend-mode: overlay; pointer-events: none; z-index: 1; border-radius: inherit; } .stat-premium-glass::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255,255,245,0.3) 0%, transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: overlay; border-radius: inherit; opacity: 0.8; } /* ── HIGHLIGHT REVEAL ── */ .highlight-reveal { background-size:200% 100%; background-position:100% 0; background-image:linear-gradient(to right,rgba(245,158,11,0.22) 50%,transparent 50%); transition:background-position 1.2s cubic-bezier(0.22,1,0.36,1); padding:2px 4px; margin:-2px -4px; border-radius:4px; } body:not(.menu-open) { background-color: #ffffff; } .highlight-reveal.is-highlighted { background-position:0 0; } /* ── ENTRANCE TAGS ── */ .entrance-tag { opacity:0; transform:translateY(12px) scale(0.9); transition:all 0.6s cubic-bezier(0.34,1.56,0.64,1); min-height:44px; padding:0.75rem 1.25rem; display:inline-flex; align-items:center; } .entrance-tag.is-visible { opacity:1; transform:translateY(0) scale(1); } /* ── CTA PATTERN ── */ .cta-pattern-bg { background-image: radial-gradient(circle at 20% 30%,rgba(72,160,214,0.08) 0%,transparent 50%), radial-gradient(circle at 80% 70%,rgba(213,90,146,0.08) 0%,transparent 50%); } /* ----- GLAS-EFFEKT FÜR EINGEWÖHNUNGSPHASEN (MIT FARBAKZENTEN) ----- */ .eingewoehnung-phase { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 10px 25px -8px rgba(0, 20, 40, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.5) !important; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); } /* Verstärkte Noise-Textur */ .eingewoehnung-phase::after { content: ""; position: absolute; inset: 0; opacity: 0.25 !important; background-image: var(--noise-intense) !important; mix-blend-mode: overlay !important; pointer-events: none; z-index: 1; border-radius: inherit; } /* Mehrere Lichtreflexe (Glanzlichter) */ .eingewoehnung-phase::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255,255,245,0.3) 0%, transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: overlay; border-radius: inherit; opacity: 0.8; } /* Farbige Glas-Akzente pro Phase (basierend auf der Textfarbe) */ .eingewoehnung-phase[style*="color:var(--amina-blue)"] { background: radial-gradient(circle at 30% 40%, rgba(72,160,214,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } .eingewoehnung-phase[style*="color:var(--amina-pink)"] { background: radial-gradient(circle at 60% 70%, rgba(213,90,146,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } .eingewoehnung-phase[style*="color:var(--amina-green)"] { background: radial-gradient(circle at 70% 30%, rgba(127,177,78,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } .eingewoehnung-phase[style*="color:var(--amina-yellow)"] { background: radial-gradient(circle at 40% 60%, rgba(245,158,11,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } /* ----- GLAS-EFFEKT FÜR KOMMUNIKATIONSBOXEN ----- */ #kommunikation .focus-grid .glass-morph { background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 8px -2px rgba(26,32,44,0.04), 0 4px 16px -4px rgba(26,32,44,0.03), inset 0 1px 3px rgba(255,255,255,0.9); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), background 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1), border-color 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; } /* Verstärkte Noise-Textur */ #kommunikation .focus-grid .glass-morph::after { content: ""; position: absolute; inset: 0; opacity: 0.25; background-image: var(--noise-intense); mix-blend-mode: overlay; pointer-events: none; z-index: 1; border-radius: inherit; } /* Mehrere Lichtreflexe (Glanzlichter) */ #kommunikation .focus-grid .glass-morph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255,255,245,0.3) 0%, transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: overlay; border-radius: inherit; opacity: 0.8; } #kommunikation .focus-grid .glass-morph.hover-blue { background: linear-gradient(160deg, rgba(72,160,214,0.18) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.65); border: 1px solid rgba(72,160,214,0.3); } #kommunikation .focus-grid .glass-morph.hover-pink { background: linear-gradient(160deg, rgba(213,90,146,0.16) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.65); border: 1px solid rgba(213,90,146,0.3); } #kommunikation .focus-grid .glass-morph.hover-green { background: linear-gradient(160deg, rgba(127,177,78,0.16) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.65); border: 1px solid rgba(127,177,78,0.3); } #kommunikation .focus-grid .glass-morph.hover-yellow { background: linear-gradient(160deg, rgba(245,158,11,0.16) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.65); border: 1px solid rgba(245,158,11,0.3); } #kommunikation .focus-grid .glass-morph.hover-blue:hover { background: linear-gradient(160deg, rgba(72,160,214,0.25) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.80); border-color: rgba(72,160,214,0.5); box-shadow: 0 10px 28px -8px rgba(72,160,214,0.20), inset 0 1px 3px rgba(255,255,255,1); } #kommunikation .focus-grid .glass-morph.hover-pink:hover { background: linear-gradient(160deg, rgba(213,90,146,0.22) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.80); border-color: rgba(213,90,146,0.5); box-shadow: 0 10px 28px -8px rgba(213,90,146,0.20), inset 0 1px 3px rgba(255,255,255,1); } #kommunikation .focus-grid .glass-morph.hover-green:hover { background: linear-gradient(160deg, rgba(127,177,78,0.22) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.80); border-color: rgba(127,177,78,0.5); box-shadow: 0 10px 28px -8px rgba(127,177,78,0.20), inset 0 1px 3px rgba(255,255,255,1); } #kommunikation .focus-grid .glass-morph.hover-yellow:hover { background: linear-gradient(160deg, rgba(245,158,11,0.22) 0%, rgba(255,255,255,0) 60%), rgba(255,255,255,0.80); border-color: rgba(245,158,11,0.5); box-shadow: 0 10px 28px -8px rgba(245,158,11,0.20), inset 0 1px 3px rgba(255,255,255,1); } /* ----- GLAS-EFFEKT MIT FARBIGER TEXTUR FÜR KOSTEN-BOXEN ----- */ #kosten .focus-grid .glass-morph { /* Hintergrund: Glas + farbiger Akzent (sichtbar) */ background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%), radial-gradient(circle at 30% 40%, rgba(72,160,214,0.3) 0%, transparent 70%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Mehrschichtiger Rahmen: innen leuchtend, außen Tiefe */ box-shadow: 0 10px 25px -8px rgba(0, 20, 40, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.5); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), background 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1), border-color 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; } /* ----- HOVER: VOLLFLÄCHIGE FARBIGE GLAS-TEXTUR FÜR KOSTEN-BOXEN ----- */ #kosten .focus-grid .glass-morph.hover-blue:hover { background: linear-gradient(160deg, rgba(72,160,214,0.10) 0%, rgba(255,255,255,0) 55%), rgba(255,255,255,0.92); border-color: rgba(72,160,214,0.5); box-shadow: 0 10px 28px -8px rgba(72,160,214,0.18), inset 0 0 0 1.5px rgba(72,160,214,0.35), inset 0 1px 3px rgba(255,255,255,1); } #kosten .focus-grid .glass-morph.hover-pink:hover { background: linear-gradient(160deg, rgba(213,90,146,0.08) 0%, rgba(255,255,255,0) 55%), rgba(255,255,255,0.92); border-color: rgba(213,90,146,0.5); box-shadow: 0 10px 28px -8px rgba(213,90,146,0.18), inset 0 0 0 1.5px rgba(213,90,146,0.35), inset 0 1px 3px rgba(255,255,255,1); } #kosten .focus-grid .glass-morph.hover-green:hover { background: linear-gradient(160deg, rgba(127,177,78,0.08) 0%, rgba(255,255,255,0) 55%), rgba(255,255,255,0.92); border-color: rgba(127,177,78,0.5); box-shadow: 0 10px 28px -8px rgba(127,177,78,0.18), inset 0 0 0 1.5px rgba(127,177,78,0.35), inset 0 1px 3px rgba(255,255,255,1); } /* Farbige Textur für jede Box individuell */ #kosten .focus-grid .glass-morph.hover-blue { background: linear-gradient(160deg, rgba(72,160,214,0.06) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.75); } #kosten .focus-grid .glass-morph.hover-pink { background: linear-gradient(160deg, rgba(213,90,146,0.05) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.75); } #kosten .focus-grid .glass-morph.hover-green { background: linear-gradient(160deg, rgba(127,177,78,0.05) 0%, rgba(255,255,255,0) 50%), rgba(255,255,255,0.75); } /* ── KOSTEN FEATURED CARD (permanent hover) ── */ #kosten .focus-grid .glass-morph.kosten-card.is-featured, #kosten .focus-grid .glass-morph.kosten-card.is-featured:not(:hover) { background: linear-gradient(160deg, rgba(213,90,146,0.10) 0%, rgba(255,255,255,0) 55%), rgba(255,255,255,0.92); border-color: rgba(213,90,146,0.55); box-shadow: 0 12px 32px -8px rgba(213,90,146,0.22), inset 0 0 0 1.5px rgba(213,90,146,0.40), inset 0 1px 3px rgba(255,255,255,1); transform: translateY(-6px) scale(1.015); border-radius: 32px 16px 32px 16px; opacity: 1 !important; filter: none !important; z-index: 10; } #kosten .focus-grid .glass-morph.kosten-card.is-featured::before { height: 6px; } /* ── KOSTEN RIBBON ── */ .kosten-ribbon { position: absolute; top: 26px; right: -34px; width: 148px; padding: 8px 0; text-align: center; font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.10em; color: #fff; background: linear-gradient(135deg, #e05c95 0%, var(--amina-pink) 50%, #c9457f 100%); transform: rotate(45deg); box-shadow: 0 3px 12px rgba(213,90,146,0.45), inset 0 1px 0 rgba(255,255,255,0.25); pointer-events: none; z-index: 20; overflow: hidden; white-space: nowrap; } .kosten-ribbon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 100%); pointer-events: none; } .kosten-ribbon::after { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.38), transparent); transform: skewX(-18deg); animation: ribbon-shimmer 3.5s ease-in-out infinite 1.2s; } @keyframes ribbon-shimmer { 0%, 100% { left: -80%; opacity: 0; } 20% { opacity: 1; } 60% { left: 160%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .kosten-ribbon::after { animation: none !important; } } /* Verstärkte Noise-Textur (wie bei den Icons) */ #kosten .focus-grid .glass-morph::after { content: ""; position: absolute; inset: 0; opacity: 0.25; background-image: var(--noise-intense); mix-blend-mode: overlay; pointer-events: none; z-index: 1; border-radius: inherit; } /* Mehrere Lichtreflexe (Glanzlichter) */ #kosten .focus-grid .glass-morph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255,255,245,0.3) 0%, transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: overlay; border-radius: inherit; opacity: 0.8; } /* ----- GLAS-EFFEKT FÜR FAQ-BOXEN (MIT FARBAKZENTEN) ----- */ .faq-item { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 25px -8px rgba(0, 20, 40, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.5); transition: background 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); } /* Verstärkte Noise-Textur (wie bei den Icons) */ .faq-item::after { content: ""; position: absolute; inset: 0; opacity: 0.25 !important; background-image: var(--noise-intense) !important; mix-blend-mode: overlay !important; pointer-events: none; z-index: 1; border-radius: inherit; } /* Mehrere Lichtreflexe (Glanzlichter) */ .faq-item::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255,255,245,0.3) 0%, transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: overlay; border-radius: inherit; opacity: 0.8; } /* Farbige Glas-Akzente pro Kategorie (über die Variable --faq-glow) */ .faq-item[style*="--faq-glow: var(--amina-blue)"] { background: radial-gradient(circle at 30% 40%, rgba(72,160,214,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } .faq-item[style*="--faq-glow: var(--amina-pink)"] { background: radial-gradient(circle at 60% 70%, rgba(213,90,146,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } .faq-item[style*="--faq-glow: var(--amina-green)"] { background: radial-gradient(circle at 70% 30%, rgba(127,177,78,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } .faq-item[style*="--faq-glow: var(--amina-yellow)"] { background: radial-gradient(circle at 40% 60%, rgba(245,158,11,0.2) 0%, transparent 70%), radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%); background-blend-mode: overlay, normal; } /* ── FAQ 2.0: FILTER PILLS ── */ .faq-filter-wrap { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; position: sticky; top: 72px; z-index: 50; padding: 12px 24px; margin-left: -24px; margin-right: -24px; background: linear-gradient(to bottom, #f7f8fb 65%, transparent); margin-bottom: 0; } .faq-filter-wrap::-webkit-scrollbar { display: none; } /* ── SWIPE HINT ── */ .swipe-hint { display: none; } @media (max-width: 768px) { .swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 0; margin-bottom: 0; padding: 10px 0; opacity: 1; transition: opacity 0.6s ease; } .swipe-hint.is-hidden { opacity: 0; pointer-events: none; } } .swipe-hint__hand { font-size: 1rem; animation: hint-swipe 1.8s cubic-bezier(0.25, 1, 0.5, 1) infinite; will-change: auto; } .swipe-hint.js-running .swipe-hint__hand { will-change: transform; } .swipe-hint__text { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(30, 41, 59, 0.35); } .swipe-hint__dots { display: flex; gap: 3px; align-items: center; } .swipe-hint__dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(213, 90, 146, 0.3); } .swipe-hint__dot:nth-child(1) { animation: hint-dot 1.8s ease infinite 0s; } .swipe-hint__dot:nth-child(2) { animation: hint-dot 1.8s ease infinite 0.15s; } .swipe-hint__dot:nth-child(3) { animation: hint-dot 1.8s ease infinite 0.3s; } @keyframes hint-swipe { 0% { transform: translateX(6px); opacity: 0.4; } 30% { transform: translateX(-8px); opacity: 1; } 60% { transform: translateX(4px); opacity: 0.7; } 100% { transform: translateX(6px); opacity: 0.4; } } @keyframes hint-dot { 0%, 100% { opacity: 0.3; transform: scale(1); background: rgba(213, 90, 146, 0.3); } 50% { opacity: 1; transform: scale(1.4); background: rgba(213, 90, 146, 0.85); } } @media (prefers-reduced-motion: reduce) { .swipe-hint__hand, .swipe-hint__dot { animation: none !important; } } .faq-filter-pill { flex-shrink: 0; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; padding: 0 18px; min-height: 44px; border-radius: 9999px; border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.70); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 4px -1px rgba(26, 32, 44, 0.04), inset 0 1px 2px rgba(255, 255, 255, 0.9); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; cursor: pointer; color: var(--amina-dark); white-space: nowrap; position: relative; overflow: hidden; transition: transform 0.45s var(--liquid-bounce), background 0.45s var(--liquid-bounce), box-shadow 0.45s var(--liquid-bounce), border-color 0.45s var(--liquid-bounce), color 0.45s var(--liquid-bounce); } .faq-filter-pill::before { content: ''; position: absolute; inset: 0; background-image: var(--noise-subtle); background-size: 150px 150px; opacity: 0.04; pointer-events: none; mix-blend-mode: overlay; } .faq-filter-pill:hover { transform: translateY(-3px) scale(1.03); background: rgba(255, 255, 255, 0.95); box-shadow: 0 8px 20px -6px rgba(26, 32, 44, 0.1); } .faq-filter-pill.is-active { background: var(--pill-color); border-color: var(--pill-color); color: white; box-shadow: 0 4px 14px -4px var(--pill-color), 0 1px 4px -2px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .faq-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background 0.35s ease, transform 0.35s var(--liquid-bounce); } .faq-filter-pill.is-active .faq-pill-dot { background: rgba(255, 255, 255, 0.9) !important; transform: scale(1.2); } .faq-pill-count { font-size: 0.65rem; font-weight: 900; background: rgba(0, 0, 0, 0.08); padding: 1px 7px; border-radius: 9999px; transition: background 0.3s ease; line-height: 1.6; } .faq-filter-pill.is-active .faq-pill-count { background: rgba(255, 255, 255, 0.25); } /* FAQ Container switch animation */ #faqContainer { transition: opacity 0.2s ease, transform 0.2s ease; margin-top: 0; } #faqContainer.is-switching { opacity: 0; transform: translateY(6px); pointer-events: none; } /* FAQ hidden state */ .faq-item.faq-hidden { display: none; } /* ── FAQ item stagger on category switch ── */ @keyframes faq-item-in { from { opacity: 0; } to { opacity: 1; } } .faq-item.faq-entering { animation: faq-item-in 0.4s cubic-bezier(0.16,1,0.3,1) both; } /* ----- GLAS-EFFEKT FÜR DOKUMENTEN-BOXEN (WIE STARTSEITE) ----- */ .doc-card { background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 100%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; /* Mehrschichtiger Rahmen: innen leuchtend, außen Tiefe */ box-shadow: 0 10px 25px -8px rgba(0, 20, 40, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.9), inset 0 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.5) !important; transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } /* Verstärkte Noise-Textur (wie bei den Icons) */ .doc-card::after { content: ""; position: absolute; inset: 0; opacity: 0.25 !important; background-image: var(--noise-intense) !important; mix-blend-mode: overlay !important; pointer-events: none; z-index: 1; border-radius: inherit; } /* Mehrere Lichtreflexe (Glanzlichter) */ .doc-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 50%), radial-gradient(circle at 40% 80%, rgba(255,255,245,0.3) 0%, transparent 60%); pointer-events: none; z-index: 2; mix-blend-mode: overlay; border-radius: inherit; opacity: 0.8; } /* ── FORM GLASS BUTTONS ── */ .form-glass-btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 20px; background: rgba(255,255,255,0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.85); box-shadow: 0 4px 16px -4px rgba(26,32,44,0.06), inset 0 1px 3px rgba(255,255,255,0.9); cursor: pointer; transition: transform 0.5s var(--liquid-bounce), background 0.5s var(--liquid-bounce), box-shadow 0.5s var(--liquid-bounce), border-radius 0.5s var(--liquid-bounce); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .form-glass-btn::before { content: ""; position: absolute; inset: 0; background-image: var(--noise-medium); background-size: 150px 150px; opacity: 0.04; pointer-events: none; z-index: 0; mix-blend-mode: overlay; } .form-glass-btn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); border-radius: 20px 20px 0 0; pointer-events: none; z-index: 1; } .form-glass-btn:hover { transform: translateY(-4px); border-radius: 26px 12px 26px 12px; background: rgba(255,255,255,0.88); box-shadow: 0 12px 32px -6px rgba(26,32,44,0.1), inset 0 1px 3px rgba(255,255,255,1); } .form-glass-btn__icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 2; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); } .form-glass-btn:hover .form-glass-btn__icon { transform: rotate(-8deg) scale(1.1); } .form-glass-btn--blue .form-glass-btn__icon { background: rgba(72,160,214,0.12); color: var(--amina-blue); box-shadow: inset 0 0 0 1.5px rgba(72,160,214,0.25), 0 4px 12px rgba(72,160,214,0.15); } .form-glass-btn__content { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; } .form-glass-btn__label { font-size: 0.9rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; } .form-glass-btn--blue .form-glass-btn__label { color: var(--amina-blue); } .form-glass-btn__sub { font-size: 0.72rem; font-weight: 600; color: rgba(30,41,59,0.5); line-height: 1.3; margin-top: 2px; } .form-glass-btn--blue { box-shadow: 0 0 18px rgba(72,160,214,0.18), 0 4px 16px -4px rgba(26,32,44,0.06), inset 0 0 0 1.5px rgba(72,160,214,0.35), inset 0 1px 3px rgba(255,255,255,0.9); } .form-glass-btn--blue:hover { box-shadow: 0 12px 32px -6px rgba(72,160,214,0.2), inset 0 0 0 1.5px rgba(72,160,214,0.35), inset 0 1px 3px rgba(255,255,255,1); } @media (max-width: 640px) { .form-glass-btn__icon { width: 38px; height: 38px; } .form-glass-btn { padding: 12px 16px; gap: 10px; } } /* ── DESKTOP SECTION SPACING KOMPRIMIERT ── */ @media (min-width: 1024px) { main > section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } main > section:last-of-type { padding-top: 4rem !important; padding-bottom: 14rem !important; } .wave-container { height: 52px !important; } } @media (min-width: 768px) and (max-width: 1023px) { main > section { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } main > section:first-of-type { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .wave-container { height: 24px !important; } } @media (max-width: 767px) and (orientation: landscape) { main > section { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } main > section:first-of-type { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .wave-container { height: 18px !important; } } @media (max-width: 1023px) { /* Hero */ main > section:first-of-type { padding-top: 1rem !important; padding-bottom: 1.5rem !important; } /* Bento direkt am unteren Rand der Section kleben */ .hero-bento-entrance { margin-bottom: 0 !important; } .bento-eltern { grid-template-rows: 180px 130px !important; margin-bottom: 0 !important; } /* Alle mb-10 vor dem Bento entfernen */ #heroEntrance > div:last-child { margin-bottom: 0 !important; } } @media (max-width: 767px) { /* Bento-Grid: kompakte Zeilenhöhen */ .bento-eltern { grid-template-rows: 160px 120px !important; } /* Quick-Nav Pills kompakter */ .entrance-tag { padding: 0.5rem 0.9rem !important; font-size: 0.65rem !important; min-height: 36px !important; } /* Hero-Subtext kompakter */ .hero-sub-entrance { margin-bottom: 0.5rem !important; } } @media (max-width: 767px) and (orientation: landscape) { .bento-eltern { grid-template-rows: 110px !important; grid-template-columns: 1fr 1fr 1fr !important; } .bento-span-2 { grid-column: span 1 !important; } } /* ══════════════════════════════════════════════════════════════ ÖFFNUNGSZEITEN-WIDGET ══════════════════════════════════════════════════════════════ */ /* Section */ /* ═══════════════════════════════════════════════════════════════════ ÖFFNUNGSZEITEN — DYNAMIC SKY SYSTEM Tageszeit-Simulation via NOAA Sonnenposition (Wien 48.2°N / 16.37°E) ═══════════════════════════════════════════════════════════════════ */ #oeffnung-section { background: #f8faff; transition: background 3s ease; margin-top: 80px; /* Ersetzt den Layout-Raum den ozEntryWave früher als Div im Fluss erzeugte */ padding-bottom: 2.5rem; position: relative; z-index: 2; overflow: visible; /* Kind-Elemente (Wave + Sonne) dürfen über Section-Grenze überlaufen */ content-visibility: visible; /* Überschreibt render-lazy: kein contain:paint — verhindert Clipping der Wave und des Sonne-Glows */ } /* ── Sky Layer Container ── */ .oz-sky-layer { position: absolute; top: 0; left: 0; right: 0; /* Fixe Höhe — NICHT bottom:0 — damit Akkordeon-Expansion Sterne/Mond/Sternschnuppe nicht verschiebt */ height: clamp(700px, 200vw, 920px); pointer-events: none; overflow: hidden; transition: background 3s ease; } /* Sonnen-Glow-Kante: overflow nur wenn Sonne kritisch nah oben — Clip aufheben */ #oeffnung-section.is-sun-near-top .oz-sky-layer { overflow: visible; } /* ── State Hintergründe ── */ #oeffnung-section.sky-is-predawn { /* Frühe Morgendämmerung (Elev -6° bis -2°): fast Nacht, zarter Rotton am Horizont */ background: linear-gradient(180deg, #020407 0%, #04080f 25%, #070d1a 50%, #120a18 70%, #2a1008 88%, #3d1a08 100%); } #oeffnung-section.sky-is-preopen { background: linear-gradient(180deg, #060d1a 0%, #0d1e38 30%, #1e2d58 55%, #6b3020 78%, #c06030 92%, #e08850 100%); } #oeffnung-section.sky-is-open-morning { background: linear-gradient(180deg, #c8e6f5 0%, #ddf0fa 45%, #eef8fd 75%, #fef6ec 92%, #fdeedd 100%); } #oeffnung-section.sky-is-open-midday { background: linear-gradient(180deg, #b8dff2 0%, #d2edf8 40%, #e6f5fb 70%, #f2fafd 100%); } #oeffnung-section.sky-is-closing-soon { background: linear-gradient(180deg, #b8d4e8 0%, #dcc8a0 50%, #e8a878 78%, #edbf8a 100%); } #oeffnung-section.sky-is-closed-evening { /* Bürgerliche Dämmerung nach Sonnenuntergang: dunkles Blauviolett, zartes Glutrot am Horizont */ background: linear-gradient(180deg, #06040e 0%, #0e0820 35%, #1e0e30 58%, #3a1010 78%, #6a2010 92%, #8a3018 100%); } #oeffnung-section.sky-is-closed-night { background: linear-gradient(180deg, #020509 0%, #040a18 35%, #060d1a 65%, #08122a 100%); } #oeffnung-section.sky-is-closed-day { background: linear-gradient(180deg, #c8e0f0 0%, #deeef8 45%, #eef7fc 75%, #f8fafc 100%); } /* ── sky-is-closed-day: komplexer Morgen/Abend-Himmel → off-white Text ── */ #oeffnung-section.sky-is-closed-day .text-aminaDark { color: #f0f4f8 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.20); transition: color 2.5s ease; } #oeffnung-section.sky-is-closed-day .text-slate-500 { color: rgba(240,248,255,0.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: color 2.5s ease; } #oeffnung-section.sky-is-closed-day .eyebrow-badge { background: rgba(255,255,255,0.18) !important; color: rgba(255,255,255,0.90) !important; border-color: rgba(255,255,255,0.28) !important; } #oeffnung-section.sky-is-closed-day .oz-live-badge.is-closed { background: rgba(255,255,255,0.92) !important; border-color: rgba(220,38,38,0.30) !important; color: #c02929 !important; } #oeffnung-section.sky-is-closed-day .oz-warn-btn { background: rgba(255,255,255,0.92) !important; border-color: rgba(220,38,38,0.35) !important; } #oeffnung-section.sky-is-closed-day .oz-tabs { background: transparent !important; border: none !important; box-shadow: none !important; } #oeffnung-section.sky-is-closed-day .oz-tab { color: rgba(255,255,255,0.70) !important; border-color: rgba(255,255,255,0.28) !important; } #oeffnung-section.sky-is-closed-day .oz-tab::before { background: rgba(255,255,255,0.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 1px 3px rgba(0,0,0,0.06) !important; } #oeffnung-section.sky-is-closed-day .oz-tab.is-active { color: #1e1b4b !important; border-color: rgba(255,255,255,0.95) !important; } #oeffnung-section.sky-is-closed-day .oz-tab.is-active::before { background: rgba(255,255,255,0.96) !important; } /* ── sky-is-open: Chip-Rand weiß statt grau — frosted glass im Himmel ── */ #oeffnung-section.sky-is-open-morning .oz-tab, #oeffnung-section.sky-is-open-midday .oz-tab { border-color: rgba(255,255,255,0.55); color: rgba(50,100,165,0.72); } #oeffnung-section.sky-is-open-morning .oz-tab::before, #oeffnung-section.sky-is-open-midday .oz-tab::before { background: rgba(255,255,255,0.60); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 4px rgba(0,0,0,0.05); } /* ── sky-is-closed-day: Wolken neben Kinderbild verschieben ── */ #ozCloudRight, #ozCloudLowerLeft { transition: top 1s ease, filter 3s ease !important; } #oeffnung-section.sky-is-closed-day #ozCloudRight { top: clamp(460px, 107vw, 570px) !important; } #oeffnung-section.sky-is-closed-day #ozCloudLowerLeft { top: clamp(455px, 104vw, 560px) !important; left: clamp(8px, 4vw, 20px) !important; } /* ── Nacht/Abend: Wolken neben schlafen Kind runtersetzen ── */ #oeffnung-section.sky-is-closed-night #ozCloudRight, #oeffnung-section.sky-is-closed-evening #ozCloudRight { top: clamp(300px, 82vw, 390px) !important; } #oeffnung-section.sky-is-closed-night #ozCloudLowerLeft, #oeffnung-section.sky-is-closed-evening #ozCloudLowerLeft { top: clamp(300px, 82vw, 390px) !important; } /* ── sky-is-closed-day: Gold-Animation auf Headline ── */ #oeffnung-section.sky-is-closed-day .text-gradient-flow { animation: textShineDay 6s ease-in-out infinite alternate !important; } /* ── Gradient-Headline: closed-day → warm pastell auf komplexem Hintergrund ── */ /* Amina-Blue (#48A0D6) = fast identisch mit Himmelsfarbe → warme Töne stattdessen */ #oeffnung-section.sky-is-open-morning .text-gradient-flow, #oeffnung-section.sky-is-open-midday .text-gradient-flow, #oeffnung-section.sky-is-closing-soon .text-gradient-flow, #oeffnung-section.sky-is-closed-evening .text-gradient-flow { background: linear-gradient(to right, #FFDCE6 0%, #FFC4DE 35%, #EEB0D8 65%, #CEC4FD 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: textShineDay 6s ease-in-out infinite alternate !important; } @keyframes textShineDay { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ── Grünes Badge + Uhrzeit auf blauem Himmel: mehr Kontrast ── */ #oeffnung-section.sky-is-open-morning .oz-live-badge.is-open, #oeffnung-section.sky-is-open-midday .oz-live-badge.is-open, #oeffnung-section.sky-is-closing-soon .oz-live-badge.is-open { background: rgba(255,255,255,0.92) !important; border-color: rgba(127,177,78,0.35) !important; color: #3d6e20 !important; } #oeffnung-section.sky-is-open-morning .oz-live-badge.is-open .oz-live-dot, #oeffnung-section.sky-is-open-midday .oz-live-badge.is-open .oz-live-dot, #oeffnung-section.sky-is-closing-soon .oz-live-badge.is-open .oz-live-dot { background: #7FB14E !important; } /* oz-needle-time sky-state overrides entfernt — Capsule ist eigenständig lesbar auf allen Hintergründen */ #oeffnung-section.sky-is-open-morning .text-aminaDark, #oeffnung-section.sky-is-open-midday .text-aminaDark, #oeffnung-section.sky-is-closing-soon .text-aminaDark { color: #f0f4f8 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.18); transition: color 2.5s ease; } #oeffnung-section.sky-is-open-morning .text-slate-500, #oeffnung-section.sky-is-open-midday .text-slate-500, #oeffnung-section.sky-is-closing-soon .text-slate-500 { color: #e8eef4 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: color 2.5s ease; } #oeffnung-section.sky-is-open-morning .eyebrow-badge, #oeffnung-section.sky-is-open-midday .eyebrow-badge, #oeffnung-section.sky-is-closing-soon .eyebrow-badge { background: rgba(255,255,255,0.55) !important; border-color: rgba(255,255,255,0.80) !important; transition: background 2.5s ease; } /* ── Nacht / Abend / Dämmerung: Textfarben invertieren ── */ #oeffnung-section.sky-is-closed-night .text-aminaDark, #oeffnung-section.sky-is-closed-evening .text-aminaDark, #oeffnung-section.sky-is-predawn .text-aminaDark, #oeffnung-section.sky-is-preopen .text-aminaDark { color: #ffffff !important; transition: color 2.5s ease; } #oeffnung-section.sky-is-closed-night .text-slate-500, #oeffnung-section.sky-is-closed-evening .text-slate-500, #oeffnung-section.sky-is-predawn .text-slate-500, #oeffnung-section.sky-is-preopen .text-slate-500 { color: rgba(255,255,255,0.72) !important; transition: color 2.5s ease; } #oeffnung-section.sky-is-closed-night .eyebrow-badge, #oeffnung-section.sky-is-predawn .eyebrow-badge, #oeffnung-section.sky-is-preopen .eyebrow-badge { background: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.88) !important; border-color: rgba(255,255,255,0.16) !important; transition: background 2.5s ease, color 2.5s ease; } #oeffnung-section.sky-is-closed-evening .eyebrow-badge { background: rgba(255,255,255,0.55) !important; color: rgba(30,27,75,0.85) !important; border-color: rgba(255,255,255,0.80) !important; transition: background 2.5s ease, color 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-tabs, #oeffnung-section.sky-is-closed-evening .oz-tabs, #oeffnung-section.sky-is-predawn .oz-tabs, #oeffnung-section.sky-is-preopen .oz-tabs { background: transparent !important; border: none !important; box-shadow: none !important; transition: none; } #oeffnung-section.sky-is-closed-night .oz-tab, #oeffnung-section.sky-is-closed-evening .oz-tab, #oeffnung-section.sky-is-predawn .oz-tab, #oeffnung-section.sky-is-preopen .oz-tab { color: rgba(255,255,255,0.60) !important; border-color: rgba(255,255,255,0.14) !important; transition: color 2.5s ease, border-color 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-tab::before, #oeffnung-section.sky-is-closed-evening .oz-tab::before, #oeffnung-section.sky-is-predawn .oz-tab::before, #oeffnung-section.sky-is-preopen .oz-tab::before { background: rgba(255,255,255,0.07) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important; transition: background 2.5s ease, box-shadow 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-tab.is-active, #oeffnung-section.sky-is-closed-evening .oz-tab.is-active, #oeffnung-section.sky-is-predawn .oz-tab.is-active, #oeffnung-section.sky-is-preopen .oz-tab.is-active { background: transparent !important; color: #ffffff !important; border-color: rgba(255,255,255,0.38) !important; box-shadow: none !important; transition: color 2.5s ease, border-color 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-time-lbl, #oeffnung-section.sky-is-closed-evening .oz-time-lbl, #oeffnung-section.sky-is-predawn .oz-time-lbl, #oeffnung-section.sky-is-preopen .oz-time-lbl { color: rgba(255,255,255,0.62) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-title, #oeffnung-section.sky-is-closed-evening .oz-ferien-title, #oeffnung-section.sky-is-predawn .oz-ferien-title, #oeffnung-section.sky-is-preopen .oz-ferien-title { color: #ffffff !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-sub, #oeffnung-section.sky-is-closed-evening .oz-ferien-sub, #oeffnung-section.sky-is-predawn .oz-ferien-sub, #oeffnung-section.sky-is-preopen .oz-ferien-sub { color: rgba(255,255,255,0.55) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-chevron, #oeffnung-section.sky-is-closed-evening .oz-ferien-chevron, #oeffnung-section.sky-is-predawn .oz-ferien-chevron, #oeffnung-section.sky-is-preopen .oz-ferien-chevron { color: rgba(255,255,255,0.70) !important; } /* ── Fix 4: Schließzeiten-Akkordeon — Dunkles Glas im Nachtmodus ── */ #oeffnung-section.sky-is-closed-night .oz-ferien-wrap, #oeffnung-section.sky-is-closed-evening .oz-ferien-wrap, #oeffnung-section.sky-is-predawn .oz-ferien-wrap, #oeffnung-section.sky-is-preopen .oz-ferien-wrap { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 28px rgba(0,0,0,0.35) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; transition: background 2.5s ease, border-color 2.5s ease, box-shadow 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-ferien-header:hover, #oeffnung-section.sky-is-closed-evening .oz-ferien-header:hover, #oeffnung-section.sky-is-predawn .oz-ferien-header:hover, #oeffnung-section.sky-is-preopen .oz-ferien-header:hover { background: rgba(255,255,255,0.05) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item-name, #oeffnung-section.sky-is-closed-evening .oz-ferien-item-name, #oeffnung-section.sky-is-predawn .oz-ferien-item-name, #oeffnung-section.sky-is-preopen .oz-ferien-item-name { color: rgba(255,255,255,0.80) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-chip, #oeffnung-section.sky-is-closed-evening .oz-ferien-chip, #oeffnung-section.sky-is-predawn .oz-ferien-chip, #oeffnung-section.sky-is-preopen .oz-ferien-chip { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.65) !important; border-color: rgba(255,255,255,0.10) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-note, #oeffnung-section.sky-is-closed-evening .oz-ferien-note, #oeffnung-section.sky-is-predawn .oz-ferien-note, #oeffnung-section.sky-is-preopen .oz-ferien-note { color: rgba(255,255,255,0.38) !important; } #oeffnung-section.sky-is-closed-night .oz-past-toggle, #oeffnung-section.sky-is-closed-evening .oz-past-toggle, #oeffnung-section.sky-is-predawn .oz-past-toggle, #oeffnung-section.sky-is-preopen .oz-past-toggle { color: rgba(255,255,255,0.45) !important; border-color: rgba(255,255,255,0.10) !important; background: rgba(255,255,255,0.05) !important; } #oeffnung-section.sky-is-closed-night .oz-past-toggle:hover, #oeffnung-section.sky-is-closed-evening .oz-past-toggle:hover, #oeffnung-section.sky-is-predawn .oz-past-toggle:hover, #oeffnung-section.sky-is-preopen .oz-past-toggle:hover { background: rgba(255,255,255,0.09) !important; } #oeffnung-section.sky-is-closed-night .oz-past-toggle-label, #oeffnung-section.sky-is-closed-evening .oz-past-toggle-label, #oeffnung-section.sky-is-predawn .oz-past-toggle-label, #oeffnung-section.sky-is-preopen .oz-past-toggle-label { color: rgba(255,255,255,0.42) !important; } #oeffnung-section.sky-is-closed-night .oz-past-chevron, #oeffnung-section.sky-is-closed-evening .oz-past-chevron, #oeffnung-section.sky-is-predawn .oz-past-chevron, #oeffnung-section.sky-is-preopen .oz-past-chevron { color: rgba(255,255,255,0.42) !important; } #oeffnung-section.sky-is-closed-night .oz-past-wrap, #oeffnung-section.sky-is-closed-evening .oz-past-wrap, #oeffnung-section.sky-is-predawn .oz-past-wrap, #oeffnung-section.sky-is-preopen .oz-past-wrap { border-color: rgba(255,255,255,0.08) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.is-past-entry, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.is-past-entry, #oeffnung-section.sky-is-predawn .oz-ferien-item.is-past-entry, #oeffnung-section.sky-is-preopen .oz-ferien-item.is-past-entry { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.06) !important; opacity: 0.55 !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.is-past-entry .oz-ferien-item-name, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.is-past-entry .oz-ferien-item-name, #oeffnung-section.sky-is-predawn .oz-ferien-item.is-past-entry .oz-ferien-item-name, #oeffnung-section.sky-is-preopen .oz-ferien-item.is-past-entry .oz-ferien-item-name { color: rgba(255,255,255,0.50) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.is-past-entry .oz-ferien-chip, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.is-past-entry .oz-ferien-chip, #oeffnung-section.sky-is-predawn .oz-ferien-item.is-past-entry .oz-ferien-chip, #oeffnung-section.sky-is-preopen .oz-ferien-item.is-past-entry .oz-ferien-chip { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.09) !important; color: rgba(255,255,255,0.38) !important; } #oeffnung-section.sky-is-closed-night .oz-ical-btn, #oeffnung-section.sky-is-closed-evening .oz-ical-btn, #oeffnung-section.sky-is-predawn .oz-ical-btn, #oeffnung-section.sky-is-preopen .oz-ical-btn { background: rgba(72,160,214,0.14) !important; color: rgba(138,212,255,0.97) !important; border-color: rgba(72,160,214,0.55) !important; box-shadow: 0 0 22px rgba(72,160,214,0.32), 0 0 8px rgba(72,160,214,0.18), inset 0 0 0 1px rgba(72,160,214,0.20) !important; text-shadow: 0 0 10px rgba(100,200,255,0.75) !important; } #oeffnung-section.sky-is-closed-night .oz-ical-btn svg, #oeffnung-section.sky-is-closed-evening .oz-ical-btn svg, #oeffnung-section.sky-is-predawn .oz-ical-btn svg, #oeffnung-section.sky-is-preopen .oz-ical-btn svg { stroke: rgba(138,212,255,0.97) !important; filter: drop-shadow(0 0 5px rgba(72,160,214,0.80)); } /* ── Fix 2: Schließzeiten Akkordeon-Inhalt — Dark Glass ── */ #oeffnung-section.sky-is-closed-night .oz-ferien-inner, #oeffnung-section.sky-is-closed-evening .oz-ferien-inner, #oeffnung-section.sky-is-predawn .oz-ferien-inner, #oeffnung-section.sky-is-preopen .oz-ferien-inner { border-top-color: rgba(255,255,255,0.08) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item, #oeffnung-section.sky-is-closed-evening .oz-ferien-item, #oeffnung-section.sky-is-predawn .oz-ferien-item, #oeffnung-section.sky-is-preopen .oz-ferien-item { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.09) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.oz-row-toggle:hover, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.oz-row-toggle:hover, #oeffnung-section.sky-is-predawn .oz-ferien-item.oz-row-toggle:hover, #oeffnung-section.sky-is-preopen .oz-ferien-item.oz-row-toggle:hover { background: rgba(255,255,255,0.09) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.is-next, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.is-next, #oeffnung-section.sky-is-predawn .oz-ferien-item.is-next, #oeffnung-section.sky-is-preopen .oz-ferien-item.is-next { background: rgba(160,18,18,0.22) !important; border-color: rgba(180,30,30,0.48) !important; border-left-color: rgba(210,45,45,0.75) !important; box-shadow: 0 2px 14px rgba(100,8,8,0.22) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.is-next .oz-ferien-item-name, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.is-next .oz-ferien-item-name, #oeffnung-section.sky-is-predawn .oz-ferien-item.is-next .oz-ferien-item-name, #oeffnung-section.sky-is-preopen .oz-ferien-item.is-next .oz-ferien-item-name { color: rgba(255,155,155,0.92) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item.is-next .oz-ferien-chip, #oeffnung-section.sky-is-closed-evening .oz-ferien-item.is-next .oz-ferien-chip, #oeffnung-section.sky-is-predawn .oz-ferien-item.is-next .oz-ferien-chip, #oeffnung-section.sky-is-preopen .oz-ferien-item.is-next .oz-ferien-chip { background: rgba(160,22,22,0.82) !important; border-color: rgba(180,30,30,0.55) !important; color: rgba(255,220,220,0.95) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-chevron, #oeffnung-section.sky-is-closed-evening .oz-ferien-chevron, #oeffnung-section.sky-is-predawn .oz-ferien-chevron, #oeffnung-section.sky-is-preopen .oz-ferien-chevron { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.60) !important; } #oeffnung-section.sky-is-closed-night .oz-ferien-item:not(.is-next) .oz-ferien-chip, #oeffnung-section.sky-is-closed-evening .oz-ferien-item:not(.is-next) .oz-ferien-chip, #oeffnung-section.sky-is-predawn .oz-ferien-item:not(.is-next) .oz-ferien-chip, #oeffnung-section.sky-is-preopen .oz-ferien-item:not(.is-next) .oz-ferien-chip { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.55) !important; } /* ── Fix 3: Exit-Wave — kein Streifen, knackige Zähne ── */ #ozEntryWave { position: absolute !important; /* Kind der Section — aus dem Dokumentenfluss, keine eigene Boundary */ top: -80px !important; /* Exakt über Section-Anfang: Wave bedeckt letzten Abschnitt der darüber liegenden Section */ left: 0 !important; right: 0 !important; width: 100% !important; height: 80px !important; margin: 0 !important; /* Negative Margins von .wave-container aufheben */ z-index: 0 !important; /* Hinter oz-sky-layer (DOM-Reihenfolge) — Sonne scheint durch die Wave */ transform: none !important; /* Kein GPU-Compositing-Layer */ box-shadow: none !important; } /* Wave innerhalb #kosten: responsives top je nach wave-container Höhe */ #ozExitWave { margin-top: -2px !important; margin-bottom: 0 !important; transform: none !important; /* Kein GPU-Compositing-Layer = keine harte Pixel-Kante */ overflow: visible !important; /* Kein Clipping = kein Clip-Boundary-Artifact */ box-shadow: none !important; transition: background 3s ease; z-index: 3 !important; position: relative; } /* Helle Zähne auf dunklem Hintergrund: sichtbar durch solid fills */ #oeffnung-section.sky-is-closed-night .oz-tab.is-active::before, #oeffnung-section.sky-is-closed-evening .oz-tab.is-active::before, #oeffnung-section.sky-is-predawn .oz-tab.is-active::before, #oeffnung-section.sky-is-preopen .oz-tab.is-active::before { background: rgba(18,6,22,0.92) !important; border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(213,90,146,0.55), 0 8px 20px rgba(0,0,0,0.30), 0 0 18px rgba(213,90,146,0.16), inset 0 1px 0 rgba(255,255,255,0.06) !important; } #oeffnung-section.sky-is-closed-night .oz-tab.is-active::after, #oeffnung-section.sky-is-closed-evening .oz-tab.is-active::after, #oeffnung-section.sky-is-predawn .oz-tab.is-active::after, #oeffnung-section.sky-is-preopen .oz-tab.is-active::after { background: linear-gradient(90deg, transparent 0%, rgba(213,90,146,0.90) 25%, rgba(213,90,146,0.90) 75%, transparent 100%) !important; } #oeffnung-section.sky-is-closed-night .oz-tab.is-active, #oeffnung-section.sky-is-closed-evening .oz-tab.is-active, #oeffnung-section.sky-is-predawn .oz-tab.is-active, #oeffnung-section.sky-is-preopen .oz-tab.is-active { background: transparent !important; color: rgba(255,200,228,0.95) !important; border-color: rgba(213,90,146,0.45) !important; box-shadow: none !important; } /* ── Fix 3: Schließtag-Badge — Premium im Nachtmodus ── */ #oeffnung-section.sky-is-closed-night .oz-live-badge.is-closed, #oeffnung-section.sky-is-closed-evening .oz-live-badge.is-closed, #oeffnung-section.sky-is-predawn .oz-live-badge.is-closed, #oeffnung-section.sky-is-preopen .oz-live-badge.is-closed { background: rgba(55,8,8,0.68) !important; border-color: rgba(140,28,28,0.42) !important; color: rgba(248,160,160,0.88) !important; transition: background 2.5s ease, border-color 2.5s ease, color 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-live-badge.is-closed .oz-live-dot, #oeffnung-section.sky-is-closed-evening .oz-live-badge.is-closed .oz-live-dot, #oeffnung-section.sky-is-predawn .oz-live-badge.is-closed .oz-live-dot, #oeffnung-section.sky-is-preopen .oz-live-badge.is-closed .oz-live-dot { background: rgba(190,50,50,0.72) !important; } #oeffnung-section.sky-is-closed-night .oz-live-badge.is-closed .oz-live-dot::after, #oeffnung-section.sky-is-closed-evening .oz-live-badge.is-closed .oz-live-dot::after, #oeffnung-section.sky-is-predawn .oz-live-badge.is-closed .oz-live-dot::after, #oeffnung-section.sky-is-preopen .oz-live-badge.is-closed .oz-live-dot::after { background: rgba(140,30,30,0.28) !important; animation-duration: 3.2s !important; } #oeffnung-section.sky-is-closed-night .oz-warn-btn, #oeffnung-section.sky-is-closed-evening .oz-warn-btn, #oeffnung-section.sky-is-predawn .oz-warn-btn, #oeffnung-section.sky-is-preopen .oz-warn-btn { background: rgba(50,8,8,0.50) !important; border-color: rgba(120,22,22,0.40) !important; } #oeffnung-section.sky-is-closed-night .oz-warn-btn svg, #oeffnung-section.sky-is-closed-evening .oz-warn-btn svg, #oeffnung-section.sky-is-predawn .oz-warn-btn svg, #oeffnung-section.sky-is-preopen .oz-warn-btn svg { stroke: rgba(190,80,80,0.75) !important; } #oeffnung-section.sky-is-closed-night .oz-warn-btn::after, #oeffnung-section.sky-is-closed-evening .oz-warn-btn::after, #oeffnung-section.sky-is-predawn .oz-warn-btn::after, #oeffnung-section.sky-is-preopen .oz-warn-btn::after { background: rgba(100,15,15,0.18) !important; } /* ── Fix 2: Entry-Wave — Adaptive Füllfarben ── */ #ozEntryWave svg use { transition: fill 3s ease; } #ozEntryWave.sky-wave-night svg use:nth-child(3) { fill: #020509; } #ozEntryWave.sky-wave-evening svg use:nth-child(3) { fill: #06040e; } #ozEntryWave.sky-wave-predawn svg use:nth-child(3) { fill: #04070f; } #ozEntryWave.sky-wave-preopen svg use:nth-child(3) { fill: #060d1a; } /* Opacity-Override: Dunkle Zähne gegen hellen Hintergrund brauchen höhere Sichtbarkeit */ /* Global: use:nth-child(1) hat opacity:0.3, use:nth-child(2) hat opacity:0.6 — zu wenig für Dark-fills */ /* Layer 1: hellerer Blauton → erscheint als blau-grau Lead-Welle (elegant, nicht schwer) */ #ozEntryWave.sky-wave-night .wave-parallax > use:nth-child(1) { fill: #0c1a30 !important; opacity: 0.25 !important; } #ozEntryWave.sky-wave-evening .wave-parallax > use:nth-child(1) { fill: #1a0828 !important; opacity: 0.25 !important; } #ozEntryWave.sky-wave-predawn .wave-parallax > use:nth-child(1) { fill: #0d1525 !important; opacity: 0.25 !important; } #ozEntryWave.sky-wave-preopen .wave-parallax > use:nth-child(1) { fill: #0a1828 !important; opacity: 0.25 !important; } /* Layer 2: mitteldunkler Ton → Übergang zwischen Lead und Körper */ #ozEntryWave.sky-wave-night .wave-parallax > use:nth-child(2) { fill: #040c1e !important; opacity: 0.50 !important; } #ozEntryWave.sky-wave-evening .wave-parallax > use:nth-child(2) { fill: #0a0418 !important; opacity: 0.50 !important; } #ozEntryWave.sky-wave-predawn .wave-parallax > use:nth-child(2) { fill: #050a18 !important; opacity: 0.50 !important; } #ozEntryWave.sky-wave-preopen .wave-parallax > use:nth-child(2) { fill: #04091a !important; opacity: 0.50 !important; } /* Animationen beider Waves minimal langsamer — ruhigere, elegantere Bewegung */ #ozEntryWave .wave-parallax > use:nth-child(1) { animation-duration: 22s !important; } #ozEntryWave .wave-parallax > use:nth-child(2) { animation-duration: 30s !important; } #ozEntryWave .wave-parallax > use:nth-child(3) { animation-duration: 40s !important; } #ozExitWave .wave-parallax > use:nth-child(1) { animation-duration: 11s !important; } #ozExitWave .wave-parallax > use:nth-child(2) { animation-duration: 15s !important; } #ozExitWave .wave-parallax > use:nth-child(3) { animation-duration: 20s !important; } #ozEntryWave.sky-wave-morning svg use:nth-child(1) { fill: rgba(200,230,245,0.30); } #ozEntryWave.sky-wave-morning svg use:nth-child(2) { fill: rgba(200,230,245,0.65); } #ozEntryWave.sky-wave-morning svg use:nth-child(3) { fill: #c8e6f5; } #ozEntryWave.sky-wave-midday svg use:nth-child(1) { fill: rgba(184,223,242,0.30); } #ozEntryWave.sky-wave-midday svg use:nth-child(2) { fill: rgba(184,223,242,0.65); } #ozEntryWave.sky-wave-midday svg use:nth-child(3) { fill: #b8dff2; } #ozEntryWave.sky-wave-closing svg use:nth-child(1) { fill: rgba(184,212,232,0.30); } #ozEntryWave.sky-wave-closing svg use:nth-child(2) { fill: rgba(184,212,232,0.65); } #ozEntryWave.sky-wave-closing svg use:nth-child(3) { fill: #b8d4e8; } #ozEntryWave.sky-wave-closed-day svg use:nth-child(1){ fill: rgba(200,224,240,0.30); } #ozEntryWave.sky-wave-closed-day svg use:nth-child(2){ fill: rgba(200,224,240,0.65); } #ozEntryWave.sky-wave-closed-day svg use:nth-child(3){ fill: #c8e0f0; } /* ── Sonnen-Glow ── */ .oz-sun { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); /* GPU-composited Zentrierung */ pointer-events: none; opacity: 0; will-change: auto; transition: opacity 3s ease, width 3s ease, height 3s ease, background 3s ease; /* left/top bewusst OHNE transition: 1x/min Update ist unmerklich, transition würde kontinuierlichen Layout-Reflow erzeugen */ } /* will-change nur wenn Section sichtbar */ #oeffnung-section.js-running .oz-sun { will-change: transform, opacity; } #oeffnung-section.sky-is-preopen .oz-sun { width: clamp(227px, 60.5vw, 320px); height: clamp(227px, 60.5vw, 320px); opacity: 1; background: radial-gradient(circle, rgba(255,200,80,0.98) 0%, rgba(255,140,20,0.90) 12%, rgba(230,90,5,0.65) 26%, rgba(190,55,0,0.28) 46%, rgba(150,35,0,0.07) 64%, transparent 78%); } #oeffnung-section.sky-is-open-morning .oz-sun { width: clamp(267px, 71.2vw, 380px); height: clamp(267px, 71.2vw, 380px); opacity: 0.88; background: radial-gradient(circle, rgba(255,255,218,1.0) 0%, rgba(255,250,158,0.93) 4%, rgba(255,230,55,0.72) 13%, rgba(255,210,15,0.35) 27%, rgba(255,190,0,0.11) 45%, rgba(255,160,0,0.01) 63%, rgba(255,150,0,0.0) 78%); } #oeffnung-section.sky-is-open-midday .oz-sun { width: clamp(298px, 79.5vw, 420px); height: clamp(298px, 79.5vw, 420px); opacity: 0.86; background: radial-gradient(circle, rgba(255,255,225,1.0) 0%, rgba(255,253,168,0.96) 3%, rgba(255,238,68,0.75) 10%, rgba(255,215,14,0.39) 22%, rgba(255,195,0,0.13) 40%, rgba(255,165,0,0.01) 58%, rgba(255,155,0,0.0) 76%); } #oeffnung-section.sky-is-closing-soon .oz-sun { width: clamp(267px, 71.2vw, 380px); height: clamp(267px, 71.2vw, 380px); opacity: 0.78; background: radial-gradient(circle, rgba(255,255,235,1.0) 0%, rgba(255,250,175,0.95) 4%, rgba(255,235,85,0.65) 12%, rgba(255,218,35,0.28) 24%, rgba(255,205,15,0.07) 38%, rgba(255,200,10,0.01) 50%, rgba(255,198,8,0.0) 62%); } transparent 82%); } #oeffnung-section.sky-is-closed-evening .oz-sun { width: clamp(235px, 62.8vw, 340px); height: clamp(235px, 62.8vw, 340px); opacity: 0.90; background: radial-gradient(circle, rgba(255,215,132,1.0) 0%, rgba(255,148,40,0.92) 8%, rgba(244,76,6,0.65) 19%, rgba(192,38,2,0.27) 35%, rgba(145,16,0,0.08) 53%, rgba(112,6,0,0.02) 67%, transparent 84%); } #oeffnung-section.sky-is-closed-night .oz-sun { opacity: 0; width: 60px; height: 60px; } #oeffnung-section.sky-is-closed-day .oz-sun { width: clamp(267px, 71.2vw, 380px); height: clamp(267px, 71.2vw, 380px); opacity: 0.82; background: radial-gradient(circle, rgba(255,255,218,1.0) 0%, rgba(255,249,154,0.92) 4%, rgba(255,226,48,0.62) 14%, rgba(255,205,8,0.25) 29%, rgba(255,185,0,0.08) 47%, rgba(255,165,0,0.02) 63%, transparent 82%); } /* ── Mond: echte Textur + stabiler zentrierter Canvas-Glow ── */ .oz-moon { position: absolute; right: 10.9%; top: 7.8%; width: clamp(56px, 14.9vw, 80px); height: clamp(56px, 14.9vw, 80px); opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0); transition: opacity 3s ease; overflow: visible; isolation: isolate; z-index: 3; --oz-moon-ambient-opacity: 0.135; --oz-moon-inner-halo-opacity: 0.082; --oz-moon-form-glow-opacity: 0.245; --oz-moon-form-glow-blur: 5px; --oz-moon-form-glow-alpha: 0.095; --oz-moon-form-glow-wide-alpha: 0.026; } .oz-moon::before { content: ''; position: absolute; inset: -37%; border-radius: 50%; background: radial-gradient(circle, rgba(248,251,255,0.23) 0%, rgba(216,230,255,0.12) 26%, rgba(120,165,255,0.045) 48%, rgba(72,160,214,0.018) 62%, rgba(72,160,214,0.00) 76%); filter: blur(4px); opacity: var(--oz-moon-ambient-opacity, 0.135); transform: translate3d(0,0,0); z-index: 0; } .oz-moon::after { content: ''; position: absolute; inset: -7%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(240,246,255,0.042) 45%, rgba(240,246,255,0.00) 70%); opacity: var(--oz-moon-inner-halo-opacity, 0.082); z-index: 1; } .oz-moon .oz-moon-glow-canvas { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; display: block; border-radius: 50%; opacity: var(--oz-moon-form-glow-opacity, 0.245); mix-blend-mode: screen; transform: translate3d(-50%, -50%, 0) scale(1.63); transform-origin: center center; z-index: 2; pointer-events: none; image-rendering: auto; filter: blur(var(--oz-moon-form-glow-blur, 5px)) drop-shadow(0 0 4px rgba(235,245,255,var(--oz-moon-form-glow-alpha, 0.095))) drop-shadow(0 0 9px rgba(95,160,255,var(--oz-moon-form-glow-wide-alpha, 0.026))); } .oz-moon .oz-moon-surface-canvas { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; border-radius: 50%; image-rendering: auto; filter: drop-shadow(0 0 1px rgba(255,255,255,0.14)); } .oz-moon svg { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; display: block; overflow: visible; } .oz-moon__fallback { transition: opacity 2.5s ease, fill 2.5s ease, stroke 2.5s ease; } #oeffnung-section.sky-is-closed-night .oz-moon { opacity: var(--oz-moon-opacity, 1); } #oeffnung-section.sky-is-closed-night .oz-moon.is-near-new { opacity: var(--oz-moon-opacity, 0.20); } /* ── Sterne ── */ .oz-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 3s ease; } #oeffnung-section.sky-is-closed-night .oz-stars { opacity: var(--oz-stars-opacity, 1); } .oz-star { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.92); animation: oz-twinkle 3s ease-in-out infinite; } @keyframes oz-twinkle { 0%, 100% { opacity: 0.22; transform: scale(0.65); } 50% { opacity: 1; transform: scale(1.35); } } .js-paused .oz-star { animation-play-state: paused; } #oeffnung-section:not(.js-running) .oz-star { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .oz-star { animation: none; opacity: 0.55; } .oz-sun { transition: opacity 3s ease, width 3s ease, height 3s ease, background 3s ease; } } /* ═══════════════════════════════════════════════════ STERNSCHNUPPE — Realistisch, GPU-optimiert Nur aktiv bei sky-is-closed-night / -evening / -preopen ═══════════════════════════════════════════════════ */ .oz-shooting-star { position: absolute; /* Startpunkt: oben-rechts — Stern fällt nach links-unten */ top: 8%; left: 34%; width: clamp(95px, 30.2vw, 130px); height: 2px; border-radius: 2px 0 0 2px; /* Gradient gespiegelt: Kopf (hell) auf LINKS, Schweif (transparent) auf RECHTS */ background: linear-gradient( to left, transparent 0%, rgba(255,255,255,0.04) 15%, rgba(255,255,255,0.22) 38%, rgba(255,255,255,0.70) 68%, rgba(255,255,255,0.96) 90%, rgba(255,255,255,1.00) 100% ); pointer-events: none; opacity: 0; transform: rotate(-28deg) translateX(0); transform-origin: center center; /* filter BEWUSST NICHT hier — würde permanenten GPU-Layer erzwingen */ } /* Kopf-Glow — heller Punkt auf LINKS (Bewegungsrichtung: links-unten) */ .oz-shooting-star::after { content: ''; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: clamp(4px, 1.2vw, 5px); height: clamp(4px, 1.2vw, 5px); border-radius: 50%; background: #ffffff; box-shadow: 0 0 3px 2px rgba(255,255,255,0.98), 0 0 8px 4px rgba(225,240,255,0.70), 0 0 16px 6px rgba(200,225,255,0.30); } /* Nur in Nacht-/Abend-/Vormorgen-Zuständen animiert */ #oeffnung-section.sky-is-closed-night .oz-shooting-star { animation: ozShootingStar 9s linear infinite; } /* GPU: will-change nur wenn Section im Viewport */ #oeffnung-section.js-running .oz-shooting-star { will-change: transform, opacity; /* filter erst hier aktiv — kein permanenter Compositing-Layer */ filter: drop-shadow(0 0 2px rgba(255,255,255,0.80)) drop-shadow(0 0 6px rgba(210,235,255,0.45)); } /* GPU: pausieren wenn off-screen oder nicht laufend */ #oeffnung-section.js-paused .oz-shooting-star, #oeffnung-section:not(.js-running) .oz-shooting-star { animation-play-state: paused !important; will-change: auto !important; } @keyframes ozShootingStar { /* ── Phase 1: Unsichtbar, Warteposition ── */ 0% { opacity: 0; transform: rotate(-28deg) translateX(0); animation-timing-function: linear; } /* ── Phase 2: Kurze Zusatz-Pause vor dem Aufblitzen ── */ 5.0% { opacity: 0; transform: rotate(-28deg) translateX(0); animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); } /* ── Phase 3: Abruptes Erscheinen — Natur: kein Fade-in ── */ 6.2% { opacity: 1; transform: rotate(-28deg) translateX(clamp(-10px, -2.3vw, -7px)); animation-timing-function: linear; } /* ── Phase 4: Schneller Durchzug nach links-unten + Ausblenden ── */ 13.3% { opacity: 0; transform: rotate(-28deg) translateX(clamp(-155px, -36vw, -108px)); animation-timing-function: linear; } /* ── Phase 5: Rest der 9s — komplett unsichtbar ── */ 100% { opacity: 0; transform: rotate(-28deg) translateX(clamp(-155px, -36vw, -108px)); } } @media (prefers-reduced-motion: reduce) { .oz-shooting-star, .oz-shooting-star::after { animation: none !important; opacity: 0 !important; } } /* ── Wochentags-Tabs ── */ /* ── Floating Weekday Dock — Container unsichtbar, jeder Tab ein eigenständiger Chip ── */ .oz-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: nowrap; margin-bottom: 1.75rem; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0; border: none; box-shadow: none; } .oz-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 0; border-radius: 18px; border: 1px solid rgba(203,213,225,0.55); background: transparent; font-family: inherit; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; cursor: pointer; flex: 1; min-height: 48px; overflow: hidden; transition: color 0.22s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.22s ease; will-change: auto; z-index: 1; } /* Chip-Fill: immer sichtbar — inactive = subtiles Glas, active = volle erhöhte Kapsel */ .oz-tab::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: rgba(248,250,252,0.72); box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 3px rgba(0,0,0,0.04); opacity: 1; transition: background 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s cubic-bezier(0.16,1,0.3,1); z-index: -1; } /* Akzent-Linie oben — immer vorhanden, per Klasse sichtbar geschaltet */ .oz-tab::after { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: #48A0D6; z-index: 2; opacity: 0; transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1); } .oz-tab.is-active { color: #1a5a8a; transform: translateY(-5px); /* Fallback für reduced-motion */ border-color: rgba(255,255,255,0.92); z-index: 2; animation: oz-tab-float 3s ease-in-out infinite; animation-delay: 0.3s; /* nach Tab-Wechsel-Transition einsetzen */ } /* GPU: will-change nur wenn Section im Viewport */ #oeffnung-section.js-running .oz-tab.is-active { will-change: transform; } #oeffnung-section:not(.js-running) .oz-tab.is-active { will-change: auto; } /* Pause wenn off-screen */ #oeffnung-section.js-paused .oz-tab.is-active { animation-play-state: paused; } .oz-tab.is-active::before { background: rgba(255,255,255,0.98); box-shadow: 0 10px 26px rgba(72,160,214,0.18), 0 4px 12px rgba(0,0,0,0.09), inset 0 1px 0 rgba(255,255,255,1); } /* Akzent-Streifen: horizontal zentriert, kein Bleed in den Chip */ .oz-tab.is-active::after { opacity: 1; height: 3px; left: 12%; right: 12%; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent 0%, #48A0D6 25%, #48A0D6 75%, transparent 100%); } /* Geöffnet — grüner Streifen */ .oz-tab.is-active.is-open-day::before { box-shadow: 0 16px 40px rgba(127,177,78,0.35), 0 6px 16px rgba(0,0,0,0.10), inset 0 0 0 1.5px rgba(127,177,78,0.55), inset 0 1px 0 rgba(255,255,255,1); border-radius: 18px; } .oz-tab.is-active.is-open-day::after { background: linear-gradient(90deg, transparent 0%, #7FB14E 25%, #7FB14E 75%, transparent 100%); } /* Geschlossen — roter Streifen */ .oz-tab.is-active.is-closed-day::before { box-shadow: 0 10px 26px rgba(220,38,38,0.16), 0 4px 12px rgba(0,0,0,0.08), inset 0 0 0 1.5px rgba(220,38,38,0.50), inset 0 1px 0 rgba(255,255,255,1); border-radius: 18px; } .oz-tab.is-active.is-closed-day::after { background: linear-gradient(90deg, transparent 0%, #dc2626 25%, #dc2626 75%, transparent 100%); } .oz-tab:hover:not(.is-active) { color: #64748b; border-color: rgba(203,213,225,0.85); } /* Heute-Dot — oberhalb des Labels positioniert */ .oz-tab-day-dot { display: none; order: -1; width: 4px; height: 4px; border-radius: 50%; background: #48A0D6; animation: oz-dot-pulse 2s ease-out infinite; will-change: auto; } .oz-tab.is-today .oz-tab-day-dot { display: block; } .oz-tab.is-active .oz-tab-day-dot { background: #1a5a8a; animation: none; } .oz-tab.is-active.is-open-day .oz-tab-day-dot { background: #7FB14E; } .oz-tab.is-active.is-closed-day .oz-tab-day-dot { background: #dc2626; } .js-paused .oz-tab-day-dot { animation-play-state: paused; } @keyframes oz-dot-pulse { 0% { box-shadow: 0 0 0 0 rgba(72,160,214,0.70); } 65% { box-shadow: 0 0 0 5px rgba(72,160,214,0); } 100% { box-shadow: 0 0 0 0 rgba(72,160,214,0); } } /* Aktiver Chip — sanftes Schweben, 4px Hub, 3s Atemrhythmus */ @keyframes oz-tab-float { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(-9px); } } @media (prefers-reduced-motion: reduce) { .oz-tab-day-dot { animation: none; } } /* ── Live-Badge Wrapper ── */ .oz-live-row { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; } /* ── Jetzt-geöffnet Badge ── */ .oz-live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 9999px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em; position: relative; } /* ── Warn-Sonar-Button ── */ .oz-warn-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(220,38,38,0.10); border: 1.5px solid rgba(220,38,38,0.28); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .oz-warn-btn:hover { background: rgba(220,38,38,0.18); border-color: rgba(220,38,38,0.50); transform: scale(1.08); } .oz-warn-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(220,38,38,0.25); animation: oz-warn-sonar 1.8s ease-out infinite; will-change: auto; } #oeffnung-section:not(.js-paused) .oz-warn-btn::after { will-change: transform, opacity; } .js-paused .oz-warn-btn::after { animation-play-state: paused; } @keyframes oz-warn-sonar { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .oz-warn-btn::after { animation: none; } } /* ── Warn-Banner: Overlay — außerhalb jedes transform-Kontexts ── */ .oz-warn-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,0.40); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } .oz-warn-backdrop.is-visible { opacity: 1; pointer-events: auto; } .oz-warn-banner { position: fixed; top: 50%; left: 50%; z-index: 1001; width: min(400px, calc(100vw - 2rem)); opacity: 0; pointer-events: none; transform: translate(-50%, -46%) scale(0.94); transition: opacity 0.25s ease, transform 0.32s cubic-bezier(0.34,1.56,0.64,1); } .oz-warn-banner.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } /* Layout für Banner-Inhalt */ .oz-warn-banner { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(220,38,38,0.22); border-radius: 20px; padding: 1.2rem 1.25rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.90) inset, 0 8px 32px rgba(0,0,0,0.18), 0 2px 12px rgba(220,38,38,0.10); overflow: hidden; } .oz-warn-banner::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(220,38,38,0.50) 40%, rgba(220,38,38,0.50) 60%, transparent); border-radius: 0 0 2px 2px; pointer-events: none; } /* ── Modal Schließtag-Warnung — Dynamisch im Nachtmodus ── */ body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-banner, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-banner, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-banner, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-banner { background: rgba(8,14,30,0.94) !important; border-color: rgba(180,30,30,0.38) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), 0 8px 40px rgba(0,0,0,0.60), 0 2px 14px rgba(160,20,20,0.18) !important; } body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-banner::before, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-banner::before, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-banner::before, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-banner::before { background: linear-gradient(90deg, transparent, rgba(200,40,40,0.40) 40%, rgba(200,40,40,0.40) 60%, transparent) !important; } body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-label, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-label, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-label, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-label { color: rgba(255,100,100,0.82) !important; } body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-name, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-name, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-name, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-name { color: rgba(255,255,255,0.92) !important; } body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-date, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-date, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-date, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-date { color: rgba(255,255,255,0.52) !important; } body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-icon, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-icon, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-icon, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-icon { background: rgba(160,20,20,0.22) !important; border-color: rgba(180,30,30,0.30) !important; } @media (prefers-reduced-motion: reduce) { .oz-warn-banner, .oz-warn-backdrop { transition: none; } } .oz-live-badge.is-open { background: rgba(127,177,78,0.12); border: 1px solid rgba(127,177,78,0.30); color: #3d6e20; } /* Kind/Wolke am Wochenende höher — Abstand zum Status-Badge reduziert */ #oeffnung-section.sky-is-closed-day .oz-sleeping-img { margin-top: 1.2rem; } .oz-live-badge.is-closed { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.18); color: #c02929; } .oz-live-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; position: relative; } .oz-live-badge.is-open .oz-live-dot { background: #7FB14E; } .oz-live-badge.is-closed .oz-live-dot { background: #dc2626; } /* Sonar-Puls: geöffnet grün */ .oz-live-badge.is-open .oz-live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(127,177,78,0.40); animation: oz-pulse 2s ease-out infinite; will-change: auto; } /* Sonar-Puls: geschlossen rot */ .oz-live-badge.is-closed .oz-live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(220,38,38,0.40); animation: oz-pulse 1.4s ease-out infinite; will-change: auto; } #oeffnung-section:not(.js-paused) .oz-live-dot::after { will-change: transform, opacity; } .js-paused .oz-live-dot::after { animation-play-state: paused; } @keyframes oz-pulse { 0% { transform: scale(1); opacity: 0.8; } 65% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } /* ── Timeline Card ── */ /* Wrapper hält Nadel + Card — Nadel darf über Card-Rand schweben */ .oz-card-wrap { position: relative; padding-top: clamp(17px, 6.5vw, 36px); /* Platz für Capsule über dem Balken */ } .oz-card { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.92); border-top: 1px solid rgba(255,255,255,1); border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 2px 8px rgba(26,32,44,0.04), 0 8px 28px rgba(26,32,44,0.06), 0 0 0 1px rgba(26,32,44,0.02); position: relative; overflow: hidden; /* Safari: backdrop-filter ignoriert overflow:hidden — mask erzwingt korrektes Clipping */ -webkit-mask-image: -webkit-radial-gradient(white, white); mask-image: radial-gradient(white, white); } /* Track — zeigt alle Phasen gedimmt */ .oz-track-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #48A0D6 0%, #48A0D6 11.11%, #7FB14E 11.11%, #7FB14E 77.78%, #D55A92 77.78%, #D55A92 100%); opacity: 0.15; border-radius: 28px 28px 0 0; } /* ── Zeit-Labels — absolut auf exakten Zeitpositionen ── */ .oz-time-labels { position: relative; height: 1.1rem; margin-bottom: 0.5rem; z-index: 1; } .oz-time-lbl { position: absolute; font-size: 0.60rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; transform: translateX(-50%); white-space: nowrap; } .oz-time-lbl:first-child { transform: translateX(0); } .oz-time-lbl:last-child { transform: translateX(-100%); } @media (max-width: 400px) { .oz-lbl-hide-sm { display: none; } } @media (min-width: 401px) and (max-width: 479px) { .oz-lbl-hide-max { display: none; } } /* ── Tagesstreifen ── */ .oz-strip-wrap { position: relative; margin-bottom: 1.75rem; padding-top: 22px; /* Platz für "Jetzt"-Label */ } .oz-strip { height: 48px; border-radius: 14px; background: rgba(241,245,249,0.85); position: relative; overflow: hidden; display: flex; align-items: stretch; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), inset 0 -1px 0 rgba(255,255,255,0.9); } /* Glassmorphism Shine auf Strip */ .oz-strip::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 100%); pointer-events: none; z-index: 3; border-radius: 14px 14px 0 0; } /* Wrapper — kein overflow:hidden nötig, Track und Balken haben eigenen border-radius */ .oz-progress-wrap { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; } /* ── Fortschrittsbalken — Farbe je Phase ── */ .oz-strip-progress { position: absolute; top: 0; height: 3px; border-radius: 28px 0 0 0; z-index: 2; background: #48A0D6; /* Fallback Bringzeit */ pointer-events: none; transition: width 1s linear, background 0.8s ease; will-change: auto; overflow: visible; } /* Hintergrund wird per JS als korrekter Mehrphasen-Gradient gesetzt */ #oeffnung-section:not(.js-paused) .oz-strip-progress { will-change: width; } @media (prefers-reduced-motion: reduce) { .oz-strip-progress { transition: none; } } /* Segment-Basis */ .oz-seg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; } /* Bringzeit */ .oz-seg-bring { background: rgba(72,160,214,0.14); border-right: 1.5px solid rgba(255,255,255,0.80); box-shadow: inset 0 1px 0 rgba(255,255,255,0.60); } /* Kernzeit */ .oz-seg-kern { background: linear-gradient(160deg, rgba(127,177,78,0.34) 0%, rgba(127,177,78,0.24) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.60); } /* Abholzeit */ .oz-seg-abhol { background: linear-gradient(160deg, rgba(213,90,146,0.28) 0%, rgba(213,90,146,0.18) 100%); border-left: 1.5px solid rgba(255,255,255,0.80); box-shadow: inset 0 1px 0 rgba(255,255,255,0.60); } /* Geschlossen */ .oz-seg-closed { background: transparent; } /* Segment Label */ .oz-seg-lbl { font-size: 0.55rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap; overflow: hidden; pointer-events: none; position: relative; z-index: 2; text-shadow: 0 1px 2px rgba(255,255,255,0.80); padding: 0 8px; max-width: 100%; } .oz-seg-bring { min-width: 0; } @media (max-width: 420px) { .oz-seg-abhol .oz-seg-lbl { font-size: 0.48rem; letter-spacing: 0.05em; } } /* Bringen-SVG im Segment */ .oz-bring-svg { width: 28px; height: auto; display: block; pointer-events: none; position: relative; z-index: 2; flex-shrink: 0; } .oz-seg-bring.is-past .oz-bring-svg { opacity: 0.28; } .oz-seg-bring.is-future .oz-bring-svg { opacity: 0.50; } .oz-seg-bring .oz-seg-lbl { color: #1a5a8a; } .oz-seg-kern .oz-seg-lbl { color: #2d5e18; } .oz-seg-abhol .oz-seg-lbl { color: #7a1e52; } /* ── Echtzeit Segment-Zustände ── */ /* Vergangen — ausgegraut, zurückgetreten */ .oz-seg.is-past { opacity: 0.28; filter: saturate(0.3); transition: opacity 0.8s ease, filter 0.8s ease; will-change: auto; } /* Aktiv — volle Intensität, Glow-Overlay */ .oz-seg.is-active { opacity: 1; filter: saturate(1.15) brightness(1.04); transition: opacity 0.8s ease, filter 0.8s ease; will-change: auto; z-index: 2; } /* Aktiv-Glow als ::before — nur opacity animiert, GPU-freundlich */ .oz-seg.is-active::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; animation: oz-seg-pulse 2.8s ease-in-out infinite; will-change: auto; } #oeffnung-section:not(.js-paused) .oz-seg.is-active::before { will-change: opacity; } .js-paused .oz-seg.is-active::before { animation-play-state: paused; } .oz-seg-bring.is-active::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(72,160,214,0.28) 0%, transparent 70%); } .oz-seg-kern.is-active::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(127,177,78,0.28) 0%, transparent 70%); } .oz-seg-abhol.is-active::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(213,90,146,0.28) 0%, transparent 70%); } @keyframes oz-seg-pulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } /* Zukünftig — normal, leicht reduziert */ .oz-seg.is-future { opacity: 0.72; filter: saturate(0.85); transition: opacity 0.8s ease, filter 0.8s ease; will-change: auto; } /* Geschlossen / Wochenende — alle Segmente gleichmäßig gedimmt */ .oz-strip.is-closed .oz-seg { opacity: 0.45; filter: saturate(0.35) grayscale(0.4); transition: opacity 0.8s ease, filter 0.8s ease; will-change: auto; } .oz-strip.is-closed .oz-seg-lbl { opacity: 0; } /* ── Schlafendes Kind — Geschlossen-State ── */ /* ── Schlafendes Kind: freistehend, kein Container ── */ .oz-card:has(.oz-sleeping-wrap) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; box-shadow: none !important; padding: 0 !important; } .oz-card-wrap:has(.oz-sleeping-wrap) { padding-top: 0 !important; } .oz-card:has(.oz-sleeping-wrap) .oz-progress-wrap, .oz-card:has(.oz-sleeping-wrap) .oz-time-labels { display: none !important; } .oz-sleeping-wrap { position: relative; width: 100%; background: transparent; overflow: visible; } .oz-sleeping-img { width: 76%; max-width: 76%; height: auto; display: block; object-fit: cover; border-radius: 20px; margin: 2.5rem auto 2rem; /* Mehr Luft: oben und unten */ /* Fade-In einmalig, danach dauerhaftes Auf-Ab */ animation: oz-sleeping-fade 1.2s cubic-bezier(0.16,1,0.3,1) both, oz-sleeping-float 5s ease-in-out 1.2s infinite; /* Etwas langsamer = luftiger */ will-change: auto; } #oeffnung-section:not(.js-paused) .oz-sleeping-img { will-change: transform; } .js-paused .oz-sleeping-img { animation-play-state: paused; } /* geschlossen.webp: natives Format 316×225 px — responsiv via clamp() */ .oz-geschlossen-img { width: auto; max-width: clamp(220px, 73.5vw, 316px); height: auto; object-fit: contain; border-radius: 16px; } @keyframes oz-sleeping-fade { from { opacity: 0; transform: translateY(6px) scale(1.02); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes oz-sleeping-float { 0% { transform: translateY(0px); } 50% { transform: translateY(-9px); } 100% { transform: translateY(0px); } } @media (prefers-reduced-motion: reduce) { .oz-sleeping-img { animation: oz-sleeping-fade 1.2s cubic-bezier(0.16,1,0.3,1) both; } } /* Badge über dem Bild */ .oz-sleeping-badge { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, rgba(220,38,38,0.92) 0%, rgba(185,28,28,0.96) 100%); border-radius: 9999px; padding: 8px 18px 8px 12px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset, 0 4px 20px rgba(220,38,38,0.45), 0 0 40px rgba(220,38,38,0.20); animation: oz-badge-breathe 3s ease-in-out infinite; will-change: auto; } .js-paused .oz-sleeping-badge { animation-play-state: paused; } /* Geschlossen-Overlay — Awwwards-Niveau */ .oz-closed-overlay { display: none; position: absolute; inset: 0; z-index: 6; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; } .oz-strip.is-closed .oz-closed-overlay { display: flex; } /* Das Neon-Badge */ .oz-closed-badge { display: inline-flex; align-items: center; gap: 9px; background: linear-gradient(135deg, rgba(220,38,38,0.92) 0%, rgba(185,28,28,0.96) 100%); border-radius: 9999px; padding: 8px 18px 8px 12px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset, 0 4px 20px rgba(220,38,38,0.45), 0 0 40px rgba(220,38,38,0.20); animation: oz-badge-breathe 3s ease-in-out infinite; will-change: auto; } .js-paused .oz-closed-badge { animation-play-state: paused; } @keyframes oz-badge-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset, 0 4px 20px rgba(220,38,38,0.45), 0 0 40px rgba(220,38,38,0.20); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.30) inset, 0 6px 28px rgba(220,38,38,0.60), 0 0 60px rgba(220,38,38,0.35); } } @media (prefers-reduced-motion: reduce) { .oz-closed-badge { animation: none; } } .oz-closed-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.85); flex-shrink: 0; animation: oz-closed-dot-pulse 1.8s ease-out infinite; will-change: auto; } #oeffnung-section:not(.js-paused) .oz-closed-dot { will-change: transform, opacity; } .js-paused .oz-closed-dot { animation-play-state: paused; } @keyframes oz-closed-dot-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .oz-closed-dot { animation: none; } } .oz-closed-overlay-icon { display: none; } /* Legacy — nicht mehr genutzt */ .oz-closed-overlay-text { font-size: 0.60rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.95); } /* GPU: Segment-Transitions nur wenn im Viewport */ #oeffnung-section:not(.js-paused) .oz-seg.is-past, #oeffnung-section:not(.js-paused) .oz-seg.is-active, #oeffnung-section:not(.js-paused) .oz-seg.is-future { will-change: opacity; } /* reduced-motion */ @media (prefers-reduced-motion: reduce) { .oz-seg.is-past, .oz-seg.is-active, .oz-seg.is-future { transition: none; } .oz-seg.is-active::before { animation: none; } .oz-strip.is-closed .oz-seg { transition: none; } } /* ── Dreieck-Nadel — im oz-card-wrap, über der Card ── */ .oz-needle { position: absolute; /* clamp(17px, 6.5vw, 36px) card-wrap-padding + 1px Card-Border */ top: clamp(18px, calc(6.5vw + 1px), 37px); z-index: 20; pointer-events: none; transform: translateX(-50%); display: none; } /* Nadel ersetzt durch integrierte Capsule-Spitze — permanent ausgeblendet */ .oz-needle.is-active { display: none; } /* ▲ Dreieck */ .oz-needle::before { content: ''; display: block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--needle-color, rgba(30,41,59,0.82)); transition: border-bottom-color 0.5s ease; } /* Uhrzeit — Premium Speech-Bubble: kein z-index-Trick, kein Lichtkegel */ .oz-needle-time { --phase-color: #48A0D6; position: absolute; top: clamp(-14px, -2.8vw, -10px); /* Mittelwert bei 430px = −12px; skaliert mit Viewport */ transform: translateX(-50%); overflow: visible; padding: clamp(4px, 1.2vw, 6px) clamp(12px, 3.5vw, 17px); border-radius: clamp(16px, 4.7vw, 24px); background: color-mix(in srgb, var(--phase-color) 11%, rgba(255,255,255,0.72)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--phase-color) 28%, rgba(255,255,255,0.72)); box-shadow: 0 4px 16px color-mix(in srgb, var(--phase-color) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.52); font-size: clamp(12px, 3.5vw, 17px); font-weight: 800; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--phase-color) 90%, #1e293b); letter-spacing: -0.01em; line-height: 1.3; white-space: nowrap; pointer-events: none; z-index: 21; transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease; } /* Pointer: vollständig unter Bubble via translateY(100%-2px). 2px Überlapp = Naht unsichtbar. 18% Phase-Tint = kein Lichtkegel, definiert. Kein z-index, kein isolation — Safari-kompatibel. */ .oz-needle-time::after { content: ''; position: absolute; bottom: 0; left: calc(50% + var(--pointer-offset, 0px)); transform: translateX(-50%) translateY(calc(100% - 2px)); width: clamp(18px, 5.6vw, 28px); height: clamp(9px, 2.8vw, 14px); background: color-mix(in srgb, var(--phase-color) 18%, rgba(255,255,255,0.82)); clip-path: polygon(50% 100%, 4% 0%, 96% 0%); transition: background 0.5s ease; } @media (prefers-reduced-motion: reduce) { .oz-needle-time, .oz-needle-time::after { transition: none; } } } /* ── Jetzt-Marker: unsichtbar — Position wird nur für Past-Overlay genutzt ── */ .oz-now-marker { position: absolute; top: 0; bottom: 0; width: 0; z-index: 5; transform: translateX(-50%); pointer-events: none; } .oz-now-marker::after { display: none; } /* ── Past-Overlay: vergangener Teil wird gedimmt ── */ .oz-past-overlay { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.68); z-index: 4; pointer-events: none; transition: width 1s linear; will-change: auto; border-radius: 14px 0 0 14px; } #oeffnung-section:not(.js-paused) .oz-past-overlay { will-change: width; } /* oz-now-chip ausgeblendet — Zeit jetzt im oz-needle-time */ .oz-now-chip { display: none; } /* strip-wrap braucht genug Platz oben für Chip + Linie */ .oz-strip-wrap { padding-top: 38px; } /* ── Legende ── */ .oz-legend { display: grid; grid-template-columns: repeat(2, auto); gap: 0.55rem 1.25rem; margin-bottom: 1.75rem; justify-content: center; justify-items: start; } @media (min-width: 480px) { .oz-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; } } .oz-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.66rem; font-weight: 700; color: #475569; } .oz-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .oz-legend-dot.bring { background: rgba(72,160,214,0.55); } .oz-legend-dot.kern { background: rgba(127,177,78,0.60); } .oz-legend-dot.abhol { background: rgba(213,90,146,0.50); } /* ── Zeit-Kacheln — Premium 2026 ── */ .oz-times-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-top: 0.35rem; } /* Stagger Entrance */ @keyframes oz-tile-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .oz-times-grid.is-animating .oz-time-tile { animation: oz-tile-in 0.5s cubic-bezier(0.34,1.56,0.64,1) both; } .oz-times-grid.is-animating .oz-time-tile:nth-child(1) { animation-delay: 0ms; } .oz-times-grid.is-animating .oz-time-tile:nth-child(2) { animation-delay: 70ms; } .oz-times-grid.is-animating .oz-time-tile:nth-child(3) { animation-delay: 140ms; } @media (prefers-reduced-motion: reduce) { .oz-times-grid.is-animating .oz-time-tile { animation: none; } } .oz-time-tile { position: relative; background: rgba(255,255,255,0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.90); border-radius: 20px; padding: 1rem 0.65rem 0.85rem; text-align: center; overflow: hidden; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; will-change: auto; } /* Farbiger Glow-Hintergrund */ .oz-time-tile::before { content: ''; position: absolute; inset: 0; border-radius: 20px; opacity: 0.55; pointer-events: none; } .oz-time-tile.bring::before { background: radial-gradient(ellipse 120% 100% at 50% 120%, rgba(72,160,214,0.22) 0%, transparent 65%); } .oz-time-tile.kern::before { background: radial-gradient(ellipse 120% 100% at 50% 120%, rgba(127,177,78,0.22) 0%, transparent 65%); } .oz-time-tile.abhol::before { background: radial-gradient(ellipse 120% 100% at 50% 120%, rgba(213,90,146,0.22) 0%, transparent 65%); } /* Farbiger Akzentstreifen oben */ .oz-time-tile::after { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 2px; border-radius: 0 0 3px 3px; pointer-events: none; } .oz-time-tile.bring::after { background: linear-gradient(90deg, transparent, #48A0D6, transparent); } .oz-time-tile.kern::after { background: linear-gradient(90deg, transparent, #7FB14E, transparent); } .oz-time-tile.abhol::after { background: linear-gradient(90deg, transparent, #D55A92, transparent); } /* Box Shadow je nach Farbe */ .oz-time-tile.bring { box-shadow: 0 2px 12px rgba(72,160,214,0.12), 0 1px 4px rgba(0,0,0,0.04); } .oz-time-tile.kern { box-shadow: 0 2px 12px rgba(127,177,78,0.12), 0 1px 4px rgba(0,0,0,0.04); } .oz-time-tile.abhol { box-shadow: 0 2px 12px rgba(213,90,146,0.12), 0 1px 4px rgba(0,0,0,0.04); } .oz-time-tile:hover { transform: translateY(-4px) scale(1.02); } .oz-time-tile.bring:hover { box-shadow: 0 10px 28px rgba(72,160,214,0.22), 0 2px 8px rgba(0,0,0,0.05); } .oz-time-tile.kern:hover { box-shadow: 0 10px 28px rgba(127,177,78,0.22), 0 2px 8px rgba(0,0,0,0.05); } .oz-time-tile.abhol:hover { box-shadow: 0 10px 28px rgba(213,90,146,0.22), 0 2px 8px rgba(0,0,0,0.05); } /* ── Live-Aktive Kachel ── */ .oz-time-tile.is-tile-active { transform: translateY(-3px) scale(1.03); } .oz-time-tile.bring.is-tile-active { border-color: rgba(72,160,214,0.50); box-shadow: 0 0 0 1px rgba(72,160,214,0.27), 0 8px 28px rgba(72,160,214,0.25), 0 2px 8px rgba(0,0,0,0.04); animation: oz-tile-glow-bring 2.8s ease-in-out infinite; will-change: auto; } .oz-time-tile.kern.is-tile-active { border-color: rgba(127,177,78,0.50); box-shadow: 0 0 0 1px rgba(127,177,78,0.27), 0 8px 28px rgba(127,177,78,0.25), 0 2px 8px rgba(0,0,0,0.04); animation: oz-tile-glow-kern 2.8s ease-in-out infinite; will-change: auto; } .oz-time-tile.abhol.is-tile-active { border-color: rgba(213,90,146,0.50); box-shadow: 0 0 0 1px rgba(213,90,146,0.27), 0 8px 28px rgba(213,90,146,0.25), 0 2px 8px rgba(0,0,0,0.04); animation: oz-tile-glow-abhol 2.8s ease-in-out infinite; will-change: auto; } @keyframes oz-tile-glow-bring { 0%, 100% { box-shadow: 0 0 0 1px rgba(72,160,214,0.27), 0 8px 28px rgba(72,160,214,0.25), 0 2px 8px rgba(0,0,0,0.04); } 50% { box-shadow: 0 0 0 1px rgba(72,160,214,0.45), 0 10px 36px rgba(72,160,214,0.38), 0 2px 8px rgba(0,0,0,0.04); } } @keyframes oz-tile-glow-kern { 0%, 100% { box-shadow: 0 0 0 1px rgba(127,177,78,0.27), 0 8px 28px rgba(127,177,78,0.25), 0 2px 8px rgba(0,0,0,0.04); } 50% { box-shadow: 0 0 0 1px rgba(127,177,78,0.45), 0 10px 36px rgba(127,177,78,0.38), 0 2px 8px rgba(0,0,0,0.04); } } @keyframes oz-tile-glow-abhol { 0%, 100% { box-shadow: 0 0 0 1px rgba(213,90,146,0.27), 0 8px 28px rgba(213,90,146,0.25), 0 2px 8px rgba(0,0,0,0.04); } 50% { box-shadow: 0 0 0 1px rgba(213,90,146,0.45), 0 10px 36px rgba(213,90,146,0.38), 0 2px 8px rgba(0,0,0,0.04); } } /* GPU: nur wenn sichtbar */ .js-paused .oz-time-tile.is-tile-active { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .oz-time-tile.is-tile-active { animation: none; } } /* Icon der aktiven Kachel — größer + leuchtender */ .oz-time-tile.is-tile-active .oz-time-tile-icon { transform: scale(1.15); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1); } .oz-time-tile.bring.is-tile-active .oz-time-tile-icon { background: rgba(72,160,214,0.22); box-shadow: 0 0 12px rgba(72,160,214,0.35); } .oz-time-tile.kern.is-tile-active .oz-time-tile-icon { background: rgba(127,177,78,0.22); box-shadow: 0 0 12px rgba(127,177,78,0.35); } .oz-time-tile.abhol.is-tile-active .oz-time-tile-icon { background: rgba(213,90,146,0.22); box-shadow: 0 0 12px rgba(213,90,146,0.35); } /* Live-Indikator Dot auf aktiver Kachel */ .oz-time-tile.is-tile-active .oz-time-tile-label::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; vertical-align: middle; margin-bottom: 1px; animation: oz-label-dot 1.8s ease-out infinite; will-change: auto; } .oz-time-tile.bring.is-tile-active .oz-time-tile-label::before { background: #48A0D6; } .oz-time-tile.kern.is-tile-active .oz-time-tile-label::before { background: #7FB14E; } .oz-time-tile.abhol.is-tile-active .oz-time-tile-label::before { background: #D55A92; } @keyframes oz-label-dot { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } } #oeffnung-section:not(.js-paused) .oz-time-tile.is-tile-active .oz-time-tile-label::before { will-change: opacity, transform; } .js-paused .oz-time-tile.is-tile-active .oz-time-tile-label::before { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .oz-time-tile.is-tile-active .oz-time-tile-label::before { animation: none; } } /* Icon */ .oz-time-tile-icon { width: 28px; height: 28px; border-radius: 9px; margin: 0 auto 0.55rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .oz-time-tile.bring .oz-time-tile-icon { background: rgba(72,160,214,0.14); color: #2e7aaa; } .oz-time-tile.kern .oz-time-tile-icon { background: rgba(127,177,78,0.14); color: #3d6e20; } .oz-time-tile.abhol .oz-time-tile-icon { background: rgba(213,90,146,0.14); color: #8a2560; } .oz-time-tile-label { font-size: 0.50rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; display: block; position: relative; z-index: 1; } .oz-time-tile.bring .oz-time-tile-label { color: #2e7aaa; } .oz-time-tile.kern .oz-time-tile-label { color: #3d6e20; } .oz-time-tile.abhol .oz-time-tile-label { color: #8a2560; } .oz-time-tile-time { font-size: clamp(0.70rem, 2vw, 0.92rem); font-weight: 900; letter-spacing: -0.02em; color: #1e293b; line-height: 1.15; display: block; white-space: nowrap; position: relative; z-index: 1; } .oz-time-tile-sub { font-size: 0.50rem; font-weight: 600; color: #94a3b8; margin-top: 3px; display: block; position: relative; z-index: 1; } /* ── Ferien-Akkordeon ── */ .oz-ferien-wrap { margin-top: 2rem; border-radius: 20px; border: 1.5px solid rgba(220,38,38,0.28); overflow: hidden; background: rgba(255,255,255,0.60); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 0 18px rgba(220,38,38,0.08), 0 2px 8px rgba(220,38,38,0.06); } .oz-ferien-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1rem 1.25rem; cursor: pointer; user-select: none; min-height: 52px; transition: background 0.2s ease; } .oz-ferien-header:hover { background: rgba(241,245,249,0.60); } .oz-ferien-left { display: flex; align-items: center; gap: 10px; } .oz-ferien-icon { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #dc2626, #b91c1c); border: 1px solid rgba(185,28,28,0.40); box-shadow: 0 2px 8px rgba(220,38,38,0.30); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oz-ferien-title { font-size: 0.82rem; font-weight: 800; color: #1e293b; letter-spacing: -0.01em; } .oz-ferien-sub { font-size: 0.60rem; font-weight: 600; color: #94a3b8; margin-top: 1px; } .oz-ferien-chevron { width: 28px; height: 28px; border-radius: 50%; background: rgba(241,245,249,0.80); border: 1px solid rgba(203,213,225,0.45); display: flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.25s ease, border-color 0.25s ease; } .oz-ferien-wrap.is-open .oz-ferien-chevron { transform: rotate(180deg); background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #b07500; } .oz-ferien-body { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.16,1,0.3,1); } .oz-ferien-wrap.is-open .oz-ferien-body { max-height: 1200px; } .oz-ferien-inner { padding: 0 1.25rem 1.25rem; border-top: 1px solid rgba(203,213,225,0.35); } .oz-ferien-list { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 1rem; } .oz-ferien-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0.65rem 0.9rem; border-radius: 12px; background: rgba(248,250,252,0.85); border: 1px solid rgba(203,213,225,0.35); opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1); } .oz-ferien-wrap.is-open .oz-ferien-item { opacity: 1; transform: translateY(0); } .oz-ferien-wrap.is-open .oz-ferien-item.is-past-entry { opacity: 0.35; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(1) { transition-delay: 0.04s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(2) { transition-delay: 0.08s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(3) { transition-delay: 0.12s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(4) { transition-delay: 0.16s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(5) { transition-delay: 0.20s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(6) { transition-delay: 0.24s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(7) { transition-delay: 0.28s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(8) { transition-delay: 0.32s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(9) { transition-delay: 0.36s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(10) { transition-delay: 0.40s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(11) { transition-delay: 0.44s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(12) { transition-delay: 0.48s; } .oz-ferien-wrap.is-open .oz-ferien-item:nth-child(13) { transition-delay: 0.52s; } .oz-ferien-item-name { font-size: 0.75rem; font-weight: 700; color: #1e293b; } /* Nächster Eintrag — oben in der Liste, kein margin-top nötig */ .oz-ferien-item.is-next { background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(220,38,38,0.03) 100%); border-color: rgba(220,38,38,0.35); border-left: 3px solid #dc2626; box-shadow: 0 2px 14px rgba(220,38,38,0.10), inset 0 1px 0 rgba(255,255,255,0.85); padding-left: calc(0.9rem - 2px); position: relative; } /* Label vor dem ersten vergangenen Eintrag */ .oz-ferien-item.is-first-past { margin-top: 1.75rem; position: relative; } .oz-ferien-item.is-first-past::before { content: 'Vergangene Termine'; position: absolute; top: -1.35rem; left: 0.9rem; font-size: 0.52rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #dc2626; pointer-events: none; } .oz-ferien-item.is-next .oz-ferien-item-name { color: #b91c1c; font-weight: 800; white-space: nowrap; } /* chip-wrap — Basis immer flex */ .oz-ferien-chip-wrap { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Puls-Animation — nur wenn Schließtag heute aktiv ist */ @keyframes oz-chip-pulse { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.55), 0 1px 4px rgba(220,38,38,0.30); } 65% { box-shadow: 0 0 0 7px rgba(220,38,38,0), 0 1px 4px rgba(220,38,38,0.30); } 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0), 0 1px 4px rgba(220,38,38,0.30); } } .oz-ferien-item.is-today-active .oz-ferien-chip { animation: oz-chip-pulse 1.6s ease-out infinite; will-change: auto; } #oeffnung-section:not(.js-paused) .oz-ferien-item.is-today-active .oz-ferien-chip { /* box-shadow ist keine composited property — will-change entfernt */ } .js-paused .oz-ferien-item.is-today-active .oz-ferien-chip { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .oz-ferien-item.is-today-active .oz-ferien-chip { animation: none; will-change: auto; } } /* Interaktive Chips — Cursor + Toggle-Zustand */ .oz-chip-toggle { cursor: pointer; user-select: none; transition: background 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1); } .oz-chip-toggle:hover { filter: brightness(1.10); } .oz-chip-toggle:active { transform: scale(0.95); } /* Ganze Zeile klickbar (nicht-vergangene) */ .oz-ferien-item.oz-row-toggle { cursor: pointer; } .oz-ferien-item.oz-row-toggle:hover { background: rgba(241,245,249,0.95); } .oz-ferien-item.oz-row-toggle:active { background: rgba(226,232,240,0.90); } .oz-chip-toggle.is-days { background: rgba(30,41,59,0.07); border-color: rgba(30,41,59,0.35); box-shadow: none; color: #334155; letter-spacing: 0; font-size: 0.65rem; font-weight: 800; } @media (prefers-reduced-motion: reduce) { .oz-ferien-item.is-next .oz-ferien-chip { animation: none; will-change: auto; } .oz-chip-toggle { transition: none; } } /* ── Schließzeit-Warnung ── */ /* ── Schließzeit-Warnung — Premium ── */ /* oz-warn-banner Overlay-Styles → siehe weiter oben */ @keyframes oz-warn-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .oz-warn-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, rgba(220,38,38,0.12), rgba(220,38,38,0.06)); border: 1px solid rgba(220,38,38,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oz-warn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .oz-warn-row { display: flex; align-items: center; gap: 10px; } .oz-warn-row-info { flex: 1; min-width: 0; } .oz-warn-sep { height: 1px; background: linear-gradient(90deg, transparent, rgba(220,38,38,0.18) 30%, rgba(220,38,38,0.18) 70%, transparent); margin: 5px 0; } body:has(#oeffnung-section.sky-is-closed-night) .oz-warn-sep, body:has(#oeffnung-section.sky-is-closed-evening) .oz-warn-sep, body:has(#oeffnung-section.sky-is-predawn) .oz-warn-sep, body:has(#oeffnung-section.sky-is-preopen) .oz-warn-sep { background: linear-gradient(90deg, transparent, rgba(180,30,30,0.30) 30%, rgba(180,30,30,0.30) 70%, transparent); } .oz-warn-label { font-size: 0.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(220,38,38,0.75); margin-bottom: 3px; } .oz-warn-name { font-size: 0.88rem; font-weight: 800; color: #1e293b; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oz-warn-date { font-size: 0.68rem; font-weight: 600; color: #64748b; margin-top: 1px; } .oz-warn-days { font-size: 0.68rem; font-weight: 900; color: #ffffff; background: linear-gradient(135deg, #dc2626, #b91c1c); border-radius: 9999px; padding: 5px 12px; white-space: nowrap; flex-shrink: 0; box-shadow: 0 2px 10px rgba(220,38,38,0.35); letter-spacing: 0.01em; } /* ── iCal Export Button ── */ .oz-ical-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0.80rem 1rem; border-radius: 14px; border: 1.5px solid rgba(72,160,214,0.35); background: rgba(72,160,214,0.06); color: #2e7aaa; font-family: inherit; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; text-decoration: none; margin-top: 1rem; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease; box-shadow: 0 1px 8px rgba(72,160,214,0.10); min-height: 48px; } .oz-ical-btn:hover { background: rgba(72,160,214,0.12); border-color: rgba(72,160,214,0.55); box-shadow: 0 3px 16px rgba(72,160,214,0.22); transform: translateY(-2px); color: #1e6a9a; } .oz-ical-btn:active { transform: scale(0.98); } /* Vergangene Einträge gedimmt */ /* ── Vergangene Einträge — Akkordeon ── */ .oz-past-wrap { margin-top: 1.25rem; border-radius: 12px; overflow: hidden; border: 1px solid rgba(203,213,225,0.30); } .oz-past-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0.65rem 0.9rem; background: rgba(241,245,249,0.70); cursor: pointer; user-select: none; border: none; width: 100%; font-family: inherit; text-align: left; min-height: 44px; transition: background 0.2s ease; } .oz-past-toggle:hover { background: rgba(226,232,240,0.80); } .oz-past-toggle-label { font-size: 0.52rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: #94a3b8; } .oz-past-chevron { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); } .oz-past-wrap.is-open .oz-past-chevron { transform: rotate(180deg); } .oz-past-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1); } .oz-past-wrap.is-open .oz-past-body { max-height: 800px; } .oz-past-inner { padding: 0.5rem 0; } .oz-ferien-item.is-past-entry { opacity: 0.35; background: rgba(248,250,252,0.50); } .oz-ferien-item.is-past-entry .oz-ferien-chip { background: #94a3b8; border-color: rgba(148,163,184,0.40); box-shadow: none; color: #ffffff; } .oz-ferien-item.is-past-entry .oz-ferien-item-name { text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.60); } .oz-ferien-chip { font-size: 0.60rem; font-weight: 700; color: #B45309; background: rgba(245,158,11,0.12); border: 1.5px solid rgba(245,158,11,0.40); padding: 3px 10px; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; box-shadow: none; } /* Nächster Termin bleibt rot */ .oz-ferien-item.is-next .oz-ferien-chip { background: #dc2626; border-color: rgba(185,28,28,0.60); box-shadow: 0 1px 4px rgba(220,38,38,0.30); color: #ffffff; } .oz-ferien-note { font-size: 0.65rem; color: #dc2626; font-weight: 600; margin-top: 0.75rem; text-align: center; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .oz-tab, .oz-tab::after, .oz-ferien-chevron { transition: none; } .oz-tab.is-active { animation: none; } .oz-ferien-body { transition: none; } .oz-ferien-item { transition: none; opacity: 1; transform: none; } .oz-live-dot::after { animation: none; } .oz-time-tile { transition: none; } } .responsive-bild { max-width: 100%; height: auto; display: block; } .bild-fokus { height: 100%; object-fit: cover; object-position: center 5%; } /* ══ ADDITIONAL FUER-ELTERN STYLES ══ */ @media (max-width: 1023px) and (orientation: landscape) { .cta-pattern-bg { padding-bottom: 16rem !important; } } /* ══ SCHLIESSZEITEN MODAL ══ */ .sz-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 900; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .sz-modal-backdrop.is-open { opacity: 1; pointer-events: auto; } .sz-modal { position: fixed; inset: 0; z-index: 901; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; } @media (min-width: 640px) { .sz-modal { align-items: center; padding: 1.5rem; } } .sz-modal-inner { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 1.5rem 1.5rem 0 0; width: 100%; max-width: 480px; max-height: 88dvh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.8); transform: translateY(100%); opacity: 0; transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms ease; pointer-events: none; } @media (min-width: 640px) { .sz-modal-inner { border-radius: 1.5rem; max-height: 80dvh; transform: translateY(16px) scale(0.97); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.8); } } .sz-modal.is-open .sz-modal-inner { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } .sz-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.125rem 0.875rem; border-bottom: 1px solid rgba(0, 0, 0, 0.07); flex-shrink: 0; background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(185, 28, 28, 0.03) 100%); } .sz-modal-head-left { display: flex; align-items: center; gap: 0.625rem; } .sz-modal-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); border: 1px solid rgba(185, 28, 28, 0.40); box-shadow: 0 2px 8px rgba(220, 38, 38, 0.30); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sz-modal-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.05rem; font-weight: 800; color: #1e1b4b; margin: 0; line-height: 1.2; } .sz-modal-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; transition: background 180ms ease, transform 200ms ease; flex-shrink: 0; } .sz-modal-close:hover { background: rgba(0, 0, 0, 0.12); transform: rotate(90deg); } .sz-modal-close:focus-visible { outline: 2px solid var(--amina-blue, #48A0D6); outline-offset: 2px; } .sz-modal-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.875rem 1.125rem 1.5rem; display: flex; flex-direction: column; gap: 0; } .sz-year-group { margin-bottom: 0.625rem; } .sz-year-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--amina-yellow, #f59e0b); padding: 0.875rem 0 0.375rem; border-bottom: 1px solid rgba(245, 158, 11, 0.18); margin-bottom: 0.375rem; } .sz-entry { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 0.5rem; transition: background 160ms ease, opacity 280ms ease, transform 280ms ease; opacity: 0; transform: translateY(7px); } .sz-entry:hover { background: rgba(245, 158, 11, 0.06); } .sz-modal.is-open .sz-entry { opacity: 1; transform: translateY(0); } .sz-modal.is-open .sz-entry.sz-past { opacity: 0.62; } .sz-entry-name { font-size: 0.825rem; font-weight: 600; color: #1e1b4b; flex: 1; min-width: 0; line-height: 1.35; } .sz-entry-chip { font-size: 0.60rem; font-weight: 700; color: #B45309; background: rgba(245, 158, 11, 0.12); border: 1.5px solid rgba(245, 158, 11, 0.38); padding: 3px 10px; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; line-height: 1.5; } .sz-chip-today { background: #dc2626; border-color: rgba(185, 28, 28, 0.6); color: #fff; box-shadow: 0 1px 4px rgba(220, 38, 38, 0.3); } .sz-entry.sz-today-act .sz-entry-name { color: #dc2626; font-weight: 700; } .sz-entry.sz-past .sz-entry-name { text-decoration: line-through; text-decoration-color: rgba(100, 116, 139, 0.6); color: #475569; } .sz-entry.sz-past .sz-chip-past { background: #64748b; border-color: rgba(100, 116, 139, 0.5); color: #ffffff; font-weight: 700; } /* ── FAQ Inline-Link-Button ── */ .sz-faq-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; font-weight: 800; color: var(--amina-blue, #48A0D6); text-decoration: underline; text-underline-offset: 3px; transition: color 180ms ease; display: inline; line-height: inherit; } .sz-faq-link:hover { color: var(--amina-pink, #D55A92); } .sz-faq-link:focus-visible { outline: 2px solid var(--amina-blue, #48A0D6); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .sz-modal-backdrop, .sz-modal-inner { transition: none; } .sz-modal-close { transition: none; } .sz-entry { transition: none; opacity: 1; transform: none; } .sz-modal.is-open .sz-entry.sz-past { opacity: 0.62; } } /* ── EINGEWÖHNUNG IMAGE – Landscape Fix ── */ .eingewoehnung-img-wrap { aspect-ratio: 4 / 5; width: 100%; } @media (orientation: landscape) and (max-height: 600px) { .eingewoehnung-img-wrap { aspect-ratio: unset; width: 100%; height: 62vh; max-height: 62vh; } } /* ── HERO CLIP-REVEAL WRAPPER ── */ .hero-clip-wrap { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; } /* ── HERO CLIP-REVEAL WRAPPER ── */ span.hero-clip-wrap{display:block;overflow:hidden;padding-bottom:0.06em;margin-bottom:-0.06em} /* ══ SKY-IS-CLOSED-EVENING: vollständiger Override ══ */ #oeffnung-section.sky-is-closed-evening .text-gradient-flow { background: linear-gradient(to right, #E05B9D 0%, #C654B8 40%, #7B8DEB 70%, #E05B9D 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: textShineDay 6s ease-in-out infinite alternate !important; } #oeffnung-section.sky-is-closed-evening .eyebrow-badge { background: rgba(255,255,255,0.55) !important; color: rgba(30,27,75,0.85) !important; border-color: rgba(255,255,255,0.80) !important; transition: background 2.5s ease, color 2.5s ease !important; } #oeffnung-section.sky-is-closed-evening .text-aminaDark { color: #f0f4f8 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.18) !important; transition: color 2.5s ease !important; } #oeffnung-section.sky-is-closed-evening .text-slate-500 { color: #e8eef4 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important; transition: color 2.5s ease !important; }