/* BOFF. · Unterseiten (Angebot, Leistungen, Referenzen, Team, Kontakt, Rechtliches)
   Gleiche Sprache wie die Startseite: 12er-Raster, links die Marke des Abschnitts, rechts der Inhalt.
   Wirkung über Grösse, Abstand und Linien. Keine Farbe ausser dem leisen Prisma an der Kontaktzeile. */

/* BOFF. im Text: echter Text in Patron Black mit Punkt (Regel Yves, 02.11.2026) */
@font-face{font-family:"Patron";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/patron/PatronWEB-Black.woff2) format("woff2")}
.boff{font-family:"Patron","Albert Sans",sans-serif;font-weight:900;letter-spacing:-.005em}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.sub main{padding-top:76px}

/* Kopf einer Seite: Brotkrumen, grosse H1, darunter rechts der Einstieg */
.hd{padding-block:clamp(48px,5.5vw,96px) clamp(56px,6vw,96px)}
.hd + .hero-m{margin-top:calc(-1 * clamp(8px,2vw,32px))}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--mute);margin-bottom:clamp(24px,3vw,40px)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current]{color:var(--soft)}
.hd h1{font-size:clamp(48px,7.6vw,128px);line-height:.94;letter-spacing:-.048em;max-width:13ch;text-wrap:balance}
.hd h1.long{max-width:16ch;font-size:clamp(44px,6.6vw,112px)}
.hd h1{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}   /* lange Wörter wie «Drohnenaufnahmen» auf dem Handy trennen statt seitlich überlaufen */
.hd .in{margin-top:clamp(32px,3.6vw,56px)}
.hd .in > .k{grid-column:1/span 4;padding-top:10px;color:var(--mute);align-self:start}
.hd .in > .t{grid-column:5/span 8;display:grid;gap:22px;justify-items:start}
.hd .lead{font-size:clamp(22px,2.2vw,32px);line-height:1.3;letter-spacing:-.02em;max-width:30ch}
.hd .t p:not(.lead){font-size:clamp(17px,1.4vw,19px);color:var(--soft);max-width:52ch}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:18px}
.tl{font-size:16px;color:var(--mute);text-decoration:none}
.tl:hover{color:var(--fg)}

/* Grosses Filmbild unter dem Kopf (Leistungsseiten): eine runde Ecke unten rechts um die Kapsel, Bildlegende darunter */
.hero-m{margin:0 0 clamp(96px,10vw,150px)}
.hero-m__i{--in:24px;position:relative;aspect-ratio:1600/688;overflow:hidden;background:var(--surface);border-radius:0 0 calc(27px + var(--in)) 0}
.hero-m__i img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%}
.hero-m__i::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.4) 100%)}
.hero-m__i .playbtn{position:absolute;right:var(--in);bottom:var(--in);z-index:2;isolation:isolate}
.hero-m__i .playbtn::before{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:999px;pointer-events:none;
  background:linear-gradient(100deg,rgba(150,80,255,.45) 0%,rgba(80,100,255,.55) 12%,rgba(60,190,255,.55) 24%,rgba(120,230,110,.55) 36%,rgba(255,225,80,.6) 48%,rgba(255,150,50,.6) 60%,rgba(255,80,60,.6) 72%,rgba(255,255,255,.5) 86%,rgba(255,255,255,0) 100%);filter:blur(9px);opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.hero-m__i .playbtn:hover::before,.hero-m__i .playbtn:focus-visible::before{opacity:.55}
.hero-m figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:16px;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em}
.hero-m figcaption span{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.hero-m figcaption a{text-decoration:none}
.hero-m figcaption a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (max-width:600px){.hero-m__i{--in:14px;aspect-ratio:4/3}.hero-m__i .playbtn{font-size:14.5px;gap:12px;padding:4px 4px 4px 18px}.hero-m__i .playbtn .key{width:38px;height:38px}}

/* Abschnitt: Label links, Inhalt rechts */
.sec{padding-block:0 clamp(96px,10vw,150px)}
.sec > .lbl{grid-column:1/span 4;align-self:start;padding-top:10px}
.sec > .c{grid-column:5/span 8;display:grid;gap:32px;min-width:0}
.sec > .w{grid-column:1/-1;min-width:0}
.sec h2.big2{font-size:clamp(30px,3.4vw,52px);line-height:1.08;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}
.sec .say{font-size:clamp(20px,1.9vw,26px);line-height:1.4;max-width:40ch}
.more{justify-self:start;font-size:15px;color:var(--mute);text-decoration:none}
.more:hover{color:var(--fg)}

/* Fliesstext (für Suchmaschinen und KI-Systeme: Antworten, die für sich stehen) */
.prose{display:grid;gap:18px;max-width:62ch}
.prose p,.prose li{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--soft)}
.prose h3{font-size:clamp(21px,1.8vw,26px);line-height:1.25;letter-spacing:-.015em;margin-top:18px;color:var(--fg)}
.prose h3:first-child{margin-top:0}
.prose ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.prose a{color:var(--fg);text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--fg);font-weight:600}

