/* === Basic Reset === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Base HTML & Body Styling === */
html {
    height: 100%;
}

@font-face {
  font-family: 'nowregular'; /* Choose a name you'll use in CSS */
  src: url('../assets/fonts/Now-Regular.otf') format('opentype');
  font-display: swap;
  /* Adjust font-weight and font-style if this isn't a regular weight/style */
  font-weight: normal; /* or 400 */
  font-style: normal;
}

@font-face {
  font-family: 'superduper'; /* Choose a name you'll use in CSS */
  src: url('../assets/fonts/AH_SuperDuper-Regular.otf') format('opentype');
  font-display: swap;
  /* Adjust font-weight and font-style if this isn't a regular weight/style */
  font-weight: normal; /* or 400 */
  font-style: normal;
}

@font-face {
  font-family: 'genovablack'; /* Choose a name you'll use in CSS */
  src: url('../assets/fonts/Genova-Black.otf') format('opentype');
  font-display: swap;
  /* Adjust font-weight and font-style if this isn't a regular weight/style */
  font-weight: normal; /* or 400 */
  font-style: normal;
}

@font-face {
  font-family: 'genovaregular'; /* Choose a name you'll use in CSS */
  src: url('../assets/fonts/Genova-Regular.otf') format('opentype');
  font-display: swap;
  /* Adjust font-weight and font-style if this isn't a regular weight/style */
  font-weight: normal; /* or 400 */
  font-style: normal;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Use min-height instead of height: 100% */
    font-family: 'nowregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5; /* Set a base line-height */
}

a {
	color: #ccc;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
    color: #fff;
}

/* === Page Specific Body Styles === */
body.home-page {
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
	overflow-y: auto;
}

body.sub-page {
    background-color: #000;
    color: #fff; /* Dark text for subpages */
	overflow-x: hidden;
    overflow-y: auto; /* Allow scroll on subpages */
}

/* === Header Styling (Consistent) === */
header {
    background-color: #000;
    padding: 15px 30px;
    width: 100%;
    flex-shrink: 0;
    border-bottom: 1px solid #222;
    position: relative; /* Or fixed, depending on desired behavior */
    z-index: 1000;
}

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

.logo {
    font-weight: bold;
    font-size: 1.1em;
    color: #fff; /* Ensure logo is white */
    text-decoration: none;
}

.logo-link {
	color: inherit;
	text-decoration: none;
}

nav a {
    margin-left: 25px;
	color: #ccc;
	text-decoration: none;
	transition: color 0.2s ease;
}

nav a:hover {
    color: #fff;
}

.social a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.2s ease;
}

.social a:hover {
    color: #fff;
}

/* === Main Content Area Styling === */
main {
    flex-grow: 1; /* Allows main content to fill space */
}

/* Specific style for homepage main area */
body.home-page main {
    display: flex;
}

/* Specific style for subpage main area */
main.page-content {
    /* Add padding-top only if header is fixed */
    /* padding-top: 70px; */
}

.image-grid {
    display: flex;
    /* Mobile First: Stack vertically by default */
    flex-direction: column;
    width: 100%;
    /* Height 'auto' allows content to determine height on mobile */
    /* Remove or adjust if you have specific full-height requirements */
    height: auto;
    /* Consider adding a gap for spacing on mobile */
    /* gap: 10px; */
}

.image-link {
    flex: none; /* Don't allow items to grow/shrink on mobile */
    width: 100%; /* Each item takes full width on mobile */
    position: relative;
    overflow: hidden;
    display: block;
    /* Define how tall each item should be on mobile */
    /* Option 1: Aspect Ratio (Recommended for images/video) */
    aspect-ratio: 16 / 9; /* Adjust ratio as needed */
    /* Option 2: Fixed Height */
    /* height: 250px; */
    /* Option 3: Viewport Height Unit (can be tricky if content overflows) */
    /* height: 50vh; */
}

.image-link img {
    display: block;
    width: 100%;
    height: 100%; /* Fill the container defined by .image-link height/aspect-ratio */
    object-fit: cover; /* Cover the area, potentially cropping */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

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

/* Homepage text overlay */
.image-text-overlay {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 10;
    /* Optional: Add text shadow for better readability */
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); */
}

.image-link:hover .image-text-overlay {
    opacity: 1;
}


/* === Desktop Layout (using Media Query) === */
@media (min-width: 1024px) { /* Adjust breakpoint (768px) as needed */

    /* --- HOMEPAGE: Prevent Scrolling on Desktop --- */
    body.home-page {
        overflow: hidden; /* !!! PREVENT SCROLLING ON DESKTOP !!! */
    }

    .image-grid {
        /* Switch to horizontal layout */
        flex-direction: row;
        /* Restore height if it should fill the parent on desktop */
        /* Example: If the parent container has a specific height */
        height: 100%; /* Assuming parent container controls height */
        /* Remove gap if added for mobile, or adjust */
         /* gap: 0; */
    }

    .image-link {
        /* Allow items to grow and shrink equally to fill horizontal space */
        flex: 1;
        /* Reset width and height properties set for mobile */
        width: auto; /* Let flexbox handle width */
        height: 100%; /* Fill the height of the .image-grid container */
        /* Remove aspect-ratio if it conflicts with filling height */
        aspect-ratio: auto;
    }

    /* Text overlay position might not need changing, but adjust if needed */
     .image-text-overlay { 
		opacity: 0; 
	 } 
}

