/* Grundlegende Einstellungen */
:root {
    /* Farben */
    --primary-color: #3498db;
    --primary-light: #fc8181;
    --primary-dark: #c53030;
    --secondary-color: #2d3748;
    --dark-color: #1a202c;
    --light-color: #f7fafc;
    --white-color: #ffffff;
    --success-color: #38a169;
    --warning-color: #d69e2e;
    --error-color: #e53e3e;
    --brand-color: #3182ce;
    --brand-light: #63b3ed;
    --brand-dark: #2c5282;
    --gray-100: #f7fafc;
    --gray-200: #edf2f7;
    --gray-300: #e2e8f0;
    --gray-400: #cbd5e0;
    --gray-500: #a0aec0;
    --gray-600: #718096;
    --gray-700: #4a5568;
    --gray-800: #2d3748;
    --gray-900: #1a202c;
    
    /* Abstände */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    
    /* Layout */
    --container-width: 1200px;
    --container-padding: 1.5rem;
    
    /* Andere */
    --border-radius: 8px;
    --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
    
    /* Scrollbar */
    --scrollbar-width: 0px; /* Reduziert auf 0px, um sie unsichtbar zu machen */
    --scrollbar-bg: transparent;
    --scrollbar-thumb: transparent;
    --scrollbar-thumb-hover: transparent;

    /* Dark Mode Variablen */
    /* Light Mode (Standard) */
    --page-background-light: #ffffff;
    --text-color-light: #1a202c;
    --header-background-light: rgba(255, 255, 255, 0.95);
    --header-text-light: #1a202c;
    --header-background-scrolled-light: rgba(255, 255, 255, 0.98);
    --header-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --header-shadow-scrolled-light: 0 5px 15px rgba(0, 0, 0, 0.1);
    --card-background-light: #ffffff;
    --card-text-light: #1a202c;
    --btn-secondary-color-light: #1a202c;
    --btn-secondary-border-light: #1a202c;
    --btn-secondary-hover-bg-light: #1a202c;
    --btn-secondary-hover-color-light: #ffffff;
    --features-advantages-bg-light: #f8f9fa;
    --section-header-color-light: #1a202c;
    --section-header-text-light: #2d3748;

    /* Dark Mode */
    --page-background-dark: #1a1a1a;
    --text-color-dark: #e0e0e0;
    --header-background-dark: rgba(26, 26, 26, 0.95);
    --header-text-dark: #e0e0e0;
    --header-background-scrolled-dark: rgba(26, 26, 26, 0.98);
    --header-shadow-dark: 0 2px 10px rgba(0, 0, 0, 0.3);
    --header-shadow-scrolled-dark: 0 5px 15px rgba(0, 0, 0, 0.3);
    --card-background-dark: #2d2d2d;
    --card-text-dark: #e0e0e0;
    --btn-secondary-color-dark: #e0e0e0;
    --btn-secondary-border-dark: #e0e0e0;
    --btn-secondary-hover-bg-dark: #e0e0e0;
    --btn-secondary-hover-color-dark: #1a1a1a;
    --features-advantages-bg-dark: #242424;
    --section-header-color-dark: #e0e0e0;
    --section-header-text-dark: #b0b0b0;

    /* Current Variablen (Standard: Light Mode) */
    --current-page-background: var(--page-background-light);
    --current-text-color: var(--text-color-light);
    --current-header-background: var(--header-background-light);
    --current-header-text: var(--header-text-light);
    --current-header-background-scrolled: var(--header-background-scrolled-light);
    --current-header-shadow: var(--header-shadow-light);
    --current-header-shadow-scrolled: var(--header-shadow-scrolled-light);
    --current-card-background: var(--card-background-light);
    --current-card-text: var(--card-text-light);
    --current-btn-secondary-color: var(--btn-secondary-color-light);
    --current-btn-secondary-border: var(--btn-secondary-border-light);
    --current-btn-secondary-hover-bg: var(--btn-secondary-hover-bg-light);
    --current-btn-secondary-hover-color: var(--btn-secondary-hover-color-light);
    --current-features-advantages-bg: var(--features-advantages-bg-light);
    --current-section-header-color: var(--section-header-color-light);
    --current-section-header-text: var(--section-header-text-light);
}

/* Reset und Basis */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.no-scroll {
    overflow: hidden !important;
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    position: relative;
    height: auto;
    overflow-y: auto !important; /* Geändert von 'scroll' zu 'auto' */
    overflow-x: hidden !important;
    scrollbar-width: none; /* Für Firefox - keine Scrollleiste */
    -ms-overflow-style: none; /* Für IE und Edge - keine Scrollleiste */
    scroll-behavior: smooth; /* Sanftes Scrollen für bessere UX */
}

html::-webkit-scrollbar {
    width: 0; /* Unsichtbare Scrollleiste für WebKit-Browser */
    background-color: transparent;
}

html::-webkit-scrollbar-thumb {
    background-color: transparent;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: transparent;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--current-text-color);
    background-color: var(--current-page-background);
    overflow-x: hidden; /* Verhindert horizontales Scrollen der gesamten Seite */
    width: 100%;
    max-width: 100vw;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Klasse für Körper mit Scrollleisten-Padding - nicht mehr benötigt */
body.has-scrollbar-padding {
    padding-right: 0 !important;
    width: 100%;
}

/* Fix für das kurzzeitige Erscheinen der Scrollleiste - subtilerer Ansatz */
.scroll-container {
    display: none; /* Versteckt den Container vollständig */
}

/* Optimierungen für besseres Laden der Seite */
.no-fouc {
    visibility: hidden;
}

.fouc-ready {
    visibility: visible;
    transition: opacity 0.3s ease-out;
}

/* Verhindert kurzzeitige Layout-Shifts während des Ladens */
body::after {
    display: none; /* Element deaktiviert */
}

/* Alles ausblenden während des ersten Renderings */
body.init-loading * {
    transition: none !important;
}

/* Anpassungen für verhinderte Layout-Shifts mit versteckter Scrollleiste */
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1180px; /* Leicht reduziert um mögliche Scrollleistenbreite */
    }
}

section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Verhindert horizontale Scrollleisten */
    margin: 0;
    padding: 0;
    position: relative;
}

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

.company-name {
    color: var(--brand-color);
    font-weight: 700;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header.text-left {
    text-align: left;
}

/* Spezifischer Abstand für Offline zu Online Bereich */
.offline-to-online .section-header {
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
}

.section-header h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--current-section-header-color);
    transition: color 0.3s ease;
}

/* Dunkle Überschrift für den Personalisierungs-Bereich */
.personalization .section-header h2,
.personalization .section-header p {
    color: var(--current-section-header-color);
}

.section-header p {
    font-size: 18px;
    color: var(--current-section-header-text);
    transition: color 0.3s ease;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-secondary {
    background-color: transparent;
    color: var(--current-btn-secondary-color);
    border: 2px solid var(--current-btn-secondary-border);
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: var(--current-btn-secondary-hover-bg);
    color: var(--current-btn-secondary-hover-color);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* Sticky Navigation Header */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--current-header-background);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--current-header-shadow);
    padding: 8px 0; /* Reduziert von var(--spacing-sm) auf 8px */
    transition: all 0.3s ease;
    transform: translateY(0);
}

.sticky-header.hidden {
    transform: translateY(-100%);
}

.sticky-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sticky-header.scrolled {
    background-color: var(--current-header-background-scrolled);
    box-shadow: var(--current-header-shadow-scrolled);
    padding: 6px 0; /* Reduziert von 10px auf 6px */
}

.sticky-header .logo {
    z-index: 1001;
}

.sticky-header .logo a {
    font-size: 20px; /* Kompakte Logo-Größe */
    font-weight: 700;
    color: #1a202c;
    display: flex; 
    align-items: center; 
    transition: all 0.3s ease;
    text-decoration: none;
}

.sticky-header.scrolled .logo a {
    font-size: 18px; /* Noch kleiner beim Scrollen */
}

.sticky-header .logo-img {
    height: 32px !important; /* Kompakte Logo-Höhe */
    width: auto !important;
    margin-top: 4px; /* Erhöht von 2px auf 4px für tiefere Position */
}
.sticky-header.scrolled .logo-img {
    height: 30px !important; /* Etwas kleiner beim Scrollen */
    margin-top: 3px; /* Erhöht von 1px auf 3px für tiefere Position beim Scrollen */
}

.sticky-header .nav-menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sticky-header .nav-menu li {
    margin: 0 2px;
}

