/* --- FARBPALETTE --- */
        :root {
            --primary-blue-area: #134167;
            --secondary-blue-text: #006CA6;
            --accent-red: #e30613;
            --dark-gray: #26282a;
            --light-bg: #f8f9fa;
        }

        /* --- ALLGEMEINE TYPOGRAFIE & LAYOUT --- */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: var(--dark-gray);
            font-size: 16.5px; /* Basis-Schriftgröße leicht erhöht (Desktop) */
        }
        .container {
            max-width: 1400px; 
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Globale Korrektur zur Vermeidung von Überlauf bei langen Wörtern/Links */
        a, address, p {
            word-wrap: break-word; 
            box-sizing: border-box; 
        }

        /* --- HEADER & NAVIGATION (Desktop) --- */
        .page-header {
            background: white;
            padding: 15px 0;
            border-bottom: 3px solid var(--accent-red);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo { 
            height: 80px; 
            width: auto;
            display: block;
        }
        .logo-img {
            height: 100%;
        }
        
        /* Navigation */
        .main-nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 35px; 
        }
        .main-nav a {
            text-decoration: none;
            color: var(--dark-gray);
            font-weight: 500;
            padding: 5px 0;
            transition: color 0.3s;
        }
        .main-nav a:hover {
            color: var(--accent-red);
        }
        
        .cta-button {
            background-color: var(--accent-red);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s;
            white-space: nowrap;
        }
        .cta-button:hover {
            background-color: #a3040e;
        }

        /* Burger-Menü Icon */
        .burger-menu {
            display: none;
            cursor: pointer;
            width: 30px;
            height: 25px;
            position: relative;
            transform: rotate(0deg);
            transition: .5s ease-in-out;
        }
        .burger-menu span {
            display: block;
            position: absolute;
            height: 3px;
            width: 100%;
            background: var(--primary-blue-area);
            border-radius: 9px;
            opacity: 1;
            left: 0;
            transform: rotate(0deg);
            transition: .25s ease-in-out;
        }
        .burger-menu span:nth-child(1) { top: 0px; }
        .burger-menu span:nth-child(2) { top: 10px; }
        .burger-menu span:nth-child(3) { top: 20px; }
        .burger-menu.active span:nth-child(1) { top: 10px; transform: rotate(135deg); }
        .burger-menu.active span:nth-child(2) { opacity: 0; left: -60px; }
        .burger-menu.active span:nth-child(3) { top: 10px; transform: rotate(-135deg); }


        /* --- MEDIA QUERIES für Responsive Design --- */
        @media (max-width: 800px) {
            
            .burger-menu { display: block; }
            .main-nav, .cta-button:not(.mobile-cta) { display: none; }
            .main-nav {
                position: absolute; top: 80px; left: 0; width: 100%;
                background: white; box-shadow: 0 5px 10px rgba(0,0,0,0.1);
                padding: 10px 0;
            }
            .main-nav.active { display: block; }
            .main-nav ul { flex-direction: column; gap: 10px; text-align: center; }
            .main-nav a { display: block; padding: 10px 20px; }

            /* Mobile Typografie KORRIGIERT */
            .hero-section h1 { 
                font-size: 1.8em!important; /* H1 auf Mobile kleiner */
                letter-spacing: normal;
               }
            .hero-section p { 
                font-size: 1em!important; /* Fließtext Hero (etwas größer als body Basis) */
               }
            .content-section h2, .service-features h2, .product-portfolio h2 { font-size: 1.5em!important; }
            
            /* Fließtext Content/Cards/Robots auf Mobile vereinheitlicht */
            .content-section p.intro-text,
            .feature-card p,
            .robot-item p
            { 
                font-size: 1em!important; /* Mobiltext angepasst */
                line-height: 1.5;
            }

            /* Zertifizierungs-Logos untereinander auf Mobile */
            .logo-gallery {
                grid-template-columns: 1fr; 
                gap: 30px;
            }
            .logo-item { /* Muss als Selektor auf das <img>-Tag angewandt werden */
                height: auto;
                max-width: 180px; 
            }
        }

        /* --- VISUELLE SEKTIONEN --- */

        .visual-banner {
            width: 100%;
            height: 450px;
            background-color: var(--dark-gray);
            background-size: cover;
            background-position: center;
            background-image: url('../img/range-of-robots.jpg'); 
        }

        .hero-section {
            background: var(--primary-blue-area);
            color: white;
            padding: 60px 0 100px 0;
            text-align: center;
            clip-path: polygon(0 0, 100% 10%, 100% 100%, 0% 100%);
            margin-top: -50px;
            position: relative;
            z-index: 1;
        }
        .hero-section h1 {
            font-size: 3.2em;
            margin-bottom: 0.2em;
            letter-spacing: -1px;
            line-height: 1.1;
        }
        .hero-section p {
            font-size: 1.05em;
            max-width: 800px;
            margin: 0.5em auto 30px;
        }
        
        /* VERTICAL SPACING & TYPOGRAPHY */
        .content-section {
            padding: 80px 0; /* VERTICAL ALIGNMENT */
            text-align: center;
        }
        .content-section h2 {
            color: var(--primary-blue-area);
            font-size: 2.2em;
            margin-bottom: 0.5em;
        }
        .content-section p.intro-text {
            font-size: 1.05em; /* Fließtext größer Desktop */
            max-width: 900px;
            margin: 0 auto 30px;
            color: var(--dark-gray);
        }
        
        /* --- SERVICE-KACHELN --- */
        .service-features {
            background-color: var(--light-bg);
            padding: 80px 0; /* VERTICAL ALIGNMENT */
            text-align: center;
            border-top: 1px solid #ddd;
        }
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .feature-card {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            text-align: left;
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .feature-card h3 {
            color: var(--secondary-blue-text);
            font-size: 1.1em;
            margin-top: 0;
            padding-bottom: 8px;
            margin-bottom: 15px;
            line-height: 1.2;
        }
        .service-visual {
            width: 100%;
            height: 80px;
            background-color: var(--light-bg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 4px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
        }
        
        /* Service-Visuals */
        .service-visual.saas { background-image: url('../img/saas.svg'); background-position: center; }
        .service-visual.raas { background-image: url('../img/robots-as-a-service.png'); background-position: 0px -30px; }
        .service-visual.academy { background-image: url('../img/security-robotics-academy.svg'); background-position: 0px -10px; }
        .service-visual.support { background-image: url('../img/support-services.svg'); background-position: 45px 0px; }

        .feature-card p {
            line-height: 1.6; /* Fließtext größer Desktop */
            margin-bottom: 15px;
        }
        .feature-card a {
            color: var(--secondary-blue-text); /* Linkfarbe auf Blau (Details) */
            text-decoration: none;
            font-weight: bold;
            margin-top: auto;
        }
        .feature-card a:hover {
             color: var(--accent-red); 
        }

        /* --- ROBOTER-PRODUKTE --- */
        .product-portfolio {
            padding: 80px 0; /* VERTICAL ALIGNMENT */
            text-align: center;
        }
        .product-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .robot-item { 
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s, box-shadow 0.3s;
            text-align: left;
            display: flex; 
            flex-direction: column; 
            justify-content: space-between; 
        }
        .robot-item:hover {
             transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
        }
        .robot-item-visual { 
            width: 100%;
            height: 150px; 
            background-color: var(--light-bg);
            margin-bottom: 15px;
            background-size: contain; 
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        /* Robotik-Visuals */
        .robot-item-visual.quadruped { background-image: url('../img/robot-spot-routine-terrain.png'); background-position: 0px 32px; }
        .robot-item-visual.wheeled { background-image: url('../img/robot-argus-large-area.png'); background-position: center; }
        .robot-item-visual.drone { background-image: url('../img/drone-flying-robot.png'); background-position: right; }
        .robot-item-visual.communicator { background-image: url('../img/robot-communicator.png'); background-position: center; }

        .robot-item h4 {
            color: var(--dark-gray);
            margin-top: 0;
            font-size: 1.1em;
            margin-bottom: 15px; 
            line-height: 1.2;
        }
        .robot-item .tag-coverage {
            color: var(--secondary-blue-text);
            font-size: 0.9em;
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .robot-item p {
            line-height: 1.6; /* Fließtext größer Desktop */
            margin-bottom: 15px;
        }
        .robot-item a {
            color: var(--secondary-blue-text); /* Linkfarbe auf Blau (Details) */
            text-decoration: none;
            font-weight: bold;
            margin-top: auto;
        }
        .robot-item a:hover {
             color: var(--accent-red); 
        }

        /* --- LOGO/AWARD GALERIE --- */
        .awards-logos {
            padding: 50px 0;
            background-color: white;
            border-top: 1px solid #ddd;
            text-align: center;
        }
        .awards-logos h2 {
            color: var(--dark-gray);
            font-size: 1.8em;
            margin-bottom: 30px;
        }
        .logo-gallery {
            display: grid;
            /* Desktop: 2x2 Grid, das zentriert wird */
            grid-template-columns: repeat(2, 1fr); 
            gap: 40px 60px; /* Erhöhter horizontaler Abstand für bessere Optik */
            justify-items: center; /* Zentriert die Items im Grid-Feld */
            align-items: center;
            max-width: 650px; /* Leichte Verbreiterung des Containers für 2x2 */
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Das <img>-Tag muss die Klasse logo-item haben, damit diese Regeln greifen */
        .logo-item {
            height: auto; 
            width: 100%;
            max-width: 250px; /* Maximale Größe für Desktop-Logo */
        }

        /* MEDIA QUERY für Logo-Darstellung auf Smartphone */
        @media (max-width: 600px) {
            .logo-gallery {
                grid-template-columns: 1fr; 
                gap: 30px;
            }
            .logo-item {
                max-width: 180px; 
            }
            
            /* VERTICAL SPACING & TYPOGRAPHY */
        .content-section {
            padding: 20px 0; /* VERTICAL ALIGNMENT */
            text-align: center;
        }
            
            
            
        }


        /* --- FOOTER --- */
        .page-footer {
            background-color: var(--dark-gray);
            color: white;
            text-align: center;
            padding: 40px 0;
            font-size: 0.9em;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .footer-links a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            transition: color 0.3s;
        }
        .footer-links a:hover {
            color: var(--accent-red);
        }
        .footer-links {
            margin-top: 20px;
            padding-top: 15px;
            border-top: 1px solid rgba(255,255,255,0.15);
            width: 100%;
            text-align: center;
        }
        
        /* --- FOOTER ERWEITERUNG --- */
/* ================================================= */
/* FOOTER ERWEITERUNG: RESPONSIVITÄT                 */
/* ================================================= */

.footer-content-grid {
    display: grid;
    /* Basis: Automatische Anpassung mit Mindestbreite 280px */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    text-align: left;
    width: 100%;
    /* Max-Breite, wie gewünscht */
    max-width: 1400px; 
    margin: 0 auto 30px auto; /* Zentrierung des Grids */
}

/* 📱 Tablet-Optimierung (z.B. unter 768px): 
   Wenn es drei Blöcke sind, kann ein 2-1-Bruch oft besser sein, 
   aber 1 Spalte ist am sichersten. Wir nehmen 1 Spalte, da es 3 Adressblöcke sind. */
@media (max-width: 961px) {
    .footer-content-grid {
        grid-template-columns: 1fr; /* Wechsel zu einer Spalte */
        gap: 25px;
        text-align: center; /* Zentrierung der Adressblöcke auf Mobile */
        /* Begrenzung der Breite des Grids auf Mobile */
        max-width: 400px; 
    }
    
    /* Sicherstellen, dass die Adressblöcke auch zentriert sind */
    .footer-contact-block {
        text-align: center;
    }
}
        .footer-content-grid h4 {
            color: var(--accent-red); /* Akzentfarbe für Überschriften */
            font-size: 1em;
            margin-bottom: 10px;
            margin-top: 0;
            font-weight: bold;
        }
        .footer-contact-block a {
            color: white;
            text-decoration: none;
            display: block; /* Links untereinander */
            margin-bottom: 5px;
        }
        .footer-contact-block a:hover {
             color: var(--secondary-blue-text);
        }
        
        /* Social Media Icons (Minimalistische Anpassung) */
        .social-icons-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 25px; /* Etwas mehr Abstand zwischen den Icons */
            justify-content: center;
            margin-top: 20px;
        }
        .social-icons-list a {
            color: white;
            font-size: 24px; /* Icon-Größe */
            transition: color 0.3s;
        }
        .social-icons-list a:hover {
            color: var(--accent-red);
        }
        .social-icons-list .icon {
            display: none; 
        } 
        
        /* MEDIA QUERY für Footer-Struktur auf Mobile (unter 600px) - FIX SYNTAX & BREAK */
        @media (max-width: 600px) {
            
            /* --- FOOTER KORREKTUR --- */
            .footer-content-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                text-align: center;
                /* Begrenzung der Breite und Zentrierung des Grids */
                max-width: 300px; 
                margin-left: auto;
                margin-right: auto;
            }
            .footer-contact-block address, 
            .footer-contact-block a {
                /* Stellt sicher, dass die Adress- und Link-Blöcke auf Mobile nicht überlaufen */
                word-wrap: break-word; 
                box-sizing: border-box; 
                max-width: 100%;
                display: block;
                padding: 0 5px; 
            }
            .social-icons-list {
                justify-content: center;
            }
            
            /* Der Hauptcontainer muss auch auf Mobile korrekt mit padding umgehen */
            .container {
                padding: 0 10px; /* Reduziertes Padding auf Mobile für mehr Platz */
            }
        }
        
        
        /* Container-Klasse für die FAQ-Sektion isoliert */
.faq-section-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    padding: 0 20px;
}
.faq-section-wrapper h2 {
	text-align: center;
}
/* Accordion Container */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

/* Einzelnes FAQ-Element (das <details>-Tag) */
.faq-accordion .accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0;
    transition: all 0.3s ease;
}

/* NEU: Hover-Effekt für geschlossene oder geöffnete Elemente */
.faq-accordion .accordion-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Dezenter Schattenwurf */
    border-color: #ccc; /* Leicht dunklere Umrandung */
}

/* Stil für den Header (die <summary>-Tag) */
.faq-accordion .accordion-header {
    font-weight: 600;
    cursor: pointer;
    padding: 15px 20px;
    list-style: none;
    position: relative;
    color: inherit;
    text-decoration: none;
    padding-left: 45px;
    transition: background-color 0.3s ease; /* Übergang für Hintergrundfarbe */
}

/* NEU: Hintergrund-Hervorhebung beim Hover des Headers */
.faq-accordion .accordion-item:hover > .accordion-header {
    background-color: #fafafa;
}

/* Versteckt den Standard-Pfeil des <details>-Tags */
.faq-accordion .accordion-header::-webkit-details-marker {
    display: none;
}
.faq-accordion .accordion-header::marker {
    display: none;
}

/* Fügt das "+" Zeichen vor die geschlossene Frage ein und macht es größer */
.faq-accordion .accordion-header::before {
    content: '+';
    position: absolute;
    left: 15px;
    font-weight: 800;
    font-size: 1.25em;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    transition: color 0.3s ease;
}

/* Ändert das Zeichen zu "-" bei geöffneter Frage */
.faq-accordion .accordion-item[open] > .accordion-header::before {
    content: '-';
}

/* Passt den Hintergrund bei geöffneter Frage an */
.faq-accordion .accordion-item[open] > .accordion-header {
    background-color: #f0f0f0; /* Leicht dunkler als Hover, um den Zustand zu markieren */
    border-bottom: 1px solid #e0e0e0;
}

/* Stil für den eigentlichen Inhalt */
.faq-accordion .accordion-content {
    padding: 10px 20px 15px 45px;
}

.faq-accordion .accordion-content p {
    margin: 0;
    line-height: 1.6;
}

/* MEDIA QUERY: Abstand zum Rand auf kleineren Bildschirmen (Smartphones) */
@media (max-width: 600px) {
    .faq-section-wrapper {
        padding: 0 15px;
    }
    
    .faq-accordion .accordion-header {
        padding: 12px 15px 12px 40px;
    }

    .faq-accordion .accordion-content {
        padding: 8px 15px 12px 40px;
    }
}

/* ================================================= */
/* ABSCHNITT II: ENTSCHEIDENDE HARDWARE (FINAL GRID) */
/* ================================================= */

.image-overlay-wrapper .hardware-image.gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ÄNDERUNG: Gesamtes Bild sichtbar, schwarze oder weiße Ränder möglich */
    object-fit: contain; 
    
    transition: transform 0.3s ease;
}