/* === Subpage Styles (link-page1.html) === */

/* Banner Styling */
.banner {
    height: 58vh;
    position: relative;
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: center;
    /* justify-content: center; */ /* <<< Entfernen oder auf flex-start setzen */
    color: #fff;
    /* text-align: center; */ /* <<< Entfernen */
    width: 100%; /* Sicherstellen, dass der Banner-Container die volle Breite hat */
}

.banner-content {
    width: 100%; /* Nimmt die Breite des Flex-Items ein */
    max-width: 80%; /* <<< Gleiche max-width wie .project-grid-container */
    margin: 0 auto; /* <<< Zentriert den Container */
    padding: 0 30px; /* <<< Gleiches Padding wie .project-grid-container */
	margin-top: 40vh;
}

.commercials-banner {
    background-image: url('../assets/images/commercials/porsche/Porsche_GT3_Stills_Maximilian_Boehm_1.jpg');
	background-size: cover;
	background-position: center bottom;
}

.banner h1 {
	font-family: "genovablack";
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    /* padding: 0 20px; */ /* <<< Entfernen, da Container-Padding genutzt wird */
    text-align: left; /* <<< WICHTIG: Text linksbündig ausrichten */
    width: 100%; /* Stellt sicher, dass der H1 den Container ausfüllt */
}

.projects-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.projects-intro-square {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
	grid-column: 1 / -1;
}

.intro-heading h2 {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.3;
    margin-top: 30px;
	margin-bottom:30px;
    flex-basis: 30%;
    flex-shrink: 0;
}

.intro-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    flex-basis: 65%;
}

/* Subpage Project Grid Styling */
.project-grid-container {
    max-width: 80%;
    margin: 0 auto 80px auto;
    padding: 0 30px;
}

