/* ==========================================================================
   Maze & Friends – Case-Karten im PIXIT-Aufbau (Runde 14, ENTWURF, nicht live)
   Maße gemessen an pixit.design/de/design am 22.10.2026: Karte 4:5, randlos,
   3 Spalten, 1 px Fuge, Innenabstand 30 px, Label 13 px/0,14em, Name 32 px Versal,
   Outline-Pills, Abdunklung 20 % → 45 % beim Hover (0,4 s).
   Maze-Stil: Greycliff CF nur 300/400/700, Deep Space #0b0c0c, Cyan nur als Haarlinie.

   A) /projekte   → Seiten-Kopf-Code der Seite „Projekte“ (Klassen auf der Vorschau ermittelt:
                    .collection-list-4 > .collection-item-projekt > .div-block-71 >
                    [.div-block-64 > h2.subtitle.big] + [.card-fallstudien > a > .media-wrapper-copy >
                    img.full-image-copy-copy + .link-arrow] + [.content-wrapper-badges > .text-wrapper-copy > .badges])
   B) „Weitere Projekte“ auf Case-Seiten → Vorlagen-Kopf Cases, NACH case.css
                    (.cs .cs-more > a > img + div > b + span)
   KI-Hinweis, Pills in B und Pill-Ausgleich kommen aus karten.js (Seitenfuß).
   Nicht betroffen: Kundenstimmen-Karten auf /fallstudien (.cs-more.ks-karten).
   ========================================================================== */

:root{
  --kk-grund:#0b0c0c;
  --kk-cyan:#32C6F2;
  --kk-pad:32px;
  --kk-name:clamp(24px,2.1vw,34px);
  --kk-schrift:"Greycliff CF",Arial,sans-serif;
  /* Kartenverlauf: oben für Label + Name, unten für Pills */
  --kk-verlauf:
    linear-gradient(180deg,rgba(11,12,12,.80) 0%,rgba(11,12,12,.46) 17%,rgba(11,12,12,0) 38%),
    linear-gradient(0deg,rgba(11,12,12,.90) 0%,rgba(11,12,12,.50) 20%,rgba(11,12,12,0) 44%);
  --kk-korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- A) /projekte ---------------------------------------------- */

body{overflow-x:clip}                                   /* randloses Raster ohne Querscrollen */

.collection-list-4{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  width:100vw;margin-left:calc(50% - 50vw);             /* aus dem 1320er Container heraus, randlos */
  margin-top:clamp(32px,4vw,64px);
  background:var(--kk-linie,transparent);               /* Fuge = Seitenhintergrund (weiß wie PIXIT) */
}
.collection-list-4 .collection-item-projekt{padding:0;margin:0;background:var(--kk-grund)}
.collection-item-projekt .div-block-71{position:relative;padding:0;margin:0;height:100%;border:0}
.collection-item-projekt .card-fallstudien{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--kk-grund);isolation:isolate}
.collection-item-projekt .card-fallstudien>a{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;z-index:1;color:inherit;text-decoration:none}
.collection-item-projekt .card-fallstudien>a:focus-visible{outline:2px solid var(--kk-cyan);outline-offset:-4px}
.collection-item-projekt .media-wrapper-copy{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;overflow:hidden;border-radius:0}  /* Webflow setzt mobil height:250px */
.collection-item-projekt .full-image-copy-copy{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  aspect-ratio:auto;object-fit:cover;border-radius:0;
  filter:saturate(.9) contrast(1.03);
  transform:scale(1.001);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.collection-item-projekt .media-wrapper-copy::before{        /* Filmkorn gegen Banding, gleicht echte Fotos und KI an */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--kk-korn);background-size:160px;opacity:.07;mix-blend-mode:overlay;
}
.collection-item-projekt .media-wrapper-copy::after{          /* Lesbarkeit: Verlauf + Grundabdunklung wie PIXIT (20 %) */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--kk-verlauf);background-color:rgba(11,12,12,.16);
  transition:background-color .4s cubic-bezier(.42,.22,.42,1);
}

