/* Schriften lokal gehostet (DSGVO: keine Verbindung zu Google beim Seitenaufruf) */
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap;
    src: url('fonts/oswald-latin-var.woff2') format('woff2');
}

:root {
    --gold: #D4AF37;
    --gold-bright: #FFD700;
    --black: #030303;
    --dark: #0a0a0a;
    --glass: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text: #ffffff;
    --font-head: 'Oswald', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--black); color: var(--text); font-family: var(--font-body); overflow-x: hidden; }
body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }
.no-scroll { overflow: hidden; height: 100vh; }

/* ===========================================
   POLIER-REVEAL INTRO — Mikrofasertuch schrubbt den Dreck weg
   Ablauf: dreckiger Screen -> Tuch schrubbt (Canvas-Reveal) -> Marke erscheint -> Slide-out
   =========================================== */
#cinematic-intro {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: var(--black); z-index: 10000;
    overflow: hidden;
    transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Saubere Marke — liegt UNTER dem Dreck, wird durch Wischen sichtbar */
.intro-clean-scene {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #141414 0%, var(--black) 80%);
}
.intro-content-clean { text-align: center; padding: 0 2rem; }
.intro-eyebrow {
    font-family: var(--font-head); font-size: 0.85rem; letter-spacing: 6px;
    color: var(--gold); margin-bottom: 2rem;
}
.intro-logo-clean {
    height: 110px; margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 30px rgba(212,175,55,0.5));
}
.intro-headline {
    font-family: var(--font-head); font-size: clamp(2.8rem, 9vw, 6.5rem);
    line-height: 1; letter-spacing: -1px; text-transform: uppercase;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem;
    margin-bottom: 1.5rem;
}
.intro-headline .word { display: inline-block; }
.intro-divider {
    width: 60px; height: 2px; background: var(--gold);
    margin: 0 auto 1.5rem auto; box-shadow: 0 0 10px rgba(212,175,55,0.6);
}
.intro-tagline {
    font-family: var(--font-body); font-size: 1rem; letter-spacing: 3px;
    color: #aaa; font-weight: 300;
}
/* sanfte „Politur", sobald der Dreck weg ist */
.intro-clean-scene { transition: transform 0.6s ease; }
#cinematic-intro.revealed .intro-clean-scene { animation: introPolish 1.1s ease forwards; }
@keyframes introPolish {
    0%   { transform: scale(1.015); filter: brightness(0.88); }
    45%  { filter: brightness(1.1); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Licht-Sweep — ein Lichtreflex fegt nach der Politur über die Marke */
.intro-shine {
    position: absolute; inset: -10% -30%;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.07) 45%,
        rgba(255, 240, 190, 0.22) 49.5%,
        rgba(255, 255, 255, 0.32) 50.5%,
        rgba(255, 240, 190, 0.22) 51.5%,
        rgba(255, 255, 255, 0.07) 56%,
        transparent 62%);
    transform: translateX(-110%);
    pointer-events: none; opacity: 0;
}
#cinematic-intro.revealed .intro-shine {
    animation: shineSweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.12s forwards;
}
@keyframes shineSweep {
    0%   { transform: translateX(-110%); opacity: 1; }
    100% { transform: translateX(110%); opacity: 1; }
}

/* Logo & Marke glühen kurz auf, wenn der Lichtreflex darüberläuft */
#cinematic-intro.revealed .intro-logo-clean { animation: logoGleam 1.5s ease 0.25s; }
@keyframes logoGleam {
    0%   { filter: drop-shadow(0 0 30px rgba(212,175,55,0.5)); }
    40%  { filter: drop-shadow(0 0 60px rgba(255,225,130,0.95)) brightness(1.25); }
    100% { filter: drop-shadow(0 0 30px rgba(212,175,55,0.5)); }
}
#cinematic-intro.revealed .intro-divider { animation: dividerCharge 1.2s ease 0.35s; }
@keyframes dividerCharge {
    0%   { box-shadow: 0 0 10px rgba(212,175,55,0.6); }
    45%  { box-shadow: 0 0 26px rgba(255,225,130,1); transform: scaleX(1.5); }
    100% { box-shadow: 0 0 10px rgba(212,175,55,0.6); }
}

