/* ============================================
   Felix Trautwein Engineering — Custom Styles
   Modern, Unique, Technically Impressive
   ============================================ */

/* CSS Custom Properties */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --dark-gradient: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
    --glow-primary: rgba(102, 126, 234, 0.4);
    --glow-secondary: rgba(240, 147, 251, 0.4);
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.18);
    --text-gradient: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
    --font-primary: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============ TYPOGRAPHY ============ */
body {
    font-family: var(--font-primary);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }

.lead {
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* ============ LEGAL CONTENT ============ */
.legal-content {
    line-height: 1.75;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.legal-content h3,
.legal-content h4,
.legal-content h5 {
    line-height: 1.3;
}

.legal-content h3 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

.legal-content h4 {
    margin-top: 1.6rem;
    margin-bottom: 0.8rem;
}

.legal-content h5 {
    margin-top: 1.1rem;
    margin-bottom: 0.65rem;
}

.legal-content p,
.legal-content ul {
    margin-bottom: 1rem;
}

.legal-content ul {
    padding-left: 1.15rem;
}

.legal-content li + li {
    margin-top: 0.5rem;
}

@media (max-width: 767.98px) {
    .legal-content {
        line-height: 1.65;
        font-size: 0.96rem;
    }

    .legal-content h3 {
        font-size: 1.35rem;
        margin-top: 1.8rem;
    }

    .legal-content h4 {
        font-size: 1.12rem;
        margin-top: 1.35rem;
    }

    .legal-content h5 {
        font-size: 1rem;
        margin-top: 0.95rem;
    }
}

/* ============ UTILITY CLASSES ============ */
.top-buffer-lg { margin-top: 70px; }
.top-buffer-md { margin-top: 50px; }
.top-buffer-sm { margin-top: 20px; }

.language-select {
    border: 1px solid rgba(102, 126, 234, 0.25);
    background-color: transparent;
    cursor: pointer;
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    line-height: 1;
    transition: transform 0.3s ease;
}
.language-select:hover { transform: scale(1.1); }

/* ============ ANIMATED GRADIENT TEXT ============ */
.text-gradient-animate {
    background: var(--text-gradient) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: gradientShift 4s ease infinite;
}

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

/* ============ GLASSMORPHISM NAVIGATION ============ */
.navbar.blur {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.blur:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

.brand-controls {
    min-height: 48px;
}

.nav-utility-controls {
    min-height: 48px;
    gap: 0.35rem;
}

.language-form {
    margin: 0;
}

@media (max-width: 991.98px) {
    .nav-utility-controls .language-form {
        order: 1;
    }

    .nav-utility-controls .navbar-toggler {
        order: 2;
    }
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.brand-mark img {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.navbar-nav .nav-link {
    font-weight: 600;
    font-size: 1.05rem;
    position: relative;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-gradient);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
}

.navbar-nav .nav-link:hover::after {
    width: 80%;
}

.navbar-nav .nav-link p {
    margin: 0;
    font-weight: 600;
}

/* ============ ENHANCED LINK STYLES ============ */
a:hover, a:focus {
    color: #667eea;
    text-shadow: 0 0 20px var(--glow-primary);
}

/* Keep small CTA labels sharp on hover/focus. */
.btn:hover,
.btn:focus {
    text-shadow: none !important;
}

/* ============ PARALLAX HEADER ENHANCEMENT ============ */
.page-header {
    position: relative;
    overflow: hidden;
}

/* Hero background served as WebP, with a smaller variant for phones. */
.page-header.hero-office {
    background-image: url("../img/office-dark.cc1677723963.webp");
}

@media (max-width: 767.98px) {
    .page-header.hero-office {
        background-image: url("../img/office-dark-mobile.ba5a82b3d990.webp");
    }
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dark-gradient);
    opacity: 0.7;
    z-index: 1;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.agb .page-header,
.impressum .page-header,
.privacy .page-header {
    padding-top: clamp(6rem, 12vh, 8.5rem);
}

/* The navbar is absolutely positioned over the hero, so reserve space at the
   top to keep the hero heading and subtitle from being covered, especially on
   mobile where the header is short. */
.about-us .page-header {
    padding-top: clamp(7rem, 18vh, 9rem);
    padding-bottom: clamp(2.5rem, 8vh, 4rem);
}

/* Animated floating particles in header */
.page-header .floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.floating-shapes .shape {
    position: absolute;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35), rgba(240, 147, 251, 0.2));
    border-radius: 50%;
    animation: float 15s infinite ease-in-out;
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.3);
}

.floating-shapes .shape:nth-child(1) { width: 100px; height: 100px; top: 10%; left: 10%; animation-delay: 0s; }
.floating-shapes .shape:nth-child(2) { width: 150px; height: 150px; top: 70%; left: 80%; animation-delay: -5s; }
.floating-shapes .shape:nth-child(3) { width: 80px; height: 80px; top: 40%; left: 60%; animation-delay: -10s; }
.floating-shapes .shape:nth-child(4) { width: 120px; height: 120px; top: 80%; left: 20%; animation-delay: -15s; }
.floating-shapes .shape:nth-child(5) { width: 70px; height: 70px; top: 20%; left: 75%; animation-delay: -7s; }
.floating-shapes .shape:nth-child(6) { width: 110px; height: 110px; top: 60%; left: 40%; animation-delay: -12s; }

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.7; }
    25% { transform: translate(40px, -40px) rotate(90deg) scale(1.15); opacity: 0.9; }
    50% { transform: translate(0, -80px) rotate(180deg) scale(1); opacity: 0.7; }
    75% { transform: translate(-40px, -40px) rotate(270deg) scale(0.85); opacity: 0.9; }
}

