/* ============================================================
   Premium-Layer für alle öffentlichen Seiten
   Header (Glas, kompakt beim Scrollen), Navigation, Footer, Fokus, Motion
   Lädt nach original-modern.css und überschreibt gezielt.
   ============================================================ */
:root { --pm-ink: #1b2430; --pm-red: #e30613; --pm-red-dark: #b2040e; --pm-paper: #faf8f4; --pm-ease: cubic-bezier(.16,1,.3,1); }

/* ---------- Header ---------- */
/* Header fixiert + Platzhalter (--hdr-h wird per JS gemessen): Kompakt-Modus verändert das Layout darunter nicht. */
.studio-site.hdr-fixed { padding-top: var(--hdr-h, 0px); }
.studio-site.hdr-fixed .site-header { position: fixed; left: 0; right: 0; }
html { scroll-padding-top: calc(var(--hdr-h, 120px) + 16px); }
.studio-site .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid rgba(14,17,22,.08); box-shadow: 0 10px 40px -20px rgba(14,17,22,.25); transition: box-shadow .4s var(--pm-ease), background .3s; }
.studio-site .site-header.is-scrolled { background: rgba(255,255,255,.86); box-shadow: 0 16px 50px -24px rgba(14,17,22,.35); }
.studio-site .site-header .topbar { background: var(--pm-red-dark); }
.studio-site .site-header .topbar .header-last-minute { color: #ffe08a !important; font-weight: 700; }
.studio-site .brand-bar { padding: 18px 0; transition: padding .35s var(--pm-ease); }
.studio-site .site-header.is-compact .brand-bar { padding: 10px 0; }
.studio-site .brand-bar .brand img { transition: height .35s var(--pm-ease), transform .35s var(--pm-ease); }
.studio-site .site-header.is-compact .brand-bar .brand img { height: 44px; }
.studio-site .header-search-wrap { box-shadow: inset 0 0 0 1px rgba(14,17,22,.08); background: rgba(247,245,240,.9); }
.studio-site .header-search-wrap:focus-within { box-shadow: inset 0 0 0 2px var(--pm-ink); background: #fff; }
.studio-site .header-contact { transition: transform .35s var(--pm-ease), box-shadow .35s var(--pm-ease); }
.studio-site .header-contact:hover { transform: translateY(-2px); }
.studio-site .header-whatsapp { box-shadow: 0 10px 24px -12px rgba(37,211,102,.7); }
.studio-site .main-nav-strip { background: rgba(255,255,255,.55); border-top: 1px solid rgba(14,17,22,.06); }
.studio-site .main-nav-strip a { position: relative; padding: 15px 2px; font-weight: 600; letter-spacing: .08em; color: #3a4a55; box-shadow: none; }
.studio-site .main-nav-strip a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px; background: var(--pm-ink); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--pm-ease); }
.studio-site .main-nav-strip a:hover { color: var(--pm-ink); }
.studio-site .main-nav-strip a:hover::after { transform: scaleX(1); transform-origin: left; }
.studio-site .main-nav-strip a.active { color: var(--pm-ink); box-shadow: none; }
.studio-site .main-nav-strip a.active::after { transform: scaleX(1); background: var(--pm-red); }
.studio-site .main-nav-strip .cta-link { color: var(--pm-red) !important; }
.studio-site .main-nav-strip .cta-link::after { background: var(--pm-red); }

/* ---------- Mobile Dock ---------- */
.studio-site .mobile-dock { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 50px -20px rgba(14,17,22,.45), inset 0 1px 0 rgba(255,255,255,.7); }

/* ---------- Footer (hell) ---------- */
.studio-site .site-footer { background: var(--pm-paper); color: #334155; border-top: 1px solid rgba(27,36,48,.08); }
.studio-site .site-footer::before { height: 4px; background: linear-gradient(90deg, var(--pm-red), #ff5660 50%, #ffd166); }
.studio-site .site-footer h4 { color: var(--pm-ink); letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; font-weight: 800; }
.studio-site .site-footer a { color: #475569; transition: color .2s; }
.studio-site .site-footer a:hover { color: var(--pm-red); }
.studio-site .site-footer .footer-bottom { color: #64748b; border-top-color: rgba(27,36,48,.08); }
.studio-site .site-footer p, .studio-site .site-footer .muted { color: #5b6b7b; }
.studio-site .footer-brand img { background: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(27,36,48,.35); border: 1px solid rgba(27,36,48,.06); }

/* ---------- Buttons & Fokus ---------- */
.studio-site .btn { transition: transform .35s var(--pm-ease), box-shadow .35s var(--pm-ease), background .25s, color .25s; }
.studio-site .btn:hover { transform: translateY(-2px); }
.studio-site .btn:active { transform: translateY(0) scale(.99); }
.studio-site :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--pm-red); outline-offset: 3px; border-radius: 6px; }

/* ---------- Seitenübergreifende Reveal-Animation (section-head, Karten) ---------- */
.studio-site .motion-ready { transform: translateY(26px); filter: blur(4px); transition: opacity .9s var(--pm-ease), transform .9s var(--pm-ease), filter .9s var(--pm-ease); transition-delay: var(--entry-delay, 0ms); }
.studio-site .motion-ready.motion-shown { filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .studio-site .motion-ready { filter: none !important; } }

/* ---------- Scrollbar & Auswahl ---------- */
.studio-site ::selection { background: var(--pm-red); color: #fff; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Keine dunklen Flächen: Cookie-Hinweis-Button und mobiler Upload-Button in Signalrot */
.studio-site .cookie-banner .btn--primary, .studio-site .studio-cookie .btn--primary, #cookie-all { background: var(--pm-red, #e30613) !important; border-color: var(--pm-red, #e30613) !important; color: #fff !important; }
.studio-site .mobile-dock > a.dock-upload { background: linear-gradient(145deg, #ff3b47, #c2050f) !important; box-shadow: 0 8px 18px -8px rgba(227,6,19,.8), inset 0 1px 1px rgba(255,255,255,.35) !important; }

/* Live-Status Öffnungszeiten */
.open-status { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; white-space: nowrap; }
.open-status .open-dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa5b1; box-shadow: 0 0 0 3px rgba(255,255,255,.18); flex: none; }
.open-status.is-open .open-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: openPulse 2.4s ease-in-out infinite; }
.open-status.is-lm .open-dot { background: #ffd166; box-shadow: 0 0 0 3px rgba(255,209,102,.3); }
.open-status.is-closed .open-dot { background: #ff6b74; box-shadow: 0 0 0 3px rgba(255,107,116,.25); }
.open-status strong { font-weight: 700; }
.open-status--bar { color: #fff; margin-left: 18px; }
.open-status--bar span:not(.open-dot) { opacity: .85; }
.open-status--card { font-size: .95rem; color: var(--pm-ink); padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(14,17,22,.08); }
.open-status--card.is-open { background: #effcf3; border-color: rgba(34,197,94,.3); }
.open-status--card.is-lm { background: #fff8e1; border-color: rgba(255,209,102,.6); }
.open-status--card.is-closed { background: #fff1f2; border-color: rgba(227,6,19,.18); }
.open-status--card span:not(.open-dot) { color: #5b6b7b; }
@keyframes openPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.08); } }
@media (max-width: 700px) { .open-status--bar span:not(.open-dot) { display: none; } .open-status--bar { margin-left: 10px; } }