/* Drei Punkte («Was du bekommst») */
.pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:p}
.pts li{border-top:1px solid var(--fg);padding-top:18px;display:grid;gap:12px;align-content:start;counter-increment:p}
.pts li::before{content:counter(p,decimal-leading-zero);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--mute)}
.pts b,.pts h3{font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
.pts p a{color:var(--soft);text-underline-offset:3px;text-decoration-thickness:1px}
.sec > .c > .pts + .more{margin-top:-4px}
.pts p{font-size:16px;line-height:1.55;color:var(--mute)}
.pts.two{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}

/* Vorgehen kurz */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.steps li{display:grid;grid-template-columns:minmax(120px,1fr) 2.4fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps b{font-weight:400;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.015em}
.steps p{font-size:16.5px;color:var(--mute);max-width:46ch}

/* Arbeiten als Karten: Bild mit einer runden Ecke unten rechts um die Kapsel (27 px + Rand), wie auf der Startseite */
.wks{display:grid;gap:48px 24px}
.wks--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wks--2{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:64px}
.wks--1{grid-template-columns:minmax(0,1fr);max-width:900px}
.wks--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 20px}
.wk{display:grid;gap:12px;align-content:start}
.wk__m{--in:14px;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface);border-radius:0 0 calc(27px + var(--in)) 0;margin-bottom:6px}
.wk__a{display:block;width:100%;height:100%}   /* das ganze Bild führt auf den Case */
.wk__m img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%}
.wk__m::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.35) 100%)}
.wk__ph{position:absolute;inset:0;display:flex;align-items:flex-end;padding:22px 24px;font-size:clamp(22px,2.2vw,34px);line-height:1;letter-spacing:-.03em;color:#3A3936;
  background:radial-gradient(120% 90% at 20% 0%,#1B1B1A 0%,#141414 55%,#101010 100%)}
.wk__m .playbtn{position:absolute;right:var(--in);bottom:var(--in);z-index:2;font-size:14.5px;gap:12px;padding:4px 4px 4px 18px}
.wk__m .playbtn .key{width:38px;height:38px}
.wk__m .playbtn{isolation:isolate}
.wk__m .playbtn::before{content:"";position:absolute;inset:-5px;z-index:-1;border-radius:999px;pointer-events:none;
  background:linear-gradient(100deg,rgba(150,80,255,.45) 0%,rgba(80,100,255,.55) 12%,rgba(60,190,255,.55) 24%,rgba(120,230,110,.55) 36%,rgba(255,225,80,.6) 48%,rgba(255,150,50,.6) 60%,rgba(255,80,60,.6) 72%,rgba(255,255,255,.5) 86%,rgba(255,255,255,0) 100%);filter:blur(9px);opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1)}
.wk__m .playbtn:hover::before,.wk__m .playbtn:focus-visible::before{opacity:.55}
.wk__k{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.wk h3{font-size:clamp(22px,1.9vw,28px);line-height:1.12;letter-spacing:-.022em}
.wk--big h3{font-size:clamp(26px,2.4vw,36px)}
.wk h3 a{text-decoration:none}
.wk h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.wk__l{font-size:16px;line-height:1.5;color:var(--mute);max-width:44ch}
.wk[hidden]{display:none}
/* Kleine Karten (Referenzen-Seite): ruhig, nur Bild, Kunde, Titel; die Kapsel «Film ansehen» erscheint mit der Maus erst beim Darüberfahren */
.wk--s{gap:8px}
.wk--s .wk__m{--in:10px;border-radius:0 0 calc(20px + var(--in)) 0;margin-bottom:4px}
.wk--s .wk__m .playbtn{font-size:13.5px;gap:10px;padding:4px 4px 4px 15px}   /* dieselbe Kapsel wie überall, nur eine Stufe kleiner */
.wk--s .wk__m .playbtn .key{width:32px;height:32px}
.wk--s .wk__k{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* immer eine Zeile, damit die Titel auf einer Linie stehen */
.wk--s h3{font-size:clamp(17px,1.3vw,20px);line-height:1.2;letter-spacing:-.015em}
@media (hover:hover) and (pointer:fine){
  .wk--s .wk__m::after,.wk--s .wk__m .playbtn{opacity:0;transition:opacity .35s cubic-bezier(.22,.61,.36,1)}
  .wk--s:hover .wk__m::after,.wk--s:hover .wk__m .playbtn,.wk--s .wk__m .playbtn:focus-visible{opacity:1}
}

/* Filter: Kapseln als Kontur, aktiv weiss */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(36px,4vw,56px)}
.chip{all:unset;box-sizing:border-box;cursor:pointer;border-radius:999px;padding:10px 18px;font-size:15px;line-height:1;box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);transition:box-shadow .2s,background .2s,color .2s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--mute);color:var(--fg)}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);box-shadow:none}
.chip:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Archiv: ruhige Liste in Spalten */
.arch{list-style:none;margin:0;padding:0;columns:3 240px;column-gap:24px;border-top:1px solid var(--line);padding-top:18px}
.arch li{break-inside:avoid;padding:5px 0;font-size:15px;line-height:1.4}
.arch a{color:var(--mute);text-decoration:none}
.arch a:hover{color:var(--fg)}