.sticky-header .nav-menu a {
    color: var(--current-header-text);
    font-size: 11px; /* Reduziert von 12px auf 11px */
    font-weight: 400;
    padding: 0 var(--spacing-sm);
    height: 36px; /* Reduziert von 44px auf 36px */
    display: flex;
    align-items: center;
    position: relative;
    transition: color 0.3s ease;
    text-decoration: none;
}

.sticky-header .nav-menu a:hover {
    color: var(--brand-color);
    text-decoration: none;
}

.sticky-header .nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: var(--brand-color);
    transition: width 0.3s ease;
}

.sticky-header .nav-menu a:hover::after {
    width: 40%;
}

.sticky-header .mobile-menu-btn {
    display: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--current-header-text);
}

@media (max-width: 991px) {
    .sticky-header .nav-menu {
        display: none;
    }

    .sticky-header .mobile-menu-btn {
        display: block;
    }
}
/* Mobile Navigation */

/* Hero Section */
.hero {
    padding: 140px 0 50px;
    background-color: var(--current-page-background);
    overflow: hidden;
    min-height: auto;
    display: block;
    text-align: center;
    margin-top: 0;
    position: relative;
}

.hero .container {
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.hero-text-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    margin-top: 40px;
    margin-bottom: 30px;
}

.hero-text-left {
    text-align: left;
}

.hero-text-right {
    text-align: right;
}

.hero-text-left h1 {
    font-size: 48px;
    line-height: 1.2;
    color: var(--current-section-header-color);
    font-weight: 700;
    margin: 0;
    text-align: left;
}

.mit-einem-tap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    text-align: right;
    font-size: 28px;
}

.text-center {
    text-align: center;
}

.hero-products-image {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-lg);
}

.hero h1 {
    font-size: 56px;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--current-section-header-color);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    white-space: nowrap; /* Verhindert Zeilenumbruch */
}

.headline-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 20px;
    max-width: 1200px;
}

.headline-container h1 {
    font-size: 56px;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: var(--current-section-header-color);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    text-align: left;
    width: 100%;
}

.headline-container h2 {
    font-size: 42px;
    line-height: 1.2;
    margin-top: -10px;
    margin-bottom: 1.5rem;
    color: var(--current-section-header-color);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    text-align: left;
    width: 100%;
}

.subtitle {
    font-size: 42px;
    font-weight: 700;
    color: var(--current-section-header-color);
    margin-top: -30px;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.hero p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    color: var(--current-section-header-text);
    max-width: 800px;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-start;
    margin-top: var(--spacing-lg);
}

.hero-video-container {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    border-radius: 0; /* Keine runden Ecken am Anfang */
    overflow: hidden;
    background-color: transparent;
    transform-origin: center center; /* Sauberer Scaling-Mittelpunkt */
    will-change: transform, border-radius, box-shadow;
    /* Entferne CSS transition da wir JavaScript für smooth scrolling verwenden */
}

/* Diese Klasse wird nicht mehr verwendet, da wir progressive Transformation verwenden */
.hero-video-container.scrolled {
    /* Auskommentiert da wir jetzt JavaScript-basierte progressive Transformation verwenden */
}

.hero-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-width: 100%;
    border-radius: inherit; /* Erbt border-radius vom Container */
    /* Entferne Transition da der Container die Transformation handhabt */
}

/* Diese Regel wird nicht mehr benötigt da das Video border-radius vom Container erbt */
.hero-video-container.scrolled .hero-video {
    /* Auskommentiert da progressive Transformation verwendet wird */
}

.hero-animation-container {
    width: 100%;
    height: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

/* Features Section */
.features {
    padding: 80px 0;
    background-color: var(--current-page-background);
    position: relative;
    overflow: visible;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

.features .section-header {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 40px;
}

.features-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: calc(100% - 40px);
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 20px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    max-width: 100%;
    overflow: -moz-scrollbars-none;
}

.features-grid::after {
    content: "";
    flex: 0 0 20px;
}

.features-grid::before {
    display: none;
}

.features-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Features Navigation Buttons */
.features-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: relative;
    margin: 30px auto 0;
    width: fit-content;
    z-index: 10;
}

.slide-prev,
.slide-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(210, 210, 215, 0.28);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.3s ease;
    color: #1d1d1f;
    font-weight: bold;
}

.slide-prev:hover,
.slide-next:hover {
    background-color: rgba(210, 210, 215, 0.4);
}

.slide-prev:focus,
.slide-next:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(210, 210, 215, 0.4);
}

.slide-prev:disabled,
.slide-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slide-prev:before {
    content: "←";
    font-size: 18px;
    font-weight: bold;
}

.slide-next:before {
    content: "→";
    font-size: 18px;
    font-weight: bold;
}

.feature-card {
    background-color: var(--current-card-background);
    border-radius: 20px;
    padding: 15px;
    text-align: left;
    transition: var(--transition);
    height: auto;
    min-height: 100px;
    min-width: 380px;
    max-width: 380px;
    flex: 0 0 380px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    scroll-snap-align: start;
    position: relative;
}

.feature-card:hover {
    /* Hover-Effekt entfernt */
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feature-card .feature-icon {
    font-size: 30px;
    color: var(--current-card-text);
    margin-bottom: 10px;
    display: block;
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--current-card-text);
}

.feature-card p {
    color: var(--current-section-header-text);
    font-size: 16px;
    line-height: 1.4;
}

@media (max-width: 992px) {
    .feature-card {
        min-height: 90px;
    }
}

@media (max-width: 576px) {
    .feature-card {
        min-height: 80px;
    }
}

/* Problem-Lösung Section */
.problem-solution {
    padding: var(--spacing-xl) 0;
    background-color: var(--current-page-background);
}

.problem-solution-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    min-height: 600px; /* Erhöhte Mindesthöhe für die Kacheln */
}


/* Neue Produkt-Kacheln Stile */
.product-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    min-height: 550px; /* Erhöhte Mindesthöhe für die Karten */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

.dark-card {
    background-color: #666;
    color: #fff;
}

.problem-card {
    position: relative;
}

.card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.solution-card .background-img {
    object-position: center bottom;
    object-fit: cover;
    background-color: #666;
    filter: brightness(0.5);
    transform: translateY(0);
    height: 100%;
    width: 100%;
}

.problem-card .background-img {
    filter: brightness(0.5);
}

.overlay-text {
    position: absolute;
    z-index: 2;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 30px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.light-card {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

.solution-card {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.solution-text {
    color: #fff;
    background: none;
    height: auto;
    max-height: 70%;
}

.solution-text .product-name,
.solution-text .product-tagline,
.solution-text .product-description {
    color: #fff;
}

/* Sicherstellen, dass die Tagline in der solution-card dieselbe Größe hat */
.solution-card .product-tagline {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.solution-card .solution-icon {
    font-size: 40px;
    color: #fff;
    margin-bottom: 20px;
    display: block;
}

.solution-card h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #fff;
}

.solution-card p {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
}

.product-info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
}

.product-name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.product-tagline {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.product-description {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.product-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dark-card .product-name {
    color: rgba(255, 255, 255, 0.7);
}

.light-card .product-name {
    color: var(--current-section-header-text);
}

/* Weitere Stile für die Produkt-Kacheln */
.product-card .btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.dark-card .btn {
    background-color: #0071e3;
    color: white;
}

.light-card .btn {
    background-color: #0071e3;
    color: white;
}



/* Einsatzmöglichkeiten Section */
.use-cases {
    padding: var(--spacing-xl) 0;
    background-color: var(--current-page-background);
    overflow: visible;
}

.use-cases .container {
    max-width: 100%;
    padding: 0;
    overflow: hidden; /* Verhindert Überlauf */
    position: relative;
}

.use-cases .section-header h2 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--current-section-header-color);
}

/* Neue Gründe-Slider Stile */
.reasons-slider {
    display: flex;
    overflow-x: auto; /* Erlaubt horizontales Scrollen im Slider */
    gap: 30px;
    margin-top: 60px;
    padding: 20px 0 40px;
    scroll-snap-type: x mandatory; /* Aktiviert Snap-Scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    position: relative;
    width: calc(100% - 40px); /* Noch mehr Platz für die Kacheln */
    margin-left: 20px; /* Reduzierter Rand für bessere Sichtbarkeit */
    padding-right: 0; /* Kein rechter Innenabstand für bessere Sichtbarkeit */
    padding-bottom: 60px; /* Platz für die Navigationspunkte */
}

/* Slider Navigation Dots */
.use-cases::after {
    content: '';
    display: flex;
    justify-content: center;
    gap: 8px;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
}

.use-cases .slider-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.use-cases .slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d1d6;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.use-cases .slider-dot.active {
    background-color: #86868b;
}

.reasons-slider::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.reason-card {
    background-color: var(--current-card-background);
    border-radius: 30px; /* Rundere Ecken */
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    min-width: 504px; /* 20% breiter: 420px * 1.2 = 504px */
    width: 504px; /* 20% breiter: 420px * 1.2 = 504px */
    height: 520px;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.reason-content {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.reason-card h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--current-card-text);
    margin-bottom: 10px;
}

.reason-card h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--current-card-text);
    margin-bottom: 15px;
    line-height: 1.3;
}

