/* =========================================
   1. SETUP & VARIABLES
   ========================================= */
:root {
    /* Farben laut Styleguide */
    --color-bg: #FBFBFB;        /* Off-White / Industrial Paper */
    --color-bg-white: #FFFFFF;  /* Reinweiß für Karten/Sektionen */
    --color-text: #111827;      /* Fast Schwarz (Dunkles Grau) */
    --color-primary: #2563EB;   /* Industrie-Blau */
    --color-primary-dark: #1d4ed8; /* Dunkleres Blau für Hover */
    --color-gray-light: #E5E7EB; /* Helles Grau für Rahmen/Linien */

    /* Typografie */
    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Layout Standards */
    --container-width: 1200px;  /* Maximale Breite des Inhalts */
    --section-spacing: 120px;   /* Luftiger Abstand zwischen Sektionen */
    --border-radius: 8px;       /* Leicht abgerundete Ecken (Modern Industrial) */
}

/* =========================================
   2. RESET & GLOBAL STYLES
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* Verhindert, dass der Header den Titel überdeckt, wenn man springt */
    scroll-padding-top: 100px; 
}

html {
    scroll-behavior: smooth; /* Sanftes Scrollen bei Anker-Links */
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Macht Schriften auf Mac schärfer */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Utility Class für den Inhalt */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px; /* Sicherheitsabstand auf Mobile */
}
/* =========================================
   3. HEADER
   ========================================= */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: rgba(251, 251, 251, 0.98);
    backdrop-filter: blur(8px);
    /* Kein Border im Screenshot sichtbar, wir lassen ihn weg für cleaneren Look */
    z-index: 1000;
    padding: 16px 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Verteilt: Logo links, Button rechts */
}

/* Logo */
.logo {
    font-family: var(--font-heading);
    font-weight: 500; /* Etwas leichter im Screenshot */
    font-size: 1.75rem;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: -0.02em;
    min-width: 120px;
}

/* Navigation Mittig */
.nav {
    display: flex;
    gap: 40px;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 400; /* Regular weight wie im Screenshot */
    font-size: 1rem;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-primary);
}

/* Header Button spezifisch */
.btn-header {
    padding: 10px 20px;
    font-size: 0.95rem;
}

/* =========================================
   4. HERO SECTION
   ========================================= */
.hero {
    padding: 80px 0 100px 0;
    /* Hintergrund kommt später, aktuell weiß/grau */
}

.hero-content {
    max-width: 1000px; /* Etwas breiter für den Textumbruch */
}

.hero-title {
    font-size: 3.5rem; /* Sehr groß */
    font-weight: 600;  /* Semi-Bold */
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* Das blaue Highlight im Text */
.text-highlight-blue {
    color: var(--color-primary);
    font-weight: 700; /* Fetter als der Rest */
}

.hero-text {
    font-size: 1.125rem;
    color: #1F2937; /* Dunkleres Grau für bessere Lesbarkeit */
    margin-bottom: 48px;
    max-width: 750px;
    line-height: 1.6;
}

/* --- Buttons --- */
.hero-buttons {
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px; /* Etwas eckiger als vorher */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1.3;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1rem;
    min-width: 240px; /* Damit sie schön breit sind */
}

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

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

/* Sekundär Button: Weißer Hintergrund, Blauer Text, Blauer Rand */
.btn-secondary {
    background-color: white;
    color: var(--color-primary);
    border: 1px solid var(--color-gray-light); /* Erstmal grau, im Hover blau? Im Screenshot wirkt er blau umrandet */
    border-color: var(--color-primary); /* Korrektur laut Screenshot */
}

.btn-secondary:hover {
    background-color: #eff6ff; /* Ganz helles Blau */
}

/* --- Trust Pills (Die weißen Kapseln) --- */
.hero-trust {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.trust-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: white;
    padding: 10px 20px;
    border-radius: 50px; /* Pillen-Form */
    border: 1px solid #F3F4F6; /* Ganz feiner Rand */
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Minimaler Schatten */
    font-size: 0.9rem;
    color: #4B5563;
}

.check-icon {
    flex-shrink: 0; /* Verhindert das Schrumpfen des Icons */
}
/* =========================================
   STARTSEITE HERO - PROFESSIONELLER CSS BLUR
   ========================================= */

#home.hero {
    position: relative;
    /* Ein ganz sanfter Hintergrundverlauf für die Tiefe */
    background: linear-gradient(135deg, #ffffff 0%, #fbfbfb 100%); 
    overflow: hidden; 
}

#home.hero::before {
    content: '';
    position: absolute;
    /* Positionierung oben rechts laut Screenshot */
    top: -10%;
    right: -10%;
    width: 70%;  
    height: 100%; 
    
    background-image: url('../assets/icons/hero-pattern.svg');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;

    /* CSS BLUR: Hier steuerst du die Weichheit */
    /* Ein hoher Wert (50-80px) sorgt für den modernen "Glow"-Look */
    filter: blur(15px); 
    
    /* OPACITY: Macht das Muster dezent, damit der Text gut lesbar bleibt */
    opacity: 0.5; 
    
    /* Sorgt dafür, dass es hinter dem Text liegt */
    z-index: 0;
    
    /* Optionale Drehung für mehr Dynamik */
    transform: rotate(2deg); 
    
    /* Verhindert "harte Kanten" am Rand des Blurs */
    will-change: filter;
}

/* Stellt sicher, dass der Text immer ÜBER dem Muster steht */
#home.hero .container {
    position: relative;
    z-index: 1;
}

/* =========================================
   5. ANIMATIONEN (Fade In Up)
   ========================================= */
.animate-on-load {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .header-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-lg {
        width: 100%;
    }
    
    .trust-pill {
        width: 100%;
    }
}
/* =========================================
   6. INDUSTRIES SECTION
   ========================================= */
.section-spacing {
    padding: 80px 0;
}

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

.section-title {
    font-size: 2.5rem;
    color: var(--color-primary); /* Blaue Überschrift laut Screenshot */
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Optional: Kleiner Unterstrich unter der Überschrift wie im Bild angedeutet */
.title-underline {
    display: block;
    width: 60px;
    height: 4px;
    background-color: #E0E7FF; /* Sehr helles Blau */
    margin: 16px auto 0;
    border-radius: 2px;
}

/* --- Layout Grid --- */
.industries-grid {
    display: grid;
    grid-template-columns: 300px 1fr; /* Links Tabs, Rechts Karte */
    gap: 40px;
    align-items: start;
}

/* --- Left Column: Tabs --- */
.industry-tabs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: white;
    border: 2px solid transparent; /* Platzhalter für Border */
    border-radius: var(--border-radius);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    color: #6B7280; /* Inaktiver Text Grau */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #F3F4F6;
    border-radius: 8px;
    color: #9CA3AF;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    background-color: #f9fafb;
}

