/* COLUMPSI – Fassung 2 „Sucher“
   Ein Gedanke trägt alles: Die Seite ist ein Kamerasucher. Fokusrahmen, Auslöser,
   Bildzähler, Filmstreifen. Schrift Anton wie im PDF-Portfolio, sonst nur Schwarz und Weiß. */

@font-face{font-family:"Anton";src:url("fonts/anton-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --schwarz:#000;
  --weiss:#fff;
  --grau:#8e8e8e;
  --dunkel:#3a3a3a;
  --gedimmt:#6b6b6b;
  --linie:#232323;
  --flaeche:#111;
  --rand:clamp(16px,3vw,44px);
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --text:"Inter",system-ui,-apple-system,sans-serif;
  --weich:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--schwarz);color:var(--weiss);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--weiss);outline-offset:4px}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--weiss);color:var(--schwarz)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr--fokus:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;z-index:200;background:var(--weiss);color:var(--schwarz);padding:10px 14px}

/* ---------- Intro: Sucher ---------- */
.intro{position:fixed;inset:0;z-index:150;background:var(--schwarz);display:grid;place-items:center;pointer-events:none}
.ohne-intro .intro,html:not(.js) .intro{display:none}
.intro__rahmen{position:absolute;width:min(70vw,900px);height:min(44vh,420px)}
.intro__rahmen i,.af i{position:absolute;width:22px;height:22px;border:0 solid var(--weiss)}
.intro__rahmen i:nth-child(1),.af i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.intro__rahmen i:nth-child(2),.af i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.intro__rahmen i:nth-child(3),.af i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}
.intro__rahmen i:nth-child(4),.af i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
.intro__name{font:400 clamp(72px,16vw,260px)/1 var(--display);letter-spacing:.01em}
.intro__daten{position:absolute;bottom:clamp(24px,8vh,80px);display:flex;gap:28px;font-size:13px;color:var(--grau);font-variant-numeric:tabular-nums}
.intro__af{color:var(--weiss)}
.intro__blitz{position:absolute;inset:0;background:var(--weiss);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .intro{animation:ausblenden 1s 1.85s cubic-bezier(.65,0,.35,1) forwards}
  .intro__rahmen{animation:fokussieren 1.1s .1s var(--weich) both,weiten 1s 1.85s cubic-bezier(.65,0,.35,1) forwards}
  .intro__name{animation:scharf 1.3s .15s var(--weich) both,abheben 1s 1.85s cubic-bezier(.65,0,.35,1) forwards}
  .intro__daten{animation:weg .4s 1.85s ease forwards}
  .intro__af{animation:sperre .8s .4s steps(2,jump-none) 3 both}
  .intro__blitz{animation:blitz .22s 1.55s ease-out both}
}
@media (prefers-reduced-motion:reduce){.intro{display:none}}
@keyframes fokussieren{from{transform:scale(1.35);opacity:0}to{transform:none;opacity:1}}
@keyframes scharf{from{filter:blur(26px);transform:scale(1.12);opacity:.2}to{filter:blur(0);transform:none;opacity:1}}
@keyframes sperre{from{opacity:.2}to{opacity:1}}
@keyframes blitz{0%{opacity:0}30%{opacity:.85}100%{opacity:0}}
@keyframes ausblenden{to{background-color:transparent;visibility:hidden}}
@keyframes weiten{to{transform:scale(1.6);opacity:0}}
@keyframes abheben{to{transform:scale(1.25);opacity:0;filter:blur(6px)}}
@keyframes weg{to{opacity:0}}
html.intro-laeuft,html.intro-laeuft body{overflow:hidden;height:100%}
.intro.weg{opacity:0;transition:opacity .35s ease}

/* ---------- Autofokus-Zeiger ---------- */
.af{position:fixed;left:0;top:0;z-index:120;width:40px;height:40px;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform,width,height}
.af i{width:10px;height:10px;transition:width .3s var(--weich),height .3s var(--weich)}
.af__text{position:absolute;left:0;bottom:calc(100% + 8px);font-size:12px;letter-spacing:.02em;white-space:nowrap;opacity:0;transition:opacity .2s}
.af.an{opacity:1}
.af.fest .af__text{opacity:1}
.af.fest i{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.mit-af,.mit-af a,.mit-af button{cursor:none}}
.ruhig .af,.lk-offen .af{display:none}

