/* ==========================================================
   GHOSTLINE – PUBLIC EXPERIENCE
   Datei: style.css
   Version: 4.1

   DESIGN:
   - Dark Automotive Luxury
   - Purple Neon Atmosphere
   - Animated Fog & Light Orbs
   - Glassmorphism
   - Illuminated Borders
   - Cinematic Transitions
   - Responsive Layout

   Alle bestehenden V4-HTML- und JS-Funktionen bleiben
   kompatibel.
   ========================================================== */


/* ==========================================================
   01. FARBEN & DESIGNVARIABLEN
   ========================================================== */

:root {
    --bg: #08060d;
    --bg-deep: #050309;
    --surface: #151021;
    --surface-light: #23152f;

    --violet: #8f43da;
    --violet-deep: #512081;
    --neon: #b66bff;
    --neon-light: #d7a6ff;

    --ice: #a7d9ff;
    --white: #f8f3ff;
    --muted: #b8a9c9;

    --line: rgba(182, 107, 255, 0.23);
    --line-light: rgba(218, 193, 255, 0.5);

    --radius: 18px;

    --glass:
        linear-gradient(
            145deg,
            rgba(45, 26, 65, 0.7),
            rgba(12, 8, 22, 0.86)
        );

    --shadow:
        0 20px 65px rgba(0, 0, 0, 0.35);

    --glow:
        0 0 28px rgba(182, 107, 255, 0.2);

    font-family: "Segoe UI", Arial, sans-serif;
    color-scheme: dark;
}


/* ==========================================================
   02. RESET & ALLGEMEINES
   ========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    position: relative;
    isolation: isolate;

    margin: 0;
    min-height: 100vh;

    background: var(--bg);
    color: var(--white);

    line-height: 1.7;

    overflow-x: hidden;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

::selection {
    background: rgba(182, 107, 255, 0.45);
    color: white;
}

:focus-visible {
    outline: 2px solid var(--ice);
    outline-offset: 4px;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}

.wrap {
    width: min(1200px, 92%);
    margin-inline: auto;
}

.eyebrow {
    color: var(--neon);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;

    margin: 0 0 14px;

    text-shadow:
        0 0 20px rgba(182, 107, 255, 0.35);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    text-wrap: balance;
}

h1 span,
h2 span {
    color: var(--neon);

    text-shadow:
        0 0 34px rgba(182, 107, 255, 0.24);
}

h2 {
    font-size: clamp(29px, 3.8vw, 49px);
    font-weight: 900;

    letter-spacing: -1.2px;
    line-height: 1.15;

    margin-bottom: 34px;
}

h3 {
    line-height: 1.35;
}


/* ==========================================================
   03. ATMOSPHÄRISCHER HINTERGRUND
   ========================================================== */

.ambient {
    position: fixed;
    inset: 0;

    z-index: -2;

    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 16% 5%,
            rgba(88, 30, 137, 0.3),
            transparent 44%
        ),
        radial-gradient(
            ellipse at 86% 80%,
            rgba(63, 23, 103, 0.22),
            transparent 48%
        ),
        var(--bg-deep);
}

/* Feines geometrisches Raster */

.ambient::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(182, 107, 255, 0.042) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(182, 107, 255, 0.042) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 25%,
            #000 78%,
            transparent
        );

    animation:
        ghostGridTravel 35s linear infinite;
}

/* Schwebende Partikel */

.ambient::after {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(221, 184, 255, 0.65) 1px,
            transparent 1.5px
        ),
        radial-gradient(
            rgba(167, 217, 255, 0.45) 1px,
            transparent 1.5px
        );

    background-size:
        125px 125px,
        185px 185px;

    background-position:
        0 0,
        65px 45px;

    opacity: 0.2;

    animation:
        ghostParticleDrift 45s linear infinite;
}

/* Bewegliche Lichtquellen */

.ambient i {
    position: absolute;

    display: block;

    width: 42vw;
    height: 42vw;

    min-width: 320px;
    min-height: 320px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(166, 73, 241, 0.55),
            rgba(112, 45, 173, 0.22) 40%,
            transparent 72%
        );

    opacity: 0.55;

    filter: blur(75px);

    will-change: transform;

    animation:
        ghostOrbDrift 17s ease-in-out infinite alternate;
}