/* Mini-Erschütterung, wenn das Tuch aufsetzt */
#cinematic-intro.bump { animation: introBump 0.34s ease; }
@keyframes introBump {
    0%   { transform: translate(0, 0); }
    28%  { transform: translate(1px, 4px); }
    55%  { transform: translate(-2px, -2px); }
    80%  { transform: translate(1px, 1px); }
    100% { transform: translate(0, 0); }
}

/* Dreck-Canvas — wird vom Tuch pixelgenau weggeschrubbt */
.intro-dirt-canvas {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%; pointer-events: none;
}

/* FX-Canvas — Dreckkrümel, feuchte Wischspur, Glanz-Funkeln */
.intro-fx-canvas {
    position: absolute; inset: 0; z-index: 3;
    width: 100%; height: 100%; pointer-events: none;
}

/* Das Mikrofasertuch (Position/Drehung/Squash setzt JS) */
.scrub-cloth {
    position: absolute; top: 0; left: 0; z-index: 4;
    width: 160px; height: 154px;
    transform-origin: 50% 55%;
    pointer-events: none; opacity: 0; will-change: transform;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5));
    transition: opacity 0.3s ease;
}
.scrub-cloth.visible { opacity: 1; }

.intro-skip {
    position: absolute; bottom: 2rem; right: 2rem; z-index: 10;
    background: transparent; border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.6); font-family: var(--font-head); font-size: 0.8rem;
    letter-spacing: 2px; padding: 0.6rem 1.2rem; transition: 0.3s;
}
.intro-skip:hover { border-color: var(--gold); color: var(--gold); }

.slide-up-out { transform: translateY(-100vh) !important; }

/* ===========================================
   MICROFASER-TUCH CURSOR
   (Wrapper = Position via JS, SVG = Rotation/Animation via CSS)
   =========================================== */
.cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 5px; height: 5px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    box-shadow: 0 0 10px rgba(212,175,55,0.9);
    opacity: 0; /* erscheint erst bei der ersten Mausbewegung */
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

/* Wrapper: nur Position, kein anderer Transform-Konflikt */
.cursor-cloth-wrapper {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    opacity: 0; /* erscheint erst bei der ersten Mausbewegung */
    transition: opacity 0.2s ease;
}

/* SVG: nur Rotation, Scale und Animationen */
.cursor-cloth-svg {
    display: block;
    transform: translate(-50%, -50%) rotate(-18deg);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.25s ease;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
    transform-origin: center;
}

/* Hover: Tuch leicht größer + wischt */
body.hovering .cursor-cloth-svg {
    transform: translate(-50%, -50%) rotate(-18deg) scale(1.15);
    filter: drop-shadow(0 0 14px rgba(212,175,55,0.7));
    animation: clothWipe 0.7s ease-in-out infinite;
}
body.hovering .cursor-dot {
    width: 8px; height: 8px;
    background: var(--gold-bright);
}

@keyframes clothWipe {
    0%, 100% { transform: translate(-50%, -50%) rotate(-18deg) scale(1.15); }
    50%      { transform: translate(-50%, -50%) rotate(-2deg) scale(1.15); }
}

/* Klick: Tuch drückt zusammen */
body.clicking .cursor-cloth-svg {
    transform: translate(-50%, -50%) rotate(-18deg) scale(0.85) !important;
    animation: none !important;
}

/* Sparkle-Container */
.cursor-sparkles {
    position: fixed; top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    width: 0; height: 0;
}
.sparkle {
    position: fixed;
    width: 5px; height: 5px;
    background: var(--gold-bright);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 8px var(--gold-bright);
    animation: sparkleOut 0.6s ease-out forwards;
}
@keyframes sparkleOut {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); opacity: 0; }
}

/* Cursor verstecken auf Touch-Geräten */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .cursor-dot, .cursor-cloth-wrapper, .cursor-sparkles { display: none !important; }
    * { cursor: auto !important; }
}

