/* --- Variables & Colors --- */
:root {
    --bg-dark: #050507;        /* Fast Schwarz */
    --bg-card: rgba(20, 20, 25, 0.6); /* Transparenter dunkler Ton */
    
    /* THEME COLORS */
    --primary-purple: #8b5cf6; /* Kräftiges Lila */
    --primary-glow: rgba(139, 92, 246, 0.4);
    
    --accent-green: #10b981;   /* Helles Erfolgs-Grün */
    --accent-green-glow: rgba(16, 185, 129, 0.3);
    
    --text-main: #ffffff;
    --text-muted: #94a3b8;
    
    --font-main: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow-x: hidden;
    position: relative;
}

/* --- Ambient Lighting (Background Glow) --- */
.ambient-light {
    position: fixed;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.5;
    animation: pulseLight 8s infinite alternate;
}

.light-purple-top {
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary-purple), transparent 70%);
}

.light-green-bottom {
    bottom: -10%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--accent-green), transparent 70%);
    animation-delay: 2s;
}

@keyframes pulseLight {
    0% { opacity: 0.3; transform: scale(1); }
    100% { opacity: 0.6; transform: scale(1.1); }
}

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.center { text-align: center; }

/* --- Typography --- */
h1 { font-size: 3.5rem; line-height: 1.1; font-weight: 800; margin-bottom: 20px; }
h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 15px; }
p { color: var(--text-muted); line-height: 1.6; }

.text-gradient {
    background: linear-gradient(to right, var(--primary-purple), #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-green {
    background: linear-gradient(to right, var(--accent-green), #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-purple { color: var(--primary-purple); }

/* --- Glassmorphism Cards --- */
.glass-effect, .glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card {
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s, border-color 0.3s;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-purple);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}

/* --- Buttons --- */
.btn {
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: var(--primary-purple);
    color: white;
    box-shadow: 0 0 20px var(--primary-glow);
}
.btn-primary:hover { background: #7c3aed; box-shadow: 0 0 30px var(--primary-glow); }

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}
.btn-outline:hover { border-color: white; background: rgba(255,255,255,0.05); }
.full-width { width: 100%; text-align: center; margin-top: 20px; }

/* --- Hero Section & Dashboard Simulation --- */
.hero { padding-top: 140px; padding-bottom: 80px; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

.badge-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.05);
    padding: 6px 16px; border-radius: 50px;
    font-size: 0.85rem; margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.1);
}
.dot-indicator { width: 8px; height: 8px; background: var(--accent-green); border-radius: 50%; box-shadow: 0 0 10px var(--accent-green); }

/* Dashboard Card Specifics */
.dashboard-card {
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}
.dashboard-header { display: flex; justify-content: space-between; margin-bottom: 20px; opacity: 0.7; }
.window-dots i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; }

.stats-row { display: flex; justify-content: space-between; margin-bottom: 30px; }
.stat-item { display: flex; flex-direction: column; }
.stat-item .label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; }
.stat-item strong { font-size: 1.5rem; }
.highlight-green strong { color: var(--accent-green); }

/* THE GRAPH */
.chart-container { position: relative; height: 180px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 20px; }
.bars-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: 8px;
}
/* Individual Bars (generated by JS) */
.bar {
    width: 100%;
    background: linear-gradient(to top, rgba(139, 92, 246, 0.2), var(--primary-purple));
    border-radius: 4px 4px 0 0;
    transition: height 1s ease-in-out;
    position: relative;
    min-height: 4px; /* Immer ein bisschen sichtbar */
    opacity: 0.8;
}
.bar:hover { opacity: 1; background: var(--accent-green); }

/* Chart Overlay / Controls */
.chart-overlay {
    position: absolute; bottom: 10px; left: 0; right: 0;
    text-align: center;
    pointer-events: none; /* Klicks gehen durch */
}
.chart-overlay p { font-size: 0.8rem; margin-top: 5px; opacity: 0.6; }
.btn-xs {
    pointer-events: auto;
    background: rgba(255,255,255,0.1); border: none; color: white;
    padding: 5px 12px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;
}
.btn-xs:hover { background: var(--primary-purple); }

/* Floating Tags */
.hero-visual { position: relative; }
.floating-tag {
    position: absolute; padding: 8px 16px; background: #000;
    border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
    font-size: 0.8rem; font-weight: 600; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    animation: float 6s ease-in-out infinite;
}
.tag-seo { top: -20px; right: -20px; color: var(--accent-green); }
.tag-responsive { bottom: -20px; left: -20px; animation-delay: 2s; color: var(--primary-purple); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- Navbar --- */
/* --- Active Link Highlighting --- */
/* IN STYLE.CSS SUCHEN & ERSETZEN */

/* --- Active Link Highlighting (NEU: Unterstrich) --- */
.nav-links a.active {
    color: var(--accent-green) !important;
    position: relative;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Abstand zum Text */
    left: 0;
    width: 100%;  /* Volle Breite */
    height: 2px;  /* Dünne Linie */
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent); /* Emotionaler Glow-Effekt statt harter Linie */
    box-shadow: 0 2px 5px rgba(0, 255, 136, 0.3); /* Leichter Schein nach unten */
}

.navbar { position: fixed; width: 100%; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.05); }
.nav-container { display: flex; justify-content: space-between; height: 80px; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 800; color: white; text-decoration: none; }
.logo .dot { color: var(--primary-purple); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; transition: 0.3s; }
.nav-links a:hover { color: white; }

/* --- Pricing Highlights --- */
.featured {
    border: 1px solid var(--primary-purple);
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.1), rgba(20,20,25,0.8));
    position: relative;
    transform: scale(1.05);
}
.badge-top {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--primary-purple); padding: 4px 12px; border-radius: 20px;
    font-size: 0.75rem; font-weight: bold;
}
.check-list { list-style: none; text-align: left; margin-top: 20px; }
.check-list li { margin-bottom: 10px; color: var(--text-muted); padding-left: 20px; position: relative; }
.check-list li::before { content: '✓'; color: var(--accent-green); position: absolute; left: 0; }

/* --- Footer --- */
footer {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 40px 0;
    margin-top: 0 !important; /* WICHTIG: Lücke entfernen */
    background: #020203; /* Oder var(--bg-dark) für nahtlosen Look */
    position: relative;
    z-index: 2; /* Liegt sauber über dem Auslauf des Glows */
}.footer-content { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.9rem; }
.footer-links a { color: var(--text-muted); margin-left: 20px; text-decoration: none; }

/* --- Mobile --- */
@media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr; }
    .nav-links { display: none; }
    h1 { font-size: 2.5rem; }
    .featured { transform: scale(1); }
}

/* --- Hero Section & Typography Updates --- */
.hero {
    padding-top: 160px; /* Mehr Platz zur Navbar */
    padding-bottom: 100px;
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Split */
    gap: 80px; /* Viel Platz zwischen Text und Grafik */
    align-items: center;
}

/* Typografie Verbesserungen */
h1 {
    font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive Schriftgröße */
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.hero-text {
    font-size: 1.125rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 540px; /* Damit die Zeilen nicht zu lang werden */
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
}

.trust-icons {
    display: flex;
    gap: 24px;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
}

/* --- Dashboard Card (Cleaner Look) --- */
.dashboard-card {
    background: rgba(15, 15, 20, 0.7); /* Etwas dunkler für besseren Kontrast */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

/* Window Controls (Mac Style) */
.window-controls { display: flex; gap: 6px; }
.control { width: 10px; height: 10px; border-radius: 50%; }
.red { background-color: #ef4444; }
.yellow { background-color: #f59e0b; }
.green { background-color: #10b981; }

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.dash-title {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px; /* Mehr Platz zum Graphen */
}
.stat-item .label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.stat-item strong {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.strategy-cta-section {
    position: relative;
    padding: 120px 0 180px 0; /* MEHR Padding unten (vorher 120px) */
    overflow: visible; /* WICHTIG: Lässt den Glow über den Rand strahlen */
    z-index: 1; /* Damit es über dem Standard-Hintergrund liegt */
}

/* Den Glow etwas nach unten verlängern */
.strategy-cta-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; /* Etwas breiter */
    height: 140%; /* Deutlich höher, damit er nicht abreißt */
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.15) 0%, rgba(5, 5, 7, 0) 60%);
    z-index: -1;
    pointer-events: none;
}

/* Graph Area */
.chart-container {
    height: 160px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 20px; /* Platz zum Footer */
}

.bars-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    gap: 6px;
    z-index: 2;
}

.chart-axis-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.1);
    z-index: 1;
}

