/* -------------------------------------------------------
   DIWA – Werkstatt
   Seitenspezifische Ergänzungen zu style.css
   ------------------------------------------------------- */

/* Hero -------------------------------------------------- */

.cover-werkstatt .cover-photo img{
  object-position:center 50%;
}

.cover-werkstatt .cover-wash{
  background:
    linear-gradient(
      90deg,
      rgba(10,20,24,.74) 0%,
      rgba(10,20,24,.48) 34%,
      rgba(10,20,24,.10) 62%,
      rgba(10,20,24,.02) 100%
    ),
    linear-gradient(
      180deg,
      rgba(10,20,24,.16),
      rgba(10,20,24,.02) 60%,
      rgba(10,20,24,.16)
    );
}

.cover-werkstatt .site-head,
.cover-werkstatt .hero-copy{
  color:#f3f0ea;
}

.cover-werkstatt .main-nav .contact-link{
  border-color:rgba(243,240,234,.70);
}

.cover-werkstatt .hero-copy{
  align-self:center;
  position:relative;
  top:-64px;
}

.cover-werkstatt .hero-copy h1{
  width:auto;
  max-width:720px;
  font-size:clamp(48px,4.6vw,82px);
}

.cover-werkstatt .hero-copy h1 em{
  color:#b8c8c2;
}

.cover-werkstatt .hero-copy p{
  max-width:600px;
}

.cover-werkstatt .short-rule{
  background:#b8c8c2;
}

.cover-werkstatt .text-link{
  border-color:#f3f0ea;
}


/* Grundlayout ------------------------------------------- */

.ws-inner{
  width:min(calc(100% - 9vw),1280px);
  margin:0 auto;
}

.ws-section,
.ws-band,
.ws-dark,
.ws-hosting{
  padding:clamp(100px,10vw,155px) 0;
}

.ws-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);
  gap:10vw;
  align-items:start;
}

.ws-grid h2,
.ws-finale h2{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(46px,5vw,76px);
  line-height:1.05;
  letter-spacing:-.028em;
}

.ws-copy{
  max-width:590px;
  padding-top:42px;
}

.ws-copy p{
  margin:0 0 24px;
  font-size:18px;
}

.ws-copy strong{
  font-weight:600;
}

.ws-statement{
  max-width:1280px;
  padding-top:clamp(90px,10vw,150px);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(34px,4.3vw,66px);
  line-height:1.12;
  letter-spacing:-.025em;
}

.ws-note{
  margin-top:48px !important;
  padding-top:30px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(24px,2.2vw,34px) !important;
  line-height:1.32 !important;
}


/* Farbflächen ------------------------------------------- */

.ws-band{
  background:#d9e2dd;
}

.ws-band .ws-note{
  border-top:1px solid rgba(16,38,45,.28);
}

.ws-dark{
  color:#f3f0ea;
  background:#10262d;
}

.ws-dark .eyebrow{
  color:#b8c8c2;
  opacity:1;
}

.ws-dark .ws-note{
  color:#c8d5d1;
  border-top:1px solid rgba(243,240,234,.25);
}

.ws-hosting{
  background:#e8e4dc;
}

.ws-hosting .ws-note{
  border-top:1px solid var(--line);
}

.ws-small{
  margin-top:44px !important;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:14px !important;
  line-height:1.55 !important;
  opacity:.68;
}


/* Abschluss --------------------------------------------- */

.ws-finale{
  padding:clamp(120px,13vw,200px) 0;
  text-align:left;
}

.ws-finale h2{
  max-width:1000px;
  margin:0 0 45px;
  font-size:clamp(58px,7vw,108px);
}

.ws-finale>div>p:not(.eyebrow){
  max-width:650px;
  margin:0 0 40px;
  font-size:20px;
}


/* Jasmin 8 + Auffindbarkeit ----------------------------- */

.ws-inline-link{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-top:10px;
  padding-bottom:5px;
  border-bottom:1px solid currentColor;
  color:inherit;
  text-decoration:none;
  font-weight:600;
}

.ws-inline-link span{
  transition:transform .2s ease;
}