/* --- Header --- */
.main-header { position: absolute; width: 100%; padding: 2rem 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; }
.main-logo { height: 80px; transition: 0.3s; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: #fff; font-family: var(--font-head); font-size: 0.9rem; letter-spacing: 2px; transition: 0.3s; }
.nav-links a:hover { color: var(--gold); }

/* --- Hero --- */
.hero-v4 {
    height: 100vh; min-height: 700px; display: flex; align-items: center; padding: 0 5%;
    background: radial-gradient(circle at center, rgba(30,30,30,1) 0%, var(--black) 100%);
    position: relative; overflow: hidden;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('images/megane-bg.jpg'); background-size: cover; background-position: center;
    opacity: 0.2; mix-blend-mode: luminosity;
}
.hero-content { position: relative; z-index: 10; margin-top: 5rem; }
.massive-text {
    font-family: var(--font-head); font-size: clamp(4rem, 12vw, 10rem);
    line-height: 0.9; margin: 0; text-transform: uppercase; letter-spacing: -2px;
}
.outline-text {
    color: transparent; -webkit-text-stroke: 2px var(--gold);
    transition: 0.5s;
}
.outline-text:hover { color: var(--gold); text-shadow: 0 0 30px rgba(212,175,55,0.4); }
.hero-subtitle { font-size: clamp(1rem, 2vw, 1.5rem); color: #aaa; margin: 2rem 0 3rem 0; font-weight: 300; letter-spacing: 1px; }

.hero-cta-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll-hint {
    position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.4); font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 3px;
}
.scroll-line {
    width: 1px; height: 50px; background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.6); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* Buttons */
.btn-hyper {
    display: inline-block; padding: 1.2rem 3rem; background: var(--gold); color: #000;
    font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 2px;
    text-decoration: none; transition: 0.4s; position: relative; border: none;
}
.btn-hyper:hover { background: #fff; box-shadow: 0 0 40px rgba(255,255,255,0.3); transform: translateY(-3px); }
.btn-ghost {
    display: inline-block; padding: 1.2rem 3rem; background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.3); font-family: var(--font-head);
    font-size: 1.2rem; letter-spacing: 2px; text-decoration: none; transition: 0.4s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.full-width { width: 100%; }

/* --- Section Headers (wiederverwendbar) --- */
.section-header {
    max-width: 1300px; margin: 0 auto 4rem auto; padding: 0 5%;
}
.section-header.centered { text-align: center; }
.section-label {
    display: inline-block; font-family: var(--font-head); font-size: 0.85rem;
    letter-spacing: 4px; color: var(--gold); margin-bottom: 1.5rem;
    border-left: 2px solid var(--gold); padding-left: 0.8rem;
}
.section-title {
    font-family: var(--font-head); font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1; letter-spacing: -1px; text-transform: uppercase;
}
.section-sub { color: #888; font-size: 1.1rem; margin-top: 1rem; max-width: 600px; font-weight: 300; }

/* --- VORHER/NACHHER --- */
.results-section { padding: 10rem 0 8rem 0; background: var(--dark); position: relative; }
.comparison-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem; max-width: 1300px; margin: 0 auto; padding: 0 5%;
}
.comparison-card {
    background: var(--glass); border: 1px solid var(--glass-border);
    overflow: hidden; transition: 0.4s;
}
.comparison-card:hover { border-color: rgba(212,175,55,0.3); transform: translateY(-5px); }

.ba-slider {
    position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden;
    user-select: none; background: #111;
}
.ba-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; pointer-events: none;
}
.ba-after-wrap {
    position: absolute; top: 0; left: 0; height: 100%; width: 50%;
    overflow: hidden; will-change: width;
}
.ba-after-wrap .ba-after { width: calc(100% / 0.5); max-width: none; }

.ba-handle {
    position: absolute; top: 0; left: 50%; height: 100%; width: 4px;
    background: var(--gold); transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(212,175,55,0.6); will-change: left;
    pointer-events: none;
}
.ba-handle-circle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 48px; height: 48px;
    background: var(--gold); border-radius: 50%; display: flex;
    align-items: center; justify-content: center; color: #000;
    font-family: var(--font-head); font-weight: 700; font-size: 1.2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.ba-label {
    position: absolute; top: 1rem; padding: 0.4rem 0.8rem;
    font-family: var(--font-head); font-size: 0.75rem; letter-spacing: 2px;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
    color: #fff; pointer-events: none;
}
.ba-label-before { left: 1rem; }
.ba-label-after { right: 1rem; color: var(--gold); }

.comparison-meta { padding: 1.5rem; border-top: 1px solid var(--glass-border); }
.comparison-meta h4 { font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 2px; margin-bottom: 0.3rem; }
.comparison-meta p { color: #888; font-size: 0.9rem; font-weight: 300; }

/* --- Kollektionen (Glassmorphism) --- */
.collections-v4 { padding: 10rem 5%; position: relative; background: var(--black); overflow: hidden; }
.scrolling-text-container { position: absolute; top: 5%; left: 0; width: 100%; white-space: nowrap; opacity: 0.05; pointer-events: none; }
.bg-scrolling-text { font-family: var(--font-head); font-size: 15vw; animation: scrollText 20s linear infinite; }
@keyframes scrollText { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.card-grid-v4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1300px; margin: 0 auto; position: relative; z-index: 2; }
.glass-card {
    background: var(--glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border); padding: 3rem 2.5rem; position: relative;
    transition: 0.4s; display: flex; flex-direction: column; overflow: hidden;
}
.glass-card:hover { transform: translateY(-10px); background: rgba(255,255,255,0.05); border-color: rgba(212,175,55,0.3); }
.card-glow-top { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: 0.5s; }
.glass-card:hover .card-glow-top { transform: scaleX(1); box-shadow: 0 0 20px var(--gold); }

.paket-nr { font-family: var(--font-head); font-size: 1.2rem; color: #555; }
.glass-card h3 { font-family: var(--font-head); font-size: 2rem; margin: 0.5rem 0; letter-spacing: 1px; }
.price-tag {
    font-family: var(--font-head); font-size: 3rem; font-weight: 700;
    margin-bottom: 0.2rem; display: flex; align-items: baseline; gap: 0.4rem;
}
.price-sub { font-size: 0.9rem; color: #777; font-weight: 300; letter-spacing: 2px; }
.price-meta { font-size: 0.85rem; color: #666; margin-bottom: 1rem; letter-spacing: 1px; }
.card-divider { width: 40px; height: 2px; background: #333; margin-bottom: 2rem; }
.clean-list { list-style: none; flex-grow: 1; }
.clean-list li { margin-bottom: 0.8rem; color: #ccc; font-weight: 300; font-size: 0.95rem; }

.premium-card { border-color: rgba(212,175,55,0.25); background: rgba(212,175,55,0.02); }
.gold { color: var(--gold); }

.price-disclaimer {
    max-width: 1300px; margin: 3rem auto 0 auto; padding: 0 5%;
    color: #666; font-size: 0.85rem; text-align: center; font-style: italic;
}

/* --- ADD-ONS / EINZELLEISTUNGEN --- */
.addons-wrapper {
    max-width: 1300px; margin: 8rem auto 0 auto; padding: 0 5%;
    position: relative; z-index: 2;
}
.addons-header { margin-bottom: 3rem !important; padding: 0 !important; }
.addons-title { font-size: clamp(2rem, 4.5vw, 3.5rem) !important; }
.centered-sub { margin-left: auto; margin-right: auto; }

.addons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

.addon-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 1.8rem 1.5rem;
    display: flex; flex-direction: column;
    gap: 0.6rem;
    position: relative; overflow: hidden;
    transition: 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.addon-card::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0; transition: 0.4s;
}
.addon-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.03);
}
.addon-card:hover::before { opacity: 1; }
.addon-card:hover .addon-icon { color: var(--gold); transform: scale(1.05); }

.addon-icon {
    width: 38px; height: 38px;
    color: #888;
    margin-bottom: 0.3rem;
    transition: 0.3s;
}
.addon-icon svg { width: 100%; height: 100%; }

.addon-card h4 {
    font-family: var(--font-head);
    font-size: 1rem;
    letter-spacing: 1.5px;
    line-height: 1.3;
    color: #fff;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.addon-tag {
    font-size: 0.65rem;
    background: rgba(212,175,55,0.15);
    color: var(--gold);
    padding: 2px 8px;
    letter-spacing: 1.5px;
    font-weight: 400;
    border: 1px solid rgba(212,175,55,0.25);
}
.addon-desc {
    color: #999; font-size: 0.88rem;
    font-weight: 300; line-height: 1.5;
    flex-grow: 1;
}
.addon-price {
    font-family: var(--font-head);
    font-size: 1.8rem; font-weight: 700;
    color: var(--gold);
    margin-top: 0.5rem;
    display: flex; align-items: baseline; gap: 0.4rem;
}
.addon-price .price-sub {
    font-size: 0.7rem; color: #777;
    font-weight: 300; letter-spacing: 2px;
}
.addon-unit {
    font-size: 0.75rem; color: #777;
    font-weight: 300; letter-spacing: 1px;
    margin-left: 0.2rem;
}

.addon-cta {
    margin-top: 3rem; text-align: center;
    color: #888; font-size: 0.95rem;
    font-weight: 300;
}

@media (max-width: 768px) {
    .addons-wrapper { margin-top: 5rem; }
    .addons-grid { grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .addon-card { padding: 1.3rem 1rem; }
    .addon-card h4 { font-size: 0.85rem; letter-spacing: 1px; }
    .addon-desc { font-size: 0.8rem; }
    .addon-price { font-size: 1.4rem; }
    .addon-icon { width: 32px; height: 32px; }
}
@media (max-width: 420px) {
    .addons-grid { grid-template-columns: 1fr; }
}

/* --- FAQ --- */
.faq-section { padding: 10rem 5%; background: var(--dark); }
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item {
    border-bottom: 1px solid var(--glass-border); transition: 0.3s;
}
.faq-item summary {
    list-style: none; padding: 1.8rem 0;
    font-family: var(--font-head); font-size: 1.3rem; letter-spacing: 1px;
    display: flex; justify-content: space-between; align-items: center;
    transition: 0.3s; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; font-size: 2rem; color: var(--gold); font-weight: 300;
    transition: transform 0.3s ease; line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--gold); }
.faq-content {
    padding: 0 0 2rem 0; color: #aaa; line-height: 1.7; font-weight: 300;
    max-width: 750px;
}
.faq-content p { font-size: 1rem; }
.faq-content strong { color: #fff; }
.inline-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.3); transition: 0.3s; }
.inline-link:hover { border-bottom-color: var(--gold); }

/* --- Formular --- */
.contact-v4 { padding: 10rem 5%; background: var(--black); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; max-width: 1200px; margin: 0 auto; align-items: center; }
.contact-info .section-label { margin-bottom: 1.5rem; }
.contact-info h2 { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 5rem); line-height: 1.1; margin-bottom: 2rem; }
.contact-info p { color: #888; font-size: 1.1rem; line-height: 1.8; }
.contact-direct { margin-top: 1.5rem; font-size: 1rem !important; }

.hyper-form { display: flex; flex-direction: column; gap: 1.5rem; }
.input-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.hyper-form input, .hyper-form textarea, .hyper-form select {
    background: transparent; border: none; border-bottom: 1px solid #333;
    padding: 1rem 0; color: #fff; font-family: var(--font-body); font-size: 1rem; transition: 0.3s;
}
.hyper-form input:focus, .hyper-form textarea:focus, .hyper-form select:focus { outline: none; border-bottom-color: var(--gold); }
.hyper-form select {
    appearance: none; -webkit-appearance: none; border-radius: 0; padding-right: 2rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%;
    background-size: 6px 6px; background-repeat: no-repeat;
}
.hyper-form select:invalid { color: #757575; }
.hyper-form select option { background: var(--dark); color: #fff; }

/* Honeypot — für Menschen unsichtbar, für Bots klickbar */
.hp-field {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; opacity: 0;
}

.form-consent { font-size: 0.8rem; color: #666; line-height: 1.5; margin-top: -0.5rem; }
.form-response { margin-top: 1.5rem; font-family: var(--font-head); font-size: 1.2rem; letter-spacing: 1px; }
.success { color: var(--gold); }
.error { color: #ff3333; }
.form-response .success, .form-response .error {
    display: inline-block;
    animation: responseIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
@keyframes responseIn {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Submit-Button: Sende- & Polier-Choreografie ---
   Senden:  Lichtstreifen wandert in Schleife über den Button
   Erfolg:  Mini-Mikrofasertuch wischt über den Button und poliert den
            weißen "GESENDET ✓"-Zustand frei, danach Funkel-Burst + Ring
   Fehler:  Button blitzt rot, Formular schüttelt den Kopf */
#submitBtn {
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
}
#submitBtn .btn-text { position: relative; z-index: 2; }

/* Senden: Button pulsiert, ein Lichtstreifen wandert in Schleife darüber */
#submitBtn.sending, #submitBtn.polishing, #submitBtn.sent { pointer-events: none; }
#submitBtn.sending { animation: btnBreath 1.2s ease-in-out infinite; }
#submitBtn.sending::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: btnSheen 1.1s ease-in-out infinite;
}
@keyframes btnSheen { to { transform: translateX(100%); } }
@keyframes btnBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.985); }
}
#submitBtn.sending .btn-text::after {
    content: '…';
    display: inline-block; width: 0; overflow: hidden;
    vertical-align: bottom;
    animation: btnDots 1.2s steps(4, end) infinite;
}
@keyframes btnDots { to { width: 1.1em; } }

/* Weißer "freipolierter" Zustand: liegt über dem Gold und wird vom
   Mini-Tuch synchron aufgedeckt (Kante bleibt unter dem Tuch) */
#submitBtn .btn-polish-layer {
    position: absolute; inset: 0; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.6em;
    background: linear-gradient(180deg, #ffffff, #ececec);
    color: #000;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.45s ease;
}
#submitBtn .btn-check-done {
    width: 1.15em; height: 1.15em; flex: 0 0 auto;
    stroke-dasharray: 26; stroke-dashoffset: 26;
}
#submitBtn.polishing .btn-polish-layer {
    animation: btnPolishReveal 1s cubic-bezier(0.6, 0.05, 0.4, 0.95) forwards;
}
@keyframes btnPolishReveal { to { clip-path: inset(0 0 0 0); } }
#submitBtn.polishing .btn-check-done { animation: checkDraw 0.45s ease 0.75s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

/* Das Mini-Tuch: wischt einmal quer über den Button (Schrubb-Wobble),
   hebt am rechten Rand ab. Gleiche Dauer/Easing wie der Reveal ->
   die Aufdeck-Kante bleibt konstant unter dem Tuch. */
#submitBtn .btn-cloth {
    position: absolute; z-index: 4;
    width: 21%; aspect-ratio: 260 / 250; height: auto;
    left: -25%; top: 50%;
    transform: translateY(-50%);
    opacity: 0; pointer-events: none;
}
#submitBtn.polishing .btn-cloth {
    animation: btnClothWipe 1s cubic-bezier(0.6, 0.05, 0.4, 0.95) forwards;
}
@keyframes btnClothWipe {
    0%   { left: -10%; transform: translateY(-58%) rotate(-10deg); opacity: 0; }
    6%   { opacity: 1; }
    18%  { transform: translateY(-40%) rotate(5deg) scale(1, 0.94); }
    36%  { transform: translateY(-60%) rotate(-7deg); }
    54%  { transform: translateY(-40%) rotate(6deg) scale(1, 0.95); }
    72%  { transform: translateY(-58%) rotate(-5deg); }
    86%  { transform: translateY(-48%) rotate(3deg); opacity: 1; }
    100% { left: 90%; transform: translateY(-150%) rotate(18deg); opacity: 0; }
}

