@font-face{font-family:"Figtree";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/figtree-300.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/figtree-400.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/figtree-500.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/figtree-600.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/figtree-700.woff2") format("woff2")}

/* ============ Designsystem: dunkel, Korn, Raster, Farbverläufe Pink/Lila/Rot ============ */
:root, :root[data-theme="dark"], :root[data-theme="light"]{
  --bg:#0B0B0D; --surface:#121215; --ink:#F4F1F2; --muted:#A9A3A8; --line:rgba(255,255,255,.11);
  --accent:#FF4F9A; --accent-ink:#0B0B0D; --accent-soft:rgba(255,79,154,.12);
  --pink:#FF4F9A; --lila:#7B3CFF; --rot:#D7261E; --weinrot:#4A0C12; --rose:#C9A3B4;
  --deep:#070708; --deep-ink:#F4F1F2; --deep-muted:#9C969B; --deep-line:rgba(255,255,255,.09);
  --ph-bg:#4E3A0A; --ph-ink:#FFE6A0;
  --r-img:18px; --r-in:12px;
  --wrap:1240px; --gut:clamp(1.1rem,4vw,2.75rem);
  --font:"Figtree",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,-apple-system,sans-serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='460'><path d='M230 200v60M200 230h60' stroke='white' stroke-opacity='.38' stroke-width='1'/></svg>");
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark } }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.7rem 1rem;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Platzhalter */
.ph{background:var(--ph-bg);color:var(--ph-ink);border-radius:5px;padding:0 .3em;font-weight:600;font-size:.92em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body.ph-off .ph{background:none;color:inherit;padding:0;font-weight:inherit;font-size:inherit}

/* Typografie */
h1,h2,h3{line-height:1.05;letter-spacing:-.025em;margin:0;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.3rem,6vw,4.4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,4.4vw,3.25rem)}
h3{font-size:1.3rem;letter-spacing:-.015em;line-height:1.2}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.5;color:var(--muted);max-width:52ch}
.muted{color:var(--muted)}
.small{font-size:.92rem}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;font:600 1rem/1 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--ink);color:var(--bg)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--bg)}
.deep .btn-ghost{border-color:var(--deep-ink);color:var(--deep-ink)}
.deep .btn-ghost:hover{background:var(--deep-ink);color:var(--deep)}
.deep .btn-primary:hover{background:var(--deep-ink);color:var(--deep)}
.textlink{font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:1.5px}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:1rem;min-height:72px}
.logo{font-weight:800;font-size:1.3rem;letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;margin-right:auto}
.logo-mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:.8rem;letter-spacing:-.02em}
.nav-main{display:none}
.nav-main ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.nav-main a{display:block;white-space:nowrap;padding:.55rem .7rem;border-radius:999px;text-decoration:none;font-weight:500;font-size:.98rem}
.nav-main a:hover{background:var(--surface)}
.nav-main a[aria-current="page"]{background:var(--surface);font-weight:600}
.burger{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.burger svg{width:22px;height:22px}
.header-cta{min-height:44px;padding:.6rem 1.1rem;font-size:.95rem}
.header-cta .short{display:none}
@media (max-width:480px){.header-cta .long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.header-cta .short{display:inline}.bar{gap:.6rem}.logo{font-size:1.15rem}}
.mobile-panel{display:none;border-top:1px solid var(--line);padding:1rem 0 1.5rem}
.mobile-panel.open{display:block}
.mobile-panel ul{list-style:none;margin:0;padding:0}
.mobile-panel a{display:block;padding:.85rem 0;font-size:1.35rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
@media (min-width:1060px){.nav-main{display:block}.burger,.mobile-panel{display:none!important}}

/* Seiten-Router */
.page{display:block}
.page.active{display:block}
.page:focus{outline:none}

/* Abschnitte */
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec-tight{padding-block:clamp(2.5rem,6vw,4.5rem)}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.sec-head p{margin:0}
.deep{background:var(--deep);color:var(--deep-ink)}
.deep .lead,.deep .muted{color:var(--deep-muted)}
.surface{background:var(--surface)}
.split{display:grid;gap:2.5rem}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr;gap:4rem;align-items:start}.split.even{grid-template-columns:1fr 1fr}}