/* Active State (Wie im Screenshot: Blau umrandet, Blauer Text) */
.tab-btn.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: #F0F7FF; /* Ganz helles Blau als Hintergrund */
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
}

.tab-btn.active .tab-icon {
    background-color: white; /* Icon Hintergrund Weiß */
    color: var(--color-primary); /* Icon Blau */
}

/* --- Right Column: Card --- */
/* Update in css/style.css - Ersetze den Bereich für die Card */

.industry-card-wrapper {
    position: relative;
    min-height: 450px; /* Verhindert Springen beim Umschalten */
}

.industry-content {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-gray-light);
    display: none; /* Standardmäßig unsichtbar */
    height: 100%;
    /* Animation beim Einblenden */
    animation: fadeIn 0.3s ease-in-out;
}

/* Nur das aktive Element anzeigen */
.industry-content.active {
    display: flex; /* Flexbox damit Bild und Text nebeneinander sind */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-image-placeholder {
    width: 40%;
    background-color: #D1D5DB;
    flex-shrink: 0;
    min-height: 100%; /* Füllt die volle Höhe */
}

.card-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;
}

.card-content h3 {
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.3;
}

.card-content p {
    color: #4B5563;
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
}

/* Button Fix für die Karte */
.btn-card {
    align-self: flex-start;
    margin-top: auto; /* Drückt den Button nach unten, falls Platz ist */
    padding: 12px 24px; /* Explizites Padding */
    display: inline-flex; /* Wichtig für korrekte Darstellung */
}

/* Responsive Anpassung für Mobile */
@media (max-width: 900px) {
    .industry-content.active {
        flex-direction: column;
    }
    .card-image-placeholder {
        width: 100%;
        height: 200px;
    }
    .card-content {
        width: 100%;
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .industries-grid {
        grid-template-columns: 1fr; /* Untereinander */
    }

    .industry-tabs {
        flex-direction: row; /* Auf Mobile nebeneinander scrollbar? Oder untereinander? */
        overflow-x: auto;
        padding-bottom: 10px;
    }
    
    .tab-btn {
        min-width: 200px; /* Damit sie auf Mobile nicht zu klein werden */
    }

    .industry-card {
        flex-direction: column; /* Bild oben, Text unten */
    }

    .card-image-placeholder {
        width: 100%;
        height: 200px;
    }
}
/* =========================================
   HINTERGRUND-MUSTER - STABILE ZENTRIERTE VERSION
   ========================================= */

/* 1. CONTAINER-EINSTELLUNGEN */
#cases, #industries {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: transparent; 
}

/* 2. GEMEINSAME BASIS FÜR ALLE MUSTER (Zentrier-Anker) */
#cases::before, #industries::before,
#cases::after, #industries::after {
    content: '';
    position: absolute;
    /* Festgelegte Größe für absolute Stabilität */
    width: 600px; 
    height: 600px;
    background-size: contain;
    background-repeat: no-repeat;
    /* Der Anker: Immer genau in der horizontalen Mitte des Bildschirms */
    left: 50%;
    z-index: 0;
    will-change: transform, opacity, filter;
}

/* 3. BILD- UND EFFEKT-ZUORDNUNG */
/* Oben Rechts Muster */
#cases::before, #industries::before {
    background-image: url('../assets/icons/industry-pattern-tr.svg');
    background-position: top right;
    filter: blur(10px);
    opacity: 0.4;
}

/* Unten Links Muster */
#cases::after, #industries::after {
    background-image: url('../assets/icons/industry-pattern-bl.svg');
    background-position: bottom left;
    filter: blur(10px);
    opacity: 0.4;
}

/* 4. INDIVIDUELLE POSITIONIERUNG #CASES (Werkstatt-Team) */
#cases::before {
    top: 100px;
    /* translateX schiebt das Bild von der Mitte aus nach Rechts (+) */
    transform: translateX(300px) rotate(-5deg);
}
#cases::after {
    bottom: 90px;
    /* translateX schiebt das Bild von der Mitte aus nach Links (-) */
    transform: translateX(-900px) rotate(10deg);
}

/* 5. INDIVIDUELLE POSITIONIERUNG #INDUSTRIES (Gewerke) */
#industries::before {
    top: 40px;
    transform: translateX(300px) rotate(2deg);
    /* Boost für Industries direkt hier integriert */
    opacity: 0.6;
    filter: blur(10px);
}
#industries::after {
    bottom: -60px;
    transform: translateX(-600px) rotate(-5deg);
    /* Boost für Industries direkt hier integriert */
    opacity: 0.6;
    filter: blur(10px);
}

/* 6. TEXT-EBENE (Damit alles lesbar bleibt) */
#cases .container, #industries .container {
    position: relative;
    z-index: 2;
}
/* =========================================
   7. GROWTH SECTION
   ========================================= */
.growth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% Aufteilung */
    gap: 80px; /* Großer Abstand zwischen Text und Bild */
    align-items: center;
}

/* --- Left Column: Text --- */
.growth-title {
    font-size: 2.5rem;
    line-height: 1.2;
    color: var(--color-primary); /* Blau wie im Screenshot */
    margin-bottom: 24px;
}

.growth-intro {
    font-size: 1.125rem;
    color: #4B5563;
    margin-bottom: 40px;
    line-height: 1.6;
}