/* Endzustand nach der Politur: weiß bleibt, Häkchen bleibt, Glow */
#submitBtn.sent { box-shadow: 0 0 44px rgba(255,255,255,0.4); }
#submitBtn.sent .btn-polish-layer { clip-path: inset(0 0 0 0); }
#submitBtn.sent .btn-check-done { stroke-dashoffset: 0; }

/* Fehler: roter Warnblitz + Kopfschütteln */
#submitBtn.error-flash { animation: btnErrorFlash 0.6s ease; }
@keyframes btnErrorFlash {
    0%, 100% { background-color: var(--gold); }
    35%      { background-color: #d63031; box-shadow: 0 0 34px rgba(255,51,51,0.55); }
}
.hyper-form.shake { animation: formShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes formShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

/* Funkel-Burst nach der Politur: Schockwellen-Ring + große Glanz-Sterne */
.burst-ring {
    position: fixed; pointer-events: none; z-index: 10002;
    border: 2px solid rgba(255, 215, 0, 0.85);
    box-shadow: 0 0 24px rgba(255,215,0,0.5), inset 0 0 18px rgba(255,215,0,0.3);
    transform: translate(-50%, -50%);
    animation: burstRing 0.7s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
@keyframes burstRing {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.45, 2.4); opacity: 0; }
}
.burst-star {
    position: fixed; pointer-events: none; z-index: 10002;
    width: 28px; height: 28px;
    animation: burstStar 0.85s ease-out forwards;
}
.burst-star::before, .burst-star::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    background: linear-gradient(180deg, transparent, #FFD700 35%, #fff7d0 50%, #FFD700 65%, transparent);
    box-shadow: 0 0 10px rgba(255,215,0,0.9);
}
.burst-star::before { width: 2px; height: 100%; transform: translate(-50%, -50%); }
.burst-star::after  { width: 100%; height: 2px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, #FFD700 35%, #fff7d0 50%, #FFD700 65%, transparent); }
@keyframes burstStar {
    0%   { transform: scale(0) rotate(0deg); opacity: 0; }
    25%  { opacity: 1; }
    60%  { transform: scale(1.2) rotate(22deg); opacity: 1; }
    100% { transform: scale(0.15) rotate(45deg); opacity: 0; }
}

/* --- Footer --- */
.footer-v4 { padding: 4rem 5%; text-align: center; border-top: 1px solid #111; margin-top: 5rem; }
.footer-logo { height: 60px; margin-bottom: 2rem; opacity: 0.5; transition: 0.3s; }
.footer-logo:hover { opacity: 1; }
.legal-links { margin-top: 1.5rem; }
.legal-links a { color: #666; text-decoration: none; margin: 0 1rem; font-size: 0.9rem; transition: 0.3s; }
.legal-links a:hover { color: var(--gold); }

/* Scroll Animationen */
.scroll-reveal { opacity: 0; transform: translateY(40px); transition: 0.8s cubic-bezier(0.23, 1, 0.32, 1); }
.scroll-reveal.in-view { opacity: 1; transform: translateY(0); }

/* --- Subpage (Impressum / Datenschutz) --- */
.subpage-content {
    max-width: 800px; margin: 0 auto; padding: 12rem 5% 6rem 5%;
}
.subpage-content h1 {
    font-family: var(--font-head); font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 3rem; letter-spacing: 1px;
}
.subpage-content h2 {
    font-family: var(--font-head); font-size: 1.5rem; color: var(--gold);
    margin: 2.5rem 0 1rem 0; letter-spacing: 1px;
}
.subpage-content p { color: #aaa; line-height: 1.8; margin-bottom: 1rem; font-weight: 300; }
.subpage-content a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.3); }
.subpage-content strong { color: #ddd; font-weight: 600; }
.legal-list { list-style: none; margin: 0 0 1.2rem 0; padding: 0; }
.legal-list li { color: #aaa; line-height: 1.7; font-weight: 300; padding-left: 1.4rem; position: relative; margin-bottom: 0.35rem; }
.legal-list li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 0.6rem; height: 1px; background: var(--gold); }
.legal-stand { margin-top: 3rem; font-size: 0.85rem; color: #555 !important; }
.footer-v2 {
    padding: 2rem; text-align: center; border-top: 1px solid #111;
    color: #555; font-size: 0.85rem;
}

/* Mobile Anpassungen */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
    .input-group { grid-template-columns: 1fr; }
    .hero-scroll-hint { display: none; }
}
@media (max-width: 768px) {
    .main-header { flex-direction: column; gap: 1rem; padding: 1.5rem; }
    .nav-links { gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
    .nav-links a { font-size: 0.75rem; letter-spacing: 1px; }
    .glass-card { padding: 2rem 1.5rem; }
    .results-section, .collections-v4, .faq-section, .contact-v4 { padding-top: 6rem; padding-bottom: 6rem; }
    .ba-handle-circle { width: 38px; height: 38px; font-size: 1rem; }
    .faq-item summary { font-size: 1.05rem; padding: 1.4rem 0; }
    .hero-cta-group { flex-direction: column; align-items: flex-start; }
    .hero-cta-group .btn-hyper, .hero-cta-group .btn-ghost { width: 100%; text-align: center; }
}

/* Chrome Autofill Fix für den Dark Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
    border-bottom: 1px solid var(--gold);
}

/* ===========================================
   Barrierefreiheit: Bewegung reduzieren
   (respektiert die System-Einstellung des Nutzers)
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .scroll-reveal { opacity: 1 !important; transform: none !important; }
}