/* Kopf: Label „Cases“ · Cyan-Haarlinie · Name */
.collection-item-projekt .div-block-64{
  position:absolute;top:0;left:0;right:0;z-index:3;margin:0;border:0;
  padding:var(--kk-pad) calc(var(--kk-pad) + 34px) 0 var(--kk-pad);pointer-events:none;
}
.collection-item-projekt .div-block-64::before{
  content:"Cases";display:block;
  font:700 12px/1 var(--kk-schrift);letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.collection-item-projekt .subtitle.big{
  margin:0;color:#fff;font-family:var(--kk-schrift);font-weight:700;font-size:var(--kk-name);
  line-height:1.04;letter-spacing:.02em;text-transform:uppercase;
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6;overflow-wrap:break-word;text-wrap:balance;
  text-shadow:0 1px 18px rgba(11,12,12,.35);
}
.collection-item-projekt .subtitle.big::before{
  content:"";display:block;width:28px;height:1px;margin:12px 0 15px;background:var(--kk-cyan);
  transition:width .45s cubic-bezier(.42,.22,.42,1);
}

/* Fuß: Leistungen als Outline-Pills */
.collection-item-projekt .content-wrapper-badges{
  position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
  padding:0 var(--kk-pad) max(var(--kk-pad),30px);pointer-events:none;
}
.collection-item-projekt .text-wrapper-copy{display:flex;flex-wrap:wrap;gap:8px}
.kk-umbruch{flex-basis:100%;height:0;margin-top:-8px}       /* Zeilenwechsel aus karten.js (Pill-Ausgleich) */
.collection-item-projekt .badges{
  margin:0;display:inline-flex;align-items:center;
  font:700 12px/1 var(--kk-schrift);letter-spacing:.08em;text-transform:uppercase;color:#fff;
  padding:9px 13px 8px 14px;                                  /* rechts minus nachlaufende Sperrung */
  border:1px solid rgba(255,255,255,.72);border-radius:999px;
  background:rgba(11,12,12,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.collection-item-projekt .badges.w-dyn-bind-empty{display:none}
/* höchstens vier Pills je Karte (CMS hat bis zu neun Badge-Felder) */
.collection-item-projekt .badges:not(.w-dyn-bind-empty)~.badges:not(.w-dyn-bind-empty)~.badges:not(.w-dyn-bind-empty)~.badges:not(.w-dyn-bind-empty)~.badges:not(.w-dyn-bind-empty){display:none}

/* Pfeil oben rechts als stilles Zeichen „klickbar“ */
.collection-item-projekt .link-arrow{
  position:absolute;top:var(--kk-pad);right:var(--kk-pad);left:auto;bottom:auto;z-index:4;
  width:20px;height:20px;margin:0;opacity:.55;transform:rotate(-90deg);
  transition:opacity .4s,transform .4s cubic-bezier(.42,.22,.42,1);
}
.collection-item-projekt .link-arrow svg{width:20px;height:20px;display:block}

/* KI-Hinweis (Element setzt karten.js): klein, rechts unten am Kartenrand, unter der Pill-Zeile */
.collection-item-projekt .ki-hinweis,
.cs .cs-more:not(.ks-karten) a .ki-hinweis{
  position:absolute;right:14px;bottom:8px;z-index:4;pointer-events:none;
  font:400 12px/14px var(--kk-schrift);letter-spacing:.01em;color:rgba(255,255,255,.82);
}

/* Hover / Fokus */
.collection-item-projekt:hover .full-image-copy-copy,
.collection-item-projekt:focus-within .full-image-copy-copy{transform:scale(1.04)}
.collection-item-projekt:hover .media-wrapper-copy::after,
.collection-item-projekt:focus-within .media-wrapper-copy::after{background-color:rgba(11,12,12,.38)}
.collection-item-projekt:hover .subtitle.big::before,
.collection-item-projekt:focus-within .subtitle.big::before{width:72px}
.collection-item-projekt:hover .link-arrow{opacity:1;transform:rotate(-90deg) translate(-3px,3px)}

@media (max-width:991px){
  :root{--kk-pad:26px}
  .collection-list-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-item-projekt .subtitle.big{font-size:26px}
}
@media (max-width:767px){
  :root{--kk-pad:24px}
  .collection-list-4{grid-template-columns:minmax(0,1fr)}
  .collection-item-projekt .subtitle.big{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .collection-item-projekt .full-image-copy-copy,
  .collection-item-projekt .subtitle.big::before,
  .cs .cs-more:not(.ks-karten) a img{transition:none}
}

/* ---------- B) „Weitere Projekte“ (.cs-more) auf Case-Seiten -------------- */

.cs .cs-more:not(.ks-karten){
  grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.12);border-radius:18px;overflow:hidden;
}
.cs .cs-more:not(.ks-karten) a,
.cs .cs-more:not(.ks-karten) a:hover{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  border:0;border-radius:0;background:var(--kk-grund);box-shadow:none;transform:none;
}
.cs .cs-more:not(.ks-karten) a:focus-visible{outline:2px solid var(--kk-cyan);outline-offset:-4px}
.cs .cs-more:not(.ks-karten) a img{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  filter:saturate(.9) contrast(1.03);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.cs .cs-more:not(.ks-karten) a::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--kk-korn);background-size:160px;opacity:.07;mix-blend-mode:overlay}
.cs .cs-more:not(.ks-karten) a::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--kk-verlauf);background-color:rgba(11,12,12,.16);
  transition:background-color .4s cubic-bezier(.42,.22,.42,1)}