.growth-points {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.growth-point p {
    font-size: 1rem;
    color: var(--color-text);
    margin-top: 4px;
}

.growth-point strong {
    font-family: var(--font-heading); /* Überschriften-Font für die fetten Teile */
    color: #111827;
    font-weight: 700;
    display: block; /* Eigene Zeile für den fetten Teil? Im Screenshot fließt es eher. */
    /* Update: Im Screenshot ist es ein Block über dem Text oder der Satzanfang. 
       Lass uns es als Block behandeln für Sauberkeit */
    margin-bottom: 4px;
}

.btn-growth {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
}

/* --- Right Column: Chart Card --- */
.growth-visual {
    position: relative;
}

.chart-card {
    background-color: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1); /* Tiefer, weicher Schatten */
    border: 1px solid rgba(0,0,0,0.03);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.chart-header h4 {
    margin-bottom: 4px;
    font-size: 1.1rem;
    color: #111827;
}

.chart-subtitle {
    font-size: 0.85rem;
    color: #6B7280;
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #6B7280;
}

.chart-legend .dot {
    width: 8px;
    height: 8px;
    background-color: #F59E0B; /* Orange aus dem Screenshot */
    border-radius: 50%;
}

.chart-placeholder {
    height: 250px;
    background-color: #F9FAFB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #E5E7EB;
    margin-bottom: 20px;
    position: relative;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    font-size: 0.75rem;
    color: #9CA3AF;
    font-family: var(--font-body);
}

/* Responsive */
@media (max-width: 900px) {
    .growth-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .growth-title {
        font-size: 2rem;
    }
}
/* =========================================
   8. SERVICES SECTION
   ========================================= */
.mb-60 {
    margin-bottom: 60px;
}

.section-subtitle {
    font-size: 1.125rem;
    color: #4B5563;
    line-height: 1.6;
}

/* --- Grid Layout --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 24px;
    margin-bottom: 60px;
}

/* --- Card Styling --- */
.service-card {
    background-color: white;
    border-radius: 12px;
    padding: 32px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    border-color: #E5E7EB;
}

/* --- Card Header (Icon + Title) --- */
.card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.icon-box {
    width: 56px;
    height: 56px;
    background-color: #F0F5FF; /* Sehr helles Blau */
    border-radius: 10px; /* Squircle Form */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
}

.card-header h3 {
    font-size: 1.25rem;
    color: #111827;
    line-height: 1.3;
    margin-bottom: 0; /* Override global style */
}

/* --- Card Body --- */
.card-intro {
    font-weight: 600; /* Fett gedruckt wie im Screenshot "Legt Externe..." */
    color: #111827;
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

.card-list {
    list-style: none;
    padding: 0;
}

.card-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.6;
}

/* Eigene Bullet-Points (kleine Punkte) */
.card-list li::before {
    content: "•";
    color: #9CA3AF;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.card-list strong {
    color: #374151;
    font-weight: 600;
}

/* --- Bottom CTA (Zentriert) --- */
.services-cta {
    display: flex;
    justify-content: center; /* HIER: Zentriert Inhalte horizontal */
    align-items: center;     /* Zentriert Inhalte vertikal */
    gap: 40px;               /* Abstand zwischen Text und Button */
    
    background-color: transparent; /* Wie besprochen transparent */
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #E5E7EB;
}

.services-cta p {
    font-size: 1.125rem;
    color: #374151;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    text-align: right; /* Text bündig zum Button (optional, wirkt oft aufgeräumter) */
}

/* Responsive Anpassung */
@media (max-width: 900px) {
    .services-cta {
        flex-direction: column; /* Untereinander auf kleineren Screens */
        text-align: center;
        gap: 24px;
    }

    .services-cta p {
        text-align: center; /* Text zentriert auf Mobile */
    }
}
/* =========================================
   9. ROI SECTION
   ========================================= */
.roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.roi-card {
    background-color: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Der dicke blaue Rand oben */
    border-top: 4px solid var(--color-primary);
    border-left: 1px solid #F3F4F6;
    border-right: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Drückt das Ergebnis nach unten */
    height: 100%;
}

.roi-content-top {
    margin-bottom: 24px;
}

.roi-industry {
    display: block;
    color: var(--color-primary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.roi-size {
    font-size: 1.5rem;
    color: #111827;
    margin-bottom: 16px;
    font-weight: 600;
}

.roi-desc {
    color: #4B5563;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Result Box (Unten) --- */
.roi-divider {
    height: 1px;
    background-color: #E5E7EB;
    margin-bottom: 24px;
    width: 100%;
}

.roi-number {
    display: block;
    font-family: var(--font-heading); /* Manrope für die Zahlen */
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 4px;
    line-height: 1.2;
}

.roi-result-text {
    font-size: 1rem;
    color: #6B7280;
}

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

@media (max-width: 768px) {
    .roi-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   10. PROCESS SECTION (Timeline)
   ========================================= */
.process-steps-wrapper {
    position: relative;
    padding: 20px 0;
}

/* Die blaue Linie im Hintergrund */
.process-line {
    position: absolute;
    top: 70px; /* Vertikale Mitte der Icons (Icon ist 100px hoch -> Mitte 50 + Padding) */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    z-index: 1; /* Hinter den Icons */
    opacity: 0.8;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
    z-index: 2; /* Vor der Linie */
}

.process-step {
    text-align: center;
    background-color: transparent; /* Textbereich transparent */
}

/* Das Kreis-Icon */
.step-icon {
    width: 100px;
    height: 100px;
    background-color: white; /* WICHTIG: Verdeckt die Linie */
    border: 1px solid #E5E7EB; /* Dezenter grauer Rand wie im Screenshot */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px auto; /* Zentriert + Abstand nach unten */
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Text Styling */
.process-step h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    line-height: 1.4;
}

.process-step p {
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.6;
}

/* Responsive: Auf Mobile untereinander */
@media (max-width: 900px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .process-line {
        /* Linie auf Mobile ausblenden oder vertikal machen? 
           Im Screenshot ist es horizontal. Einfachste Lösung: Ausblenden */
        display: none; 
    }

    .step-icon {
        margin-bottom: 20px;
    }
}
/* =========================================
   11. RISK FREE SECTION
   ========================================= */
.risk-wrapper {
    background-color: white;
    border-radius: 16px;
    padding: 60px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05); /* Großer, weicher Schatten */
    max-width: 1000px;
    margin: 0 auto; /* Zentriert den Wrapper */
}

.risk-title {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.risk-subtitle {
    font-size: 1.1rem;
    color: #4B5563;
    line-height: 1.5;
}

.mb-40 { margin-bottom: 40px; }
.mt-40 { margin-top: 40px; }

/* --- Grid für die zwei Boxen --- */
.risk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.risk-box {
    padding: 32px;
    border-radius: 12px;
    height: 100%;
}

/* Box Blau (Links) */
.box-blue {
    background-color: #EFF6FF; /* Ganz helles Blau */
    border: 1px solid #BFDBFE; /* Blauer Rand */
}

/* Box Grau (Rechts) */
.box-gray {
    background-color: #F9FAFB; /* Ganz helles Grau */
    border: 1px solid #E5E7EB; /* Grauer Rand */
}

/* Titles */
.box-title-blue {
    font-size: 1.25rem;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.box-title-dark {
    font-size: 1.25rem;
    color: #111827;
    margin-bottom: 8px;
}

.box-meta {
    font-size: 0.95rem;
    color: #6B7280;
    margin-bottom: 24px;
}

/* Check List */
.check-list {
    list-style: none;
    padding: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #374151;
    line-height: 1.5;
}

.check-icon-blue {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px; /* Optische Ausrichtung zur Textzeile */
}

/* Extra Schatten für den Button unten */
.box-shadow-btn {
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

/* Responsive */
@media (max-width: 900px) {
    .risk-wrapper {
        padding: 30px; /* Weniger Padding auf Mobile */
    }
    
    .risk-grid {
        grid-template-columns: 1fr; /* Untereinander */
    }

    .risk-title {
        font-size: 1.75rem;
    }
}
/* =========================================
   12. STANDARDS & FOUNDER SECTION
   ========================================= */

/* --- Logos Bereich --- */
.title-underline-center {
    width: 60px;
    height: 4px;
    background-color: #E0E7FF;
    border-radius: 2px;
    margin: 0 auto 20px auto; /* Zentriert über der Headline */
}
/* =========================================
   STANDARDS SECTION - NUR LOGOS (GROSS)
   ========================================= */

.standards-logos-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px; /* Etwas enger zusammen, da der Text fehlt */
    margin-bottom: 80px;
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    /* Mehr Padding für eine größere Kachel-Optik */
    padding: 24px 40px; 
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    /* Verhindert, dass die Kacheln bei verschiedenen Logo-Breiten springen */
    min-width: 180px; 
}

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

.trust-logo {
    /* Hier ist der Boost: Verdoppelt von 30px auf 60px */
    height: 90px; 
    width: auto;
    max-width: 140px; /* Begrenzt die Breite bei sehr länglichen Logos */
    object-fit: contain;
    /* Macht die Logos dezent einheitlicher, falls sie farblich zu schrill sind */
    filter: brightness(1.05);
}

/* Mobile Optimierung: Etwas kleiner auf dem Handy */
@media (max-width: 768px) {
    .trust-logo {
        height: 45px;
    }
    .trust-item {
        padding: 16px 32px;
        min-width: 140px;
    }
}

/* --- Founder Grid --- */
.founder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Aufteilung */
    gap: 60px;
    align-items: center;
}

/* Bild Karte Links */
.founder-image-card {
    background-color: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05);
    transform: rotate(-2deg); /* Leichte Drehung für den "Papier"-Look wie im Design? */
    /* Im Screenshot wirkt es gerade, aber der Schatten ist weich. Lassen wir es gerade. */
    transform: none; 
}

.image-placeholder-large {
    width: 100%;
    height: 400px; /* Höhe für das Bild */
    background-color: #E5E7EB; /* Grau */
    border-radius: 8px;
}

/* Text Rechts */
.founder-headline {
    font-size: 1.75rem;
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 24px;
}

.founder-text {
    font-size: 1.05rem;
    color: #4B5563;
    margin-bottom: 20px;
    line-height: 1.7;
}

/* Unterschrift */
.signature-block {
    margin-top: 40px;
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.signature-script {
    font-family: 'Brush Script MT', cursive; /* Standard Handschrift-Font */
    font-size: 2.5rem;
    color: #111827;
}

.founder-role {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    font-family: var(--font-heading);
}

/* Responsive */
@media (max-width: 900px) {
    .founder-grid {
        grid-template-columns: 1fr; /* Untereinander */
    }
    
    .founder-headline {
        font-size: 1.5rem;
    }
    
    .standards-logos {
        gap: 20px;
    }
}
/* =========================================
   13. FINAL CTA SECTION
   ========================================= */
.final-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 900px; /* Begrenzt die Breite, damit die Karten nicht riesig werden */
    margin: 0 auto;   /* Zentriert das Grid */
}

.final-card {
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Style für die Linke Blaue Karte */
.card-blue-light {
    background-color: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: var(--color-primary);
}

.card-blue-light svg {
    color: var(--color-primary);
}

.card-blue-light h3 {
    color: var(--color-primary);
}

/* Style für die Rechte Graue Karte */
.card-gray-light {
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); /* Leichter Schatten nur rechts wie im Bild */
}

/* Inhalte in den Karten */
.final-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    justify-content: center;
}

.final-card-header h3 {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.final-card-body {
    width: 100%;
}

.phone-number {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E3A8A; /* Dunkleres Blau für Lesbarkeit */
    margin-bottom: 8px;
}

.availability {
    font-size: 0.95rem;
    color: #60A5FA; /* Helleres Blau/Grau */
    color: #64748B;
}

.meeting-info {
    font-size: 1rem;
    color: #374151;
    margin-bottom: 24px;
    line-height: 1.6;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .final-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
/* =========================================
   14. FOOTER
   ========================================= */
.footer {
    background-color: white; /* Weißer Hintergrund wie im Screenshot */
    border-top: 1px solid #E5E7EB;
    padding: 60px 0;
    margin-top: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Links: Logo */
.footer-logo a {
    font-family: var(--font-heading);
    font-size: 2.5rem; /* Groß und dominant wie im Bild */
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    letter-spacing: -0.02em;
}

/* Mitte: Kontakt */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-contact a {
    text-decoration: none;
    color: #111827;
    font-weight: 600; /* Etwas fetter */
    font-size: 1rem;
    transition: color 0.2s ease;
}

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

/* Rechts: Legal Links */
.footer-legal {
    display: flex;
    gap: 40px; /* Großer Abstand zwischen den Links */
}

.footer-legal a {
    text-decoration: none;
    color: #111827;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.2s ease;
}

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

/* Responsive */
@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    
    .footer-legal {
        gap: 24px;
    }
}
/* =========================================
   15. KONTAKT SEITE
   ========================================= */

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

/* --- Linke Spalte: Infos --- */
.contact-title {
    font-size: 3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
    line-height: 1.1;
}

.text-blue {
    color: var(--color-primary);
}

.contact-subtitle {
    font-size: 1.125rem;
    color: #4B5563;
    margin-bottom: 60px;
}

.address-block {
    margin-bottom: 40px;
}

.company-name {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 16px;
    color: #111827;
    font-family: var(--font-heading);
}

.address-block p {
    font-size: 1.125rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 4px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-link {
    font-size: 1.25rem;
    text-decoration: none;
    color: #111827;
    font-weight: 500;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: var(--color-primary);
}

/* --- Rechte Spalte: Formular --- */
.contact-form-wrapper {
    background-color: #EFF6FF; /* Helles Blau/Grau wie im Screenshot */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 1px solid transparent; /* Kein Rand im Normalzustand laut Bild? Oder sehr fein. */
    border: 1px solid #D1D5DB; /* Feiner grauer Rand ist sicherer */
    border-radius: 6px;
    background-color: white;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: all 0.2s ease;
    width: 100%;
}

.form-group textarea {
    resize: vertical; /* Erlaubt dem User, die Box größer zu ziehen */
}

/* Fokus-Effekt (Wenn man reinklickt) */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-full {
    width: 100%; /* Button über die ganze Breite */
    padding: 14px;
    font-size: 1rem;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .form-row {
        grid-template-columns: 1fr; /* Auf Handy untereinander */
    }

    .contact-title {
        font-size: 2.25rem;
    }
}
/* =========================================
   16. ÜBER UNS SEITE
   ========================================= */

/* Das Grid Layout für den Hero */
.hero-about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Links etwas breiter als Rechts */
    gap: 60px;
    align-items: center;
    padding-bottom: 60px;
}

.hero-about-title {
    font-size: 3rem;
    line-height: 1.2;
    color: #111827;
    margin-bottom: 24px;
    font-weight: 700;
}

/* Der Text "digitale Werkzeuge..." in Blau */
.hero-about-title .text-blue {
    color: var(--color-primary);
}

.hero-about-text {
    font-size: 1.125rem;
    color: #4B5563;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 600px; /* Damit die Zeilen nicht zu lang werden */
}

/* Die weiße Bild-Karte rechts */
.image-card-white {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05); /* Großer weicher Schatten */
    border: 1px solid #F3F4F6;
    height: 500px; /* Feste Höhe für den Platzhalter */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Später kommt hier: background-image: url(...); background-size: cover; */
}

.image-placeholder-text {
    font-family: var(--font-heading);
    font-weight: 600;
    color: #9CA3AF;
    font-size: 1.25rem;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-about-grid {
        grid-template-columns: 1fr; /* Untereinander */
        gap: 40px;
    }

    .hero-about-title {
        font-size: 2.25rem;
    }

    .image-card-white {
        height: 350px; /* Kleiner auf Mobile */
        width: 100%;
    }
}
/* =========================================
   ÜBER UNS - STANDARDS FOOTER
   ========================================= */

.standards-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    margin-top: 40px;
}

/* Wir nutzen die gleichen Maße wie auf der Startseite für Konsistenz */
.standards-footer .trust-item {
    background: #ffffff;
    padding: 20px 35px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    min-width: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.standards-footer .trust-logo {
    height: 100px; /* Etwas kompakter für den Footer-Bereich */
    width: auto;
    object-fit: contain;
}

/* Die Trennlinie über den Logos (falls gewünscht) */
.center-line {
    width: 60px;
    height: 3px;
    background-color: #2563EB;
    margin: 0 auto 40px;
    border-radius: 2px;
}
/* =========================================
   17. STORY SECTION
   ========================================= */

.story-grid {
    display: grid;
    grid-template-columns: 1fr 2px 0.8fr; /* Text | Linie | Karten */
    gap: 60px;
    align-items: center; /* ÄNDERUNG: Hier stand vorher 'start'. Jetzt zentriert es die Inhalte. */
}

/* Linke Seite: Text */
.story-title {
    font-size: 2.5rem;
    color: var(--color-primary); /* Blaue Headline laut Bild */
    line-height: 1.2;
    margin-bottom: 32px;
}

/* Falls du nur den unteren Teil blau willst wie im Bild evtl. angedeutet,
   ist der Code im HTML mit span.text-blue schon vorbereitet. 
   Wenn ALLES blau sein soll, ist oben color: primary korrekt.
   Im Screenshot wirkt der ganze Titel sehr blau/kräftig. */

.story-text {
    font-size: 1.05rem;
    color: #374151;
    margin-bottom: 24px;
    line-height: 1.7;
}

/* Die Trennlinie in der Mitte */
.story-divider {
    width: 2px;
    /* height: 100%;  <-- Das ist im Grid oft tricky, wir nutzen stattdessen: */
    background-color: #E0E7FF;
    border-radius: 2px;
    align-self: stretch; /* WICHTIG: Zwingt die Linie, sich über die volle Höhe des Grids zu strecken */
}

/* Rechte Seite: Beobachtungen */
.observations-title {
    font-size: 1.25rem;
    color: #111827;
    margin-bottom: 32px;
    font-weight: 700;
}

.observation-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.obs-card {
    background-color: #EFF6FF; /* Helles Blau wie im Screenshot */
    /* Oder ein sehr helles Grau/Blau Verlauf */
    background: linear-gradient(to right, #EFF6FF, #F9FAFB);
    padding: 20px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #DBEAFE;
    transition: transform 0.2s ease;
}

.obs-card:hover {
    transform: translateX(5px);
}

.obs-number {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.2rem;
}

.obs-text {
    font-size: 1.05rem;
    color: #1F2937;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
    .story-grid {
        grid-template-columns: 1fr; /* Alles untereinander */
        gap: 40px;
    }

    .story-divider {
        display: none; /* Linie auf Mobile ausblenden */
    }
}
/* =========================================
   18. ATTITUDE SECTION (Haltung)
   ========================================= */

.attitude-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 32px;
}

.attitude-card {
    background-color: white;
    /* Änderung: Kein Rahmen ringsherum, sondern nur oben blau */
    border-top: 4px solid var(--color-primary); 
    border-left: 1px solid #F3F4F6;
    border-right: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    
    border-radius: 12px; /* Leicht abgerundet */
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    
    /* Dezentere Schatten für den "schwebenden" Look */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.attitude-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* Im Hover kein blauer Rahmen, sondern nur der Schatten wird tiefer */
}

.att-card-title {
    font-size: 1.35rem;
    line-height: 1.3;
    color: #111827;
    margin-bottom: 24px;
    font-weight: 700;
}

/* Die feine Trennlinie in der Karte */
.att-divider {
    width: 100%;
    height: 1px;
    background-color: #F3F4F6; /* Sehr helles Grau */
    margin-bottom: 24px;
}

.att-card-text {
    font-size: 1.05rem;
    color: #374151;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .attitude-grid {
        grid-template-columns: 1fr; /* Untereinander auf Mobile */
    }
}
/* =========================================
   19. DIFFERENCE SECTION
   ========================================= */

.difference-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50/50 Split */
    gap: 40px;
    max-width: 1000px; /* Damit die Karten nicht zu breit werden */
    margin: 0 auto;
}

.diff-card {
    background-color: white;
    border-radius: 8px; /* Leicht abgerundet */
    overflow: hidden; /* Damit der Header die Ecken nicht überschreibt */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    height: 100%;
}

/* --- Header Styles (mit korrigiertem Schatten) --- */
.diff-header {
    padding: 24px 32px;
    text-align: center;
    
    /* Z-Index sorgt dafür, dass der Schatten AUF dem weißen Body liegt */
    position: relative;
    z-index: 10;
    
    /* Weicherer, deutlicherer Schatten nach unten */
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.15);
}

.diff-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Blau (Links) */
.header-blue {
    background-color: var(--color-primary);
}
.header-blue h3 {
    color: white;
}

/* Grau (Rechts) */
.header-gray {
    background-color: #F3F4F6;
}
.header-gray h3 {
    color: #111827;
}

/* --- Body Styles (FIX für die doppelten Punkte) --- */
.diff-body {
    padding: 32px;
    background-color: white;
    position: relative;
    z-index: 1; /* Muss unter dem Header liegen */
}

.diff-list {
    /* WICHTIG: Entfernt die schwarzen Standard-Punkte */
    list-style: none !important; 
    padding-left: 0 !important;   /* Entfernt den Standard-Einzug */
    margin: 0;
    
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.diff-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-size: 1.05rem;
    color: #374151;
    line-height: 1.5;
    
    /* Zur Sicherheit: Keine Standard-Marker */
    list-style-type: none;
}

/* --- Icons --- */
.diff-icon {
    flex-shrink: 0;
    margin-top: 2px; /* Ausrichtung zur ersten Textzeile */
}

.icon-check {
    color: var(--color-primary); /* Blaues Häkchen */
}

.icon-cross {
    color: var(--color-primary); /* Auch das Kreuz ist im Screenshot Blau */
}

/* Responsive */
@media (max-width: 900px) {
    .difference-grid {
        grid-template-columns: 1fr; /* Untereinander */
        gap: 32px;
    }
}
/* =========================================
   20. STANDARDS SECTION (Über Uns)
   ========================================= */

.standards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 80px;
}

