html {
  scrollbar-gutter: stable;
}

/* === HIER DEN NEUEN CODE EINFÜGEN === */
body {
  /* Für Firefox */
  scrollbar-width: none;
  
  /* Für Internet Explorer und Edge (ältere Versionen) */
  -ms-overflow-style: none;
}

/* Für Chrome, Safari und Opera */
body::-webkit-scrollbar {
  display: none;
}

/* ========================================================= */
/* === BASISVARIABLEN ====================================== */
/* ========================================================= */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --text-color-active: #787878;
    --font-main: Arial, sans-serif;
    --header-font-size: 18pt;
    --header-padding: 25px;
    --main-max-width: 1200px;
    --main-side-padding: 80px;
    --project-info-padding: 0.2rem;
}

html, body {
  /* Für Firefox */
  scrollbar-width: none;
  /* Für IE/Edge */
  -ms-overflow-style: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  /* Für Chrome, Safari, etc. */
  display: none;
}

/* ========================================================= */
/* === GRUNDEINSTELLUNGEN ================================== */
/* ========================================================= */
body {
    font-family: var(--font-main);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

/* Hide old corner filters */
.corner-filters {
    display: none;
}

/* ========================================================= */
/* === NEW: DESKTOP LANGUAGE SWITCHER ====================== */
/* ========================================================= */
.lang-switcher-desktop {
    display: none; /* Hidden on mobile by default */
}

@media (min-width: 1025px) {
    .lang-switcher-desktop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        padding: var(--header-padding);
        z-index: 110;
        font-size: var(--header-font-size);
    }
    .lang-switcher-desktop a {
        color: var(--text-color-active); /* Inactive is now gray */
        text-decoration: none;
        padding: 0 5px;
    }
    .lang-switcher-desktop a:hover {
        color: var(--text-color-active); /* Hover remains gray */
    }
    .lang-switcher-desktop a.active {
        color: var(--text-color); /* Active is now black */
    }
}


/* ========================================================= */
/* === GRID-CONTAINER ====================================== */
/* ========================================================= */
.grid-container {
    max-width: calc(var(--main-max-width) + var(--main-side-padding) * 2);
    margin: 0 auto;
    padding: 0 var(--main-side-padding);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* NEU: Der Spaltenabstand wird hier zentral definiert */
    column-gap: 0px; 
    box-sizing: border-box;
}

/* ========================================================= */
/* === HEADER ============================================== */
/* ========================================================= */
header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 99;
    padding-top: var(--header-padding);
    pointer-events: none;
}

.site-title {
  margin: 0;
  font-size: var(--header-font-size);
  font-weight: 400;
  line-height: 1;
}

.site-title-link {
  color: var(--text-color); text-decoration: none; font-weight: normal;
}
.site-title-link:hover, .site-title-link:visited {
  color: var(--text-color); text-decoration: none;
}

header .grid-container { 
    align-items: center; 
}

header .grid-container > * {
    pointer-events: auto;
    font-size: var(--header-font-size);
    text-decoration: none;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    justify-self: start;
}

header a.active { color: var(--text-color); }

/* --- Corrected Desktop Header Positioning --- */
.site-title                 { grid-column: 1 / 2; }
#nav-work-container         { grid-column: 3 / 4; position: relative; } 
#nav-info, #nav-info-de     { grid-column: 4 / 5; }
#nav-contact, #nav-contact-de { grid-column: 6 / 7; }


/* --- Corrected "Work" Submenu Styles --- */
#nav-work-container > a {
    text-decoration: none;
}
#nav-work-container:hover > a {
    color: var(--text-color-active);
}

.work-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: none;
    padding: 5px 0;
    z-index: 100;
    white-space: nowrap;
}

#nav-work-container:hover .work-submenu {
    display: block;
}

.work-submenu a {
    display: block;
    padding: 5px 0;
    font-size: 15px;
    color: var(--text-color);
    text-decoration: none;
}

.work-submenu a:hover {
    color: var(--text-color-active);
}

/* ========================================================= */
/* === PROJECT GRID (Unchanged) ============================ */
/* ========================================================= */