/* Hero mit Schnittmarken – das eine prägende Element */
.hero{padding-top:clamp(2.5rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5rem)}
.crop{position:relative;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2.5rem)}
.crop>i{position:absolute;width:26px;height:26px;border-color:var(--ink);border-style:solid;border-width:0;opacity:.85}
.crop>i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.crop>i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.crop>i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.crop>i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.regmark{position:absolute;top:-13px;right:clamp(2.5rem,12vw,9rem);width:26px;height:26px;color:var(--accent)}
.hero h1{font-size:clamp(2.35rem,10.4vw,7.4rem);line-height:.93;letter-spacing:-.045em;font-weight:800}
.hero h1 .ln{display:block}
.hero .lead{margin-top:1.75rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.25rem;font-size:.95rem;color:var(--muted)}
.hero-meta span{display:inline-flex;align-items:center;gap:.45rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}

@media (prefers-reduced-motion:no-preference){
  .hero.play .ln{opacity:0;transform:translateY(.35em);animation:rise .8s cubic-bezier(.2,.7,.1,1) forwards}
  .hero.play .ln:nth-child(2){animation-delay:.14s}
  .hero.play .ln:nth-child(3){animation-delay:.28s}
  .hero.play .crop>i{animation:mark .7s .45s cubic-bezier(.2,.7,.1,1) both}
  .hero.play .regmark{animation:spin 1.1s .5s cubic-bezier(.2,.7,.1,1) both}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes mark{from{opacity:0;transform:scale(1.6)}to{opacity:.85;transform:none}}
  @keyframes spin{from{opacity:0;transform:rotate(-90deg) scale(.6)}to{opacity:1;transform:none}}
}

/* Medienleiste: Web / Papier / Vor Ort */
.media{display:grid;gap:1rem;margin-top:clamp(2.5rem,6vw,4rem)}
@media (min-width:760px){.media{grid-template-columns:1.45fr 1fr 1fr}}
.frame{background:var(--surface);border-radius:var(--r-img);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.frame .art{aspect-ratio:4/3;display:grid;place-items:center;padding:1.25rem;background:var(--accent-soft);color:var(--accent)}
.frame .art svg{width:100%;height:100%}
.frame figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 1.1rem;font-size:.95rem}
.frame figcaption strong{font-weight:600}
.frame figcaption span{color:var(--muted);font-size:.85rem}

/* Leistungsliste als Zeilen statt Kartenraster */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:grid;gap:.4rem;padding:1.6rem 0;text-decoration:none}
@media (min-width:820px){.rows a{grid-template-columns:minmax(220px,1fr) 1.4fr auto;gap:2rem;align-items:baseline}}
.rows h3{font-size:clamp(1.35rem,2.4vw,1.8rem)}
.rows p{margin:0;color:var(--muted)}
.rows .go{font-weight:600;color:var(--accent);white-space:nowrap}
.rows a:hover h3{color:var(--accent)}
.rows .ext{font-size:.85rem;color:var(--muted);font-weight:500}

/* Punkte-Raster */
.points{display:grid;gap:2rem;margin-top:2.5rem}
@media (min-width:700px){.points{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.points.four{grid-template-columns:repeat(4,1fr)}}
.points h3{margin-bottom:.5rem}
.points p{margin:0;color:var(--muted)}
.deep .points p{color:var(--deep-muted)}
.points .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);margin-bottom:1rem}
.points .ic svg{width:20px;height:20px}

/* Ablauf (echte Reihenfolge → Nummerierung) */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--line)}
.deep .steps li{border-top-color:var(--deep-line)}
.steps li::before{content:counter(s);width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-weight:700;font-size:.95rem}
.steps h3{margin-bottom:.35rem}
.steps p{margin:0;color:var(--muted)}
.deep .steps p{color:var(--deep-muted)}
@media (min-width:980px){
  .steps.h{grid-template-columns:repeat(var(--n,4),1fr);gap:1.5rem}
  .steps.h li{grid-template-columns:1fr;border-top:2px solid var(--line)}
  .deep .steps.h li{border-top-color:var(--deep-line)}
}