/* ---------- Kopf und HUD ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:18px var(--rand);mix-blend-mode:difference;font-size:14px}
.kopf a{text-decoration:none}
.kopf__marke{font:400 22px/1 var(--display);letter-spacing:.02em}
.kopf nav{display:flex;gap:clamp(16px,2.4vw,36px)}
.kopf nav a{position:relative}
.kopf nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--weich)}
.kopf nav a:hover::after,.kopf nav a:focus-visible::after{transform:scaleX(1)}
.hud{position:fixed;inset:auto 0 0;z-index:60;display:flex;justify-content:space-between;padding:16px var(--rand);font-size:13px;color:var(--weiss);mix-blend-mode:difference;font-variant-numeric:tabular-nums;pointer-events:none}
.hud b{font-weight:500}

/* ---------- 1 Hero ---------- */
.hero{position:relative}
.hero__pin{position:relative;height:100svh;overflow:hidden}
.film .hero{height:260svh}
.film .hero__pin{position:sticky;top:0}
.hero__name{position:absolute;left:0;right:0;top:clamp(70px,11vh,120px);z-index:3;margin:0;text-align:center;font:400 clamp(90px,22vw,440px)/.82 var(--display);white-space:nowrap;pointer-events:none}
.hero__name{transform:translate3d(0,calc(var(--p,0) * -16vh),0) scale(calc(1 - var(--p,0) * .12));opacity:calc(1 - var(--p,0) * 1.25);transform-origin:50% 0}
.hero__name span{display:inline-block}
.hero__bild{position:absolute;top:0;left:50%;width:min(68svh,100vw);height:100svh;margin:0;z-index:2;translate:-50% 0;
  --c:calc(1 - var(--q,0));
  clip-path:inset(calc(var(--c) * 21svh) calc(var(--c) * 14%) calc(var(--c) * 9svh) calc(var(--c) * 14%));
  filter:grayscale(1) contrast(1.05)}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(calc(1.12 - var(--q,0) * .12))}
.hero__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%);opacity:var(--q,0)}
.hero__unten{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(44px,7vh,70px);z-index:3;display:flex;justify-content:space-between;align-items:end;font-size:15px;opacity:calc(1 - var(--p,0) * 3)}
.hero__unten p{margin:0;max-width:24ch}
.hero__scroll{color:var(--grau)}
.hero__zeile{position:absolute;left:var(--rand);bottom:clamp(60px,10vh,110px);z-index:4;margin:0;font:400 clamp(44px,7vw,120px)/.92 var(--display);
  opacity:clamp(0,calc((var(--q,0) - .65) * 4),1);transform:translateY(calc((1 - var(--q,0)) * 8vh))}
@media (prefers-reduced-motion:no-preference){
  .ohne-intro .hero__name span,.hero__name.los span{animation:aufsteigen 1s var(--weich) both;animation-delay:calc(var(--i) * 50ms)}
}
@keyframes aufsteigen{from{clip-path:inset(0 0 100% 0);translate:0 40%}to{clip-path:inset(0);translate:0}}

/* ---------- 2 Kunden (kompakt) ---------- */
.kunden{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:2vw;align-items:start;padding:clamp(80px,14vh,150px) var(--rand);border-top:1px solid var(--linie)}
.kunden__kopf{margin:.6em 0 0;font:500 14px/1.3 var(--text);color:var(--grau)}
.kunden__liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1em .55em;font:400 clamp(30px,4vw,72px)/1.05 var(--display);text-transform:uppercase}
.kunden__liste li{color:var(--gedimmt);transition:color .6s ease;transition-delay:calc(var(--i) * 110ms)}
.kunden__liste li:not(:last-child)::after{content:"/";margin-left:.55em;color:var(--gedimmt)}
.kunden.an .kunden__liste li{color:var(--weiss)}
.kunden__notiz{grid-column:2;margin:22px 0 0;font-size:14px;color:var(--grau)}