#project-grid {
    padding-top: calc(var(--header-font-size) + (var(--header-padding) * 3.05));
    padding-bottom: 120px;
    /* ENTFERNT: gap: 0; (wird nun vom .grid-container geerbt) */
}
.project-item{grid-column:span 3;text-decoration:none;color:var(--text-color);display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start;grid-auto-flow:dense}.project-image-container{position:relative;background-color:#f0f0f0;height:0}.pixelation-canvas,.full-res-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.pixelation-canvas{z-index:2}.full-res-image{z-index:1}.project-image-container.is-loaded .pixelation-canvas{opacity:0}.project-info{font-family:Arial,sans-serif;padding:var(--project-info-padding);min-width:0;overflow-wrap:anywhere;word-break:normal;hyphens:auto}.project-info h3,.project-info p{font-size:15px;margin:0;line-height:1.1;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}.project-info h3{font-weight:400}
.layout-a > .project-image-container{grid-column:1 / 2}.layout-a > .project-info{grid-column:2 / 3}.layout-b > .project-info{grid-column:2 / 3}.layout-b > .project-image-container{grid-column:3 / 4}

/* ========================================================= */
/* === PROJECT DETAIL PAGE STYLES ========================== */
/* ========================================================= */
.project-main-layout {
    align-items: start;
    /* Der 'column-gap' wird vom .grid-container geerbt. */
}

.project-text {
    /* KORRIGIERT: Der Text erstreckt sich nun über Spalte 1 UND 2 */
    grid-column: 1 / 3;
    position: sticky;
    top: 40px;
}

.project-text p a,
.project-text p a:visited {
    color: var(--text-color);
    text-decoration: underline;
}

.project-text p a:hover {
    color: var(--text-color-active);
}

.project-text p {
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
    max-width: 100%; /* max-width angepasst */
    hyphens: auto;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 8px;
    align-items: start; 
}

.thumbnail-item {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5; 
    transition: opacity 0.2s ease;
}

/* Letzte funktionierende Logik für die Hervorhebung */
.thumbnail-grid:has(.is-active) .thumbnail-item {
    opacity: 1;
}
.thumbnail-grid .thumbnail-item.is-active {
    opacity: 0.5;
}

.project-gallery {
    /* KORRIGIERT: Die Galerie erstreckt sich nun über Spalte 3 bis zum Ende */
    grid-column: 3 / 6;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Positionierung der Galerie-Pfeile */
.prev-btn { 
    left: 1000px;
}
.next-btn { 
    right: 1000px;
}

/* ========================================================= */
/* === MOBILE & RESPONSIVE ================================= */
/* ========================================================= */

/* Hide mobile nav by default on desktop */
.corner-nav { 
    display: none; 
}

/* ========================================================= */
/* === MOBILE & RESPONSIVE ================================= */
/* ========================================================= */

/* Mobile Navigation auf dem Desktop standardmäßig ausblenden */
.corner-nav { 
    display: none; 
}

@media (max-width: 1024px) {
  :root { 
      --header-font-size: 18pt; 
  }

  /* Desktop-Elemente ausblenden und mobile Navigation anzeigen */
  header { display: none !important; }
  .corner-nav { display: block; }
  .lang-switcher-desktop { display: none; }

  /* Stile für die Eck-Navigation */
  .corner-nav .corner {
    position: fixed;
    z-index: 120;
    padding: 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--header-font-size);
    line-height: 1;
    color: var(--text-color);
    text-decoration: none;
  }
  .corner-nav .corner:hover {
      color: var(--text-color-active);
  }
  .corner-nav .top-left     { top: 0; left: 0; }
  .corner-nav .top-right    { top: 0; right: 0; }
  .corner-nav .bottom-left  { bottom: 0; left: 0; }
  .corner-nav .bottom-right { bottom: 0; right: 0; }

  .corner-nav .lang-switcher a {
    font-size: var(--header-font-size);
    text-decoration: none;
    color: var(--text-color-active);
    padding: 0 5px;
  }
  .corner-nav .lang-switcher a.active {
      color: var(--text-color);
  }

  /* === KORREKTUREN FÜR LAYOUT-PROBLEME === */
  
  /* FIX 1: Verhindert seitliches Überlaufen und Leerraum */
  main {
      overflow-x: hidden;
  }
  
  /* Allgemeine mobile Layout-Anpassungen */
  .grid-container, 
  #project-grid {
    grid-template-columns: 1fr;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* --- Stile für die Projekt-ÜBERSICHTSSEITE (index.html) --- */
  #project-grid { 
      padding-top: calc(var(--header-font-size) + (var(--header-padding) * 1.5)) !important; 
      padding-bottom: 70px; 
      gap: 20; 
  }
  .project-item { 
      grid-column: span 1; 
      margin-bottom: 0 !important;
      grid-template-columns: 1fr 1fr 1fr;
  }
  .project-item .project-image-container,
  .project-item .project-info {
      grid-row: 1;
  }
  .project-item:nth-child(odd) .project-info{ grid-column: 2; }
  .project-item:nth-child(odd) .project-image-container{ grid-column: 1; }
  .project-item:nth-child(even) .project-image-container{ grid-column: 3; }
  .project-item:nth-child(even) .project-info{ grid-column: 2; }
  .project-info { 
      padding: var(--project-info-padding) !important; 
  }
  .project-info h3, 
  .project-info p { 
      font-size: 15px; 
      line-height: 1.2; 
  }

  /* --- Stile für die Projekt-DETAILSEITE (project.html) --- */
  
  /* FIX 2: Korrigiert die Überlappung von Text und Galerie */
  .project-main-layout {
      display: flex;
      flex-direction: column;
      gap: 0px;
  }
  .project-text,
  .project-gallery {
      grid-column: auto;
      width: 100%;
  }
  .project-text { 
      position: static; /* Hebt "sticky" Positionierung auf */
  }
  .project-gallery {
      position: relative; /* Stellt korrektes Verhalten sicher */
  }
  .project-text p { 
      font-size: 15px; 
      max-width: 100%; 
  }
  .prev-btn { left: 10px; }
  .next-btn { right: 10px; }

  /* Lightbox-Anpassungen für Mobile */
  .lightbox-overlay {
      padding: 0;
      justify-content: center;
  }
  .lightbox-image {
      max-width: 100%;
      max-height: 100%;
  }
  .lightbox-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1001;
  }
  .lightbox-overlay .prev-btn { left: 10px; }
  .lightbox-overlay .next-btn { right: 10px; }
}

/* ========================================================= */
/* === PIXEL TRAIL EFFECT ================================== */
/* ========================================================= */
#pixel-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Allows clicks to pass through to links below */
    z-index: 9999;        /* Ensures it sits on top of images */
    mix-blend-mode: difference; /* This creates the color inversion effect */
}