/* merk.werk — Projektbereich.
   Gleiche Bahn wie der Rest der Website: 1240 px Inhaltsbreite, weißer Grund,
   großzügige Abstände. Alles unter #mw-projekte, damit nichts ausläuft. */
#mw-projekte{
  --gelb:#F7F775; --schwarz:#1B1B1B; --grau:#4A4A4A; --leise:#5E5E5E;
  --linie:#DADADA; --bone:#F2F2EF; --bahn:min(100%, clamp(1100px, 90vw, 1460px)); --luft:clamp(20px,5vw,40px);
  color:var(--schwarz); font-family:'Poppins',system-ui,sans-serif;
}
#mw-projekte *{box-sizing:border-box}
#mw-projekte h1,#mw-projekte h2{margin:0;padding:0}
#mw-projekte p{margin:0}
#mw-projekte img{display:block;max-width:100%}
#mw-projekte button{font:inherit}
#mw-projekte .exp{font-family:'Archivo Expanded','Poppins',sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:-1px;line-height:1.04}
#mw-projekte .punkt{color:var(--gelb)}
#mw-projekte .bahn{max-width:var(--bahn);margin:0 auto;width:100%}
#mw-projekte .kicker{font-family:'Archivo Expanded';font-weight:700;font-size:13.5px;
  text-transform:uppercase;letter-spacing:3px;color:var(--leise);margin-bottom:18px}

/* ---------- Auftakt */
#mw-projekte .auftakt{background:#fff;padding:clamp(70px,9vw,110px) var(--luft) clamp(50px,6vw,80px)}
#mw-projekte .auftakt .bahn{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:clamp(30px,5vw,60px)}
#mw-projekte .auftakt-links{flex:1 1 480px;min-width:0}
#mw-projekte .auftakt h1{font-size:clamp(38px,6.4vw,64px)}
#mw-projekte .auftakt-rechts{flex:0 1 380px;min-width:0;padding-bottom:6px}
#mw-projekte .auftakt-rechts p{font-size:16px;line-height:1.75;color:var(--grau);font-weight:300}
#mw-projekte .zaehler{font-size:13.5px;color:var(--leise);letter-spacing:1.2px;margin-top:16px}

/* ---------- Kundenband */
#mw-projekte .band{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  overflow:hidden;padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
#mw-projekte .band-spur{display:flex;gap:54px;width:max-content;animation:mwLauf 36s linear infinite}
#mw-projekte .band:hover .band-spur{animation-play-state:paused}
@keyframes mwLauf{to{transform:translateX(-50%)}}
#mw-projekte .band-spur span{font-family:'Archivo Expanded';font-weight:800;font-size:13.5px;
  letter-spacing:2px;text-transform:uppercase;color:var(--leise);white-space:nowrap}
#mw-projekte .band-spur span::after{content:'·';margin-left:54px;color:var(--gelb)}

/* ---------- Filter */
#mw-projekte .filter-huelle{background:#fff;padding:clamp(40px,5vw,60px) var(--luft) 0}
#mw-projekte .filter{display:flex;flex-wrap:wrap;gap:10px}
#mw-projekte .filter button{font-family:'Archivo Expanded';font-weight:800;font-size:13.5px;
  letter-spacing:1.4px;text-transform:uppercase;padding:12px 20px;border:1px solid var(--linie);
  background:transparent;color:var(--leise);cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
#mw-projekte .filter button:hover{color:var(--schwarz);border-color:var(--schwarz)}
#mw-projekte .filter button[aria-pressed="true"]{background:var(--schwarz);border-color:var(--schwarz);color:#fff}

/* ---------- Projektzeilen */
#mw-projekte .liste{background:#fff}
#mw-projekte .projekt{padding:clamp(60px,7.5vw,96px) var(--luft);
  opacity:0;transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
