/* ============================================================
   BERGISCHES SCHLÜSSELDIENST — Custom CSS
   Tailwind CDN ist die Basis, diese Datei ergänzt sie
   ============================================================ */

/* ── Admin Toggle-Switch ───────────────────────────────────
   Zuverlässige CSS-Toggle ohne Tailwind after:-Modifier     */
.adm-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.adm-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.adm-toggle__track {
    display: block;
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 9999px;
    transition: background-color .2s ease;
    position: relative;
    flex-shrink: 0;
}
.adm-toggle__track::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.adm-toggle input:checked + .adm-toggle__track {
    background: #1B3B6F;
}
.adm-toggle input:checked + .adm-toggle__track::before {
    transform: translateX(20px);
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; }

/* Partner-Logos: Scrollbar unsichtbar */
.partner-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.partner-scroll::-webkit-scrollbar { display: none; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: #1F2937;
    -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

/* ── BRAND COLORS ───────────────────────────────────────── */
:root {
    --blue:       #1B3B6F;
    --blue-light: #2563EB;
    --anthracite: #1F2937;
    --red:        #DC2626;
    --off-white:  #F8FAFC;
}

/* ── HERO GRADIENT ──────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(135deg,#0f2349 0%,#1B3B6F 40%,#1e4080 70%,#1a3560 100%);
}

/* ── SCROLL-ANIMATIONEN (bidirektional) ─────────────────── */
.anim {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}
.anim.left  { transform: translateX(-36px); }
.anim.right { transform: translateX(36px); }
.anim.visible { opacity: 1; transform: none; }

.delay-1 { transition-delay: .08s }
.delay-2 { transition-delay: .16s }
.delay-3 { transition-delay: .24s }
.delay-4 { transition-delay: .32s }
.delay-5 { transition-delay: .40s }

/* ── KARTE ──────────────────────────────────────────────── */
.card { transition: transform .3s ease, box-shadow .3s ease; }
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(27,59,111,.12);
}

/* ── DIVIDER ────────────────────────────────────────────── */
.divider {
    width: 56px; height: 4px;
    background: linear-gradient(90deg,#DC2626,#1B3B6F);
    border-radius: 2px;
    margin: 0 auto 1.5rem;
}

/* ── STICKY KONTAKT BUTTON ──────────────────────────────── */
#sticky-contact {
    position: fixed; bottom: 1.5rem; right: 1.25rem;
    z-index: 999;
    width: 56px; height: 56px; border-radius: 50%;
    background: #1B3B6F; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(27,59,111,.45);
    transition: transform .2s, background .2s;
    text-decoration: none;
}
#sticky-contact:hover { transform: scale(1.1); background: #2563EB; }

/* Animations-Sektionen: unsichtbar während Einfahren von unten,
   JS setzt opacity:1 nur wenn aktiv gepinnt (isActive) */
/* ══════════════════════════════════════════════════════════
   PROFILZYLINDER — SVG Icon-Animation
   Körper + Scheibe sind statisch. Nur #cyl-rotor-svg dreht
   sich per Scroll (0° → 180°) um den Scheibenmittelpunkt.
   SVG-ViewBox: 0 0 200 310 — Disc-Mitte bei (100, 99)
   ══════════════════════════════════════════════════════════ */
.cyl-wrap {
    width: min(220px, 78vw);
    user-select: none;
    filter: drop-shadow(0 12px 32px rgba(0,0,0,0.45));
}
#cyl-svg {
    width: 100%;
    height: auto;
    display: block;
}
/*
 * transform-box: view-box  → px-Werte im SVG-Koordinatensystem
 * transform-origin: 100px 99px  → exakter Scheibenmittelpunkt
 */
#cyl-rotor-svg {
    transform-box: view-box;
    transform-origin: 100px 99px;
    transition: none;
}

/* ══════════════════════════════════════════════════════════
   AUTOMATIKTÜR-ANIMATION — responsiv, weißer Hintergrund
   ══════════════════════════════════════════════════════════ */
.door-frame {
    position: relative;
    width: min(320px, calc(100vw - 2rem));
    aspect-ratio: 320 / 280;
}
.door-top {
    position: absolute; top: 0; left: 0; right: 0; height: 44px;
    background: linear-gradient(180deg,#475569,#334155);
    border-radius: 12px 12px 0 0;
    display: flex; align-items: center; padding: 0 1rem; gap: .5rem; z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.door-viewport {
    position: absolute; top: 44px; bottom: 0; left: 12px; right: 12px;
    background: linear-gradient(170deg, #edf0f5 0%, #e0e6ee 60%, #d4dce8 100%);
    overflow: hidden; display: flex;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.1);
}
/* Decorative interior lines */
.door-viewport::after {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.door-panel {
    flex: 1; position: relative;
    background: linear-gradient(160deg,
        rgba(230,240,252,.92) 0%,
        rgba(210,228,248,.80) 40%,
        rgba(190,215,245,.70) 100%);
    border: 1px solid rgba(148,192,242,.5);
    transition: transform .05s linear; /* JS overrides with direct style */
}
.door-panel.left  { transform-origin: left center; }
.door-panel.right { transform-origin: right center; }

/* Glasspanel reflections */
.door-panel::before {
    content: '';
    position: absolute;
    top: 8px; left: 8px; right: 8px; height: 40%;
    background: linear-gradient(180deg,rgba(255,255,255,.35),transparent);
    border-radius: 4px;
}
.door-handle {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 4px; height: 44px;
    background: linear-gradient(180deg,#94A3B8,#64748B,#94A3B8);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.door-panel.left  .door-handle { right: 8px; }
.door-panel.right .door-handle { left: 8px; }

/* ── HEADER ─────────────────────────────────────────────── */
.header-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.09); }
.nav-dropdown { display: none; }
.nav-item:hover .nav-dropdown { display: block; }

/* ── MOBILE MENU ────────────────────────────────────────── */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

/* ── ADMIN ──────────────────────────────────────────────── */
.admin-sidebar { width: 256px; }
@media(max-width:1024px){ .admin-sidebar{ transform:translateX(-100%); } }

/* ── FOCUS ──────────────────────────────────────────────── */
:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }

/* ── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1B3B6F; border-radius: 3px; }