.ws-inline-link:hover span{
  transform:translateX(4px);
}

.ws-discovery{
  padding:clamp(100px,10vw,155px) 0;
  background:#f3f0ea;
}

.ws-discovery .ws-note{
  border-top:1px solid var(--line);
}

.ws-terms{
  display:flex;
  flex-wrap:wrap;
  gap:9px 18px;
  margin-top:38px !important;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:13px !important;
  line-height:1.4 !important;
  letter-spacing:.045em;
  text-transform:uppercase;
  opacity:.72;
}

.ws-terms span:not(:last-child)::after{
  content:" ·";
  padding-left:18px;
}


/* Tablet / Mobile --------------------------------------- */

@media(max-width:960px){

  .cover-werkstatt .cover-photo{
    background:#15272c;
  }

  .cover-werkstatt .cover-photo picture{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  /* Globalen Bild-Overlay-Streifen im Mobile deaktivieren */
  .cover-werkstatt .cover-photo picture::after{
    display:none;
  }

  .cover-werkstatt .cover-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 48%;
  }

  .cover-werkstatt .cover-wash{
    background:
      linear-gradient(
        180deg,
        rgba(10,20,24,.68) 0%,
        rgba(10,20,24,.24) 55%,
        rgba(10,20,24,.50) 100%
      );
  }

  /* Mobile Hero: Desktop-Position zurücksetzen und Text deutlich höher */
  .cover-werkstatt .hero-copy{
    margin-top:0;
    top:0;
    transform:translateY(-84px);
  }

  .cover-werkstatt .hero-copy h1{
    max-width:90vw;
    font-size:clamp(42px,9.8vw,68px);
  }

  /* Hamburger auf dunklem Hero hell */
  .cover-werkstatt .menu-toggle span{
    background:#f3f0ea;
  }

  /* Geöffnete Navigation auf hellem Panel dunkel */
  .cover-werkstatt .main-nav,
  .cover-werkstatt .main-nav a{
    color:var(--ink);
  }

  /* Hamburger bei geöffnetem Menü wieder dunkel */
  .nav-open .cover-werkstatt .menu-toggle span{
    background:var(--ink);
  }

  .ws-grid{
    grid-template-columns:1fr;
    gap:35px;
  }

  .ws-copy{
    max-width:720px;
    padding-top:0;
  }

  .ws-section,
  .ws-band,
  .ws-dark,
  .ws-hosting{
    padding:90px 0;
  }

  .ws-statement{
    padding-top:80px;
  }

  .ws-discovery{
    padding:90px 0;
  }
}


/* Kleine Phones ----------------------------------------- */

@media(max-width:520px){

  .ws-inner{
    width:calc(100% - 40px);
  }

  .ws-grid h2{
    font-size:clamp(42px,12vw,58px);
  }

  .ws-copy p{
    font-size:16px;
  }

  .ws-note{
    font-size:25px !important;
  }

  .ws-finale h2{
    font-size:clamp(52px,15vw,76px);
  }

  .ws-terms{
    gap:8px 12px;
  }

  .ws-terms span:not(:last-child)::after{
    padding-left:12px;
  }

  /* Auf Phones etwas weniger Hub, damit Header und Hero nicht kollidieren */
  .cover-werkstatt .hero-copy{
    transform:translateY(-48px);
  }

  .cover-werkstatt .hero-copy h1{
    font-size:clamp(38px,11vw,52px);
    line-height:1.01;
  }

  .cover-werkstatt .hero-copy p{
    font-size:14px;
    line-height:1.42;
  }
}


/* Sehr kleine Phones ------------------------------------ */
@media(max-width:380px){

  .cover-werkstatt .hero-copy{
    transform:translateY(-44px);
  }

  .cover-werkstatt .hero-copy h1{
    font-size:clamp(35px,10.8vw,42px);
    line-height:1;
  }

  .cover-werkstatt .hero-copy p{
    font-size:13px;
    line-height:1.35;
  }

  .cover-werkstatt .short-rule{
    margin-top:18px;
    margin-bottom:16px;
  }
}