@charset "UTF-8";


/* josefin-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/josefin-sans-v34-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/josefin-sans-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/josefin-sans-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/josefin-sans-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* josefin-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Josefin Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/josefin-sans-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




 * { box-sizing: border-box; margin: 0; padding: 0; }    
    
    body { 
      background: #f7f5f2; 
      font-family: 'Josefin Sans', sans-serif; 
      overflow-x: hidden; 
      color: #1d1d1b;
      padding-top: 120px; /* Platz, damit der Text nicht hinter dem Header verschwindet */
      font-weight: 300;
    }

     @media (max-width: 768px) {
body { 
     
      padding-top: 60px; /* Platz, damit der Text nicht hinter dem Header verschwindet */
      
    }
     }

     /* ── Header Background (Statisch) ── */    
    #header-bg {      
      position: fixed; top: 0; left: 0; right: 0; 
      height: 55px;     
      background: #f7f5f2; 
      z-index: 98; 
    }
    
   /* ── Nav (Statisch) ── */    
    .nav-item {      
      position: fixed; top: 27px; transform: translateY(-50%); z-index: 101; 
      font-family: 'Josefin Sans', sans-serif; font-weight: 300;      
      font-size: clamp(13px, 1.43vw, 17px);
      letter-spacing: 0.10em;   
      line-height: 1.2;     
      color: #1d1d1b; text-decoration: none; white-space: nowrap; 
      /* NEU: Transition und Start-Scale für den Hover-Effekt */
      transition: scale 0.4s ease;
      scale: 1;
    }    
    #nav-left  { left: 4vw; }    
    #nav-right { right: 4vw; }

    /* NEU: Dezent vergrößern (5%) beim Hovern */
    .nav-item:hover {
      scale: 1.05; 
    }

    .nav-item.active::after {
      transform: scaleX(1); 
    }

    /* NEU: Elegante, animierte Unterstreichung */
    .nav-item::after {
      content: '';
      position: absolute;
      bottom: -4px; /* Abstand der Linie zum Text */
      left: 0;
      width: 100%;
      height: 1px; /* Strichstärke der Unterstreichung */
      background-color: currentColor; /* Nutzt automatisch die Textfarbe */
      transform: scaleX(0); /* Startet unsichtbar (Breite 0) */
      transform-origin: center; /* Wächst edel von der Mitte nach außen */
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Unterstreichung beim Hovern auf 100% Breite aufklappen */
    .nav-item:hover::after {
      transform: scaleX(1); 
    }
    
    /* ── Logo sticky (Fest auf Endposition fixiert) ── */    
    #logo-sticky {      
      position: fixed; top: 0; left: 0; width: 100%; z-index: 100;    
    }    
    #logo-block {      
      width: 92vw; max-width: 1100px;      
      position: absolute; top: 0; left: 50%;      
      /* Hier simulieren wir den statischen Endzustand der JavaScript Animation: */
      transform: translateX(-50%) translateY(12px) scale(0.25);      
      display: flex; flex-direction: column; align-items: center;      
      transform-origin: top center;    
    }    
    
    /* ── Logo row (Ohne Animationen) ── */    
    .logo-row { display: flex; align-items: center; justify-content: center; gap: 0; }    
    .svg-marco, .svg-ordier, .svg-c {      
      display: block; height: clamp(48px, 8vw, 110px); width: auto; opacity: 1;    
    }    
    .svg-marco { margin-right: 14px; }    
    
    /* ── Subtitles ── */    
    .subtitle-row { display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin-top:0.75rem; }    
    .svg-design-studio {      
      display:block; height: clamp(16px, 2.2vw, 32px); width:auto; opacity:1;      
    }    
    .tagline { display: none; /* Im Header-Modus immer ausgeblendet */ } 
	
	.logo-link {
    display: block;          /* Sorgt dafür, dass der Link den gesamten Block ausfüllt */
    text-decoration: none;   /* Entfernt Unterstreichungen */
    color: inherit;          /* Erbt die Schriftfarbe, damit der Text nicht plötzlich blau wird */
    cursor: pointer;
	}

	/* Optional: Damit sich der Mauszeiger nicht ändert, falls du das nicht möchtest */
	.logo-link:hover {
		/*cursor: pointer;*/
	}
    
    /* ── Content Styling für Impressum ── */
    /*main { max-width: 800px; margin: 0 auto; padding: 0 4vw 10vh; }*/
    h1 { font-weight: 600; font-size: 32px; margin-bottom: 3rem; text-transform: uppercase; letter-spacing: 0.1em; }
    h2 { font-weight: 600; font-size: 18px; margin: 2rem 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
    p { margin-bottom: 1rem; font-size: 17px; font-weight: 300; }
    a.content-link { color: #1d1d1b; }

    /* ═══════════════════════════════════════════════════════════════════════ */
    /* ── MOBILE MASTER-BLOCK ── */
    /* ═══════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      #header-bg { height: 42px; } 
      .nav-item { font-size: 12px !important; top: 21px; }
     

      #logo-block { width: 100vw !important; }
      .svg-marco { margin-right: 6px !important; }

      

      /* Statische Höhen-Overrides wie im Haupt-CSS */
      .svg-marco, .svg-ordier, .svg-c { height: 55px !important; width: auto !important; }
      .svg-design-studio { height: 36px !important; width: auto !important; }
    }



	.studio-footer {
   
  display: flex;
  justify-content: space-between; /* Copyright nach links, Links nach rechts */
  align-items: center;
  padding: 3vh 4vw;
  margin-top: 60px;
 
  font-size: 0.75rem; /* Etwas kleiner, wie im Screenshot */
  letter-spacing: 0.1em; /* Leichter Buchstabenzustand für Eleganz */
   border-top: 1px solid rgba(26,26,24,0.08);
  color: #a0a0a0; /* Ein sanftes Grau, das auf Schwarz gut aussieht */
}

.footer-copy { font-size: clamp(10px, 1.1vw, 13px); font-weight: 300; color: #6b6860; letter-spacing: 0.05em; transition: color 0.8s ease; }
    .footer-links { display: flex; gap: 2.5vw; }
    .footer-links a {
      font-size: clamp(10px, 1.1vw, 13px); font-weight: 300; color: #1d1d1b; text-decoration: none; letter-spacing: 0.12em;
      text-transform: uppercase; transition: opacity 0.3s ease, color 0.8s ease;
    }
    .footer-links a:hover { opacity: 0.5; }


 @media (max-width: 768px) {
    .footer-links { flex-direction: column;
    gap: 5px; /* Optional: Fester Wert statt vw für mobile Abstände */
  align-items: flex-end; }
    }



















.grid-container-partner {
  box-sizing: border-box; /* Sorgt dafür, dass Padding die Gesamtbreite nicht vergrößert */
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px; /* 20px Abstand oben/unten und links/rechts */
  display: grid;
  
  /* Der Trick für mobile Geräte: min(100%, 300px) verhindert das Ausbrechen auf kleinen Bildschirmen */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  
  gap: 30px; /* Den Abstand (Gap) zwischen den Kacheln können Sie hier nach Wunsch anpassen */
}

/* 2. Desktop fix: Lock it strictly to 6 columns on larger screens */
@media (min-width: 1024px) {
  .grid-container-partner {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Each grid item turns into a Flexbox container to center its content */
.grid-item-partner {
  display: flex;
 flex-direction: column; /* Zwingt die Elemente in eine vertikale Anordnung (untereinander) */
  overflow: hidden;
}

/* Controls how the image behaves inside the flexbox container */
.grid-item-partner img {
  width: 100%; 
  max-width: 100%;
  height: auto; /* Behält die Bildproportionen bei */
  border-radius: 4px;
  display: block; /* Verhindert einen kleinen, fehlerhaften Abstand unter dem Bild */
}

.pimgheader {
  font-weight: 600;
  padding-top: 10px;
  padding-bottom:10px;
}
.pimgtext {
  line-height: 140%;
  padding-bottom:40px;
}




/* The Grid Container remains responsive */
.grid-container-project {
  margin: 0 auto;
  width: 70vw;
  display: grid;
  
  /* 1. Mobile default: Fit as many 150px items as possible */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  padding: 20px;
}

/* 2. Desktop fix: Once the screen is wide, lock it strictly to 4 columns */
@media (min-width: 900px) {
  .grid-container-project {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* The grid item is locked into a 2:3 aspect ratio */
.grid-item-project {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  /*border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;

  /* Magic Line: Forces the box itself to maintain a 2:3 ratio (Width / Height) */
  aspect-ratio: 2 / 3; 
}

/* The image scales to perfectly fill the 2:3 box */
.grid-item-project img {
  width: 100%;
  height: 100%;
  
  
  /* Cuts off any excess edges to ensure the box is completely filled without stretching */
  object-fit: cover; 
}








/* PROJECTS OVERVIEW */

/* 1. Main Grid Container */
.grid-container-projects {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  
  /* Mobile default: Fits as many 150px items as possible */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  padding: 20px;
}

/* 2. Desktop fix: Locks the layout to exactly 4 columns on larger screens */
@media (min-width: 900px) {
  .grid-container-projects {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3. The Individual Card Item */
.grid-item-projects {
  position: relative; 
  background-color: #f0f0f0;
 
  /*border-radius: 8px;*/
  overflow: hidden;
  
  /* Portrait ratio 2:3 */
  aspect-ratio: 2 / 3; 

  /* Ultra-smooth transition parameters */
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);

  /* Force the GPU to handle this element to prevent layout micro-stutters */
  will-change: transform, box-shadow;

  /* Card drop shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
}

/* 4. The Link Wrapper Fix 
   Ensures the link fills the entire card so the whole area is clickable. */
.grid-item-projects a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none; /* Removes default link underline */
}

/* 5. Hover Effects
   Changed from 'translateY(-6px)' to 'scale(1.03)' to grow the card smoothly by 3% */
.grid-item-projects:hover {
  transform: scale(1.03); 
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); /* Deepened shadow further to match the closer depth */
}

/* 6. The Image Inside the Card */
.grid-item-projects img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* Removes tiny bottom gap standard in images */
  border-radius: 4px;
}

/* 7. The Text Overlay (Bottom Left) */
.item-text {
  position: absolute; 
  bottom: 15px;
  left: 15px;
  
  /* Ensures text stays on top of the image and link layers */
  z-index: 10;
  
  /* Styling */
 
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff; 
  
  /* Text Shadow for legibility on light photos */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); 
  
  max-width: 85%; 
}




/* --- Base Layout & Grid Setup --- */
.grid-container-projects-detail {
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* NEW: Full-Length Top Image Styles */
.full-width-hero {
  grid-column: span 4;
  width: 100%;
  /* aspect-ratio: 16 / 6; */

  /* Default state: fully visible, ready to animate */
  opacity: 1;
  transition: opacity 0.8s ease-in-out; 
}

/* This applies ONLY while the image is downloading */
.full-width-hero.hero-loading {
  opacity: 0;
  transition: none; /* Prevents premature animating while loading */
}

.full-width-hero img {
  width: 100%;
  height: auto;
  display: block;
}



.aspect-2-3 {
  aspect-ratio: 2 / 3;
  width: 100%;
}

/* The Zoom Photo Frame */
.large-photo {
  grid-column: span 2;
  grid-row: span 2;
  width: 100%;
  overflow: hidden; 
  position: relative; 
}

/* Global Image Reset */
.grid-item-projects-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Zoom Image styling for JS */
.large-photo .zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.3); /* NEW: Matches the starting JavaScript calculation */
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.1s ease-out; /* Slightly faster transition to feel more responsive to the finger/wheel */
}

/* --- Responsive Media Queries --- */
@media (max-width: 1000px) {
 /* 1. Main Grid Container */
.grid-container-projects {
 
  
}
  .grid-container-projects-detail {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .full-width-hero {
    grid-column: span 2; /* Drops down to span both tracks in the 2-column view */
    /*aspect-ratio: 16 / 9; /* Slightly taller aspect ratio for smaller screens */
  }

  .large-photo {
    grid-column: span 2;
    grid-row: span 1;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 600px) {


  .grid-container-projects-detail {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .full-width-hero {
    grid-column: span 1; /* Fits mobile list layout natively */
  }

  .large-photo {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 2 / 3;
  }
}


/* --- Entry Animations --- */
@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(20px); /* Starts 20px to the right and moves left */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Just fades in cleanly with no movement */
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px); /* Starts 20px to the left and moves right */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.project-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Base item styling (hidden until animation triggers) */
.project-menu-item {
  opacity: 0; 
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  letter-spacing: 0.10em; 
   
}

/* First column: Aligns left & slides in FROM THE RIGHT */
.project-menu-item:nth-child(1) {
  text-align: left;
  animation-name: slideInFromRight;
  animation-delay: 0.1s;
}

/* Middle column: Aligns center & just fades in smoothly */
.project-menu-item:nth-child(2) {
  text-align: center;
  font-weight: 300;
  font-size: 105%;
  animation-name: fadeIn;
  animation-delay: 0.2s;
}

/* Last column: Aligns right & slides in FROM THE LEFT */
.project-menu-item:nth-child(3) {
  text-align: right;
  animation-name: slideInFromLeft;
  animation-delay: 0.3s;
}

/* --- Link Styles & Hover Effect --- */
.project-menu-item a {
  text-decoration: none;
  color: inherit; 
  display: inline-block; 
  transition: transform 0.4s ease-in-out; 
}

/* Rollover Effect */
.project-menu-item a:hover {
  transform: scale(1.02); 
}

/* --- Mobile Layout (Screens smaller than 768px) --- */
@media (max-width: 768px) {
  .project-menu {
    grid-template-columns: 1fr; 
  }

  /* Hide the first (left) and third (right) items entirely */
  .project-menu-item:nth-child(1),
  .project-menu-item:nth-child(3) {
    display: none;
  }
  
  /* Retained your left alignment choice for mobile */
  .project-menu-item:nth-child(2) {
    text-align: left; 
  }
}