.robotics-hardware-section {
    padding: 80px 0;
    /* ... (andere Stile) ... */
}

/* --- NEU: Das GRID-Layout für die 4 Roboter --- */
.hardware-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 50px auto; 
    padding: 0 20px;
}

/* --- WRAPPER für das Overlay (Pro Bild) --- */
.image-overlay-wrapper {
    position: relative;
    width: 100%;
    /* NEU: Aspect Ratio 16:9 für jedes Bild im Grid */
    aspect-ratio: 16 / 9; 
    
    overflow: hidden; 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    
    /* Hover-Effekte bleiben erhalten */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- BILD-STYLING (IM INNEREN DES WRAPPERS) --- */
.robotics-overlay-wrapper .hardware-image.gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease;
}

/* --- OVERLAY-TEXT STYLING (Unverändert) --- */
.robot-name-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	padding: 8px 0px;
	text-align: center;
	transition: background 0.3s;
}

/* --- HOVER EFFEKTE (Unverändert) --- */
.image-overlay-wrapper:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.image-overlay-wrapper:hover .hardware-image.gallery-item {
    transform: scale(1.05); 
}

.image-overlay-wrapper:hover .robot-name-overlay {
    background: rgba(0, 0, 0, 0.75);
}

/* --- RESPONSIVITÄT für die Galerie --- */
@media (max-width: 1200px) {
    .hardware-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .hardware-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* --- HAUPT-TEXTBLOCK STYLING (Unverändert) --- */
.robotics-hardware-section .hardware-text-block {
    font-size: 17px;
    line-height: 1.6;
    max-width: 1000px; 
    margin: 0 auto 40px auto; 
    padding: 0 10px;
    text-align: center;
}
/* ... (Restliche Grid- und CTA-Styles) ... */

/*Verzahnung*/
    /* ================================================= */
/* H1 Unser Full-Service-Prozess: Von der Entwicklung bis zum Support */
/* ================================================= */

/* Globale Definitionen */
:root {
    --angle-offset: 25px; /* Versatz für die Schrägen */
    --gap-size: 2px; /* Kleiner Freiraum zwischen den Karten */
    --text-color: #134167; /* Dunkelblau für Text und Linien */
    --accent-color: #e3f2fd; /* Einheitliche Akzentfarbe für alle Karten */
    --dark-hover-color: #134167; /* NEU: Variable für Dunkelblau Hover */
}

/* Hauptabschnitt und Container */
.service-features {
    padding: 80px 0;
    background-color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    text-align: center;
    overflow-x: hidden;
}

/* ... (H2, p Stile für den Abschnittstext) ... */

/* CSS Grid für die Karten-Anordnung */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-size); 
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 10px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    /* Max-Breite auf 1400px */
    max-width: calc(1400px - 20px);
}