.std-card {
    background-color: white;
    border-radius: 12px;
    padding: 40px 32px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    border: 1px solid #F3F4F6;
    
    /* Design-Detail: Blauer Rand UNTEN */
    border-bottom: 4px solid var(--color-primary);
    
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease;
}

.std-card:hover {
    transform: translateY(-5px);
}

.std-title {
    font-size: 1.25rem;
    color: #111827;
    margin-bottom: 20px;
    font-weight: 700;
}

.std-divider {
    width: 100%;
    height: 1px;
    background-color: #F3F4F6;
    margin-bottom: 20px;
}

.std-text {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.6;
}

/* --- Footer Bereich mit Logos --- */
.standards-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.center-line {
    width: 60px;
    height: 4px;
    background-color: #E5E7EB; /* Hellgraue Linie zentriert */
    border-radius: 2px;
}

.standards-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* Einfache Platzhalter-Styles für die Logos, damit es strukturiert aussieht */
.logo-box {
    font-weight: 700;
    color: #9CA3AF; /* Grau */
    background-color: #F9FAFB;
    padding: 20px 40px;
    border-radius: 8px;
    border: 2px dashed #E5E7EB;
}

/* Spezifische Farben andeuten (optional) */
.logo-datev { color: #2563EB; border-color: #BFDBFE; } /* Blau */
.logo-dsgvo { color: #059669; border-color: #A7F3D0; } /* Grün */

/* Responsive */
@media (max-width: 900px) {
    .standards-grid {
        grid-template-columns: 1fr;
    }
    
    .standards-logos-row {
        gap: 30px;
    }
}
/* =========================================
   BOOKING PROFILE - PORTRAIT STYLING
   ========================================= */

.profile-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
}

.profile-image-wrapper {
    width: 100px;          /* Größe des Porträts */
    height: 100px;
    border-radius: 50%;    /* Macht das Bild kreisrund */
    overflow: hidden;      /* Schneidet das Bild auf Kreisform zu */
    border: 3px solid #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
    background-color: #f3f4f6; /* Fallback-Farbe während des Ladens */
}

.profile-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Verhindert, dass das Gesicht verzerrt wird */
    object-position: center top; /* Zentriert den Fokus auf das Gesicht */
}

