:root{
      --bg:#0b0b0d;
      --bg2:#101014;
      --text:#f2f2f2;
      --muted:#b8b8b8;
      --accent:#ffffff;
      --card:#141418;
      --stroke: rgba(255,255,255,.10);
      --shadow: 0 18px 50px rgba(0,0,0,.55);
      --max: 1250px;
    }

    @font-face {
    font-family: "Nort";
    src: url("../fonts/Nort-Light.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    }

    @font-face {
    font-family: "Nort";
    src: url("../fonts/Nort-Ultra-Black.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    }

    @font-face {
    font-family: "Nort";
    src: url("../fonts/Nort-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    }

    * {
      box-sizing:border-box;
      font-family: "Nort";
    }

    html {
      scroll-behavior:smooth
    }

    body{
      margin:0;
      background-color: #000000;
      color:var(--text);
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    a:hover{
     color: rgb(255, 197, 24);
    }
    .container{max-width:var(--max); margin:0 auto; padding:0 20px;}

    h1 {
    font-size: clamp(42px, 9vw, 130px);
    font-family: "Nort", sans-serif;
    line-height: 1.1;
    }

    h2 {
    font-size: clamp(28px, 5vw, 60px);
    font-family: "Nort", sans-serif;
    line-height: 1.1
    }

    h3 {
    font-size: clamp(18px, 3.2vw, 30px);
    font-family: "Nort", sans-serif;
    font-weight: 500;
    }

    h4 {
    font-size: clamp(18px, 3.6vw, 35px);
    font-family: "Nort", sans-serif;
    font-weight: 400;
    }

    p {
    font-size: clamp(16px, 2.6vw, 20px);
    font-family: "Nort", sans-serif;
    color:var(--muted); line-height:1.6; margin:10px 0 0
    }

    h3, h4 {
      display: inline;
    }

    .line {
    border: none;
    height: 2px;
    background: var(--stroke);
    margin-top: 40px;
    margin-bottom: 70px;
    }

    /* Buttons */
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:0px;
      border:1px solid var(--stroke);
      background:rgba(255,255,255,.01);
      color:var(--text);
      text-decoration:none;
      font-family: inherit;
      font-weight:500;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      transition:0.2s ease;
    }
    .btn:hover{
      background:rgb(255, 197, 24);
      color: #000000;}

    .btn-contact:hover{
      color: rgb(255, 197, 24);
    }

    /* HERO */
    .hero{
      min-height: 78vh;
      display:flex;
      align-items:stretch;
      position:relative;
      overflow:hidden;
      /* border-bottom:1px solid var(--stroke); */
    }
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        url(../media/WayMore\ New\ BG.jpg);
      background-size:100%;
      background-position:top;
      filter:saturate(0.9) contrast(1.08);
      transform:scale(1.02);
    }
    .hero .container{
      position:relative;
      width:100%;
      height:100%;
      display:flex;
      align-items:flex-start;
      padding-top:50px;
      padding-bottom:100px;
    }
    .hero-content{
      max-width: 1440px;
      padding: 14px 0;
    }

    .hero h2{
      line-height: 2px;
      margin-bottom: 35px;
    }

    .hero h3{
      margin-bottom: 0px;
    }

    .hero h4{
      margin-bottom: 0px;
    }

    .hero p{
      margin-top: 3px;
    }


    /* SECTION 2: Portrait + Wide Image + Text right */
    .about{
      background:
        url(../media/BGWarehousedark2.jpg);
        background-position:top;
        background-size: 100%;
    }

    .about-grid{
      display:grid;
      grid-template-columns: 420px 1fr;
      gap:100px;
      align-items:start;
    }

    .about .container{
      position:relative;
      width:100%;
      height:100%;
      display:flex;
      align-items:flex-start;
      padding-top:50px;
      padding-bottom:0px;
    }

    .portrait{
      border-radius:0px;
      overflow:hidden;
      border:1px solid var(--stroke);
      background: var(--card);
      box-shadow: var(--shadow);
    }
    .portrait img{
      width:100%; height:100%;
      object-fit:cover; display:block;
    }

    .about-right{
      display:flex;
      flex-direction:column;
      gap:18px;
    }

    .about-copy{
      padding: 51px 0 0;
      max-width: 1020px;
    }

    .about h1{
      margin-bottom: 10px;
    }


    /* SECTION 3: WORK */
.work-title{
  margin-bottom: 40px;
}

.work-block{
  display:grid;
  grid-template-columns: 580px 1fr;
  column-gap: 0px;
  row-gap: 100px;
  align-items:start;
  overflow-x: hidden;
}

/* links: Überschrift */
.work-left-head{
  grid-column: 1;
  grid-row: 1;
  padding-top: 344px;
}

.work-left-head h3{
  margin:0;
  line-height:1;
}

/* rechts: wrapper für beide Bilder */
.work-images{
--frameW: 900px;
  position: relative;         /* <<< entscheidend */
  width: 130%;
  max-width:950px;
  padding-right: 0px;
  padding-bottom: 330px;      /* Platz reservieren für das überlappende Bild */
}

/* oberes Bild */
.work-right-hero{
  border: 1px solid var(--stroke);
        background: var(--card);
      box-shadow: var(--shadow);
  max-width:770px;
  margin-left: 0;
  transform: translateX(-145px);
}

.work-right-hero img{
  width:100%;
  display:block;
}

/* unteres Bild (überlappend + nach links rüberziehen) */
.work-left-image{
  margin-bottom: 600px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow);
  position: absolute;
  top: 65%;        /* vertikaler Versatz */
  left: -580px;    /* <<< schiebt es in die linke Spalte */
  max-width: 770px;
}

.work-left-image img{
  width: 100%;
  display: block;
}

/* Text rechts unten */
.work-right-text{
  grid-column: 2;
  grid-row: 2;
  max-width: 420px;
  margin-bottom: 50px;
  margin-left: 225px;
  transform: translateY(-410px);
}

.work h1 {
  margin-bottom: 10px;
}

/* PACKAGING */


/* Links: Text sitzt unter der Headline */
.pack-left-text{
  grid-column: 1;
  grid-row: 1;          /* unter der Headline */
  padding-top: 610px;    /* Abstand wie Screenshot */
  max-width: 360px;
}

.pack-right-hero{
  border: 1px solid var(--stroke);
        background: var(--card);
      box-shadow: var(--shadow);
  max-width:770px;
  margin-left: 0;
  transform: translateX(-145px);
}

.pack-right-hero img{
  width:100%;
  display:block;
}

.pack-left-head{
  grid-column: 1;
  grid-row: 1;
  padding-top: 344px;
}

.pack h2{
  margin: 0;
  line-height: 0.4;
}

.pack-left-text p{
  margin-top: 22px;
}

.pack-images{
--frameW: 900px;
  position: relative;         /* <<< entscheidend */
  width: 130%;
  max-width:950px;
  padding-right: 0px;
  padding-bottom: 30px;      /* Platz reservieren für das überlappende Bild */
}

/* Rechts unten: 3 Bilder nebeneinander */
.pack-thumbs{
  grid-column: 2;
  grid-row: 2;          /* unter dem großen Bild */
  display: grid;
  grid-template-columns: repeat(3, 235px);
  margin-top: 32px;
  gap: 32px;            /* Abstand zwischen den Thumbs */
  align-items: start;
  transform: translateX(-145px);
  margin-bottom: 5px;
}

/* Thumb Styling */
.pack-thumbs .thumb{
  margin: 0;
  border: 1px solid var(--stroke);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3; /* sorgt für gleiche Höhe */
}

.pack-thumbs .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* EDITORIAL SECTION */
.editorial-section{
  background:#000;
  padding: 0px 0 30px;
  overflow-x: hidden; /* wegen "editorial" offsets */
}

.editorial-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.85fr; /* links größer */
  grid-template-rows: auto auto;
  gap: 35px 38px; /* row-gap, column-gap */
  align-items:start;
}

/* Gemeinsames Styling für alle Bilder */
.ed-img{
  margin:0;
  border: 1px solid var(--stroke);
  background:#000;
  overflow:hidden;
}

.ed-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Positionen */
.ed-left-top{
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 16 / 10; /* großes Bild */
}

.ed-left-bottom{
  grid-column: 1;
  grid-row: 2;
  width: 62%;            /* kleiner, wie Screenshot */
  aspect-ratio: 16 / 9;
}

.ed-right-top{
  grid-column: 2;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  transform: translateX(-5px);
}

/* Headline + Text rechts unten */
.ed-copy{
  padding-top: 10px;
  max-width: 520px;
  transform: translateY(-166px);
}

.ed-copy h2{
  margin: 0 0 14px;
  line-height: 1.1;
  transform: translateX(-5px);
}

.ed-copy p{
  margin: 0;
  max-width: 520px;
  line-height: 1.9;
  transform: translateX(-270px);
}

/* BRAND IDENTITY SECTION */
.brand-section{
  margin-top: 0;
  background:#000;
  padding-top: 0px;
  padding-bottom: 30px;
  overflow-x: hidden;
}

.brand-grid{
  display:grid;
  grid-template-columns: 370px 1.2fr 1.35fr; /* links Text, mitte klein, rechts groß */
  gap: 35px;
  align-items: self-end; /* vertikal mittig */
}

/* Headline links */
.brand-title h2{
  margin:0;
  line-height: 1.1;
    transform: translateY(11px);
}

/* Rahmen + Bild */
.brand-img{
  margin:0;
  border: 1px solid var(--stroke);
  background:#000;
  overflow:hidden;
}

.brand-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Größen/Proportionen */
.brand-img-small{
  aspect-ratio: 14 / 10; /* wirkt wie Paper/Letter */
  max-width: 620px;
  justify-self: end;      /* steht eher Richtung großes Bild */
}

.brand-img-big{
  aspect-ratio: 14/ 10;
  max-width: 420px;
  justify-self: start;
}


/* UI / UX SECTION */
.ux-section{
  margin-top: 0;
  background:#000;
  padding-top: 0px;
  padding-bottom: 30px;
  overflow-x: hidden;
}

.ux-grid{
  display:grid;
  grid-template-columns: 400px 1.5fr 1fr; /* links Text, mitte klein, rechts groß */
  gap: 35px;
  align-items: self-end; /* vertikal mittig */
}

/* Headline rechts */
.ux-title h2{
  margin: 0;
  margin-left: 140px;
  line-height: 1.1;
      transform: translateY(11px);
}

/* Rahmen + Bild */
.ux-img{
  margin:0;
  border: 1px solid var(--stroke);
  background:#000;
  overflow:hidden;
}

.ux-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Größen/Proportionen */
.ux-img-small{
  aspect-ratio: 16 / 10; /* wirkt wie Paper/Letter */
  max-width: 1220px;
  justify-self: end;      /* steht eher Richtung großes Bild */
}

.ux-img-big{
  aspect-ratio: 14/ 10;
  max-width: 620px;
  justify-self: start;
}

.contact {
  margin-top: 450px;
  margin-bottom: 150px;
}

.contact-grid{
  display: grid;
  grid-template-columns: 695px 1fr; /* linker Abstand */
}

.contact-block{
  max-width: 520px;
}


.contact h2{
  margin-bottom: 0px;
}

.footer {
  align-content: center;
  justify-content: center;
  scale:80%;
}



    /* Responsive */
    @media (max-width: 860px){
      .about-grid{grid-template-columns: 1fr; }
      .portrait{max-width:320px}
      .work-caption{grid-template-columns: 1fr; }
      .hero{min-height:70vh}
    }

    .scroll-indicator{
      font-size: 32px;
      font-weight: 500;
      margin-top: 350px;
      color: var(--text);
      animation: bounce 1.8s infinite;
      opacity: .8;
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(10px);
      }
    }


    /* MOBILE FIRST FIX (bis ~768px) */
@media (max-width: 768px){

  .container{ padding: 0 30px; }

  /* Hero Background: 100% ist am Handy oft komisch */
  .hero::before{
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: center top 30%;
  }

  .hero .container{
    padding-top: 70px;
    padding-bottom: 10px;
  }

  .hero h2{ line-height: 1.1; margin-bottom: 280px; }
  .scroll-indicator{ margin-top: 50px; margin-bottom: 0px; font-size: 30px;}

  /* ABOUT */
  .about-grid{
    margin-top: 0px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .portrait{ max-width: 100%; }
  .about-copy{ padding: 0; }

  /* WORK: alles einspaltig, keine Overlaps, keine Transforms */
  .work-block{
    grid-template-columns: 1fr;
    row-gap: 0px;
  }

  .work-left-head{
    padding-top: 0;
    margin-bottom: 0px;
  }

  .work-images,
  .pack-images{
    width: 100%;
    max-width: 100%;
    padding-bottom: 0;
  }

  .work-right-hero{
    margin-top: 0;
    padding-top: 0;
    max-width: 100%;
    transform: none;
  }

  .work-left-image{
    position: static;
    top: auto;
    left: auto;
    margin: 16px 0 0;
    max-width: 100%;
  }

  .work-right-text{
    grid-column: auto;
    grid-row: auto;
    margin: 10px 0 0;
    max-width: 100%;
    transform: none;
  }

  /* PACK thumbs: statt 3 fixe 235px -> responsive grid */
  .pack-thumbs{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    transform: none;
    margin-top: 14px;
  }

  .pack-left-text{
    padding-top: 70px;    /* Abstand wie Screenshot */
    max-width: 360px;
    margin-bottom: 20px;
  }
    
  .pack-left-head{
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 20px;
  }

  /* EDITORIAL: einspaltig + Transforms entfernen */
  .editorial-grid{
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .ed-left-bottom{ width: 100%; }
  .ed-right-top{ transform: none; }

  .ed-copy{
    transform: none;
    padding-top: 0;
  }
  .ed-copy p{
    transform: none;
    line-height: 1.6;
  }

  /* BRAND */
  .brand-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .brand-img-small,
  .brand-img-big{
    max-width: 100%;
    justify-self: stretch;
  }
  .brand-title h2{ transform: none; }

  /* UX */
  .ux-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ux-title h2{
    margin-left: 0;
    transform: none;
  }
  .ux-img-small,
  .ux-img-big{
    max-width: 100%;
    justify-self: stretch;
  }

  /* CONTACT: margin-top 450px killen */
  .contact{
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .contact-grid{
    grid-template-columns: 1fr;
  }


  .line{
    margin-top: 24px;
    margin-bottom: 28px;
  }

@media (max-width: 768px){

  /* EDITORIAL: alles sichtbar, 1 Spalte, keine Offsets */
  .editorial-section{
    padding: 0 0 30px;
    overflow-x: visible;
  }

  .editorial-grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 14px;
  }

  .ed-left-top,
  .ed-left-bottom,
  .ed-right-top{
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    transform: none;
  }

  .ed-left-bottom{
    width: 100%;          /* wichtig: du hattest 62% */
    aspect-ratio: 16 / 9; /* kannst du lassen oder entfernen */
  }

  .ed-copy{
    transform: none;
    padding-top: 0;
    order: 99;            /* Text ans Ende, wenn du willst */
  }

  .ed-copy h2,
  .ed-copy p{
    transform: none;      /* du hattest translateX(-270px) */
    max-width: 100%;
    line-height: 1.6;
  }
  @media (max-width: 768px){

  /* TEXT ÜBER DEN BILDERN (Layout-Reihenfolge) */
  .ed-copy{
    order: -1;          /* ganz nach oben */
    transform: none;    /* alte Desktop-Offsets entfernen */
    padding-top: 0;
    margin-bottom: 12px;
  }

  /* Sicherheit: Bilder normalisieren */
  .ed-left-top,
  .ed-left-bottom,
  .ed-right-top{
    order: 0;
    transform: none;
    width: 100%;
  }

  .ed-copy h2{
    margin: 0 0 6px;
    line-height: 1.05;
  }

  .ed-copy p{
    margin: 0;
    line-height: 1.5;
  }
}
@media (max-width: 768px){

  /* UI/UX: Titel über den Bildern (nur Mobile) */
  .ux-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .ux-title{
    order: -1;            /* nach ganz oben */
  }

  .ux-title h2{
    margin-left: 0;       /* du hattest 140px */
    transform: none;      /* Desktop-Offset entfernen */
    margin-bottom: 6px;
  }

  .ux-img{
    order: 0;
    transform: none;
    width: 100%;
    justify-self: stretch;
  }

  .ux-img-big,
  .ux-img-small{
    max-width: 100%;
  }
}

}


}