#mw-projekte .projekt.sichtbar{opacity:1;transform:none}
#mw-projekte .projekt.aus{display:none}
#mw-projekte .projekt:nth-of-type(even){background:var(--bone)}
#mw-projekte .projekt .bahn{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(26px,4vw,60px);align-items:center}
#mw-projekte .projekt:nth-of-type(even) .galerie{order:2}
#mw-projekte .projekt:nth-of-type(even) .bahn{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr)}
@media(max-width:900px){
  #mw-projekte .projekt .bahn{grid-template-columns:minmax(0,1fr);gap:22px}
  #mw-projekte .projekt:nth-of-type(even) .galerie{order:0}
  #mw-projekte .projekt:nth-of-type(even) .bahn{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Galerie */
#mw-projekte .galerie{position:relative;width:100%;max-width:100%;overflow:hidden;
  background:#EDEDEA;aspect-ratio:16/10;touch-action:pan-y}
#mw-projekte .galerie:focus-visible{outline:2px solid var(--schwarz);outline-offset:3px}
#mw-projekte .spur{display:flex;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
#mw-projekte .spur figure{flex:0 0 100%;width:100%;min-width:0;height:100%;margin:0;overflow:hidden}
#mw-projekte .spur img{width:100%;height:100%;object-fit:cover}
#mw-projekte .pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:0;cursor:pointer;background:rgba(27,27,27,.72);color:#fff;
  font-size:18px;line-height:1;opacity:0;transition:opacity .3s,background .25s,color .25s}
#mw-projekte .galerie:hover .pfeil,#mw-projekte .galerie:focus-within .pfeil{opacity:1}
#mw-projekte .pfeil:hover{background:var(--gelb);color:var(--schwarz)}
#mw-projekte .pfeil.li{left:0}
#mw-projekte .pfeil.re{right:0}
@media(hover:none){#mw-projekte .pfeil{opacity:1}}
#mw-projekte .punkte{position:absolute;left:0;right:0;bottom:13px;z-index:3;display:flex;
  justify-content:center;gap:6px;padding:0 12px;flex-wrap:wrap}
#mw-projekte .punkte button{width:7px;height:7px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(27,27,27,.18);
  transition:background .3s,width .3s}
#mw-projekte .punkte button[aria-current="true"]{background:var(--gelb);width:20px}
#mw-projekte .stand{position:absolute;left:0;top:0;z-index:3;background:var(--gelb);color:var(--schwarz);
  font-family:'Archivo Expanded';font-weight:800;font-size:13.5px;letter-spacing:1.2px;padding:8px 13px}

/* ---------- Textspalte */
#mw-projekte .info .nr{font-size:13.5px;color:var(--leise);letter-spacing:1.4px;margin-bottom:12px}
#mw-projekte .info h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px;overflow-wrap:break-word}
#mw-projekte .info .art{font-family:'Poppins';font-size:13.5px;color:var(--leise);letter-spacing:1.4px;
  text-transform:uppercase;font-weight:600;margin-bottom:16px}
#mw-projekte .info p{font-size:15px;line-height:1.75;color:var(--grau);font-weight:300;max-width:48ch}
#mw-projekte .streifen{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
#mw-projekte .streifen button{width:66px;height:50px;padding:0;border:0;background:#EDEDEA;
  overflow:hidden;cursor:pointer;opacity:.45;outline:1px solid transparent;outline-offset:2px;
  transition:opacity .3s,outline-color .3s}
#mw-projekte .streifen button:hover{opacity:.85}
#mw-projekte .streifen button[aria-current="true"]{opacity:1;outline-color:var(--schwarz)}
#mw-projekte .streifen img{width:100%;height:100%;object-fit:cover}
#mw-projekte .leer{display:grid;place-items:center;width:100%;height:100%;
  background:repeating-linear-gradient(135deg,#EDEDEA 0 12px,#E6E6E2 12px 24px);
  color:#8A8A8A;font-size:13.5px;letter-spacing:1px;text-align:center;padding:20px}

/* ---------- Abschluss */
#mw-projekte .ende{background:var(--schwarz);padding:clamp(70px,9vw,110px) var(--luft)}
#mw-projekte .ende .bahn{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-start;gap:36px}
#mw-projekte .ende .kicker{color:var(--gelb)}
#mw-projekte .ende h2{font-size:clamp(26px,4.2vw,44px);color:#fff}
#mw-projekte .ende p{font-size:15px;line-height:1.75;color:#C4C4C4;font-weight:300;max-width:46ch;margin-top:18px}
#mw-projekte .knopf{display:inline-block;font-family:'Archivo Expanded';font-weight:800;
  font-size:13.5px;letter-spacing:1.6px;text-transform:uppercase;padding:17px 34px;
  background:var(--gelb);color:var(--schwarz);border:1px solid var(--gelb);text-decoration:none;
  margin-top:8px;transition:background .25s,color .25s}
#mw-projekte .knopf:hover{background:transparent;color:var(--gelb)}

@media (prefers-reduced-motion: reduce){
  #mw-projekte *{animation:none !important}
  #mw-projekte .spur{transition:none}
  #mw-projekte .projekt{opacity:1;transform:none}
}