.ambient i:nth-child(1) {
    top: -18%;
    left: -15%;
}

.ambient i:nth-child(2) {
    right: -18%;
    top: 36%;

    animation-delay: -6s;

    background:
        radial-gradient(
            circle,
            rgba(115, 43, 205, 0.47),
            transparent 73%
        );
}

.ambient i:nth-child(3) {
    bottom: -25%;
    left: 20%;

    animation-delay: -11s;

    background:
        radial-gradient(
            circle,
            rgba(167, 217, 255, 0.18),
            rgba(143, 67, 218, 0.25) 45%,
            transparent 75%
        );
}


/* ==========================================================
   04. GLAS-NAVIGATION
   ========================================================== */

.site-header {
    position: sticky;
    top: 0;

    z-index: 30;

    background:
        linear-gradient(
            110deg,
            rgba(11, 7, 19, 0.88),
            rgba(30, 17, 45, 0.73),
            rgba(11, 7, 19, 0.88)
        );

    border-bottom:
        1px solid rgba(182, 107, 255, 0.23);

    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.16);
}

/* Leuchtende obere Kante */

.site-header::before {
    content: "";

    position: absolute;

    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(182, 107, 255, 0.9),
            rgba(167, 217, 255, 0.5),
            transparent
        );

    box-shadow:
        0 0 20px rgba(182, 107, 255, 0.5);
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 22px;

    min-height: 80px;
}

.brand {
    display: flex;
    align-items: center;

    gap: 12px;

    font-size: 21px;
    font-weight: 950;

    letter-spacing: 2.2px;

    white-space: nowrap;
}

.brand img {
    width: 55px;
    height: 55px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 15px rgba(182, 107, 255, 0.45)
        );

    animation:
        ghostLogoHover 6s ease-in-out infinite;
}

.brand span {
    color: var(--neon);

    text-shadow:
        0 0 25px rgba(182, 107, 255, 0.45);
}

.nav-links {
    display: flex;
    align-items: center;

    gap: clamp(10px, 1.5vw, 22px);

    font-size: 12px;
    font-weight: 750;
}

.nav-links a {
    position: relative;

    padding: 9px 0;

    color: #e9def4;

    transition:
        color 0.28s ease;
}

.nav-links a:not(.nav-login)::after {
    content: "";

    position: absolute;
    bottom: 2px;
    left: 0;

    width: 100%;
    height: 2px;

    border-radius: 2px;

    background:
        linear-gradient(
            90deg,
            var(--violet),
            var(--neon),
            var(--ice)
        );

    box-shadow:
        0 0 13px rgba(182, 107, 255, 0.5);

    transform: scaleX(0);
    transform-origin: left;

    transition:
        transform 0.3s ease;
}

.nav-links a:hover {
    color: var(--neon-light);
}

.nav-links a:not(.nav-login):hover::after {
    transform: scaleX(1);
}

.nav-login {
    padding: 10px 15px !important;

    border: 1px solid var(--line-light);
    border-radius: 10px;

    background:
        linear-gradient(
            115deg,
            rgba(95, 41, 147, 0.48),
            rgba(45, 24, 67, 0.65)
        );

    box-shadow:
        0 0 20px rgba(143, 67, 218, 0.1);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

.nav-login:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 28px rgba(143, 67, 218, 0.32);
}

.nav-toggle {
    display: none;

    padding: 6px 13px;

    font-size: 24px;
    color: white;

    border: 1px solid var(--line);
    border-radius: 10px;

    background:
        rgba(40, 23, 59, 0.76);
}


/* ==========================================================
   05. CINEMATIC HERO
   ========================================================== */

.hero {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;

    min-height: min(790px, 95vh);

    overflow: hidden;

    background-color: #100a19;
}

/* Eigenständige animierte Banner-Ebene */

.hero::before {
    content: "";

    position: absolute;
    inset: -45px;

    z-index: -2;

    background:
        url("images/banner.png")
        center / cover no-repeat;

    animation:
        ghostHeroZoom 24s ease-in-out infinite alternate;
}

/* Filmische Farbüberlagerung */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 6, 13, 0.97) 0%,
            rgba(11, 6, 19, 0.81) 38%,
            rgba(31, 11, 50, 0.4) 75%,
            rgba(8, 6, 13, 0.64)
        ),
        radial-gradient(
            ellipse at 70% 52%,
            rgba(143, 67, 218, 0.18),
            transparent 60%
        );
}