.reason-card p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--current-card-text);
    margin-bottom: 0;
    flex: 1;
}

.more-info {
    color: #0071e3;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
}

.more-info i {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.2s ease;
}

.more-info:hover i {
    transform: translateX(3px);
}

.reason-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.reason-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.reason-card:hover .reason-image img {
    transform: scale(1.05);
}

.use-case-icon {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.use-case-card h3 {
    font-size: 22px;
    margin-bottom: var(--spacing-xs);
    color: var(--current-card-text);
}

.use-case-card h4 {
    font-size: 18px;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
    font-weight: 500;
}

.use-case-card p {
    color: var(--current-card-text);
    margin-top: auto;
}

/* Offline zu Online Bereich */
.offline-to-online {
    padding: 80px 0 120px;
    position: relative;
    overflow: hidden;
    background-color: var(--current-page-background);
    max-width: 100%;
    width: 100%;
    will-change: transform;
    z-index: 1;
}

/* Offline-zu-Online-Sektion während der Sichtbarkeit im Viewport */
.offline-to-online.in-viewport {
    contain: layout paint; /* Verbessert Rendering-Performance */
}

/* Vergleichs-Slider Styles - komplette Überarbeitung */
.blur-slider-container {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px; /* Mehr Abstand nach unten */
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    z-index: 1;
    height: 90vh;
    max-height: 750px; 
    background: transparent;
}

.comparison-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
    border-radius: 24px;
    background-color: transparent;
}

.comparison-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    border-radius: 24px;
    background-color: transparent;
}

.comparison-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    display: block;
}

/* Blur-Effekt für das erste Bild */
.comparison-item.blurred img {
    filter: blur(8px);
}

/* Zweites Bild wird rechts ausgerichtet */
.comparison-item:nth-child(2) {
    z-index: 2;
    clip-path: inset(0 0 0 50%);
    background-color: transparent;
}

/* Hover-Effekt nur auf dem Container */
.blur-slider-container:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
}

/* Slider-Steuerelemente */
.comparison-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 40px;
    transform: translateX(-50%);
    cursor: ew-resize;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    height: 100%;
    pointer-events: auto;
}

.slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    height: 100%;
}

.slider-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: transform 0.2s ease;
}

.comparison-slider-handle:hover .slider-knob {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: #f5f5f5;
}

/* Responsive-Anpassungen */
@media (max-width: 768px) {
    .blur-slider-container {
        height: 60vh;
        max-height: 500px;
        width: calc(100% - 40px);
        margin-bottom: 40px; /* Kleinerer Abstand auf mobilen Geräten */
    }
    
    .slider-knob {
        width: 36px;
        height: 36px;
    }
}

/* Offline zu Online Bereich */
.offline-to-online {
    padding: 80px 0 120px;
    position: relative;
    overflow: hidden;
    background-color: var(--current-page-background);
    max-width: 100%;
    width: 100%;
    will-change: transform;
    z-index: 1;
}

/* Überschrift für den Offline zu Online Bereich */
.offline-to-online h2 {
    font-weight: 700;
    font-size: 2.5rem;
    margin-top: 60px; /* Mehr Abstand nach oben */
    margin-bottom: 25px;
    text-align: center;
    color: var(--current-section-header-color);
}

/* Text-Bereich unter dem Slider */
.offline-to-online-section .text-content {
    margin-top: 60px; /* Abstand nach oben */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Container für Text und Beschreibung */
.offline-to-online-section h2, 
.offline-to-online-section p {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    color: var(--current-section-header-color);
}

.offline-to-online-section p {
    color: var(--current-section-header-text);
}

/* Textstil für Offline-zu-Online-Bereich */
.offline-online-text-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.offline-online-text-center h3 {
    font-size: 28px;
    margin-bottom: 15px;
    color: var(--current-section-header-color);
}

.offline-online-text-center p {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--current-section-header-text);
}

.button-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.blue-button {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
}

/* Klasse wird hinzugefügt, wenn der Bereich sichtbar ist */
.section-visible {
    will-change: auto; /* Zurücksetzen von will-change nach Sichtbarkeit */
}

/* Optimierter Parallax-Bereich */
.parallax-main-container {
    min-height: 100vh;
    height: auto;
    position: relative;
    z-index: 1;
    margin: 0; /* Margin auf beiden Seiten entfernt */
    background-color: #000;
}

.parallax-section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.fullscreen-parallax {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 100vh;
}

.parallax-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.parallax-layer.parallax-background {
    z-index: 1;
}

.parallax-layer.parallax-headline {
    z-index: 3 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    transform: none !important;
    padding-left: 20px;
}

.parallax-layer.parallax-middle-layer {
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Entferne die falschen Stile */
.parallax-layer.parallax-middle-layer:hover {
    transform: none;
    z-index: 4;
}

.parallax-layer.parallax-back-layer {
    z-index: 5;
    position: absolute;
    bottom: -50px; /* Verschiebe das Bild weiter nach unten */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-layer.parallax-back-layer img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    object-position: bottom center;
    display: block;
    position: absolute;
    bottom: -50px; /* Verschiebe das Bild weiter nach unten */
    left: 0;
}

.ai-headline {
    font-size: 92px;
    font-weight: 800;
    color: var(--white-color);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 1;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    white-space: pre-wrap;
}

/* Vergleichstabelle Styles */
.comparison-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--current-page-background);
    position: relative;
    overflow: hidden;
}

.comparison-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 40px;
    border-radius: var(--border-radius);
    background-color: var(--current-card-background);
    box-shadow: var(--box-shadow);
}

.table-wrapper {
    padding: 20px;
    min-width: 100%;
}
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    min-width: 800px;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(224, 224, 224, 0.1);
    font-size: 14px;
    line-height: 1.5;
    color: var(--current-card-text);
}

.comparison-table th {
    font-weight: 700;
    color: var(--current-section-header-color);
    background-color: rgba(224, 224, 224, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;
}

.comparison-table td:first-child {
    font-weight: 600;
    color: var(--current-section-header-color);
    min-width: 150px;
}

.comparison-table td {
    position: relative;
}

.comparison-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 5px;
    color: var(--primary-color);
}

.comparison-icon svg {
    width: 24px;
    height: 24px;
    stroke: #000000;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.traditional {
    background-color: rgba(224, 224, 224, 0.03);
    color: var(--current-card-text);
}

/* Media queries für responsive Tabelle */
@media (max-width: 992px) {
    .comparison-table td {
        padding: 12px 10px;
        font-size: 13px;
    }
    
    .comparison-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    
    .comparison-icon svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 768px) {
    .comparison-table-container {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        border-radius: 0;
    }
    
    .table-wrapper {
        padding: 15px;
    }
    
    .comparison-table td {
        padding: 10px 8px;
        font-size: 12px;
    }
}

/* Hero Header Styles */
.hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    padding: 0 0 40px 0;
    margin-bottom: 40px;
}

.hero-title {
    font-size: 36px;
    font-weight: 600;
    color: var(--current-section-header-color);
    text-align: left;
    line-height: 1.2;
    margin: 0;
    padding-left: 0;
}

.hero-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--current-section-header-color);
    text-align: right;
    margin: 0;
    align-self: flex-end;
}