.profile-name {
    display: block;
    font-weight: 600;
    color: #111827;
    font-size: 1.1rem;
}
/* =========================================
   21. ABOUT FINAL CTA
   ========================================= */

.about-cta-title {
    font-size: 2.25rem;
    line-height: 1.3;
    color: #111827;
    margin-bottom: 32px;
    font-weight: 700;
}

/* Der blaue Textteil */
.about-cta-title .text-blue {
    color: var(--color-primary);
}

/* Button Anpassung für diesen Bereich */
.btn-wide {
    padding: 16px 48px; /* Breiter als normal */
    font-size: 1.1rem;
    background-color: white;
    border: 1px solid var(--color-primary); /* Blauer Rand laut Screenshot */
    color: var(--color-primary); /* Blauer Text */
}

.btn-wide:hover {
    background-color: #EFF6FF; /* Helles Blau beim Hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .about-cta-title {
        font-size: 1.75rem;
    }
    
    .btn-wide {
        width: 100%; /* Auf Mobile volle Breite */
        padding: 16px 20px;
    }
}
/* =========================================
   22. BUCHUNGSSEITE
   ========================================= */

/* Simpler Header ohne Navi */
.header-simple {
    padding: 30px 0;
    background-color: var(--color-bg); /* Verschmilzt mit Hintergrund */
}

