@charset "UTF-8";

    /* ── FONTS ── */
    @font-face {
      font-display: swap; 
      font-family: 'Josefin Sans';
      font-style: normal;
      font-weight: 300;
      src: url('fonts/josefin-sans-v34-latin-300.woff2') format('woff2'); 
    }
    @font-face {
      font-display: swap; 
      font-family: 'Josefin Sans';
      font-style: normal;
      font-weight: 400;
      src: url('fonts/josefin-sans-v34-latin-regular.woff2') format('woff2'); 
    }
    @font-face {
      font-display: swap; 
      font-family: 'Josefin Sans';
      font-style: normal;
      font-weight: 500;
      src: url('fonts/josefin-sans-v34-latin-500.woff2') format('woff2'); 
    }
    @font-face {
      font-display: swap; 
      font-family: 'Josefin Sans';
      font-style: normal;
      font-weight: 600;
      src: url('fonts/josefin-sans-v34-latin-600.woff2') format('woff2'); 
    }
    @font-face {
      font-display: swap; 
      font-family: 'Josefin Sans';
      font-style: normal;
      font-weight: 700;
      src: url('fonts/josefin-sans-v34-latin-700.woff2') format('woff2'); 
    }

    /* ── BROWSER RESET & BASICS ── */
    * { 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    }    
    
    body { 
      background: #f7f5f2; 
      font-family: 'Josefin Sans', sans-serif; 
      overflow-x: hidden; 
      transition: background-color 0.8s ease; 
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    img, .split-image, .image-wrapper, .grid-item-partner {
      border-radius: 4px;
    }
    
    /* ── HEADER & NAV ── */    
    #header-bg {      
      position: fixed; 
      top: 0; left: 0; right: 0; 
      height: 55px;     
      background: #f7f5f2; 
      opacity: 0;      
      transition: background-color 0.8s ease, opacity 0.4s ease; 
      z-index: 98; 
      pointer-events: none;    
    }
    
    .nav-item {      
      position: fixed; 
      top: 0; 
      z-index: 101; 
      opacity: 0; 
      pointer-events: none;      
      transition: opacity 0.5s ease, color 0.8s ease, scale 0.4s ease; 
      font-family: 'Josefin Sans', sans-serif; 
      font-weight: 300;      
      font-size: clamp(13px, 1.43vw, 17px);
      letter-spacing: 0.10em;       
      color: #1d1d1b; 
      text-decoration: none; 
      white-space: nowrap; 
      display: flex; 
      align-items: center; 
      justify-content: center;
      scale: 1; 
    }    
    
    .nav-item.visible { 
      opacity: 1; 
      pointer-events: auto; 
    }    
    
    #nav-left  { left: 4vw; }    
    #nav-right { right: 4vw; }

    .nav-item:hover {
      scale: 1.05; 
    }

    .nav-item::after {
      content: '';
      position: absolute;
      bottom: -4px; 
      left: 0;
      width: 100%;
      height: 1px; 
      background-color: currentColor; 
      transform: scaleX(0); 
      transform-origin: center; 
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

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

    /* ── LOGO STICKY & ANIMATION ── */    
    #logo-sticky {      
      position: sticky; 
      top: 0; 
      z-index: 100; 
      height: 0;      
      overflow: visible; 
      display: flex; 
      justify-content: center; 
      pointer-events: none;    
    }    
    
    #logo-block {      
      width: 92vw; 
      max-width: 1100px;      
      position: absolute; 
      top: 0; 
      left: 50%;      
      transform: translateX(-50%);      
      display: flex; 
      flex-direction: column; 
      align-items: center;      
      transform-origin: top center; 
      will-change: transform; 
      text-decoration: none;
      pointer-events: none;
    }   
    
    #logo-block.logo-scrolled {
      pointer-events: auto;
    } 
    
    #hero-spacer { height: 100vh; }

    /* ── SCROLL INDIKATOR (PFEIL) ── */
    #scroll-indicator {
      position: fixed;
      bottom: 5vh;
      left: 50%;
      z-index: 90;
      opacity: 0;
      pointer-events: auto; 
      cursor: pointer; 
      animation: bounceFade 2.5s ease-in-out 5.5s infinite;
      transition: opacity 0.3s ease;
    }
    
    #scroll-indicator.hidden {
      opacity: 0 !important;
      animation: none !important;
      pointer-events: none !important;
    }
    
    #scroll-indicator.no-delay {
      animation: bounceFade 2.5s ease-in-out 0s infinite;
    }
    
    #scroll-indicator svg {
      width: clamp(30px, 4vw, 45px); 
      height: auto;
      fill: none;
      stroke: #1d1d1b;
      stroke-width: 0.8px; 
    }
    
    @keyframes bounceFade {
      0%   { opacity: 0; transform: translateX(-50%) translateY(-10px); }
      30%  { opacity: 0.5; transform: translateX(-50%) translateY(0); }
      70%  { opacity: 0.5; transform: translateX(-50%) translateY(0); }
      100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
    }
    
    /* ── LOGO SVG ROW ── */    
    .logo-row { 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      gap: 0; 
    }    
    
    .svg-marco, .svg-ordier {      
      display: block; 
      height: clamp(48px, 8vw, 110px); 
      width: auto; 
      opacity: 0;    
    }    
    
    .svg-marco {      
      margin-right: 14px;      
      animation: slideInLeft 1.2s cubic-bezier(0.22,1,0.36,1) 1.0s both;      
      transform: translateX(-40px); 
    }    
    
    .svg-ordier {      
      animation: slideInRight 1.2s cubic-bezier(0.22,1,0.36,1) 2.2s both;      
      transform: translateX(40px); 
    }
    
    @keyframes slideInLeft  { to { opacity: 1; transform: translateX(0); } }    
    @keyframes slideInRight { to { opacity: 1; transform: translateX(0); } }
    
    .svg-c {      
      display: block; 
      height: clamp(48px, 8vw, 110px); 
      width: auto; 
      opacity: 0;      
      transform-style: preserve-3d;      
      animation: fadeInC 0.3s ease 0.15s forwards, spinSlow 2.6s linear 0.15s infinite;    
    }    
    
    @keyframes fadeInC { to { opacity: 1; } }    
    @keyframes spinSlow {      
      from { transform: perspective(220px) rotateY(0deg); }      
      to   { transform: perspective(220px) rotateY(360deg); }    
    }

    #logo-block.logo-scrolled .svg-c {
      animation: none !important; 
      opacity: 1 !important; 
      transform: perspective(220px) rotateY(0deg) !important;
    }

    .no-intro .svg-marco, 
    .no-intro .svg-ordier, 
    .no-intro .svg-design-studio {
      animation: none !important; 
      opacity: 1 !important; 
      transform: translateZ(0) !important;
    }
    
    .no-intro .tagline { animation: none !important; transform: none !important; }
    .no-intro .svg-c { opacity: 1 !important; animation: spinSlow 2.6s linear infinite; }
    
    /* ── SUBTITLES ── */    
    .subtitle-row { 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      gap: 0.4rem; 
      margin-top: 0.75rem; 
      will-change: opacity; 
    }    
    
    .svg-design-studio {      
      display: block; 
      height: clamp(16px, 2.2vw, 32px); 
      width: auto; 
      opacity: 0;      
      animation: riseIn 0.9s cubic-bezier(0.22,1,0.36,1) 3.4s both;    
    }    
    
    .tagline {       
      font-weight: 300;      
      font-size: 18px; 
      letter-spacing: 0.1em; 
      color: #6b6860;      
      opacity: 0; 
      white-space: nowrap; 
      margin-top: 1rem;      
      animation: riseIn 0.9s cubic-bezier(0.22,1,0.36,1) 4.3s both;
      transition: color 0.8s ease;    
    }

    @keyframes riseIn { 
      from { opacity: 0; transform: translateY(35px); } 
      to   { opacity: 1; transform: translateY(0); } 
    }
    
    .svg-marco path, .svg-ordier path, .svg-c path, .svg-design-studio path {
      transition: fill 0.8s ease;
    }

    /* ── THREE WORDS INTRO ── */    
    .word-fixed {      
      position: fixed; 
      opacity: 0; 
      font-family: 'Josefin Sans', sans-serif; 
      font-weight: 600;      
      font-size: clamp(42px, 8.5vw, 200px); 
      letter-spacing: 0.2em; 
      text-transform: uppercase; 
      color: #1d1d1b;      
      white-space: nowrap; 
      pointer-events: none; 
      z-index: 10; 
      will-change: transform, opacity;    
    }    
    
    #entwerfen   { top: 30%; left: 5vw;  transform: translate(-120vw,-50%); }    
    #produzieren { top: 50%; right: 5vw; transform: translate(120vw,-50%); }    
    #realisieren { top: 70%; left: 5vw;  transform: translate(-120vw,-50%); }
    
    .words-section { position: relative; height: 150vh; }
    
    /* ── SPLIT SECTIONS (PROJEKTE) ── */    
    .split-section { 
      position: relative; 
      height: 190vh; /* Fallback für ältere Browser */
      height: 190svh; 
    } 
    
    .split-image {      
      position: fixed; 
      top: 10vh; 
      right: 4vw; 
      width: auto; 
      max-width: 46vw; 
      height: 80vh;    
      aspect-ratio: 2/3; 
      transform: translateX(120vw); 
      opacity: 0; 
      background: #888; 
      overflow: hidden; 
      pointer-events: none; 
      z-index: 10;      
      will-change: transform, opacity;    
    }    
    
    .split-image img { 
      width: 100%; 
      height: 100%; 
      object-fit: cover; 
      display: block; 
    }
    
    .split-word {
      position: fixed; 
      top: 14vh; 
      left: 4vw; 
      font-family: 'Josefin Sans', sans-serif; 
      font-weight: 600;      
      font-size: clamp(42px, 7vw, 300px); 
      letter-spacing: 0.15em; 
      text-transform: uppercase; 
      white-space: nowrap;      
      transform: translate(-120vw, 0); 
      opacity: 0; 
      color: #1d1d1b; 
      z-index: 20;      
      will-change: transform, opacity;
      margin-left: -0.04em; 
    }

    .split-bodytext {      
      position: fixed; 
      top: auto;      
      bottom: 10vh;   
      left: 4vw; 
      width: calc(88vw - min(46vw, 80vh * 0.666));    
      margin: 0; 
      padding: 0;      
      font-family: 'Josefin Sans', sans-serif; 
      font-weight: 300; 
      font-size: clamp(18px, 2.4vw, 33px); 
      line-height: 1.3; 
      opacity: 0; 
      z-index: 20; 
      will-change: opacity, transform; 
      color: #1d1d1b; 
    }

    #section-produzieren .split-image { 
      right: auto; left: 4vw; 
    }
    
    #section-produzieren .split-word { 
      left: auto; right: 4vw; 
      margin-left: 0; 
      margin-right: -0.15em; 
    }
    
    #section-produzieren .split-bodytext { 
      left: auto; right: 4vw; text-align: right; 
    }

    /* ── FINAL CTA & CONTACT SECTION ── */
    .cta-section { position: relative; height: 200vh; }

    .cta-grid,