.hero-shade {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(8, 6, 13, 0.95) 100%
        );

    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;

    padding-block: 110px 125px;

    animation:
        ghostHeroEnter 1.15s cubic-bezier(.2,.8,.2,1) both;
}

.hero h1 {
    max-width: 950px;

    font-size: clamp(40px, 6.6vw, 86px);
    font-weight: 950;

    line-height: 1.07;
    letter-spacing: -2.5px;

    margin-bottom: 25px;

    text-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6);
}

.hero h1 span {
    background:
        linear-gradient(
            100deg,
            #b66bff,
            #f1d8ff 46%,
            #a7d9ff 68%,
            #b66bff
        );

    background-size: 220% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow: none;

    animation:
        ghostTextShimmer 9s ease-in-out infinite;
}

.hero-content > p:not(.eyebrow) {
    max-width: 585px;

    color: #dfd0ec;
    font-size: 15px;

    text-shadow: 0 2px 15px #000;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 14px;
    margin-top: 32px;
}


/* ==========================================================
   06. NEON-BUTTONS
   ========================================================== */

.btn {
    position: relative;
    isolation: isolate;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 49px;

    padding: 12px 25px;

    border: 1px solid rgba(222, 186, 255, 0.6);
    border-radius: 11px;

    color: white;
    font-size: 13px;
    font-weight: 800;

    background:
        linear-gradient(
            110deg,
            #5f2397,
            #9647d9,
            #b66bff,
            #7131aa
        );

    background-size: 240% 100%;

    box-shadow:
        0 8px 25px rgba(143, 67, 218, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    overflow: hidden;

    transition:
        transform 0.32s ease,
        box-shadow 0.32s ease;

    animation:
        ghostButtonShimmer 9s ease-in-out infinite;
}

.btn::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background:
        linear-gradient(
            105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.3) 48%,
            transparent 76%
        );

    transform: translateX(-130%);

    transition:
        transform 0.8s ease;
}

.btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 36px rgba(143, 67, 218, 0.4),
        0 0 25px rgba(182, 107, 255, 0.3);
}

.btn:hover::before {
    transform: translateX(130%);
}

.btn-ghost {
    background:
        linear-gradient(
            115deg,
            rgba(20, 12, 34, 0.72),
            rgba(54, 30, 77, 0.58)
        );

    border-color: var(--line-light);

    backdrop-filter: blur(12px);

    animation: none;
}


/* ==========================================================
   07. BETRIEBSSTATUS
   ========================================================== */

.status-strip {
    display: inline-flex;
    align-items: center;

    flex-wrap: wrap;
    gap: 12px;

    margin-top: 38px;

    padding: 12px 17px;

    border: 1px solid rgba(182, 107, 255, 0.3);
    border-radius: 999px;

    background: rgba(16, 10, 26, 0.66);

    backdrop-filter: blur(18px);

    box-shadow:
        0 0 26px rgba(143, 67, 218, 0.12);

    color: var(--muted);
    font-size: 12px;
}

.status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #92869d;

    box-shadow: 0 0 12px currentColor;

    animation:
        ghostStatusPulse 3.2s ease-in-out infinite;
}

.status-dot.open {
    background: #65ecc0;
}

.status-dot.closed {
    background: #ff7d9b;
}


/* ==========================================================
   08. SEKTIONEN & LICHTAKZENTE
   ========================================================== */

.section {
    position: relative;
    isolation: isolate;

    padding-block: 110px;

    overflow: hidden;
}

.section::before {
    content: "";

    position: absolute;

    left: -190px;
    top: -160px;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(143, 67, 218, 0.12),
            transparent 70%
        );

    filter: blur(45px);

    z-index: -1;
    pointer-events: none;
}

.section-dark {
    border-block:
        1px solid rgba(182, 107, 255, 0.13);

    background:
        radial-gradient(
            ellipse at 90% 10%,
            rgba(104, 39, 163, 0.15),
            transparent 48%
        ),
        linear-gradient(
            150deg,
            rgba(30, 17, 46, 0.78),
            rgba(9, 6, 16, 0.76)
        );
}

.section-dark::before {
    left: auto;
    right: -180px;
}

.split,
.form-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 38px;
    align-items: start;
}