/* Dashboard Footer (Button Area) */
.dashboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-note {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    margin: 0 !important; /* Override global p styling */
}

/* Kleiner Button */
.btn-xs {
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-xs:hover {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
    color: white;
}

/* Mobile Adjustments */
@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }
    .hero-buttons, .trust-icons {
        justify-content: center;
    }
    .hero-text { margin: 0 auto 32px auto; }
    
    /* Auf Mobile das Dashboard etwas verkleinern */
    .dashboard-card { padding: 20px; }
    h1 { font-size: 2.5rem; }
}

/* --- Services Section Upgrade --- */

/* Hintergrund-Spot speziell für diese Section */
.ambient-light-spot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.section-header {
    max-width: 600px;
    margin-bottom: 60px; /* Mehr Abstand zu den Karten */
}

/* Intensivere Service Karten */
.service-card {
    background: rgba(20, 20, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    padding: 40px 30px; /* Großzügiger Innenabstand */
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Hover Effekt: Karte hebt sich und leuchtet leicht */
.service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    background: rgba(30, 30, 35, 0.8);
}

/* Icon Wrapper Styling */
.card-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.8rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
}

/* Farbige Glows für die Icons */
.icon-glow-purple { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
.service-card:hover .icon-glow-purple {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.icon-glow-green { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
.service-card:hover .icon-glow-green {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--accent-green);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

.icon-glow-blue { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
.service-card:hover .icon-glow-blue {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* Text Styling in der Karte */
.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: white;
}

.card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
    color: var(--text-muted);
}

/* Die Liste mit den Bullet Points */
.service-list {
    margin-top: auto; /* Drückt die Liste nach unten bei unterschiedlichen Höhen */
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 20px;
    list-style: none;
}

.service-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

/* Eigener Bullet Point Stil */
.service-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    background-color: var(--text-muted); /* Standard Grau */
    border-radius: 50%;
    transition: 0.3s;
}

/* Bullet Points werden farbig bei Hover */
.service-card:hover .service-list li::before {
    background-color: white;
    box-shadow: 0 0 8px white;
}

/* --- Process Timeline (Numbers on Track) --- */

.process-section {
    position: relative;
    overflow: hidden;
}

.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 60px auto 0;
    padding: 40px 0;
}

/* Die Hintergrund-Linie */
.timeline-track {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
    z-index: 0;
}

/* Die Füll-Linie (Fortschritt) */
.timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--primary-purple), var(--accent-green));
    box-shadow: 0 0 15px var(--primary-purple);
    transition: height 0.1s linear;
    z-index: 1;
}

/* Der "Funke" an der Spitze */
.timeline-fill::after {
    content: '';
    position: absolute;
    bottom: -4px; 
    left: -4px; 
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 15px white, 0 0 30px var(--primary-purple);
    opacity: 0; 
    transition: opacity 0.3s;
}
.timeline-fill:not([style*="height: 0%"])::after { opacity: 1; }

/* --- Steps Layout & Animation --- */
.process-step {
    position: relative;
    width: 50%;
    padding: 20px 60px; /* Mehr Abstand zur Linie für die großen Marker */
    box-sizing: border-box;
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.6s ease-out; 
}

.process-step.active {
    opacity: 1;
    transform: translateY(0);
}

.process-step.left { left: 0; text-align: right; }
.process-step.right { left: 50%; text-align: left; }

/* --- Marker (Jetzt mit Zahlen) --- */
.step-marker {
    position: absolute;
    top: 20px; /* Oben bündig mit Content */
    width: 50px; /* Groß genug für Zahlen */
    height: 50px;
    
    /* Zentrierung der Zahl */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-muted); /* Inaktiv: Grau */
    
    background: var(--bg-dark); /* Hintergrund dunkel, damit Linie verdeckt wird */
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    z-index: 2;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy Effekt */
}

/* Positionierung: Marker muss genau mittig auf der Linie sitzen */
/* Linie ist bei 50% (bzw. 0px bei right step). Marker ist 50px breit. */
/* Versatz = -25px (Hälfte der Breite) */

.process-step.left .step-marker { right: -25px; }
.process-step.right .step-marker { left: -25px; }

/* Aktiver Marker Styling */
.process-step.active .step-marker {
    background: var(--bg-dark);
    border-color: var(--primary-purple);
    color: white;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2), 0 0 20px rgba(139, 92, 246, 0.4);
    transform: scale(1.1);
}

/* Grüner Marker am Ende */
.process-step.active .step-marker.highlight-marker {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 0 20px rgba(16, 185, 129, 0.4);
}

/* --- Content Box --- */
.step-content {
    position: relative;
    padding: 30px;
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    transition: 0.3s;
}

.step-content:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255, 255, 255, 0.04);
}

.step-content h3 { margin-bottom: 8px; color: white; font-size: 1.25rem; }
.step-content p { font-size: 0.95rem; margin: 0; color: rgba(255,255,255,0.7); }

/* Letzte Karte Highlight */
.glow-green.glass-card {
    border-color: rgba(16, 185, 129, 0.2);
}

/* --- Mobile Anpassung --- */
@media (max-width: 768px) {
    .timeline-track { left: 30px; } /* Linie etwas weiter rechts für Platz */
    
    .process-step { 
        width: 100%; 
        left: 0; 
        padding: 0 0 0 80px; /* Viel Platz links für Marker */
        margin-bottom: 30px;
    }
    .process-step.left { text-align: left; }
    
    .process-step.left .step-marker, 
    .process-step.right .step-marker {
        left: 5px; /* (30px Linie - 25px Marker-Hälfte) */
        right: auto;
        top: 0; /* Oben bündig */
    }
}

/* --- Contact Section --- */

.contact-section {
    position: relative;
    padding-bottom: 150px; /* Platz zum Footer */
}

/* Positionierung des Hintergrund-Lichts */
.ambient-light-spot.bottom-right {
    top: auto;
    bottom: -10%;
    right: -10%;
    left: auto;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 60%);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start; /* Oben bündig */
}

/* Linke Seite: Text & Methoden */
.contact-info h2 {
    margin-bottom: 20px;
}
.contact-info p {
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 450px;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Die Karten für Telefon/Email */
.contact-method-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 16px;
    text-decoration: none;
    transition: 0.3s;
}

.contact-method-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(10px); /* Leichte Bewegung nach rechts */
}