/* Styling für jede Service-Karte */
.card-grid > div {
    padding: 30px 20px;
    /* Einheitliche Farbe */
    background-color: var(--accent-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-out;
    text-align: center;
    border-bottom: 4px solid var(--text-color);
    position: relative;
    z-index: 1;
    color: var(--text-color);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); 
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Abgerundete Ecken */
.card-grid > div:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.card-grid > div:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* 1️⃣ TEIL 1 (Links): Aufsteigende Schräge am unteren Rand */
.card-grid > div:first-child {
    z-index: 3; 
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--angle-offset) 100%);
}

/* 2️⃣ TEIL 2 (MITTE): Perfektes Rechteck */
.card-grid > div:nth-child(2) {
    z-index: 2; 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* 3️⃣ TEIL 3 (Rechts): Spiegelbild der ersten Fläche */
.card-grid > div:last-child {
    z-index: 1; 
    clip-path: polygon(
        0 0, 
        100% 0, 
        calc(100% - var(--angle-offset)) 100%, 
        0% 100%
    );
}

/* 🎯 KORRIGIERTER HOVER EFFEKT: Dark Hover */
.card-grid > div:hover {
    transform: translateY(-5px);
    /* Starker Schatten bei Hover */
    box-shadow: 0 10px 30px rgba(19, 65, 103, 0.4); 
    
    /* Hintergrund wird dunkelblau */
    background-color: var(--dark-hover-color); 
    /* Schrift wird weiß */
    color: #ffffff; 
    
    z-index: 4; 
    /* Unterer Balken wird weiß */
    border-bottom-color: #ffffff;
}

/* Titel und Text werden auf Hover weiß */
.card-grid > div:hover h3,
.card-grid > div:hover p {
    color: #ffffff;
}

/* ================================================= */
/* RESPONSIVITÄT                                     */
/* ================================================= */

/* Tablet- und kleinere Desktop-Optimierung (2er-Grid) */
@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; 
    }
    
    .card-grid > div {
        /* clip-path entfernen, um Rechtecke zu erhalten */
        clip-path: none !important;
        border-radius: 12px;
        z-index: auto !important;
        margin: 0 !important; 
    }
    
    /* Responsive Dark Hover bleibt aktiv */
    .card-grid > div:hover {
        background-color: var(--dark-hover-color);
        border-bottom-color: #ffffff;
    }
}

