@font-face { font-family:Manrope;src:url('schrift/manrope-latin-wght-normal.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap }
:root { --paper:#f8f7f3;--ink:#17232f;--muted:#526069;--rule:#d5d4cc;--accent:#99702c;--gold:#dbad59;--navy:#122331;--pad:clamp(20px,5.15vw,88px);--sans:Manrope,Arial,sans-serif;--mono:'Cascadia Mono',Consolas,monospace;color:var(--ink);background:var(--paper);font-family:var(--sans);font-synthesis:none }
* { box-sizing:border-box }
body { margin:0 }
button, input, select, textarea { font:inherit }
button, a { touch-action:manipulation }
a { color:inherit;text-decoration:none }
button { cursor:pointer;color:inherit }
button:disabled { opacity:.35;cursor:default }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid #aa7016;outline-offset:4px }
main:focus { outline:0 }
button { border:0;background:none }
img { display:block;width:100%;height:auto }
h1, h2, h3, p { margin:0 }
h1, h2, h3 { font-weight:580;letter-spacing:-.062em;line-height:1.04;text-wrap:balance }
h1 em, h2 em { font-style:normal;color:var(--accent) }
p { line-height:1.62 }
::selection { background:#efd099;color:var(--navy) }
.wrap { max-width:1680px;margin-inline:auto;padding-inline:var(--pad) }
.skip { position:fixed;top:-100px;left:12px;padding:12px;background:white;z-index:100 }
.skip:focus { top:10px }
header { background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:8 }
.header { height:81px;display:flex;align-items:center;gap:clamp(14px,2.1vw,35px) }
.brand { display:inline-flex;align-items:center;min-width:122px }
.brand img { width:132px;height:25px;object-fit:contain }
.header nav { display:flex;align-items:center;gap:clamp(15px,2vw,32px);margin-inline:auto;font-size:13px;font-weight:650 }
.header nav a { padding-block:12px;position:relative }
.header nav a:after, .textlink:after { content:"";position:absolute;height:1px;bottom:5px;left:0;right:0;transform:scaleX(0);transform-origin:left;background:currentColor;transition:transform .23s }
.header nav a:hover:after, .header nav a[aria-current]:after, .textlink:hover:after { transform:scaleX(1) }
.head-contact, .btn { display:inline-flex;justify-content:center;align-items:center;gap:22px;font-weight:650;white-space:nowrap;background:var(--navy);color:white;border:1px solid var(--navy);transition:background .18s,transform .18s,box-shadow .18s }
.head-contact { padding:11px 18px;border-radius:30px;font-size:13px }
.btn { padding:15px 20px;border-radius:5px;font-size:14px;min-height:49px }
.head-contact:hover, .btn:hover { background:#304453;box-shadow:0 4px 14px #1223311a }
.btn svg, .case-title svg, .textlink svg { transition:transform .2s }
.btn:hover svg, .textlink:hover svg { transform:translateX(3px) }
.btn.light { background:var(--paper);color:var(--navy) }
.navtoggle { display:none }
.textlink { display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:700;padding:9px 0;position:relative }
.label, .stack-links small { font:550 11px/1.4 var(--mono);letter-spacing:.085em }
.label { text-transform:uppercase }
.label { display:flex;gap:10px;align-items:center }
.label i { display:block;width:8px;height:8px;background:var(--gold) }
.modulebar, .techband { background:var(--navy);color:#f5f4ee }
.modulebar .wrap { display:grid;grid-template-columns:repeat(5,1fr);padding-block:20px }
.modulebar a { display:flex;gap:12px;align-items:center;justify-content:center;font-size:clamp(12px,.98vw,16px);padding:8px 4px;border-left:1px solid #52606a;transition:color .2s }
.modulebar a:first-child { border:0;justify-content:flex-start }
.modulebar a:last-child { justify-content:flex-end }
.modulebar svg { color:var(--gold) }
.modulebar a:hover { color:var(--gold) }
.section { padding-block:clamp(56px,6.3vw,98px) }
.section-title { display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-block:20px 32px }
.section-title h2, .techband h2 { font-size:clamp(44px,4.55vw,80px);line-height:1.05 }
.section-title .textlink { margin-bottom:4px }
.casegrid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(15px,2vw,32px) }
.case { display:block }
.case img { aspect-ratio:1.75;object-fit:cover;transition:transform .7s }
.case:hover img { transform:scale(1.045) }
.case-title { display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--rule);margin-top:17px;padding-top:13px }
.case-title h3 { font-size:clamp(21px,1.8vw,31px) }
.case:hover .case-title svg { transform:translate(2px,-2px) }
.case p { font-size:14px;color:var(--muted);margin-top:5px }
.techband>.wrap { display:grid;grid-template-columns:1.15fr 1fr;gap:55px;padding-block:clamp(50px,6vw,90px);align-items:center }
.techband h2 { margin:18px 0 25px }
.techband em { color:var(--gold) }
.stack-links a { display:flex;gap:20px;align-items:center;border-top:1px solid #50606b;padding-block:21px;font-size:clamp(17px,1.65vw,28px);letter-spacing:-.025em }
.stack-links a:last-child { border-bottom:1px solid #50606b }
.stack-links small { color:var(--gold) }
.stack-links svg { margin-left:auto }
footer { border-top:1px solid var(--rule) }
footer>.wrap { display:flex;gap:22px;align-items:center;padding-block:30px }
footer .brand { min-width:auto }
footer .brand img { width:100px }
footer>.wrap>span { font-size:13px;color:var(--muted) }
footer .textlink { margin-left:auto }
@media(max-width:1080px) {
.header nav { gap:14px;font-size:12px }
.header { height:72px }
.brand { min-width:auto }
.brand img { width:110px }
.modulebar a { gap:8px }
}
@media(max-width:880px) {
.header nav { display:none }
.head-contact { margin-left:auto }
.navtoggle { display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--rule);border-radius:50% }
#smallnav { position:absolute;inset:100% 0 auto;background:var(--paper);padding:8px var(--pad) 20px;box-shadow:0 15px 20px #16212c12;display:grid }
#smallnav a { padding:14px 0;border-bottom:1px solid var(--rule);font-weight:650 }
.modulebar .wrap { padding-block:14px }
.modulebar a { font-size:12px }
.modulebar svg { width:16px }
}
@media(max-width:680px) {
:root { --pad:21px }
.header { height:64px;gap:10px }
.brand img { width:105px }
.head-contact { padding:9px 14px }
.modulebar .wrap { display:flex;gap:0;flex-wrap:wrap;justify-content:flex-start;padding-block:10px }
.modulebar a, .modulebar a:first-child, .modulebar a:last-child { font-size:12px;justify-content:flex-start;border:0;padding:9px 14px 9px 0 }
.section { padding-block:46px }
.section-title { display:block;margin-block:17px 19px }
.section-title .textlink { margin-top:10px }
.casegrid, .techband>.wrap { grid-template-columns:1fr }
.casegrid { gap:28px }
.casegrid .case img { aspect-ratio:1.95 }
.case-title { margin-top:10px;padding-top:10px }
.techband>.wrap { gap:25px }
.stack-links a { padding-block:16px }
footer>.wrap { flex-wrap:wrap;gap:12px;padding-block:23px }
footer>.wrap>span { font-size:11px }
footer .brand img { width:82px }
}
@media(prefers-reduced-motion:reduce) {
*, *:before, *:after { scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important }
.case:hover img { transform:none }
}
@media (prefers-reduced-motion: no-preference) {
:root { --title-play: title-arrival; --glass-play: glass-reflection; --row-play: module-arrival; }
}
.scroll-photo { position: relative; overflow: hidden; border-radius: 3px; }
.photo-plane { position: absolute; inset: -8% 0; }
.scroll-photo .photo-plane img { position: static; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.case-photo { aspect-ratio: 1.75; }
.case:focus-visible { outline-offset: 4px; }
@media(max-width:680px) {
.case-photo { aspect-ratio: 1.95; }
}
@media(prefers-reduced-motion:reduce) {
.photo-plane { inset: 0; height: 100%; }
}
.opening { --stage-height:clamp(490px,80svh,820px); --travel:clamp(250px,55svh,500px); height:calc(var(--stage-height) + var(--travel)); position:relative; background:#13232b; }
.opening-stage { height:var(--stage-height); position:sticky; top:0; isolation:isolate; overflow:hidden; color:#fff; --edge:100%; --drift:0%; --first-text:1; --next-text:0; --rise:0px; --settle:58px; --progress:0; }
.opening-image, .opening-shade { position:absolute; inset:0; pointer-events:none; }
.opening-image img { width:100%; height:108%; object-fit:cover; transform:translateY(calc(-7% + var(--drift))); }
.opening-image-0 img { object-position:center 42%; }
.opening-image-1 { clip-path:inset(var(--edge) 0 0 0); }
.opening-image-1 img { transform:translateY(calc(0% - var(--drift))); object-position:center 52%; }
.opening-shade { background:linear-gradient(90deg,rgba(9,19,28,.88),rgba(9,19,28,.61) 35%,rgba(9,19,28,.03) 80%),linear-gradient(0deg,rgba(9,19,28,.63),transparent 42%); }
.opening-inside { position:relative; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; padding-block:clamp(22px,3vw,48px); }
.opening-brand, .opening-client, .opening-bottom>span { font:600 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.opening-brand { display:flex; align-items:center; gap:10px; margin-bottom:auto; }
.opening-brand i { width:8px;height:8px;background:var(--gold); }
.opening-brand span { color:var(--gold); }
.opening-copy { display:grid; }
.opening-text { grid-area:1/1; pointer-events:none; }
.opening-client { margin-bottom:12px;color:#f7d498; }
.opening-text h1 { font-size:clamp(56px,6.5vw,112px);line-height:.98;font-weight:570;letter-spacing:-.065em; }
.opening-text p { max-width:43ch;margin-top:18px;font-size:clamp(15px,1.1vw,19px);line-height:1.5; }
.opening-text-0 { opacity:var(--first-text);transform:translateY(var(--rise)); }
.opening-text-1 { opacity:var(--next-text);transform:translateY(var(--settle)); }
.opening-actions { display:flex;gap:22px;align-items:center;margin:24px 0 clamp(20px,4svh,48px); }
.opening-actions>a:last-child { display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650; }
.opening-bottom { width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:11px; }
.opening-track { width:100%;height:2px;background:#ffffff50;overflow:hidden; }
.opening-track i { display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(calc(.05 + var(--progress) * .95)); }
.opening-bottom button { color:inherit;display:flex;gap:8px;align-items:center;padding:6px 0;font-size:12px;text-align:left; }
@media(max-width:680px) {
.opening { --stage-height:clamp(432px,76svh,660px);--travel:clamp(240px,45svh,350px); }
.opening-shade { background:linear-gradient(0deg,#0a1624f0,#0a1624a6 50%,#0a162418 83%),linear-gradient(175deg,#0a162477,transparent 25%); }
.opening-text h1 { font-size:clamp(49px,12vw,76px); }
.opening-image-0 img { object-position:58% center; }
.opening-text p { font-size:15px;margin-top:13px; }
.opening-actions { gap:15px;margin:16px 0 20px; }
.opening-actions .btn { padding:10px 13px;min-height:42px;font-size:12px;gap:9px; }
}
@media(prefers-reduced-motion:reduce) {
.opening-image img, .opening-text { transform:none; }
}
/* Personal content uses the same opening, grid and breakpoints as VIOBIT Modern. */
:root { --gold:#8bc8be; --accent:#43776f; }
.brand { font-weight:800; font-size:clamp(20px,2.2vw,30px); letter-spacing:-.07em; }
[hidden], #smallnav[hidden] { display:none !important; }
.opening-client { color:#b4e3db; }
.opening-text h2 { font-size:clamp(56px,6.5vw,112px); line-height:.98; font-weight:570; letter-spacing:-.065em; }
.opening-image-0 img { object-position:58% center; }
.modulebar .wrap { grid-template-columns:repeat(3,1fr); }
.case-title strong { font-size:clamp(21px,1.8vw,31px); font-weight:600; letter-spacing:-.052em; }
.case summary { cursor:pointer; list-style:none; }
.case summary::-webkit-details-marker { display:none; }
.case summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.case-question { display:block; margin-top:6px; font-size:14px; color:var(--muted); }
.plus { font:400 24px/1 var(--sans); transition:transform .2s; }
details[open] .plus { transform:rotate(45deg); }
.case details p { margin-top:14px; max-width:48ch; }
.bio p,.project-body p,.contact p { font-size:clamp(16px,1.25vw,21px); max-width:50ch; }
.bio p + p, .contact p + p { margin-top:14px; }
.prices { border-top:1px solid var(--rule); }
.pricegrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,40px); }
.price { display:flex; flex-direction:column; border-top:2px solid var(--navy); padding-top:20px; }
.price-step { font:550 11px/1.4 var(--mono); letter-spacing:.085em; text-transform:uppercase; color:var(--accent); }
.price-amount { font-size:clamp(30px,2.5vw,42px); font-weight:580; letter-spacing:-.05em; line-height:1.1; margin:12px 0 10px; color:var(--navy); }
.price-amount span { font-size:14px; font-weight:600; letter-spacing:0; color:var(--muted); margin-left:4px; }
.price-lead { font-size:15px; line-height:1.55; color:var(--muted); max-width:42ch; }
.price ul { list-style:none; padding:0; margin:18px 0 0; font-size:14px; }
.price li { position:relative; padding:10px 0 10px 20px; border-top:1px solid var(--rule); line-height:1.45; }
.price li:last-child { border-bottom:1px solid var(--rule); }
.price li:before { content:""; position:absolute; left:1px; top:16px; width:7px; height:7px; background:var(--gold); }
.price-badge { align-self:flex-start; margin-top:18px; padding:9px 15px; border-radius:30px; background:var(--navy); color:#fff; font-size:13px; font-weight:650; transition:background .18s; }
.price-badge:hover { background:#304453; }
.price-lower { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(20px,3.2vw,55px); margin-top:clamp(40px,4.5vw,72px); align-items:start; }
.guarantee { background:var(--navy); color:#f5f4ee; padding:clamp(24px,2.6vw,42px); border-radius:3px; scroll-margin-top:20px; }
.guarantee h3, .steps h3 { font-size:clamp(24px,2.1vw,34px); margin:14px 0 14px; }
.guarantee p { color:#dce7e9; font-size:clamp(15px,1.15vw,19px); max-width:44ch; }
.steps ol { list-style:none; counter-reset:step; padding:0; margin:0; }
.steps li { counter-increment:step; display:grid; grid-template-columns:44px 1fr; column-gap:10px; padding:15px 0; border-top:1px solid var(--rule); }
.steps li:last-child { border-bottom:1px solid var(--rule); }
.steps li:before { content:counter(step, decimal-leading-zero); grid-row:1 / span 2; font:550 12px/1.7 var(--mono); color:var(--accent); }
.steps strong { font-size:16px; font-weight:650; letter-spacing:-.015em; }
.steps li span { font-size:14px; line-height:1.5; color:var(--muted); margin-top:3px; }
.contact>.wrap { align-items:start; }
.stack-links { padding-top:clamp(0px,4vw,62px); }
.stack-links .label { margin-bottom:16px; }
.request { display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-top:28px; max-width:640px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.wide, .form-foot { grid-column:1 / -1; }
.field label { font:550 11px/1.4 var(--mono); letter-spacing:.085em; text-transform:uppercase; color:#b4c7cb; }
.field input, .field textarea { width:100%; background:#ffffff0d; color:#f5f4ee; border:1px solid #50606b; border-radius:4px; padding:12px 14px; font-size:16px; line-height:1.4; transition:border-color .18s, background .18s; }
.field textarea { resize:vertical; min-height:110px; }
.field input::placeholder { color:#8a9ba2; }
.field input:focus, .field textarea:focus { outline:none; border-color:var(--gold); background:#ffffff16; }
.form-foot { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; margin-top:6px; }
.form-foot small { font-size:13px; color:#b4c7cb; max-width:34ch; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status { margin-top:22px; padding:14px 16px; border-radius:4px; font-size:15px; border:1px solid var(--gold); color:#f5f4ee; }
.form-status.fehler { border-color:#e0a39a; }
@media (max-width:880px) {
  .pricegrid, .price-lower { grid-template-columns:1fr; }
  .stack-links { padding-top:0; }
  .pricegrid { gap:36px; }
}
@media (max-width:560px) {
  .request { grid-template-columns:1fr; }
}
.project { display:grid; grid-template-columns:1.15fr 1fr; gap:55px; align-items:center; }
.project-body .textlink { margin-top:18px; }
.bio p,.contact p { color:#dce7e9; }
footer details { font-size:12px; color:var(--muted); max-width:65ch; }
footer details summary { cursor:pointer; padding-block:10px; }
footer details a { text-decoration:underline; }
footer details p { margin-top:8px; }
@media (max-width:680px) {
  .opening-text h2 { font-size:clamp(49px,12vw,76px); }
  .opening-actions { flex-wrap:wrap; row-gap:8px; }
  .project { grid-template-columns:1fr; gap:0; }
  .modulebar .wrap { justify-content:space-between; }
  .opening-image-0 img { object-position:61% center; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal.animating { animation:arrive .76s cubic-bezier(.2,.72,.24,1) both; }
  @keyframes arrive { from {opacity:.62;transform:translateY(30px)} to {opacity:1;transform:none} }
}


/* Kundenbereiche mit Login */
.client-area { margin:30px 0 8px; }
.client-list { list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--rule); }
.client-list a { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name go" "what go"; gap:2px 18px; align-items:center; padding:16px 2px; border-bottom:1px solid var(--rule); color:inherit; text-decoration:none; transition:background .2s, padding .2s; }
.client-list a:hover, .client-list a:focus-visible { background:rgba(139,200,190,.14); padding-inline:12px; outline:none; }
.cl-name { grid-area:name; font-weight:700; font-size:clamp(17px,1.35vw,21px); }
.cl-what { grid-area:what; color:var(--muted); font:550 11px/1.4 var(--mono); letter-spacing:.085em; text-transform:uppercase; }
.cl-go { grid-area:go; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--accent); }
.client-list a:hover .cl-go svg { transform:translateX(3px); }
.cl-go svg { transition:transform .2s; }
.client-note { font-size:14px !important; color:var(--muted); margin-top:14px; }
@media (prefers-reduced-motion:reduce) { .client-list a, .cl-go svg { transition:none; } }

.client-list .cl-row { display:grid; grid-template-columns:1fr auto; grid-template-areas:"name go" "what go"; gap:2px 18px; align-items:center; padding:16px 2px; border-bottom:1px solid var(--rule); }
.cl-soon { grid-area:go; color:var(--muted); font:550 11px/1.4 var(--mono); letter-spacing:.085em; text-transform:uppercase; }