/* Stimmen */
.qs{display:grid;gap:56px}
.q{display:grid;gap:16px;margin:0}
.q blockquote{margin:0;font-size:clamp(24px,2.5vw,38px);line-height:1.22;letter-spacing:-.025em;max-width:32ch;text-wrap:pretty}
.q figcaption{font-size:15px;color:var(--mute)}

/* Zahl, die etwas belegt */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--fg)}
.nums div{padding:18px 16px 0 0;display:grid;gap:8px;align-content:start}
.nums b{font-weight:400;font-size:clamp(44px,5.4vw,84px);line-height:1;letter-spacing:-.045em}
.nums span{font-size:14.5px;color:var(--mute);max-width:24ch}

/* Weitere Leistungen (interne Verlinkung) */
.svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;border-top:1px solid var(--line)}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:flex;justify-content:space-between;gap:16px;font-size:clamp(19px,1.7vw,24px);padding:16px 0;text-decoration:none}
.svc a span{color:var(--mute);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.svc a:hover span{color:var(--fg);transform:translateX(3px)}
.cl{font-size:16px;line-height:1.7;color:var(--mute);max-width:60ch}

/* Team als ruhige Liste (bis die Porträts da sind): Name gross, Rolle, ein Satz */
.crew{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.crew li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.5fr);gap:6px 24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.crew b{font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.15;letter-spacing:-.02em}
.crew .r{font-size:15px;color:var(--mute)}
.crew p{font-size:16px;line-height:1.5;color:var(--soft)}
@media (max-width:900px){.crew li{grid-template-columns:1fr;gap:4px}}

/* Team */
.ppl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
.ppl li{display:grid;gap:14px;align-content:start}
.ppl .ph{display:block;aspect-ratio:3/4;border-radius:0 0 41px 0;background:#0D0D0D}
.ppl .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ppl--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 20px}
.ppl b{display:block;font-weight:600;font-size:19px;line-height:1.3}
.ppl .r{display:block;font-size:15px;line-height:1.45;color:var(--mute)}
.ppl p{font-size:15.5px;line-height:1.55;color:var(--soft);max-width:36ch}
[data-streak]{position:relative;overflow:hidden}
.streak{position:absolute;top:-40%;bottom:-40%;left:var(--sx,50%);width:220px;margin-left:-110px;z-index:3;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transform:rotate(22deg);filter:blur(26px);
  background:linear-gradient(90deg,rgba(150,80,255,0) 0%,rgba(80,100,255,.28) 20%,rgba(60,190,255,.3) 34%,rgba(120,230,110,.28) 48%,rgba(255,225,80,.3) 60%,rgba(255,150,50,.26) 72%,rgba(255,80,60,.22) 84%,rgba(255,80,60,0) 100%);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
[data-streak].lit .streak{opacity:.2}
.time{list-style:none;margin:0;padding:0;border-top:1px solid var(--fg)}
.time li{display:grid;grid-template-columns:minmax(110px,1fr) 3fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.time b{font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;line-height:1.1}
.time p{font-size:16.5px;color:var(--soft);max-width:52ch}
.time p a{color:var(--fg);text-underline-offset:3px;text-decoration-thickness:1px}

/* Mitgliedschaften: Logos klein, im Ton der Schrift, ruhig */
.mem{display:grid;gap:18px;margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.mem .lbl{color:var(--mute)}
.logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px}
.logos img{display:block;width:auto;opacity:.8;transition:opacity .2s}
.logos li:first-child img{height:28px}
.logos li:last-child img{height:46px}
.logos img:hover{opacity:1}
.logos a{display:block;line-height:0}

/* Kontaktseite: grosse Angaben */
.big-reach{display:grid;gap:6px}
.big-reach a{font-weight:600;font-size:clamp(32px,4.6vw,72px);line-height:1.08;letter-spacing:-.03em;text-decoration:none}
.big-reach a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}

/* Fragen (wie Startseite) */
.faq{padding-block:0 clamp(96px,10vw,150px)}
.faq > .lbl{grid-column:1/span 4;align-self:start;padding-top:22px}
.faq .t{grid-column:5/span 8;border-top:1px solid var(--fg)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font-size:clamp(20px,1.8vw,26px);line-height:1.25;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.faq summary:focus-visible{outline:none}
.faq summary:focus-visible .faq__k{outline:2px solid var(--fg);outline-offset:3px;border-radius:50%}
.faq__a{padding:0 52px 26px 0;max-width:62ch}
.faq__a p{font-size:17px;line-height:1.6;color:var(--soft)}
.faq__a p + p{margin-top:12px}
.faq__a a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}

/* Kontakt am Ende jeder Seite (wie Startseite) */
.contact{position:relative;overflow-x:clip;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:clamp(40px,6vw,96px) clamp(110px,12vw,180px);border-top:1px solid var(--line)}
.contact > p{position:relative;z-index:3;grid-column:1/span 10;font:400 clamp(40px,5.4vw,84px)/1.02 var(--text);letter-spacing:-.04em;padding-top:clamp(40px,5vw,80px)}
.contact > p a{color:var(--mute);text-decoration:none}
.contact > p a:hover{color:var(--fg)}
.contact .caustic{position:absolute;left:0;top:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:0;will-change:transform,opacity;
  background:linear-gradient(100deg,rgba(150,80,255,.45) 0%,rgba(80,100,255,.55) 12%,rgba(60,190,255,.55) 24%,rgba(120,230,110,.55) 36%,rgba(255,225,80,.6) 48%,rgba(255,150,50,.6) 60%,rgba(255,80,60,.6) 72%,rgba(255,255,255,.5) 86%,rgba(255,255,255,0) 100%);background-size:220% 100%;background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 15%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.18) 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 15%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.18) 78%,transparent 100%)}
