/* ==========================================================================
   Schriftarten (Montserrat, alle Schnitte)
   Zuvor auf jeder einzelnen HTML-Seite dupliziert - jetzt zentral hier.
   ========================================================================== */
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: url('montserrat-v30-latin-100.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: url('montserrat-v30-latin-200.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('montserrat-v30-latin-300.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('montserrat-v30-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('montserrat-v30-latin-500.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('montserrat-v30-latin-600.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('montserrat-v30-latin-700.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('montserrat-v30-latin-800.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('montserrat-v30-latin-900.woff2') format('woff2');
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #050b11; /* Dunkler Fallback */
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
    width: 100%;
}

/* Hintergrund-Bild mit Abdunklung (Vignette/Overlay) */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
    z-index: -1;
}

.willkommensvideostart{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.willkommensvideovideo{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.willkommensvideofotografie{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.willkommensvideo3d{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.willkommensvideodrums{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.willkommensvideokontakt{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

.willkommensvideoimpressum{
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 50px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    background-color: rgba(255,255,255,0.03); /* wird beim Scrollen per JS dynamisch überschrieben */
    transition: background-color 0.15s ease-out;

}

.logo {
    font-size: calc(1.3vh * var(--navbar-font-scale, 1));
    font-weight: normal;
    letter-spacing: 2px;
    padding-left: 20%;
    transition: font-size 0.15s ease-out;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  position: relative;
  /* Dreh-Mittelpunkt liegt exakt auf dem Zentrum des blauen Rings im Logo
     (nicht auf der Bildmitte), damit der Ring beim Drehen optisch stehen
     bleibt und sich nur das K darum dreht. */
  transform-origin: 20.05% 49.93%;
  transition: transform 0.35s ease;
}

/* Feiner blauer Partikel-Schein, der beim Drehen des Logos (also während
   des Scrollens) ganz leicht aus dem Logo streut und kurz danach wieder
   verschwindet (siehe script.js). Rein dekorativ, deshalb aria-hidden und
   pointer-events:none, damit der Link-Klick aufs Logo unangetastet bleibt. */
#logo-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}

#logo{
  /* Die aktuelle Marke ist noch etwas schmaler/hoeher als die vorherige
     Version (Seitenverhaeltnis ca. 0.51 statt 0.62), deshalb ist die Breite
     hier nochmal etwas kleiner gesetzt, damit die sichtbare Hoehe im Header
     gleich bleibt. */
  width: 1.77vw;
  height: auto;
  cursor: pointer;
  display: block;
  /* Gleicher Dreh-Mittelpunkt wie bei .logo-link (Zentrum des blauen Rings),
     damit die scroll-gekoppelte Rotation unten und der Hover-Dreheffekt
     oben exakt um denselben Punkt drehen. */
  transform-origin: 20.05% 49.93%;
  /* Kein eigenes transition hier: die Rotation dieses Elements wird laufend
     per JS an den Scroll-Fortschritt gekoppelt (siehe script.js) und muss
     ihm 1:1 folgen. Der Hover-Dreheffekt sitzt deshalb eine Ebene höher,
     auf .logo-link, damit sich beide Effekte nicht gegenseitig stören. */
}

.logo-link:hover {
  transform: rotate(-8deg);
}


.nav-links{
  padding-right: 20%;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: calc(clamp(9.6px, 9.6px + (100vw - 1920px) * 0.00125, 12px) * var(--navbar-font-scale, 1));
    font-weight: 700;
    margin-left: 1.3vw;
    letter-spacing: 1.2px;
    transition: color 0.3s, font-size 0.15s ease-out;
}

.nav-links a:hover,
.nav-links a.active {
    color: #c4ff00; /* Das typische Neon-Grün/Gelb */
}

/* Hero Content Zentrierung */
.hero-section {
    display: flex;
    align-items: center;
    height: 100vh;
    padding-top: 20%;
    padding-left: 20%; /* Leicht nach links versetzt wie im Screenshot */
    position: relative;
    width: 100%;
}

.subtitle {
    color: #c4ff00;
     font-size: clamp(9.6px, 9.6px + (100vw - 1920px) * 0.00125, 12px);
    font-weight: lighter;
    letter-spacing: 3px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px;
}

/* Kleiner Strich vor dem Subtitle */
.subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 2px;
    background-color: #c4ff00;
}

/* Haupt-Typografie */
.main-title {
    font-size: clamp(76.8px, 76.8px + (100vw - 1920px) * 0.01, 96px);
    font-weight: bold;
    line-height: 0.95;
    letter-spacing: -1px;
    margin-bottom: 30px;
}

.main-title span {
    display: block;
}

.first-name {
    color: #ffffff;
}

.last-name {
    color: #c4ff00;
}

/* Kleine Tags über den Buttons */
.tags {
    margin-bottom: 25px;
    display: flex;
    gap: 20px;
}

.tags span {
    font-size: clamp(9.6px, 9.6px + (100vw - 1920px) * 0.00125, 12px);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    font-weight: 700;
}

/* Buttons */
.cta-buttons {
    display: flex;
    gap: 1vw;
}

.btn {
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 14px 28px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #c4ff00;
    color: #000000;
}

.btn-primary:hover {
    background-color: #ffffff;
}

.btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.btn-secondary:hover {
    border-color: #c4ff00;
    color: #c4ff00;
}

.service-card-link{
  text-decoration: none;
}

/* Footer Elemente */
.hero-footer {
    position: fixed;
    bottom: 50px;
    width: 25%;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8vh;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
}

.slider-dots {
    display: flex;
    gap: 8px;
}

.dot {
    width: 6px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

.dot.active {
    background-color: #c4ff00;
}

:root {
    --neon-green: #c4ff00;
    --bg-dark: #090909; /* Sehr dunkles Grau/Schwarz für den Fließtextbereich */
    --card-bg: #121212;
}

.section-badge {
    color: var(--neon-green);
    font-size: clamp(13.44px, 13.44px + (100vw - 1920px) * 0.00175, 16.8px);
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 20px;
}

/* Nur für Screenreader/Suchmaschinen sichtbar, im Layout unsichtbar –
   für zusätzliche, thematisch passende Zwischenüberschriften ohne optische Änderung */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Über Mich Sektion */
.about-section {
    background-color: var(--bg-dark);
    padding: 100px 20%;

}

.about-container {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-left, .about-right {
    flex: 1;
    margin-top: 6vh;
    margin-bottom: 6vh;
}

.about-left h2 {
    font-size: clamp(32.64px, 32.64px + (100vw - 1920px) * 0.00425, 40.8px);
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}

/* Kleines Marken-Lockup "KORBI / WORKS / work" im Über-Mich-Bereich der Startseite */
.brand-mark {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    line-height: 0.95;
}

.brand-mark-line {
    font-size: clamp(46.08px, 46.08px + (100vw - 1920px) * 0.006, 57.6px);
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff;
}

/* "WORK" ohne S, durchscheinend grau statt Flächenfarbe – dezenter dritter
   Akzent im Lockup, in Großbuchstaben wie die Zeilen darüber. */
.brand-mark-echo {
    margin-top: 0;
    font-size: clamp(46.08px, 46.08px + (100vw - 1920px) * 0.006, 57.6px);
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: rgba(180, 180, 180, 0.4);
}

.brand-mark-sub {
    margin-top: 30px;
    font-size: clamp(13.44px, 13.44px + (100vw - 1920px) * 0.00175, 16.8px);
    font-style: italic;
    color: rgba(255, 255, 255, 0.5);
}

.about-right p {
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(11.52px, 11.52px + (100vw - 1920px) * 0.0036, 18.43px);
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-right p strong {
    color: #ffffff;
}

.about-right p a {
    color: var(--neon-green, #c4ff00);
    text-decoration: none;
    transition: color 0.3s;
}

.about-right p a:hover {
    color: #ffffff;
}

.about-right p .neon-text {
    color: var(--neon-green, #c4ff00);
}

/* Leistungen Sektion */
.services-section {
    background-color: var(--bg-dark);
    padding: 60px 10% 100px 10%;
}

.services-container {

    margin: 0 auto;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px; /* Dünner Abstand zwischen den Spalten wie im Design */
    background-color: rgba(255, 255, 255, 0.05); /* Erzeugt feine Trennlinie */
}

.service-card {
    background-color: var(--card-bg);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%);
}

.card-content {
    padding: 4vh;
}

.card-header {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.3);
    font-size: 2vh;
    font-weight: 700;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 2vh;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
    transition: color 0.3s;
}

/* Zustand für aktive/gehoverte Karte (Fotografie im Screenshot) */
.service-card:hover h3,
.service-card .highlight-title {
    color: var(--neon-green);
}

.service-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(11.52px, 11.52px + (100vw - 1920px) * 0.0036, 18.43px);
    line-height: 1.5;
}

/* CTA Sektion (Bereit für dein nächstes...) */
.cta-section {
    background-color: var(--bg-dark);
    padding: 120px 10%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
}

.cta-container {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.cta-container h2 {
    font-size: 3vh;
    font-weight: 700;
    line-height: 1.2;
}

.highlight-text {
    color: var(--neon-green);
}

/* Footer unten */
.main-footer {
    background-color: var(--bg-dark);
    padding: 40px 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8vh;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-logo {
    font-weight: 700;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    margin-right: 2vh;
    font-weight: 700;
    transition: color 0.3s;

    /* --- HIER SIND DIE NEUEN ZEILEN --- */
    display: inline-block;  /* Erlaubt echtes Padding */
    padding: 10px 5px;      /* 10px Puffer nach oben und unten, 5px zu den Seiten */
}

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

/* Responsive Anpassung für kleinere Screens */
@media (max-width: 900px) {
    .about-container, .cards-grid, .cta-container, .main-footer {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 40px;

    }
    .cta-container {
        align-items: flex-start;
    }
    .main-footer {
        text-align: center;
        gap: 20px;
    }
}

/*VIDEOPAGE*/
.subpage-body {
    background-color: #090909; /* Deep Black wie im Screenshot */
    overflow-y: auto; /* Normales Scrollen erlauben */
}

/* Haupt-Container der Portfolio-Seite */
.portfolio-page {
    padding: 25% 10% 0px 0%; /* Oberer Abstand lässt Platz für die Navbar */
    max-width: 80%;
    margin-left: 0px;
}

/* Header-Bereich (Titel & Badge) */
.portfolio-header {
    margin-bottom: 60px;
    background-color: rgba(255, 255, 255, 0.03);
    padding: 4vh;
    padding-left: 30%;
    padding-bottom: 5vh;
    margin-right: 20%;

}

h1{
  margin-bottom: 1vh;
}

.page-title {
  font-size: clamp(76.8px, 76.8px + (100vw - 1920px) * 0.01, 96px);
  font-weight: bold;
  line-height: 0.95;
  letter-spacing: -1px;
  margin-bottom: 2vw;
}

/* Das 3-spaltige Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 24px; /* 40px Abstand nach unten, 24px zwischen den Spalten */
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Bilder-Container */
.item-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Erzwingt das klassische Video-Format */
    overflow: hidden;
    background-color: #151515;
    margin-bottom: 15px;
}

.item-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.95);
}

/* Hover-Effekt für die Bilder */
.portfolio-item:hover .item-image video {
    transform: scale(1.03);
    filter: brightness(1);
}

/* Zeile für Kategorie und Jahr */
.item-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: clamp(9.6px, 9.6px + (100vw - 1920px) * 0.00125, 12px);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/*fotografie-galerie*/

/* --- CONTAINER --- */
.gallery-wrapper {
    width: 100%;
    padding: 40px 7%;
    background-color: #0d0d0d;
    box-sizing: border-box;
}

/* --- AUTOMATISCHES SPALTEN-LAYOUT (Masonry) --- */
.modern-photo-grid {
    /* Setzt eine feste Anzahl von Spalten fest (z.B. 3 oder 4) */
    column-count: 3;

    /* Das ist das Sicherheitsnetz: Wenn der Bildschirm kleiner wird (z.B. Tablet),
       schaltet er automatisch auf weniger Spalten um, damit nichts gequetscht wird */
    column-width: 450px;

    column-gap: 0px;
    width: 100%;
    font-size: 0;
    line-height: 0;
}

/* --- DIE EINZELNEN KACHELN --- */
.gallery-tile {
    display: inline-block; /* Wichtig für das Spaltenlayout */
    width: 100%;
    margin-bottom: 0px; /* Abstand nach unten zum nächsten Bild in der Spalte */
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.gallery-tile-drums {
    display: block; /* Wichtig für das Spaltenlayout */

}

/* --- INHALT & DER STARKE HOVER --- */
.tile-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
    background-color: #121212;

    will-change: transform;
    transform: scale(1);
    /* Seidenglatte, intensive Animation */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.2, 1), box-shadow 0.5s ease;
}

.tile-inner img {
    width: 100%;
    height: auto; /* <--- DAS MAGISCHE ELEMENT: Das Bild bestimmt seine Höhe selbst! */
    display: block;
    filter: brightness(0.95);
    transition: filter 0.5s ease;
}


/* --- HOVER-EFFEKT (Spürbare 12% Vergrößerung) --- */
.gallery-tile:hover {
    z-index: 10; /* Schiebt das Bild beim Zoomen über die Nachbarn */
}

.gallery-tile:hover .tile-inner {
    transform: scale(1.12); /* Deutlicher Zoom nach außen */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
}

.gallery-tile:hover img {
    filter: brightness(1);
}

/* --- TEXT OVERLAY --- */
/* --- TEXT OVERLAY FIX --- */
.tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease;

    /* RE-SET: Überschreibt die 0er-Werte des Grids für den Textbereich */
    font-size: 1rem;
    line-height: normal;
}

.gallery-tile:hover .tile-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Sicherstellen, dass auch die inneren Elemente saubere Werte haben */
.card-tag {
    font-size: 0.65rem !important; /* Erzwingt die kleine, feine Schrift */
    line-height: 1.2 !important;
    color: #ccff00;
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 5px;
}

.tile-overlay h3 {
    font-size: 1.2rem !important;  /* Erzwingt die korrekte Titelgröße */
    line-height: 1.3 !important;
    color: #ffffff;
    margin: 0;
    font-weight: 700;
}

.item-category {
    color: var(--neon-green);
}

.item-year {
    color: rgba(255, 255, 255, 0.3);
    padding-left: 1em;
}

/* Titel des Videos */
.item-title {
    font-size: clamp(11.52px, 11.52px + (100vw - 1920px) * 0.0015, 14.4px);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    transition: color 0.3s;
}

.portfolio-item:hover .item-title {
    color: var(--neon-green);
}

/* BESONDERES ELEMENT (Reel mit dauerhaft grünem Text & Playbutton) */
.portfolio-item .item-category.highlight,
.portfolio-item .item-title.highlight {
    color: var(--neon-green);
}

/* Grüner runder Play-Button im Bild */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    background-color: var(--neon-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.play-button svg {
    margin-left: 3px; /* Optische Zentrierung des Dreiecks */
}

.portfolio-item:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Mobile Optimierung */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
    }
    .page-title {
        font-size: 4rem;
    }
}

@media (max-width: 650px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* 1 Spalte auf Smartphones */
    }
    .portfolio-page {
        padding: 120px 5% 40px 5%;
    }
}

/* --- Bestehende Styles --- */
.video-hero {
    position: relative;
    width: 100%;
    height: 75vh; /* Nimmt 75% der Bildschirmhöhe ein. Für Vollbild auf 100vh ändern */
    overflow: hidden;
    display: flex;
    align-items: center;
    padding-left: 5%;
}

.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5); /* Dunkelt das Hintergrundvideo etwas ab, damit der Text lesbar ist */
}

.hero-video-overlay {
    z-index: 2;
}

/* --- 2. MODERNES GRID (Unter dem Hero) --- */
.portfolio-section-dark {
    background-color: #0d0d0d; /* Edles, sehr dunkles Grau */
    padding: 80px 2%; /* Nur 2% minimaler Rand links und rechts */
    width: 100%;
    box-sizing: border-box;
}

.portfolio-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Immer exakt 3 Spalten nebeneinander */
    gap: 50px 0px; /* 50px Abstand nach unten, 24px Spaltenabstand */
    width: 100%;
    padding-bottom: 10%;
}