/* Smartphone-Optimierung (1er-Grid) */
@media (max-width: 600px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 30px; 
    }
}
   
/* ZUSÄTZLICHE LINIE UNTER DEM ABSCHNITTSTITEL */
.service-features .section-title-divider {
    width: 100px; /* Kurze Länge */
    height: 1px; /* Zarte Dicke */
    background-color: #134167; 
    margin: 10px auto 30px auto; /* Zentrierung und Abstand nach oben/unten */
    border-radius: 2px; /* Weiche Kanten */
    
}

.service-features .section-title-divider:hover 
{
	background-color: #fff;
}
       
/*Roboter-Flotte*/


/* ================================================= */
/* ABSCHNITT II: ENTSCHEIDENDE HARDWARE (FINAL GRID) */
/* ================================================= */

.robotics-hardware-section {
    padding: 20px 0;
    background-color: var(--background-color-light); 
    color: var(--text-color); 
    text-align: center;
    overflow-x: hidden;
    max-width: 1400px; 
    margin: 0 auto;
}

/* --- TITEL UND TRENNLINIE --- */
.robotics-hardware-section .section-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
}
.robotics-hardware-section .section-title-divider {
    width: 60px;
    height: 4px;
    background-color: var(--accent-red);
    margin: 0 auto 50px auto;
    border-radius: 2px;
}