.reach{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap;margin-top:clamp(24px,3vw,40px);padding-top:24px;border-top:1px solid var(--line)}
.reach__l{display:grid;gap:6px;font-size:17px;font-style:normal}
.reach__big{font-weight:600;font-size:clamp(28px,3.6vw,52px);line-height:1.12;letter-spacing:-.025em}
.reach__big + .reach__n{margin-top:10px}
.reach__l a{text-decoration:none}
.reach__l a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.reach__n{font-size:14.5px;color:var(--mute)}
.reach .b1{margin-left:auto}
em.pw,span.pw{font-style:normal}

/* Rechtliches: schmal und ruhig */
.legal{grid-column:5/span 8;display:grid;gap:16px;max-width:70ch}
.legal h2{font-size:clamp(20px,1.7vw,24px);line-height:1.3;letter-spacing:-.01em;margin-top:28px;font-weight:600}
.legal h3{font-size:18px;font-weight:600;margin-top:16px}
.legal p,.legal li{font-size:16.5px;line-height:1.65;color:var(--soft)}
.legal ol,.legal ul{margin:0;padding-left:1.2em;display:grid;gap:8px}
.legal a{color:var(--fg);text-underline-offset:3px;text-decoration-thickness:1px}
.legal dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;font-size:16.5px}
.legal dt{color:var(--mute)}
.legal dd{margin:0;color:var(--soft)}
#data-protect-dse{color:var(--soft)}
#data-protect-dse h1,#data-protect-dse h2,#data-protect-dse h3{color:var(--fg)}