.project-grid-container-square {
    max-width: 80%;
    margin: 0 auto 80px auto;
    padding: 0 30px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.project-grid {
    display: grid;
	grid-template-columns: repeat(2, 1fr); /* <<<< THIS IS THE NEW LINE */
    /*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));*/
    gap: 50px 40px; /* Row gap, Column gap */
}

.project-item-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.project-item-square {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.project-video-section {
	margin-top: 30px;
}

.project-image,
.project-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.project-image-square,
.project-video-square {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
	margin: auto auto;
	object-position: center top;
}

.project-video-square {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-item-square:hover .project-video-square {
    opacity: 1;
}

.project-image {
    z-index: 2;
    transition: opacity 0.3s ease-in-out;
}

.project-video {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Video hover effect */
.project-item-link:hover .project-image {
    opacity: 0;
}

.project-item-link:hover .project-video {
    opacity: 1;
    z-index: 3;
}

/* Subpage Project Title & Description */
.project-title {
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1.4;
    text-transform: uppercase;
}

.project-description {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.5;
}

/* === Responsive Adjustments === */
@media (max-width: 1024px) {
    /* Adjustments for subpage layout */
    body.sub-page .projects-intro {
        flex-direction: column;
        gap: 20px;
    }
    body.sub-page .intro-heading h2,
    body.sub-page .intro-text p {
        flex-basis: auto;
    }
    body.sub-page .project-grid {
        gap: 40px 30px;
    }
    body.sub-page .projects-intro-container,
    body.sub-page .project-grid-container {
        padding: 0 20px;
        margin-top: 40px;
        margin-bottom: 60px;
    }
    body.sub-page .intro-heading h2 {
       font-size: 1.5rem;
    }
    body.sub-page .banner h1 {
        font-size: clamp(2rem, 6vw, 3rem); /* Adjust banner font size */
    }

    /* Adjustments for header on smaller screens */
    header {
        padding: 10px 20px;
    }
    nav a {
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    body.sub-page .banner h1 {
        letter-spacing: 3px;
    }
    body.sub-page .intro-heading h2 {
         font-size: 1.4rem;
     }
    body.sub-page .project-grid {
        grid-template-columns: 1fr; /* Force 1 column */
        gap: 30px;
     }
     /* Adjust padding for containers on very small screens */
     body.sub-page .projects-intro-container,
     body.sub-page .project-grid-container {
        padding: 0 15px;
    }

    /* Header adjustments for very small screens if needed */
    .header-container {
        flex-wrap: wrap; /* Allow wrapping if needed */
        justify-content: center;
        gap: 10px;
    }
    nav {
        /* Adjust nav layout if needed */
        order: 3; /* Example: Move nav below logo/social */
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    nav a {
        margin: 0 10px;
    }
    .social {
        order: 2; /* Example */
    }
    .logo {
        order: 1; /* Example */
    }

    /* Adjust homepage text overlay size */
    .image-text-overlay {
        font-size: 1em;
        bottom: 15px;
        left: 15px;
    }
}

/* Optional: Stelle sicher, dass Detailseiten scrollbar sind */
body.project-detail-page {
    /* overflow-y: auto; */ /* Sollte schon von sub-page geerbt werden */
}

/* Wrapper für den Hauptinhalt der Detailseite */
main.page-content-detail {
    flex-grow: 1;
    /* Kein Padding-Top hier, da der Banner direkt folgt */
}

/* Projekt-Detail Banner */
.project-detail-banner {
    height: 58vh; /* Höhe anpassen nach Bedarf */
    position: relative;
    background-size: cover;
    background-position: center center; /* Bild zentrieren */
    display: flex;
    align-items: center;  /* Inhalt vertikal zentrieren */
    justify-content: center; /* Inhalt horizontal zentrieren */
    color: #fff;
    text-align: center;
}

.porsche-banner {
    background-image: url('../assets/images/commercials/porsche/Porsche_GT3_Stills_Maximilian_Boehm_2.jpg');
}

.steakr-banner {
    background-image: url('../assets/images/commercials/steakr/Steakr Low Key Preview_1.jpg');
}

.mercedes-banner {
    background-image: url('../assets/images/commercials/mercedes/Mercedes_SLR_McLaren_Maximilian_Boehm_5.jpg');
}

.frauscher-banner {
    background-image: url('../assets/images/commercials/frauscher/Frauscher_Banner_Small_Maximilian_Boehm_1.jpg');
}

.primus-banner {
    background-image: url('../assets/images/commercials/primus/Primus_Maximilian_Boehm_Banner.jpg');
}

.toelzerland-banner {
    background-image: url('../assets/images/commercials/toelzerland/Toelzer_Land_Maximilian_Boehm_Banner.jpg');
}

.music-banner {
    background-image: url('../assets/images/music/Music_Maximilian_Boehm.jpg');
}

.kim-banner {
    background-image: url('../assets/images/music/kim/KimMonaBanner_Maximilian_Boehm.jpg');
}

.cinematic-banner {
    background-image: url('../assets/images/cinematic/abby/Cinematic_Maximilian_Boehm.jpg');
}

.abby-banner {
    background-image: url('../assets/images/cinematic/abby/Abby_Banner_Maximilian_Boehm.jpg');
}

.project-banner-title {
    font-family: 'genovablack', serif; /* Serif-Schriftart wie im Beispiel */
    font-size: clamp(2.8rem, 7vw, 5rem); /* Responsive Größe */
    font-weight: 400; /* Eher dünnere Schriftstärke */
    color: #ffffff;
    margin: 0; /* Standard-Margin entfernen */
    padding: 0 0px; /* Sicherstellen, dass Text nicht an den Rand stößt */
	text-align: left;
}


/* Projekt-Details Sektion */
.project-details-section {
    padding: 80px 0; /* Oberer/unterer Innenabstand */
    color: #333; /* Dunklere Textfarbe für diesen Bereich */
}

.project-details-container {
    max-width: 80%; /* Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentrieren */
    padding: 0 30px; /* Links/Rechts Innenabstand */
    display: flex;
    gap: 60px; /* Abstand zwischen den Spalten */
    align-items: flex-start; /* Oben ausrichten */
}

/* Linke Spalte */
.details-left-column {
    flex: 0 0 25%; /* Breite der linken Spalte (anpassen) */
    max-width: 25%;
}

.metadata p,
.services p:first-of-type { /* Nur die Überschrift "Leistungen" */
    margin-bottom: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.metadata p strong,
.services p strong {
    font-weight: 700; /* Fett für Labels */
    color: #ffffff; /* Weiß für Labels */
    text-transform: capitalize; /* <<< DIESE ZEILE HINZUFÜGEN */
}

.services {
    margin-top: 0px; /* Abstand nach Metadaten */
}

.services-tags {
    display: flex;
    flex-wrap: wrap; /* Tags umbrechen lassen */
    gap: 10px; /* Abstand zwischen den Tags */
    margin-top: 10px;
}

.service-tag {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc; /* Grauer Rand */
    border-radius: 4px; /* Leicht abgerundete Ecken */
    font-size: 0.85rem;
    color: #555; /* Etwas dunkleres Grau für Tag-Text */
    background-color: black;
	color: white;
    white-space: nowrap; /* Verhindert Umbruch innerhalb eines Tags */
}

/* Rechte Spalte */
.details-right-column {
    flex: 1; /* Nimmt den Rest der Breite */
}

.details-right-column p {
    font-size: 1rem;
    line-height: 1.7;
    color: #fff; /* Textfarbe für Beschreibung */
    margin-bottom: 1.5em; /* Abstand zwischen Absätzen */
}

.details-right-column p:last-child {
    margin-bottom: 0; /* Kein Abstand nach dem letzten Absatz */
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 20px 30px;
    font-size: 0.85rem;
    color: #fff; /* Graue Textfarbe */
	background-color:#000;
    /*border-top: 1px solid #eee; */ /* Leichte Trennlinie */
}

/* Responsive Anpassungen für Detailseite */
@media (max-width: 992px) {
    .project-details-container {
        gap: 40px;
    }
    .details-left-column {
        flex: 0 0 40%;
        max-width: 40%;
    }
}


@media (max-width: 768px) {
    .project-details-section {
        padding: 60px 0;
    }
    .project-details-container {
        flex-direction: column; /* Spalten untereinander stapeln */
        padding: 0 20px;
        gap: 40px;
    }
    .details-left-column,
    .details-right-column {
        flex-basis: auto; /* Breite zurücksetzen */
        max-width: 100%;
    }
    .project-detail-banner {
        height: 50vh; /* Banner auf kleineren Bildschirmen ggf. niedriger */
    }
    .project-banner-title {
        font-size: clamp(2.2rem, 6vw, 3.5rem);
    }
}

.project-gallery-section {
    padding: 60px 0 80px 0; /* Abstand über/unter der Galerie */
}

.gallery-container {
    max-width: 80%; /* Breite wie andere Inhaltsblöcke */
    margin: 0 auto; /* Zentrieren */
    padding: 0 30px; /* Seitenabstand */
}

/* Optional: Styling für Galerie-Überschrift */
.gallery-container h2 {
    text-align: center; /* Überschrift zentrieren */
    margin-bottom: 40px; /* Abstand unter der Überschrift */
    font-size: 2rem;
    color: #333;
    font-weight: 600;
}

.image-gallery-grid-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px; /* Abstand zwischen den Grid-Items (Bildern) */
}

.image-gallery-grid-1-smallspaces {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px; /* Abstand zwischen den Grid-Items (Bildern) */
}

.image-gallery-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* Abstand zwischen den Grid-Items (Bildern) */
}


.gallery-item {
    overflow: hidden; /* Nützlich für Hover-Effekte wie Zoom */
    border-radius: 4px; /* Optionale abgerundete Ecken */
}

.gallery-item img {
    display: block; /* Wichtig: Entfernt Leerraum unter dem Bild */
    width: 100%; /* Bild füllt die Breite des Grid-Items */
    height: auto; /* Höhe passt sich automatisch an, Seitenverhältnis bleibt erhalten */
    /* Alternativ, wenn alle Items gleich hoch sein sollen: */
    /* height: 250px; */ /* Feste Höhe */
    /* object-fit: cover; */ /* Bild bedeckt Bereich, wird ggf. beschnitten */
    transition: transform 0.3s ease; /* Für Hover-Effekt */
}

/* Optional: Hover-Effekt für Bilder */
.gallery-item:hover img {
    transform: scale(1.03); /* Leichter Zoom */
}

/* Responsive Anpassungen für Galerie */
@media (max-width: 1100px) {
    .project-gallery-section {
        padding: 40px 0 60px 0;
    }
    .gallery-container {
        padding: 0 20px;
    }
    .image-gallery-grid {
        gap: 20px; /* Kleinerer Abstand auf Mobilgeräten */
        /* Ggf. Mindestbreite anpassen, falls nötig */
        /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    }
}

@media (max-width: 500px) {
    .gallery-container {
        padding: 0 15px;
    }
    .image-gallery-grid {
         /* Oft sinnvoll, auf sehr kleinen Geräten nur eine Spalte zu erzwingen */
         grid-template-columns: 1fr;
         gap: 15px;
    }
}

body.about-page {
    /* Hintergrund ist bereits weiß von .sub-page */
}

main.about-content-wrapper {
    padding-top: 80px; /* Abstand vom Header (anpassen falls Header fixed ist) */
    padding-bottom: 100px; /* Abstand zum Footer */
    flex-grow: 1;
}

.about-container {
    max-width: 800px; /* Breite des Textbereichs (anpassen) */
    margin: 0 auto; /* Zentrieren */
    padding: 0 30px; /* Seitenabstand */
    text-align: center; /* Zentriert den gesamten Textblock initial */
}

/* Styling für den einleitenden Satz (Option 2) */
.about-intro-statement {
    font-family: 'Lora', serif; /* Beispiel: Serif-Schriftart für den Akzent */
    font-size: clamp(2rem, 5vw, 3rem); /* Responsive Schriftgröße */
    line-height: 1.4;
    color: #222; /* Etwas dunkler für Betonung */
    margin-bottom: 60px; /* Deutlicher Abstand zum restlichen Text */
    font-weight: 500; /* Etwas fetter als normaler Text */
    text-align: center; /* Sicherstellen, dass dieser Satz zentriert ist */
}

/* Styling für den restlichen Text */
.about-text-content {
    text-align: left; /* Restlichen Text linksbündig für bessere Lesbarkeit */
    max-width: 650px; /* Ggf. etwas schmaler für Lesefluss */
    margin: 0 auto; /* Zentriert den linksbündigen Block */
}

.about-text-content p {
    font-size: 1.1rem; /* Etwas größere Schrift für Lesbarkeit */
    line-height: 1.8; /* Großzügiger Zeilenabstand */
    color: #000; /* Weicheres Schwarz */
    margin-bottom: 2em; /* Abstand zwischen den Absätzen */
}

.about-text-content p:last-child {
    margin-bottom: 0; /* Kein Abstand nach dem letzten Absatz */
}

/* Responsive Anpassungen für About-Seite */
@media (max-width: 768px) {
    main.about-content-wrapper {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .about-container {
        padding: 0 20px;
    }
    .about-intro-statement {
        margin-bottom: 40px;
    }
    .about-text-content p {
        font-size: 1rem;
        line-height: 1.7;
    }
}

@media (max-width: 480px) {
     main.about-content-wrapper {
        padding-top: 40px;
        padding-bottom: 60px;
    }
    .about-container {
        padding: 0 15px;
    }
     .about-text-content {
         text-align: left; /* Bleibt linksbündig */
    }
}

/* Überschreibt ggf. den weißen Hintergrund von .sub-page */
body.about-page-split {
    background-color: #000; /* Schwarzer Hintergrund für die Seite */
    color: #fff; /* Weißer Text standardmäßig */
}

/* Wrapper für das zweispaltige Layout */
main.about-split-wrapper {
    display: flex;
    flex-grow: 1;
    padding: 60px 40px; /* Innenabstand für den gesamten Wrapper */
    gap: 50px; /* Abstand zwischen Bild und Textspalte */
    max-width: 1600px; /* Maximale Breite, passend zum Header? */
    margin: 0 auto; /* Zentriert den Wrapper */
}

/* Linke Spalte (Bild) */
.about-image-column {
    flex: 0 0 45%; /* Breite der Bildspalte (anpassen nach Bedarf) */
    max-width: 45%;
    /* Die Höhe wird durch das Bild bestimmt */
}

.about-image-column img {
    display: block;
    width: 100%;
    height: auto; /* Höhe automatisch anpassen */
    /* Optional: Wenn das Bild beschnitten werden soll, um eine feste Höhe zu halten */
    /* height: 80vh; */
    /* object-fit: cover; */
}

/* Rechte Spalte (Text) */
.about-text-column {
    flex: 1; /* Nimmt den restlichen Platz ein */
}

/* Styling für jede Textsektion (BIO, MY APPROACH) */
.about-section {
    margin-bottom: 60px; /* Abstand zwischen den Sektionen */
}

.about-section-title {
    font-size: 0.9rem; /* Kleinere Schriftgröße für Titel */
    font-weight: 600; /* Etwas fetter */
    text-transform: uppercase;
    letter-spacing: 1.5px; /* Mehr Buchstabenabstand */
    color: #ccc; /* Etwas gedämpftes Weiß */
    margin-bottom: 15px; /* Abstand zum Trennstrich */
}

.about-separator {
    border: none;
    height: 1px;
    background-color: #555; /* Farbe des Trennstrichs */
    margin-top: 0; /* Direkter Anschluss an Titelabstand */
    margin-bottom: 25px; /* Abstand zum Textinhalt */
}

.about-section-content p {
    font-size: 1rem; /* Standardgröße für Lesetext */
    line-height: 1.7; /* Guter Zeilenabstand */
    color: #ddd; /* Leicht gedämpftes Weiß für bessere Lesbarkeit */
    margin-bottom: 1.5em; /* Abstand zwischen Absätzen */
}

.about-section-content p:last-child {
    margin-bottom: 0;
}

/* Footer auf schwarzer Seite anpassen */
body.about-page-split footer {
    background-color: #000; /* Schwarzer Hintergrund */
    color: #888; /* Grauer Text */
    border-top: 1px solid #333; /* Dunklere Trennlinie */
}
body.about-page-split footer p {
     color: #888; /* Sicherstellen, dass die Farbe angewendet wird */
}


/* Responsive Anpassungen für das Split-Layout */
@media (max-width: 992px) {
    main.about-split-wrapper {
        flex-direction: column; /* Spalten untereinander stapeln */
        padding: 40px 30px;
        gap: 40px;
    }
    .about-image-column,
    .about-text-column {
        flex-basis: auto; /* Breite zurücksetzen */
        max-width: 100%;
    }
     .about-text-column {
        padding-top: 0; /* Kein oberer Abstand mehr nötig */
    }
}

@media (max-width: 576px) {
     main.about-split-wrapper {
        padding: 30px 20px;
    }
    .about-section-title {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }
    .about-section-content p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
     .about-separator {
         margin-bottom: 20px;
     }
}

/* Initial state for elements to be animated */
.animate-on-scroll {
    opacity: 0; /* Start invisible */
    transform: translateY(30px); /* Start slightly lower */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition */
    will-change: opacity, transform; /* Hint to the browser */
}

/* Optional: Add a slight delay between multiple animated elements */
/* Example: Every second element */
/* .animate-on-scroll:nth-child(even) {
    transition-delay: 0.1s;
} */


/* Visible state */
.animate-on-scroll.is-visible {
    opacity: 1; /* Become fully visible */
    transform: translateY(0); /* Move to final position */
}

body.contact-page {
    /* Hintergrund ist bereits weiß von .sub-page */
}

main.contact-wrapper {
    padding: 80px 0 100px 0; /* Oberer/unterer Abstand */
    flex-grow: 1;
}

.contact-container {
    max-width: 700px; /* Breite für Kontaktformular-Bereich */
    margin: 0 auto; /* Zentrieren */
    padding: 0 30px; /* Seitenabstand */
}

.contact-container h1 {
    text-align: center;
    font-size: clamp(2rem, 6vw, 3rem); /* Responsive Größe */
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.contact-intro {
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 550px; /* Intro-Text etwas schmaler */
    margin: 0 auto 50px auto; /* Zentrieren und Abstand nach unten */
}

/* Formular Styling */
#contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Abstand zwischen Formulargruppen */
}

.form-group {
    /* Keine speziellen Styles hier nötig, dient als Wrapper */
}

.form-group label {
    display: block; /* Label über dem Input */
    margin-bottom: 8px; /* Abstand zum Input */
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc; /* Dezenter Rand */
    border-radius: 4px; /* Leicht abgerundet */
    font-size: 1rem;
    font-family: inherit; /* Schriftart vom Body übernehmen */
    background-color: #000;
	color:#fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea {
    resize: vertical; /* Erlaubt nur vertikales Vergrößern */
    min-height: 120px;
}

/* Fokus-Styling für bessere UX */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none; /* Standard-Outline entfernen */
    border-color: #555; /* Randfarbe ändern */
    box-shadow: 0 0 0 2px rgba(85, 85, 85, 0.1); /* Leichter Glow */
    background-color: #222;
}

.form-group.form-submit {
    margin-top: 10px; /* Etwas mehr Abstand vor dem Button */
}

.form-group button[type="submit"] {
    display: inline-block; /* Button nicht volle Breite */
    padding: 12px 30px;
    border: none;
    border-radius: 4px;
    background-color: #222; /* Dunkler Button */
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.form-group button[type="submit"]:hover {
    background-color: #444; /* Etwas heller bei Hover */
}

/* Alternative Kontaktinfo */
.alternative-contact {
    margin-top: 60px; /* Abstand nach dem Formular */
    text-align: center;
    font-size: 0.95rem;
    color: #666;
}

.alternative-contact p {
    margin-bottom: 5px;
}

.alternative-contact a {
    color: #1a0dab; /* Standard-Linkfarbe oder anpassen */
    text-decoration: none;
    font-weight: 500;
}

.alternative-contact a:hover {
    text-decoration: underline;
}

/* Responsive Anpassungen für Kontaktseite */
@media (max-width: 768px) {
    main.contact-wrapper {
        padding: 60px 0 80px 0;
    }
    .contact-container {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    main.contact-wrapper {
        padding: 40px 0 60px 0;
    }
    .contact-container {
        padding: 0 15px;
    }
    .contact-intro {
        font-size: 1rem;
        margin-bottom: 40px;
    }
    #contact-form {
        gap: 20px;
    }
     .form-group button[type="submit"] {
        width: 100%; /* Button auf kleinen Screens volle Breite */
        padding: 15px;
    }
    .alternative-contact {
        margin-top: 40px;
    }
}

/* --- Placeholder Styling --- */
.video-placeholder-container {
    position: relative; /* Needed for absolute positioning of the play button */
    cursor: pointer;
    overflow: hidden;     /* Keeps play button corners rounded if button is circular */
    background-color: #eee; /* Fallback background */
    max-width: 100%; /* Ensure it doesn't overflow its container */
}

.video-placeholder-container img {
    display: block; /* Remove extra space below image */
    width: 100%;
    object-fit: cover; /* Cover the area, might crop */
    transition: transform 0.3s ease; /* Optional: subtle zoom on hover */
}

.video-placeholder-container:hover img {
     /* transform: scale(1.03); */ /* Optional hover effect */
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; /* Adjust size */
    height: 70px; /* Adjust size */
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%; /* Make it circular */
    font-size: 30px; /* Adjust icon size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    padding-left: 5px; /* Nudge triangle icon visually center */
    box-sizing: border-box;
}

.play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


#video-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;    /* Keep this */
    bottom: 0;   /* Keep this */
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

body.video-overlay-active {
    overflow: hidden !important; /* Prevents scrolling when the video overlay is active */
}

/* When active */
body.video-overlay-active #video-overlay {
    display: flex; /* Or block, depending on your layout needs */
}

#vimeo-player-wrapper,
#youtube-player-div {
    width: 100%;
    height: 100%;
    position: relative; /* Needed for absolute positioning of controls, etc. */
    /* margin: auto;  <-- REMOVED if you added it */
    display: block; /* Ensure it behaves as a block element within flex context */
}

/* And the iframe inside it */
#vimeo-player-wrapper iframe,
#youtube-player-div iframe {
    width: 100%;
    height: 100%;
}

/* Klasse, die via JS hinzugefügt wird, wenn Klaro-Modal offen ist */
body.klaro-modal-is-active {
    overflow: hidden !important; /* Verhindert natives Scrollen */
}

.video-overlay-content {
    position: fixed;
    background-color: #000;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
	margin: auto;
	overflow: hidden !important; /* Verhindert natives Scrollen */
}

.close-button {
    position: absolute;
    /* Adjust these values to position inside the top-right corner */
    top: 10%;      /* e.g., 15px down from the top edge */
    right: 4%;     /* e.g., 15px in from the right edge */

    /* Optional: Add a background for better visibility */
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%; /* Optional: make it circular */
    width: 30px;       /* Optional: explicit size */
    height: 30px;      /* Optional: explicit size */
    line-height: 30px; /* Optional: helps center the 'X' vertically */
    text-align: center;/* Optional: helps center the 'X' horizontally */
    padding: 0;        /* Reset padding if using explicit size */

    /* Keep other styles */
    border: none;
    color: #fff;
    font-size: 20px;   /* May need slight adjustment */
    font-weight: bold;
    cursor: pointer;
    z-index: 10; /* Ensure it's above the iframe */
    transition: background-color 0.2s ease; /* Optional: hover effect */
}

/* Optional: Hover style adjustment */
.close-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: #eee;
}

/* Basis-Styling für den Container dieser Seite (optional, kann auch in style.css) */
main.impressum-datenschutz-wrapper {
	padding: 60px 0 80px 0; /* Abstand oben/unten */
	flex-grow: 1; /* Stellt sicher, dass der Footer unten bleibt */
}

.content-container {
	max-width: 800px; /* Angenehme Lesebreite */
	margin: 0 auto;   /* Zentrieren */
	padding: 0 30px;   /* Seitenabstand */
}

.content-container h1 {
	text-align: center;
	margin-bottom: 40px;
	font-size: clamp(2rem, 5vw, 2.8rem); /* Responsive Größe */
}

.content-container h2 {
	margin-top: 40px;
	margin-bottom: 20px;
	border-bottom: 1px solid #eee; /* Leichte Trennlinie */
	padding-bottom: 10px;
	font-size: 1.8rem;
}

 .content-container h3 {
	margin-top: 30px;
	margin-bottom: 15px;
	font-size: 1.3rem;
	font-weight: 600;
 }

.content-container p,
.content-container ul {
	margin-bottom: 1.2em;
	line-height: 1.7; /* Gute Lesbarkeit */
}

 .content-container ul {
	 list-style: disc;
	 margin-left: 25px; /* Einrückung für Listen */
 }

 .content-container li {
	 margin-bottom: 0.5em;
 }


.important-notice {
	 margin-top: 50px;
	 padding: 20px;
	 background-color: #fff3cd; /* Heller Warnhinweis-Hintergrund */
	 border: 1px solid #ffeeba;
	 border-radius: 4px;
	 line-height: 1.6;
}

/* hide from sighted users but keep for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* 2. Style the main container that holds the video */
.coming-soon-container {
    flex-grow: 1; /* This makes the main element fill all available space */
    position: relative;
    overflow: hidden; /* Hides any part of the video that might overflow */
    background-color: #000; /* Black background as a fallback */
}

/* 3. Style the video element itself */
.coming-soon-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
    /* 
      This is the most important part:
      It makes the video cover the entire container without stretching it.
      It will crop the video if the aspect ratio doesn't match, just like 'background-size: cover'.
    */
    object-fit: scale-down;
}

.container-side {
	display: inline-block;
    width: calc(100%/3 - 18px);
}

.hytPlayerWrap {
	display: block; /* Changed from inline-block */
	position: relative;
	width: 100%;
	/* height: 100%; <-- REMOVED */
}

.hytPlayerWrap.ended::after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: pointer;
	background-color: black;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: 64px 64px;
	background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);}