/* Projekte */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.chip{min-height:44px;padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:500 .95rem var(--font);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.projects{display:grid;gap:1.5rem}
@media (min-width:700px){.projects{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.projects.three{grid-template-columns:repeat(3,1fr)}}
.project .ph-img{aspect-ratio:4/3;border-radius:var(--r-img);border:1.5px dashed var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);background:repeating-linear-gradient(135deg,transparent 0 14px,color-mix(in srgb,var(--line) 45%,transparent) 14px 15px);font-weight:600;padding:1rem}
.project h3{margin-top:1rem;font-size:1.15rem}
.project p{margin:.3rem 0 0;color:var(--muted);font-size:.95rem}
.tag{display:inline-block;margin-top:.9rem;font-size:.82rem;font-weight:600;color:var(--accent)}
.project[hidden]{display:none}

/* Gruppen (Print, Werbetechnik, Lichtwerbung) */
.groups{display:grid;gap:1.25rem}
@media (min-width:760px){.groups{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.groups.three{grid-template-columns:repeat(3,1fr)}}
.group{background:var(--surface);border-radius:var(--r-img);padding:1.6rem 1.5rem;border:1px solid var(--line);display:flex;flex-direction:column}
.group h3{margin-bottom:.6rem}
.group ul{margin:.25rem 0 0;padding-left:1.1rem;color:var(--muted)}
.group li{margin:.2rem 0}
.group p{color:var(--muted);margin:0}
.group .btn{margin-top:auto;align-self:flex-start;white-space:normal;text-align:left}
.group .btn-wrap{margin-top:1.4rem;display:grid;gap:.5rem}
.linkhint{font-size:.8rem;color:var(--muted)}

/* Hinweis-Box Markentrennung */
.brandnote{display:grid;gap:1.25rem;border:1.5px solid var(--accent);border-radius:var(--r-img);padding:clamp(1.4rem,3vw,2.2rem);background:var(--accent-soft)}
@media (min-width:820px){.brandnote{grid-template-columns:1fr 1fr}}
.brandnote h3{margin-bottom:.4rem}
.brandnote p{margin:0}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.3rem 0;font-weight:600;font-size:1.12rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.4rem;color:var(--muted)}
.faq .a p{margin:0}

/* Breadcrumb + Seitenkopf */
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:1.5rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6}
.crumbs a{text-decoration:none}
.page-head{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.page-head .lead{margin-top:1.25rem}

/* CTA-Band */
.cta-band{border-radius:calc(var(--r-img) + 8px);background:var(--accent);color:var(--accent-ink);padding:clamp(2rem,6vw,4rem);display:grid;gap:1.5rem}
@media (min-width:860px){.cta-band{grid-template-columns:1.5fr auto;align-items:end}}
.cta-band h2{font-size:clamp(1.8rem,4vw,3rem)}
.cta-band p{margin:.9rem 0 0;opacity:.9}
.cta-band .btn{background:var(--accent-ink);color:var(--accent)}
.cta-band .btn:hover{background:var(--ink);color:var(--bg)}

/* Kontakt */
.contact-grid{display:grid;gap:3rem}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr 1.3fr}}
.facts{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem}
.facts span{display:block;font-size:.88rem;color:var(--muted)}
.facts strong,.facts a{font-weight:600;font-size:1.1rem}
form{display:grid;gap:1.15rem}
.field{display:grid;gap:.4rem}
label,.legend{font-weight:600;font-size:.97rem}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-in);padding:.8rem .95rem;min-height:50px;width:100%}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
[aria-invalid="true"]{border-color:#C62828}
.err{color:#C62828;font-size:.88rem;min-height:0}
.choice{display:flex;flex-wrap:wrap;gap:.5rem;border:0;padding:0;margin:0}
.choice legend{margin-bottom:.5rem;padding:0}
.choice label{font-weight:500;display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem 1rem;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;background:var(--surface)}
.choice input{width:18px;height:18px;min-height:0;accent-color:var(--accent);margin:0}
.choice label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;font-size:.95rem}
.consent input{width:20px;height:20px;min-height:0;margin-top:.2rem;accent-color:var(--accent);flex:none}
.hp{position:absolute;left:-9999px}
.success{display:none;border-radius:var(--r-img);background:var(--accent-soft);border:1.5px solid var(--accent);padding:1.75rem}
.success.show{display:block}
.success h3{margin-bottom:.5rem}

/* Footer */
.site-footer{background:var(--deep);color:var(--deep-ink);padding-top:clamp(3.5rem,7vw,5rem);padding-bottom:2rem}
.foot-grid{display:grid;gap:2.5rem}
@media (min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-footer h2{font-size:1rem;letter-spacing:0;margin-bottom:.9rem;color:var(--deep-muted);font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer p{color:var(--deep-muted)}
.foot-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--deep-line);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--deep-muted)}
.ph-toggle{background:transparent;border:1.5px solid var(--deep-line);color:var(--deep-ink);border-radius:999px;padding:.45rem 1rem;font:500 .88rem var(--font);cursor:pointer;min-height:40px}