@media (max-width:1280px){
  .wks--4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .wks--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hd .in > .k,.hd .in > .t,.sec > .lbl,.sec > .c,.faq > .lbl,.faq .t,.legal,.contact > p,.reach{grid-column:1/-1}
  .hd .in > .k{padding-top:0}
  .pts{grid-template-columns:1fr}
  .pts.two{grid-template-columns:1fr}
  .wks--2,.wks--3{grid-template-columns:1fr;row-gap:48px}
  .wks--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .svc{grid-template-columns:1fr}
  .ppl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ppl--5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nums{grid-template-columns:1fr;row-gap:20px}
  .steps li,.time li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:480px){
  .wks--4{grid-template-columns:1fr}
  .hd h1.long{font-size:clamp(32px,10vw,44px)}
  .faq__a{padding-right:0}
  .ppl{grid-template-columns:1fr 1fr;gap:32px 16px}
  .legal dl{grid-template-columns:1fr;gap:2px}
  .legal dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.streak,.wk__m .playbtn::before{transition:none}}

/* ---------- Case-Seiten (/portfolio/…): ruhig und erhaben (Yves 03.11.2026: «grosse Bilder zu wuchtig») ----------
   Film in der Textspalte, links daneben die Fakten als Liste; Making-of-Bilder kleiner als die Spalte; Zahlen und Zitat eine Stufe leiser */