.hytPlayerWrap.paused::after {
	content:"";
	position: absolute;
	top: 70px;
	left: 0;
	bottom: 50px;
	right: 0;
	cursor: pointer;
	background-color: black;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: 40px 40px;
	background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
	transition: background-color 0.3s ease; /* Smooth transition */
}

.hytPlayerWrap.paused:hover::after {
    background-color: rgba(0, 0, 0, 0.5); /* Show overlay on hover */
}

.dropdown {
    position: relative;
    display: inline-block; /* Allows the dropdown to sit alongside other nav items */
}

/* The main "Work" button */
.dropbtn {
    /* Inherits styling from 'nav a', but you can add specific styles here if needed */
    cursor: pointer;
}

/* A small arrow next to the "Work" text */
.arrow {
    font-size: 0.7em;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

/* Rotate arrow when dropdown is open */
.dropdown.open .arrow {
    transform: rotate(180deg);
}

/* The dropdown menu itself (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000000; /* Solid black background */
    min-width: 180px; /* Adjust width as needed */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 1001; /* Ensure it's above the header's z-index */
    border: 1px solid #222; /* Subtle border */
    border-top: none; /* Remove top border as it connects to the nav bar */
    border-radius: 0 0 4px 4px; /* Optional: rounded bottom corners */
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #ccc;
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Makes the entire area clickable */
    text-align: left;
    margin-left: 0; /* Override the default margin from 'nav a' */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #222;
    color: #ffffff;
}

