/* adagraphy – Photo & Film · Website-Styles
   Schriften lokal eingebunden (keine Verbindung zu Google). */
@font-face{font-family:'Bodoni Moda';src:url(../fonts/bodoni-moda-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(../fonts/bodoni-moda-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(../fonts/bodoni-moda-latin-400-italic.woff2) format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(../fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(../fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(../fonts/hanken-grotesk-latin-600-normal.woff2) format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'DM Mono';src:url(../fonts/dm-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url(../fonts/dm-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --bg:#0D0C0A;--bg2:#15130F;--bg3:#1B1914;--black:#070605;
  --ink:#F1EBE0;--ink2:#DCD4C7;--ink3:#CFC7BA;--muted:#B9B1A4;--muted2:#A79F92;--faint:#8C8477;
  --gold:#C9A878;--gold2:#D8BC8F;--red:#E0533D;
  --line:rgba(241,235,224,.12);--line2:rgba(241,235,224,.3);--stroke:rgba(241,235,224,.55);--hdr:rgba(22,20,16,.8);--hdr2:rgba(13,12,10,.92);--menu:rgba(10,9,7,.98);--box:#16140F;--err:#F3C3BA;
  --serif:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
  --sans:'Hanken Grotesk','Helvetica Neue',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.1,1);
  --wrap:1360px;
  --pad:clamp(20px,3vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold2)}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:300;background:var(--gold);color:var(--bg);padding:10px 16px;font-weight:600}
.skip:focus{top:16px;color:var(--bg)}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
em,.it{font-style:italic}
.gold{color:var(--gold2)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:24px}
.h-xl{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.5vw,80px);line-height:1.02;letter-spacing:-.02em}
.h-xl em,.h-l em{color:var(--gold2)}
.h-l{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.6vw,66px);line-height:1.04;letter-spacing:-.015em}
.lead{color:var(--muted);font-size:18px;max-width:600px}
.outline{color:transparent;-webkit-text-stroke:1px var(--stroke)}
.section{padding:clamp(90px,11vw,150px) 0}
.alt{background:var(--bg2)}
.dark{background:var(--black)}
.row-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin-bottom:clamp(48px,6vw,80px)}
.link-line{display:inline-flex;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid rgba(241,235,224,.4)}
.arrow{display:inline-block;transition:transform .4s}
a:hover .arrow,button:hover .arrow{transform:translateX(6px)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:1px solid var(--line2);background:transparent;color:var(--ink);font-weight:600;cursor:pointer;transition:background .4s,color .4s,border-color .4s;text-align:center}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.btn-lg{min-height:56px;padding:0 34px}
.btn[disabled]{opacity:.5;cursor:wait}

/* ---------- Preloader ---------- */
.pre{position:fixed;inset:0;z-index:500;pointer-events:none}
.pre-half{position:absolute;left:0;right:0;height:50.5%;background:var(--bg);transition:transform 1s cubic-bezier(.75,0,.2,1)}
.pre-top{top:0}.pre-bot{bottom:0}
.pre-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .5s,transform .5s}
.pre-bird{width:150px;clip-path:inset(0 100% 0 0);animation:drawIn 1.7s cubic-bezier(.6,0,.2,1) .15s forwards}
.pre-word{width:250px;opacity:0;animation:blurIn 1s ease .9s forwards}
.pre-sub{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold2);opacity:0;animation:blurIn 1s ease 1.2s forwards}
.pre-bar{width:220px;height:1px;background:rgba(241,235,224,.15);margin-top:12px;overflow:hidden}
.pre-bar i{display:block;height:1px;background:var(--gold2);transform:scaleX(0);transform-origin:left;animation:barIn 1.9s cubic-bezier(.6,0,.2,1) .15s forwards}
.pre-num{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--muted2);min-width:60px;text-align:center}
.pre.is-done .pre-c{opacity:0;transform:translateY(-24px)}
.pre.is-open .pre-top{transform:translateY(-100%)}
.pre.is-open .pre-bot{transform:translateY(100%)}
.pre.is-gone{display:none}
html.no-pre .pre{display:none}
@keyframes drawIn{to{clip-path:inset(0 0 0 0)}}
@keyframes blurIn{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes barIn{to{transform:scaleX(1)}}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;padding:16px 16px 0}
.hdr-in{max-width:1280px;margin:0 auto;background:var(--hdr);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:40px;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:10px 12px 10px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .4s,box-shadow .4s}
.hdr.is-scrolled .hdr-in{background:var(--hdr2)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;flex:none}
.brand img:first-child{height:34px;width:auto}
.brand img:last-child{height:12px;width:auto}
.nav{display:flex;align-items:center;justify-content:center;gap:4px 30px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.nav a{padding:6px 0;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.nav a:hover{border-bottom-color:rgba(216,188,143,.6)}
.nav a[aria-current=page]{color:var(--gold2);border-bottom-color:var(--gold2)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.circ{width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,border-color .3s;background:transparent;cursor:pointer;color:var(--ink)}
.circ:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill{min-height:46px;padding:0 26px;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--bg);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;transition:background .3s,border-color .3s}
.pill:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.burger{display:none}
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:flex}
  .hdr-in{padding-left:18px}
}
@media (max-width:560px){
  .hdr{padding:10px 10px 0}
  .hdr-actions .hide-s{display:none}
  .pill{padding:0 18px}
  .brand img:last-child{display:none}
}
.menu{position:fixed;inset:0;z-index:150;background:var(--menu);display:flex;flex-direction:column;justify-content:center;padding:100px 32px 40px;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.menu.is-open{opacity:1;visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:6px}
.menu nav a{font-family:var(--serif);font-size:clamp(38px,9vw,64px);line-height:1.15;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.menu.is-open nav a{opacity:1;transform:none}
.menu nav a:nth-child(2){transition-delay:.05s}.menu nav a:nth-child(3){transition-delay:.1s}.menu nav a:nth-child(4){transition-delay:.15s}.menu nav a:nth-child(5){transition-delay:.2s}.menu nav a:nth-child(6){transition-delay:.25s}.menu nav a:nth-child(7){transition-delay:.3s}
.menu nav a em{color:var(--gold2)}
.menu-foot{margin-top:48px;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;color:var(--muted)}
.menu-close{position:absolute;top:22px;right:22px}
body.menu-open{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:max(720px,100svh);margin-top:-84px;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--bg);will-change:transform}
.slide{position:absolute;inset:0;opacity:0;animation:slide 21s infinite}
.slide img{width:100%;height:100%;object-fit:cover;animation:kb 21s infinite linear}
.slide:nth-child(1){opacity:1}
.slide:nth-child(2),.slide:nth-child(2) img{animation-delay:7s}
.slide:nth-child(3),.slide:nth-child(3) img{animation-delay:14s}
@keyframes slide{0%{opacity:0}5%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
@keyframes kb{0%{transform:scale(1.16) translate(1.5%,1%)}100%{transform:scale(1)}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,10,.88) 0%,rgba(13,12,10,.55) 42%,rgba(13,12,10,.05) 75%),linear-gradient(0deg,rgba(13,12,10,.92) 0%,rgba(13,12,10,0) 45%),linear-gradient(180deg,rgba(13,12,10,.6) 0%,rgba(13,12,10,0) 25%)}
@media (max-width:760px){.hero-shade{background:linear-gradient(0deg,rgba(13,12,10,.95) 0%,rgba(13,12,10,.35) 60%,rgba(13,12,10,.55) 100%)}}
.grain{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none;opacity:.1;mix-blend-mode:overlay;animation:grain .9s steps(4) infinite;z-index:3}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
.lb{position:absolute;left:0;right:0;height:50%;background:var(--bg);z-index:4;transition:height 1.7s cubic-bezier(.75,0,.2,1)}
.lb-t{top:0}.lb-b{bottom:0}
.is-ready .lb{height:40px}
.is-ready .lb-t{height:0}
@media (max-width:760px){.is-ready .lb{height:0}}
.frame{position:absolute;inset:124px 40px 72px;z-index:5;pointer-events:none}
.frame i{position:absolute;width:28px;height:28px;border-color:rgba(241,235,224,.6);border-style:solid;border-width:0}
.frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.frame .rec{position:absolute;right:44px;top:4px;display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.18em}
.frame .geo{position:absolute;left:44px;top:4px;font-family:var(--mono);font-size:12px;letter-spacing:.18em}
.dot-rec{width:9px;height:9px;border-radius:50%;background:var(--red);display:inline-block;margin-right:8px;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
@media (max-width:760px){.frame{display:none}}
.hero-c{position:relative;z-index:6;width:100%;padding-bottom:clamp(110px,14vh,140px)}
.hero-c .wrap{padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px)}
.hero h1{font-weight:400}
.hero .kicker{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold2);margin-bottom:26px}
.hero .big{display:block;font-family:var(--serif);font-size:clamp(54px,9vw,136px);line-height:.95;letter-spacing:-.025em}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:block;transform:translateY(110%);transition:transform 1.3s var(--ease)}
.is-ready .line>span{transform:none}
.is-ready .line:nth-child(2)>span{transition-delay:.18s}
.hero .big .line:nth-child(2)>span{font-style:italic;color:var(--gold2)}
.hero p{max-width:520px;margin-top:32px;font-size:19px;color:var(--ink2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.fu{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.is-ready .fu{opacity:1;transform:none}
.is-ready .fu.d1{transition-delay:.35s}.is-ready .fu.d2{transition-delay:.55s}.is-ready .fu.d3{transition-delay:.75s}
.hero-meta{position:absolute;z-index:6;right:72px;bottom:120px;display:flex;flex-direction:column;align-items:flex-end;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted2)}
.hero-meta .bar{width:180px;height:1px;background:rgba(241,235,224,.2);overflow:hidden}
.hero-meta .bar i{display:block;height:1px;background:var(--gold2);transform-origin:left;animation:prog 7s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:900px){.hero-meta{display:none}}
.scroll-hint{position:absolute;z-index:6;left:50%;bottom:44px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted2);font-family:var(--mono);font-size:10px;letter-spacing:.3em}
.mouse{width:24px;height:40px;border:1px solid var(--muted2);border-radius:12px;display:flex;justify-content:center;padding-top:7px}
.mouse i{width:3px;height:8px;border-radius:2px;background:var(--gold2);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@media (max-width:760px){.scroll-hint{display:none}}

/* Seiten-Hero (Unterseiten) */
.phero{padding:clamp(90px,12vw,140px) 0 clamp(60px,8vw,100px)}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7vw,108px);line-height:.98;letter-spacing:-.025em}
.phero h1 .line:nth-child(2)>span{font-style:italic;color:var(--gold2)}
.phero h1 .small{font-size:.42em;letter-spacing:0;line-height:1.6;font-style:normal;color:var(--ink)}
.phero .lead{margin-top:36px}
.split{display:flex;flex-wrap:wrap;gap:56px 80px;align-items:flex-end}
.split>.grow{flex:999 1 520px;min-width:0}
.split>.side{flex:1 1 300px;max-width:440px}