.cs .cs-more:not(.ks-karten) a>div{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;
  padding:28px 28px 32px;
}
.cs .cs-more:not(.ks-karten) a>div::before{
  content:"Cases";display:block;font:700 12px/1 var(--kk-schrift);letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.cs .cs-more:not(.ks-karten) a b{
  display:block;margin:0;color:#fff;font:700 clamp(20px,1.8vw,26px)/1.05 var(--kk-schrift);
  letter-spacing:.02em;text-transform:uppercase;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6;overflow-wrap:break-word;text-wrap:balance;
}
.cs .cs-more:not(.ks-karten) a b::before{content:"";display:block;width:28px;height:1px;margin:12px 0 14px;background:var(--kk-cyan);
  transition:width .45s cubic-bezier(.42,.22,.42,1)}
.cs .cs-more:not(.ks-karten) a>div>span{                      /* ohne Skript: Leistungen als ruhige Zeile */
  margin-top:auto;font:700 12px/1.5 var(--kk-schrift);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88);
}
.cs .cs-more:not(.ks-karten) a>div>span.kk-pills{display:flex;flex-wrap:wrap;gap:8px}
.cs .cs-more:not(.ks-karten) a span.kk-pill{
  display:inline-flex;align-items:center;font:700 12px/1 var(--kk-schrift);letter-spacing:.08em;text-transform:uppercase;color:#fff;
  padding:9px 13px 8px 14px;border:1px solid rgba(255,255,255,.72);border-radius:999px;
  background:rgba(11,12,12,.24);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.cs .cs-more:not(.ks-karten) a:hover img{transform:scale(1.04)}
.cs .cs-more:not(.ks-karten) a:hover::after{background-color:rgba(11,12,12,.38)}
.cs .cs-more:not(.ks-karten) a:hover b::before{width:72px}

@media (max-width:991px){
  .cs .cs-more:not(.ks-karten) a>div{padding:22px}
}
@media (max-width:767px){                       /* mobil: Wischreihe statt drei hoher Karten untereinander */
  .cs .cs-more:not(.ks-karten){
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;
    overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px;scrollbar-width:none;
  }
  .cs .cs-more:not(.ks-karten)::-webkit-scrollbar{display:none}
  .cs .cs-more:not(.ks-karten) a{scroll-snap-align:start}
  .cs .cs-more:not(.ks-karten) a>div{padding:24px 24px 30px}
  .cs .cs-more:not(.ks-karten) a b{font-size:24px}
}