.icon-circle {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.method-text {
    display: flex;
    flex-direction: column;
}

.method-text .label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.method-text .value {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Rechte Seite: Formular Style */
.glass-form {
    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

/* Styling der Inputs */
.glass-form input,
.glass-form textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dunkler als die Karte */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    color: white;
    font-family: var(--font-main);
    font-size: 1rem;
    transition: 0.3s;
}

.glass-form textarea {
    resize: vertical; /* Nur vertikal verstellbar */
}

/* Focus State: Lila Rand & Leuchten */
.glass-form input:focus,
.glass-form textarea:focus {
    outline: none;
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
    background: rgba(0, 0, 0, 0.5);
}

.form-disclaimer {
    margin-top: 15px;
    font-size: 0.75rem;
    text-align: center;
    color: rgba(255,255,255,0.3);
}

.arrow { margin-left: 8px; transition: 0.3s; display: inline-block; }
.btn:hover .arrow { transform: translateX(5px); }

/* Mobile */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .contact-info { text-align: center; }
    .contact-info p { margin: 0 auto 40px auto; }
    .contact-method-card { text-align: left; } /* Inneninhalt bleibt links */
    .glass-form { padding: 25px; }
	
	/* --- FIX: Timeline Steps Zentrierung (Flexbox) --- */

    /* Container wird zur Flexbox -> Automatische vertikale Zentrierung */
    .process-step {
        display: flex !important;
        align-items: center !important; /* WICHTIG: Vertikal mittig */
        justify-content: flex-start !important;
        padding: 0 0 40px 0 !important; /* Kein Padding links mehr nötig, dafür Abstand nach unten */
        left: 0 !important;
        width: 100% !important;
        margin-bottom: 0 !important; /* Padding übernimmt den Abstand */
    }

    /* Der Marker (Kreis) */
    .step-marker {
        position: relative !important; /* Nicht mehr absolut */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        
        /* Pixelgenaue Ausrichtung auf die Linie */
        /* Linie ist bei 20px + 1px Breite = 21px Mitte */
        /* Marker ist 40px breit -> Mitte bei 20px */
        /* Margin-left: 1px schiebt Marker-Mitte exakt auf 21px */
        margin-left: 1px !important; 
        
        margin-right: 25px !important; /* Abstand zum Text-Kasten */
        flex-shrink: 0 !important; /* Verhindert, dass der Kreis ei-förmig wird */
        
        /* Transform Reset, damit die Scale-Animation sauber startet */
        transform: scale(1); 
    }

    /* --- FIX: Content Boxen sollen gleich breit sein --- */
    .step-content {
        /* "flex: 1" sagt: Nimm dir den ganzen restlichen Platz rechts neben dem Marker */
        flex: 1 !important; 
        
        /* Reset der Breite, damit Flexbox arbeiten kann */
        width: auto !important; 
        
        /* Verhindert, dass die Box bei sehr langem Text aus dem Bildschirm ragt */
        min-width: 0 !important; 
    }

    /* Die Linie im Hintergrund sicherstellen */
    .timeline-track {
        left: 20px !important;
    }
	
	/* --- FIX: Tech Benefits Mobile (Zentriert & Clean) --- */
    
    .tech-benefits-row {
        grid-template-columns: 1fr !important; /* Alles untereinander */
        gap: 50px !important; /* Viel Platz zwischen den Punkten */
        margin-top: 40px;
    }

    .benefit-minimal {
        flex-direction: column !important; /* Icon nach oben, Text nach unten */
        align-items: center !important;    /* Alles mittig ausrichten */
        text-align: center !important;     /* Text zentrieren */
        
        /* Optional: Ein ganz dezenter Hintergrund für jeden Punkt */
        background: rgba(255, 255, 255, 0.02);
        padding: 25px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Das Icon-Wrapper anpassen */
    .benefit-minimal .check-icon-wrapper {
        margin-bottom: 15px !important; /* Abstand nach unten zum Text */
        margin-top: 0 !important;
        transform: scale(1.2); /* Icon etwas größer machen für Mobile */
    }

    /* Text etwas schöner gestalten */
    .benefit-minimal p {
        opacity: 0.8;
        font-size: 0.95rem;
        max-width: 300px; /* Damit die Zeilen nicht zu lang werden */
        margin: 0 auto;   /* Textblock zentrieren */
    }
	
	/* --- FIX: Trust Badge Mobile (Text oben, Sterne unten) --- */
    .trust-badge-large {
        /* column-reverse: Dreht die Reihenfolge um -> Text rutscht nach oben, Sterne nach unten */
        flex-direction: column-reverse !important; 
        gap: 12px !important; /* Etwas Abstand zwischen Text und Sternen */
        text-align: center !important;
        
        /* Box etwas höher und kompakter machen */
        padding: 20px 25px !important;
        border-radius: 20px !important; 
        
        /* Damit der Text schön umbricht und nicht gequetscht wirkt */
        max-width: 90%; 
        margin: 0 auto 30px auto !important; /* Zentriert die ganze Box */
    }

    /* Die Sterne anpassen */
    .trust-badge-large .stars {
        margin-right: 0 !important; /* Kein Abstand nach rechts mehr nötig */
        font-size: 1.2rem;          /* Sterne etwas größer */
        display: block;             /* Eigene Zeile */
        line-height: 1;
    }

    /* Den Text anpassen */
    .trust-badge-large span:not(.stars) {
        font-size: 1rem;
        line-height: 1.5;
        display: block; /* Damit er die volle Breite für Umbrüche nutzt */
    }
	
	/* --- FIX: Timeline Präzision (Pixel-Perfect) --- */

    /* 1. Die Linie exakt positionieren */
    .timeline-track {
        /* Links auf 19px. Da sie 2px breit ist, ist die optische Mitte exakt bei 20px. */
        left: 19px !important; 
    }

    /* 2. Den Container flexibel machen */
    .process-step {
        display: flex !important;
        align-items: center !important; /* Vertikal mittig (Zentrierung Rechteck) */
        justify-content: flex-start !important;
        padding: 0 0 40px 0 !important; 
        left: 0 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    /* 3. Den Marker (Kreis) exakt ausrichten */
    .step-marker {
        position: relative !important;
        left: auto !important; right: auto !important; top: auto !important;
        
        /* Breite 40px -> Die Mitte ist bei 20px. */
        /* Da die Linie auch ihre Mitte bei 20px hat, passt es perfekt. */
        width: 40px !important; 
        height: 40px !important;
        margin-left: 0 !important; /* Kein Verschieben mehr nötig */
        
        margin-right: 20px !important; /* Abstand zum Text */
        flex-shrink: 0 !important;     /* Kreis bleibt rund */
        transform: scale(1);
        
        /* Optional: Schrift etwas kleiner für Mobile */
        font-size: 0.9rem !important; 
    }

    /* 4. Der Inhalt daneben */
    .step-content {
        flex: 1 !important;     /* Füllt den restlichen Platz */
        width: auto !important; 
        min-width: 0 !important;
    }
}

/* --- Mobile Menu Styles --- */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    margin-left: 20px;
}
.mobile-toggle span {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: 0.3s;
}

/* Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 80px; /* Unter der Navbar */
    left: 0;
    width: 100%;
    background: rgba(5, 5, 7, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    transform: translateY(-150%); /* Versteckt nach oben */
    transition: transform 0.4s ease-in-out;
    z-index: 99;
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-link {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    padding: 10px;
}

/* Toggle Animation */
.mobile-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }

@media (max-width: 768px) {
    .nav-links { display: none; } /* Desktop Links ausblenden */
    .mobile-toggle { display: flex; } /* Hamburger einblenden */
    .nav-actions .btn { display: none; } /* Desktop Button ausblenden */
}

/* --- Testimonials Section --- */

/* Der kleine Badge oben drüber */
.trust-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}
.trust-badge .stars {
    color: var(--accent-green);
    margin-right: 8px;
    letter-spacing: 2px;
}

/* Die Karte speziell anpassen */
.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px; /* Einheitliche Höhe */
}

/* Großes Anführungszeichen im Hintergrund */
.quote-icon {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 6rem;
    font-family: serif;
    color: var(--primary-purple);
    opacity: 0.1;
    line-height: 1;
    pointer-events: none;
}

.review-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* Fettgedrucktes im Review hervorheben */
.review-text strong {
    color: var(--accent-green);
    font-weight: 600;
}

/* Footer der Karte (Bild + Name) */
.review-footer {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(139, 92, 246, 0.3); /* Lila Rand */
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    color: white;
    font-size: 0.95rem;
}

.user-role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Hover Effekt: Avatar leuchtet */
.testimonial-card:hover .user-avatar {
    border-color: var(--accent-green);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    transition: 0.3s;
}

/* --- Testimonials & Case Studies Upgrade --- */

.trust-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 24px;
    border-radius: 50px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.trust-badge-large .stars { color: #fbbf24; /* Goldgelb für Sterne */ margin-right: 5px; }
.trust-badge-large strong { color: white; }
.trust-badge-large .divider { color: rgba(255,255,255,0.2); }

/* Die Karte neu strukturieren */
.testimonial-card {
    padding: 0; /* Padding entfernen, da Bild bis zum Rand geht */
    overflow: hidden; /* Damit Bild-Ecken abgerundet bleiben */
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Der Bereich für das Webseiten-Bild */
.project-preview {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Zoom-Effekt beim Hovern */
.testimonial-card:hover .project-img {
    transform: scale(1.05);
}

/* Das Badge auf dem Bild (z.B. +200% Leads) */
.result-tag {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Der Text-Inhalt */
.testimonial-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.star-row {
    color: #fbbf24;
    font-size: 1.1rem;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.review-text {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
    line-height: 1.7;
    font-style: italic;
}

/* Footer (Person) */
.review-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
}

.user-info { display: flex; flex-direction: column; }
.user-name { font-weight: 700; color: white; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; }
.user-role { font-size: 0.75rem; color: var(--text-muted); }

/* Das kleine Verifiziert-Häkchen */
.verified-icon {
    color: var(--primary-purple); /* Oder Blau wie bei Twitter/Insta */
    font-size: 0.8rem;
    cursor: help;
}

/* --- Legal Pages (Impressum, Datenschutz, AGB) --- */

.legal-page {
    padding-top: 140px; /* Platz für Header */
    padding-bottom: 80px;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 16px;
}

.legal-content h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: white;
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--accent-green);
}

.legal-content h3 {
    font-size: 1.2rem;
    margin-top: 20px;
    margin-bottom: 10px;
    color: white;
}

.legal-content p, .legal-content li {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.8;
}

@media (max-width: 767px) { /* oder dein Breakpoint */
    .mobile-menu {
        display: flex; /* Erst auf dem Handy wieder einschalten */
        position: fixed;
        /* ... deine restlichen Styles ... */
    }
}

.legal-content ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

/* --- Styles für cases.html --- */

/* Aktiver Link in der Navbar */
.active-link {
    color: var(--accent-green) !important;
    position: relative;
}
.active-link::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px;
    background: var(--accent-green);
    box-shadow: 0 0 10px var(--accent-green);
}

/* Stats Bar */
.stats-bar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
    border-color: rgba(16, 185, 129, 0.2); /* Grüner Rand */
    margin-bottom: 80px;
}

