/* Janine Gabbe – Branding wie auf der Wix-Seite: Schwarz/Weiß, Montserrat (Richtung Chanel) + Lato Light */
:root{
  --tinte:#000;--papier:#fff;--grau:#4d4d4d;--linie:#e4e4e4;--flaeche:#f5f4f2;
  --titel:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --text:'Lato','Helvetica Neue',Arial,sans-serif;
  --rand:clamp(16px,4vw,56px);--kopf:72px;--max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:#1a1a1a;font:300 17px/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
figure{margin:0}
h1,h2,h3{font-family:var(--titel);font-weight:600;text-transform:uppercase;letter-spacing:.1em;line-height:1.1;margin:0 0 .6em}
h1{font-size:clamp(30px,4.4vw,58px)}
h2{font-size:clamp(24px,2.8vw,38px)}
h3{font-size:18px;letter-spacing:.14em}
p{margin:0 0 1em}
main p,main li,main dd,.formular input,.formular textarea,.formular select{font-weight:300}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.vorzeile{font:300 13px/1.4 var(--text);text-transform:uppercase;letter-spacing:.18em;color:var(--grau);margin:0 0 14px}
.vorzeile a{text-decoration:none}
.klein{font-size:14px;font-weight:300;color:var(--grau)}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 28px;background:#000;color:#fff;border:1px solid #000;font:600 14px/1 var(--titel);text-transform:uppercase;letter-spacing:.16em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.knopf:hover{background:#fff;color:#000}
.knopf.hell{background:transparent;color:#000}
.knopf.hell:hover{background:#000;color:#fff}
.knopf.klein{min-height:40px;padding:10px 18px;font-size:12px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;height:var(--kopf);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 var(--rand);background:rgba(255,255,255,.96);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.gescrollt{border-color:var(--linie)}
.logo{grid-column:2;font:700 clamp(19px,2vw,25px)/1 var(--titel);letter-spacing:.14em;text-decoration:none;white-space:nowrap;padding-top:3px}
.kopf-links{display:flex;gap:28px}
.kopf-links a{font:300 14px/1 var(--text);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.kopf-links a:hover,.kopf-links a[aria-current]{border-color:#000}
.kopf-rechts{grid-column:3;justify-self:end;display:flex;align-items:center;gap:18px}
.insta{display:grid;place-items:center;width:40px;height:40px}
.insta svg{width:24px;height:24px;fill:none;stroke:#000;stroke-width:1.8}
.insta .voll{fill:#000;stroke:none}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;margin-left:-10px}
.burger span{display:block;height:1.5px;background:#000;margin:7px 0;transition:transform .25s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4.3px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4.3px) rotate(-45deg)}
.menue{position:fixed;inset:var(--kopf) 0 0;z-index:49;background:#fff;overflow:auto;padding:28px var(--rand) 40px}
.menue[hidden]{display:none}
.menue ul{list-style:none;margin:0;padding:0}
.menue-kat a{display:block;font:600 30px/1.5 var(--titel);letter-spacing:.12em;text-decoration:none}
.menue-rest{margin-top:28px!important;border-top:1px solid var(--linie);padding-top:20px!important}
.menue-rest a{display:block;font:300 16px/2.3 var(--text);text-transform:uppercase;letter-spacing:.1em;text-decoration:none}

/* Held */
.held{max-width:var(--max);margin:0 auto;padding:clamp(20px,3vw,40px) var(--rand) clamp(40px,6vw,80px)}
.held-bilder{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:clamp(8px,1.2vw,16px);align-items:end}
.hb img{width:100%;aspect-ratio:3/4;object-fit:cover}
.hb2{position:relative}
.hb2 .clip video{aspect-ratio:4/5}
.hb1,.hb3{animation:rein .9s .1s both}
.hb2{animation:rein .9s both}
@keyframes rein{from{opacity:0;transform:translateY(14px)}}
.held-text{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:12px 40px;margin-top:clamp(20px,3vw,36px)}
.held-text .vorzeile{grid-column:1/-1;margin:0}
.held-text h1{margin:0;max-width:24ch;font-size:clamp(26px,3.2vw,44px)}
.held-satz{margin:0;max-width:34ch;font-size:18px;font-weight:300;color:var(--grau);align-self:end}
.held-text .knoepfe{margin:0;flex-direction:column;align-items:stretch}

/* Clips (stumme Schleifen) */
.clip{position:relative;margin:0;background:#111;overflow:hidden}
.clip video{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#111}
.clip figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;display:grid;gap:2px;pointer-events:none}
.clip figcaption strong{font:600 13px/1.25 var(--titel);text-transform:uppercase;letter-spacing:.12em}
.clip figcaption span{font:300 12px/1.3 var(--text);letter-spacing:.06em;opacity:.8}
.live-marke{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;background:#fff;color:#000;font:600 11px/1 var(--titel);text-transform:uppercase;letter-spacing:.18em;padding:7px 10px 6px}
.live-marke::before{content:"";width:7px;height:7px;border-radius:50%;background:#e0201b;animation:puls 1.6s ease-in-out infinite}
@keyframes puls{50%{opacity:.25}}

/* Live-Bereich (schwarz) */
.live{background:#000;color:#fff;padding:clamp(56px,8vw,110px) 0}
.live .vorzeile{color:#9a9a9a}
.live-kopf{max-width:var(--max);margin:0 auto clamp(28px,4vw,48px);padding:0 var(--rand);display:grid;grid-template-columns:1.4fr 1fr;gap:20px clamp(28px,6vw,96px);align-items:end}
.live-kopf h2,.live-kopf h1{margin:0;font-size:clamp(28px,3.6vw,52px);hyphens:manual}
.live-kopf p:not(.vorzeile){margin:0;font-size:18px;color:#cfcfcf;max-width:48ch}
.band{display:flex;gap:clamp(8px,1vw,14px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 14px;scroll-padding:0 var(--rand);scrollbar-width:thin;scrollbar-color:#444 transparent}
.band .clip{flex:0 0 clamp(200px,21vw,300px);scroll-snap-align:start}
.band:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.formate{list-style:none;max-width:var(--max);margin:clamp(28px,4vw,44px) auto 0;padding:0 var(--rand);display:flex;flex-wrap:wrap;gap:10px}
.formate li{border:1px solid #444;padding:10px 16px;font:300 14px/1.2 var(--text);letter-spacing:.04em;color:#e6e6e6}
.live-mehr{max-width:var(--max);margin:clamp(24px,3vw,36px) auto 0;padding:0 var(--rand)}
.knopf.weiss{background:#fff;color:#000;border-color:#fff}
.knopf.weiss:hover{background:#000;color:#fff}
.live-klein{padding:clamp(28px,4vw,48px) 0;margin-bottom:clamp(24px,3vw,40px)}
.clip-raster{max-width:var(--max);margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.live-seite{padding-top:clamp(36px,5vw,72px)}
.live-text .zwei-spalten.breit{border:0;padding:0;margin:20px 0 10px;gap:28px 40px}
.live-text .zwei-spalten p{font-size:16px}
.faq{border-top:1px solid var(--linie);margin-top:18px}
.faq details{border-bottom:1px solid var(--linie);padding:16px 0}
.faq summary{cursor:pointer;font:600 15px/1.4 var(--titel);text-transform:uppercase;letter-spacing:.08em;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;font-size:16px}

/* Showreel */
.reel{max-width:var(--max);margin:0 auto;padding:0 var(--rand) clamp(56px,8vw,110px);display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,80px);align-items:center}
.reel-text p:not(.vorzeile){font-weight:300;color:var(--grau)}
.reel-gross{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.reel-gross .clip video{aspect-ratio:16/9}
.play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.92);color:#000;display:grid;place-items:center;font-size:24px;padding-left:5px;transition:transform .25s}
.reel-gross:hover .play{transform:scale(1.08)}

/* Video-Lightbox */
.vlb{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:grid;place-items:center;align-content:center;gap:14px;padding:56px 12px 20px}
.vlb[hidden]{display:none}
.vlb video{max-width:min(94vw,1280px);max-height:80vh;width:auto;background:#000}
.vlb .lb-zu{position:absolute;top:12px;right:12px;border:0;background:none;color:#fff;font:300 44px/1 var(--text);width:56px;height:56px;cursor:pointer}
.vlb-titel{margin:0;color:#bbb;font-size:13px;letter-spacing:.14em;text-transform:uppercase}

/* Referenzen-Laufband */
.refs{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:clamp(30px,4vw,48px) 0 clamp(34px,4.4vw,54px);overflow:hidden}
.refs-kopf{max-width:var(--max);margin:0 auto clamp(26px,3vw,40px);padding:0 var(--rand);display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.refs-kopf .vorzeile{margin:0!important}
.refs .vorzeile{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--text);font-weight:300}
.laufband{display:flex;width:max-content;animation:lauf 60s linear infinite}
.laufband:hover{animation-play-state:paused}
.laufband ul{display:flex;list-style:none;margin:0;padding:0}
.laufband li{font:600 clamp(17px,1.8vw,23px)/1 var(--titel);text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;padding:0 clamp(22px,3vw,44px);position:relative}
.laufband li::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;background:#000;border-radius:50%;transform:translateY(-50%)}
@keyframes lauf{to{transform:translateX(-50%)}}
.refs-mehr{font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--grau);white-space:nowrap}
.refs-mehr:hover{color:#000}
.auswahl{position:relative;margin-bottom:clamp(48px,6vw,80px)}
.auswahl .galerie-auswahl{padding:0;columns:3 260px}
.auswahl:not(.offen) .extra{display:none}
.auswahl:not(.offen)::after{content:"";position:absolute;left:0;right:0;bottom:70px;height:140px;background:linear-gradient(transparent,#fff);pointer-events:none}
.auswahl-mehr{display:flex;margin:18px auto 0}
.auswahl.offen .auswahl-mehr{display:none}
.bereiche-titel{font-size:clamp(18px,1.8vw,24px);margin:0 0 clamp(20px,2.4vw,32px)}

/* Abschnitte */
.abschnitt-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.abschnitt-kopf h2{margin:0}
.abschnitt-kopf p{margin:0;font-weight:300;color:var(--grau)}
.portfolio{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,110px) var(--rand)}
.karten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.4vw,36px) clamp(10px,1.4vw,20px)}
.karte{text-decoration:none;display:block}
.karte figure{overflow:hidden;background:var(--flaeche)}
.karte img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.karte:hover img{transform:scale(1.045)}
.karte h3{margin:16px 0 6px;font-size:clamp(17px,1.6vw,22px)}
.karte p{margin:0;font-size:15px;font-weight:300;color:var(--grau);line-height:1.5}
.karte-sedcard{background:#000;color:#fff;display:flex;align-items:flex-end;aspect-ratio:3/4;padding:clamp(18px,2vw,28px)}
.karte-sedcard .vorzeile,.karte-sedcard p{color:#bbb}
.karte-sedcard h3{margin:0 0 8px;font-size:clamp(20px,2vw,28px)}
.pfeil{display:inline-block;margin-top:14px;font-size:26px;transition:transform .3s}
.karte-sedcard:hover .pfeil{transform:translateX(8px)}

.zwei{max-width:var(--max);margin:0 auto;padding:0 var(--rand) clamp(56px,8vw,110px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center}
.zwei-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.zwei-text{max-width:560px}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;padding-top:26px;border-top:1px solid var(--linie)}
.zwei-spalten h3{font-size:15px;margin-bottom:10px}
.zwei-spalten ul{list-style:none;margin:0;padding:0;font-size:15px;font-weight:300;line-height:1.9}

.sed{background:var(--flaeche)}
.sed{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,6vw,96px);padding:clamp(56px,8vw,110px) max(var(--rand),calc((100vw - var(--max))/2 + var(--rand)))}
.sed-text{justify-self:center;width:min(100%,420px)}
.sed-bild img{width:100%;max-height:82vh;aspect-ratio:4/5;object-fit:cover}
.masse{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin:24px 0 0}
.masse div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #d8d8d8;padding:11px 0}
.masse dt{font:600 13px/1.4 var(--titel);text-transform:uppercase;letter-spacing:.12em}
.masse dd{margin:0;text-transform:uppercase;font-size:15px}
.sed-seite{background:#fff;padding-top:clamp(28px,4vw,56px)}

/* Anfrage */
.anfrage{max-width:var(--max);margin:0 auto;padding:clamp(56px,8vw,110px) var(--rand);display:grid;grid-template-columns:.8fr 1fr;gap:clamp(32px,6vw,96px)}
.orientierung{margin:26px 0 10px;border-top:1px solid var(--linie)}
.orientierung div{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--linie)}
.orientierung dt{font-size:15px}
.orientierung dd{margin:0;font:600 15px/1.4 var(--titel);letter-spacing:.06em;white-space:nowrap}
.formular{display:grid;gap:18px}
.formular fieldset{border:0;margin:0;padding:0}
.formular legend,.formular label{font:300 13px/1.4 var(--text);text-transform:uppercase;letter-spacing:.12em;color:var(--grau)}
.formular legend{margin-bottom:10px}
.formular label{display:grid;gap:7px}
.formular input:not([type=checkbox]),.formular select,.formular textarea{width:100%;font:300 17px/1.4 var(--text);color:#000;background:#fff;border:0;border-bottom:1px solid #bdbdbd;border-radius:0;padding:10px 0;text-transform:none;letter-spacing:0;-webkit-appearance:none;appearance:none}
.formular select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000'/%3E%3C/svg%3E") right 4px center no-repeat}
.formular textarea{resize:vertical;border:1px solid #bdbdbd;padding:12px}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:#000}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0}
.chip span{display:inline-block;padding:10px 16px;border:1px solid #bdbdbd;font-size:14px;letter-spacing:.04em;text-transform:none;color:#000;cursor:pointer;transition:all .15s}
.chip input:checked+span{background:#000;color:#fff;border-color:#000}
.chip input:focus-visible+span{outline:2px solid #000;outline-offset:2px}
.zustimmung{display:flex!important;gap:10px;align-items:flex-start;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}
.zustimmung input{margin-top:4px;accent-color:#000}
.formular .knopf{justify-self:start}
.formular-meldung{background:var(--flaeche);padding:14px 16px;font-size:15px;margin:0}

/* Kategorie-Seiten */
.kat-kopf{max-width:var(--max);margin:0 auto;padding:clamp(32px,5vw,72px) var(--rand) clamp(24px,3vw,40px);text-align:center}
.kat-kopf h1{font-size:clamp(38px,7vw,96px);letter-spacing:.14em;margin-bottom:12px}
.kat-kopf>p{font-weight:300;color:var(--grau);max-width:52ch;margin:0 auto}
.kat-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 24px;margin-top:28px}
.kat-nav a{font:300 13px/1 var(--text);letter-spacing:.14em;text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;color:var(--grau)}
.kat-nav a[aria-current],.kat-nav a:hover{color:#000;border-color:#000}
.galerie{max-width:var(--max);margin:0 auto;padding:0 var(--rand);columns:4 240px;column-gap:clamp(8px,1.2vw,16px)}
.kachel{display:block;margin-bottom:clamp(8px,1.2vw,16px);break-inside:avoid;overflow:hidden;cursor:zoom-in;background:var(--flaeche)}
.kachel img{width:100%;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s}
.kachel:hover img{transform:scale(1.03)}
.galerie-raster{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px);padding-bottom:clamp(56px,8vw,110px)}
.galerie-raster .kachel{margin:0}
.galerie-raster img{aspect-ratio:3/4;object-fit:cover}
.kat-ende{text-align:center;padding:clamp(56px,8vw,110px) var(--rand)}
.kat-ende .knoepfe{justify-content:center}

/* Textseiten */
.text-seite{max-width:860px;margin:0 auto;padding:clamp(40px,6vw,88px) var(--rand) clamp(56px,8vw,110px)}
.text-seite h2{font-size:clamp(18px,1.8vw,22px);margin-top:1.8em}
.einleitung{font-size:19px;font-weight:300;color:var(--grau);max-width:46ch}
.ref-liste{list-style:none;margin:40px 0 0;padding:0;columns:3 200px;column-gap:32px}
.ref-liste li{font:600 15px/1.3 var(--titel);text-transform:uppercase;letter-spacing:.1em;padding:10px 0;border-bottom:1px solid var(--linie);break-inside:avoid}
.preis-karten{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0 8px}
.preis-karten>div{border:1px solid #000;padding:28px}
.preis-karten h2{margin:0 0 10px;font-size:16px}
.preis{font:600 clamp(30px,3.4vw,44px)/1 var(--titel);letter-spacing:.04em;margin:0 0 12px}
.recht h2{font-size:15px;margin:1.8em 0 .5em}
.recht p{font-size:15px}

/* Fuß */
.fuss{border-top:1px solid var(--linie);text-align:center;padding:clamp(48px,6vw,80px) var(--rand) 40px}
.fuss-logo{font:700 clamp(34px,6vw,76px)/1 var(--titel);letter-spacing:.14em;margin:0 0 28px}
.fuss nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 30px;margin-bottom:22px}
.fuss nav a,.fuss-kontakt a{font-size:14px;font-weight:300;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;color:var(--grau)}
.fuss nav a:hover,.fuss-kontakt a:hover{color:#000}
.fuss-kontakt a{text-transform:none;letter-spacing:.02em}
.fuss-klein{font-size:12px;color:#6b6b6b;margin:18px 0 0}
.fuss-klein a{color:inherit}

/* Handy-Leiste */
.leiste{display:none}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(255,255,255,.98);display:grid;place-items:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,1400px);max-height:88vh;width:auto;object-fit:contain}
.lightbox button{position:absolute;border:0;background:none;font:300 44px/1 var(--text);cursor:pointer;width:56px;height:56px;color:#000}
.lb-zu{top:12px;right:12px}
.lb-vor{left:8px;top:50%;transform:translateY(-50%)}
.lb-nach{right:8px;top:50%;transform:translateY(-50%)}
.lb-zahl{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.14em;margin:0;color:var(--grau)}

/* ── Tablet ── */
@media (max-width:1100px){
  .karten{grid-template-columns:repeat(3,minmax(0,1fr))}
  .clip-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .held-text{grid-template-columns:1fr auto}
  .held-satz{grid-column:1}
  .held-text .knoepfe{grid-column:2;grid-row:2/4}
}
@media (max-width:900px){
  :root{--kopf:64px}
  .kopf-links{display:none}
  .burger{display:block}
  .kopf{grid-template-columns:auto 1fr auto}
  .logo{justify-self:center}
  .zwei,.sed,.anfrage,.reel,.live-kopf{grid-template-columns:1fr}
  .zwei-bild{max-width:560px}
  .sed-text{justify-self:stretch;width:100%;max-width:560px}
  .sed-bild{order:-1}
  .held-text{grid-template-columns:1fr}
  .held-text .knoepfe{grid-column:1;grid-row:auto;flex-direction:row}
}
/* ── Handy ── */
@media (max-width:640px){
  body{font-size:16px;padding-bottom:64px}
  .kopf .knopf.klein{display:none}
  .kopf-rechts{gap:0}
  .logo{font-size:18px;letter-spacing:.12em}
  .held{padding-top:12px}
  .held-bilder{grid-template-columns:1fr 1fr;grid-template-areas:"g g" "a b"}
  .hb2{grid-area:g}
  .hb2 .clip video{aspect-ratio:4/5}
  .band .clip{flex-basis:62vw}
  .clip-raster{grid-template-columns:1fr 1fr;gap:8px}
  .clip figcaption{padding:30px 10px 9px}
  .clip figcaption strong,.clip figcaption span{font-size:11px}
  .live-kopf p:not(.vorzeile){font-size:16px}
  .formate li{font-size:13px;padding:8px 12px}
  .play{width:60px;height:60px}
  .hb1 img,.hb3 img{aspect-ratio:1/1}
  .held-text h1{font-size:28px}
  .held-text .knoepfe{flex-direction:column}
  .knopf{width:100%}
  .formular .knopf{width:100%}
  .karten{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px}
  .karte p{font-size:13px}
  .karte h3{font-size:15px;margin-top:12px;letter-spacing:.12em}
  .zwei-spalten,.reihe,.preis-karten{grid-template-columns:1fr}
  .masse{grid-template-columns:1fr}
  .galerie{columns:2;column-gap:8px}
  .kachel{margin-bottom:8px}
  .galerie-raster{grid-template-columns:1fr 1fr;gap:8px}
  .kat-nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .kat-nav a{white-space:nowrap}
  .leiste{display:flex;justify-content:space-between;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:40;height:60px;padding:0 20px calc(env(safe-area-inset-bottom));background:#000;color:#fff;text-decoration:none;font:600 13px/1 var(--titel);text-transform:uppercase;letter-spacing:.16em;transform:translateY(100%);transition:transform .3s}
  .leiste span{border-bottom:1px solid #fff;padding-bottom:3px}
  .leiste.sichtbar{transform:none}
  .lightbox button{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .laufband{flex-wrap:wrap;width:auto;justify-content:center}
  .laufband ul[aria-hidden]{display:none}
  .laufband ul{flex-wrap:wrap;justify-content:center;row-gap:14px}
}

/* ── Live-Seite ── */
.knopf.rand-weiss{background:transparent;color:#fff;border-color:#fff}
.knopf.rand-weiss:hover{background:#fff;color:#000}
.ls-held{background:#000;color:#fff;display:grid;grid-template-columns:1fr minmax(0,.8fr);gap:clamp(32px,6vw,110px);align-items:center;padding:clamp(40px,6vw,96px) max(var(--rand),calc((100vw - var(--max))/2 + var(--rand)))}
.ls-held .vorzeile{color:#9a9a9a}
.ls-held h1{font-size:clamp(30px,4vw,56px);max-width:14ch;margin-bottom:.5em}
.ls-einleitung{font-size:clamp(17px,1.4vw,20px);color:#cfcfcf;max-width:44ch}
.ls-held-film{position:relative;max-width:520px;justify-self:end;width:100%}
.ls-held-film .clip video{aspect-ratio:4/5}
.ls-kopf{max-width:var(--max);margin:0 auto clamp(28px,3.6vw,48px);padding:0 var(--rand);display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px}
.ls-kopf h2{margin:0}
.ls-kopf p{margin:0;color:var(--grau);font-weight:300}
.ls-formate{padding:clamp(64px,9vw,130px) 0}
.formate-liste{list-style:none;max-width:var(--max);margin:0 auto;padding:0 var(--rand);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(14px,1.8vw,28px)}
.format .clip{cursor:zoom-in}
.format-nr{font:600 13px/1 var(--titel);letter-spacing:.14em;color:var(--grau);margin:18px 0 10px;padding-top:14px;border-top:1px solid #000}
.format h3{font-size:clamp(15px,1.25vw,18px);margin:0 0 8px;hyphens:manual}
.format p:last-child{font-size:15px;font-weight:300;color:var(--grau);line-height:1.5;margin:0}
.ls-band{background:#000;color:#fff;padding:clamp(56px,8vw,110px) 0 clamp(48px,7vw,96px)}
.ls-band .ls-kopf p{color:#9a9a9a}
.ls-band .clip{cursor:zoom-in}
.ls-zwei{max-width:var(--max);margin:0 auto;padding:clamp(64px,9vw,130px) var(--rand);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px)}
.ls-zwei h2{margin-bottom:28px}
.staerken,.ablauf{list-style:none;margin:0;padding:0}
.staerken li{padding:20px 0;border-top:1px solid var(--linie)}
.staerken h3,.ablauf h3{font-size:15px;margin:0 0 8px}
.staerken p,.ablauf p{margin:0;font-size:16px;font-weight:300;color:#333}
.ablauf li{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--linie)}
.ablauf span{font:600 44px/1 var(--titel);letter-spacing:.02em}
.ls-faq{max-width:860px;margin:0 auto;padding:0 var(--rand) clamp(64px,9vw,130px)}
.ls-cta{background:#000;color:#fff;text-align:center;padding:clamp(64px,9vw,130px) var(--rand)}
.ls-cta .vorzeile{color:#9a9a9a}
.ls-cta h2{font-size:clamp(30px,4vw,56px)}
.ls-cta p:not(.vorzeile){color:#cfcfcf}
.ls-cta .knoepfe{justify-content:center}
@media (max-width:1100px){
  .formate-liste{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,30vw);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .format{scroll-snap-align:start}
}
@media (max-width:900px){
  .ls-held{grid-template-columns:1fr}
  .ls-held-film{justify-self:start;max-width:440px;order:-1}
  .ls-zwei{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ls-held{padding-top:20px}
  .ls-held-film{max-width:none}
  .formate-liste{grid-auto-columns:68vw}
  .ablauf li{grid-template-columns:48px 1fr}
  .ablauf span{font-size:34px}
}

/* ── Referenzen A–Z ── */
.ref-seite{max-width:1180px}
.ref-abc{columns:3 260px;column-gap:clamp(32px,4vw,64px);margin-top:clamp(36px,5vw,64px)}
.abc{break-inside:avoid;display:grid;grid-template-columns:clamp(56px,6vw,84px) 1fr;gap:16px;padding:22px 0 24px;border-top:1px solid #000}
.abc-b{font:600 clamp(44px,5vw,68px)/.85 var(--titel);margin:0;letter-spacing:0}
.abc ul{list-style:none;margin:0;padding:4px 0 0}
.abc li{font:600 14px/1.35 var(--titel);text-transform:uppercase;letter-spacing:.1em;padding:5px 0}
.ref-umv{margin-top:28px;color:var(--grau);font-weight:300}
@media (max-width:640px){
  .ref-abc{columns:1}
  .abc{grid-template-columns:52px 1fr}
}

/* Portfolio-Dropdown im Kopf */
.dd{position:relative}
.dd>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.dd-liste{position:absolute;left:-20px;top:100%;min-width:200px;list-style:none;margin:0;padding:14px 20px;background:#fff;border:1px solid var(--linie);box-shadow:0 12px 30px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.dd::before{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.dd:hover .dd-liste,.dd:focus-within .dd-liste{opacity:1;visibility:visible;transform:none}
.dd-liste a{display:block;border:0!important;padding:7px 0!important;font:300 13px/1.2 var(--text)!important;letter-spacing:.12em!important;color:var(--grau)}
.dd-liste a:hover{color:#000}
.dd-liste li:first-child{border-bottom:1px solid var(--linie);margin-bottom:6px;padding-bottom:6px}
.ls-held h1{max-width:16ch}

/* Weicher statt Schwarz (14.10.2026): warme Sandfläche für Live-Bereiche */
:root{--sand:#efe9e2;--sand-linie:#d6ccc1}
.live,.ls-held,.ls-band,.ls-cta{background:var(--sand);color:#1a1a1a}
.live .vorzeile,.ls-held .vorzeile,.ls-cta .vorzeile{color:var(--grau)}
.live-kopf p:not(.vorzeile),.ls-einleitung,.ls-cta p:not(.vorzeile),.ls-band .ls-kopf p{color:#4d4d4d}
.formate li{border-color:var(--sand-linie);color:#1a1a1a;background:rgba(255,255,255,.45)}
.knopf.weiss{background:#000;color:#fff;border-color:#000}
.knopf.weiss:hover{background:transparent;color:#000}
.knopf.rand-weiss{background:transparent;color:#000;border-color:#000}
.knopf.rand-weiss:hover{background:#000;color:#fff}
.band{scrollbar-color:var(--sand-linie) transparent}
.band:focus-visible{outline-color:#000}
.clip,.clip video{background:#ddd4ca}
.ls-cta{border-top:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.band.laeuft{scroll-snap-type:none;scrollbar-width:none}
.band.laeuft::-webkit-scrollbar{display:none}
.band .clip{cursor:zoom-in}

/* Kategorie-Kopf ruhig (14.10.2026) */
.kat-kopf{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:14px 40px;text-align:left;padding:clamp(28px,4vw,56px) var(--rand) 0;margin-bottom:clamp(24px,3vw,40px)}
.kat-kopf::after{content:"";flex-basis:100%;height:1px;background:var(--linie);margin-top:clamp(14px,1.6vw,22px)}
.kat-kopf h1{font-size:clamp(24px,2.4vw,34px);letter-spacing:.14em;margin:0}
.kat-nav{margin:0;justify-content:flex-end;gap:6px 22px}
.kat-nav a{font-size:12px}
@media (max-width:640px){
  .kat-kopf{display:block}
  .kat-kopf h1{margin-bottom:12px}
  .kat-kopf::after{display:block;margin-top:10px}
}

/* Feedback Janine 14.10.: schlicht wie die Wix-Preisseite, weniger Text */
.formate-liste .format .clip{max-width:420px}
.ls-preise h3,.preise-text h3{font-size:14px;letter-spacing:.14em;margin:26px 0 6px}
.ls-preise h3:first-of-type{margin-top:0}
.ls-preise p,.preise-text p{margin:0 0 10px}
.kat-ende{padding:clamp(40px,6vw,80px) var(--rand)}
.preise-seite{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,96px) var(--rand) clamp(56px,8vw,110px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.preise-text h1{font-size:clamp(24px,2.6vw,34px);margin-bottom:28px}
.preise-text h3:first-of-type{margin-top:0}
.preise-text .knoepfe{margin-top:30px}
@media (max-width:760px){.preise-seite{grid-template-columns:1fr}}
@media (max-width:1000px){.formate-liste{scroll-padding-inline:var(--rand)}}
/* Sedcard: ganze Figur zeigen (Pola 2:3), nichts abschneiden */
.sed-seite .sed-bild{display:flex;justify-content:center}
.sed-seite .sed-bild img{width:auto;max-width:100%;max-height:86vh;aspect-ratio:auto;object-fit:contain}
/* Credit gut sichtbar in eigener Zeile */
.fuss-credit{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#4d4d4d;margin:14px 0 0}
.fuss-credit a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.live-kopf .refs-mehr{justify-self:end;padding-bottom:8px}@media (max-width:760px){.live-kopf .refs-mehr{justify-self:start}}
/* Auswahl in festen Spalten (kein Umsortieren beim Aufklappen) */
.auswahl .galerie-auswahl{columns:auto;display:flex;gap:clamp(8px,1.2vw,16px);align-items:flex-start}
.galerie-auswahl .spalte{flex:1;min-width:0}
@media (max-width:560px){.auswahl .galerie-auswahl{display:block;columns:2;column-gap:8px}.galerie-auswahl .spalte{display:contents}}
/* Referenzen leichter (Feedback 14.10.) */
.abc-b{font-weight:300}
.abc li{font-weight:400;font-size:13px;letter-spacing:.1em;color:#333}
.ref-seite h1{font-weight:700;font-size:clamp(26px,3.3vw,46px);line-height:1.15}
.abc{border-top-color:#cfcfcf}

/* Edler: Zusammenspiel dick/dünn wie auf der Wix-Seite, mehr Weißraum (14.10.) */
h1,h2{font-weight:700}
.vorzeile{font:300 15px/1.4 var(--text);letter-spacing:.16em;color:#1a1a1a}
.held-text{display:block;text-align:center;margin:clamp(48px,6vw,88px) auto clamp(24px,4vw,56px);max-width:900px}
.held-zeile{font:300 clamp(16px,1.5vw,20px)/1.4 var(--text);text-transform:uppercase;letter-spacing:.2em;margin:0 0 clamp(18px,2vw,28px)}
.held-text h1{max-width:none;margin:0 auto;font-size:clamp(26px,3.3vw,46px);line-height:1.15}
.held-text h1 strong{display:block;font-weight:700}
.held-text h1 .duenn{display:block;font:300 .62em/1.5 var(--text);letter-spacing:.2em;margin-top:.5em}
.held-satz{max-width:none;margin:clamp(22px,2.4vw,32px) auto clamp(28px,3vw,40px);font-size:16px;font-weight:300;color:var(--grau);letter-spacing:.04em}
.refs{padding:clamp(48px,6vw,80px) 0}
.refs .vorzeile{font:300 15px/1.4 var(--text);letter-spacing:.16em;color:#1a1a1a}
.laufband li{font:300 clamp(16px,1.6vw,21px)/1 var(--text);letter-spacing:.2em;color:#1a1a1a;padding:0 clamp(26px,3.4vw,52px)}
.laufband li::after{width:3px;height:3px;background:#9a9a9a}
.live{padding-top:clamp(72px,9vw,130px)}
.live-kopf{margin-bottom:clamp(36px,5vw,64px)}
/* Live-Seite: ruhige Zeilen statt Textblöcke */
.ls-zwei h2{font-size:clamp(22px,2.2vw,30px)}
.zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.zeilen li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--linie)}
.zeilen strong{font:600 13px/1.4 var(--titel);text-transform:uppercase;letter-spacing:.14em}
.zeilen span{font:300 16px/1.4 var(--text);color:#333;text-align:right}
.zeilen-klein{font:300 14px/1.6 var(--text);color:var(--grau);margin:18px 0 0}
.zeilen-klein a{color:#1a1a1a;white-space:nowrap}
@media (max-width:560px){.zeilen li{display:block}.zeilen span{display:block;text-align:left;margin-top:4px}}
/* Preisseite in denselben Schriften wie die Zeilen auf der Live-Seite */
.preise-text h1{font-size:clamp(22px,2.2vw,30px);margin-bottom:24px}
.preise-text h3{font:600 13px/1.4 var(--titel);text-transform:uppercase;letter-spacing:.14em;margin:0;padding-top:18px;border-top:1px solid var(--linie)}
.preise-text p{font:300 16px/1.6 var(--text);color:#333;margin:6px 0 18px}
.preise-text p:last-of-type{font-size:14px;color:var(--grau);border-top:1px solid var(--linie);padding-top:18px}

/* Typo-System (14.10.): Titel/Labels/Knöpfe kräftig in Montserrat, alles andere Lato Light */
main p,main li,main dd{color:#333}
.karte h3{font-size:15px;letter-spacing:.16em;margin:14px 0 4px}
.karte p{font-size:14px}
.reel-text p:not(.vorzeile),.zwei-text p,.live-kopf p:not(.vorzeile),.ls-einleitung,.einleitung,.anfrage-text p{font-size:17px}

/* Janines Feedback 15.10.2026 */
.held-buchbar{display:block;margin-top:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#777;max-width:62ch;margin-left:auto;margin-right:auto;line-height:1.7}
.zwei-spalten.versal li{text-transform:uppercase;letter-spacing:.1em;font-size:13px}
.polas{padding:clamp(40px,6vw,80px) var(--rand) 0}
.polas h2{text-align:center;margin:0 0 clamp(20px,3vw,32px)}
/* Footer wie bei Chanel: schwarz, Name weiß in Kopfgröße */
.fuss{background:#000;color:#fff;border-top:0}
.fuss-mono{display:block;margin:0 auto 18px;width:56px;height:auto}
.fuss-logo{font:700 clamp(19px,2vw,25px)/1 var(--titel);letter-spacing:.14em;margin:0 0 30px}
.fuss nav a,.fuss-kontakt a{color:#bdbdbd}
.fuss nav a:hover,.fuss-kontakt a:hover{color:#fff}
.fuss-credit{color:#9a9a9a}
.fuss-klein{color:#8a8a8a}
.karte img.fokus-rechts{object-position:88% center}
/* Polas: je zwei Bilder aus einem Setting – Desktop spaltenweise (Paar übereinander), Handy zeilenweise (Paar nebeneinander) */
.polas-raster{grid-auto-flow:column;grid-template-rows:repeat(2,auto)}
@media (max-width:640px){.polas-raster{grid-auto-flow:row;grid-template-rows:none}}

/* ── Typo-System (26.10.2026, Celine): drei Stufen für alle Überschriften ──
   Hero = großer Einstiegssatz · Titel = jeder Seiten-/Abschnittstitel (Maß: „Portfolio“) · Untertitel.
   #inhalt hebt die Regeln über die älteren Einzelregeln oben, damit überall dasselbe gilt. */
:root{--hero-gr:clamp(26px,3.3vw,46px);--titel-gr:clamp(24px,2.8vw,38px);--unter-gr:clamp(17px,1.6vw,22px)}
#inhalt h1,#inhalt h2{font-family:var(--titel);font-weight:700;font-size:var(--titel-gr);letter-spacing:.1em;line-height:1.15}
#inhalt .held-text h1,#inhalt .ls-held h1{font-size:var(--hero-gr)}
#inhalt .bereiche-titel,#inhalt .ls-zwei h2{font-family:var(--titel);font-weight:700;font-size:var(--unter-gr);letter-spacing:.12em}
#inhalt .recht h2{font-size:15px;letter-spacing:.1em}
/* gleiche linke Kante wie die übrigen Abschnitte */
.ref-seite{max-width:var(--max)}
.polas{max-width:var(--max);margin:0 auto}
#inhalt .polas h2{text-align:left}
#inhalt h2.vorzeile{font:300 15px/1.4 var(--text);letter-spacing:.16em}
/* Portfolio-Galerie zeilenweise (app.js verteilt die Kacheln auf Spalten, neue Bilder stehen so oben) */
.galerie.verteilt{columns:auto;display:flex;align-items:flex-start;gap:clamp(8px,1.2vw,16px)}
.g-spalte{flex:1;min-width:0}
@media (max-width:640px){.galerie.verteilt{gap:8px}}
/* Videos unter der Portfolio-Galerie (Runway, Hands) – gleiche Kante und Spaltenbreite wie die Fotos */
.kat-clips{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) var(--rand) 0}
.kat-clips-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:clamp(18px,2.4vw,28px)}
#inhalt .kat-clips h2{margin:0}
.kat-clips-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.kat-clips-raster .clip{flex:none}
@media (max-width:640px){.kat-clips-raster{grid-template-columns:1fr 1fr;gap:8px}}
/* Sedcard: Knöpfe nebeneinander */
#inhalt .sed .knoepfe{flex-direction:row;flex-wrap:nowrap;align-items:stretch}
#inhalt .sed .knoepfe .knopf{flex:1 1 0;min-width:0;padding-inline:12px;text-align:center;white-space:nowrap}
@media (max-width:640px){#inhalt .sed .knoepfe .knopf{font-size:12px;letter-spacing:.12em;padding-inline:8px}}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.refs-fuss{text-align:center;margin:clamp(22px,2.6vw,34px) 0 0}
.refs-fuss .refs-mehr{font-size:12px}
/* Footer auf Schwarz: etwas kräftiger und heller für bessere Lesbarkeit */
.fuss{-webkit-font-smoothing:antialiased}
.fuss nav a,.fuss-kontakt a{color:#e0e0e0;font-weight:400}
.fuss-kontakt{color:#e0e0e0}
.fuss-credit{color:#b5b5b5;font-weight:400}
.fuss-klein{color:#a8a8a8;font-weight:400}
/* Hero-Zeile über dem Spruch trägt jetzt „Professional model based in Munich …“ (Celine 27.10.) – länger, daher kleiner */
.held-zeile{font-size:clamp(13px,1.1vw,16px);letter-spacing:.16em}
.held-satz .held-buchbar{margin-top:0}
/* Prüfung 27.10.: Rates-Zwischentitel als h2 (Überschriften-Reihenfolge), Optik wie vorher */
#inhalt .preise-text h2{font-size:14px;letter-spacing:.14em;margin:26px 0 6px;text-align:left}
/* Sedcard: Bildverhältnis vor dem Laden reservieren, sonst springt der Text (CLS 0,55) */
.sed-seite .sed-bild img{aspect-ratio:auto 1000/1499}
/* Kontrast „Open for …“ von #777 (4,48:1) auf mind. 4,5:1 */
.held-buchbar{color:#6b6b6b}
/* Mobil-Test 27.10.: Kategorie-Leiste startet links, sonst ist der Anfang abgeschnitten und nicht scrollbar */
@media (max-width:760px){.kat-nav{justify-content:flex-start}}
/* Rechtstexte: lange deutsche Wörter dürfen umbrechen (AGB war 3 px zu breit) */
.recht{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Kleine Textlinks mit größerer Tippfläche */
.refs-fuss .refs-mehr,.kat-clips-kopf .refs-mehr{display:inline-block;padding:6px 0}

/* Nach-oben-Knopf */
.nach-oben{position:fixed;right:20px;bottom:20px;z-index:45;width:46px;height:46px;display:grid;place-items:center;background:#fff;color:#000;border:1px solid #000;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s,bottom .3s,background .2s,color .2s}
.nach-oben svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben:hover,.nach-oben:focus-visible{background:#000;color:#fff}
@media (max-width:640px){
  .nach-oben{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .leiste.sichtbar ~ .nach-oben{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* Clip-Band: Pfeile + Ziehen */
.band-rahmen{position:relative}
.band.laeuft{cursor:grab}
.band.zieht,.band.zieht .clip{cursor:grabbing;user-select:none}
.band-pfeil{position:absolute;top:calc(50% - 7px);z-index:3;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:#000;border:1px solid rgba(0,0,0,.12);box-shadow:0 4px 16px rgba(0,0,0,.12);cursor:pointer;transform:translateY(-50%);transition:background .2s,color .2s}
.band-pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.band-pfeil:hover,.band-pfeil:focus-visible{background:#000;color:#fff}
.band-pfeil.zurueck{left:max(8px,calc(var(--rand) - 24px))}
.band-pfeil.vor{right:max(8px,calc(var(--rand) - 24px))}
@media (max-width:640px){.band-pfeil{width:40px;height:40px}}
/* Showreel direkt nach dem Clip-Band (Live-Seite): Luft nach oben */
.live + .reel{padding-top:clamp(56px,8vw,110px)}

/* V44 – Handy-Feinschliff */
.ico-play{width:.8em;height:.95em;fill:currentColor;flex:none}
.knopf .ico-play{margin-right:12px}
.play .ico-play{width:22px;height:26px;margin-left:2px}
.play{padding-left:0}
.held-zeile .umbruch{white-space:nowrap}
.auswahl .galerie-auswahl.zwei{display:flex;columns:auto;gap:8px}
.galerie-auswahl.zwei .spalte{display:block;flex:1;min-width:0}
/* Handy-Menü */
.menue{padding-top:8px}
.menue-haupt>li{border-bottom:1px solid var(--linie)}
.menue-haupt>li>a{display:block;padding:18px 0;font:600 17px/1.2 var(--titel);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.menue-pf>a{padding-bottom:8px!important}
.menue .menue-kat{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;padding:0 0 14px!important}
.menue .menue-kat a{font:300 14px/2.5 var(--text);letter-spacing:.12em;color:#555}
.menue-knopf{display:flex;width:100%;margin-top:28px}
.menue-insta{display:block;margin-top:18px;text-align:center;font:300 13px/2 var(--text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#555}
@media (max-width:640px){
  .hb1 img,.hb3 img{aspect-ratio:4/5;object-position:50% 0}
  .held-zeile .trenn{display:none}
  .held-zeile .umbruch{display:block}
  .held-satz{display:none}
  .held-text{margin-top:40px}
  .held-text .knopf{margin-top:28px}
}

/* V45 – Clip-Band auf dem Handy: 2 Reihen, Link darunter */
.live-fuss{display:none}
@media (max-width:760px){
  .live-kopf .refs-mehr{display:none}
  .live-fuss{display:block;margin-top:22px}
}
@media (max-width:640px){
  .band{gap:8px;padding-bottom:0}
  .band .clip{flex-basis:40vw}
  .band-rahmen+.band-rahmen{margin-top:8px}
  .band-pfeil{display:none}
  .band .clip figcaption{padding:10px 10px 9px}
  .band .clip figcaption strong{font-size:10.5px;letter-spacing:.12em}
  .band .clip figcaption span{font-size:10.5px;letter-spacing:.06em}
}

/* V47 – Formats auf dem Handy: alle 6 sichtbar, 2 Spalten statt Slider */
@media (max-width:640px){
  .formate-liste{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;gap:30px 12px;padding-bottom:0}
  .format-nr{margin:12px 0 6px;padding-top:10px;font-size:11px}
  .format h3{font-size:13px;letter-spacing:.1em}
  .format p:last-child{font-size:13px;line-height:1.45}
}

/* V48 – Referenzen-Band: ruhiger (langsamer, ohne Flimmern), ganzes Band verlinkt */
.laufband{animation-duration:110s;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
@keyframes lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.laufband-link{display:block;color:inherit;text-decoration:none;overflow:hidden}
.laufband-link:hover .laufband{animation-play-state:paused}
/* V50 – Live-Seite: Showreel mit Film links, Text rechts (ohne Clip-Band davor) */
@media (min-width:901px){
  .reel.film-links{grid-template-columns:1.3fr .7fr}
  .reel.film-links .reel-filme{order:-1}
}

/* Kopfmenü bricht unter ~1200px um (Strich rutscht runter, Celine 01.11.) → dort schon Burger; darüber nie umbrechen */
.kopf-links{align-items:center}
.kopf-links a{white-space:nowrap}
@media (max-width:1199px){
  .kopf-links{display:none}
  .burger{display:block}
  .kopf{grid-template-columns:auto 1fr auto}
  .logo{justify-self:center}
}

/* 404 mit Runway-Clip (01.11.2026) */
.f404{max-width:var(--max);margin:0 auto;padding:clamp(32px,6vw,90px) var(--rand) clamp(56px,8vw,110px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:center}
.f404-zahl{font:600 clamp(110px,17vw,250px)/.85 var(--titel);letter-spacing:.06em;margin:0 0 clamp(18px,2.5vw,32px);color:#000}
.f404 h1{font:600 clamp(22px,2.4vw,34px)/1.2 var(--titel);letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;hyphens:none}
.f404-satz{font:300 17px/1.6 var(--text);color:var(--grau);margin:0 0 28px}
.f404 .knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.f404-kats{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(28px,4vw,48px);padding-top:20px;border-top:1px solid var(--linie)}
.f404-kats a{font:300 13px/1 var(--text);letter-spacing:.14em;text-decoration:none;color:var(--grau);padding:6px 0;border-bottom:1px solid transparent}
.f404-kats a:hover{color:#000;border-color:#000}
.f404-clip .clip{margin:0}
.f404-clip video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
@media (max-width:760px){
  .f404{grid-template-columns:1fr;padding-top:20px}
  .f404-clip{order:-1;max-width:300px;width:70%;justify-self:center}
  .f404-text{text-align:center}
  .f404 .knoepfe,.f404-kats{justify-content:center}
}
@media (max-width:640px){.f404 .knopf.hell{display:none}}
.formular button[type=submit]:disabled{opacity:.55;cursor:progress}