/* ---------- Marquee ---------- */
.mq-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.mq{display:flex;width:max-content;gap:48px;align-items:center;animation:marquee 45s linear infinite;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,44px)}
.mq.rev{animation-direction:reverse;animation-duration:60s}
.mq-band:hover .mq{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.big-band{overflow:hidden;padding:40px 0 clamp(80px,10vw,120px);display:flex;flex-direction:column;gap:8px}
.big-band div{white-space:nowrap;font-family:var(--serif);font-size:clamp(64px,12vw,190px);line-height:1.05;letter-spacing:-.02em;will-change:transform}
.big-band div:first-child{font-style:italic}

/* ---------- Reveal-Animationen (per JS) ---------- */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.1s}.js .rv-d2{transition-delay:.2s}.js .rv-d3{transition-delay:.3s}
.js .unveil{clip-path:inset(14% 10% 14% 10%);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.js .unveil.in{clip-path:inset(0 0 0 0)}
.js .unveil img{transform:scale(1.2);transition:transform 1.8s var(--ease)}
.js .unveil.in img{transform:scale(1)}
.js .grow-line{transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.js .grow-line.in{transform:scaleX(1)}
.words .w{opacity:.16;transition:opacity .5s}
.words .w.on{opacity:1}
.words .w.g{color:var(--gold2);font-style:italic}
.par{will-change:transform}

/* ---------- Philosophie ---------- */
.philo{display:flex;flex-wrap:wrap;gap:56px 80px;align-items:center}
.philo .txt{flex:999 1 560px;min-width:0}
.philo h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.2vw,58px);line-height:1.14;letter-spacing:-.015em;text-wrap:pretty}
.philo .lead{margin-top:40px}
.philo figure{flex:1 1 300px;max-width:420px}
.cap{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted2)}
.ratio{position:relative;overflow:hidden;background:var(--bg3)}
.ratio>img,.ratio>picture>img,.ratio>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zoom img{transition:transform 1.4s var(--ease),filter .9s}
.zoom:hover img{transform:scale(1.06)}
.r-45{aspect-ratio:4/5}.r-23{aspect-ratio:2/3}.r-34{aspect-ratio:3/4}.r-11{aspect-ratio:1/1}.r-916{aspect-ratio:9/16}