/* Features & Advantages Bereich */
.features-advantages {
    padding: 120px 0 40px; /* Reduziertes Padding unten für einen kleineren grauen Abstand */
    background-color: var(--current-features-advantages-bg);
    position: relative;
    overflow: visible; /* Wichtig: Ermöglicht dem Inhalt, über den Container hinauszugehen */
    background-image: linear-gradient(to bottom, var(--current-features-advantages-bg), var(--current-features-advantages-bg)), 
                      url('images/parallax-back.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.features-advantages .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.features-advantages .section-header {
    text-align: left;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.features-advantages-grid-wrapper {
    position: relative;
    overflow: visible;
    width: 100vw;
    margin-left: calc(-50vw + 50%); /* Über die gesamte Bildschirmbreite erstrecken */
    padding: 0;
    margin-bottom: 60px; /* Platz für die Pfeile unten */
}

.features-advantages-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 30px;
    padding: 20px 0 30px 0;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    /* Präzise Formel für die exakte Ausrichtung mit der Überschrift */
    padding-left: max(20px, calc(50vw - 600px + 20px));
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.features-advantages-grid.grabbing {
    cursor: grabbing;
    scroll-behavior: auto; /* Deaktiviert smooth-scrolling während des Ziehens */
}

.features-advantages-grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari und Opera */
}

.feature-advantage-card {
    flex: 0 0 350px;
    min-width: 350px;
    background-color: var(--current-card-background);
    border-radius: 20px;
    padding: 30px 35px 60px 35px; /* Angepasster Padding-Bottom für weniger Leerraum */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.feature-advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.feature-advantage-card .feature-icon {
    font-size: 30px;
    color: var(--current-card-text);
    margin-bottom: 10px;
    display: block;
}

.feature-advantage-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--current-card-text);
}

.feature-advantage-card p {
    color: var(--current-section-header-text);
    font-size: 16px;
    line-height: 1.4;
}

.feature-advantage-description {
    color: var(--text-color);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px; /* Etwas Abstand zum Plus-Button */
}

@media (max-width: 768px) {
    .feature-advantage-card {
        flex: 0 0 300px;
        min-width: 300px;
        padding: 25px 30px;
    }
    
    .features-advantages .section-header {
        margin-bottom: 30px;
    }
    
    .features-advantages::before,
    .features-advantages::after {
        width: 40px;
    }
    
    .features-advantages-nav {
        margin: 20px 20px 0 auto;
    }
}

@media (max-width: 992px) {
    .feature-advantage-card {
        flex: 0 0 320px;
        min-width: 320px;
    }
    
    .features-advantages-nav {
        margin: 20px 50px 0 auto;
    }
}

/* Weitere Icon-Farben auf der gesamten Seite anpassen */
.card-icon i,
.feature-icon i,
.checkout-feature-item .feature-icon i,
.info-item i,
.social-media a i {
    color: var(--current-card-text);
}

/* SVG-Icon-Farben in der Vergleichstabelle */
.comparison-icon svg, 
svg.icon {
    stroke: var(--current-card-text);
}

/* Weitere spezifische Icons */
.use-case-icon i,
.reason-card i,
.more-info i,
.feature-item .feature-number,
.personalization-card .card-icon i {
    color: var(--current-card-text);
}

/* Sicherstellen, dass alle Abschnitte normal im Seitenfluss sind */
section {
    position: relative;
}

/* Entferne die Exit-Button-Stile, da dieser nicht mehr verwendet wird */
.exit-parallax, 
.exit-parallax.visible,
#exit-parallax-btn,
#exit-parallax-btn i,
.scroll-indicator {
    display: none;
}

@media (max-width: 768px) {
    .ai-headline {
        font-size: 42px;
    }
    
    .parallax-layer.parallax-middle-layer img {
        width: 80%;
    }
    
    .parallax-layer.parallax-back-layer img {
        max-height: 50vh;
        bottom: -30px; /* Anpassung für Mobile */
    }
    
    .parallax-layer.parallax-headline {
        top: -15px; /* Höher auf mobilen Geräten, aber immer noch oberhalb */
    }
    
    .parallax-main-container {
        margin: 40px 0;
    }
    
    /* Bestehende Tabellen-Stile */
    .comparison-table-container {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
        max-width: calc(100% + 40px);
        border-radius: 0;
    }
    
    .table-wrapper {
        padding: 15px;
    }
    
    .comparison-table td {
        padding: 10px 8px;
        font-size: 12px;
    }
}

/* Optionale Anpassung des Textes oberhalb des Sliders */
.offline-to-online-section h2, 
.offline-to-online-section p {
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
    background-color: transparent; /* Hintergrund transparent */
}

/* Stelle sicher, dass alle umliegenden Container auch keinen Hintergrund haben */
.offline-to-online .container,
.offline-to-online .section-header {
    background-color: transparent;
}

/* Leichter Schatten für den Slider */
.comparison-slider {
    box-shadow: none;
    transition: none;
}

/* Leichter Hover-Effekt */
.comparison-slider:hover {
    box-shadow: none;
}

/* Styles für den Erklärungs-Container */
.feature-explanation-container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    margin-top: 20px; /* Geringerer Abstand nach oben */
    margin-bottom: 40px;
    display: none;
    background-color: var(--current-card-background);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    max-height: 0;
    opacity: 0;
    position: relative;
    z-index: 10; /* Z-Index niedriger als bei den Pfeilen */
    transform-origin: top center;
}

.feature-explanation-container.active {
    display: block;
    max-height: 1000px;
    opacity: 1;
}

.feature-explanation {
    padding: 60px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.feature-explanation-content-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 40px;
}

.feature-explanation-image {
    flex: 0 0 45%;
    max-width: 45%;
    height: 450px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
}

.feature-explanation-image::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f7;
    z-index: 0;
}

.feature-explanation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

.feature-explanation-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--current-section-header-color);
}

.feature-explanation-content {
    font-size: 17px;
    line-height: 1.7;
    color: var(--current-section-header-text);
    margin-bottom: 25px;
}

.feature-explanation-close {
    display: none; /* Verstecke den Button anstatt ihn komplett zu entfernen */
}

.feature-explanation-close:hover {
    display: none;
}

/* Animation für das Auf- und Zuschieben */
.slide-down {
    animation: slideDown 0.25s ease forwards;
}

.slide-up {
    animation: slideUp 0.25s ease forwards;
}

@keyframes slideDown {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        max-height: 1000px;
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        max-height: 1000px;
        opacity: 1;
        transform: translateY(0);
    }
    to {
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 1400px) {
    .feature-explanation-container {
        width: 90%;
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    .feature-explanation-container {
        width: 90%;
        max-width: 960px;
    }
    
    .feature-explanation {
        padding: 50px;
    }
    
    .feature-explanation-content-wrapper {
        flex: 0 0 48%;
        max-width: 48%;
        padding-right: 30px;
    }
    
    .feature-explanation-title {
        font-size: 28px;
    }

    .feature-explanation-content {
        font-size: 16px;
    }
    
    .feature-explanation-image {
        flex: 0 0 48%;
        max-width: 48%;
    }
}

@media (max-width: 992px) {
    .feature-explanation-container {
        width: 90%;
        max-width: 720px;
    }
    
    .feature-explanation {
        padding: 40px;
    }
    
    .feature-explanation-content-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .feature-explanation-image {
        flex: 0 0 100%;
        max-width: 100%;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .feature-explanation-container {
        width: 90%;
    }
    
    .feature-explanation {
        padding: 30px;
    }
    
    .feature-explanation-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .feature-explanation-content {
        font-size: 15px;
        line-height: 1.6;
    }
    
    .feature-explanation-image {
        height: 280px;
    }
    
    .feature-explanation-close {
        top: 15px;
        right: 15px;
        width: 25px;
        height: 25px;
        font-size: 16px;
    }
}

/* Füge diese Regel hinzu, um sicherzustellen, dass der Container die gleiche Breite wie der Container der Überschrift hat */
.features-advantages .container,
.feature-explanation-container {
    max-width: var(--container-width, 1200px);
    padding-left: var(--container-padding, 15px);
    padding-right: var(--container-padding, 15px);
}

/* Schwarzer Plus-Button für Feature-Karten */
.plus-button {
    position: absolute;
    bottom: 20px;
    right: 25px;
    width: 28px;
    height: 28px;
    background-color: var(--current-card-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--current-card-background);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    /* Verhindert das Verformen beim Wechsel zum Minus-Symbol */
    line-height: 1;
    text-align: center;
    /* Feste Breite und Höhe für das Symbol selbst */
    min-width: 28px;
    min-height: 28px;
    /* Verhindert Größenänderung beim Klicken */
    transform-origin: center;
    box-sizing: border-box;
    padding: 0;
}

/* Das Symbol selbst (+ und −) */
.plus-button span {
    display: block;
    line-height: 1;
    width: 16px;
    height: 16px;
    text-align: center;
    transform: translateY(-1px); /* Leichte vertikale Anpassung für optische Zentrierung */
}

.plus-button:hover {
    transform: scale(1.1);
}

/* Aktiver Zustand für den Plus-Button */
.plus-button.active {
    background-color: #0071e3;
    transform: scale(1.1);
}

.features-advantages-nav {
    position: relative;
    margin: 20px 150px 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: fit-content;
    z-index: 30; /* Höherer z-index als die Erklärungsbox */
}

.features-advantages-nav .nav-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(210, 210, 215, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.3s ease;
    color: #1d1d1f;
    font-weight: bold;
    font-size: 18px;
}

.features-advantages-nav .nav-button:hover {
    background-color: rgba(210, 210, 215, 0.7);
}

.features-advantages-nav .nav-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(210, 210, 215, 0.4);
}

.features-advantages-nav .nav-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.feature-advantage-icon {
    font-size: 30px;
    color: var(--current-card-text);
    margin-bottom: 20px;
}

.feature-advantage-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--current-card-text);
}