/* --- DAS GRID-LAYOUT: 5 Spalten auf großen Bildschirmen --- */
.hardware-gallery-grid {
    display: grid;
    /* 5 Spalten */
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px; 
    max-width: 1400px;
    margin: 0 auto 50px auto; 
    padding: 0 20px;
}

/* --- WRAPPER für das Overlay und das Aspect Ratio --- */
.image-overlay-wrapper {
    position: relative;
    width: 100%;
    /* 16:9 Verhältnis für die rechteckige Form */
    aspect-ratio: 16 / 9; 
    
    overflow: hidden; 
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- BILD-STYLING (IM INNEREN DES WRAPPERS) --- */
.image-overlay-wrapper .hardware-image.gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Wichtig: Um das zugeschnittene 16:9 Bild vollständig anzuzeigen */
    object-fit: cover; 
    
    transition: transform 0.3s ease;
}

/* --- OVERLAY-TEXT STYLING (Name des Roboters) --- */
.robot-name-overlay {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    
    /* Hintergrund: Dunkel, leicht transparent */
    background: rgba(0, 0, 0, 0.6); 
    
    color: #ffffff;
    font-size: 15px; 
    font-weight: 600;
    padding: 8px 15px;
    text-align: left;
    
    transition: background 0.3s;
}

/* --- HOVER EFFEKTE --- */
.image-overlay-wrapper:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.image-overlay-wrapper:hover .hardware-image.gallery-item {
    transform: scale(1.05); /* Bild wird gezoomt */
}