/* ---------- Leistungen-Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:32px}
.card{display:flex;flex-direction:column;gap:20px}
.card .ratio .num{position:absolute;left:18px;top:16px;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.2em}
.card h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1}
.card p{color:var(--muted)}
.ticks{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:18px;font-size:15px}
.ticks li{display:flex;gap:12px}
.ticks li::before{content:"";flex:none;width:14px;height:1px;background:var(--gold);margin-top:12px}
.bw img{filter:grayscale(1) contrast(1.05)}
.bw:hover img{filter:none}
.cc-banner{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px;padding:36px 40px;border:1px solid rgba(201,168,120,.45);background:var(--bg3);transition:border-color .4s,transform .6s var(--ease)}
.cc-banner:hover{border-color:var(--gold);transform:translateY(-4px);color:var(--ink)}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;background:var(--gold);color:var(--bg);padding:5px 12px;display:inline-block}
.cc-banner .t{flex:999 1 420px;display:flex;flex-direction:column;gap:6px}
.cc-banner .t b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1}
.cc-banner .t span{color:var(--muted)}

/* ---------- Portfolio-Raster ---------- */
.mosaic{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.mosaic .col{flex:1 1 300px;display:flex;flex-direction:column;gap:28px;min-width:0}
.mosaic .col.offset{margin-top:120px}
@media (max-width:980px){.mosaic .col.offset{margin-top:0}}

/* ---------- Zoom-Statement ---------- */
.zsec{position:relative;height:200vh}
.zsec .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.zsec .zimg{position:absolute;inset:0;overflow:hidden;clip-path:inset(24% 34% 24% 34%)}
.zsec .zimg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.25)}
.zsec .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,12,10,.78),rgba(13,12,10,.12) 55%);opacity:0}
.zsec .ztxt{position:relative;z-index:2;text-align:center;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:22vh;opacity:0;transform:translateY(60px)}
.zsec h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.5vw,120px);line-height:.98;letter-spacing:-.025em;text-shadow:0 4px 40px rgba(0,0,0,.4)}
.zsec h2 em{color:var(--gold2)}
.btn-glass{border-color:rgba(241,235,224,.7);background:rgba(13,12,10,.3);backdrop-filter:blur(6px)}
@media (max-width:760px){.zsec .zimg{clip-path:inset(18% 14% 18% 14%)}}