/* Grid Layout */
.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Kalender rechts etwas breiter */
    gap: 60px;
    align-items: start;
    margin-bottom: 80px;
}

/* Linke Seite: Text */
.booking-title {
    font-size: 3rem;
    line-height: 1.1;
    color: #111827;
    margin-bottom: 16px;
    font-weight: 700;
}

.booking-title .text-blue {
    color: var(--color-primary);
}

.booking-subtitle {
    font-size: 1.125rem;
    color: #4B5563;
    margin-bottom: 40px;
}

.booking-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
}

.step-item strong {
    display: block;
    font-size: 1.1rem;
    color: #111827;
    margin-bottom: 4px;
    font-family: var(--font-heading);
}

.step-item p {
    font-size: 1rem;
    color: #374151;
    line-height: 1.5;
}

/* Die graue Info-Box */
.booking-note-box {
    background-color: #F3F4F6; /* Hellgrau */
    padding: 24px;
    border-radius: 8px;
    border-left: 4px solid #D1D5DB; /* Kleiner Akzent links? (Optional) */
    font-size: 0.95rem;
    color: #4B5563;
    line-height: 1.6;
}

/* Rechte Seite: Kalender Container */
.booking-calendar-wrapper {
    background-color: #EFF6FF; /* Helles Blau als Hintergrund */
    border-radius: 12px;
    padding: 20px;
    min-height: 650px; /* Platz für den Kalender */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendly-placeholder {
    color: #93C5FD;
    font-weight: 500;
}

/* Profil Bereich Unten */
.booking-profile {
    margin-top: 60px;
}

.profile-headline {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #111827;
}

.profile-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.profile-image-placeholder {
    width: 80px;
    height: 80px;
    background-color: #D1D5DB; /* Grau */
    border-radius: 50%; /* Kreis */
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

/* Footer Simple */
.footer-simple {
    padding: 40px 0;
    border-top: 1px solid #E5E7EB;
    font-size: 0.9rem;
}

.footer-simple a {
    color: #6B7280;
    text-decoration: none;
    margin: 0 10px;
}

/* Responsive */
@media (max-width: 900px) {
    .booking-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .booking-calendar-wrapper {
        min-height: 500px;
    }
}
/* =========================================
   23. DANKE SEITE
   ========================================= */

.thank-you-section {
    text-align: center;
    padding: 100px 0 140px 0; /* Viel Weißraum für Fokus */
    min-height: 60vh; /* Damit der Footer nicht hochrutscht */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.thank-you-title {
    font-size: 2rem;
    color: var(--color-primary); /* Blaues "Termin bestätigt!" */
    font-weight: 700;
    margin-bottom: 16px;
}

.thank-you-subtitle {
    font-size: 3rem;
    color: #111827; /* Schwarz "Ich freue mich..." */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 32px;
}

.thank-you-text {
    font-size: 1.125rem;
    color: #4B5563;
    line-height: 1.6;
    margin-bottom: 60px;
}

.prep-box {
    max-width: 700px; /* Begrenzte Breite für Lesbarkeit */
    margin: 0 auto;
    font-size: 1.05rem;
    color: #374151;
    line-height: 1.7;
}

.prep-box strong {
    color: #111827;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
    .thank-you-subtitle {
        font-size: 2.25rem;
    }
    
    .thank-you-section {
        padding: 60px 0;
    }
}
/* =========================================
   24. LANDING PAGE (Metallbau)
   ========================================= */

.lp-hero {
    /* Optional: Falls du später das Hintergrundbild einbauen willst, passiert das hier */
    /* background-image: url('../assets/images/bg-blur.jpg'); */
    /* background-size: cover; */
    padding-top: 100px;
    padding-bottom: 100px;
}

.lp-title {
    font-size: 3.5rem; /* Groß und wuchtig */
    line-height: 1.15;
    margin-bottom: 32px;
}

.text-blue {
    color: var(--color-primary);
}

.mt-30 {
    margin-top: 30px;
}

/* Spezieller Style für den breiteren Trust-Pill auf der LP */
.pill-large {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    color: #4B5563;
    background-color: white;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: inline-flex; /* Damit er nicht volle Breite nimmt */
    align-items: center;
    gap: 12px;
    border-radius: 50px;
}

/* Responsive */
@media (max-width: 768px) {
    .lp-title {
        font-size: 2.5rem;
    }
    
    .pill-large {
        width: 100%; /* Auf Handy volle Breite */
        justify-content: center;
        font-size: 0.9rem;
    }
}
/* =========================================
   25. LP METALLBAU - PROBLEMS
   ========================================= */

.lp-problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.problem-card {
    background-color: white;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #F3F4F6;
    
    /* Der blaue Rand unten wie im Screenshot */
    border-bottom: 4px solid var(--color-primary);
    
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.problem-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px; /* Kleiner Abstand zum ersten Block */
    padding-bottom: 16px;
    border-bottom: 1px solid #F3F4F6; /* Feine Linie unter dem Titel */
}

.problem-block p {
    font-size: 1rem;
    color: #4B5563;
    line-height: 1.6;
    margin-top: 4px;
}

.problem-label {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    display: block;
}

/* Blaue Schrift für "Die Konsequenz" */
.problem-block .text-blue {
    color: var(--color-primary);
}

.problem-block strong {
    color: #111827;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 900px) {
    .lp-problems-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   26. LP METALLBAU - SOLUTION
   ========================================= */

/* Modifiziertes Grid für 3 Spalten statt 4 */
.lp-steps-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px;
}

/* Anpassung der Linien-Position, falls nötig */
/* Da wir .process-line und .step-icon wiederverwenden, 
   sollte es automatisch passen, da die Icons zentriert sind. */

/* Responsive für LP Steps */
@media (max-width: 900px) {
    .lp-steps-3 {
        grid-template-columns: 1fr !important;
        gap: 60px;
    }
}
/* =========================================
   27. LP METALLBAU - PROOF
   ========================================= */

.lp-proof .text-blue {
    color: var(--color-primary);
    text-align: left; /* Überschrift linksbündig laut Screenshot */
}

.proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.proof-card {
    padding: 40px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Linke Karte: Kontext */
.card-context {
    background-color: #EFF6FF; /* Hellblau */
    border: 1px solid #BFDBFE;
}

/* Rechte Karte: Ergebnisse */
.card-results {
    background-color: white;
    border: 1px solid #E5E7EB;
    /* Der dicke blaue Rand unten */
    border-bottom: 4px solid var(--color-primary);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.proof-label {
    font-size: 1.1rem;
    font-weight: 800; /* Sehr fett laut Bild */
    color: #111827;
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.proof-block p {
    font-size: 1.05rem;
    color: #374151;
    line-height: 1.6;
}

/* Ergebnis Liste */
.result-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    color: #374151;
    line-height: 1.5;
}

.result-icon {
    font-size: 1.2rem;
    line-height: 1;
    padding-top: 2px;
}

.result-list strong {
    color: #111827;
    font-weight: 700;
}

/* Responsive */
@media (max-width: 900px) {
    .proof-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   28. LP METALLBAU - TRUST
   ========================================= */

.lp-trust-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Bild etwas schmaler als Text */
    gap: 80px;
    align-items: center;
}

/* Bild Karte */
.trust-image-card {
    background-color: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05);
    transform: rotate(-1deg); /* Leichter "Papier"-Look wie im Screenshot angedeutet? */
    /* Falls nicht gewünscht, einfach löschen */
}

/* Text Bereich */
.trust-title {
    font-size: 2.25rem;
    line-height: 1.2;
    color: #111827;
    margin-bottom: 24px;
    font-weight: 700;
}

.trust-title .text-blue {
    color: var(--color-primary);
}

.trust-intro {
    font-size: 1.1rem;
    color: #4B5563;
    margin-bottom: 40px;
    line-height: 1.6;
}

.trust-block {
    margin-bottom: 32px;
}

.block-label {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.trust-block p {
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
}

/* Liste mit Icons */
.security-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.security-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: #374151;
}

.list-icon {
    font-size: 1.2rem;
}

/* Unterschrift Bereich (Wiederverwendung oder Anpassung) */
.signature-wrapper {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-top: 40px;
}

/* Responsive */
@media (max-width: 900px) {
    .lp-trust-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trust-image-card {
        transform: none;
        max-width: 100%;
        margin-bottom: 20px;
    }
}
/* =========================================
   29. LP METALLBAU - FINAL CTA
   ========================================= */

.final-cta-card {
    background-color: white;
    border-radius: 16px;
    padding: 60px;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
}

.final-cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
}

/* Blau wie im Screenshot */
.final-cta-title.text-blue, 
.box-headline.text-blue {
    color: var(--color-primary);
}

.final-cta-subtitle {
    font-size: 1.1rem;
    color: #4B5563;
}

/* Die innere Box mit blauem Rand */
.cta-process-box {
    background-color: white; /* oder leichtes Blau #EFF6FF wenn gewünscht */
    border: 2px solid #BFDBFE; /* Der blaue Rand aus dem Bild */
    border-radius: 12px;
    padding: 40px;
    margin: 40px auto; /* Abstand oben/unten */
    max-width: 600px; /* Box ist schmaler als der Container */
    text-align: left; /* Text darin linksbündig */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.box-headline {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.cta-steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cta-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.step-number {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary); /* Große blaue Nummer */
    line-height: 1;
    min-width: 30px; /* Damit die Einrückung stimmt */
}

.cta-step p {
    font-size: 1.05rem;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .final-cta-card {
        padding: 30px;
    }
    
    .cta-process-box {
        padding: 24px;
    }

    .final-cta-title {
        font-size: 1.75rem;
    }
}
/* =========================================
   FIX: BRANCHEN-TAB VISIBILITY & LAYOUT
   ========================================= */

/* 1. Grundzustand: Alle Inhalte sind unsichtbar */
.industry-content {
    display: none; /* Versteckt die Karte komplett */
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Wichtig für die Rundungen */
    height: 100%;
}

/* 2. Nur die Karte mit der Klasse .active wird angezeigt */
.industry-content.active {
    display: flex; /* Schaltet auf Flex-Layout (Bild links, Text rechts) */
}

/* Linke Spalte: Bild */
.industry-card-image, .card-image-placeholder {
    flex: 0 0 45%; 
    min-height: 400px;
    position: relative;
    background-color: #F3F4F6;
}

.industry-card-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rechte Spalte: Text */
.card-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Responsive für Mobile */
@media (max-width: 900px) {
    .industry-content.active {
        flex-direction: column;
    }
    .industry-card-image, .card-image-placeholder {
        flex: none;
        height: 250px;
        min-height: auto;
    }
}
/* =========================================
   GROWTH SECTION - INFOGRAFIK OPTIMIERUNG
   ========================================= */

.growth-image-container {
    padding: 20px;
    background-color: #f8fafc; /* Ganz leichter Hintergrund zur Abhebung */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px; /* Genug Platz für die vertikale Grafik */
}

.growth-flow-img {
    max-width: 100%;
    max-height: 450px; /* Verhindert, dass die Karte zu riesig wird */
    height: auto;
    object-fit: contain;
    /* Optional: Ein ganz feiner Schatten für den "Papier-Look" */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}

/* Anpassung der Karte für das Hochformat des Bildes */
.chart-card {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

.chart-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* =========================================
   TRUST SECTION - FOUNDER PORTRAIT
   ========================================= */

.trust-image-card {
    background: white;
    padding: 12px; /* Wirkt wie ein kleiner weißer Rahmen um das Foto */
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: 100%;
}

.founder-portrait {
    width: 100%;
    height: 100%;
    min-height: 500px; /* Gibt dem Bild eine ordentliche Präsenz */
    object-fit: cover; /* Schneidet das Bild perfekt zu, ohne es zu verzerren */
    border-radius: 12px; /* Innere Rundung für das Foto selbst */
}

/* Responsive: Auf Mobile wird das Bild etwas kleiner */
@media (max-width: 900px) {
    .founder-portrait {
        min-height: 350px;
    }
}
/* Erweitere diese Regel in deiner style.css */
#home.hero::before,
#schweissnachweis-hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 70%;  
    height: 100%; 
    background-image: url('../assets/icons/hero-pattern.svg'); /* Dein SVG */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(15px); 
    opacity: 0.5; 
    z-index: 0;
    transform: rotate(2deg); 
    will-change: filter;
}

/* Stelle sicher, dass der Inhalt über dem Muster liegt */
#schweissnachweis-hero {
    position: relative;
    overflow: hidden;
}
#schweissnachweis-hero .container {
    position: relative;
    z-index: 1;
}
/* =========================================
   PROBLEM FLOW SECTION
   ========================================= */
.problem-flow {
    background-color: var(--color-bg);
}

.subtitle-bold {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-text);
    margin-top: -20px;
}

.flow-container {
    max-width: 900px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.flow-item {
    display: grid;
    grid-template-columns: 280px 60px 1fr;
    align-items: center;
    transition: transform 0.3s ease;
}

/* Die blauen Boxen links */
.flow-box {
    background-color: #EFF6FF; /* Helles Blau laut Screenshot 2 */
    color: var(--color-primary);
    padding: 20px 24px;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.05rem;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.1);
    transition: all 0.3s ease;
    cursor: default;
}

.flow-item:hover .flow-box {
    transform: translateX(5px);
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
}

/* Pfeil-Styling */
.flow-arrow {
    display: flex;
    justify-content: center;
    color: var(--color-primary);
}

/* Beschreibungstext rechts */
.flow-description {
    font-size: 1.1rem;
    color: var(--color-text);
    line-height: 1.5;
    padding-left: 10px;
}

/* Responsive Anpassung für Tablets/Mobile */
@media (max-width: 900px) {
    .flow-item {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }
    .flow-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
    }
    .flow-box {
        width: 100%;
    }
}
/* =========================================
   PROCESS OVERVIEW (3-COL CARDS)
   ========================================= */

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.process-card {
    background-color: var(--color-bg-white);
    padding: 40px;
    border-radius: var(--border-radius);
    /* Der markante blaue Rand oben laut Screenshot */
    border-top: 5px solid var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.card-label {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.card-title {
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.2;
}

.card-divider {
    width: 40px;
    height: 1px;
    background-color: var(--color-gray-light);
    margin-bottom: 24px;
}

.card-text {
    font-size: 1rem;
    color: #4B5563; /* Etwas weicheres Grau für den Fließtext */
    line-height: 1.6;
}

/* Mobile Optimierung */
@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* =========================================
   ROLES OVERVIEW
   ========================================= */

.roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 60px;
}

.role-card {
    background-color: var(--color-bg-white);
    border-radius: var(--border-radius);
    border-top: 5px solid var(--color-primary); /* Konsistent zum Workflow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 40px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.role-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.role-header {
    font-size: 1.4rem;
    color: var(--color-text);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-light);
}

.role-body {
    flex-grow: 1;
}

.role-main-point {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--color-text);
}

.role-desc {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 32px;
    line-height: 1.5;
}

/* Ergebnis-Highlighting */
.role-result-box {
    margin-top: auto; /* Drückt die Box ans untere Ende der Karte */
}

.role-result-label {
    display: block;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 4px;
}

.role-result-text {
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   FAQ SECTION STYLING
   ========================================= */

.faq-area {
    background-color: var(--color-bg); /* Konsistent zum Rest der Seite */
}

/* Die große weiße Umrandung */
.faq-wrapper {
    background-color: var(--color-bg-white);
    border-top: 5px solid var(--color-primary);
    padding: 80px 60px;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.faq-main-title {
    font-size: 2.25rem;
    color: var(--color-primary);
    margin-bottom: 60px;
    font-weight: 700;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

/* Die einzelnen FAQ-Boxen mit dem blauen Schatten-Effekt */
.faq-card {
    background: white;
    border: 1px solid #BFDBFE; /* Sehr heller blauer Rand */
    border-radius: 12px;
    padding: 32px;
    text-align: left;
    /* Dieser spezielle Glow-Effekt aus dem Screenshot */
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08);
    transition: all 0.3s ease;
}

.faq-card:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.15);
    border-color: var(--color-primary);
}

.faq-question {
    color: var(--color-primary);
    font-size: 1.25rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.faq-answer {
    color: var(--color-text);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    .faq-wrapper {
        padding: 40px 20px;
    }
    .faq-main-title {
        font-size: 1.75rem;
    }
}