.hd h1.case{font-size:clamp(38px,4.8vw,76px);line-height:1;max-width:20ch}
.cintro{align-items:start;padding-bottom:clamp(96px,10vw,150px)}
.cintro .cmeta{grid-column:1/span 3;display:grid;gap:18px;margin:0;padding-top:4px}
.cintro .cfilm{grid-column:5/span 8;margin:0}
.cmeta dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.cmeta dd{margin:0;font-size:15.5px;line-height:1.4;color:var(--soft)}
.cmeta a{text-decoration:none;color:var(--fg)}
.cmeta a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.cfilm .hero-m__i{--in:14px;border-radius:0 0 calc(20px + var(--in)) 0}
.cfilm .hero-m__i .playbtn{font-size:14.5px;gap:12px;padding:4px 4px 4px 18px}
.cfilm .hero-m__i .playbtn .key{width:38px;height:38px}
.cnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 28px}
.cnums b{display:block;font-weight:400;font-size:clamp(34px,3.2vw,48px);line-height:1;letter-spacing:-.035em}
.cnums span{display:block;margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--mute);max-width:20ch}
.case-sec .prose{max-width:none}
.case-sec .prose > p:not(.say){max-width:62ch}
.case-sec .say{color:var(--fg);margin-bottom:6px;font-size:clamp(19px,1.6vw,23px);max-width:34ch}
.cimg{margin:22px 0 14px;max-width:560px;overflow:hidden;border-radius:0 0 24px 0;background:var(--surface)}
.cimg img{display:block;width:100%;height:auto}
.cside{display:grid;grid-template-columns:minmax(0,58ch) minmax(150px,190px);gap:18px 48px;align-items:center}   /* Hochformat schmal rechts neben dem Text, auf gleicher Höhe */
.cside__t{display:grid;gap:18px}
.cside .cimg--p{margin:6px 0 0;max-width:none}
.cside--2{grid-template-columns:minmax(0,52ch) minmax(280px,380px)}   /* zwei Hochformate als Paar neben dem Text */
.cpair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cpair .cimg--p{margin:0;max-width:none}
h1.lbl{font-size:12.5px;line-height:inherit;letter-spacing:.06em;max-width:none;hyphens:none}   /* zweite H1 alter Seiten als Abschnittstitel */
.cfilms{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;margin:22px 0 14px;max-width:760px}
@media (max-width:600px){.cfilms{gap:8px}.cfilms--viele{grid-template-columns:repeat(3,minmax(0,1fr))}.cfilm2 .playbtn .key{width:28px;height:28px}}   /* weitere Filme mit Standbild */
.cfilm2{margin:0}.cfilm2__i{position:relative;overflow:hidden;border-radius:0 0 18px 0;background:var(--surface)}
.cfilm2 img{display:block;width:100%;height:auto}
.cfilms--viele{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr))}
.cfilms--reihe{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}   /* mehr als sechs Filme */
@media (max-width:600px){.cfilms--reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cfilm2 figcaption{overflow-wrap:anywhere}
.cfilm2 .playbtn{position:absolute;right:8px;bottom:8px;padding:0;background:transparent;box-shadow:none}.cfilm2 .playbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.cfilm2 .playbtn .key{width:34px;height:34px}
.cfilm2 figcaption{margin-top:8px;font-size:13px;color:var(--mute);letter-spacing:.02em}
.cside .cclips{grid-template-columns:1fr 1fr;margin:6px 0 0;max-width:none}   /* Hochkant-Clips neben dem Text */
@media (max-width:1000px){.cside--2{grid-template-columns:minmax(0,58ch)}.cside--2 .cpair,.cside--2 .cclips{max-width:440px}}
/* Vergrössern per Klick (Making-of-Bilder): ruhig, dunkel, Esc oder Klick daneben schliesst */
.zoom{all:unset;display:block;width:100%;cursor:zoom-in}
.zoom:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.lb{border:0;padding:0;margin:auto;max-width:min(94vw,1600px);max-height:92vh;background:transparent;overflow:visible}
.lb::backdrop{background:rgba(6,6,6,.92)}
.lb img{display:block;max-width:min(94vw,1600px);max-height:86vh;width:auto;height:auto;margin:0 auto;border-radius:0 0 24px 0}
.lb p{margin:14px 0 0;font-size:14px;color:var(--mute);text-align:center}
.lb__x{position:fixed;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,241,236,.4);background:rgba(10,10,10,.6);color:var(--fg);font-size:22px;line-height:1;cursor:pointer}
.lb__x:hover,.lb__x:focus-visible{border-color:var(--fg)}
.cvid video{display:block;width:100%;height:auto;aspect-ratio:2.4;object-fit:cover;background:var(--surface)}   /* Webfassung ohne Balken (SORA: /media/cases/sora-grading.mp4, 1280×534) */
.cq{margin:30px 0 14px;padding-left:22px;border-left:1px solid var(--line)}
.cq blockquote{font-size:clamp(20px,1.7vw,25px);line-height:1.35;letter-spacing:-.015em;max-width:36ch}
.cq figcaption{margin-top:12px}
.credits{display:grid;margin:0;border-top:1px solid var(--line)}
.credits div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:6px 24px;padding:13px 0;border-bottom:1px solid var(--line)}
.credits dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.credits dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--soft)}
.credits a{color:var(--fg)}
@media (max-width:900px){
  .cintro .cmeta{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:22px}
  .cintro .cfilm{grid-column:1/-1;grid-row:1}
  .cnums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.credits div{grid-template-columns:1fr}.cimg{max-width:100%}.cside{grid-template-columns:1fr}.cside .cimg--p{grid-row:1;width:62%;margin:6px auto 4px}.cside--2 .cpair,.cside--2 .cclips{grid-row:1}.cside--2 .cpair .cimg--p{width:auto;margin:0}.cfilm .hero-m__i{aspect-ratio:1600/688}}
