* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Jost', sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 0px;
}

header, footer {
    
    
    text-align: center;
}

.navbar_unterseite {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    
    background: linear-gradient(
        rgba(255, 255, 255, 0.8) 0%,      /* etwas heller, 80% Deckkraft */
        rgba(255, 255, 255, 0.6) 60%,     
        rgba(255, 255, 255, 0.4) 100%       
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    
    
    z-index: 1000;
    box-sizing: border-box;
    
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.5rem;
    
    /* WICHTIG: Anfangszustand ist komplett transparent */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    z-index: 1000;
    box-sizing: border-box;
    /* Sanfter Übergang für den Hintergrund und den Filter */
    transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease; 
}

/* Zustand nach 350px Scrollen (Klasse wird durch JS hinzugefügt) */
.navbar.scrolled {
    background: linear-gradient(
        rgba(255, 255, 255, 0.8) 0%,      /* etwas heller, 80% Deckkraft */
        rgba(255, 255, 255, 0.6) 60%,     
        rgba(255, 255, 255, 0.4) 100%       
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Dezenter Schatten */
}


/* Logo */
.logo img {
    height: 45px;
    display: block;
    transition: height 0.3s;
}
@media (max-width: 900px) {
    .logo img {
        height: 32px;
    }
}

/* Navigation rechts */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

/* Links */
.nav-menu li a {
    text-decoration: none;
    color: #000;
    font-weight: 500;
    padding: 5px 0; /* Padding für bessere Klickfläche */
    display: block;
}


/* --- Dropdown Menü Modernisierung --- */

.dropdown {
    position: relative; /* Wichtig für die Positionierung des Dropdowns */
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 1px); 
    left: 0;
    
    /* Glassmorphismus-Effekt */
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3); 
    
    border-radius: 12px;
    padding: 10px 0; 
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);

    list-style: none;
    display: none;
    min-width: 180px; 
    z-index: 1000;
}

.dropdown-menu li {
    padding: 0; 
    margin: 0;
}

.dropdown-menu li a {
    display: block; 
    padding: 8px 20px; 
    color: #333; 
    text-align: left; 
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 400;
}

.dropdown-menu li a:hover {
    background-color: rgba(0, 0, 0, 0.05); 
    color: #000;
}

/* Dropdown zeigt sich beim Hover */
.dropdown:hover .dropdown-menu {
    display: block;
}


/* ==================================== */
/* --- BURGER MENÜ STYLING & MOBILE --- */
/* ==================================== */

/* Burger Icon selbst (Button) */
.burger-menu {
    display: none; /* Standardmäßig ausblenden auf großen Screens */
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 10px; /* Für bessere Klickfläche */
    z-index: 1001; 
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #000; /* Farbe des Icons */
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    z-index: 1001;
}

/* MEDIA QUERY: Layout ab 900px und kleiner */
@media (max-width: 900px) {
    
    /* Burger-Icon einblenden */
    .burger-menu {
        display: block; 
    }

    /* Das Menü standardmäßig verstecken und positionieren */
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%; 
        max-width: 300px;
        height: 100vh;
        
        /* Layout für die vertikale Liste */
        flex-direction: column;
        justify-content: flex-start; 
        padding: 80px 20px 20px; 
        gap: 20px; 
        
        /* Hintergrund für das Menü (Glassmorphismus-Stil) */
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: -4px 0 10px rgba(0,0,0,0.1);
        
        /* Verschieben aus dem Blickfeld */
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
    }
    
    /* Geöffneter Zustand des Menüs */
    .nav-menu.active {
        transform: translateX(0); /* Zurück ins Blickfeld schieben */
    }

    /* Dropdown-Menü auf Mobilgeräten */
    .dropdown {
        width: 100%; /* Dropdown nimmt volle Menübreite ein */
    }
    
    .dropdown-menu {
        /* Mobile Anpassungen */
        position: static; /* Nicht mehr absolut, sondern im Flow */
        width: 100%;
        margin-top: 10px;
        padding: 0 0 0 15px; /* Einrücken */
        
        /* Hintergrund/Schatten entfernen, da es im Menü liegt */
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        
        /* Das Dropdown ist standardmäßig versteckt (JS schaltet es um) */
        display: none; 
    }
    
    /* Deaktiviere das CSS-Hover-Verhalten auf Mobilgeräten */
    .dropdown:hover .dropdown-menu {
        display: none; 
    }

    /* Burger Icon Transformation (zum X) */
    .burger-menu.active .bar:nth-child(2) {
        opacity: 0; /* Mittleren Strich ausblenden */
    }
    .burger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg); /* Oben nach unten verschieben und drehen */
    }
    .burger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg); /* Unten nach oben verschieben und drehen */
    }
}