.split p,
.form-layout > div > p {
    color: var(--muted);
}


/* ==========================================================
   09. GHOSTLINE LOGO-SHOWCASE
   ========================================================== */

.feature-visual {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 295px;

    gap: 14px;

    border: 1px solid var(--line-light);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(93, 40, 145, 0.64),
            rgba(23, 13, 37, 0.93) 68%
        );

    box-shadow:
        0 25px 65px rgba(0, 0, 0, 0.25),
        0 0 35px rgba(143, 67, 218, 0.12);

    overflow: hidden;
}

.feature-visual::before {
    content: "";

    position: absolute;
    inset: -45%;

    z-index: -1;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(182, 107, 255, 0.17),
            transparent,
            rgba(167, 217, 255, 0.13),
            transparent
        );

    animation:
        ghostRotate 20s linear infinite;
}

.feature-visual img {
    width: 170px;
    height: 170px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 25px rgba(182, 107, 255, 0.55)
        );

    animation:
        ghostLogoHover 6s ease-in-out infinite;
}

.feature-visual span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 4px;
}


/* ==========================================================
   10. GRID & GLASSMORPHISM
   ========================================================== */

.feature-grid,
.public-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.glass {
    position: relative;
    isolation: isolate;

    border: 1px solid var(--line);

    border-radius: var(--radius);

    background: var(--glass);

    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);

    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    overflow: hidden;
}

.glass::before {
    content: "";

    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(218, 193, 255, 0.55),
            transparent
        );

    pointer-events: none;
}

.feature,
.public-card {
    padding: 29px;

    transition:
        transform 0.4s cubic-bezier(.2,.8,.2,1),
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

.feature::after,
.public-card::after {
    content: "";

    position: absolute;

    width: 185px;
    height: 185px;

    right: -90px;
    top: -90px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(182, 107, 255, 0.22),
            transparent 72%
        );

    filter: blur(22px);

    pointer-events: none;

    transition:
        transform 0.5s ease,
        opacity 0.5s ease;

    opacity: 0.55;
}

.feature:hover,
.public-card:hover {
    transform: translateY(-9px);

    border-color:
        rgba(182, 107, 255, 0.68);

    box-shadow:
        0 27px 65px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(143, 67, 218, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.feature:hover::after,
.public-card:hover::after {
    opacity: 1;
    transform: scale(1.35);
}

.feature-icon {
    display: inline-flex;

    margin-bottom: 18px;

    font-size: 37px;
    color: var(--neon);

    filter:
        drop-shadow(
            0 0 16px rgba(182, 107, 255, 0.45)
        );
}

.feature h3,
.public-card h3 {
    font-size: 19px;
    font-weight: 800;

    margin-bottom: 12px;
}

.feature p,
.public-card p {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.8;
}

.public-card img {
    display: block;

    width: 100%;
    aspect-ratio: 16 / 10;

    object-fit: cover;

    margin-bottom: 18px;

    border-radius: 12px;

    background: #1a1027;

    transition:
        transform 0.6s ease,
        filter 0.5s ease;
}

.public-card:hover img {
    transform: scale(1.03);
    filter: saturate(1.1);
}

.public-card strong {
    display: inline-block;

    margin-top: 6px;

    color: #e8caff;
    font-size: 19px;

    text-shadow:
        0 0 18px rgba(182, 107, 255, 0.2);
}

.subtle,
.hint {
    color: var(--muted);
    font-size: 12px;
}

.empty {
    grid-column: 1 / -1;

    padding: 35px;

    color: var(--muted);
    text-align: center;

    border: 1px dashed rgba(182, 107, 255, 0.35);
    border-radius: 16px;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(143, 67, 218, 0.13),
            transparent 70%
        ),
        rgba(18, 12, 29, 0.55);
}


/* ==========================================================
   11. FORMULARE
   ========================================================== */

.form {
    display: grid;
    gap: 19px;

    padding: 30px;
}

.form label {
    display: grid;
    gap: 9px;

    color: #e2cffa;

    font-size: 12px;
    font-weight: 750;
}

.form input,
.form select,
.form textarea {
    width: 100%;
    min-width: 0;

    padding: 13px 15px;

    border: 1px solid var(--line);
    border-radius: 11px;

    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(7, 5, 12, 0.75),
            rgba(21, 11, 33, 0.85)
        );

    color: white;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
    border-color: var(--neon);

    box-shadow:
        0 0 0 3px rgba(182, 107, 255, 0.14),
        0 0 22px rgba(143, 67, 218, 0.13);

    background: rgba(18, 10, 30, 0.95);
}