.image-overlay-wrapper:hover .robot-name-overlay {
    background: rgba(0, 0, 0, 0.75); /* Overlay wird dunkler */
}


/* --- HAUPT-TEXTBLOCK STYLING --- */
.robotics-hardware-section .hardware-text-block {
    font-size: 17px;
    line-height: 1.6;
    max-width: 1000px; 
    margin: 0 auto 40px auto; 
    padding: 0 10px;
    text-align: center;
}

/* ================================================= */
/* RESPONSIVITÄT für die Galerie (Wichtig)           */
/* ================================================= */

@media (max-width: 1400px) {
    /* Bei 1400px auf 4 Spalten reduzieren */
    .hardware-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 992px) {
    /* Bei 992px auf 2 Spalten reduzieren */
    .hardware-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    /* Auf Smartphones auf 1 Spalte reduzieren */
    .hardware-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/*RaaS und SaaS*/
/* ================================================= */
/* MODELL GRID (RaaS / SaaS)                         */
/* ================================================= */

.robotics-hardware-section .flex-model-title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 30px;
    color: var(--text-color);
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Wiederverwendung der Breiten- und Abstandsvariablen */
    gap: var(--gap-size); /* 2px */
    max-width: calc(1400px - 20px);
    margin: 0 auto 40px auto; 
    padding: 0 10px;
    position: relative;
}