/* Kacheln strecken sich über die volle Grid-Breite */
.portfolio-item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Das restliche CSS für .item-image, .volume-toggle und .item-title bleibt identisch wie zuvor! */

/* --- RESPONSIVE ANPASSUNGEN --- */
@media (max-width: 1100px) {
    .portfolio-grid-modern {
        grid-template-columns: repeat(2, 1fr); /* Auf Tablets 2 Spalten für bessere Lesbarkeit */
        padding: 60px 0%;
    }
}

@media (max-width: 700px) {
    .portfolio-grid-modern {
        grid-template-columns: 1fr; /* Auf Smartphones 1 Spalte */
        gap: 40px;
    }
    .video-hero {
        height: 50vh; /* Kleinerer Header auf Handys */
    }
}

.volume-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.7); /* Dunkler Kreis im Hintergrund */
    border-radius: 50%;
    border: 2px solid var(--neon-green); /* Gelb/Grüner Rand */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Zeigt den Button beim Hovern über die Kachel */
.portfolio-item:hover .volume-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* --- ICONS INERHALB DES BUTTONS --- */
.volume-toggle svg {
    width: 20px;
    height: 20px;
    fill: #ffffff; /* <--- HIER FARBE ÄNDERN: #ffffff für Weiß, var(--neon-green) für Gelb */
    transition: fill 0.3s ease;
}