/* ---------- Filme ---------- */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:24px;align-items:end}
.reel{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000}
.reel video,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .tag-rec{position:absolute;left:16px;top:14px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-shadow:0 1px 8px rgba(0,0,0,.6);display:flex;align-items:center}
.reel .scrub{position:absolute;left:16px;right:16px;bottom:16px;height:2px;background:rgba(241,235,224,.25);z-index:2}
.reel .scrub i{display:block;height:2px;background:var(--gold2);width:0}

/* ---------- Über mich ---------- */
.about{display:flex;flex-wrap:wrap;gap:64px 96px;align-items:center}
.about .pic{flex:1 1 340px;max-width:520px;position:relative}
.about .txt{flex:999 1 460px;min-width:0}
.about .body{display:flex;flex-direction:column;gap:18px;max-width:620px;color:var(--ink3);font-size:18px}
.about .sig{font-family:var(--serif);font-style:italic;font-size:44px;color:var(--gold2)}
.badge-spin{position:absolute;right:-54px;bottom:-54px;width:150px;height:150px;animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:760px){.badge-spin{right:-10px;bottom:-40px;width:120px;height:120px}}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:48px 40px}
.steps li{display:flex;flex-direction:column;gap:14px}
.steps .n{font-family:var(--serif);font-style:italic;font-size:64px;line-height:1;color:var(--gold2);display:inline-block;align-self:flex-start;will-change:transform}
.steps h3{font-size:21px;font-weight:600}
.steps p{color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-wrap:wrap;gap:48px 96px}
.faq .l{flex:1 1 320px}
.faq .r{flex:999 1 560px;min-width:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;font-size:21px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq .plus{font-family:var(--serif);font-size:32px;color:var(--gold);line-height:1;transition:transform .4s;flex:none}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{margin:0 0 28px;color:var(--muted);max-width:720px}
.faq details p a{color:var(--gold2);text-decoration:underline}

/* ---------- Formular ---------- */
.contact{display:flex;flex-wrap:wrap;gap:64px 96px}
.contact .l{flex:1 1 340px;min-width:0}
.contact .r{flex:999 1 560px;min-width:0}
.contact address{font-style:normal;display:flex;flex-direction:column;gap:22px;font-size:18px;margin-top:48px}
.contact address a,.contact address span{display:flex;align-items:center;gap:16px;min-height:44px}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:28px}
.form .full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:10px;font-size:13px;letter-spacing:.08em;color:var(--muted2);text-transform:uppercase}
.fld input,.fld textarea{font:inherit;font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line2);padding:12px 0;min-height:48px;border-radius:0;transition:border-color .3s}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--gold)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.fld textarea{resize:vertical;min-height:120px}
.fld input[type=date]{color-scheme:dark}
.choice{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.choice legend{font-size:13px;letter-spacing:.08em;color:var(--muted2);text-transform:uppercase;padding:0;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border:1px solid var(--line2);transition:background .3s,color .3s,border-color .3s}
.chips input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:600}
.chips input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.check{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--muted);cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--gold);flex:none}
.check a{color:var(--gold2);text-decoration:underline}
.check.boxed{align-items:center;padding:18px 20px;border:1px solid rgba(201,168,120,.45);color:var(--ink);font-size:16px}
.check.boxed small{color:var(--muted);font-size:15px}
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.form-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.form-end small{font-size:13px;color:var(--faint)}
.form-msg{padding:16px 18px;border:1px solid rgba(224,122,106,.6);background:rgba(224,122,106,.08);color:var(--err)}
.success{border:1px solid rgba(201,168,120,.5);padding:64px 48px;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.success h3{font-family:var(--serif);font-weight:400;font-size:40px}
.success p{color:var(--muted);max-width:480px}

/* ---------- Footer ---------- */
.ftr{border-top:1px solid var(--line);padding:80px 0 40px;overflow:hidden}
.ftr .mq{font-size:clamp(70px,12vw,180px);line-height:1;gap:56px;margin-bottom:80px;animation-duration:60s;animation-direction:reverse}
.ftr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:40px}
.ftr-grid h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted2);font-weight:400;margin-bottom:6px}
.ftr-grid nav,.ftr-grid div{display:flex;flex-direction:column;gap:10px;font-size:15px}
.ftr-grid p{color:var(--muted2);font-size:15px}
.ftr-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--faint)}
.ftr-bottom button{background:none;border:0;padding:0;color:var(--faint);cursor:pointer;font-size:13px;text-decoration:underline}