.feature-advantage-description {
    color: var(--current-section-header-text);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px; /* Etwas Abstand zum Plus-Button */
}

/* Füge extra Abstand nach der letzten Karte hinzu für besseres Edge-to-Edge-Sliding */
.features-advantages-grid::after {
    content: "";
    min-width: 50vw;
    padding-right: 20vw;
}

/* Leichter Schatten links und rechts zur visuellen Verbesserung des Sliders */
.features-advantages::before,
.features-advantages .side-gradient::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.features-advantages::before {
    left: 0;
    background: linear-gradient(to right, rgba(248, 249, 250, 0.9), rgba(248, 249, 250, 0));
}

.features-advantages .side-gradient::after {
    right: 0;
    background: linear-gradient(to left, rgba(248, 249, 250, 0.9), rgba(248, 249, 250, 0));
}

/* Übergangsbereich zur Parallax-Rubrik - vereinfacht ohne Verlauf */
.features-advantages::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Reduzierte Höhe für einen schmaleren Abstand */
    background-color: #f8f9fa; /* Einfache graue Fläche statt Verlauf */
    pointer-events: none;
    z-index: 1;
}

/* Hilfs-Element für die seitlichen Schatten */
.features-advantages .side-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .features-advantages .container {
        padding: 0 15px;
    }
    
    .features-advantages-grid {
        gap: 20px;
        /* Vereinfachte mobile Ausrichtung, die mit der Überschrift übereinstimmt */
        padding-left: 15px;
    }
}

/* Footer Styles */
.footer {
    background-color: var(--current-features-advantages-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 0 20px;
    color: var(--current-section-header-color);
    border-top: 1px solid rgba(224, 224, 224, 0.1);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.footer-logo {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-links ul {
    display: flex;
    gap: 25px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--current-section-header-color);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(224, 224, 224, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--current-section-header-color);
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(224, 224, 224, 0.1);
    font-size: 14px;
    color: var(--current-section-header-text);
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links ul {
        justify-content: center;
        margin: 15px 0;
    }
    
    .footer-social {
        margin-top: 15px;
    }
}

/* Zukunft Section (Rubrik 8) */
.zukunft-section {
    width: 100%;
    min-height: 150vh; /* Reduziert von 200vh */
    background-color: #161618; /* Von rgba(66,66,69,0.7) auf #161618 geändert - dunkel, aber heller als die schwarzen Kacheln */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: visible;
    padding: 0;
    z-index: 1;
}

.zukunft-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 1400px;
    position: relative;
    height: 100vh;
    margin-left: 15%;
}

.zukunft-heading {
    font-size: 150px;
    font-weight: 800;
    color: #fff;
    text-align: left;
    letter-spacing: 2px;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    text-transform: none;
    --strike-width: 0%; /* Variable für die Strichbreite, die durch JS gesteuert wird */
}

.zukunft-line {
    width: 60%; /* Wieder auf fixe Breite setzen, kein Slide-Effekt */
    height: 3px;
    background-color: #fff;
    position: absolute;
    top: calc(45% + 70px);
}

.zukunft-content {
    margin-top: 5vh; /* Von 10vh auf 5vh reduziert für noch geringeren Abstand zur Headline */
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    max-width: 800px;
    padding: 80px 20px 800px 0; /* Padding-bottom von 250px auf 800px erhöht für viermal so viel Platz unten */
    opacity: 0; /* Initial unsichtbar */
    transform: translateY(30px); /* Leicht nach unten versetzt für die Animation */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Animation für das Einblenden */
    margin-left: 15%; /* Gleiche Ausrichtung wie die Headline */
}

.zukunft-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.zukunft-item {
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.zukunft-item.active {
    opacity: 1;
}

.zukunft-item h3 {
    font-size: 32px;
    margin-bottom: 15px;
    font-weight: 600;
}

.zukunft-item p {
    font-size: 18px;
    line-height: 1.6;
}

/* Durchstreich-Effekt für die Zukunft-Headline separat definieren */
.zukunft-heading::before {
    content: '';
    position: absolute;
    height: 20px;
    background-color: rgba(255, 240, 220, 0.9); /* Weniger gelb, mehr weiß mit leichtem Goldschimmer */
    top: 50%;
    transform: translateY(-50%);
    width: var(--strike-width, 0%);
    left: 0;
    right: auto;
    transition: width 0.2s ease-out;
    z-index: 1;
    box-shadow: 0 0 15px 5px rgba(255, 240, 220, 0.6), 0 0 30px 10px rgba(255, 240, 220, 0.3); /* Subtilerer, weicherer Glüheffekt */
    border-radius: 3px; /* Leicht abgerundete Kanten für weicheres Erscheinungsbild */
}

.zukunft-heading.strikethrough::before {
    width: 100%; /* Volle Breite beim Durchstreichen */
}

.zukunft-heading.removing-strikethrough::before {
    width: 0; /* Zurück auf 0 beim Entfernen */
    transition: width 0.2s ease-out; /* Kürzere Übergangszeit für responsiveres Verhalten */
}

/* Hintergrundeffekte für die Zukunft-Sektion */
.zukunft-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.zukunft-bg-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
}

.zukunft-bg-circle:nth-child(1) {
    width: 400px;
    height: 400px;
    top: 20%;
    right: 15%;
}

.zukunft-bg-circle:nth-child(2) {
    width: 300px;
    height: 300px;
    bottom: 10%;
    left: 10%;
}

/* Responsive Anpassungen für die Zukunft-Sektion */
@media (max-width: 1400px) {
    .zukunft-heading {
        font-size: 130px;
    }
}

@media (max-width: 992px) {
    .zukunft-heading {
        font-size: 100px;
    }
    
    .zukunft-section {
        min-height: 180vh;
    }
    
    .zukunft-container {
        margin-left: 10%;
    }
    
    .zukunft-item h3 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .zukunft-heading {
        font-size: 80px;
    }
    
    .zukunft-line {
        width: 70%;
    }
    
    .zukunft-section {
        min-height: 160vh;
    }
    
    .zukunft-container {
        margin-left: 5%;
    }
    
    .zukunft-item h3 {
        font-size: 24px;
    }
    
    .zukunft-item p {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .zukunft-heading {
        font-size: 60px;
    }
    
    .zukunft-line {
        width: 80%;
    }
    
    .zukunft-section {
        min-height: 140vh;
    }
    
    .zukunft-container {
        margin-left: 20px;
    }
    
    .zukunft-item h3 {
        font-size: 22px;
    }
}

/* Highlight-Text Glow-Effekt - stabiler und ohne Pulsieren */
.highlight-text {
    position: relative;
    display: inline;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    transition: color 0.5s ease, text-shadow 0.5s ease, font-weight 0.3s ease, font-size 0.3s ease;
    font-size: 1.1em; /* Größere Schrift für hervorgehobenen Text */
}

/* Aktiver Glow-Effekt */
.highlight-text.glow {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 
        0 0 10px rgba(255, 223, 165, 0.7),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3);
    transition: color 0.5s ease, text-shadow 0.8s ease, font-weight 0.3s ease, font-size 0.3s ease;
    font-size: 1.15em; /* Noch etwas größere Schrift im aktiven Zustand */
}

/* Spezifische Anpassung für die schwarze Zukunft-Sektion */
.zukunft-content .highlight-text.glow {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 
        0 0 10px rgba(255, 230, 180, 0.8),
        0 0 20px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4);
    font-size: 1.15em; /* Konsistente Größe in der Zukunft-Sektion */
}

/* Entfernung des Pulsier-Effekts */
@keyframes glow-pulse {
    0% { text-shadow: 
        0 0 10px rgba(255, 223, 165, 0.7),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3); 
    }
    50% { text-shadow: 
        0 0 15px rgba(255, 223, 165, 0.8),
        0 0 25px rgba(255, 215, 0, 0.6),
        0 0 35px rgba(255, 215, 0, 0.4); 
    }
    100% { text-shadow: 
        0 0 10px rgba(255, 223, 165, 0.7),
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.3); 
    }
}

