/* style.css – v7 | Neon Tech Design */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --primary:   #1da0d8;
    --primary-d: #1480b0;
    --primary-l: rgba(29,160,216,.08);
    --neon:      #00f5ff;
    --neon2:     #7b2ff7;
    --dark:      #080c12;
    --dark2:     #0d1117;
    --dark3:     #161b22;
    --card-bg:   #0d1117;
    --border:    rgba(29,160,216,.18);
    --text:      #e8edf5;
    --muted:     #8b949e;
    --white:     #ffffff;
    --radius:    .85rem;
}

/* ── BASE ─────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
    background: var(--dark);
    color: var(--text);
}

/* ── SCROLLBAR ────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ── NAVBAR ───────────────────────────────── */
#mainNav {
    background: rgba(8,12,18,.6);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(29,160,216,.12);
    padding: .75rem 0;
    transition: background .4s, border-color .4s, box-shadow .4s;
}
#mainNav.scrolled,
#mainNav.always-dark {
    background: rgba(8,12,18,.95);
    border-bottom-color: rgba(29,160,216,.35);
    box-shadow: 0 0 30px rgba(29,160,216,.08);
}
.navbar-brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo-img { height: 40px; width: auto; }
.brand-text-wrap { display:flex; flex-direction:column; line-height:1.1; }
.brand-main { font-weight:800; font-size:1.1rem; color:#fff; letter-spacing:-.01em; }
.brand-sub  { font-size:.62rem; color:rgba(255,255,255,.35); letter-spacing:.08em; text-transform:uppercase; }

#mainNav .nav-link {
    font-weight:600; font-size:.88rem;
    color:rgba(255,255,255,.6);
    padding:.45rem .9rem; border-radius:.4rem;
    transition: color .2s, background .2s, text-shadow .2s;
}
#mainNav .nav-link:hover {
    color: var(--neon);
    text-shadow: 0 0 12px rgba(0,245,255,.5);
    background: rgba(0,245,255,.05);
}
.nav-cta {
    background: transparent !important;
    color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: .45rem !important;
    padding: .45rem 1.2rem !important;
    font-weight: 700 !important;
    transition: background .2s, box-shadow .2s, color .2s !important;
}
.nav-cta:hover {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(29,160,216,.4) !important;
    text-shadow: none !important;
}
.nav-cta::after { display:none !important; }

/* ── HERO SLIDER ──────────────────────────── */
.hero-slider {
    position: relative; height: 100vh; min-height: 600px; overflow: hidden;
}
.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.4s ease; z-index: 0;
}
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
        rgba(8,12,18,.9) 0%,
        rgba(8,12,18,.65) 55%,
        rgba(0,245,255,.04) 100%);
}

/* Neon scan-line overlay */
.hero-slider::before {
    content: '';
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,245,255,.015) 2px,
        rgba(0,245,255,.015) 4px
    );
}

.hero-content {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center;
}
.hero-content .container { padding-top: 90px; }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--neon);
    border: 1px solid rgba(0,245,255,.3);
    background: rgba(0,245,255,.05);
    padding: .32rem 1rem; border-radius: 2rem;
    margin-bottom: 1.4rem;
    text-shadow: 0 0 10px rgba(0,245,255,.6);
}
.hero-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
}

.hero-title {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 800; line-height: 1.05;
    color: #fff; margin-bottom: 1.2rem;
    letter-spacing: -.03em;
}
/* Glitch-Effekt auf .highlight */
.hero-title .highlight {
    color: var(--neon);
    text-shadow:
        0 0 10px rgba(0,245,255,.8),
        0 0 30px rgba(0,245,255,.4),
        0 0 60px rgba(0,245,255,.2);
    position: relative;
    display: inline-block;
    animation: glitch 5s infinite;
}
@keyframes glitch {
    0%,94%,100% { clip-path: none; transform: none; }
    95% {
        clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
        transform: translate(-3px, 0);
        text-shadow: 3px 0 var(--neon2), -3px 0 var(--neon);
    }
    96% {
        clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%);
        transform: translate(3px, 0);
    }
    97% { clip-path: none; transform: none; }
}

.hero-sub {
    font-size: clamp(.95rem, 1.8vw, 1.1rem);
    color: rgba(255,255,255,.65);
    max-width: 480px; line-height: 1.75;
    margin-bottom: 2.2rem;
}