/* ============ HERO TITLE EFFECTS ============ */
/* Animate transform only so the LCP text paints immediately. */
.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    animation: titleReveal 0.8s ease-out forwards;
}

.hero-subtitle {
    animation: subtitleReveal 0.8s ease-out forwards;
}

@keyframes titleReveal {
    from { transform: translateY(30px); }
    to { transform: translateY(0); }
}

@keyframes subtitleReveal {
    from { transform: translateY(20px); }
    to { transform: translateY(0); }
}

/* ============ ENHANCED WAVE ANIMATION ============ */
.waves {
    height: 100px;
}

.moving-waves > use {
    animation: waveMotion 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.moving-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.moving-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.moving-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.moving-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }
.moving-waves > use:nth-child(5) { animation-delay: -6s; animation-duration: 17s; }
.moving-waves > use:nth-child(6) { animation-delay: -7s; animation-duration: 25s; }

@keyframes waveMotion {
    0% { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}

/* ============ CARD EFFECTS ============ */
.card {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: none;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: all 0.6s ease;
    z-index: 1;
}

.card:hover::before {
    left: 100%;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 15px 35px rgba(102, 126, 234, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Card Glow Effect */
.card.glow-effect {
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.card.glow-effect:hover {
    border-color: rgba(102, 126, 234, 0.3);
}

/* Sign-in / sign-up plain card: keep edge visible at rest */
.sign-in-illustration .card.card-plain,
.sign-up-illustration .card.card-plain {
    background-color: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.sign-in-illustration .card.card-plain:hover,
.sign-up-illustration .card.card-plain:hover {
    border-color: rgba(102, 126, 234, 0.3);
}

/* ============ ANIMATED ICON CONTAINERS ============ */
.icon-shape {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.icon-shape::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.4s ease;
    z-index: -1;
}

.card:hover .icon-shape {
    transform: scale(1.15) rotate(5deg);
}

.card:hover .icon-shape::before {
    opacity: 0.6;
}

/* Icon bounce animation */
.icon-shape i {
    transition: transform 0.3s ease;
}

.probefahrt-logo-icon {
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.probefahrt-favicon {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.card:hover .icon-shape i {
    animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ============ BUTTON ENHANCEMENTS ============ */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.2),
        0 0 40px var(--glow-primary);
}

.btn:active {
    transform: translateY(-1px);
}

/* Magnetic button effect handled by JS */
.btn-magnetic {
    transition: transform 0.2s ease-out;
}

/* ============ SECTION TRANSITIONS ============ */
section {
    position: relative;
}

.js .section-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children animation */
.js .stagger-reveal > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-reveal.revealed > *:nth-child(1) { transition-delay: 0s; }
.stagger-reveal.revealed > *:nth-child(2) { transition-delay: 0.15s; }
.stagger-reveal.revealed > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-reveal.revealed > *:nth-child(4) { transition-delay: 0.45s; }
.stagger-reveal.revealed > *:nth-child(5) { transition-delay: 0.6s; }
.stagger-reveal.revealed > *:nth-child(6) { transition-delay: 0.75s; }

.stagger-reveal.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* ============ PROFILE CARD SPECIAL ============ */
.card-profile {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.card-profile:hover {
    border-color: rgba(102, 126, 234, 0.3);
}

.card-profile img {
    transition: all 0.5s ease;
    filter: grayscale(20%);
}

.card-profile:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* ============ GRADIENT BACKGROUNDS ============ */
.bg-gradient-dark {
    background: var(--dark-gradient) !important;
    position: relative;
}

/* Animated gradient mesh background */
.gradient-mesh {
    position: relative;
    overflow: hidden;
}

.gradient-mesh::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(240, 147, 251, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(79, 172, 254, 0.2) 0%, transparent 40%);
    animation: meshMove 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes meshMove {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(120deg); }
    66% { transform: translate(-20px, 20px) rotate(240deg); }
}

/* ============ ANIMATED DIVIDERS ============ */
.animated-divider {
    height: 4px;
    background: var(--primary-gradient);
    background-size: 200% 100%;
    animation: dividerSlide 3s ease infinite;
    border-radius: 2px;
}

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

/* ============ FOOTER ENHANCEMENT ============ */
footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.5), transparent);
}

footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-right: 0.5rem;
}

footer .social-icon:hover {
    transform: translateY(-5px) scale(1.1);
    background: var(--primary-gradient);
    box-shadow: 0 10px 30px var(--glow-primary);
}

footer .social-icon:hover i {
    color: white !important;
}

footer .footer-legal-block {
    width: 200px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (min-width: 768px) {
    footer .footer-legal-block {
        position: static;
    }
}

footer .footer-legal-block .nav {
    align-items: center;
}

footer .footer-legal-block .nav-link {
    padding-left: 0;
    padding-right: 0;
}

/* ============ SMOOTH SCROLL ============ */
html {
    scroll-behavior: smooth;
}

/* ============ SELECTION STYLING ============ */
::selection {
    background: rgba(102, 126, 234, 0.3);
    color: inherit;
}

/* ============ CURSOR GLOW EFFECT ============ */
.cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, rgba(240, 147, 251, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:hover .cursor-glow {
    opacity: 1;
}

/* ============ RESPONSIVE ADJUSTMENTS ============ */
@media (max-width: 768px) {
    .floating-shapes .shape {
        display: none;
    }

    .hero-title {
        font-size: 2rem;
    }

    .brand-mark img {
        width: 42px;
        height: 42px;
    }

    .language-select {
        padding: 0.15rem 0.35rem;
    }

    .cursor-glow {
        display: none;
    }
}

/* ============ LEARN MORE ARROW LINK ============ */
.learn-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #667eea;
    position: relative;
    padding-bottom: 2px;
}

.learn-more-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--primary-gradient);
    transition: width 0.35s ease;
    border-radius: 1px;
}

.learn-more-link:hover {
    color: #764ba2;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.learn-more-link:hover::before {
    width: 100%;
}

/* ============ BADGE STYLES ============ */
.badge-outline {
    background-color: transparent !important;
    border: 1.5px solid;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: #667eea;
    border-color: #667eea;
    transition: all 0.3s ease;
    display: inline-block;
}

.badge-outline:hover {
    background-color: rgba(102, 126, 234, 0.08);
    border-color: #764ba2;
    color: #764ba2;
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Never leave reveal content hidden when motion is disabled. */
    .section-reveal,
    .stagger-reveal > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .cursor-glow { display: none; }
}