/* Wenn du mit der Maus direkt auf den Kreis gehst, wird das Icon schwarz und der Kreis gelb */
.volume-toggle:hover {
    transform: scale(1.1);
    background-color: var(--neon-green);
}
.volume-toggle:hover svg {
    fill: #000000;
}

/* --- ÜBERLAPPEN VERHINDERN (Mute/Unmute Logik) --- */
/* Standardmäßig wird das Unmute-Icon (mit Wellen) ausgeblendet, solange es stumm ist */
.volume-toggle .icon-unmute {
    display: none !important;
}
.volume-toggle .icon-mute {
    display: block !important;
}

/* Wenn per JS die Klasse 'sound-on' aktiv ist, drehen wir es um */
.volume-toggle.sound-on .icon-mute {
    display: none !important;
}
.volume-toggle.sound-on .icon-unmute {
    display: block !important;
}



/* ========================================
   MOBILE MENU
   ======================================== */

#menu-toggle {
    display: none;
}

.menu-button {
    display: none;
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 900px) {

    .navbar {
        position: relative;
    }

    #logo{
      width: 5.0vw;
      height: auto;
    }

    .logo{
      font-size: calc(1vh * var(--navbar-font-scale, 1));
      padding-left: 0px;
      letter-spacing: 1.5px;
    }

    /* Hamburger anzeigen */
    .menu-button {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        width: 30px;
        height: 22px;

        cursor: pointer;
        z-index: 1001;
    }

    .menu-button span {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;

        transition: 0.3s ease;
    }

    /* Navigation zunächst verstecken */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding-right: 0;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        background: inherit;

        max-height: 0;
        overflow: hidden;

        transition: max-height 0.3s ease;
    }

    /* Menü öffnen */
    #menu-toggle:checked ~ .nav-links {
        max-height: 500px;
    }


    /* Links untereinander */
    .nav-links a {
        display: block;
        font-size: calc(1.7vh * var(--navbar-font-scale, 1));

        padding: 1.5vh;
    }


    /* Hamburger wird zu X */
    #menu-toggle:checked + .menu-button span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    #menu-toggle:checked + .menu-button span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked + .menu-button span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }


    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6% 10%;
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 10;
        background-color: rgba(255,255,255,0.03);

    }

    .willkommensvideostart {
    width: 100%;
    height: 100vh; /* Oder z. B. height: 60vh; */
    object-fit: cover;

    /* SCHLÜSSELEIGENSCHAFT FÜR DEN BILAUSSCHNITT: */
    object-position: 50% 50%; /* Richtet das Bild am oberen Rand aus */
  }

  .willkommensvideovideo {
  width: 100%;
  height: 100vh; /* Oder z. B. height: 60vh; */
  object-fit: cover;

  /* SCHLÜSSELEIGENSCHAFT FÜR DEN BILAUSSCHNITT: */
  object-position: 70% 50%; /* Richtet das Bild am oberen Rand aus */
}