/* ---------- 3 Register ---------- */
.register{position:relative;padding:clamp(90px,16vh,180px) var(--rand);border-top:1px solid var(--linie)}
.register__kopf{margin:0 0 4vh;font:500 14px/1 var(--text);color:var(--grau)}
.register ol{list-style:none;margin:0;padding:0}
.register li{border-bottom:1px solid var(--linie);overflow:hidden}
.register a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:.4vh 0;text-decoration:none;font:400 clamp(54px,10vw,190px)/1.02 var(--display);transition:color .3s}
.register a b{font-weight:400;display:inline-block;transition:transform .5s var(--weich)}
.register a small{font:400 14px/1 var(--text);color:var(--grau);white-space:nowrap;font-variant-numeric:tabular-nums}
.register ol:hover a{color:var(--gedimmt)}
.register a:hover,.register a:focus-visible{color:var(--weiss)}
.register a:hover b,.register a:focus-visible b{transform:translateX(2vw)}
.vorschau{position:fixed;left:0;top:0;z-index:40;will-change:transform;width:clamp(200px,22vw,340px);pointer-events:none;clip-path:inset(50% 50% 50% 50%);transition:clip-path .45s var(--weich)}
.vorschau.an{clip-path:inset(0)}
.vorschau img{width:100%;height:auto;max-height:60vh;object-fit:contain}
@media (hover:none){.vorschau{display:none}}

/* ---------- 4 Galerien ----------
   Grundzustand: ruhige, umbrechende Galerie (ohne JavaScript und bei reduzierter Bewegung).
   html.film macht daraus den gepinnten Filmstreifen. */
.kat{position:relative;padding:14vh 0;border-top:1px solid var(--linie)}
.kat__titel{margin:0 0 3vh;padding:0 var(--rand);font:400 clamp(64px,14vw,260px)/.85 var(--display);overflow-wrap:anywhere}
.kat__kopf{display:flex;gap:18px;align-items:baseline;margin:0 0 5vh;padding:0 var(--rand);font-size:14px;color:var(--grau)}
.kat__kopf strong{color:var(--weiss);font-weight:500}
.kat__spur{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:72px clamp(20px,3vw,40px);align-items:start;padding:0 var(--rand)}
.bild{position:relative;margin:0;aspect-ratio:var(--ar)}
.bild button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in;overflow:hidden}
.bild button:focus-visible{outline:2px solid var(--weiss);outline-offset:6px}
.bild img{width:100%;height:100%;object-fit:cover;background:var(--flaeche)}
.bild figcaption{position:absolute;left:0;top:calc(100% + 10px);display:flex;gap:14px;font-size:12px;color:var(--grau);font-variant-numeric:tabular-nums;white-space:nowrap}
.bild figcaption b{color:var(--weiss);font-weight:500}
.kat__ende{grid-column:1/-1;max-width:32ch}
.kat__ende p{margin:0 0 18px;font-size:clamp(18px,1.5vw,22px);line-height:1.4}
.kat__ende a{font-size:14px;color:var(--grau);text-decoration:none;border-bottom:1px solid var(--dunkel);padding-bottom:2px;transition:color .2s,border-color .2s}
.kat__ende a:hover{color:var(--weiss);border-color:var(--weiss)}

.film .kat{height:var(--hoehe,300svh);padding:0}
.film .kat__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.kat__fuellung{display:none}
.film .kat__titel{position:absolute;left:0;bottom:clamp(30px,6vh,70px);margin:0;white-space:nowrap;overflow-wrap:normal;
  font-size:clamp(110px,26vw,480px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4);
  transform:translate3d(calc(var(--p,0) * var(--weg-titel,28vw) * -1),0,0);pointer-events:none}