/* Instagram-Button */
.igfab{position:fixed;right:24px;bottom:24px;z-index:90;width:60px;height:60px;border-radius:50%;background:var(--gold);color:var(--bg);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
.igfab:hover{transform:scale(1.08);color:var(--bg)}
.igfab::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold);animation:igp 2.4s ease-out infinite}
@keyframes igp{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
@media (max-width:560px){.igfab{right:16px;bottom:16px;width:54px;height:54px}}

/* Scroll-Fortschritt */
.sprog{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.sprog span{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted2);writing-mode:vertical-rl}
.sprog div{width:1px;height:140px;background:var(--line)}
.sprog i{display:block;width:1px;height:140px;background:var(--gold2);transform:scaleY(0);transform-origin:top}
@media (max-width:1100px){.sprog{display:none}}

/* ---------- Cookie-Banner ---------- */
.ck{position:fixed;left:20px;bottom:20px;z-index:200;max-width:460px;width:calc(100% - 40px);background:var(--bg3);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);padding:28px;display:flex;flex-direction:column;gap:16px;transform:translateY(30px);opacity:0;visibility:hidden;transition:opacity .5s,transform .6s var(--ease),visibility .5s}
.ck.is-open{opacity:1;transform:none;visibility:visible}
.ck h2{font-family:var(--serif);font-weight:400;font-size:24px;display:flex;align-items:center;gap:12px}
.ck p{font-size:14px;line-height:1.55;color:var(--ink3)}
.ck p a{color:var(--gold2);text-decoration:underline}
.ck-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ck-btns .btn{min-height:46px;padding:0 10px;font-size:15px}
.ck-link{align-self:center;background:none;border:0;color:var(--ink3);text-decoration:underline;cursor:pointer;font-size:14px;min-height:32px}
.ck-modal{position:fixed;inset:0;z-index:210;background:rgba(7,6,5,.8);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.ck-modal.is-open{opacity:1;visibility:visible}
.ck-box{width:100%;max-width:640px;max-height:calc(100vh - 40px);overflow-y:auto;background:var(--box);border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.ck-head{padding:32px 36px 22px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.ck-head h2{font-family:var(--serif);font-weight:400;font-size:34px}
.ck-head p{color:var(--muted);font-size:15px}
.ck-head p a{color:var(--gold2);text-decoration:underline}
.ck-cats{padding:6px 36px}
.ck-cat{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.ck-cat .t{flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.ck-cat b{font-size:17px}
.ck-cat span{font-size:14px;color:var(--muted2)}
.ck-cat .always{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--gold2);white-space:nowrap}
.switch{position:relative;flex:none;width:54px;height:30px}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:2}
.switch i{position:absolute;inset:0;border-radius:15px;border:1px solid rgba(241,235,224,.35);transition:background .3s,border-color .3s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--muted2);transition:transform .35s var(--ease),background .3s}
.switch input:checked+i{background:var(--gold);border-color:var(--gold)}
.switch input:checked+i::after{transform:translateX(24px);background:var(--bg)}
.switch input:focus-visible+i{outline:2px solid var(--gold);outline-offset:3px}
.ck-foot{padding:22px 36px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:10px}
.ck-foot .btn{min-height:48px;padding:0 12px}

/* ---------- Rechtstexte ---------- */
.legal{display:flex;flex-wrap:wrap;gap:48px 96px;align-items:flex-start}
.legal .toc{flex:1 1 260px;max-width:320px;font-size:15px;position:sticky;top:120px}
@media (max-width:900px){.legal .toc{position:static}}
.legal .toc a{display:block;padding:7px 0;color:var(--muted);border-bottom:1px solid rgba(241,235,224,.08)}
.legal .toc a:hover{color:var(--gold2)}
.legal article{flex:999 1 560px;min-width:0;max-width:780px;line-height:1.7}
.legal article h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:60px 0 16px}
.legal article h2:first-child{margin-top:0}
.legal article h3{font-size:18px;font-weight:600;margin:28px 0 8px}
.legal article p,.legal article li{color:var(--ink3)}
.legal article p{margin:0 0 14px}
.legal article ul{list-style:disc;padding-left:22px;margin:0 0 14px}
.legal article a{color:var(--gold2);text-decoration:underline}

/* 404 */
.nf{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:28px;padding:80px 24px}

/* ---------- Galerie-Lightbox (Portfolio) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:48px}
.fbtn{min-height:44px;padding:0 22px;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;font-size:15px;transition:background .3s,color .3s}
.fbtn[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:600}
.masonry{columns:3 300px;column-gap:24px}
.masonry figure{margin:0 0 24px;break-inside:avoid;transition:opacity .4s,transform .5s var(--ease)}
.masonry figure.hide{display:none}
.tile{position:relative;overflow:hidden;cursor:zoom-in;display:block;width:100%;padding:0;border:0;background:#000}
.tile img{width:100%;height:auto;transition:transform 1.3s var(--ease),opacity .6s}
.tile:hover img{transform:scale(1.05);opacity:.82}
.tile .tcap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0));transform:translateY(100%);transition:transform .5s var(--ease);text-align:left;display:flex;flex-direction:column}
.tile:hover .tcap,.tile:focus-visible .tcap{transform:none}
.tile .tcap b{font-family:var(--serif);font-weight:400;font-size:22px;font-style:italic}
.tile .tcap span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold2)}
.plb{position:fixed;inset:0;z-index:250;background:rgba(7,6,5,.96);display:flex;align-items:center;justify-content:center;padding:72px 88px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.plb.is-open{opacity:1;visibility:visible}
.plb img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .3s}
.plb .c{position:absolute;left:32px;bottom:24px;display:flex;flex-direction:column}
.plb .c b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:24px}
.plb .c span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted2)}
.plb .x{position:absolute;top:20px;right:24px}
.plb .pv{position:absolute;left:20px;top:50%;transform:translateY(-50%)}
.plb .nx{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
@media (max-width:700px){.plb{padding:72px 12px}.plb .pv,.plb .nx{top:auto;bottom:20px;transform:none}.plb .pv{left:auto;right:84px}.plb .c{bottom:84px;left:16px}}

/* Leistungen Detail */
.feature{display:flex;flex-wrap:wrap;gap:56px 96px;align-items:center}
.feature.rev{flex-wrap:wrap-reverse}
.feature .media{flex:1 1 380px;min-width:0}
.feature .media.narrow{max-width:420px}
.feature .txt{flex:1 1 420px;min-width:0}
.feature .txt p{color:var(--muted);font-size:18px;margin-bottom:32px}
.feature ul.list{border-top:1px solid var(--line);margin-bottom:8px}
.feature ul.list li{padding:16px 0;border-bottom:1px solid var(--line)}
.numlist{display:flex;flex-direction:column;gap:18px;margin-top:40px}
.numlist li{display:flex;gap:18px;align-items:baseline}
.numlist b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;color:var(--gold2)}

