/**
 * DERKAUFMANN Intro Animation & Design Enhancements
 * Canvas particles, code rain, 3D logo reveal, ambient mode,
 * cursor glow, card effects, button ripple
 *
 * @package DERKAUFMANN
 * @version 1.0.0
 */

/* ============================================
   INTRO OVERLAY
   ============================================ */
.intro-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: var(--color-dark, #0a1628); overflow: hidden;
    transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1), visibility 0.7s;
}
.intro-overlay.done { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.08); }
.intro-overlay.skip { display: none; }
.intro-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Morphing blobs */
.intro-blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0;
    will-change: transform, opacity; transition: opacity 1.5s ease;
}
.intro-blob.visible { opacity: 1; }
.intro-blob-1 {
    width: 500px; height: 500px; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(0,102,255,0.2) 0%, transparent 70%);
    animation: intro-blob1 8s ease-in-out infinite;
}
.intro-blob-2 {
    width: 400px; height: 400px; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(0,212,170,0.15) 0%, transparent 70%);
    animation: intro-blob2 8s ease-in-out 2s infinite;
}
@keyframes intro-blob1 {
    0%,100%{transform:translate(-50%,-50%) scale(1) translate(0,0)}
    33%{transform:translate(-50%,-50%) scale(1.2) translate(60px,-40px)}
    66%{transform:translate(-50%,-50%) scale(0.9) translate(-40px,30px)}
}
@keyframes intro-blob2 {
    0%,100%{transform:translate(-50%,-50%) scale(1) translate(0,0)}
    33%{transform:translate(-50%,-50%) scale(0.8) translate(-50px,50px)}
    66%{transform:translate(-50%,-50%) scale(1.3) translate(30px,-60px)}
}

/* Intro center - 3D tilt container */
.intro-center {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
    perspective: 800px; transform-style: preserve-3d; will-change: transform;
}

/* Logo icon - 3D reveal */
.intro-icon-wrap {
    position: relative; width: 80px; height: 80px;
    transform: rotateY(90deg) scale(0.6); opacity: 0;
    transition: transform 0.9s cubic-bezier(0.34,1.56,0.64,1), opacity 0.5s ease;
    transform-style: preserve-3d;
}
.intro-icon-wrap.visible { transform: rotateY(0deg) scale(1); opacity: 1; }
.intro-icon-wrap svg { width: 80px; height: 80px; display: block; }

.intro-icon-wrap .i-rect { opacity: 0; transform-box: fill-box; transform-origin: center; }
.intro-icon-wrap.visible .i-rect { animation: intro-rectIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards; }
@keyframes intro-rectIn { from{opacity:0;transform:scale(0.7) rotate(-15deg)} to{opacity:1;transform:scale(1) rotate(0)} }

.intro-icon-wrap .i-arrow { stroke-dasharray: 55; stroke-dashoffset: 55; }
.intro-icon-wrap .i-dash  { stroke-dasharray: 25; stroke-dashoffset: 25; }
.intro-icon-wrap.visible .i-arrow { animation: intro-drawS 0.5s ease-out 0.7s forwards; }
.intro-icon-wrap.visible .i-dash  { animation: intro-drawS 0.35s ease-out 1s forwards; }
@keyframes intro-drawS { to { stroke-dashoffset: 0; } }

.intro-icon-wrap .i-cursor { opacity: 0; }
.intro-icon-wrap.visible .i-cursor { animation: intro-cursorOn 0.01s 1.35s forwards, intro-cursorBlink 0.9s step-end 1.35s infinite; }
@keyframes intro-cursorOn { to { opacity:1 } }
@keyframes intro-cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Logo pulse */
.intro-icon-wrap.pulse { animation: intro-logoPulse 3s ease-in-out infinite; }
@keyframes intro-logoPulse {
    0%,100% { transform: rotateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { transform: rotateY(0) scale(1.04); filter: drop-shadow(0 0 20px rgba(0,102,255,0.35)); }
}

/* Glow ring */
.intro-glow {
    position: absolute; width: 130px; height: 130px; top: 50%; left: 50%;
    transform: translate(-50%,-50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(0,102,255,0.25) 0%, transparent 70%);
    filter: blur(25px); opacity: 0; z-index: -1;
    transition: opacity 0.8s ease 0.5s;
}
.intro-icon-wrap.visible + .intro-glow { opacity: 1; animation: intro-glowP 2.5s ease-in-out 1.5s infinite; }
@keyframes intro-glowP {
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.7}
    50%{transform:translate(-50%,-50%) scale(1.25);opacity:1}
}