.willkommensvideofotografie {
width: 100%;
height: 100vh; /* Oder z. B. height: 60vh; */
object-fit: cover;

/* SCHLÜSSELEIGENSCHAFT FÜR DEN BILAUSSCHNITT: */
object-position: 30% 50%; /* Richtet das Bild am oberen Rand aus */
}

.willkommensvideo3d{
width: 100%;
height: 100vh; /* Oder z. B. height: 60vh; */
object-fit: cover;

/* SCHLÜSSELEIGENSCHAFT FÜR DEN BILAUSSCHNITT: */
object-position: 60% 50%; /* Richtet das Bild am oberen Rand aus */
}

.willkommensvideodrums{
width: 100%;
height: 100vh; /* Oder z. B. height: 60vh; */
object-fit: cover;

/* SCHLÜSSELEIGENSCHAFT FÜR DEN BILAUSSCHNITT: */
object-position: 60% 50%; /* Richtet das Bild am oberen Rand aus */
}

.willkommensvideokontakt{
width: 100%;
height: 100vh; /* Oder z. B. height: 60vh; */
object-fit: cover;

/* SCHLÜSSELEIGENSCHAFT FÜR DEN BILAUSSCHNITT: */
object-position: 75% 50%; /* Richtet das Bild am oberen Rand aus */
}



    .hero-section {
        display: flex;
        align-items: center;
        height: 100vh;
        padding-top: 60%;
        padding-left: 10%; /* Leicht nach links versetzt wie im Screenshot */
        padding-right: 10%;
        position: relative;
        width: 100%;
    }

    .subtitle {
        color: #c4ff00;
         font-size: 5vw;

        font-weight: lighter;
        letter-spacing: 3px;
        margin-bottom: 15px;
        position: relative;
        padding-left: 15px;
        left: -4%;
    }

    /* Kleiner Strich vor dem Subtitle */
    .subtitle::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 1px;
        background-color: #c4ff00;
    }

    /* Haupt-Typografie */
    .main-title {
        font-size: 10vw;
        font-weight: bold;
        line-height: 0.95;
        letter-spacing: -1px;
        margin-bottom: 30px;
    }

    .main-title span {
        display: block;
    }

    .first-name {
        color: #ffffff;
    }

    .last-name {
        color: #c4ff00;
    }

    /* Kleine Tags über den Buttons */
    .tags {
        margin-bottom: 25px;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .tags span {
        font-size: 3vw;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 2px;
        font-weight: 700;
    }

    /* Buttons */
    .cta-buttons {
        display: flex;
        gap: 3vw;
    }

    .btn {
        text-decoration: none;
        font-size: 3vw;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 14px 28px;
        transition: all 0.3s ease;
    }

    .btn-primary {
        background-color: #c4ff00;
        color: #000000;
    }

    .btn-primary:hover {
        background-color: #ffffff;
    }

    .btn-secondary {
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: baseline;
        flex-direction: column;

    }

    .btn-secondary:hover {
        border-color: #c4ff00;
        color: #c4ff00;
    }

    .service-card-link{
      text-decoration: none;
    }

    /* Footer Elemente */




    .dot {
        width: 6px;
        height: 6px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
    }

    .dot.active {
        background-color: #c4ff00;
    }

    .about-section {
        background-color: var(--bg-dark);
        padding: 0px 10%;

    }

    .about-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        margin: 0 auto;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    }

    .about-left, .about-right {
        flex: 1;
        margin-top: 6vh;
        margin-bottom: 2vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .section-badge{
      font-size: 2vh;
    }

    .about-left h2 {
        font-size: 8vw;
        font-weight: 700;
        line-height: 1.2;
        color: #ffffff;
        text-align: center;
    }

    .brand-mark {
        align-items: center;
        margin-top: 30px;
    }

    .brand-mark-line {
        font-size: 9vw;
    }

    .brand-mark-echo {
        font-size: 9vw;
    }

    .brand-mark-sub {
        text-align: center;
    }

    .about-right p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 3.5vw;
        line-height: 1.6;
        margin-bottom: 20px;
        text-align: left;
    }

    .about-right p strong {
        color: #ffffff;
    }

    .card-content {
        padding: 4vh;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        color: rgba(255, 255, 255, 0.3);
        font-size: 2vh;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .service-card h3 {
        font-size: 2vh;
        font-weight: 700;
        margin-bottom: 15px;
        color: #ffffff;
        transition: color 0.3s;
    }

    /* Zustand für aktive/gehoverte Karte (Fotografie im Screenshot) */
    .service-card:hover h3,
    .service-card .highlight-title {
        color: var(--neon-green);
    }

    .service-card p {
        color: rgba(255, 255, 255, 0.5);
        font-size: 3.5vw;
        line-height: 1.5;
    }

    /* CTA Sektion (Bereit für dein nächstes...) */
    .cta-section {
        background-color: var(--bg-dark);
        padding: 120px 10%;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
    }

    .cta-container {
        max-width: 1800px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .cta-container h2 {
        font-size: 3vh;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
    }

    .highlight-text {
        color: var(--neon-green);
    }

    .hero-footer {
    position: fixed;
    top: 91%;                   /* Mittig auf der Y-Achse platzieren */
    left: 4%;                 /* Fest am linken Rand verankern */
    bottom: auto;               /* Altes bottom überschreiben */
    width: auto;                /* Keine Begrenzung der Breite */
    padding: 0;                 /* Inneren Abstand zurücksetzen */
    transform: translateY(-50%); /* Exakte vertikale Zentrierung */
    z-index: 100;               /* Stellt sicher, dass es oben liegt */
    pointer-events: none;       /* Verhindert das Blockieren von Klicks */
}

.brand-film {
    display: inline-block;
    writing-mode: vertical-lr;  /* Dreht den Text hochkant */
    text-transform: uppercase;  /* Optional: Für saubere Großbuchstaben */
    transform: rotate(180deg);

    font-size: 1.1vh;           /* Alternativ z.B. 10px bis 12px wählen */
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;        /* Verhindert unerwünschte Umbrüche */
}

.main-footer {
    background-color: var(--bg-dark);
    padding: 10% 15%;
    padding-bottom: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 1.3vh;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-logo {
    font-weight: 700;
    padding-bottom: 5%;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    margin-right: 2vh;
    font-weight: 700;
    transition: color 0.3s;

    /* --- HIER SIND DIE NEUEN ZEILEN --- */
    display: inline-block;  /* Erlaubt echtes Padding */
    padding: 10px 5px;      /* 10px Puffer nach oben und unten, 5px zu den Seiten */
}

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

.gallery-wrapper {
    width: 100%;
    padding: 40px 10%;
    background-color: #0d0d0d;
    box-sizing: border-box;
}

.item-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 3vw;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.item-title{
  font-size: 3vw;
}

.gallery-tile {
    display: inline-block; /* Wichtig für das Spaltenlayout */
    width: 100%;
    margin-bottom: 0px; /* Abstand nach unten zum nächsten Bild in der Spalte */
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.portfolio-section-dark{
  padding: 10%;
}



.about-right {
  text-align: left;
  align-items: baseline;
}








} /* Endklammer für die Mobile Version!!! */

/* ========================================
   LIGHTBOX (Bildvergrößerung in der Galerie)
   ======================================== */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
    cursor: zoom-out;
}

.lightbox img,
.lightbox video {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: var(--neon-green);
}