.wks--cs{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:480px){.wks--cs{grid-template-columns:1fr}}
/* Kundenstimme im Case: eigener ruhiger Abschnitt, gross und leicht, Anführungszeichen hängen in den Rand */
.cq2{margin:0;display:grid;gap:26px}
.cq2 blockquote{margin:0;font-size:clamp(28px,3vw,46px);line-height:1.16;letter-spacing:-.03em;max-width:24ch;text-wrap:balance;text-indent:-.42em}
.cq2 figcaption{display:grid;gap:4px;font-size:15px;line-height:1.4;color:var(--mute)}
.cq2 figcaption b{font-weight:600;color:var(--fg)}
@media (max-width:600px){.cq2 blockquote{text-indent:0}}
.case-sec,.cstimme,.cintro{padding-bottom:clamp(72px,7vw,112px)}   /* Cases: etwas engere Abstände als die Leistungsseiten */
/* Weitere Arbeiten (Referenzen): kleiner als die 16 besten, acht pro Reihe, ohne Kapsel (Yves 03.11.2026: «nicht so viel Platz») */
.wks--w{grid-template-columns:repeat(8,minmax(0,1fr));gap:28px 14px}
.wks--w .wk__m{--in:8px;border-radius:0 0 calc(14px + var(--in)) 0}
.wks--w .wk__m .playbtn{display:none}
.wks--w .wk__k{font-size:10px;letter-spacing:.05em}
.wks--w h3{font-size:14.5px;line-height:1.25}
@media (max-width:1280px){.wks--w{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.wks--w{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}}
/* Hochformat-Clips im Case (Social-Fassungen): ruhige Reihe, Kapsel klein */
.cclips{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin:22px 0 14px;max-width:720px}
.cclip{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:0 0 18px 0;background:var(--surface)}
.cclip img{width:100%;height:100%;object-fit:cover;display:block}
.cclip .playbtn{position:absolute;right:8px;bottom:8px;padding:0;background:transparent;box-shadow:none}   /* schmale Kacheln: nur die runde Taste */
.cclip .playbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cclip .playbtn .key{width:34px;height:34px}
@media (max-width:600px){.cclips{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sonderseiten 1:1 von boff.ch (Sick Mix, Licht aus?, Sommerfest …): Titelzeile ohne H1 wie heute, Bilder ruhig in der Textspalte */
.hd .t1{font-size:clamp(44px,6.6vw,112px);line-height:.94;letter-spacing:-.048em;max-width:16ch;text-wrap:balance;font-weight:400;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.sonder .prose{gap:18px;max-width:none}
.sonder .prose > *{max-width:62ch}
.sonder .prose img,.sonder .prose video{max-width:100%;height:auto;border-radius:0 0 22px 0}
.sonder .prose h2{font-size:clamp(20px,1.7vw,24px);line-height:1.3;font-weight:600;margin-top:18px}
.sonder .prose h5{font-size:clamp(17px,1.35vw,19px);line-height:1.5;font-weight:600;margin:0}
.sonder .prose .sonder__icon{width:76px;border-radius:0}
.sonder__galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.sonder__galerie img{width:100%;aspect-ratio:1;object-fit:cover}
.sonder--player .idm-player{max-width:1100px;margin-inline:auto}