:root{--m:#e6007e;--y:#f2ff00;--glow-y:0 0 6px rgba(242,255,0,.9),0 0 18px rgba(242,255,0,.55),0 0 40px rgba(242,255,0,.3);--glow-m:0 0 8px rgba(230,0,126,.7),0 0 26px rgba(230,0,126,.4);--k:#0b0b0b;--w:#fff;--g:#9a9a9a;--line:#232323}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font:400 17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--k);color:var(--w);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
img{max-width:100%;display:block}
h1{font-weight:800;letter-spacing:-.02em;line-height:1.1}

/* Banner + Logo */
/* Neon-Einschalten (nur Startseite) */
.banner.neon{position:relative;overflow:hidden}
.neon img{width:100%;height:auto}
.neon .off{filter:brightness(.2) saturate(.2) contrast(1.15)}
.neon .on,.neon .flk{position:absolute;inset:0;opacity:0}
.neon .on-a{-webkit-mask-image:linear-gradient(#000 52%,transparent 66%);mask-image:linear-gradient(#000 52%,transparent 66%);animation:ignite-a 1.7s linear .35s forwards,hum 5s ease-in-out 2.4s infinite}
.neon .on-b{-webkit-mask-image:linear-gradient(transparent 52%,#000 66%);mask-image:linear-gradient(transparent 52%,#000 66%);animation:ignite-b 1.1s linear 1.7s forwards,hum 5s ease-in-out 3.2s infinite}
.neon .flk{opacity:0;filter:brightness(.2) saturate(.2) contrast(1.15);-webkit-mask-image:radial-gradient(ellipse 16% 30% at 86% 40%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 16% 30% at 86% 40%,#000 55%,transparent 100%);animation:flicker 11s linear 5s infinite}
@keyframes ignite-a{0%{opacity:0}6%{opacity:.85}9%{opacity:0}20%{opacity:0}22%{opacity:1}25%{opacity:.15}29%{opacity:.9}31%{opacity:0}46%{opacity:0}48%{opacity:1;filter:brightness(1.35)}70%{opacity:1;filter:brightness(1.1)}100%{opacity:1;filter:brightness(1)}}
@keyframes ignite-b{0%{opacity:0}10%{opacity:.8}14%{opacity:0}35%{opacity:0}38%{opacity:1}42%{opacity:.3}46%{opacity:1;filter:brightness(1.3)}100%{opacity:1;filter:brightness(1)}}
@keyframes hum{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@keyframes flicker{0%,92%{opacity:0}92.5%{opacity:.8}93.2%{opacity:0}94%{opacity:.7}94.4%{opacity:0}97%{opacity:0}97.3%{opacity:.8}97.8%{opacity:0}100%{opacity:0}}
.neon + .bar{transition:box-shadow .6s}
@media (prefers-reduced-motion:reduce){.neon .on{opacity:1;animation:none}.neon .flk{display:none}}

.banner{background:#14140a;line-height:0}
.banner img{width:100%;height:auto}
.bar{position:sticky;top:0;z-index:20;display:flex;justify-content:flex-end;padding:8px clamp(16px,3vw,32px);background:rgba(11,11,11,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.homelogo{display:block;line-height:0}
.homelogo img{width:72px;height:72px;transition:transform .2s,filter .2s}
.homelogo:hover img,.homelogo:focus-visible img{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 0 10px rgba(230,0,126,.7))}

/* Begrüßung */
.welcome{max-width:720px;margin:0 auto;padding:clamp(44px,7vw,84px) 16px 0;text-align:center}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--g);margin-bottom:18px}
.welcome .headline{font-size:clamp(2rem,6vw,3.4rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;margin-bottom:.7em}
.welcome .happy{color:var(--y);text-shadow:var(--glow-y);font-weight:800}
.welcome p{color:#d4d4d4;font-size:1.06rem;margin:0 auto 1em;max-width:36em}
.welcome .claim{font-size:clamp(1.6rem,4.4vw,2.4rem);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--w);margin:1.4em 0 1.1em}
.welcome .claim em{font-style:normal;color:var(--m);text-shadow:var(--glow-m)}
.welcome .sub{color:var(--y);text-shadow:var(--glow-y);font-size:.95rem;margin-bottom:1.8em}

/* Piktogramm-Raster */
.start{max-width:960px;margin:0 auto;padding:clamp(40px,6vw,72px) 16px clamp(50px,8vw,100px);text-align:center}
.start h1{font-size:.8rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--g);margin-bottom:clamp(28px,5vw,56px)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.5vw,28px)}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1/1;padding:18px 14px;text-decoration:none;border:1px solid var(--line);background:#111;transition:border-color .2s,transform .2s,background .2s}
.tile .pic{width:clamp(52px,8vw,84px);height:auto;color:var(--w);transition:color .2s,filter .2s;margin-bottom:4px}
.pic .acc{stroke:var(--m);transition:stroke .2s}
.tile .pic.wide{width:clamp(68px,10.4vw,110px)}
.pic.big.wide{width:clamp(84px,15vw,136px)}
.grid.mini .tile .pic.wide{width:40px}
.pic .accf{fill:var(--m);stroke:none;transition:fill .2s}
.tile small{font-size:.8rem;line-height:1.35;color:#8d8d8d;max-width:17em;transition:color .2s}
.tile:hover small,.tile:focus-visible small{color:#d6d6d6}
.tile:hover .acc,.tile:focus-visible .acc,.tile[aria-current] .acc,.grid.focus .tile.on .acc,.pic.big .acc{stroke:var(--y)}
.tile:hover .accf,.tile:focus-visible .accf,.tile[aria-current] .accf,.grid.focus .tile.on .accf,.pic.big .accf{fill:var(--y)}
.ask .acc{stroke:currentColor}.ask .accf{fill:currentColor}
.tile[aria-current] .pic .acc{stroke:var(--m)}.tile[aria-current] .pic .accf{fill:var(--m)}
.tile span{font-size:.92rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--w);transition:color .2s}
.tile:before{content:"";position:absolute;top:10px;right:10px;width:8px;height:8px;background:var(--m);transition:background .2s}
.tile:hover,.tile:focus-visible{border-color:var(--m);transform:translateY(-4px);background:#151515;box-shadow:var(--glow-m),inset 0 0 30px rgba(230,0,126,.15);outline:none}
.tile:hover .pic,.tile:focus-visible .pic{color:var(--m);filter:drop-shadow(0 0 6px rgba(230,0,126,.8))}
.tile:hover span,.tile:focus-visible span{color:var(--w)}
.tile:hover:before,.tile:focus-visible:before{background:var(--y);box-shadow:var(--glow-y)}
.tile[aria-current]{border-color:var(--y);box-shadow:var(--glow-y)}
.tile[aria-current] .pic{color:var(--y);filter:drop-shadow(0 0 5px rgba(242,255,0,.8))}

/* kleines Raster am Seitenende */
.more{border-top:1px solid var(--line);padding:36px 16px 44px}
.grid.mini{max-width:1000px;margin:0 auto;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.grid.mini .tile{padding:8px 4px}
.grid.mini .tile{gap:6px}
.grid.mini .tile .pic{width:30px}
.grid.mini .tile span{font-size:.56rem;letter-spacing:.06em}
.grid.mini .tile:before{width:5px;height:5px;top:6px;right:6px}

/* Leistungsseite */
.svc{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,80px) 16px clamp(36px,6vw,60px);text-align:center}
.pic.big{width:clamp(64px,12vw,104px);height:auto;color:var(--m);margin:0 auto 22px}
.svc h1{font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:.6em}
.lead{color:#cfcfcf;font-size:1.1rem;max-width:34em;margin:0 auto}
.chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 34px}
.chips li{border:1px solid #3a3a3a;padding:.35em 1em;font-size:.85rem;font-weight:600}
.ask{display:inline-flex;align-items:center;gap:10px;padding:.8em 1.4em;text-decoration:none;font-weight:700;background:var(--m);color:var(--w);border:2px solid var(--m);transition:transform .15s,box-shadow .15s}
.ask .pic{width:22px;height:22px}
.ask:hover,.ask:focus-visible{background:var(--y);border-color:var(--y);color:var(--k);box-shadow:var(--glow-y);outline:none}
.direct{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:6px 0 40px}
.direct .ask+.ask{background:transparent;border-color:var(--y);color:var(--y)}
.direct .ask+.ask:hover{background:var(--y);color:var(--k)}

.reach{margin:-14px auto 36px;font-size:1rem}
.reach a{text-decoration:none;color:var(--w)}
.reach a:hover{color:var(--y);text-shadow:var(--glow-y)}

/* Video-Kopfbereich der Unterseiten */
.vhero{position:relative;height:clamp(300px,58vh,600px);overflow:hidden;display:flex;align-items:flex-end;justify-content:center;border-bottom:3px solid var(--m);box-shadow:var(--glow-m);background:#050505}
.vhero .hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero .hv.px{display:grid;opacity:.55}
.vhero .hv.px span{transition:background .8s}
.vhero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.95) 0%,rgba(11,11,11,.35) 45%,rgba(11,11,11,.15) 100%);pointer-events:none}
.vh-in{position:relative;z-index:1;text-align:center;padding:0 16px clamp(28px,5vw,52px)}
.vh-in .pic.big{margin-bottom:14px;filter:drop-shadow(0 0 10px rgba(230,0,126,.7))}
.vh-in h1{font-size:clamp(1.9rem,5.4vw,3.4rem);text-shadow:0 2px 20px rgba(0,0,0,.8)}
.vhero + .svc{padding-top:clamp(28px,5vw,48px)}
.vhero.has-video{height:auto;display:block;background:#000}
.vhero.has-video:after{display:none}
.vhero.has-video .hv{position:static;display:block;width:100%;height:auto;max-height:72vh;object-fit:cover}
.vh-title{text-align:center;padding:clamp(26px,4vw,44px) 16px 0}
.vh-title .pic.big{margin:0 auto 12px;filter:drop-shadow(0 0 10px rgba(230,0,126,.7))}
.vh-title h1{font-size:clamp(1.9rem,5.4vw,3.4rem)}
.vh-title + .svc{padding-top:14px}
@media (max-width:640px){.vhero{height:max(260px,66vw)}.vh-in .pic.big{width:56px;margin-bottom:8px}.vh-in h1{font-size:1.7rem}}

/* Projekte mit Vorher/Nachher */
.projects{display:grid;gap:26px;margin-bottom:34px}
.proj{background:#111;border:1px solid var(--line)}
.ba{position:relative;overflow:hidden;line-height:0;user-select:none;aspect-ratio:16/10}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba .ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.ba-h{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:var(--y);box-shadow:var(--glow-y);pointer-events:none}
.ba-h:after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--m);color:#fff;font:700 13px/1 system-ui;padding:12px 10px;white-space:nowrap;box-shadow:var(--glow-m)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-l,.ba-r{position:absolute;top:14px;font:800 .72rem/1 system-ui;letter-spacing:.14em;text-transform:uppercase;padding:.5em .8em;pointer-events:none}
.ba-l{left:14px;background:var(--y);color:var(--k)}
.ba-r{right:14px;background:var(--m);color:#fff}
.proj-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:16px 18px}
.proj-info h3{font-size:1.15rem}
.proj-info p{color:#aaa;margin:0;flex:1}
.tag{font:800 .68rem/1 system-ui;letter-spacing:.12em;text-transform:uppercase;padding:.45em .7em;background:var(--y);color:var(--k)}
.tag.on{background:var(--m);color:#fff}
.sheet-btn{font:inherit;font-weight:700;font-size:.88rem;background:none;border:1px solid var(--y);color:var(--y);padding:.55em 1em;cursor:pointer}
.sheet-btn:hover{background:var(--y);color:var(--k);box-shadow:var(--glow-y)}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}

/* Galerie */
.refs{max-width:1200px;margin:0 auto;padding:0 16px 60px}
.gallery{columns:3 300px;column-gap:14px}
.gallery figure{break-inside:avoid;margin:0 0 14px;border:1px solid var(--line);overflow:hidden;background:#111}
.gallery button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gallery img{width:100%;height:auto;transition:transform .3s}
.gallery figure:hover img{transform:scale(1.03)}
.note{color:#777;font-size:.85rem;text-align:center;margin-top:10px}
dialog#lb{border:0;background:transparent;padding:0;max-width:96vw;max-height:96vh;margin:auto}
dialog#lb::backdrop{background:rgba(0,0,0,.92)}
dialog#lb img{max-width:96vw;max-height:92vh;width:auto;height:auto;margin:0 auto;cursor:zoom-out}

/* Formular */
form{display:grid;gap:14px;text-align:left;max-width:560px;margin:0 auto}
label{font-weight:700;font-size:.88rem;display:grid;gap:6px}
input,select,textarea{font:inherit;padding:.75em 1em;background:#0b0b0b;color:var(--w);border:1px solid #333;border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--y);box-shadow:0 0 10px rgba(242,255,0,.35)}
textarea{min-height:140px;resize:vertical}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.88rem;color:#aaa}
label.check input{width:auto;margin-top:.35em}
.hp{position:absolute;left:-9999px}
.btn{display:inline-block;justify-self:start;padding:.8em 1.6em;font:inherit;font-weight:700;text-decoration:none;border:2px solid var(--m);background:var(--m);color:var(--w);cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{background:var(--y);border-color:var(--y);color:var(--k);box-shadow:var(--glow-y)}

/* Rechtstexte (auch kontakt.php) */
.legal{max-width:760px;margin:0 auto;padding:56px 16px 80px}
.legal h1{font-size:clamp(2rem,6vw,3rem);margin-bottom:1.1rem}
.legal h2{font-size:1.25rem;margin:1.6rem 0 .4rem}
.legal p{margin-bottom:.8rem;color:#ddd}
.legal h3{font-size:1.08rem;margin:1.3rem 0 .35rem}
.legal h4{font-size:.98rem;margin:1rem 0 .3rem;color:#eee}
.legal ul{margin:0 0 .8rem 1.2rem;color:#ddd}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--y)}
mark{background:var(--y);color:var(--k);padding:0 .25em;box-shadow:0 0 8px rgba(242,255,0,.5)}

/* Footer */
footer{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:22px 16px;border-top:1px solid var(--line);font-size:.8rem;color:#777}
footer a{text-decoration:none}
footer a:hover{color:var(--y);text-shadow:var(--glow-y)}

/* Drei Kontakt-Buttons unter dem Claim */
.cta3{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cta3 .ask{box-shadow:var(--glow-m)}
.cta3 .ask:hover,.cta3 .ask:focus-visible{box-shadow:var(--glow-y)}
@media (max-width:640px){.cta3{flex-direction:column;align-items:stretch}.cta3 .ask{justify-content:center}}

/* Referenz-Laufband */
.refbar{padding:clamp(48px,7vw,80px) 0 0;text-align:center}
.refbar .eyebrow{margin-bottom:16px}
.band{background:#fff;overflow:hidden;border-top:3px solid var(--m);border-bottom:3px solid var(--m);box-shadow:var(--glow-m)}
.track{display:flex;width:max-content;animation:marquee 120s linear infinite}
.track .dup{display:flex}
.band:hover .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ref{display:flex;align-items:center;justify-content:center;padding:22px clamp(18px,2.6vw,34px);flex:none}
.lg{display:block;background:#1b1b1b;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transition:background .2s,transform .2s}
a.ref:hover .lg,a.ref:focus-visible .lg{background:var(--m);transform:scale(1.12)}
a.ref:focus-visible{outline:2px solid var(--m);outline-offset:-4px}
@media (max-width:640px){.ref{padding:16px 16px}.lg{zoom:.8}}
@media (prefers-reduced-motion:reduce){.band{overflow-x:auto}.track{animation:none}.track .dup{display:none}}

/* Druck / Digital Service */
.duo-btn{display:flex;justify-content:center;gap:clamp(12px,3vw,28px);margin-bottom:clamp(34px,6vw,56px);overflow:hidden;padding:20px 4px}
.svc-btn{flex:0 1 240px;padding:1em 1.2em;text-align:center;text-decoration:none;font-weight:800;font-size:clamp(.95rem,2.4vw,1.15rem);letter-spacing:.04em;text-transform:uppercase;background:var(--m);color:var(--w);border:2px solid var(--m);box-shadow:var(--glow-m);transition:background .2s,color .2s,box-shadow .2s,border-color .2s}
.svc-btn:hover,.svc-btn:focus-visible,.svc-btn.active{background:var(--y);border-color:var(--y);color:var(--k);box-shadow:var(--glow-y);outline:none}
.from-left{animation:inL .9s cubic-bezier(.2,.9,.2,1.15) 1.9s both}
.from-right{animation:inR .9s cubic-bezier(.2,.9,.2,1.15) 2.05s both}
@keyframes inL{from{transform:translateX(-120vw)}to{transform:none}}
@keyframes inR{from{transform:translateX(120vw)}to{transform:none}}

/* Hervorhebung nach Klick auf Druck/Digital */
.grid.focus .tile{opacity:.28;transition:opacity .3s,border-color .2s,transform .2s,box-shadow .2s}
.grid.focus .tile.on{opacity:1;border-color:var(--y);box-shadow:var(--glow-y)}
.grid.focus .tile.on .pic{color:var(--y);filter:drop-shadow(0 0 6px rgba(242,255,0,.8))}
.grid.focus .tile.on span{color:var(--w)}
.grid.focus .tile:hover{opacity:1}

/* Neon-Akzente */
.eyebrow{color:var(--y)!important;text-shadow:var(--glow-y)}
.tile:before{box-shadow:0 0 6px rgba(230,0,126,.8)}
.bar{border-bottom:1px solid rgba(230,0,126,.55);box-shadow:0 1px 18px rgba(230,0,126,.25)}
.more,footer{border-top-color:rgba(230,0,126,.4)}

@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tile small{font-size:.72rem}
  .tile span{font-size:.8rem}
  .grid.mini{grid-template-columns:repeat(3,minmax(0,1fr))}
  .homelogo img{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Kacheln ohne Unterseite (noch nicht verlinkt) */
.tile.soon{cursor:default}