/* Weiße Füllung: dieselbe Schrift als zweite Ebene genau darüber, von links nach rechts freigelegt */
.film .kat__fuellung{display:block;position:absolute;inset:0;padding-left:var(--rand);color:var(--weiss);-webkit-text-stroke:1.5px var(--weiss);
  clip-path:inset(-25% calc(100% - var(--p,0) * 100%) -25% 0)}
.film .kat__kopf{position:absolute;left:0;top:clamp(64px,9vh,96px);z-index:5;margin:0;mix-blend-mode:difference}
.film .kat__spur{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:clamp(28px,5vw,90px);padding:0 22vw 0 46vw;
  transform:translate3d(var(--x,0px),0,0) skewX(var(--schief,0deg));will-change:transform}
.film .bild{flex:none;height:var(--hg);translate:0 var(--y,0)}
.film .bild button{opacity:calc(.4 + var(--r,1) * .6);transform:scale(calc(.95 + var(--r,1) * .05));transform-origin:50% 50%}
.film .kat__ende{flex:none;width:min(32ch,70vw);align-self:center}

/* ---------- 5 Über mich: genau ein Bildschirm ---------- */
.ueber{display:grid;grid-template-columns:5fr 7fr;min-height:100svh;border-top:1px solid var(--linie)}
.ueber__bild{margin:0;overflow:hidden;filter:grayscale(1);max-height:100svh}
.ueber__bild img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.ueber__text{align-self:center;padding:clamp(80px,12vh,120px) var(--rand) clamp(60px,9vh,100px) clamp(28px,5vw,90px);max-width:760px}
.ueber__titel{margin:0 0 4vh;font:400 clamp(64px,8.5vw,170px)/.85 var(--display);white-space:nowrap}
.ueber__text p:not(.gross){color:#cfcfcf;max-width:56ch}
.gross{font-size:clamp(20px,1.8vw,28px);line-height:1.35;font-weight:500;margin-top:0;max-width:30ch}
.fakten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:4vh 0 0;padding-top:24px;border-top:1px solid var(--linie)}
.fakten dt{color:var(--grau);font-size:13px}
.fakten dd{margin:6px 0 0}
.fakten a{text-decoration:none;border-bottom:1px solid var(--dunkel)}
.fakten a:hover{border-color:var(--weiss)}

/* ---------- 6 Kontakt ---------- */
.kontakt{padding:clamp(100px,18vh,200px) var(--rand) var(--rand);border-top:1px solid var(--linie);overflow:hidden}
.kontakt__titel{margin:0;font:400 clamp(56px,21vw,440px)/.82 var(--display);white-space:nowrap;clip-path:inset(-50% -10% -.06em -10%)}
.kontakt__titel span{display:inline-block;transform:translate3d(0,calc((1 - var(--k,1)) * 110%),0);transition:transform .9s var(--weich);transition-delay:calc(var(--i) * 40ms)}
.kontakt__mail{display:inline-block;margin-top:5vh;font:400 clamp(30px,5.4vw,96px)/1 var(--display);text-decoration:none;position:relative}
.kontakt__mail::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:var(--weiss);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--weich)}
.kontakt__mail:hover::after,.kontakt__mail:focus-visible::after{transform:scaleX(1);transform-origin:left}
.kontakt__raster{display:grid;grid-template-columns:repeat(12,1fr);column-gap:2vw;margin-top:8vh}
.kontakt__raster p{grid-column:1/6;margin:0;max-width:40ch;color:#cfcfcf}
.kontakt__raster .fakten{grid-column:7/-1;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;border:0}
.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:16vh;padding:20px 0 64px;border-top:1px solid var(--linie);color:var(--grau);font-size:13px}
.fuss span:last-child{display:flex;gap:24px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--weiss)}

/* ---------- Datenschutz-Hinweis ---------- */
.hinweis{position:fixed;left:var(--rand);bottom:clamp(52px,8vh,72px);z-index:90;width:min(420px,calc(100vw - 2 * var(--rand)));padding:22px 24px;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:14px;line-height:1.5;
  opacity:0;transform:translateY(12px);transition:opacity .5s var(--weich),transform .5s var(--weich)}