#hero-video {
    width: 100vw;       /* gesamte Fensterbreite */
    height: 400px;
    overflow: hidden;
    position: relative;
} 

/* Video selbst */
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* füllt Container komplett */
    display: block;
}



.feature-section {
    background-color: #3BD7C3; /* Hintergrundfarbe wie im Bild */
    padding: 40px 20px;
    
}

/* Container für die Kacheln - für ein 2x2-Layout */
.feature-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Spalten */
    gap: 30px; /* Abstand zwischen den Kacheln */
    max-width: 1200px; /* Maximale Breite des Containers */
    margin: 0 auto; /* Zentrierung */
}

/* Stil der einzelnen Kachel */
.feature-box {
    background-color: white;
    padding: 30px;
    border-radius: 20px; /* Abgerundete Ecken */
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}



/* Icon-Styling */
.feature-icon {
    font-size: 40px;
    color: #3BD7C3; /* Icon-Farbe */
    margin-right: 15px;
    width: 60px; /* Feste Breite für Ausrichtung */
    text-align: center;
}

/* Titel-Styling */
.feature-title {
    font-size: 1.5em;
    color: #333;
    margin: 0;
    font-weight: bold;
}

/* Text-Styling */
.feature-text {
    font-size: 1em;
    color: #555;
    line-height: 1.4;
    padding-left: 75px; /* Einrückung des Textes, um das Icon zu umgehen */
    margin-top: -15px; /* Etwas näher an den Titel rücken */
}

/* Anpassung für kleinere Bildschirme (Responsive Design) */
@media (max-width: 768px) {
    .feature-container {
        grid-template-columns: 1fr; /* Auf kleineren Bildschirmen nur eine Spalte */
    }

    .feature-text {
        padding-left: 0; /* Keine Einrückung mehr, Text kann unter das Icon rutschen */
        margin-top: 10px;
    }

    .icon-text-wrapper {
         /* Icon über dem Text, falls gewünscht */
         flex-direction: column;
         align-items: flex-start;
    }
    
    .feature-icon {
        margin-bottom: 10px;
        margin-right: 0;
    }
}
/* Styling der einzelnen PNG-Icons */
.feature-img {
    width: 60px; /* Die gewünschte Breite des Bildes festlegen */
    height: auto; /* Höhe automatisch anpassen */
    margin-right: 15px;
    /* Da das Bild bereits die Farbe und den Stil hat, brauchen wir keine 'color'-Eigenschaft wie beim Font. */
}

/* Der Rest des CSS bleibt gleich, insbesondere: */
.icon-text-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Und der folgende Block bleibt auch, um den Text einzurücken: */
.feature-text {
    /* ... andere Stile ... */
    padding-left: 75px; /* Einrückung des Textes (60px Bild + 15px Abstand) */
    margin-top: -15px; 
    /* ... andere Stile ... */
}
/* Grundlegende Sektion */
.leistungen-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Weißer Hintergrund */
   
    text-align: center;
}

/* Titel-Styling */
.leistungen-section h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #000000;
    margin-bottom: 40px;
    text-align: left; /* Überschrift links ausrichten */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Raster-Container für die Elemente (3 Spalten) */
.leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 gleich breite Spalten */
    gap: 30px; /* Abstand zwischen den Elementen */
    max-width: 900px; /* Maximale Breite des Rasters */
    margin: 0 auto;
}

/* Stil für das anklickbare Element */
.leistungs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none; /* Entfernt die Unterstreichung von Links */
    color: #000000;
    padding: 20px 10px;
    transition: transform 0.3s, opacity 0.3s; /* Sanfte Hover-Animation */
}

/* Hover-Effekt (optional, macht das Element interaktiver) */
.leistungs-item:hover {
    transform: translateY(-5px); /* Hebt das Element leicht an */
    opacity: 0.8; /* Macht es leicht durchscheinend */
}

/* Icon-Styling (PNGs) */
.leistungs-icon {
    width: 80px; /* Größe der Icons anpassen */
    height: auto;
    margin-bottom: 20px;
}