/* Zukunft Overview Styles - Neu gestaltet nach Apple-Vorbild */
.zukunft-overview {
    padding: 0 0 100px;
    position: relative;
    color: #fff;
}

.overview-headline-container {
    /* Entferne Stile, da nicht mehr benötigt */
}

.overview-headline {
    /* Entferne Stile, da nicht mehr benötigt */
}

.overview-headline h2 {
    /* Entferne Stile, da nicht mehr benötigt */
}

.overview-headline p {
    /* Entferne Stile, da nicht mehr benötigt */
}

.overview-headline-direct {
    font-size: 48px; /* Von 42px auf 48px erhöht für eine noch größere, ausdrucksstärkere Headline */
    font-weight: 700;
    margin-bottom: 0px; /* Von 2px auf 0px reduziert für keinen Abstand zum Subtext */
    margin-top: 60px; /* Von 120px auf 60px reduziert für deutlich weniger Abstand zum Text darüber */
    color: #ffffff;
    line-height: 1.2;
}

.overview-subline-direct {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 50px 0;
    max-width: 600px;
    line-height: 1.3; /* Hinzugefügt für bessere Lesbarkeit */
}

/* Zukunft Overview Styles - Neu gestaltet nach Apple-Vorbild */
.zukunft-overview {
    padding: 0 0 100px;
    position: relative;
    color: #fff;
}

/* Grid-Layout für die Kacheln */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Ursprünglicher Wert */
    padding: 0;
    margin-top: 0;
    max-width: 1150px;
    margin-left: 0; /* Ursprünglicher Wert */
    margin-right: auto;
}