.hinweis.an{opacity:1;transform:none}
.hinweis[hidden]{display:none}
.hinweis i{position:absolute;width:14px;height:14px;border:0 solid var(--weiss)}
.hinweis i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}
.hinweis i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.hinweis i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}
.hinweis i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.hinweis p{margin:0 0 14px;color:#cfcfcf}
.hinweis strong{color:var(--weiss);font-weight:500}
.hinweis a{color:var(--weiss)}
.hinweis__ok{all:unset;cursor:pointer;padding:10px 18px;border:1px solid var(--weiss);font-weight:500;font-size:14px;transition:background .2s,color .2s}
.hinweis__ok:hover,.hinweis__ok:focus-visible{background:var(--weiss);color:var(--schwarz)}

/* ---------- Leuchtkasten ---------- */
.lk{width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--weiss);overflow:hidden}
.lk::backdrop{background:#000}
html.lk-offen,html.lk-offen body{overflow:hidden}
.mit-af .lk,.mit-af .lk *{cursor:default}
.mit-af .lk button{cursor:pointer}
.lk__fehler{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;max-width:32ch;text-align:center;color:var(--grau);font-size:15px}
.lk__fehler[hidden]{display:none}
.lk__buehne{position:absolute;inset:70px 90px 80px;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.lk__buehne img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:0 0}
.lk__leiste{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:18px var(--rand);font-size:13px;font-variant-numeric:tabular-nums}
.lk__zaehler{color:var(--grau)}
.lk button{all:unset;cursor:pointer;color:var(--weiss);font-size:14px;padding:10px}
.lk button:focus-visible{outline:2px solid var(--weiss)}
.lk .lk__pfeil{position:absolute;top:0;bottom:0;width:90px;display:flex;align-items:center;justify-content:center;padding:0;font-size:13px;color:var(--grau);transition:color .2s}
.lk .lk__pfeil:hover{color:var(--weiss)}
.lk .lk__zurueck{left:0}.lk .lk__vor{right:0}

/* ---------- Rechtstexte ---------- */
.recht{max-width:68ch;padding:130px var(--rand) 80px}
.recht h1{font:400 clamp(56px,9vw,140px)/.9 var(--display);margin:0 0 6vh}
.recht h2{font:500 18px/1.3 var(--text);margin:2.4em 0 .5em}
.recht p,.recht li{color:#d6d6d6}
.recht a{text-decoration:none;border-bottom:1px solid var(--dunkel)}
.recht__stand{margin-top:8vh;font-size:13px;color:var(--grau)!important}

/* ---------- Ruhige Fassung (ohne JavaScript oder bei reduzierter Bewegung) ---------- */
html:not(.film) .hero__zeile{display:none}
html:not(.film) .kunden__liste li{color:var(--weiss);transition:none}
html:not(.film) .kontakt__titel span{transform:none}

/* ---------- Tablet und Handy ---------- */
@media (max-width:900px){
  .hero__bild{clip-path:inset(calc(var(--c) * 30svh) calc(var(--c) * 16%) calc(var(--c) * 20svh) calc(var(--c) * 16%))}
  .film .kat__spur{padding:0 30vw 0 18vw}
  .film .kat__titel{font-size:clamp(110px,40vw,280px)}
  .ueber{grid-template-columns:1fr}
  .ueber__bild{height:62svh}
  .ueber__titel{white-space:normal}
  .kunden{grid-template-columns:1fr;row-gap:20px}
  .kunden__notiz{grid-column:1;margin:0}
  .fakten{grid-template-columns:1fr 1fr}
  .kontakt__raster p,.kontakt__raster .fakten{grid-column:1/-1}
  .kontakt__raster .fakten{margin-top:32px}
  .lk__buehne{inset:60px 8px 80px}
  .lk .lk__pfeil{top:auto;bottom:0;height:70px;width:50%}
}
@media (max-width:560px){
  body{font-size:16px}
  .kopf nav a.nur-gross{display:none}
  .fakten,.kontakt__raster .fakten{grid-template-columns:1fr}
  .hud{font-size:12px}
}