.form textarea {
    resize: vertical;
}

.form-status {
    min-height: 22px;

    color: #a4f2d2;
    font-size: 12px;
}


/* ==========================================================
   12. KONTAKT & FOOTER
   ========================================================== */

.contact-details {
    padding: 32px;
}

.contact-details h3 {
    color: var(--neon-light);
}

.contact-details p {
    color: var(--muted);
    white-space: pre-line;
}

.site-footer {
    position: relative;

    border-top: 1px solid var(--line);

    background:
        linear-gradient(
            90deg,
            rgba(11, 7, 19, 0.94),
            rgba(33, 16, 51, 0.6),
            rgba(11, 7, 19, 0.94)
        );

    padding: 30px 0;

    color: var(--muted);
    font-size: 12px;
}

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 20%;
    right: 20%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--neon),
            transparent
        );
}

.footer-inner {
    display: flex;
    justify-content: space-between;

    gap: 22px;
}

.footer-inner a {
    transition: color 0.25s ease;
}

.footer-inner a:hover {
    color: var(--neon);
}

.top-link {
    position: fixed;

    right: 23px;
    bottom: 23px;

    z-index: 20;

    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;

    padding: 0;

    border: 1px solid var(--line-light);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #4f2279,
            #241235
        );

    box-shadow:
        0 0 23px rgba(143, 67, 218, 0.35);

    color: white;
    font-size: 24px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.top-link:hover {
    transform: translateY(-5px);

    box-shadow:
        0 0 35px rgba(182, 107, 255, 0.6);
}


/* ==========================================================
   13. KEYFRAME-ANIMATIONEN
   ========================================================== */

@keyframes ghostOrbDrift {
    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(70px, -45px)
            scale(1.16);
    }

    100% {
        transform:
            translate(-40px, 65px)
            scale(0.94);
    }
}

@keyframes ghostGridTravel {
    to {
        background-position:
            72px 144px,
            72px 144px;
    }
}

@keyframes ghostParticleDrift {
    to {
        background-position:
            125px 250px,
            -185px 185px;
    }
}

@keyframes ghostLogoHover {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes ghostHeroZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.12);
    }
}

@keyframes ghostHeroEnter {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ghostTextShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes ghostButtonShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes ghostStatusPulse {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 7px currentColor;
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 17px currentColor;
    }
}

@keyframes ghostRotate {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================
   14. RESPONSIVE DESIGN
   ========================================================== */

@media (max-width: 1080px) {
    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 17px 5%;

        background:
            linear-gradient(
                145deg,
                rgba(14, 9, 23, 0.98),
                rgba(34, 18, 50, 0.98)
            );

        border-bottom: 1px solid var(--line-light);

        box-shadow:
            0 25px 45px rgba(0, 0, 0, 0.4);
    }

    .nav-links.open {
        display: flex;

        animation:
            ghostHeroEnter 0.3s ease both;
    }

    .nav-links a {
        padding: 12px 14px;
    }

    .nav-login {
        margin-top: 8px;
    }
}

@media (max-width: 900px) {
    .feature-grid,
    .public-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .section {
        padding-block: 70px;
    }

    .split,
    .form-layout,
    .feature-grid,
    .public-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        min-height: 660px;
    }

    .hero-content {
        padding-block: 80px;
    }

    .hero h1 {
        letter-spacing: -1px;
    }

    .hero-actions {
        gap: 11px;
    }

    .btn {
        width: 100%;
    }

    .status-strip {
        border-radius: 14px;
    }

    .feature,
    .public-card {
        padding: 25px;
    }

    .form {
        padding: 23px;
    }

    .footer-inner {
        flex-direction: column;
    }
}

@media (max-width: 390px) {
    .brand {
        font-size: 17px;
    }

    .brand img {
        width: 48px;
        height: 48px;
    }

    .hero h1 {
        font-size: 36px;
    }
}


/* ==========================================================
   15. BARRIEREFREIHEIT
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================
   ENDE – GHOSTLINE STYLE.CSS V4.1
   ========================================================== */