.cta-grid * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
    
    .cta-container {
      position: fixed; 
      top: 50%; left: 50%; 
      transform: translate(-50%, -45%); 
      width: 92vw; 
      max-width: 1200px;
      text-align: center; 
      opacity: 0; 
      pointer-events: none; 
      z-index: 30; 
      will-change: transform, opacity;
    }
    
    .cta-title {
      font-family: 'Josefin Sans', sans-serif; 
      font-weight: 600; 
      font-size: clamp(36px, 5.5vw, 84px); 
      letter-spacing: 0.1em;
      text-transform: uppercase; 
      color: #1d1d1b; 
      line-height: 1.2; 
      margin-bottom: 4vh; 
      transition: color 0.8s ease;
    }
    
    .cta-grid { 
      display: flex; 
      justify-content: center; 
      gap: 8vw; 
      margin-top: 2vh; 
    }
    
    .cta-col { text-align: left; }
    
    .cta-col h4 {
      font-size: clamp(11px, 1vw, 14px); 
      font-weight: 600; 
      letter-spacing: 0.2em; 
      text-transform: uppercase;
      color: #6b6860; 
      margin-bottom: 12px; 
      transition: color 0.8s ease;
    }
    
    .cta-col p, .cta-col a {
      font-size: clamp(16px, 1.5vw, 22px); 
      font-weight: 300; 
      color: #1d1d1b; 
      text-decoration: none; 
      line-height: 1.5; 
      transition: color 0.8s ease;
      -webkit-user-select: auto;
      -moz-user-select: auto;
      -ms-user-select: auto;
      user-select: auto;
    }
    
    .cta-col a { transition: opacity 0.3s ease, color 0.8s ease; }
    .cta-col a:hover { opacity: 0.6; }

    /* ── FUSSZEILE ── */
    .studio-footer {
      position: fixed; 
      bottom: 0; left: 0; 
      width: 100%; 
      padding: 3vh 4vw; 
      z-index: 40;
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      border-top: 1px solid rgba(26,26,24,0.08);
      background: transparent; 
      opacity: 0; 
      pointer-events: none; 
      will-change: opacity, transform;
      transition: border-color 0.8s ease;
    }
    
    .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; }

    /* ═══════════════════════════════════════════════════════════════════════ */
    /* ── DARK THEME OVERRIDES ── */
    /* ═══════════════════════════════════════════════════════════════════════ */
    body.dark-theme, 
    body.dark-theme #header-bg { 
      background-color: #1d1d1b; 
    }
    
    body.dark-theme .nav-item { color: #f7f5f2; }
    body.dark-theme .nav-item::before { border-color: rgba(247, 245, 242, 0.25); }
    
    body.dark-theme .svg-marco path, 
    body.dark-theme .svg-ordier path, 
    body.dark-theme .svg-c path { 
      fill: #f7f5f2 !important; 
      stroke: #f7f5f2 !important;
      stroke-width: 0.3px; 
    }
    
    body.dark-theme .svg-design-studio path { 
      fill: #f7f5f2 !important; 
      stroke: #f7f5f2 !important;
      stroke-width: 0.5px; 
    }
    
    body.dark-theme .tagline,
    body.dark-theme .cta-col h4,
    body.dark-theme .footer-copy { 
      color: #a3a098; 
    }
    
    body.dark-theme .cta-title,
    body.dark-theme .cta-col p, 
    body.dark-theme .cta-col a,
    body.dark-theme .footer-links a { 
      color: #f7f5f2; 
    }
    
    body.dark-theme .studio-footer { border-top-color: rgba(247, 245, 242, 0.08); }
    
    /* ═══════════════════════════════════════════════════════════════════════ */
    /* ── MOBILE MASTER-BLOCK ── */
    /* ═══════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .split-section { 
        height: 170vh !important; /* Fallback */
        height: 170svh !important; 
      } 
      .cta-section { height: 80vh !important; }

      #header-bg { height: 55px !important; } 
      .nav-item { font-size: 12px !important; }
      
      #logo-block { width: 100vw !important; }
      .svg-marco { margin-right: 6px !important; }

      .svg-marco, .svg-ordier, .svg-c { 
        height: 36px !important; width: auto !important; transition: height 0.3s ease; 
      }
      .svg-design-studio { height: 11px !important; width: auto !important; }
      .tagline { font-size: 11px !important; margin-top: 0.5rem !important; }

      #logo-block.logo-scrolled .svg-marco,
      #logo-block.logo-scrolled .svg-ordier,
      #logo-block.logo-scrolled .svg-c { height: 55px !important; }
      #logo-block.logo-scrolled .svg-design-studio { height: 36px !important; }

      .no-intro .svg-marco, 
      .no-intro .svg-ordier, 
      .no-intro .svg-c  { height: 36px !important; }

      .word-fixed {
        font-size: clamp(22px, 8vw, 36px) !important; 
        letter-spacing: 0.15em !important; 
      }
      #entwerfen   { top: 40% !important; }
      #produzieren { top: 50% !important; }
      #realisieren { top: 60% !important; }

      .split-word {
        font-size: 9.5vw !important; 
        top: 20vh !important;        
      }
      
      .split-image {
        width: 44vw !important;      
        max-width: none !important;
        height: auto !important;
        aspect-ratio: 2/3 !important;
        top: 18vh !important;        
      }

      .split-bodytext { 
        width: 44vw !important;      
        top: 28vh !important;       
        bottom: auto !important;    
        padding: 0 !important; 
        font-size: 90% !important; 
      }

      .cta-title { 
        font-size: 32px !important; 
        margin-bottom: 2vh !important; 
        line-height: 1.1 !important; 
      }
      
      .cta-grid { 
        flex-direction: column; 
        align-items: center; 
        gap: 2.5vh !important; 
      }
      
      .cta-col { text-align: center; }
      .cta-col h4 { margin-bottom: 4px !important; }
      .cta-col p, .cta-col a { font-size: 13px !important; line-height: 1.3 !important; }
      
      .footer-links { 
        flex-direction: column;
        gap: 5px; 
        align-items: flex-end; 
      }

      @keyframes slideInLeft  { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } }    
      @keyframes slideInRight { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }
      @keyframes fadeInC      { from { opacity: 0; } to { opacity: 1; } }
    }