/* Titel-Styling */
.leistungs-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Beschreibungstext */
.leistungs-text {
    font-size: 0.9em;
    color: #555;
    line-height: 1.4;
}

/* Anpassung für kleinere Bildschirme (Responsive Design) */
@media (max-width: 900px) {
    .leistungen-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
    }
}

@media (max-width: 550px) {
    .leistungen-grid {
        grid-template-columns: 1fr; /* 1 Spalte auf Smartphones */
    }
    
    .leistungen-section h1 {
        text-align: center; /* Überschrift zentrieren, wenn das Raster 1-spaltig ist */
    }
}
/* --- Sektion & Container --- */
.contact-section {
    padding: 80px 20px;
    background-color: #3BD7C3; /* Türkiser Hintergrund */
    
}

.contact-section h1 {
    text-align: center;
    color: white;
    font-size: 2.5em;
    margin-bottom: 60px;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Info links, Formular etwas breiter rechts */
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Linke Spalte: Kontaktdaten --- */
.contact-info {
    color: white;
}

.intro-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 40px;
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.contact-icon-fa {
    font-size: 20px;
    color: white;
    width: 30px; /* Für Ausrichtung */
    margin-right: 15px;
}

.info-item a, 
.info-item p {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}

/* --- Rechte Spalte: Formular --- */
.contact-form-box {
    background-color: white;
    padding: 30px;
    border-radius: 20px; /* Abgerundete Ecken wie bei den Kacheln */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionaler Schatten */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box; /* Wichtig für korrekte Breite */
    font-size: 1em;
    font-family: inherit;
}

.contact-form textarea {
    resize: vertical; /* Nur vertikale Größenänderung zulassen */
}

.submit-button {
    background-color: #3BD7C3; /* Türkis als Akzentfarbe */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s;
}

.submit-button:hover {
    background-color: #3BD7C3; /* Dunklerer Ton beim Hover */
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .contact-container {
        grid-template-columns: 1fr; /* Eine Spalte auf kleineren Geräten */
    }
}
/* --- 1. Sektion Basis --- */
.projekte-section {
    font-family: 'Jost', sans-serif;
    background-color: #ffffff; 
    padding-bottom: 50px;
    position: relative; 
    z-index: 1; 
    
}

/* --- 2. Header (Türkise Box ohne Schatten) --- */
.projekte-header {
    background-color: #3BD7C3; 
    color: white;
    padding: 60px 40px 120px 40px; 
    
    /* Überlappung bleibt */
    margin-bottom: -80px; 
    
    /* Z-Index bleibt für die Überlappung der Bilder */
    position: relative; 
    z-index: 5; 
    
}

.projekte-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

.projekte-header p {
    font-size: 1.1em;
    max-width: 800px;
    line-height: 1.5;
}

/* --- 3. Wrapper (Erzeugt Scroll-Ansicht) --- */
.projekte-wrapper {
    overflow-x: scroll; /* ERMÖGLICHT HORIZONTALES SCROLLEN */
    padding: 0 40px; 
    -webkit-overflow-scrolling: touch; 
}

/* Container, der alle Elemente hält */
.projekte-container {
    display: flex; 
    gap: 20px; 
    flex-wrap: nowrap; /* VERHINDERT UMBRUCH! */
    padding-bottom: 20px; 
}

/* --- 4. Einzelne Projekt-Kachel --- */
.projekt-item {
    display: block; 
    position: relative;
    /* Verhindert, dass Flexbox die Elemente schrumpfen lässt -> HORIZONTAL FIX */
    flex-shrink: 0; 
    
    width: 280px; 
    height: 400px; 
    border-radius: 10px;
    overflow: hidden; 
    text-decoration: none;
    
    /* ENTFERNT: box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
    
    transition: transform 0.3s ease; 
    z-index: 1001; /* Liegt unter dem Header (10) */
}

/* Zoom-Effekt beim Hovern bleibt */
.projekt-item:hover {
    transform: scale(1.05);
}

/* --- Der Rest (Bilder, Overlay, Link) bleibt gleich --- */

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

.projekt-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); 
}

.titel-oben {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0;
}