.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.btn-hero-primary {
    background: var(--primary);
    color: #fff; font-weight: 700; font-size: .95rem;
    padding: .85rem 2.2rem; border-radius: .55rem;
    border: none; text-decoration: none;
    box-shadow: 0 0 20px rgba(29,160,216,.5), 0 4px 15px rgba(0,0,0,.3);
    transition: box-shadow .25s, transform .2s, background .2s;
    display: inline-block;
}
.btn-hero-primary:hover {
    background: var(--primary-d);
    box-shadow: 0 0 35px rgba(29,160,216,.7), 0 6px 20px rgba(0,0,0,.3);
    transform: translateY(-2px); color: #fff;
}

.btn-hero-ghost {
    color: rgba(255,255,255,.75); font-weight: 600; font-size: .95rem;
    padding: .82rem 2rem; border-radius: .55rem;
    border: 1px solid rgba(255,255,255,.2);
    background: transparent; text-decoration: none;
    transition: border-color .2s, color .2s, box-shadow .2s;
    display: inline-block;
}
.btn-hero-ghost:hover {
    border-color: var(--neon);
    color: var(--neon);
    box-shadow: 0 0 15px rgba(0,245,255,.2);
}

/* Slider Dots */
.slider-dots {
    position: absolute; bottom: 2.5rem; left: 50%;
    transform: translateX(-50%); z-index: 10; display:flex; gap:.6rem;
}
.slider-dot {
    width: 28px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.2);
    cursor: pointer; border: none; padding: 0;
    transition: background .3s, width .3s, box-shadow .3s;
}
.slider-dot.active {
    background: var(--neon);
    width: 46px;
    box-shadow: 0 0 10px var(--neon);
}

/* ── STATS BAR ────────────────────────────── */
.stats-bar {
    background: var(--dark2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.4rem 0;
    position: relative; overflow: hidden;
}
.stats-bar::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon), var(--primary), transparent);
    animation: scanline 3s linear infinite;
}
@keyframes scanline {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.stat-number {
    font-size: 1.8rem; font-weight: 800;
    color: var(--neon);
    text-shadow: 0 0 15px rgba(0,245,255,.5);
    line-height: 1;
}
.stat-label { font-size: .76rem; color: var(--muted); margin-top: .25rem; }
.stat-divider { border-left: 1px solid var(--border); }

/* ── SECTION HELPERS ──────────────────────── */
.section-eyebrow {
    font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--neon);
    text-shadow: 0 0 10px rgba(0,245,255,.4);
    margin-bottom: .5rem;
}
.section-title {
    font-size: clamp(1.7rem,3vw,2.3rem);
    font-weight: 800; color: var(--text); letter-spacing: -.025em;
}

/* ── FEATURE STREIFEN ─────────────────────── */
.feature-row {
    padding: 1.2rem .5rem;
    border-radius: .75rem;
    transition: background .2s;
}
.feature-row:hover { background: rgba(29,160,216,.04); }

/* ── SERVICE CARDS ────────────────────────── */
.service-card {
    border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    background: var(--dark3);
    height: 100%;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(29,160,216,.5);
    box-shadow: 0 0 30px rgba(29,160,216,.15), 0 10px 30px rgba(0,0,0,.4);
}
.service-card-header {
    background: linear-gradient(135deg,#0d1b2a 0%, #1a3a5c 100%);
    padding: 2rem; color: #fff;
    border-bottom: 1px solid rgba(29,160,216,.2);
}
.service-card-header .icon { font-size: 2.4rem; margin-bottom: .8rem; color: var(--neon); }
.service-card-body { padding: 1.6rem; }
.service-list { list-style:none; padding:0; margin:0 0 1.5rem; }
.service-list li {
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    display: flex; align-items: center; gap: .6rem;
    font-size: .9rem; color: var(--muted);
}
.service-list li i { color: var(--neon); font-size: .85rem; }

/* ── CTA SECTION ──────────────────────────── */
.cta-section {
    background: var(--dark2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 80px 0; text-align: center;
    position: relative; overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,245,255,.06) 0%, transparent 70%);
    pointer-events: none;
}
.cta-section h2 {
    font-size: clamp(1.9rem,3.5vw,2.8rem); font-weight: 800;
    color: #fff;
    text-shadow: 0 0 40px rgba(0,245,255,.15);
}

