/* =========================================================
   Sven Bauschke — Fotografie  ·  Design-System
   Designsprache: dunkler "Darkroom"-Look, Archivo,
   Leuchtturm-Glühen (warm) + Neon (grün/blau) in der Headline,
   wählbare Akzentfarbe (--ui), Block-Buttons.
   Farben/Schriften nur hier in :root ändern.
   ========================================================= */
:root{
  --bg:#0E0C0B; --bg-2:#15110D; --bg-3:#1d1813;
  --text:#EDE8E0; --dim:#9A9088; --faint:#6B635B;
  --line:rgba(237,232,224,.10); --line-soft:rgba(237,232,224,.06);
  --ui:#D6A24E;          /* AKZENTFARBE — wird per Panel getestet; Wunschfarbe hier setzen */
  --ink:#0E0C0B;
  --glow-a:rgba(207,161,92,.16);   /* warmes Hintergrund-Wabern (per Theme) */
  --glow-b:rgba(207,161,92,.12);   /* zweite Wabern-Farbe (per Theme) */
  --display:'Archivo',sans-serif;
  --body:'Archivo',sans-serif;
  --mono:'Inter',sans-serif;   /* LABEL-SCHRIFT (Logo-Zusatz, Nav, Eyebrows, Bilddaten, Footer). Name historisch "mono"; jetzt Inter (neutral, gewählt von Sven). */
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ui);color:var(--ink)}
:focus-visible{outline:2px solid var(--ui);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase}
.nb{white-space:nowrap}

/* ambient glows */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(36px)}
.glow.g1{top:-18%;right:22%;width:54vmax;height:54vmax;background:radial-gradient(circle,var(--glow-a),transparent 64%);opacity:.55}
.glow.g2{bottom:-22%;right:-6%;width:40vmax;height:40vmax;background:radial-gradient(circle,var(--glow-b),transparent 66%);opacity:.45}
.glow.g3{display:none}
/* Filmkorn: löst Banding der Verläufe auf + hochwertiger, analoger Look */
body::after{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:reduce){body::after{opacity:.04}}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .4s var(--ease),border-color .4s}
/* Abdunkelnder Verlauf hinter dem Menü, solange noch nicht gescrollt wurde —
   sonst ist die Navigation über hellen Hero-Bildern kaum lesbar. Beim Scrollen
   übernimmt der solide .scrolled-Hintergrund und der Verlauf blendet aus. */
header::before{content:"";position:absolute;left:0;right:0;top:0;height:130px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,12,11,.78),rgba(14,12,11,.42) 55%,rgba(14,12,11,0));
  transition:opacity .4s var(--ease)}
