/* =========================================================================
   FOKALiS – nur Seite „Referenzen“
   Leitidee „Szene 08 · Die Sichtung“ (Kontaktabzug + Lupe + Fettstift):
   1. Seitenkopf: Kontaktabzug mit drei Filmstreifen voller Kundennamen. Eine Lupe
      wandert ruhig von Markierung zu Markierung, darunter wird es scharf.
      Die goldenen Kreise markieren die Kunden, deren Stimmen darunter stehen.
   2. Kundenstimmen wie Kritiken auf einem Filmplakat (ohne Preise, ohne Laurels).
   3. Archiv: Kunden alphabetisch, mit Logo (einfarbig Anthrazit, assets/img/logos/)
      oder als Wortmarke in Schrift, solange kein Logo da ist.
   4. KI in der Praxis: erstes Fallbeispiel (eigenes CMS) mit Editor-Skizze in CSS,
      danach 5. eigene Software.
   Bewegungswerte nach DESIGN-KONZEPT.md (1,4–2,4 s, ruhige Kurven, kleine Wege).
   ========================================================================= */

/* aktuelle Seite in der Fußzeile (Liste „Leistungen“) */
.footer-col a[aria-current="page"]{color:var(--white)}
.footer-col a[aria-current="page"]::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-right:8px;vertical-align:2px}