/* Character text with glitch */
.intro-text {
    display: flex; align-items: baseline;
    font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800;
    letter-spacing: 0.06em; perspective: 600px;
}
.intro-char {
    display: inline-block; opacity: 0;
    transform: rotateX(-80deg) translateY(15px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    transform-origin: bottom center;
}
.intro-char.visible { opacity: 1; transform: rotateX(0) translateY(0); }
.intro-char.blue { color: var(--color-primary, #0066ff); }
.intro-char.wht  { color: var(--color-white, #ffffff); }

/* Glitch animation */
.intro-char.glitch {
    opacity: 1 !important;
    animation: intro-cGlitch 0.18s steps(2) forwards;
}
@keyframes intro-cGlitch {
    0%   { text-shadow: -3px 0 #ff003c, 3px 0 #00ffd5; transform: translate(4px,-2px) skewX(-5deg); }
    33%  { text-shadow: 3px 0 #ff003c, -2px 0 #0066ff; transform: translate(-3px,2px) skewX(4deg); }
    66%  { text-shadow: -1px 0 #00ffd5, 1px 0 #ff003c; transform: translate(1px,-1px) skewX(-1deg); }
    100% { text-shadow: none; transform: rotateX(0) translateY(0); }
}

/* Shimmer sweep */
.intro-text-wrap { position: relative; overflow: hidden; }
.intro-text-wrap::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    transform: translateX(-100%); pointer-events: none;
}
.intro-text-wrap.shimmer::after { animation: intro-shimmer 0.8s ease 0.3s forwards; }
@keyframes intro-shimmer { to { transform: translateX(100%); } }

/* Gradient underline */
.intro-line {
    width: 0; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}
.intro-line.visible { width: clamp(200px, 40vw, 380px); }

/* Typewriter tagline */
.intro-tagline {
    font-size: clamp(0.85rem, 1.8vw, 1.05rem); font-weight: 400;
    color: var(--color-gray-600, #9ca3af); letter-spacing: 0.2em; text-transform: uppercase;
    min-height: 1.5em;
}
.intro-tagline .tl-cursor {
    display: inline-block; width: 2px; height: 1em; background: var(--color-primary, #0066ff);
    vertical-align: text-bottom; margin-left: 2px;
    animation: intro-cursorBlink 0.8s step-end infinite;
}

/* Skip button */
.intro-skip {
    position: absolute; bottom: 2rem; right: 2rem; z-index: 3;
    background: none; border: 1px solid rgba(255,255,255,0.08);
    color: var(--color-gray-500, #b0b8c4); font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif); font-size: 0.72rem;
    font-weight: 500; padding: 0.35rem 0.9rem; border-radius: 100px;
    cursor: pointer; opacity: 0; transition: opacity 0.5s ease, color 0.2s, border-color 0.2s;
    letter-spacing: 0.05em;
}
.intro-skip.visible { opacity: 1; }
.intro-skip:hover { color: var(--color-gray-400, #d1d5db); border-color: rgba(255,255,255,0.15); }

/* Intro progress bar */
.intro-progress {
    position: absolute; bottom: 0; left: 0; height: 2px; z-index: 5;
    background: linear-gradient(90deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    width: 0;
}
.intro-progress.running {
    width: 100%;
    transition: width 5.5s cubic-bezier(0.2, 0.6, 0.4, 1);
}

/* ============================================
   PAGE CONTENT ABOVE PARTICLES
   Canvas = z-index:2, Orbs = z-index:1
   Page content must be above both
   ============================================ */
.site-main { position: relative; z-index: 10; }
.site-footer { position: relative; z-index: 10; }
.scroll-to-top { z-index: 90; }
.bottom-nav { z-index: 997; }
.chat-widget { z-index: 998; }

/* ============================================
   BACKGROUND ORBS (floating page background)
   ============================================ */
.bg-orbs { position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity 1.5s ease; }
.bg-orbs.visible { opacity:1; }
.bg-orb { position:fixed; border-radius:50%; will-change:transform; pointer-events:none; }
.bg-orb-1 { width:900px; height:900px; top:-20%; right:-15%; background:radial-gradient(circle,rgba(0,110,255,0.18) 0%,transparent 60%); filter:blur(80px); animation:intro-orbA 20s ease-in-out infinite; }
.bg-orb-2 { width:800px; height:800px; bottom:-15%; left:-15%; background:radial-gradient(circle,rgba(0,220,170,0.14) 0%,transparent 60%); filter:blur(80px); animation:intro-orbB 24s ease-in-out infinite; }
.bg-orb-3 { width:650px; height:650px; top:55%; right:-18%; background:radial-gradient(circle,rgba(140,92,246,0.12) 0%,transparent 60%); filter:blur(70px); animation:intro-orbC 18s ease-in-out infinite; }
@keyframes intro-orbA { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-70px,90px) scale(1.15)} 66%{transform:translate(60px,-70px) scale(0.9)} }
@keyframes intro-orbB { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(80px,-60px) scale(1.2)} 66%{transform:translate(-60px,70px) scale(0.85)} }
@keyframes intro-orbC { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-90px,60px) scale(1.25)} 66%{transform:translate(70px,-80px) scale(0.8)} }

/* ============================================
   CURSOR GLOW
   ============================================ */
.cursor-glow {
    position:fixed; width:350px; height:350px; border-radius:50%; pointer-events:none; z-index:3;
    background:radial-gradient(circle,rgba(0,102,255,0.12) 0%,transparent 65%);
    transform:translate(-50%,-50%); opacity:0; transition:opacity 0.4s ease;
    mix-blend-mode:screen; will-change:transform;
}
.cursor-glow.visible { opacity:1; }

/* ============================================
   HERO ANIMATION (fade-in elements)
   ============================================ */
.home-hero .service-badge,
.home-hero .home-hero-title,
.home-hero .home-hero-subtitle,
.home-hero .home-hero-desc,
.home-hero .home-hero-actions {
    opacity: 0; transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Mobile: skip intro animation, show hero immediately for fast LCP */
@media (max-width: 767px) {
    .home-hero .service-badge,
    .home-hero .home-hero-title,
    .home-hero .home-hero-subtitle,
    .home-hero .home-hero-desc,
    .home-hero .home-hero-actions {
        opacity: 1; transform: none;
    }
}
.home-hero .service-badge.anim { opacity:1; transform:translateY(0); }
.home-hero .home-hero-title.anim { opacity:1; transform:translateY(0); transition-delay:.15s; }
.home-hero .home-hero-subtitle.anim { opacity:1; transform:translateY(0); transition-delay:.25s; }
.home-hero .home-hero-desc.anim { opacity:1; transform:translateY(0); transition-delay:.35s; }
.home-hero .home-hero-actions.anim { opacity:1; transform:translateY(0); transition-delay:.45s; }

/* ============================================
   ENHANCED CARD GLOW (service cards)
   ============================================ */
.home-service-card { position:relative; transform-style:preserve-3d; }
.home-service-card::after {
    content:''; position:absolute; inset:-2px; border-radius:18px;
    background:linear-gradient(135deg,rgba(0,102,255,0.3),rgba(0,212,170,0.3));
    filter:blur(12px); opacity:0; transition:opacity 0.4s; pointer-events:none; z-index:-1;
}
.home-service-card:hover::after { opacity:1; }

/* ============================================
   ANIMATED GRADIENT TEXT
   ============================================ */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa), #8b5cf6, var(--color-primary, #0066ff)) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: intro-gradShift 6s ease-in-out infinite;
}
@keyframes intro-gradShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ============================================
   BUTTON RIPPLE EFFECT
   ============================================ */
.btn { position:relative; overflow:hidden; }
.btn-ripple {
    position:absolute; border-radius:50%; background:rgba(255,255,255,0.25);
    transform:scale(0); animation:intro-rippleAnim 0.6s ease-out forwards; pointer-events:none;
}
@keyframes intro-rippleAnim { to { transform:scale(4); opacity:0; } }

/* ============================================
   ACTIVE NAV LINK (scroll spy)
   ============================================ */
.nav-link.active { color: var(--color-white, #fff) !important; }
.nav-link.active::after { width: 100% !important; }

/* ============================================
   LOGO TEXT FIX — einheitliche Größe & Baseline
   ============================================ */
.site-logo .logo-der,
.site-logo .logo-kaufmann {
    font-weight: 800;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
}
/* Einheitlicher Abstand DER↔KAUFMANN: Logo + alle Überschriften */
.logo-der {
    margin-right: 0.06em;
}

/* Footer Adresse: weiße Schrift + Gradient-Underline bei Hover */
.footer-address-link { color: var(--color-white, #fff); text-decoration: none; position: relative; display: inline-block; width: fit-content; }
.footer-address-link:visited { color: var(--color-white, #fff); }
.footer-address-link::after {
    content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    border-radius: 1px;
    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.footer-address-link:hover::after { width: 100%; left: 0; }

/* Related Pages: Trennstrich entfernen */
section.related-pages { border-top: none !important; border: none !important; }

/* ============================================
   CONTRAST FIX — WCAG AA Minimum 4.5:1
   ============================================ */
/* Footer: Google Maps Link von gray-600 auf gray-500 */
.footer-google-link { color: var(--color-gray-500, #b0b8c4); }
/* Footer: Öffnungszeiten-Text */
.footer-hours-list span { color: var(--color-gray-400, #d1d5db); }
/* Glassmorphism-Karten: sicherstellen, dass Text lesbar bleibt */
.glass-card p,
.glass-card li { color: var(--color-gray-400, #d1d5db); }
/* Tool-Übersicht Pfeil */
.tool-overview-arrow { color: var(--color-gray-500, #b0b8c4); }

/* ============================================
   STATS SECTION
   ============================================ */
.section--stats {
    background: var(--color-dark-alt, #132039);
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-align: center;
}
.section--stats .section-title {
    margin-bottom: 2.5rem;
}
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2rem; max-width: 900px; margin: 0 auto; text-align: center;
}
.stat-item {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}
.stat-item.visible { opacity: 1; transform: translateY(0); }
.stat-number {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
    background: linear-gradient(135deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1.2;
}
.stat-label {
    font-size: 0.8rem; font-weight: 500;
    color: var(--color-gray-500, #b0b8c4); margin-top: 0.25rem;
}
/* Glow after counter finishes */
.stat-number.glow {
    filter: drop-shadow(0 0 12px rgba(0,102,255,0.5));
    animation: intro-statGlow 0.8s ease-out forwards;
}
@keyframes intro-statGlow {
    0% { filter: drop-shadow(0 0 20px rgba(0,102,255,0.7)); transform: scale(1.08); }
    100% { filter: drop-shadow(0 0 0 transparent); transform: scale(1); }
}

/* ============================================
   1) SCROLL REVEAL ANIMATIONS
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.from-left  { transform: translateX(-50px); }
.reveal.from-right { transform: translateX(50px); }
.reveal.from-scale { transform: scale(0.92); }
.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}
/* Staggered children: cards in grids */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.visible > *:nth-child(1)  { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2)  { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3)  { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4)  { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5)  { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger.visible > *:nth-child(7)  { transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(8)  { transition-delay: 0.56s; }
.reveal-stagger.visible > *:nth-child(9)  { transition-delay: 0.64s; }
.reveal-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}
/* Only apply stagger transitions when parent is visible */
.reveal-stagger:not(.visible) > * {
    transition: none;
}

/* ============================================
   2) BUTTONS — keine 3D/Scale-Effekte
   ============================================ */

/* ============================================
   3) ANIMATED GRADIENT BORDERS
   ============================================ */
.glow-border {
    position: relative;
    overflow: visible;
}
.glow-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--border-angle, 0deg),
        transparent 25%,
        var(--color-primary, #0066ff) 50%,
        var(--color-secondary, #00d4aa) 65%,
        transparent 75%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: borderRotate 4s linear infinite;
    pointer-events: none;
}
.glow-border:hover::before {
    opacity: 1;
}
@keyframes borderRotate {
    to { --border-angle: 360deg; }
}
/* Fallback: CSS Houdini @property for animating custom property */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ============================================
   4) SCROLL PROGRESS BAR
   ============================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    z-index: 10001;
    transition: none;
    pointer-events: none;
}

/* ============================================
   5) TEXT SPLIT ANIMATIONS
   ============================================ */
.split-text .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.split-text .word-inner {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-text.visible .word-inner {
    transform: translateY(0);
}
/* Staggered word delays via JS inline styles */

/* ============================================
   6) SMOOTH SECTION PARALLAX
   ============================================ */
.parallax-bg {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ============================================
   POLISH: 1) NAV-LINK HOVER UNDERLINE
   ============================================ */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    border-radius: 1px;
    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
    left: 0;
}
.nav-link:hover {
    color: var(--color-white, #fff);
}

/* POLISH: FOOTER-LINK HOVER UNDERLINE (wie Hauptmenü) */
.footer-links a,
.footer-legal a {
    position: relative;
    width: fit-content;
}
.footer-links a::after,
.footer-legal a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    border-radius: 1px;
    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), left 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.footer-links a:hover::after,
.footer-legal a:hover::after {
    width: 100%;
    left: 0;
}

/* ============================================
   POLISH: 2) REGION TAGS HOVER
   ============================================ */
.region-tag {
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}
.region-tag:hover {
    transform: translateY(-2px);
    background: rgba(0,102,255,0.12);
    box-shadow: 0 4px 12px rgba(0,102,255,0.15);
}

/* ============================================
   POLISH: 3) FOOTER SOCIAL ICONS
   ============================================ */
.footer-social a {
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
                color 0.25s ease,
                box-shadow 0.25s ease;
}
.footer-social a:hover {
    transform: translateY(-3px) scale(1.15);
    color: var(--color-primary, #0066ff);
    filter: drop-shadow(0 0 8px rgba(0,102,255,0.4));
}

/* ============================================
   POLISH: 4) SCROLL-TO-TOP ENHANCED GLOW
   ============================================ */
.scroll-to-top {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.scroll-to-top:hover {
    box-shadow: 0 0 25px rgba(0,102,255,0.5), 0 8px 30px rgba(0,102,255,0.3);
    transform: translateY(-5px) scale(1.05);
}

/* ============================================
   POLISH: 5) BOTTOM-NAV CALL BUTTON PULSE
   ============================================ */
.bottom-nav-call-icon {
    position: relative;
}
.bottom-nav-call-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(0,212,170,0.3);
    animation: callPulse 2s ease-in-out infinite;
    z-index: -1;
}
@keyframes callPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.25); opacity: 0; }
}

/* ============================================
   POLISH: 6) STATUS-PUNKT PULSIEREN
   ============================================ */
.footer-hours-status .status-dot,
.status-indicator {
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; }
    50% { box-shadow: 0 0 0 4px transparent; }
}

/* ============================================
   POLISH: 7) FORM FIELDS ENHANCED
   ============================================ */
.form-group input,
.form-group textarea,
.form-group select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary, #0066ff);
    box-shadow: 0 0 0 3px rgba(0,102,255,0.15), 0 0 20px rgba(0,102,255,0.08);
    background-color: rgba(0,102,255,0.03);
}
/* Error shake */
@keyframes formShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.form-group.error input,
.form-group.error textarea {
    animation: formShake 0.4s ease;
    border-color: #ff4757;
    box-shadow: 0 0 0 3px rgba(255,71,87,0.15);
}
/* Success state */
.form-group.success input,
.form-group.success textarea {
    border-color: var(--color-secondary, #00d4aa);
    box-shadow: 0 0 0 3px rgba(0,212,170,0.15);
}

/* ============================================
   POLISH: 8) SERVICE CARD ICON SCALE ON HOVER
   ============================================ */
.home-service-card .service-icon,
.benefit-card .benefit-icon,
.about-service-icon {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.home-service-card:hover .service-icon,
.benefit-card:hover .benefit-icon,
.about-service-block:hover .about-service-icon {
    transform: scale(1.12) translateY(-2px);
}

/* ============================================
   POLISH: 9) FAQ AKKORDEON PFEIL ROTATION
   ============================================ */
.faq-toggle svg,
.faq-question svg,
.accordion-toggle svg {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.faq-item.active .faq-toggle svg,
.faq-item.active .faq-question svg,
.accordion-item.active .accordion-toggle svg {
    transform: rotate(180deg);
}

/* ============================================
   POLISH: 10) HEADER SMOOTH BG TRANSITION
   ============================================ */
.site-header {
    transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.site-header.scrolled {
    background: rgba(10,22,40,0.95);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

/* ============================================
   POLISH: 11) FOCUS-VISIBLE ON ALL INTERACTIVE
   ============================================ */
.btn:focus-visible,
.nav-link:focus-visible,
.mobile-nav-link:focus-visible,
.footer-social a:focus-visible,
.footer-links a:focus-visible,
.bottom-nav-item:focus-visible,
.chat-widget-link:focus-visible,
.scroll-to-top:focus-visible,
.related-page-card:focus-visible,
.tool-overview-card:focus-visible,
.faq-overview-card:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid var(--color-secondary, #00d4aa);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================
   POLISH: 12) CHAT WIDGET PULSE
   ============================================ */
.chat-widget-toggle {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.chat-widget-toggle:hover {
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(0,102,255,0.3);
}
.chat-widget-toggle::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--color-primary, #0066ff);
    opacity: 0;
    animation: chatPulse 3s ease-in-out infinite;
}
@keyframes chatPulse {
    0%, 70%, 100% { transform: scale(1); opacity: 0; }
    75% { transform: scale(1); opacity: 0.6; }
    90% { transform: scale(1.15); opacity: 0; }
}

/* ============================================
   PREMIUM: 1) CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-dark, #0a1628);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary, #0066ff), var(--color-secondary, #00d4aa));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1a7aff, #00e6b8);
}
/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary, #0066ff) var(--color-dark, #0a1628);
}

/* ============================================
   PREMIUM: 2) NOISE TEXTURE OVERLAY
   ============================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ============================================
   PREMIUM: 4) GLASSMORPHISM CARDS
   ============================================ */
.home-service-card,
.benefit-card,
.about-service-block,
.about-values-card,
.personal-card,
.tool-overview-card,
.faq-overview-card,
.related-page-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
}

/* ============================================
   PREMIUM: 5) 3D TILT ON ALL CARDS (Desktop via JS)
   ============================================ */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}

/* ============================================
   PREMIUM: 6) SMOOTH PAGE TRANSITION
   ============================================ */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--color-dark, #0a1628);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.page-transition.active {
    opacity: 1;
    pointer-events: all;
}


/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media(max-width:768px) {
    /* Intro */
    .intro-text { font-size:1.8rem; }
    .intro-tagline { font-size:0.75rem; }
    .intro-icon-wrap svg { width:60px; height:60px; }
    .intro-icon-wrap { width:60px; height:60px; }
    .intro-glow { width:100px; height:100px; }
    .intro-skip { bottom:1.5rem; right:1.5rem; }

    /* Stats */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .stat-number { font-size: 1.8rem; }

    /* Cursor glow: disable on mobile */
    .cursor-glow { display:none; }

    /* Bg orbs: smaller + reduced blur for GPU performance */
    .bg-orb-1 { width:350px; height:350px; filter:blur(50px); }
    .bg-orb-2 { width:300px; height:300px; filter:blur(50px); }
    .bg-orb-3 { width:250px; height:250px; filter:blur(45px); }

    /* Disable mix-blend-mode on mobile (expensive compositing) */
    #ambientCanvas, #introCanvas { mix-blend-mode: normal; opacity: 0.7; }

    /* Simpler gradient border: static on mobile */
    .glow-border::before { animation: none; }

    /* Stop expensive text-gradient animation on mobile */
    .text-gradient { animation: none; background-size: 100% 100% !important; }

    /* Reduce orb animation complexity: slower = fewer repaints */
    .bg-orb-1 { animation-duration: 30s; }
    .bg-orb-2 { animation-duration: 36s; }
    .bg-orb-3 { animation-duration: 28s; }

    /* Disable text-split on mobile (reduce DOM nodes) */
    .split-text .word-inner { transform: none; transition: none; }
    .split-text .word { overflow: visible; }

    /* Simplify call button pulse on mobile */
    .bottom-nav-call-icon::after { animation-duration: 3s; }

    /* Smaller chat pulse on mobile */
    .chat-widget-toggle::after { display: none; }

    /* Disable glassmorphism backdrop-filter on mobile (performance) */
    .home-service-card,
    .benefit-card,
    .about-service-block,
    .about-values-card,
    .personal-card,
    .tool-overview-card,
    .faq-overview-card,
    .related-page-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Disable noise overlay on mobile */
    body::before { display: none; }
}

/* ============================================
   SCROLL-DOWN INDICATOR (Homepage Hero)
   ============================================ */
.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-2xl, 2rem);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    cursor: pointer;
}
.scroll-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}
.scroll-indicator.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}
.scroll-indicator-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500, #b0b8c4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.scroll-indicator-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--color-primary, #0066ff);
    transform: translateY(-10px);
    animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator {
    padding-bottom: 10px;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(-10px); }
    50% { transform: translateY(0); }
}

/* ============================================
   GOOGLE REVIEWS SWIPE HINT
   ============================================ */
.google-reviews-scroll-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-md, 1rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-gray-500, #b0b8c4);
    opacity: 0.8;
    transition: opacity 0.4s ease;
}
.google-reviews-scroll-hint.scrolled {
    opacity: 0;
    pointer-events: none;
}
.google-reviews-scroll-hint svg {
    flex-shrink: 0;
}
.swipe-hand {
    display: inline-flex;
    animation: swipeHint 2s ease-in-out infinite;
}
@keyframes swipeHint {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
}

/* Desktop: Hint verbergen (Maus kann scrollen) */
@media(min-width:769px) {
    .google-reviews-scroll-hint {
        display: none !important;
    }
}

/* ============================================
   MOBILE: 640px — smoother grid transitions
   ============================================ */
@media(max-width:640px) {
    /* Benefits & service-options: 1-col earlier for readability */
    .benefits-grid { grid-template-columns: 1fr !important; }
    .service-options-grid { grid-template-columns: 1fr !important; }
    .systems-grid { grid-template-columns: 1fr !important; }
}

/* ============================================
   MOBILE: 480px — performance + layout fixes
   ============================================ */
@media(max-width:480px) {
    .favicon-preview-grid { grid-template-columns: 1fr !important; }
    /* Disable bg-orb blur animations on small devices (GPU-intensive) */
    .bg-orb { animation: none; opacity: 0.5; filter: blur(30px); }
    .bg-orb-1 { width: 200px; height: 200px; }
    .bg-orb-2 { width: 180px; height: 180px; }
    .bg-orb-3 { display: none; }
}

/* ============================================
   MOBILE: 375px — very small screens
   ============================================ */
@media(max-width:375px) {
    /* Intro */
    .intro-text { font-size: 1.5rem; }

    /* Reduce container padding */
    .container { padding: 0 var(--space-xs, 0.5rem) !important; }

    /* Sections: less vertical padding */
    .section { padding: var(--space-xl, 2rem) 0 !important; }

    /* Hero: tighter spacing */
    .home-hero-title { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
    .service-hero-title { font-size: 1.35rem !important; }
    .contact-hero-title { font-size: 1.35rem !important; }

    /* Buttons: slightly smaller to prevent overflow */
    .btn { font-size: var(--text-sm, 0.875rem); padding: var(--space-sm, 0.5rem) var(--space-md, 1rem); }

    /* Cards: reduced padding */
    .home-service-card,
    .tool-card,
    .benefit-card,
    .contact-form-wrapper { padding: var(--space-sm, 0.5rem) !important; }

    /* CTA: tighter */
    .cta { padding: var(--space-xl, 2rem) 0 !important; }
    .cta-title { font-size: var(--text-lg, 1.125rem) !important; }

    /* Messenger buttons: ensure wrapping */
    .contact-messenger-buttons { gap: var(--space-xs, 0.25rem); }
    .messenger-btn { padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem); font-size: var(--text-xs, 0.75rem); }

    /* Footer: tighter grid */
    .site-footer .container { padding: 0 var(--space-xs, 0.5rem); }

    /* Tool dropzone: compact */
    .tool-dropzone { padding: var(--space-sm, 0.5rem); min-height: 100px; }

    /* Section titles */
    .section-title { font-size: var(--text-lg, 1.125rem) !important; }

    /* Stats grid: 2-col but tighter */
    .stats-grid { gap: 0.75rem; }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 0.7rem; }

    /* Google reviews: narrower cards */
    .google-review-card { flex: 0 0 240px; }
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce) {
    .intro-overlay,
    .intro-blob,
    .intro-icon-wrap,
    .intro-char,
    .intro-line,
    .intro-text-wrap::after,
    .bg-orb,
    .cursor-glow,
    .btn-ripple,
    .text-gradient,
    .glow-border::before,
    .bottom-nav-call-icon::after,
    .chat-widget-toggle::after,
    .footer-hours-status .status-dot,
    .status-indicator {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal, .reveal-stagger > *, .split-text .word-inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    /* Disable page transition, noise */
    .page-transition { display: none !important; }
    body::before { display: none !important; }
}

/* ============================================
   PRINT STYLESHEET
   ============================================ */
@media print {
    /* Hide decorative & interactive elements */
    .intro-overlay,
    .bg-orb,
    .cursor-glow,
    .scroll-progress,
    .scroll-to-top,
    .bottom-nav,
    .chat-widget,
    .page-transition,
    .site-header,
    .site-footer,
    .cta,
    .related-pages,
    canvas,
    .btn,
    .glow-border::before,
    body::before /* noise overlay */ {
        display: none !important;
    }

    /* Reset colors for print */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        line-height: 1.6;
    }

    main, section, .container {
        color: #000 !important;
        background: transparent !important;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        background: none !important;
        page-break-after: avoid;
    }

    p, li, td, th, address {
        color: #222 !important;
    }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    /* Show link URLs after links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    a[href^="tel"]::after,
    a[href^="mailto"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    /* Logo text for print */
    .logo-der, .logo-kaufmann {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }
    .text-gradient {
        -webkit-text-fill-color: #000 !important;
        background: none !important;
    }

    /* Clean up sections */
    .section, .section--dark, .section--stats {
        background: transparent !important;
        padding: 1rem 0 !important;
    }

    /* Prevent page breaks inside cards */
    .home-service-card,
    .benefit-card,
    .about-service-block,
    .faq-item,
    .stat-item {
        page-break-inside: avoid;
    }

    /* Remove all animations & transforms */
    * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}