header.scrolled::before{opacity:0}
header.scrolled{background:rgba(14,12,11,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.nav-links a{text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* Anker-Ziele nicht unter dem fixen Header verschwinden lassen */
[id]{scroll-margin-top:84px}
.brand{display:flex;align-items:baseline;gap:.6rem}
.brand b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.98rem;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;color:var(--ui);text-transform:uppercase}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .25s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--ui);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-links a.lang{border:1px solid var(--line);border-radius:100px;padding:.25em .7em;font-size:.66rem;color:var(--text)}
.nav-links a.lang::after{display:none}
.nav-links a.lang:hover{border-color:var(--ui);color:var(--ui)}
.burger{display:none;background:none;border:0;color:var(--text);cursor:pointer;width:34px;height:34px}
.burger span{display:block;width:22px;height:1.5px;background:var(--text);margin:5px auto;transition:.3s var(--ease)}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;min-height:100svh;overflow:hidden;display:flex;align-items:center;padding:clamp(90px,12vh,130px) 0 clamp(50px,8vh,90px)}
/* Cinematic-Hintergrund: durchlaufende Foto-Slideshow (Ken-Burns) */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 2.4s ease;animation:heroKB 36s ease-in-out infinite alternate;will-change:transform,opacity}
.hero-bg .slide.on{opacity:1}
@keyframes heroKB{from{transform:scale(1.06)}to{transform:scale(1.2) translate3d(-2.5%,-2%,0)}}
/* Lese-Scrim (Balken links) + Vignette + feiner Dither gegen Banding */
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(8,7,6,.92) 0%,rgba(8,7,6,.6) 38%,rgba(8,7,6,.12) 72%,rgba(8,7,6,.5) 100%),linear-gradient(0deg,rgba(8,7,6,.8),transparent 46%)}
.hero-vig{position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 26vmax rgba(0,0,0,.6)}
.hero-dither{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='hd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hd)'/%3E%3C/svg%3E")}
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.hero .col{position:relative;z-index:3;max-width:min(680px,94%)}
/* „Balken" — dunkler Verlauf hinter dem Text, links voll, rechts auslaufend */
.hero-panel{position:absolute;z-index:-1;inset:-30px -52vw -30px -44px;background:linear-gradient(100deg,rgba(8,7,6,.9) 0%,rgba(8,7,6,.62) 55%,rgba(8,7,6,.05) 100%)}
@media(prefers-reduced-motion:reduce){.hero-bg .slide{animation:none}}
.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ui);margin-bottom:26px}
.hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,6.4vw,5.3rem);line-height:.92;letter-spacing:-.03em;max-width:13ch}
.hero .sub{color:var(--dim);max-width:42ch;margin-top:26px;line-height:1.6;font-weight:300}
.scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--faint);font-family:var(--mono);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase}
.scrollcue .bar{width:1px;height:34px;background:linear-gradient(var(--ui),transparent);animation:scrolldrop 2.2s ease-in-out infinite}
@keyframes scrolldrop{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
@media(max-width:820px){.scrollcue{display:none}}
@media(prefers-reduced-motion:reduce){.scrollcue .bar{animation:none}}
.scrollcue{transition:opacity .45s var(--ease)}
.scrollcue.gone{opacity:0;pointer-events:none}

.beacon{animation:lighthouse 7s ease-in-out infinite;will-change:text-shadow}
@keyframes lighthouse{
  0%,36%{color:var(--text);text-shadow:0 0 2px rgba(255,200,130,.12)}
  50%{color:#FFF1D6;text-shadow:0 0 7px rgba(255,228,176,.95),0 0 20px rgba(255,205,130,.75),0 0 46px rgba(255,185,95,.55),0 0 86px rgba(255,170,80,.32)}
  66%,100%{color:var(--text);text-shadow:0 0 2px rgba(255,200,130,.12)}
}
.neon{color:#EAFFF6;text-shadow:0 0 4px rgba(80,255,170,.95),0 0 12px rgba(50,235,150,.7),0 0 28px rgba(50,170,255,.6),0 0 56px rgba(40,130,255,.5);animation:flicker 5.5s infinite}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.8}23%{opacity:.55}}

/* ---------- buttons (Block) ---------- */
.actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{cursor:pointer;transition:.28s var(--ease);display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.01em;text-transform:uppercase;border-radius:2px;border:1px solid transparent;padding:1.05em 1.9em}
.btn .arr{transition:transform .28s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.primary{background:var(--ui);color:var(--ink)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:rgba(237,232,224,.05);border-color:var(--line);color:var(--text)}
.btn.ghost:hover{background:rgba(237,232,224,.1)}

/* ---------- portrait ---------- */
.portrait{position:relative;aspect-ratio:4/5;border:1px solid var(--line);overflow:hidden;max-width:420px;margin-left:auto}
.portrait .ph{position:absolute;inset:0;background:
    radial-gradient(75% 65% at 38% 24%, var(--glow-a), transparent 58%),
    radial-gradient(60% 55% at 82% 86%, var(--ui), transparent 60%),
    linear-gradient(165deg,#241d18,#14100c 62%,#0a0807)}
.portrait .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 82% 86%,var(--ui),transparent 60%);opacity:.2;mix-blend-mode:screen}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.7))}
.portrait .tag{position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#d8d2c8}
.af{position:absolute;inset:16px;z-index:2}
.af span{position:absolute;width:16px;height:16px;border:1.5px solid var(--ui);opacity:.85}
.af span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.af span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.af span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.af span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}

/* ---------- sections ---------- */
.section{position:relative;z-index:2;padding:clamp(70px,12vh,150px) 0}
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ui);display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--ui)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .beacon,.neon{animation:none}
  .beacon{color:#FFF1D6;text-shadow:0 0 8px rgba(255,210,150,.6),0 0 28px rgba(255,185,95,.4)}
}

/* statement */
.statement p{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.28;letter-spacing:-.01em;max-width:22ch}
.statement p em{font-style:normal;color:var(--ui)}
.statement .small{font-size:1rem;color:var(--dim);max-width:54ch;margin-top:2rem;line-height:1.7}

/* works */
.works-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(40px,6vh,72px)}
.works-head h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.025em;line-height:1}
.works-head .count{color:var(--faint);text-align:right}
.series{margin-bottom:clamp(60px,9vh,110px)}
.series-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;flex-wrap:wrap;padding-bottom:1.1rem;margin-bottom:1.7rem;border-bottom:1px solid var(--line)}
.series-head .left{flex:1 1 320px}
.series-head h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.015em}
.series-head .intro{color:var(--dim);max-width:52ch;font-size:.98rem;margin-top:.5rem}
.series-head .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--faint);white-space:nowrap}

.grid{display:grid;gap:14px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.frame{position:relative;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft);cursor:pointer;aspect-ratio:4/3}
.frame.tall{aspect-ratio:3/4}
.frame.wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:760px){.frame.wide{grid-column:span 1;aspect-ratio:4/3}}
.frame .plate{position:absolute;inset:0;transition:transform .7s cubic-bezier(.16,.84,.44,1)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.16,.84,.44,1);backface-visibility:hidden;transform-origin:center}
.frame:hover .plate,.frame:hover img,.frame:focus-visible img{transform:scale(1.06);will-change:transform}
/* Video-Kachel: Play-Overlay */
.frame .vplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:54px;height:54px;border-radius:50%;background:rgba(13,11,9,.5);border:1.5px solid rgba(255,255,255,.75);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;padding-left:3px;backdrop-filter:blur(2px);transition:.2s var(--ease);pointer-events:none}
.frame:hover .vplay{background:var(--ui);border-color:var(--ui);color:var(--ink);transform:translate(-50%,-50%) scale(1.1)}
.frame::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(8,7,6,.82));opacity:.5;transition:opacity .4s}
.frame:hover::before{opacity:.85}
.frame .cap{position:absolute;left:14px;right:14px;bottom:13px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;transform:translateY(6px);opacity:0;transition:.4s var(--ease)}
.frame:hover .cap,.frame:focus-visible .cap{transform:none;opacity:1}
.frame .cap .ttl{font-size:.9rem;color:var(--text);line-height:1.25}
.frame .cap .fno{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--ui);white-space:nowrap}
.frame .af{inset:12px;opacity:0;transition:opacity .35s var(--ease)}
.frame:hover .af,.frame:focus-visible .af{opacity:.9}