.overview-card {
    background-color: #000000; /* Schwarz für die Kacheln - ursprünglich */
    border-radius: 15px;
    padding: 35px; /* Ursprünglicher Wert */
    margin: 0; /* Ursprünglicher Wert */
    text-align: left;
    flex: 1;
    min-width: 320px; /* Ursprünglicher Wert */
    max-width: 380px; /* Ursprünglicher Wert */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.overview-card:hover {
    transform: none;
    background-color: #000000;
    border-color: transparent;
}

.overview-icon {
    width: 75px; /* Ursprünglicher Wert */
    height: 75px; /* Ursprünglicher Wert */
    background-color: rgba(40, 40, 50, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px; /* Ursprünglicher Wert */
    font-size: 28px; /* Ursprünglicher Wert */
    color: #ffffff;
}

.overview-card h3 {
    font-size: 20px; /* Ursprünglicher Wert (nicht 18px wie im Kommentar) */
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffffff;
}

.overview-card p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
}

/* Dark Mode - nur sehr subtile Anpassung */
html.dark-mode .overview-card {
    background-color: #1a1a1a !important; /* Sehr dunkles Grau statt schwarz im Dark Mode */
}

html.dark-mode .overview-card h3 {
    color: #ffffff !important;
    }
    
html.dark-mode .overview-card p {
    color: rgba(255, 255, 255, 0.8) !important;
    }
    
html.dark-mode .overview-icon {
    background-color: rgba(60, 60, 70, 0.6);
    color: #ffffff !important;
}

/* Apple-Style Karte für Smart Basket KI */
.apple-style-card {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.central-icon {
    width: 120px; /* Von 85px auf 120px erhöht */
    height: 120px; /* Von 85px auf 120px erhöht */
    margin-bottom: 20px; /* Von 16px auf 20px erhöht */
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-circle-icon {
    width: 100px; /* Icon-Größe */
    height: 100px; /* Icon-Größe */
    border-radius: 50%;
    background: conic-gradient(
        #ffb21e, /* Gelb */
        #ff433d, /* Rot */
        #ff9f0a, /* Orange */
        #30d158, /* Grün */
        #bf5af2, /* Lila */
        #0a84ff  /* Blau */
    );
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ai-circle-icon::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #000000; /* Schwarzer innerer Kreis */
    z-index: 1;
}

.ai-circle-icon::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-image: conic-gradient(
        #ffb21e, /* Gelb */
        #ff433d, /* Rot */
        #ff9f0a, /* Orange */
        #30d158, /* Grün */
        #bf5af2, /* Lila */
        #0a84ff  /* Blau */
    );
    border-image-slice: 1;
    z-index: 2;
}

.central-title {
    font-size: 24px; /* Von 22px auf 24px erhöht */
    font-weight: 500;
    margin: 0;
    color: #ffffff;
    text-align: center;
}

/* === LOGO STYLES - NUR TRANSPARENZ === */
.logo,
.logo a,
.logo-img {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark Mode Implementierung */
html.dark-mode {
    /* Dark Mode Variablen aktivieren */
    --current-page-background: var(--page-background-dark);
    --current-text-color: var(--text-color-dark);
    --current-header-background: var(--header-background-dark);
    --current-header-text: var(--header-text-dark);
    --current-header-background-scrolled: var(--header-background-scrolled-dark);
    --current-header-shadow: var(--header-shadow-dark);
    --current-header-shadow-scrolled: var(--header-shadow-scrolled-dark);
    --current-card-background: var(--card-background-dark);
    --current-card-text: var(--card-text-dark);
    --current-btn-secondary-color: var(--btn-secondary-color-dark);
    --current-btn-secondary-border: var(--btn-secondary-border-dark);
    --current-btn-secondary-hover-bg: var(--btn-secondary-hover-bg-dark);
    --current-btn-secondary-hover-color: var(--btn-secondary-hover-color-dark);
    --current-features-advantages-bg: var(--features-advantages-bg-dark);
    --current-section-header-color: var(--section-header-color-dark);
    --current-section-header-text: var(--section-header-text-dark);
}

/* Grundlegende Dark Mode Styles */
html.dark-mode body {
    background-color: var(--current-page-background);
    color: var(--current-text-color);
}

/* Header Dark Mode */
html.dark-mode .sticky-header {
    background-color: var(--current-header-background);
    box-shadow: var(--current-header-shadow);
}

html.dark-mode .sticky-header.scrolled {
    background-color: var(--current-header-background-scrolled);
    box-shadow: var(--current-header-shadow-scrolled);
}

html.dark-mode .sticky-header .logo a {
    color: var(--current-header-text);
}

html.dark-mode .sticky-header .nav-menu a {
    color: var(--current-header-text);
}

html.dark-mode .sticky-header .mobile-menu-btn {
    color: var(--current-header-text);
}

/* Section Headers Dark Mode */
html.dark-mode .section-header h2 {
    color: var(--current-section-header-color);
}

html.dark-mode .section-header p {
    color: var(--current-section-header-text);
}

/* Buttons Dark Mode */
html.dark-mode .btn-secondary {
    background-color: transparent;
    color: var(--current-btn-secondary-color);
    border-color: var(--current-btn-secondary-border);
    transition: var(--transition);
}

html.dark-mode .btn-secondary:hover {
    background-color: var(--current-btn-secondary-hover-bg);
    color: var(--current-btn-secondary-hover-color);
}

/* Hero Section Dark Mode */
html.dark-mode .hero {
    background-color: var(--current-page-background);
}

html.dark-mode .hero h1 {
    color: var(--current-text-color);
}

html.dark-mode .subtitle {
    color: var(--current-text-color);
}

html.dark-mode .hero p {
    color: var(--current-section-header-text);
}

/* Cards Dark Mode */
html.dark-mode .feature-card {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

html.dark-mode .feature-advantage-card {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

html.dark-mode .reason-card {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

html.dark-mode .overview-card {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

/* Features Advantages Section Dark Mode */
html.dark-mode .features-advantages {
    background-color: var(--current-features-advantages-bg);
}

/* Footer Dark Mode (bereits dunkel, anpassen) */
html.dark-mode .footer {
    background-color: #0f0f0f; /* Noch dunkler für besseren Kontrast */
}

/* Comparison Table Dark Mode */
html.dark-mode .comparison-table-container {
    background-color: var(--current-card-background);
}

html.dark-mode .comparison-table th,
html.dark-mode .comparison-table td {
    color: var(--current-card-text);
    border-color: rgba(224, 224, 224, 0.2);
}

html.dark-mode .comparison-table tr:hover {
    background-color: rgba(224, 224, 224, 0.1);
}

/* Zukunft Section Dark Mode */
html.dark-mode .zukunft-section {
    background-color: var(--current-page-background);
}

html.dark-mode .zukunft-heading {
    color: var(--current-text-color);
}

html.dark-mode .zukunft-line {
    background-color: var(--current-text-color);
}

html.dark-mode .zukunft-item h3 {
    color: var(--current-text-color);
}

html.dark-mode .zukunft-item p {
    color: var(--current-section-header-text);
}

/* Problem Solution Cards Dark Mode */
html.dark-mode .light-card {
    background-color: var(--current-card-background);
}

html.dark-mode .light-card .product-name {
    color: var(--current-text-color);
}

/* Use Cases Dark Mode */
html.dark-mode .use-cases {
    background-color: var(--current-page-background);
}

/* Feature Explanation Dark Mode */
html.dark-mode .feature-explanation-container {
    background-color: var(--current-card-background);
}

html.dark-mode .feature-explanation-title {
    color: var(--current-text-color);
}

html.dark-mode .feature-explanation-content {
    color: var(--current-section-header-text);
}

/* Dark Mode Toggle Button Styling */
#darkModeToggle {
    background: transparent;
    border: none;
    color: var(--current-header-text);
    font-family: 'Inter', sans-serif; /* Gleiche Schriftart wie Navigation */
    font-size: 12px; /* Etwas größer als Navigation für bessere Lesbarkeit */
    font-weight: 400;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 0 var(--spacing-sm);
    height: 36px; /* Gleiche Höhe wie Navigation */
    display: flex;
    align-items: center;
    gap: 4px; /* Etwas mehr Abstand zwischen Text und Icon */
    margin-left: 15px;
    position: relative;
}

#darkModeToggle span {
    font-size: 12px; /* Etwas größer für bessere Lesbarkeit */
}

#darkModeToggle #modeIcon {
    font-size: 12px; /* Icon etwas größer */
}

#darkModeToggle:hover {
    color: var(--brand-color);
}

/* Dark Mode für Features-Advantages Navigation Buttons */
html.dark-mode .features-advantages-nav .nav-button {
    background-color: rgba(50, 50, 55, 0.6);
    color: #ffffff;
}

html.dark-mode .features-advantages-nav .nav-button:hover {
    background-color: rgba(50, 50, 55, 0.8);
}

html.dark-mode .features-advantages-nav .nav-button:focus {
    box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 4px rgba(50, 50, 55, 0.4);
}

/* Dark Mode für seitliche Verläufe */
html.dark-mode .features-advantages::before {
    background: linear-gradient(to right, var(--current-features-advantages-bg), rgba(36, 36, 36, 0));
}

html.dark-mode .features-advantages .side-gradient::after {
    background: linear-gradient(to left, var(--current-features-advantages-bg), rgba(36, 36, 36, 0));
}

html.dark-mode .features-advantages::after {
    background-color: var(--current-features-advantages-bg);
}

/* Overview Section Dark Mode */
html.dark-mode .overview-headline-direct {
    color: var(--current-text-color);
}

html.dark-mode .overview-subline-direct {
    color: var(--current-section-header-text);
}

/* Overview Cards Dark Mode - Korrektur */
html.dark-mode .overview-card {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

html.dark-mode .overview-card h3 {
    color: var(--current-card-text);
}

html.dark-mode .overview-card p {
    color: var(--current-section-header-text);
}

html.dark-mode .overview-icon {
    background-color: rgba(80, 80, 90, 0.6);
    color: var(--current-card-text);
}

/* Spezifische Dark Mode Anpassungen für die schwarzen Kacheln */
html.dark-mode .overview-card[style*="background-color: #000000"] {
    background-color: var(--current-card-background) !important;
}

html.dark-mode .overview-card[style*="background-color: #000000"] h3 {
    color: var(--current-card-text) !important;
}

html.dark-mode .overview-card[style*="background-color: #000000"] p {
    color: var(--current-section-header-text) !important;
}

html.dark-mode .overview-card[style*="background-color: #000000"] div[style*="color: #888888"] {
    color: var(--current-section-header-text) !important;
}

/* Overview Card Text Styles */
.card-subtitle {
    font-size: 14px;
    color: #888888;
    margin-bottom: 15px;
    text-align: center;
}

.card-medium-text {
    font-size: 18px;
    margin: 8px 0;
    text-align: center;
    color: var(--current-card-text);
}

.card-large-text {
    font-size: 34px;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    color: var(--current-card-text);
}

.card-extra-large-text {
    font-size: 52px;
    font-weight: bold;
    line-height: 1;
    color: var(--current-card-text);
}

.card-title {
    font-size: 24px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: var(--current-card-text);
}

.card-description {
    font-size: 16px;
    text-align: center;
    width: 100%;
    padding: 0 15px;
    margin-top: 8px;
    color: var(--current-section-header-text);
    font-weight: 400;
    line-height: 1.4;
}

.card-medium-subtitle {
    font-size: 26px;
    margin-top: 0;
    line-height: 1.2;
    color: var(--current-section-header-text);
}

.green-text {
    color: #00FF00 !important;
}

.dark-mode-card {
    background-color: #000000;
    color: #ffffff;
}

/* Dark Mode Überschreibungen für spezielle Karten */
html.dark-mode .dark-mode-card {
    background-color: var(--current-card-background) !important;
}

html.dark-mode .dark-mode-card .card-subtitle {
    color: var(--current-section-header-text) !important;
}

html.dark-mode .dark-mode-card .card-large-text {
    color: var(--current-card-text) !important;
}

html.dark-mode .dark-mode-card .card-extra-large-text {
    color: var(--current-card-text) !important;
}

html.dark-mode .dark-mode-card .card-title {
    color: var(--current-card-text) !important;
}

html.dark-mode .dark-mode-card .card-description {
    color: var(--current-section-header-text) !important;
}

html.dark-mode .dark-mode-card .card-medium-subtitle {
    color: var(--current-section-header-text) !important;
}

/* Responsive Anpassungen */
@media (max-width: 1024px) {
    .overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .zukunft-overview {
        padding-bottom: 70px;
    }
    
    .overview-headline-direct {
        font-size: 28px;
    }
    
    .overview-subline-direct {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .overview-card {
        padding: 25px 20px; /* Angepasst für mobile */
        min-height: 160px;
    }
    
    .overview-icon {
        width: 60px; /* Größer als vorher für ursprüngliche Proportionen */
        height: 60px;
        font-size: 24px; /* Größer als vorher */
    }
}

/* Card 4 - Spezielle Anpassungen für "ein Tap" Karte */
.overview-card:nth-child(4) .card-subtitle:last-of-type {
    margin-top: 25px; /* Mehr Abstand zwischen "für unendliche Möglichkeiten" und "ein Tap" */
}

/* Card 4 - "für unendliche Möglichkeiten" größer machen */
.overview-card:nth-child(4) .card-subtitle {
    font-size: 16px; /* Vergrößert von 14px auf 16px */
}

/* Card 5 - "Daten, die zählen" größer machen */
.overview-card:nth-child(5) .card-title {
    font-size: 26px; /* Vergrößert von 24px auf 26px */
}

/* Card 3 - Offline und E-Commerce Texte weiß machen */
.overview-card:nth-child(3) .card-large-text {
    color: #ffffff !important;
}

.overview-card:nth-child(3) .card-medium-text {
    color: #ffffff !important;
}

/* Card 6 - "30 % mehr" weiß und "Transaktionen" hellgrau */
.overview-card:nth-child(6) .card-extra-large-text,
.overview-card:nth-child(6) .card-large-text {
    color: #ffffff !important;
}

.overview-card:nth-child(6) .card-medium-subtitle {
    color: #888888 !important; /* Geändert von #cccccc auf #888888 für das gleiche Grau wie "Bis zu" */
}

/* Dark Mode Anpassungen für die spezifischen Karten */
html.dark-mode .overview-card:nth-child(3) .card-large-text {
    color: #ffffff !important;
}

html.dark-mode .overview-card:nth-child(3) .card-medium-text {
    color: #ffffff !important;
}

html.dark-mode .overview-card:nth-child(6) .card-extra-large-text,
html.dark-mode .overview-card:nth-child(6) .card-large-text {
    color: #ffffff !important;
}

html.dark-mode .overview-card:nth-child(6) .card-medium-subtitle {
    color: #888888 !important; /* Auch im Dark Mode das gleiche Grau wie "Bis zu" */
}

/* Overview Cards Dark Mode - Einheitliche Farbe für alle Kacheln */
html.dark-mode .overview-card {
    background-color: #2d2d2d !important; /* Einheitliches Dunkelgrau für alle Kacheln */
    color: #ffffff !important;
}

html.dark-mode .overview-card h3 {
    color: #ffffff !important;
}

html.dark-mode .overview-card p {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .overview-icon {
    background-color: rgba(80, 80, 90, 0.6) !important;
    color: #ffffff !important;
}

/* Spezifische Dark Mode Anpassungen für die schwarzen Kacheln - überschreiben */
html.dark-mode .overview-card[style*="background-color: #000000"] {
    background-color: #2d2d2d !important; /* Gleiche Farbe wie andere Kacheln */
}

html.dark-mode .overview-card[style*="background-color: #000000"] h3 {
    color: #ffffff !important;
}

html.dark-mode .overview-card[style*="background-color: #000000"] p {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .overview-card[style*="background-color: #000000"] div[style*="color: #888888"] {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark Mode Kacheln - alle auf einheitliche Farbe setzen */
html.dark-mode .dark-mode-card {
    background-color: #2d2d2d !important; /* Gleiche Farbe wie andere Kacheln */
}

html.dark-mode .dark-mode-card .card-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.dark-mode .dark-mode-card .card-large-text {
    color: #ffffff !important;
}

html.dark-mode .dark-mode-card .card-extra-large-text {
    color: #ffffff !important;
}

html.dark-mode .dark-mode-card .card-title {
    color: #ffffff !important;
}

html.dark-mode .dark-mode-card .card-description {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .dark-mode-card .card-medium-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .dark-mode-card .card-medium-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark Mode für die großen Kacheln (Neue Rubrik) */
html.dark-mode .neue-rubrik-section {
    background-color: #000000 !important; /* Schwarz statt der dunklen Seitenfarbe */
}

html.dark-mode .grid-item {
    background-color: var(--current-card-background) !important;
}

html.dark-mode .grid-item h3 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
}

html.dark-mode .grid-item p {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
}

html.dark-mode .grid-item .button {
    background: #0071e3 !important;
    color: #ffffff !important;
}

/* Dark Mode Footer - Vollständige Anpassung */
html.dark-mode .footer {
    background-color: #000000 !important; /* Schwarz statt der Kartenfarbe */
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .footer-logo {
    color: var(--current-text-color) !important;
}

html.dark-mode .footer-links a {
    color: var(--current-text-color) !important;
}

html.dark-mode .footer-links a:hover {
    color: var(--primary-color) !important;
}

html.dark-mode .footer-links a::after {
    background-color: var(--primary-color) !important;
}

html.dark-mode .footer-social a {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--current-text-color) !important;
}

html.dark-mode .footer-social a:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

html.dark-mode .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--current-section-header-text) !important;
}

/* Dark Mode für Impressum und Datenschutz Links - überschreibt inline-styles */
html.dark-mode .footer-bottom a[href*="impressum"],
html.dark-mode .footer-bottom a[href*="datenschutz"] {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .footer-bottom a[href*="impressum"]:hover,
html.dark-mode .footer-bottom a[href*="datenschutz"]:hover {
    color: var(--primary-color) !important;
}

/* ==============================================
   BOOKING MODAL DARK MODE STYLES
   ============================================== */

/* Booking Modal Overlay Dark Mode */
html.dark-mode .booking-modal-overlay {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(45, 45, 45, 0.95));
}

/* Booking Modal Container Dark Mode */
html.dark-mode .booking-modal {
    background: var(--current-card-background);
    color: var(--current-card-text);
}

/* Booking Modal Content Dark Mode */
html.dark-mode .booking-modal h2 {
    color: var(--current-card-text);
}

html.dark-mode .booking-modal .step-description {
    color: var(--current-section-header-text);
}

/* Progress Bar Dark Mode */
html.dark-mode .progress-bar {
    background-color: rgba(255, 255, 255, 0.1);
}

html.dark-mode .progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--brand-color));
}

/* Step Indicators Dark Mode */
html.dark-mode .step-indicator {
    color: var(--current-section-header-text);
}

html.dark-mode .step-indicator.active {
    color: var(--current-card-text);
}

html.dark-mode .step-indicator.active .step-number {
    background: linear-gradient(135deg, var(--primary-color), var(--brand-color));
    color: white;
}

html.dark-mode .step-indicator .step-number {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--current-section-header-text);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .step-indicator .step-label {
    color: var(--current-section-header-text);
}

html.dark-mode .step-indicator.active .step-label {
    color: var(--current-card-text);
}

/* Form Elements Dark Mode */
html.dark-mode .booking-form {
    background: var(--current-card-background);
    color: var(--current-card-text);
}

html.dark-mode .form-group label {
    color: var(--current-card-text);
}

html.dark-mode .form-control {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--current-card-text);
}

html.dark-mode .form-control:focus {
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2);
}

html.dark-mode .form-control::placeholder {
    color: var(--current-section-header-text);
}

/* Date Picker Dark Mode */
html.dark-mode .date-picker-container {
    position: relative;
}

html.dark-mode .calendar-icon {
    color: var(--current-section-header-text);
}

html.dark-mode .air-datepicker {
    background: var(--current-card-background) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .air-datepicker .air-datepicker-nav {
    background: var(--current-card-background) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .air-datepicker .air-datepicker-nav-title {
    color: var(--current-card-text) !important;
}

html.dark-mode .air-datepicker .air-datepicker-nav-action {
    color: var(--current-card-text) !important;
}

html.dark-mode .air-datepicker .air-datepicker-nav-action:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .air-datepicker .air-datepicker-body {
    color: var(--current-card-text) !important;
}

html.dark-mode .air-datepicker .air-datepicker-cell {
    color: var(--current-card-text) !important;
}

html.dark-mode .air-datepicker .air-datepicker-cell:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .air-datepicker .air-datepicker-cell.-selected- {
    background: var(--primary-color) !important;
    color: white !important;
}

html.dark-mode .air-datepicker .air-datepicker-cell.-current- {
    color: var(--primary-color) !important;
}

html.dark-mode .air-datepicker .air-datepicker-cell.-other-month- {
    color: var(--current-section-header-text) !important;
}

html.dark-mode .air-datepicker .air-datepicker-cell.-disabled- {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Time Select Dark Mode */
html.dark-mode .time-select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--current-card-text);
}

html.dark-mode .time-select:focus {
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.2);
}

html.dark-mode .time-select option {
    background-color: var(--current-card-background);
    color: var(--current-card-text);
}

/* Summary Container Dark Mode */
html.dark-mode .summary-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
}