.big-num {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
    background: linear-gradient(to right, white, var(--accent-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-desc { font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* Case Study Layout (ZigZag) */
.case-study-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 120px;
}
.case-study-row.reverse { flex-direction: row-reverse; }

.case-visual { flex: 1; position: relative; }
.case-content { flex: 1; }

/* Browser Mockup Look */
.browser-mockup {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    background: #1a1a1a;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
    position: relative;
    transition: transform 0.5s ease;
}
.case-study-row:hover .browser-mockup { transform: scale(1.02) translateY(-10px); }

/* Fake Browser Bar oben */
.browser-mockup::before {
    content: '•••';
    display: block;
    height: 30px;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.2);
    font-size: 30px;
    line-height: 14px;
    padding-left: 15px;
    letter-spacing: -2px;
}

.case-img { width: 100%; height: auto; display: block; object-fit: cover; }

.float-badge {
    position: absolute;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 50px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Text Styling */
.case-title { font-size: 2rem; margin-bottom: 10px; line-height: 1.2; }
.case-subtitle { font-size: 1rem; color: var(--text-muted); margin-bottom: 30px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; }

.challenge-solution p { margin-bottom: 15px; color: rgba(255,255,255,0.9); }

.results-box {
    margin-top: 30px;
    padding: 25px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
.results-box.glow-green { border-color: rgba(16, 185, 129, 0.3); }
.results-box.glow-purple { border-color: rgba(139, 92, 246, 0.3); }

.results-box h4 { margin-bottom: 15px; color: white; }
.results-box ul { list-style: none; padding-left: 0; }
.results-box li { margin-bottom: 8px; color: var(--text-muted); font-size: 0.95rem; }

/* Reviews Masonry */
.reviews-grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.review-item { padding: 30px; display: flex; flex-direction: column; gap: 15px; }
.review-item .stars { color: #fbbf24; letter-spacing: 3px; }
.review-item p { font-style: italic; color: rgba(255,255,255,0.8); }
.reviewer strong { display: block; color: white; }
.reviewer span { font-size: 0.8rem; color: var(--text-muted); }

/* CTA Box */
.cta-box {
    padding: 60px 20px;
    border-radius: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* Mobile Responsiveness for Cases */
@media (max-width: 900px) {
    .case-study-row, .case-study-row.reverse { flex-direction: column; gap: 40px; }
    .case-title { font-size: 1.8rem; }
    .stats-bar-grid { grid-template-columns: 1fr; }
}

/* --- Navbar Fix: Links absolut zentrieren --- */
.nav-container {
    position: relative; /* Wichtig für absolute Positionierung */
    justify-content: space-between; /* Fallback */
}

/* Nur auf Desktop anwenden */
@media (min-width: 769px) {
    .nav-links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        gap: 40px; /* Etwas mehr Luft zwischen den Links */
    }
}

/* --- Hotfix: Navbar Position erzwingen --- */
body, html {
    margin: 0 !important;
    padding: 0 !important;
}

.navbar {
    top: 0 !important;
    left: 0 !important; /* Wichtig: Nagelt sie auch links fest */
    margin-top: 0 !important;
    width: 100% !important;
}

/* --- NEU: Emotional Cases Hero Section --- */

/* Macht den Bereich oben dramatischer */
.cases-hero-section {
    padding-top: 220px !important; /* Mehr Luft nach oben für Grandezza */
    padding-bottom: 80px;
    position: relative;
    overflow: visible; /* Damit Lichteffekte rausstrahlen können */
}

/* Ein zusätzlicher Licht-Effekt direkt hinter der Überschrift */
.cases-hero-section::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, rgba(111, 66, 193, 0.05) 30%, transparent 70%);
    filter: blur(60px);
    z-index: -1;
    animation: pulseSlow 8s infinite alternate;
}

/* --- Update für die Stats-Bar (Basis-Zustand) --- */
.glass-card.hero-stats-bar {
    background: rgba(20, 20, 25, 0.6); /* Dunkler, edler */
    border: 1px solid rgba(0, 255, 136, 0.15); /* Dezenter grüner Rahmen (Standard) */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4), /* Tiefer Schatten unten */
        0 0 50px rgba(0, 255, 136, 0.05) inset; /* Sehr leichtes inneres grünes Glühen */
    backdrop-filter: blur(20px);
    transform: translateY(30px); /* Schwebt optisch vor dem Inhalt */
    margin-top: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Weicher Übergang für Hover */
    cursor: default;
}

/* --- NEU: Hover-Zustand (Lila Outline & Glow) --- */
.glass-card.hero-stats-bar:hover {
    border-color: rgba(139, 92, 246, 0.8); /* Lila Outline */
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5), /* Schatten wird tiefer */
        0 0 30px rgba(139, 92, 246, 0.2) inset, /* Inneres lila Glühen */
        0 0 25px rgba(139, 92, 246, 0.3); /* Äußeres lila Glühen */
    transform: translateY(25px) scale(1.01); /* Hebt sich leicht an und wird minimal größer */
}

/* Die Zahlen darin sollen leuchten */
.hero-stats-bar .big-num {
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
    font-weight: 800;
    letter-spacing: -1px;
}

@keyframes pulseSlow {
    0% { opacity: 0.5; transform: translateX(-50%) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

/* --- NEU: Premium Strategy CTA Section --- */

.strategy-cta-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

/* Der Hintergrund-Glow (Lila/Grün Mix) */
.strategy-cta-section::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(139, 92, 246, 0.15) 0%, rgba(5, 5, 7, 0) 70%);
    z-index: -1;
}

.premium-offer-card {
    background: linear-gradient(145deg, rgba(20, 20, 25, 0.8), rgba(10, 10, 12, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Links Text, Rechts Action */
    gap: 60px;
    align-items: center;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.8);
}

/* Ein feiner grüner Rand oben für "Growth" */
.premium-offer-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-green), transparent);
}

.offer-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.checklist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}

.check-item .icon {
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.1);
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
}

/* Rechte Seite: Die "Action Box" */
.offer-action {
    background: rgba(255,255,255,0.03);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}

.profile-stack {
    display: flex; justify-content: center; margin-bottom: 15px;
}
.profile-img-placeholder {
    width: 50px; height: 50px; background: #333; border-radius: 50%;
    border: 2px solid #1a1a1a; margin-left: -15px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.profile-img-placeholder:first-child { margin-left: 0; background: var(--primary-purple); }

/* Mobile Anpassung */
@media (max-width: 900px) {
    .premium-offer-card { grid-template-columns: 1fr; padding: 30px; gap: 40px; }
    .checklist-grid { grid-template-columns: 1fr; }
}

/* --- FAQ Section Styling --- */
.faq-wrapper {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
}

.faq-item.active {
    background: rgba(20, 20, 25, 0.8);
    border-color: var(--primary-purple);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.05rem;
    color: white;
    user-select: none; /* Verhindert Text-Markierung beim schnellen Klicken */
}

.toggle-icon {
    font-size: 1.5rem;
    color: var(--accent-green);
    transition: transform 0.3s ease;
    line-height: 1;
}

/* Dreht das Plus zum X, wenn offen */
.faq-item.active .toggle-icon {
    transform: rotate(45deg); 
    color: var(--primary-purple);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    background: rgba(0,0,0,0.2);
}

.faq-item.active .faq-answer {
    max-height: 300px; /* Genug Platz für Text */
    border-top: 1px solid rgba(255,255,255,0.05);
}

.faq-answer p {
    padding: 20px 25px;
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- TECH STACK SECTION (CLEAN GRID) --- */

/* --- TECH STACK SECTION (TRANSPARENT FIX) --- */

/* --- TECH STACK SECTION (ORGANIC GLOW FIX) --- */

.tech-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    overflow: visible; /* WICHTIG: Damit der Glow oben/unten raus darf */
    z-index: 1;
}

/* Der Glow als eigenes Element im Hintergrund */
.tech-section::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Breiter und höher als die Section selbst */
    width: 100%; 
    height: 160%; /* Ragt 30% oben und unten raus für weichen Übergang */
    
    /* Der Verlauf: Innen leicht weiß, außen komplett transparent */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    
    z-index: -1; /* Ganz hinten */
    pointer-events: none; /* Klicks gehen durch */
}
/* ... der Rest (tech-grid, tech-item, etc.) bleibt genau so wie vorher ... */