/* This class will be added by JavaScript to show the dropdown */
.dropdown-content.show {
    display: block;
}

.music-player-container {
    display: flex;
    justify-content: center; /* Zentriert die Player, falls sie nicht die volle Breite einnehmen */
    gap: 30px; /* Der Abstand zwischen den beiden Playern */
    padding: 40px 0; /* Etwas Abstand oben und unten */
    margin: 0 auto; /* Zentriert den gesamten Container auf der Seite */
}

/*
 * 2. Der Wrapper für jeden einzelnen Player
 * Dies ist das "Flex-Item". Die Regel 'flex: 1' ist der Schlüssel,
 * damit beide Player immer den gleichen Platz einnehmen.
*/
.player-wrapper {
    flex: 1; /* WICHTIG: Sorgt dafür, dass beide Wrapper gleich breit sind */
    min-width: 0; /* Ein wichtiger Flexbox-Fix, um Schrumpfen auf kleinen Bildschirmen zu erlauben */
    
    /* Styling für einen schönen Look */
    border-radius: 12px; /* Abgerundete Ecken für den Container */
    overflow: hidden;    /* Stellt sicher, dass der iframe die abgerundeten Ecken nicht überlappt */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Optional: Ein schöner Schatten */
}

/*
 * 3. Das Styling für die iframes selbst
 * Hier stellen wir sicher, dass sie ihre Wrapper komplett ausfüllen
 * und die gleiche Höhe haben.
*/
.player-wrapper iframe {
    display: block; /* Entfernt möglichen Leerraum unter dem iframe */
    width: 100%;    /* Füllt den Wrapper horizontal komplett aus */
    height: 152px;  /* Feste Höhe für BEIDE Player, damit sie identisch sind */
    border: none;   /* Entfernt jeglichen Rand */
}