/* Kontakt-Split */
.ksplit{display:flex;flex-wrap:wrap;align-items:stretch;margin-top:-84px}
.ksplit .media{flex:1 1 420px;min-height:640px;position:relative;overflow:hidden}
.ksplit .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.ksplit .media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,12,10,.88) 0%,rgba(13,12,10,0) 55%)}
.ksplit .media address{position:absolute;left:40px;right:40px;bottom:40px;z-index:2;font-style:normal;display:flex;flex-direction:column;gap:14px;font-size:20px}
.ksplit .media address a,.ksplit .media address span{display:flex;align-items:center;gap:14px;min-height:44px}
.ksplit .body{flex:1 1 560px;min-width:0;padding:170px clamp(24px,6vw,96px) 120px}
@media (max-width:760px){.ksplit .media{min-height:440px}.ksplit .body{padding-top:72px}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv,.js .unveil,.fu,.line>span{opacity:1 !important;transform:none !important;clip-path:none !important}
  .words .w{opacity:1}
  .zsec{height:auto}.zsec .stick{position:relative;height:90vh}.zsec .zimg{clip-path:none}.zsec .zimg img{transform:none}.zsec .ztxt,.zsec .shade{opacity:1;transform:none}
}
.kh .line:nth-child(2)>span{font-style:italic;color:var(--gold2)}
.kh{font-size:clamp(44px,5.4vw,84px)}
.phero h1,.h-xl,.h-l{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:560px){
  .phero h1{font-size:clamp(32px,9.6vw,46px)}
  .hero .kicker{font-size:11px;letter-spacing:.18em}
  .ck{left:10px;bottom:10px;width:calc(100% - 20px);padding:22px}
  .ck p{font-size:13px}
}

/* =====================================================================
   SMARTPHONE-OPTIMIERUNG
   ===================================================================== */