/* Styling für jede Modell-Karte (als Link) */
.model-card {
    display: block;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    
    /* Farben und Hover wie die Hauptkarten */
    background-color: var(--accent-color); /* #e3f2fd */
    color: var(--text-color); /* #134167 */
    
    border-bottom: 4px solid var(--text-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-out;
    
    /* Abgerundete Ecken */
    border-radius: 12px;
}

.model-card .model-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.model-card .model-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.model-card .cta-link {
    display: inline-block;
    font-weight: 600;
    color: var(--text-color);
}

/* 🎯 HOVER EFFEKT: Dark Hover reaktiviert */
.model-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(19, 65, 103, 0.4); 
    background-color: var(--dark-hover-color); /* #134167 */
    color: #ffffff; 
    border-bottom-color: #ffffff;
}

.model-card:hover .model-title,
.model-card:hover .model-text,
.model-card:hover .cta-link {
    color: #ffffff;
}

/* Spezialkonfiguration CTA */
.special-config-cta {
    max-width: calc(1400px - 20px);
    margin: 0 auto 80px auto;
    padding: 0 10px;
    text-align: center;
    font-size: 16px;
}

.special-config-cta .config-link {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: underline;
}

/* RESPONSIVITÄT für das 2er-Grid */
@media (max-width: 768px) {
    .model-grid {
        grid-template-columns: 1fr; /* Wechsel zu 1 Spalte */
        gap: 20px;
    }
}

/* ================================================= */
/* BUTTON-STYLING: SPEZIALKONFIGURATIONEN            */
/* ================================================= */

/* Container für den Button */
.special-config-cta {
    max-width: calc(1400px - 20px);
    margin: 40px auto 80px auto; /* Deutlicher Abstand nach oben und unten */
    padding: 0 10px;
    text-align: center;
}