.titel-unten {
    font-size: 1em;
    margin: 5px 0 0 0;
}
@media (max-width: 900px) {
    /* ... andere mobile Anpassungen wie z.B. für die Navbar ... */

    /* WICHTIGE Z-INDEX KORREKTUR FÜR DIE KACHELN */
    .projekt-item {
        /* Muss über dem .projekte-header (z-index: 5) liegen */
        position: relative; /* Muss definiert sein, damit Z-Index funktioniert */
        z-index: 1001 !important; /* Sehr hoch, um Konflikte zu vermeiden */
    }
    
    /* Der Header, der der Hintergrund sein soll, muss tiefer liegen.
       Wenn du den Header hier neu definierst, stelle sicher, dass sein Z-Index niedrig bleibt. */
    .projekte-header {
        z-index: 5;
         margin-bottom: 0px; 
    }
    
    /* ... Rest des Media Queries ... */
}

.referenzen-link-container {
    /* 1. Breite anpassen: Das Element nimmt nur so viel Platz ein, wie es braucht */
    width: fit-content; 
    /* Alternative (ältere Browser): display: inline-block; */

    /* 2. Zentrierung des Elements: Zentriert den Container selbst, da text-align: center; nur den INHALT zentriert. */
    margin: 50px auto 0 auto; /* Oben 50px, Links/Rechts 'auto' (zentriert), Unten 0 */
    
    /* 3. Abgerundete Ecken */
    border-radius: 8px; /* Du kannst diesen Wert anpassen */

    /* 4. Padding (Optional, aber empfohlen): Fügt Platz um den Text herum hinzu, damit der "Button" größer wird */
    padding: 10px 20px; 

    /* Behalte die Transition für sanfte Übergänge */
    transition: all 0.3s ease-in-out; 
    
    /* Initialer Schatten (aus dem vorherigen Beispiel) */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.referenzen-link-container:hover {
    background-color: #3BD7C3; 
    
    /* Schatten für den "Abhebe"-Effekt */
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    
    /* Leichte Bewegung nach oben */
    transform: translateY(-2px); 
}
.referenzen-link {
    color: #000000;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    display: inline-block;
}

.underline-strip {
    width: 100%;
    height: 3px;
    background-color: #000000;
    margin-top: 2px;
}

/* Scrollbar verstecken */
.projekte-wrapper::-webkit-scrollbar {
    display: none;
}
.projekte-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* --- Haupt-Footer --- */
.main-footer {
    background-color: #3BD7C3; /* Türkise Farbe */
    color: white;
    padding-top: 50px;
    font-family: 'Jost', sans-serif;
}

.footer-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- Spalten-Styling --- */
.footer-column {
    margin-bottom: 30px;
    min-width: 150px; /* Mindestbreite, bevor der Umbruch erfolgt */
}

.footer-column h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
    /* Optional: Unterstrich für Trennung */
    padding-bottom: 5px; 
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

/* --- Navigation & Links --- */
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.2s;
}

.footer-column ul li a:hover {
    color: #f0f0f0; /* Leichtes Grau beim Hover */
}

/* --- Logo / Brand Spalte --- */
.footer-logo {
    height: 45px; /* Höhe wie in der Navigation */
    margin-bottom: 15px;
}

.footer-brand p {
    font-size: 0.9em;
    line-height: 1.4;
    max-width: 250px;
}

/* --- Social Media --- */
.social-links a {
    color: white;
    font-size: 24px;
    margin-right: 15px;
    transition: color 0.2s;
}

.social-links a:hover {
    color: #000000; /* Schwarz beim Hover, um Akzent zu setzen */
}

/* --- Copyright Leiste --- */
.footer-bottom {
    text-align: center;
    padding: 20px 40px;
    margin-top: 30px;
    /* Dunklerer Streifen am unteren Rand */
    background-color: #3BD7C3; 
    font-size: 0.85em;
}

/* --- Responsive Anpassung --- */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Spalten untereinander stapeln */
        padding: 0 20px;
    }
    .footer-column {
        min-width: 100%;
        margin-bottom: 30px;
    }
}
/* --- 1. HERO-SEKTION --- */
.subpage-hero {
    background-color: #3BD7C3; /* Türkise Farbe */
    color: white;
    padding: 120px 40px 80px 40px; /* Großzügiges Padding */
    text-align: center;
    /* Optional: Fügt eine weiße Welle oder schräge Kante nach unten hinzu, wenn gewünscht */
    /* clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); */ 
}