/* 1. DAS GRID */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    gap: 20px;
    margin-bottom: 60px;
}

.tech-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    height: 120px; /* Feste Höhe für Symmetrie */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: all 0.3s ease;
    cursor: default;
}

.tech-item img {
    height: 35px; /* Logos nicht zu riesig */
    width: auto;
    filter: grayscale(100%) opacity(0.6); /* Standard: Grau & Dunkel */
    transition: 0.3s;
}

.tech-name {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    transition: 0.3s;
}

/* Hover Effekte */
.tech-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.tech-item:hover img {
    filter: grayscale(0%) opacity(1); /* Farbe zurück */
    transform: scale(1.1);
}

.tech-item:hover .tech-name {
    color: white;
}

/* 2. DIE BENEFITS ROW (Minimalistisch) */
.tech-benefits-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Trennlinie */
}

.benefit-minimal {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.check-icon {
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.1);
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0; /* Verhindert Quetschen */
}

.benefit-minimal strong {
    display: block;
    color: white;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.benefit-minimal p {
    font-size: 0.8rem;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Mobile Anpassung */
@media (max-width: 900px) {
    .tech-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Mobile */
    }
    
    .tech-benefits-row {
        grid-template-columns: 1fr; /* Untereinander auf Mobile */
        gap: 30px;
    }
}

/* --- TEAM SECTION --- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.team-card {
    text-align: center;
    padding: 40px 20px;
    background: rgba(20, 20, 25, 0.4); /* Etwas transparenter */
    transition: 0.4s ease;
}

.team-card:hover {
    transform: translateY(-10px);
    background: rgba(20, 20, 25, 0.8);
    border-color: var(--primary-purple);
}

/* Bild Container */
.img-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 25px auto;
}

.team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.1);
    transition: 0.4s ease;
}

/* Hover Effekt für das Bild */
.team-card:hover .team-img {
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
    transform: scale(1.05);
}

/* Kleines Social Icon am Bildrand */
.social-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px; height: 32px;
    background: var(--bg-dark);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; /* Größe für das Emoji */
    color: white;
    font-weight: bold;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s;
    
    /* WICHTIG FÜR LINKS: */
    text-decoration: none;
    cursor: pointer;
}

/* Hover Effekt für das Icon selbst (optional, damit man sieht dass es klickbar ist) */
.social-icon:hover {
    background: var(--primary-purple);
    border-color: var(--primary-purple);
}

/* Icon erscheint beim Hover */
.team-card:hover .social-icon {
    opacity: 1;
    transform: translateY(0);
}

.team-card h3 {
    font-size: 1.25rem;
    margin-bottom: 5px;
    color: white;
}

.team-card .role {
    display: block;
    font-size: 0.85rem;
    color: var(--accent-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 15px;
}

.team-card .bio {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Styling für das Personen-Icon statt Foto */
.icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05); /* Dezenter Hintergrund */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Feiner Rahmen wie bei den Bildern */
}

/* Das SVG Icon darin */
.icon-placeholder svg {
    width: 50%;
    height: 50%;
    color: var(--text-muted); /* Farbe des Icons */
    transition: 0.3s ease;
}