/* mood placeholders */
.m-texel-light{background:radial-gradient(120% 90% at 30% 18%,rgba(208,224,236,.55),transparent 55%),linear-gradient(165deg,#9fb4c0,#cdbfa3 60%,#6f7e84)}
.m-texel-dune{background:radial-gradient(110% 90% at 70% 20%,rgba(238,224,190,.6),transparent 55%),linear-gradient(160deg,#c9b48c,#8a9aa0)}
.m-texel-sea{background:linear-gradient(180deg,#aab9c0 0%,#7d97a0 45%,#3e5560 100%)}
.m-vegas-night{background:radial-gradient(90% 80% at 75% 80%,rgba(207,120,160,.5),transparent 55%),radial-gradient(80% 70% at 20% 30%,rgba(207,161,92,.45),transparent 60%),linear-gradient(160deg,#1a1326,#0c0a14 70%,#06060a)}
.m-vegas-day{background:radial-gradient(120% 90% at 60% 25%,rgba(244,226,180,.7),transparent 55%),linear-gradient(165deg,#d8b483,#b98a5a 60%,#7a5a44)}
.m-vegas-fire{background:radial-gradient(110% 90% at 50% 30%,rgba(214,120,70,.5),transparent 55%),linear-gradient(160deg,#3a201a,#241a16 70%,#120d0c)}
.m-munich{background:radial-gradient(120% 90% at 40% 20%,rgba(224,206,170,.55),transparent 55%),linear-gradient(165deg,#b9a884,#7f8aa0 70%,#4a5564)}
.m-munich-2{background:linear-gradient(160deg,#c2b394,#8a7f6b 60%,#54514c)}
.m-lindlar{background:radial-gradient(110% 90% at 60% 25%,rgba(206,200,150,.4),transparent 55%),linear-gradient(160deg,#5d6b4e,#6e5e44 60%,#37352b)}
.m-lindlar-2{background:linear-gradient(165deg,#7a6f55,#48402f 70%,#2a261d)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:40px}}
.about h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.025em;line-height:1.02;margin-bottom:1.6rem}
.about p{color:var(--dim);margin-bottom:1.1rem;max-width:50ch}
.about p strong{color:var(--text);font-weight:500}
.facts{margin-top:2.2rem;border-top:1px solid var(--line)}
.facts .row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
.facts .row span:first-child{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.facts .row span:last-child{color:var(--text);font-size:.92rem;text-align:right}
.about .portrait{max-width:none;margin:0}

/* contact */
.contact{text-align:center}
.contact .eyebrow{justify-content:center}
.contact .eyebrow::before{display:none}
.contact h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6.5vw,4.6rem);letter-spacing:-.03em;line-height:1;margin-bottom:1.4rem}
.contact .lead{color:var(--dim);max-width:42ch;margin:0 auto 2.4rem;font-size:1.05rem}
.mailbtn{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,3vw,1.9rem);color:var(--text);border-bottom:2px solid var(--line);padding-bottom:.12em;transition:.3s var(--ease)}
.mailbtn:hover{color:var(--ui);border-color:var(--ui)}
.socials{margin-top:2.6rem;display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap}
.socials a{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .25s}
.socials a:hover{color:var(--ui)}

/* footer */
footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:46px 0 54px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot .brand b{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.95rem}
.foot .legal{display:flex;gap:1.6rem;flex-wrap:wrap}
.foot .legal a{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);transition:color .25s}
.foot .legal a:hover{color:var(--ui)}
.foot .copy{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--faint);width:100%;text-align:center;margin-top:8px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1000;background:rgba(8,7,6,.94);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:5vh 5vw;opacity:0;transition:opacity .4s}
.lb.open{display:flex;opacity:1}
/* Lightbox zeigt das GANZE Bild (kein Beschnitt), an den Bildschirm angepasst.
   Der Zuschnitt/Zoom gilt nur für die Kachel im Album-Raster. */
.lb .stage{position:relative;display:flex;align-items:center;justify-content:center;max-width:min(1400px,90vw);max-height:85vh}
.lb .stage img{display:block;width:auto;height:auto;max-width:min(1400px,90vw);max-height:85vh;object-fit:contain}
.lb .stage video{display:block;width:auto;height:auto;max-width:min(1400px,92vw);max-height:85vh;background:#000;border-radius:2px}
.lb .stage .plate{width:min(1000px,90vw);aspect-ratio:3/2;object-fit:cover}
.lb .lbcap{position:absolute;left:0;right:0;bottom:-2.6rem;display:flex;justify-content:space-between;gap:1rem;color:var(--dim);font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.lb .lbcap .a{color:var(--ui)}
.lb .close{position:absolute;top:-3rem;right:0;background:none;border:0;color:var(--text);font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.lb .close:hover{color:var(--ui)}

/* ---------- AKZENT-PANEL (temporär — zum Entscheiden) ---------- */
.chooser{position:fixed;left:16px;bottom:16px;z-index:300;background:rgba(13,11,9,.94);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:232px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.chooser .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.chooser .head .t{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.chooser .head .cur{font-family:var(--mono);font-size:.62rem;color:var(--ui)}
.chooser .sws{display:flex;gap:8px;flex-wrap:wrap}
.chooser .sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;outline:1px solid rgba(237,232,224,.18);outline-offset:-1px;transition:.18s;padding:0}
.chooser .sw:hover{transform:scale(1.12)}
.chooser .sw.on{border-color:var(--bg);outline:2px solid #fff;outline-offset:2px}
.chooser .note{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;color:var(--faint);margin-top:9px;text-transform:uppercase}
.chooser .hide{background:none;border:0;color:var(--faint);font-family:var(--mono);font-size:.6rem;cursor:pointer;text-transform:uppercase;letter-spacing:.1em}
.chooser .hide:hover{color:var(--text)}
.chooser.min .sws,.chooser.min .note,.chooser.min .cur{display:none}
.chooser.min{width:auto}

/* ---------- mobile ---------- */
@media(max-width:820px){
  .hero{padding-top:118px;padding-bottom:72px}
  .hero-panel{inset:-22px -40px}
  .portrait{margin:0;max-width:320px}
}
@media(max-width:780px){
  /* Vollbild über Viewport-Einheiten erzwingen: der gescrollte Header hat
     backdrop-filter und wird damit zum Bezugsrahmen für position:fixed —
     mit inset:0 wäre das Menü sonst nur header-hoch (72px) und der
     Seiteninhalt schiene durch. 100vw/100dvh hängt nicht am Bezugsrahmen. */
  .nav-links{position:fixed;inset:auto;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:var(--bg);flex-direction:column;justify-content:center;gap:2.2rem;transform:translateX(100%);transition:transform .45s var(--ease);z-index:90}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.1rem}
  .burger{display:block;z-index:95;position:relative}
  .burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .grid.cols-3{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .grid.cols-3{grid-template-columns:1fr}
  .works-head .count{text-align:left}
  .chooser{left:10px;right:10px;bottom:10px;width:auto}
}

/* =========================================================
   GALERIE A (Kino-Mosaik) — Startseite
   ========================================================= */
.gallery-a .series{margin-bottom:clamp(56px,8vh,100px)}
.gallery-a .series-head .meta-link{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;text-align:right;white-space:nowrap}
.gallery-a .series-head .meta-link .see{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ui);opacity:.85;transition:opacity .25s var(--ease)}
.gallery-a .series-head .meta-link:hover .see{opacity:1}
.gallery-a .bigshot{position:relative;display:block;width:100%;aspect-ratio:21/9;margin-bottom:14px}
.gallery-a .bigshot .frame{position:absolute;inset:0;aspect-ratio:auto}
.gallery-a .mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:14px}
.gallery-a .mosaic .frame{display:block;grid-column:span 2;grid-row:span 1;aspect-ratio:auto;height:100%;transition:opacity .35s var(--ease),filter .35s var(--ease)}
.gallery-a .mosaic .frame.tall{grid-row:span 2}
.gallery-a .mosaic .frame.wide{grid-column:span 4}
.gallery-a .mosaic .frame.big{grid-column:span 3;grid-row:span 2}
.gallery-a .mosaic:hover .frame{opacity:.42;filter:grayscale(.35) brightness(.85)}
.gallery-a .mosaic .frame:hover{opacity:1;filter:none}
@media(max-width:760px){
  .gallery-a .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .gallery-a .mosaic .frame,.gallery-a .mosaic .frame.wide,.gallery-a .mosaic .frame.big{grid-column:span 1;grid-row:span 1}
  .gallery-a .mosaic .frame.tall{grid-row:span 2}
}
@media(max-width:680px){.gallery-a .bigshot{aspect-ratio:16/10}}

/* Teaser-Layout-Varianten (im Admin → Startseite umstellbar) */
/* „Raster": gleichmäßige Kacheln statt asymmetrischem Mosaik */
.gallery-a .mosaic.grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
.gallery-a .mosaic.grid .frame{grid-column:auto;grid-row:auto;height:auto;aspect-ratio:4/3}
@media(max-width:680px){.gallery-a .mosaic.grid{grid-template-columns:repeat(2,1fr)}}
/* „Großes Bild": nur das Auftaktbild -> etwas höheres Format */
.gallery-a.teaser-lead .bigshot{aspect-ratio:16/9}

/* =========================================================
   ÜBER MICH — Variante 3 (reduziert & nah)
   ========================================================= */
.about-wrap{padding-top:clamp(50px,8vh,90px)}
.ab3{position:relative;min-height:64vh;display:flex;align-items:flex-end;overflow:hidden;border:1px solid var(--line)}
.ab3 .plate{position:absolute;inset:0;background:radial-gradient(80% 70% at 30% 24%,rgba(207,161,92,.30),transparent 55%),linear-gradient(160deg,#2a221c,#15110d 65%,#0a0807)}
.ab3 .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(8,7,6,.86))}
.ab3 .inner{position:relative;z-index:2;padding:clamp(28px,6vw,72px);max-width:800px}
.ab3 .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ui);margin-bottom:1.2rem}
.ab3 .quote{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.18;letter-spacing:-.01em;margin-bottom:1.6rem}
.ab3 .quote b{font-weight:800}
.ab3 .who{color:var(--dim);max-width:56ch;margin-bottom:1.6rem;line-height:1.7}
.ab3 .who strong{color:var(--text);font-weight:500}
/* Freigestelltes Porträt: schwebt rechts über der Platte, linke Kante weich ausgeblendet */
.ab3 .figure{position:absolute;right:0;top:0;bottom:0;width:min(47%,540px);z-index:1;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.ab3 .figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ab3 .inner{max-width:min(58%,620px)}
/* Weiche Lese-Abschirmung über dem ganzen Block: links dunkel (Text) -> rechts klar
   (liegt über der Figur/z1, unter dem Text/z2), voll fließend, ohne sichtbare Kanten */
.ab3::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(95deg,rgba(8,7,6,.94) 0%,rgba(8,7,6,.72) 28%,rgba(8,7,6,.16) 50%,transparent 64%),linear-gradient(0deg,rgba(8,7,6,.72),transparent 40%)}
@media(max-width:760px){
  .ab3{min-height:76vh}
  .ab3 .figure{left:0;right:auto;width:100%;top:0;bottom:auto;height:54%;opacity:1;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 99%);mask-image:linear-gradient(180deg,#000 60%,transparent 99%)}
  .ab3 .figure img{object-position:50% 28%}
  .ab3 .inner{max-width:100%}
  /* mobil nur unten abdunkeln (Text steht unter der Figur) */
  .ab3::after{background:linear-gradient(0deg,rgba(8,7,6,.9) 16%,transparent 50%)}
}

/* =========================================================
   ALBUM-SEITE (serie.html)
   ========================================================= */
.album-hero{padding:clamp(96px,15vh,150px) 0 clamp(18px,3vh,34px)}
.album-back{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:inline-flex;gap:.5em;margin-bottom:1.8rem;transition:color .25s}
.album-back:hover{color:var(--ui)}
.album-hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:-.03em;line-height:.96}
.album-hero .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui);margin-top:1rem}
.album-hero .intro{color:var(--dim);max-width:62ch;margin-top:1.1rem;font-size:1.05rem;line-height:1.7}
.album-section{position:relative;z-index:2}
/* Album breiter als die Standard-Seiten (passt zur Editor-Vorschau = WYSIWYG) */
.album-hero .wrap, .album-section .wrap{max-width:1600px}
.album-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding-bottom:clamp(60px,10vh,120px)}
.album-grid .frame{display:block;width:100%;grid-column:span 4;aspect-ratio:4/3;font:inherit;color:inherit;text-align:left;padding:0}
.album-grid .frame.tall{aspect-ratio:3/4}
.album-grid .frame.wide{grid-column:span 8;aspect-ratio:16/9}
.album-grid .frame.big{grid-column:span 8;aspect-ratio:3/2}
@media(max-width:820px){
  .album-grid{grid-template-columns:repeat(6,1fr)}
  .album-grid .frame,.album-grid .frame.tall{grid-column:span 3}
  .album-grid .frame.wide,.album-grid .frame.big{grid-column:span 6}
}
@media(max-width:520px){
  .album-grid{grid-template-columns:1fr;gap:12px}
  .album-grid .frame,.album-grid .frame.tall,.album-grid .frame.wide,.album-grid .frame.big{grid-column:span 1;aspect-ratio:4/3}
}

/* Album-Hero mit Titelbild (Aufmacher) */
.album-hero.has-cover{position:relative;padding-top:clamp(120px,24vh,260px);padding-bottom:clamp(28px,5vh,56px);overflow:hidden}
.album-hero.has-cover .cover-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.album-hero.has-cover .cover-bg img{position:absolute;inset:auto;left:0;top:0;width:100%;height:100%;max-width:none;display:block;object-fit:cover;transition:none}
.album-hero.has-cover .cover-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,12,11,.45) 0%,rgba(14,12,11,.72) 60%,var(--bg) 100%)}
.album-hero.has-cover .wrap{position:relative;z-index:1}

/* Album-Textblöcke (Editor-Vorschau UND Live-Seite) */
.album-grid .album-text{grid-column:span 12;display:flex;align-items:center;min-height:120px;padding:clamp(18px,4vw,52px) clamp(6px,2vw,28px)}
.album-grid .album-text.w-std{grid-column:span 4}
.album-grid .album-text.w-wide{grid-column:span 8}
.album-grid .album-text.w-full{grid-column:span 12}
@media(max-width:820px){.album-grid .album-text.w-std,.album-grid .album-text.w-wide{grid-column:span 6}}
@media(max-width:520px){.album-grid .album-text,.album-grid .album-text.w-std,.album-grid .album-text.w-wide,.album-grid .album-text.w-full{grid-column:span 1;min-height:0;padding:18px 4px}}
.album-text .atx{width:100%;font-family:var(--body);font-weight:300;font-size:clamp(1.02rem,1.7vw,1.35rem);line-height:1.7;color:var(--dim)}
.album-text.quote .atx{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.album-text.hand .atx{font-family:'Caveat',cursive;font-weight:600;font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.18;color:var(--text)}
.album-text.fx .atx{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.02em}
/* Leucht-Farben durchsetzen (sonst überstimmt .album-text .atx color:var(--dim) den Effekt) */
.album-text .atx.neon{color:#EAFFF6;-webkit-text-fill-color:#EAFFF6}
.album-text .atx.fx-signal{color:#E2F6FF;-webkit-text-fill-color:#E2F6FF}
.album-text .atx.fx-ember{color:#FFD9A6;-webkit-text-fill-color:#FFD9A6}
.album-text .atx.beacon{color:var(--text);-webkit-text-fill-color:var(--text)}
.album-text .atx.fx-sweep{background:linear-gradient(100deg,var(--dim) 0%,var(--dim) 38%,#FFFFFF 50%,var(--dim) 62%,var(--dim) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Trennlinie */
.album-grid .album-text.is-line{display:flex;align-items:center;min-height:0;padding:clamp(8px,2vw,22px) clamp(6px,2vw,28px)}
.album-text.is-line .divline{width:100%;height:1px;background:var(--line)}
/* Trennbox (Abstand) — Höhe per Inline-Style */
.album-grid .album-text.is-space{min-height:0;padding:0;display:flex;align-items:center;justify-content:center;height:var(--sph,80px)}
.album-text.is-space .space-lbl{display:none}

/* Layout-Designer: vier Modi (Editor + Live) */
.album-grid .frame.gridc{aspect-ratio:auto;overflow:hidden;position:relative}
.album-grid .frame.gridc img{position:absolute;inset:auto;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s cubic-bezier(.16,.84,.44,1),opacity .6s ease;backface-visibility:hidden}
.album-grid .frame.gridc.fit-contain{background:var(--bg)}
/* Frei: gleich große Zellen, Bilder per span/rows */
.album-grid.lm-free{display:grid;grid-template-columns:repeat(auto-fill,var(--cell,100px));grid-auto-rows:var(--cell,100px);gap:var(--gap,16px)}
.album-grid.lm-free .frame.gridc{grid-column:span var(--span,4);grid-row:span var(--rows,4)}
.album-grid.lm-free .album-text{grid-column:1/-1}
.album-grid.lm-free .album-text.txt-cell{grid-column:span var(--span,6);grid-row:span var(--rows,2);overflow:hidden}
.album-grid.lm-free .album-text.is-space{height:auto;grid-row:span var(--rows,1)}
.album-grid.lm-free .album-text.is-line{grid-row:span 1}
/* N pro Zeile: feste Spalten, quadratische Zellen, beschnitten */
.album-grid.lm-cols{display:grid;grid-template-columns:repeat(var(--ncols,3),1fr);gap:var(--gap,16px)}
.album-grid.lm-cols .frame.gridc{grid-column:auto;grid-row:auto;aspect-ratio:1}
.album-grid.lm-cols .album-text{grid-column:1/-1}
/* Pflaster (Justified): Zeilen randvoll, Breiten per JS */
.album-grid.lm-justified{display:flex;flex-wrap:wrap;gap:var(--gap,16px);align-content:flex-start}
.album-grid.lm-justified .album-text{flex:0 0 100%}
/* Spalten (Masonry): CSS-Mehrspalten, Bilder behalten Format */
.album-grid.lm-masonry{display:block;column-gap:var(--gap,16px)}
.album-grid.lm-masonry .ed-block,.album-grid.lm-masonry .frame.gridc{break-inside:avoid;width:100%;margin-bottom:var(--gap,16px);display:block}
.album-grid.lm-masonry .album-text{column-span:all}
.album-grid.lm-masonry .frame.gridc{height:auto;aspect-ratio:auto}
.album-grid.lm-masonry .frame.gridc img{position:static;left:auto;top:auto;width:100%;height:auto}
/* Größen-Griffe nur im Frei-Modus */
.album-grid:not(.lm-free) .rs{display:none}

/* ---- Mobil: Album-Layouts (frei/Spalten/justified/masonry) zu EINER Spalte,
   volle Breite, ganzes Bild ohne Beschnitt. Verhindert das Über-den-Rand-Laufen
   der Kacheln auf schmalen Bildschirmen. !important schlägt die per-JS gesetzten
   Inline-Maße (Justified/Crop). ---- */
@media(max-width:640px){
  .album-grid.lm-free,.album-grid.lm-cols,.album-grid.lm-justified{display:block}
  .album-grid.lm-masonry{column-count:1!important;column-gap:0}
  .album-grid.lm-free .frame.gridc,.album-grid.lm-cols .frame.gridc,
  .album-grid.lm-justified .frame.gridc,.album-grid.lm-masonry .frame.gridc{
    width:100%!important;height:auto!important;aspect-ratio:auto!important;
    grid-column:auto!important;grid-row:auto!important;flex:none!important;
    margin:0 0 var(--gap,12px)!important;display:block}
  .album-grid.lm-free .frame.gridc img,.album-grid.lm-cols .frame.gridc img,
  .album-grid.lm-justified .frame.gridc img,.album-grid.lm-masonry .frame.gridc img{
    position:static!important;left:auto!important;top:auto!important;
    width:100%!important;height:auto!important;object-fit:contain!important;transform:none!important}
  .album-grid.lm-free .album-text,.album-grid.lm-free .album-text.txt-cell,
  .album-grid.lm-cols .album-text{grid-column:auto!important;grid-row:auto!important;width:100%!important}
}

/* Lightbox — Vor/Zurück + Zähler */
.lb .navbtn{position:fixed;top:50%;transform:translateY(-50%);z-index:1010;width:52px;height:52px;border-radius:50%;background:rgba(13,11,9,.55);border:1px solid var(--line);color:var(--text);font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.lb .navbtn:hover{border-color:var(--ui);color:var(--ui);background:rgba(13,11,9,.85)}
.lb .nav-prev{left:clamp(10px,3vw,32px)}
.lb .nav-next{right:clamp(10px,3vw,32px)}
.lb .lbcap .count{color:var(--faint)}
@media(max-width:560px){.lb .navbtn{width:42px;height:42px;font-size:1.3rem}}

/* =========================================================
   PROFIL-SEITE
   ========================================================= */
.p-hero{position:relative;z-index:2;padding:clamp(120px,20vh,200px) 0 clamp(40px,7vh,80px)}
/* Hintergrund, der den Kopf hervorhebt: warmer Glow (Licht) links, kühler Signal-Glow rechts + feines Punkt-Raster (Technik) */
.p-hero::before{content:"";position:absolute;inset:-10% -14% -6%;z-index:-1;pointer-events:none;background:radial-gradient(56% 66% at 22% 48%,rgba(210,162,92,.26),transparent 60%),radial-gradient(52% 64% at 82% 42%,rgba(92,160,235,.34),transparent 62%)}
.p-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;background-image:radial-gradient(rgba(255,255,255,.06) 1.1px,transparent 1.5px);background-size:24px 24px;-webkit-mask-image:radial-gradient(74% 70% at 52% 44%,#000,transparent 76%);mask-image:radial-gradient(74% 70% at 52% 44%,#000,transparent 76%)}
.p-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,8vw,6rem);line-height:.92;letter-spacing:-.03em;margin-bottom:clamp(20px,3vh,32px)}
.p-sub{color:var(--dim);max-width:56ch;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.7}
/* Profil-Kopf mit Porträt: Text links, Bild rechts */
.p-hero-grid{display:grid;grid-template-columns:.9fr 1.14fr;gap:clamp(20px,3.5vw,48px);align-items:center}
.p-hero-portrait{position:relative;width:100%;max-width:760px;margin-left:auto;aspect-ratio:1/1}
/* Freigestelltes Switch-Foto: schwebt ohne Rahmen (Transparenz macht die weichen Kanten) */
.p-hero-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;-webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 97%);mask-image:linear-gradient(180deg,#000 68%,transparent 97%)}
.p-hero-portrait .tag{position:absolute;left:6px;bottom:2px;z-index:3;font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:#cfc7bb}
@media(max-width:820px){
  .p-hero{padding-top:clamp(100px,16vh,150px)}
  .p-hero-grid{grid-template-columns:1fr;gap:clamp(10px,3vw,24px)}
  .p-hero-portrait{order:-1;max-width:400px;margin:0 auto}
}
.p-block{position:relative;z-index:2}
.p-block + .p-block{border-top:1px solid var(--line-soft)}
.p-h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,5vw,3.6rem);letter-spacing:-.03em;line-height:1;margin-bottom:clamp(24px,4vh,44px)}
.p-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(30px,5vw,72px);align-items:start}
@media(max-width:820px){.p-grid{grid-template-columns:1fr;gap:32px}}
.p-text p{color:var(--dim);margin-bottom:1.1rem;max-width:54ch;font-size:1.04rem;line-height:1.75}
.p-text p strong{color:var(--text);font-weight:500}
.p-lead{color:var(--dim);max-width:60ch;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6}
.p-lead strong{color:var(--text);font-weight:500}
.p-facts{border-top:1px solid var(--line)}
.p-facts .row{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
.p-facts .row span:first-child{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.p-facts .row span:last-child{color:var(--text);font-size:.92rem;text-align:right}

/* aktiver Nav-Tab */
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{width:100%}

/* Entwurfs-Marker (Profil — Platzhalter bis Lebenslauf da ist) */
p.draft{color:var(--faint);font-style:italic;border-left:2px solid var(--ui);padding-left:.9em;opacity:.9;max-width:54ch}
span.draft{color:var(--faint);font-style:italic}

/* ---- NEUE Leucht-Effekte (nur Profil-Seite) ----
   Bewusst anders als die Hero-Signatur (.beacon/.neon). */

/* Lichtstreif: ein heller Streifen wandert durchs Wort */
.fx-sweep{
  background:linear-gradient(100deg,var(--text) 0%,var(--text) 36%,#FFFFFF 50%,var(--text) 64%,var(--text) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:fxsweep 4.6s ease-in-out infinite;
}
@keyframes fxsweep{0%{background-position:135% 0}55%,100%{background-position:-35% 0}}

/* Signal-Puls: kühles Cyan, pulsierend (Technik) */
.fx-signal{color:#E2F6FF;animation:fxsignal 3.6s ease-in-out infinite;will-change:text-shadow}
@keyframes fxsignal{
  0%,100%{text-shadow:0 0 4px rgba(90,200,255,.45),0 0 14px rgba(60,150,255,.30)}
  50%{text-shadow:0 0 9px rgba(150,235,255,.95),0 0 24px rgba(70,170,255,.70),0 0 52px rgba(60,130,255,.45)}
}

/* Glut/Ember: warmes Feuer-Flackern (Feuerwehr) */
.fx-ember{color:#FFD9A6;animation:fxember 2.6s ease-in-out infinite;will-change:text-shadow}
@keyframes fxember{
  0%{text-shadow:0 0 7px rgba(255,150,60,.7),0 0 18px rgba(255,90,30,.45)}
  18%{text-shadow:0 0 4px rgba(255,120,40,.5),0 0 12px rgba(255,80,25,.32)}
  32%{text-shadow:0 0 11px rgba(255,185,95,.95),0 0 28px rgba(255,110,40,.6),0 0 48px rgba(255,70,25,.4)}
  48%{text-shadow:0 0 5px rgba(255,130,50,.55),0 0 14px rgba(255,85,28,.4)}
  66%{text-shadow:0 0 9px rgba(255,170,80,.85),0 0 24px rgba(255,100,38,.55)}
  82%{text-shadow:0 0 4px rgba(255,120,45,.5),0 0 12px rgba(255,80,25,.34)}
  100%{text-shadow:0 0 8px rgba(255,160,70,.8),0 0 22px rgba(255,95,35,.5)}
}

@media(prefers-reduced-motion:reduce){
  .fx-sweep{animation:none;-webkit-text-fill-color:var(--text);color:var(--text)}
  .fx-signal{animation:none;text-shadow:0 0 8px rgba(90,200,255,.5),0 0 22px rgba(60,150,255,.35)}
  .fx-ember{animation:none;text-shadow:0 0 8px rgba(255,160,70,.7),0 0 22px rgba(255,95,35,.45)}
}

/* ---- Karriere-Timeline (Profil) ---- */
.timeline{position:relative;margin-top:.5rem;padding-left:30px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--ui),rgba(214,162,78,.15))}
.tl-item{position:relative;padding:0 0 1.7rem 0}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-27px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--ui)}
.tl-item.now::before{background:var(--ui);box-shadow:0 0 0 4px rgba(214,162,78,.18)}
.tl-item .when{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ui)}
.tl-item .role{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2;margin:.3rem 0 .25rem}
.tl-item .org{color:var(--dim);font-size:.9rem}

/* ---- Skill-Chips & Highlight (Profil) ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.6rem}
.chip{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);border:1px solid var(--line);background:rgba(237,232,224,.04);padding:.55em .95em;border-radius:100px}
.p-highlight{margin-top:1.6rem;border:1px solid var(--line);border-left:3px solid var(--ui);background:linear-gradient(100deg,rgba(214,162,78,.10),transparent 72%);padding:1.05rem 1.25rem;border-radius:4px}
.p-highlight .h{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ui);margin-bottom:.4rem}
.p-highlight p{color:var(--text);font-size:.96rem;margin:0;max-width:none;line-height:1.55}

/* ---- Rechtsseiten (Impressum / Datenschutz) ---- */
.wrap.narrow{max-width:860px}
.doc{padding-top:clamp(96px,15vh,150px)}
.doc h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.02em;line-height:1;margin-bottom:1.8rem}
.doc h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:-.005em;margin:2.4rem 0 .7rem}
.doc p,.doc li{color:var(--dim);line-height:1.75;max-width:72ch;margin-bottom:.9rem}
.doc strong{color:var(--text);font-weight:500}
.doc a{color:var(--ui);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{filter:brightness(1.15)}
.doc .small{font-size:.85rem;color:var(--faint);margin-top:2rem}

/* =========================================================
   KUNDENBEREICH / KUNDENALBUM
   ========================================================= */
.kunden-toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:1.6rem 0 .2rem}
.kunden-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;color:var(--faint);max-width:42ch}
.kunden-grid .frame{position:relative}
.kunden-grid .frame .dl{position:absolute;top:10px;right:10px;z-index:4;background:rgba(13,11,9,.72);border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:.5em .75em;border-radius:3px;cursor:pointer;opacity:0;transition:.25s var(--ease)}
.kunden-grid .frame:hover .dl,.kunden-grid .frame:focus-within .dl{opacity:1}
.kunden-grid .frame .dl:hover{border-color:var(--ui);color:var(--ui);background:rgba(13,11,9,.9)}
.kunden-grid .frame .cap{opacity:1;transform:none}

/* Lightbox-Download-Button */
.lb .lb-dl{background:none;border:1px solid var(--line);color:var(--text);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.4em .8em;border-radius:3px;cursor:pointer;transition:.25s var(--ease)}
.lb .lb-dl:hover{border-color:var(--ui);color:var(--ui)}

/* Code-Eingabe */
.code-entry{max-width:440px;margin-top:2.4rem}
.code-entry input{font-family:var(--mono);letter-spacing:.28em;text-align:center;font-size:1.4rem;background:#0c0a08;border:1px solid var(--line);color:var(--text);padding:.7em;border-radius:4px;width:100%}
.code-entry input:focus{outline:1px solid var(--ui);border-color:var(--ui)}
.code-msg{font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--dim);margin-top:1rem;min-height:1.2em}
.code-msg.err{color:#ff6b6b}

/* ---- Cookie-/Datenschutz-Hinweis ---- */
.cookie-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:400;width:calc(100% - 32px);max-width:680px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:rgba(13,11,9,.96);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:8px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.cookie-bar p{font-size:.82rem;color:var(--dim);line-height:1.5;flex:1 1 280px;margin:0}
.cookie-bar a{color:var(--ui);text-decoration:underline;text-underline-offset:2px}
.cookie-bar .ok{cursor:pointer;background:var(--ui);color:var(--ink);border:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.02em;padding:.7em 1.3em;border-radius:3px;white-space:nowrap}
.cookie-bar .ok:hover{filter:brightness(1.1)}
@media(max-width:520px){.cookie-bar{bottom:10px}}

/* ---- Kontaktformular ---- */
.kform{max-width:560px;margin:2.4rem auto 0;text-align:left}
.kform .kf-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kform .kf-row input{flex:1 1 200px}
.kform input,.kform textarea{width:100%;background:#0c0a08;border:1px solid var(--line);color:var(--text);font-family:var(--body);font-size:.95rem;padding:.75em .85em;border-radius:4px}
.kform textarea{margin-bottom:14px;resize:vertical;line-height:1.5}
.kform input:focus,.kform textarea:focus{outline:1px solid var(--ui);border-color:var(--ui)}
.kform .hp{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.kform .kf-foot{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.kform .kf-msg{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--dim)}
.kform .kf-msg.ok{color:#5fe0a8}
.kform .kf-msg.err{color:#ff6b6b}