html{-webkit-tap-highlight-color:transparent}
.swipe-hint{display:none}
@media (hover:none){
  .zoom:hover img,.tile:hover img{transform:none;opacity:1}
  .bw img{filter:grayscale(1) contrast(1.05)}
}
@media (max-width:760px){
  body{font-size:16px}
  .section{padding:72px 0}
  .eyebrow{margin-bottom:16px;font-size:11px}
  .row-head{margin-bottom:36px;gap:16px}
  .h-xl{font-size:clamp(34px,9.6vw,48px)}
  .h-l{font-size:clamp(32px,9vw,44px)}
  .lead{font-size:16px}
  .btn{min-height:50px;padding:0 22px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:28px}
  .hero-cta .btn{width:100%}
  .hero p{font-size:16px;margin-top:20px}
  .hero .big{font-size:clamp(46px,14vw,64px)}
  .hero .kicker{margin-bottom:16px}
  .hero-c{padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .is-ready .lb{height:0}

  /* Wisch-Karussells statt langer Listen */
  .cards,.reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 6px;scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .cards::-webkit-scrollbar,.reels::-webkit-scrollbar{display:none}
  .cards>*{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  .reels>*{flex:0 0 64%;scroll-snap-align:start;min-width:0}
  .js .cards .rv,.js .reels .rv{opacity:1;transform:none}
  .card h3{font-size:28px}
  .card{gap:14px}
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--muted2)}
  .swipe-hint i{display:block;width:34px;height:1px;background:var(--line2);position:relative;overflow:hidden}
  .swipe-hint i::after{content:"";position:absolute;inset:0;background:var(--gold2);transform:translateX(-100%);animation:swipe 2.2s ease-in-out infinite}
  @keyframes swipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
  .cc-banner{padding:26px 22px;gap:16px}
  .cc-banner .t b{font-size:26px}

  /* Portfolio-Raster kompakt zweispaltig */
  .mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .mosaic .col{display:contents}
  .mosaic figure{aspect-ratio:3/4 !important}
  .par{transform:none !important}
  .masonry{columns:2;column-gap:10px}
  .masonry figure{margin-bottom:10px}
  .tile .tcap{display:none}
  .filters{gap:8px;margin-bottom:28px;flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:0 var(--pad);scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fbtn{flex:none}

  .philo{gap:40px}
  .philo h2{font-size:clamp(26px,7.4vw,34px)}
  .philo figure{max-width:none}
  .big-band{padding:10px 0 56px}
  .big-band div{font-size:clamp(54px,16vw,80px)}
  .mq-band{padding:18px 0}
  .zsec{height:170vh}
  .zsec .ztxt{margin-top:30vh}
  .zsec h2{font-size:clamp(38px,11vw,56px)}

  .about{gap:48px}
  .about .pic{max-width:none;margin-right:24px}
  .about .sig{font-size:36px}
  .about .body{font-size:16px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
  .steps .n{font-size:44px}
  .steps h3{font-size:18px}
  .steps p{font-size:14px}
  .faq summary{font-size:17px;padding:20px 0}
  .faq details p{margin-bottom:20px}
  .faq{gap:28px}
  .contact{gap:40px}
  .contact address{margin-top:28px;font-size:16px;gap:10px}
  .form{gap:22px}
  .fld input,.fld textarea{font-size:16px}
  .chips{gap:8px}
  .chips span{padding:0 16px;min-height:46px;font-size:15px}
  .form-end{flex-direction:column-reverse;align-items:stretch}
  .form-end .btn{width:100%}
  .success{padding:40px 24px}
  .success h3{font-size:30px}

  .feature{gap:36px}
  .feature .txt p{font-size:16px;margin-bottom:24px}
  .feature .media.narrow{max-width:72%;margin:0 auto}
  .numlist{margin-top:28px}
  .phero{padding:56px 0 40px}
  .phero .lead{margin-top:22px}
  .split{gap:36px}
  .split>.side{max-width:none}

  .ksplit .media{min-height:56vh}
  .ksplit .media address{left:22px;right:22px;bottom:22px;font-size:17px;gap:4px}
  .ksplit .body{padding:56px var(--pad) 72px}

  .legal{gap:28px}
  .legal article h2{font-size:24px;margin:44px 0 12px}
  .legal .toc a{padding:10px 0}

  .ftr{padding:56px 0 calc(28px + env(safe-area-inset-bottom))}
  .ftr .mq{margin-bottom:48px}
  .ftr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .ftr-grid>div:first-child{grid-column:1/-1}
  .ftr-grid nav a,.ftr-grid div a{min-height:40px;display:flex;align-items:center}
  .ftr-bottom{margin-top:36px;flex-direction:column;gap:6px}

  .igfab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:52px;height:52px}
  .menu nav a{min-height:52px;display:flex;align-items:center}
  .menu{padding:90px 26px calc(30px + env(safe-area-inset-bottom))}
  .menu-foot{margin-top:32px;flex-direction:column;gap:6px}
  .menu-foot a{min-height:40px;display:flex;align-items:center}
  .ck{padding:20px;gap:12px}
  .ck h2{font-size:21px}
  .ck-box{max-height:calc(100svh - 24px)}
  .ck-head,.ck-cats,.ck-foot{padding-left:22px;padding-right:22px}
  .ck-head h2{font-size:28px}
  .plb .x{top:max(14px, env(safe-area-inset-top))}
}
@media (max-width:380px){
  .hero .big{font-size:44px}
  .steps{grid-template-columns:1fr}
  .cards>*{flex-basis:86%}
  .reels>*{flex-basis:72%}
}
/* Weniger Effekte auf schwachen Geräten */
@media (max-width:760px) and (prefers-reduced-data:reduce){.grain{display:none}}


@media (max-width:760px){.hero-c{padding-bottom:calc(92px + env(safe-area-inset-bottom))}}

/* Scroll-Hinweis: rotierender Schriftring */
.scroll-hint{position:absolute;z-index:6;left:50%;bottom:34px;transform:translateX(-50%);width:104px;height:104px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink)}
.scroll-hint .sh-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite;transition:animation-duration .4s}
.scroll-hint .sh-ring text{font-family:var(--mono);font-size:9.6px;letter-spacing:2.6px;fill:rgba(241,235,224,.78)}
.scroll-hint .sh-arrow{width:22px;height:22px;fill:none;stroke:var(--gold2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;animation:shBob 2.4s var(--ease) infinite}
.scroll-hint::before{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid rgba(216,188,143,.45);transition:transform .5s var(--ease),background .4s}
.scroll-hint:hover::before{transform:scale(1.12);background:rgba(216,188,143,.12)}
.scroll-hint:hover .sh-ring{animation-duration:7s}
@keyframes shBob{0%,100%{transform:translateY(-4px);opacity:.6}50%{transform:translateY(5px);opacity:1}}
.mouse{display:none}
@media (max-width:760px){.scroll-hint{display:none}}


/* =====================================================================
   HELL / DUNKEL
   ===================================================================== */
/* Bereiche auf Fotos bleiben immer dunkel */
.hero,.zsec,.ksplit .media,.reel,.plb,.tile,.on-photo{
  --bg:#0D0C0A;--ink:#F1EBE0;--ink2:#DCD4C7;--ink3:#CFC7BA;--muted:#B9B1A4;--muted2:#A79F92;
  --gold:#C9A878;--gold2:#D8BC8F;--line:rgba(241,235,224,.12);--line2:rgba(241,235,224,.5);color:var(--ink)}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F4EE;--bg2:#EFE9DF;--bg3:#FFFFFF;--black:#E9E2D6;
  --ink:#1C1A17;--ink2:#2E2A25;--ink3:#3B362F;--muted:#5C5549;--muted2:#6B6357;--faint:#7D7468;
  --gold:#8A6635;--gold2:#7A592C;
  --line:rgba(28,26,23,.12);--line2:rgba(28,26,23,.3);--stroke:rgba(28,26,23,.45);
  --hdr:rgba(255,255,255,.82);--hdr2:rgba(255,255,255,.94);--menu:rgba(247,244,238,.985);--box:#FFFFFF;--err:#A3321F;
}
:root[data-theme="light"] .hdr-in{box-shadow:0 14px 40px rgba(60,45,20,.12)}
:root[data-theme="light"] .brand img,:root[data-theme="light"] .ftr img,:root[data-theme="light"] .ck img,:root[data-theme="light"] .ck-box img,:root[data-theme="light"] .legal .toc img,:root[data-theme="light"] .pre img{filter:brightness(.12)}
:root[data-theme="light"] .igfab{box-shadow:0 14px 40px rgba(60,45,20,.25)}
:root[data-theme="light"] .ck,:root[data-theme="light"] .ck-box{box-shadow:0 30px 80px rgba(60,45,20,.18)}
:root[data-theme="light"] .ck-modal{background:rgba(40,32,20,.35)}
:root[data-theme="light"] .bw img{filter:grayscale(1) contrast(1.02)}
:root[data-theme="light"] .plb{--ink:#F1EBE0}
html{transition:background-color .4s}
body{transition:background-color .4s,color .4s}

/* Sonne/Mond-Schalter */
.theme-sw{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line2);background:transparent}
.theme-sw button{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,color .3s}
.theme-sw button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.theme-sw button:hover{color:var(--ink)}
.theme-sw button[aria-pressed="true"]:hover{color:var(--bg)}
.menu .theme-sw{align-self:flex-start;margin-top:22px}
@media (max-width:1180px){.hdr-actions .theme-sw{display:none}}