.subpage-hero h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.subpage-hero .subtitle {
    font-size: 1.4em;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 2. USP-SEKTION --- */
.subpage-usp-section {
    padding: 60px 40px;
    background-color: #f7f7f7; /* Leicht grauer Hintergrund */
    text-align: center;
}

.subpage-usp-section h2 {
    font-size: 2em;
    margin-bottom: 40px;
}

.usp-grid-subpage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.usp-item {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Leichter Schatten */
}

.usp-icon {
    font-size: 3em;
    color: #3BD7C3;
    margin-bottom: 15px;
}

.usp-item h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
}


/* --- 3. HAUPT-CONTENT-SEKTION --- */
.subpage-content-section {
    padding: 80px 40px;
    background-color: #ffffff;
}

.content-wrapper {
    display: flex;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start; /* Stellt sicher, dass die Elemente oben beginnen */
}

.content-text-block {
    flex: 1;
    min-width: 40%;
}

.content-media-block {
    flex: 1;
    min-width: 40%;
    height: 200px;
}

.content-image {
    width: 100%;
    height: 300px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.content-text-block h2 {
    font-size: 2em;
    margin-bottom: 25px;
    color: #333;
}

.content-text-block p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.cta-button {
    display: inline-block;
    background-color: #3BD7C3;
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #3BD7C3;
}

/* --- Responsive Anpassung --- */
@media (max-width: 900px) {
    .content-wrapper {
        flex-direction: column; /* Spalten untereinander stapeln */
    }
    .content-media-block {
        order: -1; /* Bild/Video oben anzeigen */
        margin-bottom: 3px;
    }
}


.subpage-hero {
    background-color: #3BD7C3; /* Türkise Farbe */
    color: white;
    padding: 120px 40px 80px 40px; 
    text-align: center;
}

.subpage-hero h1 {
    font-size: 3.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.subpage-hero .subtitle {
    font-size: 1.4em;
    max-width: 800px;
    margin: 0 auto;
}

/* --- 2. PROJEKT-LISTE (Vertikale Anordnung) --- */
.project-list-section {
    padding: 60px 40px;
    background-color: #f7f7f7; /* Heller Hintergrund für Abgrenzung */
}

.list-container {
    max-width: 1000px;
    margin: 0 auto;
}

.project-entry {
    background-color: white;
    margin-bottom: 50px;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    
    /* ZWEI-SPALTEN LAYOUT AUF DESKTOP */
    display: flex; 
    flex-direction: row; /* Video (links) und Text (rechts) nebeneinander */
    gap: 30px; 
    align-items: flex-start; 
}

/* LINKER BLOCK (60% BREITE) - Enthält nur das Video */
.project-media-column {
    width: 60%; 
    /* Enthält nur das Video, daher keine Flexbox-Stapelung mehr nötig */
}

.project-details {
    width: 40%; /* Text-Details nehmen 40% der Breite ein (rechts) */
}

.link_baqua{
    color: black;
}
.link_baqua:hover{
    color: #3BD7C3;
}
/* CONTAINER FÜR DAS VIDEO (Macht es responsiv) */
.project-video-container {
    position: relative;
    width: 100%; /* MUSS 100% der Elternbreite (60%) einnehmen */
    padding-bottom: 56.25%; /* Standard 16:9 Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.project-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.project-details h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 5px;
}

.project-type {
    color: #3BD7C3; 
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 15px;
}

.project-description {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Kleiner CTA Button */
.cta-button-small {
    display: inline-block;
    background-color: #333; 
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s;
}

.cta-button-small:hover {
    background-color: #3BD7C3; 
}


/* --- 3. CTA-SEKTION (Am Ende der Seite) --- */
.cta-section-footer {
    background-color: #3BD7C3; 
    padding: 60px 40px;
    text-align: center;
    color: white;
}

.cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.cta-section-footer h2 {
    font-size: 2em;
    margin-bottom: 15px;
}

.cta-section-footer p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: white; 
    color: #333;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #f0f0f0;
}


/* --- Responsive Anpassung (Für Mobilgeräte: ALLES UNTEREINANDER) --- */
@media (max-width: 900px) {
    .project-entry {
        flex-direction: column; /* Stapelt Video/Bilder und Text untereinander */
    }
    .project-media-column {
        width: 100%; /* Nimmt volle Breite ein */
    }
    .project-details {
        width: 100%; /* Nimmt volle Breite ein */
        padding-top: 20px;
    }
}

.profile-section {
    padding: 60px 40px;
    background-color: #ffffff;
}

.profile-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 50px; /* Abstand zwischen Bild/Fakten und Text */
    align-items: flex-start;
}

/* Linke Spalte: Bild & Fakten (35% Breite) */
.profile-media-facts {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Haftend machen, damit die Fakten beim Scrollen sichtbar bleiben */
    position: sticky; 
    top: 30px; 
}

.profile-image {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Abgerundete Ecken */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.key-facts-block {
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.key-facts-block h2 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #3BD7C3;
    padding-bottom: 5px;
}

.key-facts-block ul {
    list-style: none;
    padding: 0;
}

.key-facts-block li {
    margin-bottom: 10px;
    font-size: 1em;
}

.fact-icon {
    color: #3BD7C3;
    margin-right: 10px;
}


/* Rechte Spalte: Story & Tech (65% Breite) */
.profile-story-tech {
    width: 65%;
}

.profile-story-tech h2 {
    font-size: 2em;
    color: #3BD7C3; 
    margin-top: 0;
    margin-bottom: 15px;
}

.profile-story-tech p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

/* Tech Block */
.tech-block {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.tech-block ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tech-block li {
    font-size: 1.1em;
    font-weight: 500;
    background-color: #f7f7f7;
    padding: 10px 15px;
    border-radius: 50px;
}

.tech-icon {
    color: #333;
    margin-right: 8px;
}


/* --- Responsive Anpassung --- */
@media (max-width: 900px) {
    .profile-content-wrapper {
        flex-direction: column; /* Stapeln auf Mobilgeräten */
        gap: 30px;
    }

    .profile-media-facts, 
    .profile-story-tech {
        width: 100%; /* Volle Breite */
        position: static; /* Sticky auf Mobilgeräten deaktivieren */
    }
    
    .tech-block ul {
        flex-direction: column;
    }
    
    .profile-image {
        max-height: 400px; /* Bild auf Mobilgeräten nicht zu hoch machen */
    }
}
.passion-profile-section {
    padding: 60px 40px;
    background-color: #f7f7f7;
    text-align: center;
}

.passion-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.central-profile-image {
    width: 100%;
    max-width: 450px; /* Bildgröße begrenzen */
    height: auto;
    border-radius: 20px; /* Stark abgerundete Ecken */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 40px;
}

.central-story-block h2 {
    font-size: 2.5em;
    color: #3BD7C3; /* Türkis */
    margin-bottom: 15px;
}

.central-story-block p {
    font-size: 1.1em;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: justify;
}

/* Hobby Badges */
.hobby-badges {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.badge {
    display: inline-block;
    background-color: #fff;
    color: #333;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid #ddd;
    font-weight: 500;
}

.fact-icon {
    color: #3BD7C3;
    margin-right: 8px;
}


/* --- 3. BTS GALERIE SEKTION --- */

.bts-action-section {
    padding: 60px 40px;
    background-color: #ffffff;
}

.bts-action-section h2 {
    text-align: center;
    font-size: 2em;
    color: #333;
    margin-bottom: 40px;
}

.bts-gallery-action {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    /* 3 Spalten auf Desktop, 1 oder 2 auf Mobile */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 25px;
}

/* --- Container für die Positionierung und den Hover-Effekt (Zoom bleibt) --- */
.image-container {
    position: relative; /* Wichtig für die absolute Positionierung der Beschriftung */
    overflow: hidden; 
    
    /* Styles vom bts-image-large hierher verschoben: */
    border-radius: 15px; 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease; /* Transition für den Zoom-Effekt */
}

/* Der Zoom-Effekt beim Hovern bleibt, wenn gewünscht */
.image-container:hover {
    transform: scale(1.02);
}

/* --- Aktualisiert: Das Bild selbst --- */
.bts-image-large {
    width: 100%;
    height: 300px; /* Feste Höhe für einheitlichen Look */
    object-fit: cover; /* Bilder füllen den Raum, ohne verzerrt zu werden */
    display: block;
}

/* --- AKTUELLE STYLING: Styling für die Bildunterschrift (Caption) --- */
.image-caption {
    position: absolute;
    bottom: 0; /* Unten links positionieren */
    left: 0;   /* Unten links positionieren */
    background-color: rgba(0, 0, 0, 0.0); /* Dunkler, halbtransparenter Hintergrund */
    color: white;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 1; /* WICHTIG: Immer sichtbar */
    z-index: 10; 
    /* WICHTIG: pointer-events: none; WURDE ENTFERNT, damit der Link klickbar ist */
    /* Die Transition für opacity ist nicht mehr nötig, kann aber bleiben, wenn Sie das Element später wieder animieren wollen. */
}

/* WICHTIG: Die .image-container:hover .image-caption Regel WURDE ENTFERNT */


/* Styling für den Link innerhalb der Beschriftung */
.image-caption a {
    color: white;             /* Textfarbe Weiß */
    text-decoration: none;    /* Unterstreichung entfernen */
    border-bottom: 1px solid white; /* Optional: Eine subtile Unterstreichung für den Link-Hinweis */
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

/* Optional: Hover-Effekt für den Link */
.image-caption a:hover {
    color: #3BD7C3; /* Leuchtender Gold-Ton beim Überfahren */
    border-bottom: 1px solid #3BD7C3;
}


/* --- Responsive Anpassung --- */
@media (max-width: 600px) {
    .passion-profile-section {
        padding: 40px 20px;
    }
    
    .passion-content-wrapper {
        text-align: left;
    }
    
    .central-profile-image {
        margin-bottom: 30px;
    }
    
    .hobby-badges {
        justify-content: flex-start;
    }
    
    .bts-action-section {
        padding: 40px 20px;
    }
}
/* Grundlegende Container- und Abschnittsstile */
.video-production-flow {
    /* Keine Hintergrundfarbe (transparent/weiß), wie gewünscht */
    padding: 80px 20px; /* Vertikaler Abstand oben/unten */
    font-family: 'Jost', sans-serif; /* Ihre gewünschte Schriftart */
    text-align: center; /* Zentrierung des gesamten Inhalts (Überschrift, etc.) */
}

/* Zentrierter Inhalts-Container (optional, zur Begrenzung der Breite) */
.video-production-flow .container {
    max-width: 1200px; /* Maximale Breite der Sektion */
    margin: 0 auto; /* Zentrieren des Containers */
    padding: 0 15px;
}

/* Hauptüberschrift */
.flow-title {
    font-size: 30px; /* Oder passen Sie die Größe an Ihre Website an */
    font-weight: 500; /* Mittlere Dicke für die Überschrift */
    color: #333; /* Dunkle Schriftfarbe */
    margin-bottom: 60px; /* Abstand zur Unterkante */
}

/* Flex-Container für die 4 Spalten */
.flow-steps {
    display: flex;
    justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Karten */
    gap: 30px; /* Abstand zwischen den Spalten */
}

/* Einzelne Schrittkarte */
.step-card {
    flex: 1; /* Nimmt gleichen Platz ein (1/4 der Breite) */
    display: flex;
    flex-direction: column; /* Icon, Titel, Text untereinander */
    align-items: center; /* Alles zentral ausrichten */
    text-align: center;
}

/* Wrapper für das Icon */
.icon-wrapper {
    width: 100px; /* Platz für das Icon */
    height: 100px;
    margin-bottom: 25px; /* Abstand zum Titel */
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-wrapper img {
    max-width: 100%;
    height: auto;
    /* Optional: Falls die Icons nicht farbig sind, können Sie die Farbe des Pfades anpassen */
    /* filter: invert(0.2) sepia(1) saturate(5) hue-rotate(175deg); */
}

/* Titel des Schritts (Konzeption, Dreh, etc.) */
.step-title {
    font-size: 18px;
    font-weight: 700; /* Fett für den Titel */
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
}

/* Beschreibungstext */
.step-description {
    font-size: 15px;
    font-weight: 400; /* Normale Dicke für den Text */
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) {
    .flow-steps {
        flex-wrap: wrap; /* Schritte springen in die nächste Zeile */
        justify-content: center; /* Schritte zentral ausrichten */
    }

    .step-card {
        flex-basis: 45%; /* Jeweils 2 Schritte pro Zeile */
        margin-bottom: 40px; /* Abstand zwischen den Reihen */
    }
}

@media (max-width: 576px) {
    .step-card {
        flex-basis: 100%; /* Jeweils 1 Schritt pro Zeile auf Handys */
    }

    .flow-title {
        font-size: 24px;
    }
}

.impressum-block {
    margin-top: 6%;
    margin-left: 5%;
}