/* ── FOOTER ───────────────────────────────── */
.footer {
    background: var(--dark);
    border-top: 1px solid var(--border);
    padding: 4rem 0 0;
    color: var(--muted);
}
.footer-brand { font-size: 1.2rem; font-weight: 800; color: #fff; }
.footer-sub { font-size: .85rem; margin: 0; }
.footer-heading { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: .8rem; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: var(--muted); text-decoration:none; font-size: .88rem; transition: color .2s, text-shadow .2s; }
.footer-links a:hover { color: var(--neon); text-shadow: 0 0 8px rgba(0,245,255,.4); }
.footer-divider { border-color: var(--border); margin: 2rem 0 1.5rem; }
.footer-bottom { padding-bottom: 1.5rem; font-size: .82rem; color: rgba(255,255,255,.25); }
.footer-bottom a { color: rgba(255,255,255,.25); text-decoration:none; transition: color .2s; }
.footer-bottom a:hover { color: var(--neon); }

/* Navbar always-dark */
#mainNav.always-dark {
    background: rgba(8,12,18,.97) !important;
    border-bottom-color: rgba(29,160,216,.3) !important;
    box-shadow: 0 0 25px rgba(29,160,216,.07) !important;
}

/* ── LESBARKEIT – Global Dark Theme ─────────────── */

/* Alle normalen Texte hell */
p, li, span, td, th, label, small { color: var(--text); }
p.text-muted, .text-muted         { color: var(--muted) !important; }

/* Überschriften hell */
h1, h2, h3, h4, h5, h6 { color: var(--text); }

/* Links hell */
a { color: var(--primary); }
a:hover { color: var(--neon); }

/* Bootstrap-Sections auf dunklem BG */
.bg-light { background: var(--dark2) !important; }

/* Formulare dunkel */
.form-control, .form-select {
    background: var(--dark3) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
.form-control::placeholder { color: var(--muted) !important; }
.form-control:focus, .form-select:focus {
    background: var(--dark3) !important;
    border-color: var(--primary) !important;
    color: var(--text) !important;
    box-shadow: 0 0 0 3px rgba(29,160,216,.15) !important;
}
.form-label { color: var(--text) !important; }

/* Alerts */
.alert-success {
    background: rgba(0,255,127,.08) !important;
    border-color: rgba(0,255,127,.25) !important;
    color: #7fffb0 !important;
}
.alert-danger {
    background: rgba(255,80,80,.08) !important;
    border-color: rgba(255,80,80,.25) !important;
    color: #ffaaaa !important;
}

/* Impressum / Datenschutz Fliesstext */
.legal-content p,
.legal-content li,
.legal-content h5 { color: var(--text); }

/* Service-List auf Unterseiten */
.service-list li { color: var(--muted); border-bottom-color: rgba(255,255,255,.06); }

/* Tabellen */
table { color: var(--text) !important; }

/* Why-Card auf Unterseiten */
.why-card { background: var(--dark3) !important; border-color: var(--border) !important; }
.why-card h5, .why-card p { color: var(--text) !important; }

/* Hosting-Pakete auf Leistungsseite */
.plan-card { background: var(--dark3) !important; }
.plan-card div { color: var(--text) !important; }

/* hr Trennlinien */
hr { border-color: var(--border) !important; opacity: 1 !important; }

/* Page-Hero Unterseiten Schrift */
.page-hero p { color: rgba(255,255,255,.72) !important; }

/* Feature-Streifen Border */
.border-bottom { border-color: rgba(29,160,216,.1) !important; }

/* ── Hero Spotlight (Maus-Licht) ─────────────── */
#hero-spotlight {
    mix-blend-mode: screen;  /* addiert Helligkeit auf das Bild */
    border-radius: 0;
}
/* Sicherstellen: content ist über spotlight */
.hero-content { z-index: 3 !important; }
.hero-slider::before { z-index: 4 !important; }  /* scan-lines drüber */


/* ═══════════════════════════════════════════
   PRINT STYLESHEET
   ═══════════════════════════════════════════ */
@media print {
    /* Navigation, Hero-Slider, CTA, Footer ausblenden */
    #mainNav,
    .hero-slider,
    .slider-dots,
    .cta-section,
    .stats-bar,
    #konami-overlay,
    .btn-hero-primary,
    .btn-hero-ghost,
    .navbar-toggler { display: none !important; }

    body {
        background: #fff !important;
        color: #111 !important;
        font-size: 12pt;
    }

    a { color: #000 !important; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

    .service-card,
    .fact-card,
    .service-drag-item,
    .leistung-item {
        border: 1px solid #ccc !important;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    section { padding: 1rem 0 !important; }
    .container { max-width: 100% !important; }

    footer .footer-brand,
    footer p { color: #333 !important; }
}