/* Hover Effekt: Icon wird hell und lila Rand */
.team-card:hover .icon-placeholder {
    border-color: var(--primary-purple);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.team-card:hover .icon-placeholder svg {
    color: white; /* Icon wird weiß beim Hover */
    transform: scale(1.1);
}

/* =========================================
   MOBILE OPTIMIERUNG (High-End Polish)
   ========================================= */

@media (max-width: 900px) {
    
    /* --- Layout & Container --- */
    .container {
        padding: 0 20px; /* Weniger Randabstand für mehr Inhaltsfläche */
    }
    
    .section {
        padding: 60px 0; /* Sektionen kompakter machen */
    }

    /* --- Hero Section Mobile --- */
    .hero {
        padding-top: 120px; /* Weniger Abstand zur Navbar */
        padding-bottom: 60px;
        text-align: center;
    }
    
    h1 {
        font-size: 2.2rem; /* Überschrift mobil lesbarer */
        margin-bottom: 20px;
    }
    
    .hero-text {
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .hero-buttons {
        flex-direction: column; /* Buttons untereinander */
        width: 100%;
        gap: 15px;
    }
    
    .hero-buttons .btn {
        width: 100%; /* Volle Breite für Daumen-Klicks */
        text-align: center;
    }

    /* --- Dashboard Simulation Mobile --- */
    .dashboard-card {
        padding: 15px; /* Platz sparen */
        margin-top: 30px;
    }
    
    .stats-row {
        gap: 10px; /* Zahlen näher zusammen */
    }
    
    .stat-item strong {
        font-size: 1.1rem; /* Zahlen etwas kleiner */
    }
    
    .floating-tag {
        display: none; /* Schwebende Elemente stören mobil oft -> ausblenden */
    }

    /* --- Grids auflösen (Alles untereinander) --- */
    .grid-3, 
    .reviews-grid-masonry, 
    .stats-bar-grid {
        grid-template-columns: 1fr !important; /* Erzwingt 1 Spalte */
        gap: 30px;
    }

    /* --- Service Cards Mobile --- */
    .service-card {
        padding: 30px 20px; /* Kompakter */
        align-items: flex-start; /* Linksbuendig lassen oder center, je nach Geschmack */
    }
    
    .card-icon-wrapper {
        width: 50px; height: 50px; font-size: 1.5rem;
    }

    /* --- Tech Stack Mobile --- */
    .tech-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten für Logos sind okay */
        gap: 15px;
    }
    .tech-item {
        height: 100px;
    }

    /* --- Process Timeline Mobile --- */
    .timeline-wrapper {
        margin-top: 40px;
    }
    
    .timeline-track {
        left: 20px; /* Linie ganz nach links schieben */
    }
    
    .process-step {
        width: 100%;
        left: 0 !important;
        padding: 0 0 0 60px; /* Platz für die Marker links lassen */
        margin-bottom: 40px;
        text-align: left !important; /* Immer linksbündig */
    }
    
    .step-marker {
        left: -5px !important; /* Marker genau auf die Linie links setzen (20px Linie - 25px Marker-Mitte) */
        right: auto !important;
        width: 40px; height: 40px; font-size: 0.9rem; /* Marker etwas kleiner */
        top: 0;
    }

    /* --- Team Mobile --- */
    .team-grid {
        grid-template-columns: 1fr; /* Einzelne Karten untereinander */
        max-width: 350px; /* Nicht zu breit werden lassen */
        margin: 40px auto 0 auto;
    }

    /* --- CTA / Strategy Section --- */
    .strategy-cta-section {
        padding: 80px 0;
    }

    .premium-offer-card {
        padding: 30px 20px;
        border-radius: 16px;
        gap: 40px;
    }

    .offer-content h2 {
        font-size: 1.8rem;
    }

    .checklist-grid {
        grid-template-columns: 1fr; /* Checkliste untereinander */
        gap: 12px;
    }
    
    .offer-action {
        padding: 25px;
        margin-top: 20px;
    }

    /* --- Cases Page Mobile Specifics --- */
    .case-study-row, 
    .case-study-row.reverse {
        flex-direction: column; /* Immer Bild oben, Text unten */
        gap: 30px;
        margin-bottom: 80px;
    }
    
    .case-visual {
        width: 100%;
    }
    
    .case-title {
        font-size: 1.8rem;
    }

    .stats-bar-grid {
        margin-bottom: 50px;
    }
    
    .stat-block {
        border: none !important; /* Keine vertikalen Linien mobil */
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding-bottom: 20px;
    }
    .stat-block:last-child {
        border-bottom: none !important;
    }
    
    /* --- Contact Form Mobile --- */
    .contact-grid {
        gap: 40px;
    }
    
    .glass-form {
        padding: 25px 20px;
    }
}

/* --- Extra Tweaks für sehr kleine Screens (iPhone SE etc.) --- */
@media (max-width: 400px) {
    h1 { font-size: 1.9rem; }
    .hero-buttons .btn { padding: 12px 15px; font-size: 0.95rem; }
    .tech-grid { grid-template-columns: 1fr; } /* Logos untereinander wenn sehr eng */
}

/* =========================================
   FIX: HORIZONTAL OVERFLOW & HEADER WIDTH
   ========================================= */

/* Zwingt den Browser, Überbreite rigoros abzuschneiden */
html, body {
    max-width: 100vw;       /* Nicht breiter als der Viewport */
    overflow-x: hidden;     /* Alles was übersteht verstecken */
    width: 100%;
    position: relative;     /* Wichtig für Container */
}

/* Header Fixierung */
.navbar {
    width: 100vw;           /* Zwingend Viewport-Breite */
    max-width: 100%;        /* Sicherheit */
    left: 0;
    right: 0;
    box-sizing: border-box; /* Padding wird eingerechnet */
}

/* Container Anpassung Mobile */
/* Falls dir der Abstand zum Rand (20px) zu klein ist, kannst du ihn hier erhöhen */
@media (max-width: 900px) {
    .container {
        padding-left: 25px;  /* Etwas mehr Luft links */
        padding-right: 25px; /* Etwas mehr Luft rechts */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* --- Section Header Mobile Zentrierung --- */
    .section-header {
        text-align: center !important; /* Erzwingt Zentrierung */
        margin-left: auto;
        margin-right: auto;
        max-width: 100%; /* Nutzt die volle Breite */
    }
    
    /* Falls der Text darin (p) noch nicht mittig ist: */
    .section-header p {
        margin-left: auto;
        margin-right: auto;
    }
	
	/* --- FIX: FAQ Text abgeschnitten --- */
    /* Auf dem Handy braucht der Text mehr Platz nach unten, da er öfter umbricht */
    .faq-item.active .faq-answer {
        max-height: 1000px !important; /* Erhöht von 300px auf 1000px */
    }
	
	/* Das hier löst das Problem mit dem abgeschnittenen Header */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* --- FIX: Kontakt Sektion Mobile Optimierung --- */
    
    .contact-grid {
        gap: 40px; /* Abstand zwischen Text-Block und Formular */
    }

    /* Die Kontakt-Karten (Telefon/Mail) kompakter machen */
    .contact-method-card {
        padding: 15px;      /* Weniger Innenabstand */
        gap: 15px;          /* Icon und Text näher zusammen */
        width: 100%;        /* Volle Breite nutzen */
        align-items: center; /* Vertikal zentriert */
    }

    /* Das Icon kleiner machen */
    .icon-circle {
        width: 42px; 
        height: 42px; 
        font-size: 1.2rem;
        flex-shrink: 0; /* WICHTIG: Verhindert, dass das Icon zerdrückt wird */
    }

    /* Text-Anpassungen */
    .method-text .label {
        font-size: 0.75rem; /* Label kleiner */
    }

    .method-text .value {
        font-size: 0.9rem;  /* E-Mail/Tel Schriftgröße etwas reduzieren */
        word-break: break-all; /* WICHTIG: Erzwingt Umbruch bei langen Mails */
        line-height: 1.3;
    }

    /* Optional: Den Text "Bereit für mehr Umsatz?" etwas kompakter gestalten */
    .contact-info h2 {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .contact-info p {
        margin-bottom: 30px; /* Weniger Abstand zu den Karten */
    }
	
	/* --- FIX: Unscharfe Bilder/Texte beim Zoom --- */

/* 1. Den Container stabilisieren */
.project-preview {
    /* Erzwingt GPU-Rendering für den Container, damit der Inhalt (Badge) stabil bleibt */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden; /* Sicherstellen, dass nichts rausragt */
}

/* 2. Das Bild scharf stellen */
.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    
    /* WICHTIG: Diese Zeilen verhindern die Unschärfe */
    will-change: transform; /* Bereitet den Browser vor */
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden;
    transform: translateZ(0); /* Aktiviert 3D-Beschleunigung */
    
    /* Optional: Kontrast optimieren (hilft oft bei Chrome) */
    image-rendering: -webkit-optimize-contrast;
}

/* --- FIX: Footer Mobile (Aufgeräumt & Lang) --- */
    
    footer {
        padding: 60px 0 40px 0; /* Mehr Platz nach oben/unten */
    }

    .footer-content {
        flex-direction: column; /* Elemente untereinander stapeln */
        align-items: center;    /* Alles mittig ausrichten */
        gap: 40px;              /* Großer Abstand zwischen Links und Text */
        text-align: center;
    }

    /* Die Links (Impressum, Datenschutz etc.) */
    .footer-links {
        display: flex;
        flex-direction: column; /* Links untereinander */
        gap: 15px;              /* Abstand zwischen den Links */
        width: 100%;            /* Volle Breite nutzen */
        order: 1;               /* Links kommen optisch VOR dem Copyright */
    }

    .footer-links a {
        margin-left: 0;         /* Desktop-Margin entfernen */
        padding: 16px;          /* Große Klickfläche */
        background: rgba(255, 255, 255, 0.03); /* Dezenter Hintergrund */
        border: 1px solid rgba(255, 255, 255, 0.05); /* Feiner Rahmen */
        border-radius: 12px;    /* Abgerundete Ecken */
        font-size: 1rem;
        color: white;
        transition: 0.2s;
    }
    
    /* Kleines Feedback beim Tippen */
    .footer-links a:active {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(0.98);
    }

    /* Das Copyright ganz unten */
    .footer-content p {
        order: 2;               /* Nach unten schieben */
        font-size: 0.85rem;
        opacity: 0.6;           /* Etwas dimmen */
        margin: 0;
        max-width: 80%;         /* Damit der Text nicht zu breit läuft */
        line-height: 1.6;
    }
	
	/* =========================================
   FINAL FIX: TIMELINE & FOOTER (Repair)
   ========================================= */

/* 1. DESKTOP FOOTER RESTORE (Sicherheitshalber erzwingen) */
@media (min-width: 901px) {
    footer {
        padding: 40px 0; /* Original Padding */
    }
    .footer-content {
        flex-direction: row !important; /* Nebeneinander */
        text-align: left !important;
        align-items: center !important;
        gap: 0 !important;
    }
    .footer-links {
        width: auto !important;
        flex-direction: row !important;
        order: 0 !important;
    }
    .footer-links a {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-left: 20px !important;
        display: inline !important;
    }
    .footer-content p {
        order: 0 !important;
        margin: 0 !important;
    }
}

/* 2. MOBILE OPTIMIERUNGEN (Nur Handy/Tablet) */
@media (max-width: 900px) {

    /* --- TIMELINE: Exakt Mittig (Pixel-Perfect) --- */
    
    .timeline-track {
        left: 19px !important; /* Exakt mittig unter dem 40px Marker */
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        z-index: 0;
    }

    .process-step {
        display: flex !important;
        align-items: center !important; /* WICHTIG: Vertikal zentriert */
        justify-content: flex-start !important;
        
        /* FIX: Padding unten entfernen, damit die "Mitte" wirklich die Mitte ist */
        padding: 0 0 0 0 !important; 
        margin-bottom: 50px !important; /* Abstand wird über Margin außen geregelt */
        
        left: 0 !important;
        width: 100% !important;
    }

    .step-marker {
        position: relative !important;
        top: auto !important; left: auto !important; right: auto !important;
        
        width: 40px !important;
        height: 40px !important;
        
        /* Flexbox-Handling */
        flex-shrink: 0 !important;
        margin: 0 25px 0 0 !important; /* Abstand rechts zum Text */
        
        /* Optische Korrekturen löschen */
        transform: none !important; 
        z-index: 2;
    }

    .step-content {
        flex: 1 !important;
        width: auto !important;
        margin: 0 !important;
        /* Damit der Text-Container nicht die Höhe verzerrt */
        align-self: center !important; 
    }


    /* --- FOOTER: Nur Mobil aufräumen --- */
    footer {
        padding: 60px 0 40px 0;
    }
    .footer-content {
        flex-direction: column !important; /* Untereinander */
        align-items: center !important;
        gap: 40px !important;
    }
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        order: 1 !important; /* Links nach oben */
        gap: 15px !important;
    }
    .footer-links a {
        margin-left: 0 !important;
        padding: 16px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    .footer-content p {
        order: 2 !important; /* Copyright nach unten */
        opacity: 0.5;
        font-size: 0.85rem;
    }
}

/* =========================================
   FIX: CASES PAGE MOBILE (Schrift & Ausrichtung)
   ========================================= */

/* Desktop Standard für den Titel (damit er groß bleibt) */
.cases-hero-title {
    font-size: 3.5rem;
    line-height: 1.3;
    margin-bottom: 25px;
}

/* Stat-Block Trennlinien Desktop (hier definiert statt inline) */
@media (min-width: 901px) {
    .middle-stat {
        border-left: 1px solid rgba(255,255,255,0.05);
        border-right: 1px solid rgba(255,255,255,0.05);
    }
}

/* --- MOBILE OPTIMIERUNG --- */
@media (max-width: 900px) {
    
    /* 1. Schriftgröße anpassen (wie auf Startseite) */
    .cases-hero-title {
        font-size: 2.2rem; /* Kleiner für Mobile */
        line-height: 1.2;
    }
    
    .hero-text {
        font-size: 1rem !important; /* Fließtext lesbar machen */
        padding: 0 10px; /* Sicherheitspadding */
    }

    /* 2. Statistik-Leiste reparieren (Schiebt nicht mehr nach rechts) */
    .stats-bar-grid {
        display: flex !important;
        flex-direction: column; /* Untereinander */
        gap: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 40px;
    }
    
    /* Die einzelnen Statistik-Blöcke */
    .stat-block {
        width: 100%;
        padding: 25px 0;
        border: none !important; /* Keine vertikalen Linien mobil */
        border-bottom: 1px solid rgba(255,255,255,0.1) !important; /* Dafür horizontale Linien */
    }
    
    .stat-block:last-child {
        border-bottom: none !important;
    }
    
    /* Zahlen etwas kleiner mobil */
    .big-num {
        font-size: 2rem;
    }

    /* 3. Container Fix (Verhindert das Rechts-Verschieben) */
    .cases-hero-section .container {
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        overflow: hidden; /* WICHTIG: Kappt Überstände */
    }
    
    /* Navbar auf Cases Mobile anpassen */
    .navbar {
        width: 100vw;
        max-width: 100%;
        left: 0;
    }
}

/* =========================================
   FIX: CASES HERO MOBILE (Höhe anpassen)
   ========================================= */

@media (max-width: 900px) {
    .cases-hero-section {
        /* Vorher war es 220px (Desktop), das ist mobil zu viel. */
        /* Wir reduzieren es auf 140px, damit der Text höher rutscht. */
        padding-top: 140px !important; 
        
        /* Optional: Unten auch etwas kompakter */
        padding-bottom: 60px !important;
    }
    
    /* Falls die Badge (Proof of Concept) zu nah am Titel klebt: */
    .cases-hero-section .badge-pill {
        margin-bottom: 20px !important;
    }
}

/* =========================================
   FIX: CASES HERO HÖHE (Wie Startseite)
   ========================================= */

@media (max-width: 900px) {
    .cases-hero-section {
        /* 120px ist der Standard-Wert der Startseite-Hero auf Mobile */
        padding-top: 120px !important; 
        padding-bottom: 60px !important;
    }

    /* Falls der Titel "Ergebnisse statt..." zu viel Abstand zum Badge hat: */
    .cases-hero-section h1 {
        margin-top: 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Sicherstellen, dass die Badge nicht klebt */
    .cases-hero-section .badge-pill {
        margin-bottom: 0 !important;
    }
}

/* =========================================
   FIX: CASE STUDIES REIHENFOLGE (MOBILE)
   ========================================= */

@media (max-width: 900px) {
    /* Dieser Befehl zwingt den Bild-Container (.case-visual) 
       immer auf Position 1, egal wo er im HTML steht. */
    .case-study-row .case-visual {
        order: -1 !important; 
        margin-bottom: 0 !important; /* Der Abstand kommt durch das Grid-Gap */
    }
    
    /* Der Text kommt automatisch danach */
    .case-study-row .case-content {
        order: 1 !important;
    }
}

/* 1. DESKTOP (Standard): So wie es vorher war */
.reviews-section {
    background: rgba(255, 255, 255, 0.02); /* Der originale, helle Kasten */
    border-top: 1px solid rgba(255, 255, 255, 0.02); /* Optional: feiner Rand */
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

/* 2. MOBILE: Hier machen wir es dunkel/weich */
@media (max-width: 900px) {
    .reviews-section {
        /* Wir überschreiben das Helle mit einem dunklen Verlauf */
        background: radial-gradient(circle at center, rgba(20, 20, 25, 0.8) 0%, transparent 100%) !important;
        
        /* Oder falls du es ganz schwarz willst (kein Kasten mehr sichtbar): */
        /* background: transparent !important; */
        
        border: none !important; /* Keine harten Kanten am Handy */
        padding: 60px 0;
    }
}

/* =========================================
   FIX: HERO STATS SHADOW (MOBILE CLEANUP)
   ========================================= */

@media (max-width: 900px) {
    .hero-stats-bar {
        /* 1. Den harten Schatten entfernen/reduzieren */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important; 
        
        /* 2. Transform zurücksetzen (kein Schweben, das Platz verschwendet) */
        transform: none !important; 
        
        /* 3. Etwas Abstand nach unten sicherstellen */
        margin-bottom: 20px !important;
    }

    /* Falls du auch die Trennlinien IN der Karte meintest: */
    /* Die machen wir etwas dezenter */
    .stat-block {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
}

/* =========================================
   FIX: BACKGROUND LIGHTING (Mobile Dezent)
   ========================================= */

/* =========================================
   FIX: BACKGROUND LIGHTING (Mobile: Mittelgroß & Hinten)
   ========================================= */

@media (max-width: 900px) {
    
    /* Global für alle Lichter: Ganz nach hinten! */
    .ambient-light, 
    .ambient-light-spot {
        z-index: -1 !important; /* Sicherstellen, dass es hinter dem Text liegt */
        pointer-events: none;   /* Klicks gehen durch */
    }

    /* 1. Der lila Lichtfleck (oben) */
    .light-purple-top {
        width: 450px !important;  /* Wieder etwas größer (Mittelweg) */
        height: 450px !important;
        top: -10% !important;     
        left: -20% !important;    /* Etwas weiter raus schieben für weichen Rand */
        filter: blur(80px) !important; /* Weicherer Verlauf */
        opacity: 0.5 !important;  /* Gute Sichtbarkeit, aber nicht zu grell */
    }

    /* 2. Der grüne Lichtfleck (unten) */
    .light-green-bottom {
        width: 380px !important;  /* Auch etwas größer */
        height: 380px !important;
        bottom: -5% !important;
        right: -20% !important;
        filter: blur(70px) !important;
        opacity: 0.5 !important;
    }

    /* 3. Spots in der Mitte (z.B. Services) */
    .ambient-light-spot {
        width: 400px !important;
        height: 400px !important;
        opacity: 0.35 !important; /* Dezent im Hintergrund */
    }
	
	/* --- FIX: FAQ Abstand Mobile --- */
    .faq-question {
        /* Erzeugt einen garantierten Mindestabstand zwischen Text und Plus */
        gap: 20px !important; 
        
        /* Falls du willst, dass das Icon bei mehrzeiligem Text OBEN steht statt mittig: */
        /* align-items: flex-start !important; */
        /* padding-top: 25px !important; */
    }

    .toggle-icon {
        /* Verhindert, dass das Icon gequetscht wird, wenn der Text viel Platz braucht */
        flex-shrink: 0 !important; 
    }
}

/* =========================================
   FIX: MOBILE MENU STYLE (Glas & Active Link)
   ========================================= */

@media (max-width: 900px) {

    /* 1. Hintergrund: Verwaschen / Milchglas (wie beim Logo) */
    .mobile-menu {
        /* Dunkel, aber durchsichtig, damit der Blur wirkt */
        background: rgba(10, 10, 15, 0.7) !important; 
        
        /* Der "Verwaschen"-Effekt */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        
        /* Sicherstellen, dass es über allem liegt, aber unter dem Header-Logo, falls gewünscht */
        z-index: 998; 
    }

    /* 2. Highlight für die aktive Seite (Nur Textfarbe grün) */
    .mobile-link.active {
        color: var(--accent-green) !important;
        font-weight: 700;
        text-shadow: 0 0 15px rgba(0, 255, 136, 0.4); /* Leichter Glow */
    }
}
/* =========================================
   FIX: MOBILE MENU (Premium "Frosted Glass")
   ========================================= */

@media (max-width: 900px) {
    .mobile-menu {
        /* 1. Hintergrund: Dunkel, aber durchlässig (ca. 70% Deckkraft) */
        /* Nicht zu hell, damit Text lesbar bleibt. Nicht zu dunkel, damit Blur wirkt. */
        background: rgba(18, 18, 24, 0.70) !important;
        
        /* 2. Der "Verwaschen"-Effekt (WICHTIG!) */
        /* blur(50px) = Macht alles dahinter sehr unscharf */
        /* saturate(180%) = Lässt die Farben dahinter (Lila/Grün) leuchten */
        backdrop-filter: blur(50px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(50px) saturate(180%) !important; /* Für iPhones */
        
        /* Optional: Feiner Rand für den Glas-Look */
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    /* Highlight für den aktiven Link (nur Textfarbe grün + Leuchten) */
    .mobile-link.active-highlight {
        color: var(--accent-green) !important;
        font-weight: 700;
        text-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
    }
}

/* =========================================
   FIX: MOBILE MENU (Echter Milchglas-Effekt)
   ========================================= */

@media (max-width: 900px) {
    .mobile-menu {
        /* 1. Hintergrund: Dunkelgrau mit 60% Deckkraft */
        /* WICHTIG: Nicht zu dunkel, sonst sieht man den Effekt nicht */
        background: rgba(15, 15, 20, 0.6) !important;
        
        /* 2. Der "Milch"-Effekt (Blur) */
        /* Das macht alles dahinter unscharf */
        backdrop-filter: blur(50px) !important;
        -webkit-backdrop-filter: blur(50px) !important; /* WICHTIG für iPhones! */
        
        /* Optional: Ein leichter Rand verstärkt den Glas-Look */
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Der aktive Link (Grün & Leuchtend) */
    .mobile-link.active-highlight {
        color: var(--accent-green) !important;
        font-weight: 700;
        text-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
    }
}

/* --- FIX: Mobile Menu Hintergrund (Dunkel & Transparent) --- */
@media (max-width: 900px) {
    .mobile-menu {
        /* Dunkles Schwarz (Dein Theme-Ton) mit 85% Deckkraft */
        background-color: rgba(5, 5, 7, 0.85) !important;
        
        /* Macht den Hintergrund hinter dem Menü unscharf (Milchglas) */
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        
        /* Optional: Ein feiner Rand unten/rechts für besseren Kontrast */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* --- FIX: Mobile Menu Glas-Effekt --- */
@media (max-width: 900px) {
    .mobile-menu {
        /* Dunkler, transparenter Hintergrund (damit der Blur sichtbar ist) */
        background-color: rgba(10, 10, 15, 0.6) !important;
        
        /* Der Weichzeichner-Effekt (wie in der Navbar) */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important; /* Wichtig für iPhones */
        
        /* Optional: Ein feiner Rand unten für den sauberen Look */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* --- FIX: Mobile Menu (Premium "Frosted Glass") --- */
@media (max-width: 900px) {
    .mobile-menu {
        /* 1. Hintergrund: Dunkel, aber durchlässiger (70% statt 90%) */
        /* WICHTIG: Wenn das zu dunkel ist, sieht man den Blur nicht! */
        background-color: rgba(18, 18, 24, 0.70) !important;
        
        /* 2. Der "Verwaschen"-Effekt (Extrem stark eingestellt) */
        /* blur(50px) = Macht den Hintergrund sehr unscharf */
        /* saturate(180%) = Lässt die Farben dahinter leuchten (Premium Look) */
        backdrop-filter: blur(50px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(50px) saturate(180%) !important; /* ZWINGEND für iPhones/Safari */
        
        /* Rand für saubere Abgrenzung */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* --- FIX: Mobile Menu (Solid / Undurchsichtig) --- */
@media (max-width: 900px) {
    .mobile-menu {
        /* Komplett undurchsichtiger, dunkler Ton (passend zum Design) */
        background-color: #141419 !important; 
        
        /* Filter ausschalten, um Darstellungsfehler zu vermeiden */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        
        /* Feiner Rand unten */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        
        /* Sicherstellen, dass es über allem anderen liegt */
        z-index: 999 !important;
    }
}

/* --- Mobile Back Arrow (FIX: Rechts & Zentriert) --- */
.mobile-back-arrow {
    display: none; /* Auf Desktop unsichtbar */
}

@media (max-width: 900px) {
    .mobile-back-arrow {
        /* 1. Layout & Zentrierung des Pfeils */
        display: flex !important;
        align-items: center;
        justify-content: center;
        
        /* 2. Positionierung ganz rechts */
        margin-left: auto; /* WICHTIG: Drückt den Button an den rechten Rand */
        margin-right: 0;   /* Kein unnötiger Abstand nach rechts */

        /* 3. Der Kreis-Look */
        width: 44px;
        height: 44px;
        border-radius: 50%;
        
        /* 4. Farben & Rahmen */
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.05);
        color: white;
        
        /* 5. Schrift/Pfeil Optimierung */
        font-size: 1.4rem; /* Pfeilgröße */
        text-decoration: none;
        padding: 0; /* Wichtig: Entfernt Standard-Abstände */
        padding-bottom: 2px; /* Zieht den Pfeil optisch minimal hoch in die Mitte */
        line-height: 1;
        transition: all 0.3s ease;
    }

    /* Hover Effekt */
    .mobile-back-arrow:active, .mobile-back-arrow:hover {
        background: var(--primary-purple);
        border-color: var(--primary-purple);
        transform: scale(0.95);
    }

    /* Alte Nav-Actions sicher ausblenden */
    .legal-page .nav-actions {
        display: none !important;
    }
}

/* --- FIX: Abgeschnittene Texte (Datenschutz/Impressum) Mobile --- */
@media (max-width: 900px) {
    .legal-content {
        /* Weniger Innenabstand, damit mehr Platz für den Text bleibt */
        padding: 25px 20px !important;
    }

    .legal-content h1 {
        /* Schrift etwas kleiner machen */
        font-size: 1.8rem !important; 
        
        /* WICHTIG: Erzwingt einen Umbruch, auch mitten im Wort wenn nötig */
        overflow-wrap: break-word;
        word-wrap: break-word;
        
        /* Aktiviert Silbentrennung (Da-ten-schutz...) */
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* --- FIX: Mobile Hero & Typografie (Clean Look) --- */
@media (max-width: 900px) {
    
    .hero {
        /* 1. Weniger Abstand nach oben, damit man schneller "drin" ist */
        padding-top: 110px !important; 
        padding-bottom: 40px !important;
    }

    .hero-content h1 {
        /* 2. Schriftgröße anpassen, damit "in Umsatz verwandeln" in eine Zeile passt */
        font-size: 2rem !important; /* War vorher 2.5rem+ -> zu groß */
        line-height: 1.25 !important;
        margin-bottom: 15px !important;
        
        /* 3. WICHTIG: Automatische, harmonische Zeilenumbrüche (verhindert einzelne Wörter) */
        text-wrap: balance; 
        
        /* Fallback für ältere Handys: */
        max-width: 100%;
        padding: 0 5px; 
    }

    /* Das "Websites, die Besucher..." etwas enger zusammenziehen */
    .hero-content h1 br {
        display: none; /* Entfernt harte Umbrüche aus dem HTML, falls vorhanden */
    }

    .hero-text {
        /* 4. Fließtext lesbarer machen */
        font-size: 1rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        padding: 0 10px !important; /* Kleiner Rand links/rechts */
        margin-bottom: 25px !important;
        opacity: 0.9;
    }

    /* 5. Badge (Das kleine Label oben) kompakter machen */
    .badge-pill {
        margin-bottom: 15px !important;
        font-size: 0.75rem !important;
        padding: 4px 12px !important;
    }

    /* 6. Buttons kompakter anordnen */
    .hero-buttons {
        gap: 12px !important;
        margin-bottom: 30px !important;
    }
    
    .hero-buttons .btn {
        padding: 14px 20px !important; /* Griffigere Touch-Fläche */
        font-size: 1rem !important;
    }
}

/* --- FIX: Kontakt-Buttons subtil hervorheben (Purple Theme) --- */

/* 1. Die Karte selbst: Minimaler lila Tint */
.contact-method-card {
    /* Ein ganz feiner lila Rahmen statt nur grau */
    border-color: rgba(139, 92, 246, 0.15) !important; 
    /* Ein Hauch von lila im Hintergrund */
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.05), rgba(20, 20, 25, 0.6)) !important;
}

/* 2. Der Kreis um das Icon: Leuchtet sanft lila */
.contact-method-card .icon-circle {
    /* Hellerer, transparenter Lila-Hintergrund */
    background: rgba(139, 92, 246, 0.1) !important; 
    /* Das Icon selbst wird lila */
    color: var(--primary-purple) !important; 
    /* Feiner, passender Rahmen */
    border: 1px solid rgba(139, 92, 246, 0.25) !important; 
    /* Ganz subtiler "Glow"-Effekt */
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15) !important; 
    transition: all 0.3s ease;
}

/* 3. Hover-Effekt (für Desktop): Wird beim Drüberfahren deutlicher */
.contact-method-card:hover {
    border-color: var(--primary-purple) !important;
    transform: translateY(-3px) !important; /* Leichtes Anheben statt nur zur Seite */
}

.contact-method-card:hover .icon-circle {
    background: var(--primary-purple) !important; /* Kreis füllt sich lila */
    color: white !important; /* Icon wird weiß */
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4) !important; /* Stärkerer Glow */
}