/* Prose (Impressum/Datenschutz) */
.prose{max-width:70ch}
.prose h2{font-size:1.5rem;margin:2.2rem 0 .8rem}

/* 404 */
.nf{font-size:clamp(6rem,24vw,16rem);font-weight:800;letter-spacing:-.06em;line-height:.85;color:var(--accent)}

/* ============ Look: Poster-Hero mit Verlauf, Raster, Korn ============ */
body{background:var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;background-image:var(--grain);opacity:.075;mix-blend-mode:overlay}
h1,h2,h3{font-weight:400;letter-spacing:-.035em}
h1{font-weight:400}
h2{font-size:clamp(2rem,4.8vw,3.6rem);line-height:1.02}
h3{font-weight:500;letter-spacing:-.015em}
.rows h3{font-weight:400}
.site-header{background:rgba(11,11,13,.62)}
.logo{font-weight:600;letter-spacing:-.03em}
.logo-mark{background:linear-gradient(135deg,var(--lila),var(--pink) 55%,var(--rot));color:#fff;border-radius:50%}
.btn-primary{background:#F4F1F2;color:#0B0B0D}
.btn-primary:hover{background:linear-gradient(100deg,var(--rot),var(--pink) 55%,var(--lila));color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:#F4F1F2;color:#0B0B0D;border-color:#F4F1F2}
.deep .btn-primary:hover{background:linear-gradient(100deg,var(--rot),var(--pink) 55%,var(--lila));color:#fff}
.textlink{color:var(--pink)}
.err{color:#FF8A8A}
[aria-invalid="true"]{border-color:#FF8A8A}

.poster{position:relative;overflow:hidden;isolation:isolate;min-height:calc(100svh - 72px);display:flex;align-items:flex-end;background:#0A0A0B;padding:clamp(7rem,18vh,12rem) 0 clamp(2.5rem,6vw,4.5rem)}
.poster .glow{position:absolute;inset:-10%;z-index:-3;filter:blur(70px) saturate(1.1)}
.poster .glow span{position:absolute;border-radius:50%}
.poster .b1{width:70%;height:34%;right:-8%;top:34%;background:radial-gradient(closest-side,rgba(214,172,190,.62),rgba(150,110,130,.25) 60%,transparent)}
.poster .b2{width:95%;height:52%;left:-5%;bottom:-14%;background:radial-gradient(closest-side,rgba(215,38,30,.85),rgba(120,14,20,.55) 60%,transparent)}
.poster .b3{width:48%;height:24%;right:-4%;top:58%;background:radial-gradient(closest-side,rgba(255,79,154,.8),rgba(255,79,154,.2) 65%,transparent)}
.poster .b4{width:55%;height:40%;left:-12%;top:26%;background:radial-gradient(closest-side,rgba(123,60,255,.42),transparent)}
.poster .b5{width:40%;height:28%;right:4%;bottom:6%;background:radial-gradient(closest-side,rgba(255,120,90,.55),transparent)}
.poster .gridlines{position:absolute;inset:0;z-index:-2;background-image:var(--plus),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:460px 460px,115px 115px,115px 115px;background-position:-230px -230px,0 0,0 0;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 100%)}
.poster .grain{position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.22;mix-blend-mode:overlay}
.poster-inner{width:100%}
.poster .poster-title{font-size:clamp(3.1rem,10.5vw,9.4rem);font-weight:400;line-height:.92;letter-spacing:-.045em;color:#fff}
.poster-title .ln{display:block}
.poster-title .lt{font-weight:300;color:rgba(236,215,222,.62);font-size:.62em;letter-spacing:-.03em}
.poster-foot{display:grid;gap:1rem;margin-top:clamp(2rem,5vw,3.5rem);align-items:end}
@media (min-width:900px){.poster-foot{grid-template-columns:1fr auto;gap:3rem}}
.poster .lead{color:rgba(244,241,242,.78);margin:0}
.poster .btns{margin-top:0}
@media (prefers-reduced-motion:no-preference){
  .poster .glow span{animation:drift 18s ease-in-out infinite alternate}
  .poster .b2{animation-duration:24s}.poster .b3{animation-duration:15s;animation-delay:-4s}.poster .b4{animation-duration:21s}
  @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-4%,3%) scale(1.08)}}
}

.surface{background:var(--surface)}
.deep{background:radial-gradient(55% 60% at 100% 100%,rgba(215,38,30,.38),transparent 70%),radial-gradient(40% 50% at 0% 0%,rgba(123,60,255,.2),transparent 70%),var(--deep)}
.frame{background:var(--surface);border-color:var(--line)}
.frame .art{position:relative;color:rgba(255,255,255,.82);background:radial-gradient(70% 55% at 85% 95%,rgba(215,38,30,.85),transparent 70%),radial-gradient(55% 45% at 75% 45%,rgba(214,172,190,.45),transparent 70%),radial-gradient(55% 55% at 5% 15%,rgba(123,60,255,.45),transparent 70%),radial-gradient(40% 35% at 95% 65%,rgba(255,79,154,.6),transparent 70%),#0E0E10}
.frame .art::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.25;mix-blend-mode:overlay}
.project .ph-img{border:1px solid var(--line);background:radial-gradient(65% 55% at 90% 100%,rgba(215,38,30,.55),transparent 70%),radial-gradient(50% 50% at 0% 0%,rgba(123,60,255,.3),transparent 70%),radial-gradient(40% 40% at 80% 40%,rgba(255,79,154,.3),transparent 70%),#111114}
.tag{color:var(--pink)}
.group{background:rgba(255,255,255,.035);border-color:var(--line)}
.brandnote{border:1px solid rgba(255,79,154,.45);background:radial-gradient(60% 120% at 100% 100%,rgba(215,38,30,.28),transparent 70%),radial-gradient(50% 120% at 0% 0%,rgba(123,60,255,.22),transparent 70%),var(--surface)}
.cta-band{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:radial-gradient(70% 130% at 100% 100%,rgba(255,79,154,.95),transparent 60%),radial-gradient(70% 130% at 0% 100%,rgba(215,38,30,.95),transparent 62%),radial-gradient(60% 90% at 35% 0%,rgba(123,60,255,.8),transparent 62%),#3A0B12}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:.3;mix-blend-mode:overlay}
.cta-band h2{font-weight:400}
.cta-band .btn{background:#0B0B0D;color:#fff}
.cta-band .btn:hover{background:#fff;color:#0B0B0D}
input,select,textarea{background:rgba(255,255,255,.04);border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,79,154,.18)}
.choice label{background:rgba(255,255,255,.03)}
.choice label:has(input:checked){border-color:var(--pink);background:rgba(255,79,154,.12)}
.choice input,.consent input{accent-color:var(--pink)}
.success{background:rgba(255,79,154,.1);border-color:var(--pink)}
.site-footer{background:#050506;border-top:1px solid var(--line)}
.nf{background:linear-gradient(100deg,var(--rot),var(--pink) 50%,var(--lila));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400}
.chip[aria-pressed="true"]{background:#F4F1F2;color:#0B0B0D;border-color:#F4F1F2}
.steps li::before{font-weight:500}

/* ============ Premium-Startseite ============ */
.poster .poster-over{font-size:clamp(.95rem,1.25vw,1.1rem);font-weight:500;line-height:1.45;letter-spacing:0;color:rgba(244,241,242,.72);margin:0 0 clamp(1.25rem,3vw,2rem);max-width:44ch}
.poster .poster-title{margin:0;max-width:none}
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(1rem,2.5vw,1.6rem);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content}
.ticker ul{display:flex;list-style:none;margin:0;padding:0}
.ticker li{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem);padding-right:clamp(1.4rem,3vw,2.6rem);font-size:clamp(1.5rem,3.6vw,2.9rem);font-weight:300;letter-spacing:-.035em;white-space:nowrap}
.ticker li::after{content:"";width:.32em;height:.32em;border-radius:50%;background:linear-gradient(135deg,var(--lila),var(--pink),var(--rot))}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:tick 45s linear infinite}.ticker:hover .ticker-track{animation-play-state:paused}@keyframes tick{to{transform:translateX(-50%)}}}
.split-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.25rem}
.svc-grid{display:grid;gap:1rem}
@media (min-width:860px){.svc-grid{grid-template-columns:1fr 1fr}}
.svc{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:1rem;min-height:320px;padding:clamp(1.6rem,3vw,2.5rem);border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;transition:opacity .5s;background:radial-gradient(60% 70% at 100% 100%,rgba(215,38,30,.55),transparent 70%),radial-gradient(45% 50% at 85% 60%,rgba(255,79,154,.35),transparent 70%)}
.svc:nth-child(2)::before{background:radial-gradient(60% 70% at 100% 100%,rgba(123,60,255,.5),transparent 70%),radial-gradient(45% 50% at 80% 70%,rgba(255,79,154,.3),transparent 70%)}
.svc:nth-child(3)::before{background:radial-gradient(60% 70% at 100% 100%,rgba(255,79,154,.5),transparent 70%),radial-gradient(45% 50% at 70% 90%,rgba(214,172,190,.3),transparent 70%)}
.svc:nth-child(4)::before{background:radial-gradient(60% 70% at 100% 100%,rgba(215,38,30,.6),transparent 70%),radial-gradient(40% 40% at 90% 50%,rgba(255,140,90,.35),transparent 70%)}
.svc:hover::before{opacity:1}
.svc h3{font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:400;letter-spacing:-.035em}
.svc p{margin:0;color:rgba(244,241,242,.72)}
.svc .sub{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1rem}
.svc .sub a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.93rem;text-decoration:none;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.svc .sub a:hover{border-color:var(--pink);background:rgba(255,79,154,.14)}
.svc.wide{min-height:0}
@media (min-width:860px){.svc.wide{grid-column:1/-1;flex-direction:row;align-items:end;justify-content:space-between;gap:3rem}.svc.wide p{max-width:52ch;margin-top:.75rem}.svc.wide .sub{margin-top:0;padding-top:0;flex:none}}
.svc.wide::before{background:radial-gradient(50% 120% at 100% 50%,rgba(255,79,154,.55),transparent 70%),radial-gradient(40% 120% at 70% 100%,rgba(123,60,255,.45),transparent 70%)}
.showcase{display:grid;gap:clamp(1rem,2vw,1.5rem)}
@media (min-width:760px){.showcase{grid-template-columns:1fr 1fr}.showcase .case:nth-child(2){margin-top:clamp(2rem,6vw,5rem)}.showcase .case:nth-child(4){margin-top:clamp(2rem,6vw,5rem);margin-bottom:calc(-1 * clamp(2rem,6vw,5rem))}}
.case .ph-img{aspect-ratio:16/12;border-radius:22px;display:grid;place-items:center;text-align:center;border:1px solid var(--line);background:radial-gradient(65% 55% at 90% 100%,rgba(215,38,30,.6),transparent 70%),radial-gradient(50% 50% at 0% 0%,rgba(123,60,255,.32),transparent 70%),radial-gradient(40% 40% at 80% 40%,rgba(255,79,154,.32),transparent 70%),#111114}
.case-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;padding-top:1rem}
.case-meta h3{font-size:1.25rem;font-weight:400}
.case-meta .tag{margin:0}
.proc{list-style:none;margin:0;padding:0}
.proc li{display:grid;gap:.5rem 2rem;padding-block:clamp(1.5rem,3vw,2.2rem);border-top:1px solid var(--deep-line)}
.proc li:last-child{border-bottom:1px solid var(--deep-line)}
@media (min-width:860px){.proc li{grid-template-columns:9rem 1fr 1.1fr;align-items:baseline}}
.proc .n{font-size:.95rem;color:var(--deep-muted)}
.proc h3{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:400;letter-spacing:-.035em}
.proc p{margin:0;color:var(--deep-muted)}
.founder{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (min-width:860px){.founder{grid-template-columns:.8fr 1.2fr}}
.portrait .ph-img{aspect-ratio:4/5;border-radius:24px;display:grid;place-items:center;border:1px solid var(--line);background:radial-gradient(70% 50% at 50% 100%,rgba(215,38,30,.55),transparent 70%),radial-gradient(60% 50% at 20% 10%,rgba(123,60,255,.35),transparent 70%),#111114}
.home-contact{background:radial-gradient(50% 60% at 0% 100%,rgba(123,60,255,.18),transparent 70%),radial-gradient(50% 60% at 100% 0%,rgba(215,38,30,.2),transparent 70%)}
.home-contact .facts{margin-top:2.5rem}
.wordmark{display:block;margin-top:clamp(2.5rem,6vw,4rem);font-size:clamp(3.2rem,15.5vw,14.5rem);font-weight:300;letter-spacing:-.065em;line-height:.8;background:linear-gradient(100deg,var(--rot),var(--pink) 45%,var(--lila));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;white-space:nowrap}
.success{display:none}.success.show{display:block}
body.live .preview-only{display:none}
.wa{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:.5rem;min-height:52px;padding:.8rem 1.15rem;border-radius:999px;background:#25D366;color:#07140C;font-weight:600;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s}
.wa:hover{transform:translateY(-2px)}
.site-footer{padding-bottom:calc(2rem + 64px)}

.clientcloud{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 0;font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:300;letter-spacing:-.03em;line-height:1.35}
.clientcloud li{display:inline-flex;align-items:center}
.clientcloud li:not(:last-child)::after{content:"";width:.28em;height:.28em;margin:0 .7em;border-radius:50%;background:linear-gradient(135deg,var(--lila),var(--pink),var(--rot))}
.clist{list-style:none!important;padding:0!important;margin:.4rem 0 0!important;color:var(--ink)!important}
.clist li{display:grid;gap:.1rem;padding:.6rem 0;border-top:1px solid var(--line)}
.clist strong{font-weight:500}
.clist span{font-size:.9rem;color:var(--muted)}
.proj-name{display:grid;place-items:center;text-align:center;padding:1.5rem}
.proj-name span{font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:300;letter-spacing:-.045em;line-height:1;color:#fff;text-wrap:balance}
.proj-name.mono span{font-size:clamp(5rem,14vw,10rem);background:linear-gradient(100deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;color:transparent}

.geo-box{border:1px solid var(--line);border-radius:22px;padding:clamp(1.4rem,3vw,2rem);background:radial-gradient(60% 120% at 100% 0%,rgba(123,60,255,.12),transparent 70%),rgba(255,255,255,.03)}
.geo-box h2{font-size:1.1rem;font-weight:500;letter-spacing:0;margin-bottom:1.1rem;color:var(--muted)}
.geo-box dl{display:grid;gap:1rem 2rem;margin:0}
@media (min-width:760px){.geo-box dl{grid-template-columns:repeat(2,1fr)}}
.geo-box dt{font-size:.85rem;color:var(--muted)}
.geo-box dd{margin:.15rem 0 0;font-weight:500}
.geo-box a{text-decoration:underline;text-decoration-color:rgba(255,79,154,.6)}
.chiplinks{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.5rem 0 0}
.chiplinks a{display:inline-flex;align-items:center;min-height:42px;padding:.45rem 1.05rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:rgba(255,255,255,.03);font-size:.95rem}
.chiplinks a:hover{border-color:var(--pink);background:rgba(255,79,154,.12)}
.reflist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.reflist li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.reflist strong{font-weight:500}
.reflist span{color:var(--muted)}
.logo-mark{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}