/* ---------- 1. KONTAKTABZUG MIT LUPE ---------------------------------- */
@property --lx{syntax:"<length-percentage>";inherits:true;initial-value:50%}
@property --ly{syntax:"<length-percentage>";inherits:true;initial-value:50%}
.ks{margin:0;align-self:end;min-width:0;border-radius:var(--radius);overflow:hidden;
  background:rgba(10,10,10,.8);border:1px solid var(--line-dark);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.ks-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 20px;border-bottom:1px solid var(--line-dark);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.ks-note{flex:none;padding:4px 9px;border:1px solid rgba(255,255,255,.25);border-radius:999px;letter-spacing:.16em}

.ks-stage{--lx:50%;--ly:50%;--lr:64px;position:relative;height:clamp(230px,38vh,380px);overflow:hidden;background:#0d0d0d;
  transition:--lx 2.4s var(--ease-cine),--ly 2.4s var(--ease-cine)}
.ks-sheet{position:absolute;inset:14px 12px;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
/* Filmstreifen mit Perforation oben und unten */
.ks-strip{--hole:linear-gradient(90deg,transparent 0 5px,#2a2a2a 5px 12px,transparent 12px);
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:13px 6px;background:#030303;border-radius:2px}
.ks-strip::before,.ks-strip::after{content:"";position:absolute;left:0;right:0;height:5px;background:var(--hole) 0 0/17px 5px repeat-x}
.ks-strip::before{top:4px}
.ks-strip::after{bottom:4px}
.ks-strip:nth-child(2){transform:translateX(-9px)}
.ks-strip:nth-child(3){transform:translateX(5px)}
.ks-frame{position:relative;display:flex;align-items:flex-end;min-width:0;padding:6px 7px;border-radius:2px;
  background:radial-gradient(120% 90% at 30% 20%,#353535 0,#1d1d1d 70%);overflow:hidden}
.ks-frame i{position:absolute;left:6px;top:4px;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.12em;color:#7a7a7a}
.ks-frame b{display:block;font-family:var(--font-head);font-weight:300;font-size:clamp(11px,.92vw,14.5px);line-height:1.12;color:#ECECEC;
  text-wrap:balance;hyphens:manual}

/* Lupe: ab JS ist der Bogen außerhalb unscharf, unter der Lupe liegt eine scharfe Kopie */
.ks-loupe{display:none}
.ks-live .ks-sheet{filter:blur(1.4px) brightness(.62)}
.ks-live .ks-sheet--sharp{filter:none;clip-path:circle(var(--lr) at var(--lx) var(--ly))}
.ks-live .ks-sheet--sharp .ks-frame{background:radial-gradient(120% 90% at 30% 20%,#454545 0,#262626 70%)}
.ks-live .ks-loupe{display:block;position:absolute;left:var(--lx);top:var(--ly);width:calc(var(--lr) * 2);height:calc(var(--lr) * 2);
  margin:calc(var(--lr) * -1) 0 0 calc(var(--lr) * -1);border-radius:50%;pointer-events:none;
  border:1px solid rgba(236,176,20,.75);box-shadow:0 0 0 7px rgba(10,10,10,.35),0 18px 40px rgba(0,0,0,.45);
  background:radial-gradient(circle,transparent 62%,rgba(255,255,255,.05) 100%)}
/* Skala auf dem Lupenrand (wie die Blende im Logo) */
.ks-live .ks-loupe::before{content:"";position:absolute;inset:4px;border-radius:50%;
  background:repeating-conic-gradient(rgba(236,176,20,.55) 0 1.2deg,transparent 1.2deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(circle,transparent calc(100% - 6px),#000 calc(100% - 5px))}
.ks-live .ks-loupe::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--gold);opacity:.8}

/* Fettstift-Kreis (gold), zeichnet sich einmal, wenn die Lupe ankommt */
.ks-mark{position:absolute;inset:-6px -4px;width:calc(100% + 8px);height:calc(100% + 12px);max-width:none;pointer-events:none;overflow:visible}
.ks-mark path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-glide)}
.ks-frame.is-marked .ks-mark path{stroke-dashoffset:0}
.ks-sheet:not(.ks-sheet--sharp) .ks-mark{opacity:.55}

.ks-foot{display:flex;align-items:baseline;gap:14px;padding:12px 20px 13px;border-top:1px solid var(--line-dark);font-size:13px;color:var(--on-dark-muted);min-height:46px}
.ks-foot>span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ks-foot>span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;border:1.5px solid var(--gold);vertical-align:0}
.ks-foot b{font-family:var(--font-head);font-weight:300;font-size:18px;line-height:1.2;color:var(--white);transition:opacity .8s var(--ease-glide)}
.ks-foot b.is-fading{opacity:0}

@media (max-width:1020px){.ks{max-width:560px;width:100%}}
@media (min-width:1021px) and (max-height:760px){
  .ks-stage{height:clamp(200px,34vh,300px)}
  .ks-head{padding:10px 18px}
  .ks-sheet{inset:10px 10px;gap:8px}
  .ks-strip{padding:11px 5px}
  .ks-foot{padding:9px 18px 10px;min-height:40px}
  .ks-foot b{font-size:16px}
}
@media (max-width:760px){
  .ks-stage{height:236px}
  .ks-head{padding:12px 16px}
  .ks-foot{padding:10px 16px 11px}
  .ks-foot b{font-size:16px}
}
@media (max-width:520px){
  .ks-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ks-frame:nth-child(4){display:none}
  .ks-frame b{font-size:12px}
}

/* ---------- 2. KUNDENSTIMMEN ------------------------------------------ */
.voices-section{overflow:hidden}
.voices-section .drift-word{position:absolute;top:clamp(24px,4vw,56px);left:0}
.voices-inner{position:relative;padding-top:clamp(40px,5vw,90px)}
.voices{list-style:none;counter-reset:voice;border-top:1px solid var(--line-dark)}
.voice{counter-increment:voice;position:relative;border-bottom:1px solid var(--line-dark)}
.voice::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s var(--ease-glide)}
.voice:hover::after,.voice:focus-within::after,.voice.is-target::after{transform:none}
.voice figure{margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,7fr) minmax(0,3fr);gap:20px clamp(28px,3.4vw,64px);align-items:start;
  padding-block:clamp(32px,3.6vw,56px)}
.voice figure::before{content:counter(voice,decimal-leading-zero);font-family:var(--font-head);font-weight:200;font-size:clamp(44px,4.4vw,72px);line-height:.85;color:var(--on-dark-muted)}
.voice blockquote{position:relative;margin:0;font-family:var(--font-head);font-weight:300;font-size:clamp(26px,3.2vw,50px);line-height:1.16;color:var(--white);text-wrap:balance}
.voice blockquote::before{content:"„";position:absolute;right:100%;margin-right:.08em;color:var(--gold)}
.voice blockquote::after{content:"“";color:var(--gold)}
.voice figcaption{display:grid;gap:4px;padding-top:.6em;border-left:1px solid var(--line-dark);padding-left:clamp(18px,1.8vw,28px)}
.voice-name{font-weight:600;color:var(--white)}
.voice-firm{font-size:14px;line-height:1.5;color:var(--on-dark-muted)}
@media (max-width:900px){
  .voice figure{grid-template-columns:minmax(0,1fr);gap:18px}
  .voice figure::before{font-size:40px}
  .voice blockquote{padding-left:.5em}
  .voice blockquote::before{right:auto;left:0;margin:0}
  .voice figcaption{padding-top:0}
}

/* ---------- 3. ARCHIV: Kunden als Wortmarken ------------------------- */
.archive-intro{display:grid;gap:28px;justify-items:start}
.archive-stats{margin:0;display:flex;flex-wrap:wrap;gap:16px clamp(32px,4vw,64px)}
.archive-stats>div{display:flex;flex-direction:column-reverse;gap:6px}
.archive-stats dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.archive-stats dd{margin:0;font-family:var(--font-head);font-weight:200;font-size:clamp(52px,5vw,84px);line-height:.85;color:var(--anth)}
.archive-plus{color:var(--gold);font-weight:300}

@property --wall-c{syntax:"<color>";inherits:true;initial-value:rgba(34,35,35,0)}
.wall{list-style:none;counter-reset:wall;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.wall-item{--wall-c:rgba(34,35,35,0);counter-increment:wall;position:relative;container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  min-height:clamp(118px,9.4vw,150px);padding:16px clamp(16px,1.5vw,24px) clamp(18px,1.6vw,24px);
  border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  transition:--wall-c 1.4s var(--ease-glide),background-color 1.4s var(--ease-glide)}
.wall-item::before{content:"Nr. " counter(wall,decimal-leading-zero);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8A8A8A}
/* Sucher-Ecken erscheinen beim Darüberfahren */
.wall-item::after{content:"";position:absolute;inset:8px;pointer-events:none;--c:var(--wall-c);--l:16px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.wall-item:hover{--wall-c:var(--anth);background:var(--paper)}
/* Logo statt Wortmarke: nur sichtbar, wenn eine Datei gesetzt ist. Einfarbige und farbige Fassung liegen
   übereinander (gleiche Grid-Zelle, unten links). Optische Größe gleicht referenzen.js über --logo-k an
   (breite Logos flacher, kompakte höher). grayscale + multiply beruhigen neue, bunte Uploads mit weißem Grund. */
.wall-mark{display:grid;align-self:flex-start;max-width:100%}
.wall-logo{grid-area:1/1;align-self:end;justify-self:start;display:block;width:auto;max-width:100%;
  height:calc(clamp(42px,31cqi,72px) * var(--logo-k,.66));object-fit:contain;object-position:left bottom;
  filter:grayscale(1);mix-blend-mode:multiply;opacity:.86;transition:opacity 1.8s var(--ease-glide),filter 1.8s var(--ease-glide)}
.wall-logo--farbe{filter:none;opacity:0}
.wall-logo:not([src]),.wall-logo[src=""]{display:none}
.wall-mark:not(:has(.wall-logo[src]:not([src=""]))){display:none}
.wall-item:has(.wall-logo:not(.wall-logo--farbe)[src]:not([src=""])) .wall-name{display:none}
/* Farbe beim Darüberfahren (nur echte Maus, Touch bleibt einfarbig) und bei Tastatur-Fokus */
@media (hover:hover){
  .wall-item:hover .wall-logo{filter:none;opacity:1}
  .wall-item:hover .wall-mark:has(.wall-logo--farbe[src]:not([src=""])) .wall-logo:not(.wall-logo--farbe){opacity:0}
}
.wall-item:has(:focus-visible) .wall-logo{filter:none;opacity:1}
.wall-item:has(:focus-visible) .wall-mark:has(.wall-logo--farbe[src]:not([src=""])) .wall-logo:not(.wall-logo--farbe){opacity:0}
.wall-name{font-family:var(--font-head);font-weight:300;font-size:clamp(14px,10.5cqi,27px);line-height:1.12;letter-spacing:.005em;color:var(--anth);text-wrap:balance}
/* Kunden mit Stimme (setzt referenzen.js): goldener Punkt + Sprungmarke */
.wall-voice{position:absolute;right:clamp(14px,1.4vw,22px);top:12px;display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--on-light-muted);transition:color .5s}
.wall-voice::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold)}
.wall-voice:hover{color:var(--anth)}
.wall-item.has-voice{--wall-c:rgba(236,176,20,.9)}
.wall-item.has-voice:hover{--wall-c:var(--anth)}
.archive-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px;margin-top:clamp(28px,3vw,44px);font-size:15px;color:var(--on-light-muted)}
.archive-foot p{max-width:62ch}
.archive-foot .link-arrow{color:var(--anth)}
@media (max-width:1199px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall-item{min-height:104px;padding:13px 12px 15px}
  .wall-name{font-size:clamp(13px,11.5cqi,20px)}
  .wall-voice{right:0;top:0;width:44px;height:44px;justify-content:center;font-size:0;gap:0}
}

/* ---------- 4. KI IN DER PRAXIS -------------------------------------- */
.cases-stage{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(20px,2.4vw,36px);align-items:stretch}
.cases{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);align-items:stretch}
.cases:has(>.case:only-child){grid-template-columns:minmax(0,1fr)}
/* ab zwei Fallbeispielen: Skizze weg, Karten nebeneinander über die volle Breite */
.cases-stage:has(.case+.case){grid-template-columns:minmax(0,1fr)}
.cases-stage:has(.case+.case) .cases-visual{display:none}
/* Kartenreihen: Klappen-Streifen, Bild, Kopf, Titel, Raster, Hinweis. Der Hinweis sitzt immer in der letzten Reihe (unten bündig). */
.cases .case{grid-template-rows:auto auto auto auto 1fr auto;background:#1A1B1B}
.cases .case-grid{align-content:start}
/* Fußzeile (Hinweis + optionaler Link) immer in der letzten Reihe: unten bündig, Hinweise nebeneinander auf einer Linie, Link darunter */
.cases .case-foot{grid-row:-2;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.case-link{color:var(--white)}
.case-link[href=""],.case-link:not([href]),.case-link:has([data-edit-label]:empty){display:none}
/* ab zwei Karten: gemeinsame Reihen (subgrid), damit Titel, Raster und Hinweis nebeneinander auf einer Linie stehen */
.cases:has(>.case+.case)>.case{grid-row:span 6;grid-template-rows:subgrid;row-gap:22px}
/* Kartenbild: randlos direkt unter dem Klappen-Streifen; bei nur einer Karte übernimmt die Skizze daneben diese Rolle */
.case-img{position:relative;margin:-22px calc(clamp(24px,2.6vw,40px) * -1) 0;aspect-ratio:3/2;overflow:hidden;background:#111;border-bottom:1px solid var(--line-dark)}
.case-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.case-img-label{position:absolute;right:14px;top:14px;padding:5px 10px;border-radius:999px;background:rgba(18,18,18,.82);color:var(--on-dark);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.case-img-label:empty{display:none}
.cases:has(>.case:only-child) .case-img,.case-img:has(img:not([src])),.case-img:has(img[src=""]){display:none}
/* zwei Karten nebeneinander auf schmalen Laptops: Bezeichnung über den Text, damit die Textspalte nicht zu schmal wird */
@media (min-width:1021px) and (max-width:1300px){.cases:has(>.case+.case) .case-grid>div{grid-template-columns:1fr;gap:6px}}
.cases-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px;margin-top:clamp(28px,3vw,44px);font-size:15px;color:var(--on-dark-muted)}
.cases-foot p{max-width:62ch}
.cases-foot .link-arrow{color:var(--on-dark)}
.cases-foot .link-arrow:hover{color:var(--gold)}

/* Editor-Skizze: ein helles Browserfenster mit einem markierten Textfeld (Andeutung, kein Screenshot) */
.cases-visual{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.cv-window{flex:1;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:var(--white);color:var(--anth);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.cv-bar{display:flex;align-items:center;gap:16px;padding:10px 14px;background:#E9E9E7}
.cv-dots{display:flex;gap:6px}
.cv-dots i{width:8px;height:8px;border-radius:50%;background:#C4C4C2}
.cv-url{flex:1;max-width:280px;padding:4px 12px;border-radius:999px;background:var(--white);font-size:11px;color:var(--on-light-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-page{flex:1;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,2.6vw,40px)}
.cv-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.cv-title{font-family:var(--font-head);font-weight:300;font-size:clamp(28px,2.7vw,42px);line-height:1.05;text-transform:uppercase;margin-top:-6px}
.cv-field{position:relative;display:block;margin-top:8px;padding:16px 16px 14px;border:1px dashed var(--gold);border-radius:var(--radius);background:rgba(236,176,20,.06)}
.cv-flag{position:absolute;left:12px;top:-10px;padding:4px 9px;border-radius:999px;background:var(--anth);color:var(--white);
  font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.cv-text{display:block;font-size:14px;line-height:1.6;color:#3A3A3A}
.cv-caret{display:inline-block;width:1.5px;height:1.15em;margin-left:2px;vertical-align:-3px;background:var(--anth);animation:cv-blink 1.2s steps(1) infinite}
@keyframes cv-blink{50%{opacity:0}}
.cv-lines{display:grid;gap:9px}
.cv-lines i{display:block;height:7px;border-radius:4px;background:#ECECEA}
.cv-lines i:nth-child(2){width:88%}
.cv-lines i:nth-child(3){width:58%}
.cv-book{display:grid;gap:10px;margin-top:6px;padding:14px 16px;border:1px solid var(--line-light);border-radius:var(--radius)}
.cv-book-label{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-muted)}
.cv-slots{display:flex;flex-wrap:wrap;gap:8px}
.cv-slots i{font-style:normal;font-size:12.5px;padding:6px 12px;border:1px solid var(--line-light);border-radius:999px;color:var(--anth)}
.cv-slots i.is-on{background:var(--anth);border-color:var(--anth);color:var(--white)}
.cv-legal{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:14px;border-top:1px solid var(--line-light);font-size:12px;color:var(--on-light-muted)}
.cv-legal b{font-weight:600;color:var(--anth)}
.cv-legal em{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:8px}
.cv-legal em::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.cv-caption{font-size:13px;color:var(--on-dark-muted)}
@media (max-width:1020px){
  .cases-stage{grid-template-columns:minmax(0,1fr)}
  .cases{grid-template-columns:1fr}
  .cases-visual{max-width:620px}
}
@media (max-width:520px){
  .cv-lines{display:none}
  .cv-legal em{margin-left:0}
}

/* ---------- 5. SELBST ENTWICKELT -------------------------------------- */
.made-intro{display:grid;gap:24px;justify-items:start}
.made-intro .link-arrow{color:var(--anth)}
.made{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
.made-card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--radius);overflow:hidden;
  transition:transform 1.4s var(--ease-glide),box-shadow 1.4s var(--ease-glide)}
.made-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(34,35,35,.35)}
.made-img{position:relative;overflow:hidden;background:var(--anth)}
.made-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.6s var(--ease-glide)}
/* Eigene Ebene von Anfang an: sonst wechselt der Browser beim ersten Hover die Darstellung → kurzes Rucken */
.made-img img,.work-img img{will-change:transform;backface-visibility:hidden}
.made-card:hover .made-img img{transform:scale(1.02)}
.made-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,32px)}
.made-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
.made-kind{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.made-card h3{font-size:clamp(24px,2.2vw,32px);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--anth)}
.made-card p{color:var(--on-light-muted);font-size:15px;line-height:1.65}
/* Link in allen Karten unten bündig */
.made-link{margin-top:auto;align-self:flex-start;color:var(--anth)}
.made-body p+.made-link{margin-top:auto}
.made-body>p{margin-bottom:10px}
@media (max-width:1100px){.made{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Genau vier eigene Produkte: ab 1400 px vier Spalten, darunter 2 × 2 (statt 3 + 1) */
@media (min-width:1101px) and (max-width:1399px){.made:has(>.made-card:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1400px){.made:has(>.made-card:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  /* schmale Spalten: Art und Status untereinander, damit alle Titel auf einer Höhe stehen */
  .made:has(>.made-card:nth-child(4):last-child) .made-meta{flex-direction:column;align-items:flex-start;justify-content:flex-start}}
@media (max-width:700px){.made{grid-template-columns:1fr}}

/* ---------- AUSGEWÄHLTE ARBEITEN: Showreel + Kacheln (CMS: arbeiten.video, Liste „arbeiten“) ---------- */
.works-section{border-top:1px solid var(--line-dark)}
.reel{margin:0 0 clamp(48px,6vw,88px)}
.reel-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 2px 12px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.reel-rec::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:1px;animation:sub-blink 4s ease-in-out infinite}
.reel-tc{font-variant-numeric:tabular-nums}
.reel-screen{position:relative;padding:clamp(8px,1vw,14px);background:#121212;border:1px solid var(--line-dark);border-radius:var(--radius)}
.reel-screen video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:2px}
.reel-screen video:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.reel-ecken,.work-ecken{position:absolute;inset:-8px;pointer-events:none;--c:var(--gold);--l:26px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.reel-caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin-top:18px}
.reel-titel{font-family:var(--font-head);font-weight:400;font-size:22px;letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.reel-text{font-size:14.5px;line-height:1.6;color:var(--on-dark-muted);max-width:60ch}
.reel-titel:empty,.reel-text:empty{display:none}

.works{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.2vw,32px);counter-reset:arbeit}
.work{counter-increment:arbeit;display:flex;flex-direction:column;min-width:0;background:#121212;border:1px solid var(--line-dark);border-radius:var(--radius)}
.work-img{position:relative;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--anth)}
.work-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.6s var(--ease-glide)}
/* Klappen-Nummer wie im Schnitt: 01, 02 … (aus der Reihenfolge, kein Feld) */
.work-body::before{content:counter(arbeit,decimal-leading-zero);font-family:var(--font-head);font-weight:200;font-size:26px;line-height:1;color:var(--on-dark-muted);margin-bottom:6px}
.work-ecken{inset:10px;--l:22px;opacity:0;transition:opacity 1.4s var(--ease-glide)}
.work:hover .work-img img,.work:focus-within .work-img img{transform:scale(1.02)}
.work:hover .work-ecken,.work:focus-within .work-ecken{opacity:1}
.work-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:clamp(18px,1.8vw,26px)}
.work-art{font-size:clamp(22px,1.8vw,26px);font-weight:400;line-height:1.14;letter-spacing:.01em;text-transform:uppercase;color:var(--white)}
.work-kunde{font-size:14px;line-height:1.5;color:var(--on-dark-muted)}
.work-kunde:empty{display:none}
.work-link{margin-top:auto;padding-top:10px;align-self:flex-start;color:var(--on-dark)}
.work-link:hover{color:var(--gold)}
.work-link[href=""],.work-link:not([href]),.work-link:has([data-edit-label]:empty){display:none}
.works-mehr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:clamp(32px,4vw,48px);color:var(--on-dark-muted);font-size:15px}
.works-mehr .link-arrow{color:var(--on-dark)}
.works-mehr .link-arrow:hover{color:var(--gold)}
@media (max-width:1100px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.works{grid-template-columns:1fr}.reel-bar{font-size:10px;letter-spacing:.16em}}

/* ---------- Weniger Bewegung ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ks-stage{transition:none}
  .ks-mark path{transition:none}
  .voice::after,.wall-item,.wall-logo,.made-card,.made-img img{transition:none}
  .cv-caret{animation:none}
  .work-img img,.work-ecken{transition:none}
  .reel-rec::before{animation:none}
}

/* Finale: etwas mehr Zeilenabstand, weil „NÄCHSTE“ in der zweiten Zeile steht (Ä-Punkte) */
.finale-title{line-height:1.16}