html.dark-mode .summary-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark-mode .summary-label {
    color: var(--current-section-header-text);
}

html.dark-mode .summary-value {
    color: var(--current-card-text);
}

/* Checkbox Dark Mode */
html.dark-mode .checkbox-container {
    color: var(--current-card-text);
}

html.dark-mode .checkbox-container input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .checkbox-container input[type="checkbox"]:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

html.dark-mode .checkmark {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Form Navigation Buttons Dark Mode */
html.dark-mode .btn-next,
html.dark-mode .btn-prev {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

html.dark-mode .btn-next:hover,
html.dark-mode .btn-prev:hover {
    background-color: var(--primary-dark);
}

html.dark-mode .submit-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

html.dark-mode .submit-btn:hover {
    background-color: var(--primary-dark);
}

/* Booking Modal Close Button Dark Mode */
html.dark-mode .booking-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .booking-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

html.dark-mode .booking-modal-close::before,
html.dark-mode .booking-modal-close::after {
    background: var(--current-card-text);
}

/* Success Dialog Dark Mode */
html.dark-mode .success-overlay {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(45, 45, 45, 0.95));
}

html.dark-mode .success-dialog {
    background: var(--current-card-background);
    color: var(--current-card-text);
}

html.dark-mode .success-title {
    color: var(--current-card-text);
}

html.dark-mode .success-message {
    color: var(--current-section-header-text);
}

html.dark-mode .success-btn {
    background-color: var(--primary-color);
    color: white;
}

html.dark-mode .success-btn:hover {
    background-color: var(--primary-dark);
}

/* Form Validation Messages Dark Mode */
html.dark-mode .form-feedback {
    color: var(--error-color);
}

html.dark-mode .form-control.invalid {
    border-color: var(--error-color);
}

/* Form Step Content Dark Mode */
html.dark-mode .step-content h3 {
    color: var(--current-card-text);
}

html.dark-mode .step-content p.step-description {
    color: var(--current-section-header-text);
}

/* Air Datepicker Button Dark Mode */
html.dark-mode .air-datepicker-button {
    background: linear-gradient(135deg, var(--primary-color), var(--brand-color));
    color: white;
}

html.dark-mode .air-datepicker-button:hover {
    background: linear-gradient(135deg, var(--primary-dark), #005bb9);
}

/* Booking Modal Logo Dark Mode */
html.dark-mode .booking-modal-logo .modal-logo {
    opacity: 0.9;
}

html.dark-mode .booking-modal-logo .modal-logo:hover {
    opacity: 1;
}