/* Button-Styling */
.btn-cta {
    display: inline-block;
    background-color: var(--text-color); /* Dunkelblau #134167 */
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px; /* Leicht abgerundete Ecken */
    border: 2px solid var(--text-color);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hover-Effekt (Subtiler Lift und hellere Farbe) */
.btn-cta:hover {
    background-color: #1a568b; /* Etwas helleres Blau bei Hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* RESPONSIVITÄT für den Button */
@media (max-width: 600px) {
    .btn-cta {
        display: block; /* Volle Breite auf kleinen Geräten */
        width: 100%;
        max-width: 300px; /* Begrenzung, falls nicht 100% Breite */
        margin-left: auto;
        margin-right: auto;
    }
}


/*Liste Wettbewerbsvorteil*/
/* ================================================= */
/* ABSCHNITT: AUTONOME SICHERHEIT (MEHRWERT)         */
/* ================================================= */

.value-proposition-section {
    padding: 80px 0;
    background-color: #ffffff; /* Weißer Hintergrund, falls der vorherige Abschnitt hellgrau war */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    text-align: center;
    overflow-x: hidden;
}

/* Stil für den Haupttitel (H2) */
.value-proposition-section .section-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-color);
}

/* Titellinie (Muss dunkel sein, da Hintergrund hell) */
.value-proposition-section .section-title-divider {
    width: 60px;
    height: 3px;
    background-color: var(--text-color); /* #134167 */
    margin: 10px auto 40px auto;
    border-radius: 2px; 
}

/* Stil für die Werteliste */
.value-list {
    list-style: none; /* Entfernt Standard-Bullets */
    text-align: left;
    max-width: calc(1400px - 200px); /* Breite wie Textblock zuvor (1200px) */
    margin: 0 auto;
    padding: 0 10px;
}

.value-list li {
    position: relative;
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 25px;
    padding-left: 30px; /* Platz für benutzerdefinierten Bullet */
}

/* Benutzerdefinierter Bullet-Point (Dunkelblau Kreis) */
.value-list li::before {
    content: "•"; /* Standard-Punkt */
    color: var(--text-color); /* Dunkelblau */
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

/* RESPONSIVITÄT */
@media (max-width: 992px) {
    .value-proposition-section {
        padding: 60px 0;
    }
    .value-list {
        max-width: 90%; /* Bessere Anpassung auf Tablets */
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .value-proposition-section {
        padding: 40px 0;
    }
    .value-list li {
        font-size: 16px;
    }
}

/*Finaler CTA*/
/* ================================================= */
/* ABSCHNITT: FINALER CTA                            */
/* ================================================= */

.final-cta-section {
    padding: 80px 0;
    /* Optional: Hintergrundfarbe zur Abgrenzung */
    background-color: var(--accent-color); /* Hellblau, um hervorzustechen */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    text-align: center;
    overflow-x: hidden;
}

.final-cta-section .section-title {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--text-color);
}

.final-cta-section .cta-description {
    font-size: 20px;
    line-height: 1.5;
    margin: 0 auto 30px auto;
    max-width: 900px;
    padding: 0 10px;
}

/* Anpassung des Buttons für diesen Abschnitt (größer) */
.final-cta-section .large-cta {
    font-size: 19px;
    padding: 18px 40px;
    /* Da der Hintergrund jetzt hellblau ist, nutzen wir den Dark-Hover-Stil für den Standard */
    background-color: var(--dark-hover-color); 
    color: #ffffff;
    border-color: var(--dark-hover-color);
}

/* Inverser Hover-Effekt: Etwas heller bei Hover */
.final-cta-section .large-cta:hover {
    background-color: #1a568b;
    border-color: #1a568b;
}

/* RESPONSIVITÄT */
@media (max-width: 600px) {
    .final-cta-section .section-title {
        font-size: 30px;
    }
    .final-cta-section .cta-description {
        font-size: 17px;
    }
}