/*
 * 4. Responsive Anpassung für mobile Geräte
 * Unter 768px Bildschirmbreite stapeln wir die Player
 * untereinander statt nebeneinander.
*/
@media (max-width: 768px) {
    .music-player-container {
        flex-direction: column; /* Ändert die Anordnung von horizontal zu vertikal */
        align-items: center;    /* Zentriert die gestapelten Player */
        gap: 25px;              /* Der vertikale Abstand zwischen den Playern */
    }

    .player-wrapper {
        width: 100%; /* Jeder Player nimmt die volle Breite ein */
        max-width: 400px; /* Verhindert, dass sie auf Tablets zu breit werden */
    }
}

.margin-item:not(:last-child) {
  margin-right: 18px;
}

/* ======================================================= */
/* === Styling für den Klaro! Zustimmungs-Platzhalter === */
/* ======================================================= */

.music-player-container .player-wrapper .cm-as-context-notice .context-notice {
    /* Layout: Wir verwenden Flexbox, um den Inhalt perfekt zu zentrieren */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Dimensionen */
    width: 100%;
    height: 152px;
    box-sizing: border-box;
    padding: 20px;

    /* 
      HIER IST DIE WICHTIGE ÄNDERUNG:
      Wir setzen den Hintergrund und die Farbe.
    */
    color: #ffffff;           /* Weiße Schrift */
    
    text-align: center;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}

/* Wir müssen auch die Selektoren für die inneren Elemente anpassen */
.music-player-container .player-wrapper .cm-as-context-notice p {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 90%;
}

.music-player-container .player-wrapper .cm-as-context-notice .cm-btn {
    background-color: #1DB954;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.music-player-container .player-wrapper .cm-as-context-notice .cm-btn:hover {
    background-color: #1ed760;
    transform: scale(1.05);
}